Files
uni/slides/223015b-2026/assets/demos/ascii-table.html
T
libretech 351e3dfc23 branch-coexist: 3 neue decks 223015b-2026 / 223015c-2026 / dhbw-2026 daneben main
per user-request einen branch der main-content UND rewrite-content trägt — saubere separierung statt symlink/merge-conflict.

struktur:
- slides/<course>/ → main-content restored, eigene assets (kein new-demo-leak)
- slides/<course>-2026/ → rewrite-content, eigene assets (komplett kopiert + new demos)

Makefile: COURSES += 223015b-2026 223015c-2026 dhbw-2026 mit eigenen NAME/KAPITEL/DEPLOY/KLAUSUR-konfig. Klausur für b+c=1, dhbw=leer. Deploy-paths /hdm/223015b-2026 etc.

make build durchlaufen für alle 6 decks, 0 fehler.

dedup: 223015c+dhbw assets identisch in beiden ordnern (kein neu-demos auf b ergänzt). 223015b 86 → 120 files in -2026 (= +34 neue eroeffner/usb-c-drei-achsen/container-vs-codec/etc).
2026-05-14 21:54:15 +02:00

312 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ASCII-Tabelle</title>
<style>
:root {
--hl: #1e5f8a;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
--c-ctrl: #e5e7eb; /* control */
--c-ctrl-text: #4b5563;
--c-space: #fef3c7; /* space */
--c-punct: #ddd6fe; /* punctuation */
--c-digit: #bfdbfe; /* digits */
--c-upper: #bbf7d0; /* uppercase */
--c-lower: #fed7aa; /* lowercase */
--c-del: #fecaca; /* DEL */
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 18px 24px; }
h1 { text-align: center; margin: 0 0 2px; font-size: 1.5rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 14px; font-size: 0.9rem; }
.sub strong { color: var(--dark); }
.table-wrap { display: flex; justify-content: center; }
table.ascii {
border-collapse: separate;
border-spacing: 3px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
table.ascii th, table.ascii td {
width: 68px;
height: 60px;
padding: 0;
text-align: center;
vertical-align: middle;
border-radius: 5px;
}
table.ascii th {
background: var(--dark); color: #fff;
font-size: 0.78rem;
letter-spacing: 0.05em;
font-weight: 700;
width: 56px;
height: 36px;
}
table.ascii th.row { width: 64px; }
table.ascii th .b { display: block; font-size: 0.68rem; opacity: 0.7; font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; }
table.ascii td {
border: 1px solid var(--border);
position: relative;
}
td .hex { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 700; }
td .dec { position: absolute; bottom: 3px; right: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 400; }
td .ch { font-size: 1.45rem; font-weight: 700; line-height: 1; }
td.ctrl .ch { font-size: 0.82rem; font-weight: 700; }
td.ctrl .ch small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
td.ctrl { background: var(--c-ctrl); color: var(--c-ctrl-text); }
td.space { background: var(--c-space); }
td.punct { background: var(--c-punct); }
td.digit { background: var(--c-digit); }
td.upper { background: var(--c-upper); }
td.lower { background: var(--c-lower); }
td.del { background: var(--c-del); color: var(--c-ctrl-text); }
.legend {
margin: 14px auto 0;
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
font-size: 0.85rem;
}
.legend .item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); }
.legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
.legend .swatch.ctrl { background: var(--c-ctrl); }
.legend .swatch.space { background: var(--c-space); }
.legend .swatch.punct { background: var(--c-punct); }
.legend .swatch.digit { background: var(--c-digit); }
.legend .swatch.upper { background: var(--c-upper); }
.legend .swatch.lower { background: var(--c-lower); }
.legend .swatch.del { background: var(--c-del); }
.meta-row {
margin-top: 10px;
display: flex; gap: 18px; justify-content: center;
font-size: 0.85rem; color: var(--muted);
}
.meta-row strong { color: var(--dark); }
.meta-row code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<h1>ASCII-Tabelle (1963) · 7 Bit · 128 Zeichen</h1>
<div class="sub">Spalte = High-Nibble (Hex 0–7) · Zeile = Low-Nibble (Hex 0–F) · <strong>Hex</strong> oben, <strong>Dezimal</strong> unten</div>
<div class="table-wrap">
<table class="ascii">
<thead>
<tr>
<th class="row">↓ Low<br>→ High</th>
<th>0<span class="b">0000</span></th>
<th>1<span class="b">0001</span></th>
<th>2<span class="b">0010</span></th>
<th>3<span class="b">0011</span></th>
<th>4<span class="b">0100</span></th>
<th>5<span class="b">0101</span></th>
<th>6<span class="b">0110</span></th>
<th>7<span class="b">0111</span></th>
</tr>
</thead>
<tbody>
<tr>
<th class="row">0<span class="b">0000</span></th>
<td class="ctrl"><span class="hex">00</span><span class="ch">NUL<small>null</small></span><span class="dec">0</span></td>
<td class="ctrl"><span class="hex">10</span><span class="ch">DLE<small>data link esc</small></span><span class="dec">16</span></td>
<td class="space"><span class="hex">20</span><span class="ch">SP<small>space</small></span><span class="dec">32</span></td>
<td class="digit"><span class="hex">30</span><span class="ch">0</span><span class="dec">48</span></td>
<td class="punct"><span class="hex">40</span><span class="ch">@</span><span class="dec">64</span></td>
<td class="upper"><span class="hex">50</span><span class="ch">P</span><span class="dec">80</span></td>
<td class="punct"><span class="hex">60</span><span class="ch">`</span><span class="dec">96</span></td>
<td class="lower"><span class="hex">70</span><span class="ch">p</span><span class="dec">112</span></td>
</tr>
<tr>
<th class="row">1<span class="b">0001</span></th>
<td class="ctrl"><span class="hex">01</span><span class="ch">SOH<small>start hdr</small></span><span class="dec">1</span></td>
<td class="ctrl"><span class="hex">11</span><span class="ch">DC1<small>XON</small></span><span class="dec">17</span></td>
<td class="punct"><span class="hex">21</span><span class="ch">!</span><span class="dec">33</span></td>
<td class="digit"><span class="hex">31</span><span class="ch">1</span><span class="dec">49</span></td>
<td class="upper"><span class="hex">41</span><span class="ch">A</span><span class="dec">65</span></td>
<td class="upper"><span class="hex">51</span><span class="ch">Q</span><span class="dec">81</span></td>
<td class="lower"><span class="hex">61</span><span class="ch">a</span><span class="dec">97</span></td>
<td class="lower"><span class="hex">71</span><span class="ch">q</span><span class="dec">113</span></td>
</tr>
<tr>
<th class="row">2<span class="b">0010</span></th>
<td class="ctrl"><span class="hex">02</span><span class="ch">STX<small>start txt</small></span><span class="dec">2</span></td>
<td class="ctrl"><span class="hex">12</span><span class="ch">DC2</span><span class="dec">18</span></td>
<td class="punct"><span class="hex">22</span><span class="ch">"</span><span class="dec">34</span></td>
<td class="digit"><span class="hex">32</span><span class="ch">2</span><span class="dec">50</span></td>
<td class="upper"><span class="hex">42</span><span class="ch">B</span><span class="dec">66</span></td>
<td class="upper"><span class="hex">52</span><span class="ch">R</span><span class="dec">82</span></td>
<td class="lower"><span class="hex">62</span><span class="ch">b</span><span class="dec">98</span></td>
<td class="lower"><span class="hex">72</span><span class="ch">r</span><span class="dec">114</span></td>
</tr>
<tr>
<th class="row">3<span class="b">0011</span></th>
<td class="ctrl"><span class="hex">03</span><span class="ch">ETX<small>end txt</small></span><span class="dec">3</span></td>
<td class="ctrl"><span class="hex">13</span><span class="ch">DC3<small>XOFF</small></span><span class="dec">19</span></td>
<td class="punct"><span class="hex">23</span><span class="ch">#</span><span class="dec">35</span></td>
<td class="digit"><span class="hex">33</span><span class="ch">3</span><span class="dec">51</span></td>
<td class="upper"><span class="hex">43</span><span class="ch">C</span><span class="dec">67</span></td>
<td class="upper"><span class="hex">53</span><span class="ch">S</span><span class="dec">83</span></td>
<td class="lower"><span class="hex">63</span><span class="ch">c</span><span class="dec">99</span></td>
<td class="lower"><span class="hex">73</span><span class="ch">s</span><span class="dec">115</span></td>
</tr>
<tr>
<th class="row">4<span class="b">0100</span></th>
<td class="ctrl"><span class="hex">04</span><span class="ch">EOT<small>end trans</small></span><span class="dec">4</span></td>
<td class="ctrl"><span class="hex">14</span><span class="ch">DC4</span><span class="dec">20</span></td>
<td class="punct"><span class="hex">24</span><span class="ch">$</span><span class="dec">36</span></td>
<td class="digit"><span class="hex">34</span><span class="ch">4</span><span class="dec">52</span></td>
<td class="upper"><span class="hex">44</span><span class="ch">D</span><span class="dec">68</span></td>
<td class="upper"><span class="hex">54</span><span class="ch">T</span><span class="dec">84</span></td>
<td class="lower"><span class="hex">64</span><span class="ch">d</span><span class="dec">100</span></td>
<td class="lower"><span class="hex">74</span><span class="ch">t</span><span class="dec">116</span></td>
</tr>
<tr>
<th class="row">5<span class="b">0101</span></th>
<td class="ctrl"><span class="hex">05</span><span class="ch">ENQ<small>enquiry</small></span><span class="dec">5</span></td>
<td class="ctrl"><span class="hex">15</span><span class="ch">NAK</span><span class="dec">21</span></td>
<td class="punct"><span class="hex">25</span><span class="ch">%</span><span class="dec">37</span></td>
<td class="digit"><span class="hex">35</span><span class="ch">5</span><span class="dec">53</span></td>
<td class="upper"><span class="hex">45</span><span class="ch">E</span><span class="dec">69</span></td>
<td class="upper"><span class="hex">55</span><span class="ch">U</span><span class="dec">85</span></td>
<td class="lower"><span class="hex">65</span><span class="ch">e</span><span class="dec">101</span></td>
<td class="lower"><span class="hex">75</span><span class="ch">u</span><span class="dec">117</span></td>
</tr>
<tr>
<th class="row">6<span class="b">0110</span></th>
<td class="ctrl"><span class="hex">06</span><span class="ch">ACK<small>ack</small></span><span class="dec">6</span></td>
<td class="ctrl"><span class="hex">16</span><span class="ch">SYN</span><span class="dec">22</span></td>
<td class="punct"><span class="hex">26</span><span class="ch">&amp;</span><span class="dec">38</span></td>
<td class="digit"><span class="hex">36</span><span class="ch">6</span><span class="dec">54</span></td>
<td class="upper"><span class="hex">46</span><span class="ch">F</span><span class="dec">70</span></td>
<td class="upper"><span class="hex">56</span><span class="ch">V</span><span class="dec">86</span></td>
<td class="lower"><span class="hex">66</span><span class="ch">f</span><span class="dec">102</span></td>
<td class="lower"><span class="hex">76</span><span class="ch">v</span><span class="dec">118</span></td>
</tr>
<tr>
<th class="row">7<span class="b">0111</span></th>
<td class="ctrl"><span class="hex">07</span><span class="ch">BEL<small>bell 🔔</small></span><span class="dec">7</span></td>
<td class="ctrl"><span class="hex">17</span><span class="ch">ETB</span><span class="dec">23</span></td>
<td class="punct"><span class="hex">27</span><span class="ch">'</span><span class="dec">39</span></td>
<td class="digit"><span class="hex">37</span><span class="ch">7</span><span class="dec">55</span></td>
<td class="upper"><span class="hex">47</span><span class="ch">G</span><span class="dec">71</span></td>
<td class="upper"><span class="hex">57</span><span class="ch">W</span><span class="dec">87</span></td>
<td class="lower"><span class="hex">67</span><span class="ch">g</span><span class="dec">103</span></td>
<td class="lower"><span class="hex">77</span><span class="ch">w</span><span class="dec">119</span></td>
</tr>
<tr>
<th class="row">8<span class="b">1000</span></th>
<td class="ctrl"><span class="hex">08</span><span class="ch">BS<small>backspace</small></span><span class="dec">8</span></td>
<td class="ctrl"><span class="hex">18</span><span class="ch">CAN</span><span class="dec">24</span></td>
<td class="punct"><span class="hex">28</span><span class="ch">(</span><span class="dec">40</span></td>
<td class="digit"><span class="hex">38</span><span class="ch">8</span><span class="dec">56</span></td>
<td class="upper"><span class="hex">48</span><span class="ch">H</span><span class="dec">72</span></td>
<td class="upper"><span class="hex">58</span><span class="ch">X</span><span class="dec">88</span></td>
<td class="lower"><span class="hex">68</span><span class="ch">h</span><span class="dec">104</span></td>
<td class="lower"><span class="hex">78</span><span class="ch">x</span><span class="dec">120</span></td>
</tr>
<tr>
<th class="row">9<span class="b">1001</span></th>
<td class="ctrl"><span class="hex">09</span><span class="ch">HT<small>tab ⇥</small></span><span class="dec">9</span></td>
<td class="ctrl"><span class="hex">19</span><span class="ch">EM</span><span class="dec">25</span></td>
<td class="punct"><span class="hex">29</span><span class="ch">)</span><span class="dec">41</span></td>
<td class="digit"><span class="hex">39</span><span class="ch">9</span><span class="dec">57</span></td>
<td class="upper"><span class="hex">49</span><span class="ch">I</span><span class="dec">73</span></td>
<td class="upper"><span class="hex">59</span><span class="ch">Y</span><span class="dec">89</span></td>
<td class="lower"><span class="hex">69</span><span class="ch">i</span><span class="dec">105</span></td>
<td class="lower"><span class="hex">79</span><span class="ch">y</span><span class="dec">121</span></td>
</tr>
<tr>
<th class="row">A<span class="b">1010</span></th>
<td class="ctrl"><span class="hex">0A</span><span class="ch">LF<small>↵ newline</small></span><span class="dec">10</span></td>
<td class="ctrl"><span class="hex">1A</span><span class="ch">SUB<small>EOF DOS</small></span><span class="dec">26</span></td>
<td class="punct"><span class="hex">2A</span><span class="ch">*</span><span class="dec">42</span></td>
<td class="punct"><span class="hex">3A</span><span class="ch">:</span><span class="dec">58</span></td>
<td class="upper"><span class="hex">4A</span><span class="ch">J</span><span class="dec">74</span></td>
<td class="upper"><span class="hex">5A</span><span class="ch">Z</span><span class="dec">90</span></td>
<td class="lower"><span class="hex">6A</span><span class="ch">j</span><span class="dec">106</span></td>
<td class="lower"><span class="hex">7A</span><span class="ch">z</span><span class="dec">122</span></td>
</tr>
<tr>
<th class="row">B<span class="b">1011</span></th>
<td class="ctrl"><span class="hex">0B</span><span class="ch">VT</span><span class="dec">11</span></td>
<td class="ctrl"><span class="hex">1B</span><span class="ch">ESC<small>escape</small></span><span class="dec">27</span></td>
<td class="punct"><span class="hex">2B</span><span class="ch">+</span><span class="dec">43</span></td>
<td class="punct"><span class="hex">3B</span><span class="ch">;</span><span class="dec">59</span></td>
<td class="upper"><span class="hex">4B</span><span class="ch">K</span><span class="dec">75</span></td>
<td class="punct"><span class="hex">5B</span><span class="ch">[</span><span class="dec">91</span></td>
<td class="lower"><span class="hex">6B</span><span class="ch">k</span><span class="dec">107</span></td>
<td class="punct"><span class="hex">7B</span><span class="ch">{</span><span class="dec">123</span></td>
</tr>
<tr>
<th class="row">C<span class="b">1100</span></th>
<td class="ctrl"><span class="hex">0C</span><span class="ch">FF<small>form feed</small></span><span class="dec">12</span></td>
<td class="ctrl"><span class="hex">1C</span><span class="ch">FS</span><span class="dec">28</span></td>
<td class="punct"><span class="hex">2C</span><span class="ch">,</span><span class="dec">44</span></td>
<td class="punct"><span class="hex">3C</span><span class="ch">&lt;</span><span class="dec">60</span></td>
<td class="upper"><span class="hex">4C</span><span class="ch">L</span><span class="dec">76</span></td>
<td class="punct"><span class="hex">5C</span><span class="ch">\</span><span class="dec">92</span></td>
<td class="lower"><span class="hex">6C</span><span class="ch">l</span><span class="dec">108</span></td>
<td class="punct"><span class="hex">7C</span><span class="ch">|</span><span class="dec">124</span></td>
</tr>
<tr>
<th class="row">D<span class="b">1101</span></th>
<td class="ctrl"><span class="hex">0D</span><span class="ch">CR<small>carriage</small></span><span class="dec">13</span></td>
<td class="ctrl"><span class="hex">1D</span><span class="ch">GS</span><span class="dec">29</span></td>
<td class="punct"><span class="hex">2D</span><span class="ch">-</span><span class="dec">45</span></td>
<td class="punct"><span class="hex">3D</span><span class="ch">=</span><span class="dec">61</span></td>
<td class="upper"><span class="hex">4D</span><span class="ch">M</span><span class="dec">77</span></td>
<td class="punct"><span class="hex">5D</span><span class="ch">]</span><span class="dec">93</span></td>
<td class="lower"><span class="hex">6D</span><span class="ch">m</span><span class="dec">109</span></td>
<td class="punct"><span class="hex">7D</span><span class="ch">}</span><span class="dec">125</span></td>
</tr>
<tr>
<th class="row">E<span class="b">1110</span></th>
<td class="ctrl"><span class="hex">0E</span><span class="ch">SO</span><span class="dec">14</span></td>
<td class="ctrl"><span class="hex">1E</span><span class="ch">RS</span><span class="dec">30</span></td>
<td class="punct"><span class="hex">2E</span><span class="ch">.</span><span class="dec">46</span></td>
<td class="punct"><span class="hex">3E</span><span class="ch">&gt;</span><span class="dec">62</span></td>
<td class="upper"><span class="hex">4E</span><span class="ch">N</span><span class="dec">78</span></td>
<td class="punct"><span class="hex">5E</span><span class="ch">^</span><span class="dec">94</span></td>
<td class="lower"><span class="hex">6E</span><span class="ch">n</span><span class="dec">110</span></td>
<td class="punct"><span class="hex">7E</span><span class="ch">~</span><span class="dec">126</span></td>
</tr>
<tr>
<th class="row">F<span class="b">1111</span></th>
<td class="ctrl"><span class="hex">0F</span><span class="ch">SI</span><span class="dec">15</span></td>
<td class="ctrl"><span class="hex">1F</span><span class="ch">US</span><span class="dec">31</span></td>
<td class="punct"><span class="hex">2F</span><span class="ch">/</span><span class="dec">47</span></td>
<td class="punct"><span class="hex">3F</span><span class="ch">?</span><span class="dec">63</span></td>
<td class="upper"><span class="hex">4F</span><span class="ch">O</span><span class="dec">79</span></td>
<td class="punct"><span class="hex">5F</span><span class="ch">_</span><span class="dec">95</span></td>
<td class="lower"><span class="hex">6F</span><span class="ch">o</span><span class="dec">111</span></td>
<td class="del"><span class="hex">7F</span><span class="ch">DEL</span><span class="dec">127</span></td>
</tr>
</tbody>
</table>
</div>
<div class="legend">
<div class="item"><span class="swatch ctrl"></span>Steuerzeichen (0–31)</div>
<div class="item"><span class="swatch space"></span>Leerzeichen (32)</div>
<div class="item"><span class="swatch punct"></span>Satzzeichen</div>
<div class="item"><span class="swatch digit"></span>Ziffern (48–57)</div>
<div class="item"><span class="swatch upper"></span>Großbuchstaben (65–90)</div>
<div class="item"><span class="swatch lower"></span>Kleinbuchstaben (97–122)</div>
<div class="item"><span class="swatch del"></span>DEL (127)</div>
</div>
<div class="meta-row">
<span><strong>Beispiel:</strong> <code>A</code> = Hex <code>41</code> = Dez <code>65</code> = Bin <code>0100&nbsp;0001</code></span>
<span><strong>Trick:</strong> Ziffern <code>0–9</code> liegen bei <code>30–39</code> · <code>'A'+1='B'</code> · Groß ↔ Klein: Bit 5 togglen</span>
</div>
</body>
</html>