223015b: neuauflage ascii-tabelle + sync byte-nibble-hex/hex-dec-table aus c
- ascii-table.html: 16x8 grid, kategorie-gefärbt (ctrl/digit/upper/lower/punct/del) hex+dezimal pro zelle, legende, beispiel-zeile - byte-nibble-hex + hex-dec-table aus 223015c kopiert für slide-parität
This commit is contained in:
311
slides/223015b/assets/demos/ascii-table.html
Normal file
311
slides/223015b/assets/demos/ascii-table.html
Normal file
@@ -0,0 +1,311 @@
|
|||||||
|
<!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">&</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"><</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">></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 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>
|
||||||
185
slides/223015b/assets/demos/byte-nibble-hex.html
Normal file
185
slides/223015b/assets/demos/byte-nibble-hex.html
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Byte → Nibble → Hex</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--hl: #d63384;
|
||||||
|
--dark: #1a1a2e;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--border: #cbd5e1;
|
||||||
|
--bg-soft: #f8fafc;
|
||||||
|
}
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||||||
|
body { padding: 28px 32px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
|
||||||
|
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
|
||||||
|
|
||||||
|
.stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||||
|
|
||||||
|
.level { display: flex; flex-direction: column; align-items: center; }
|
||||||
|
.label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
|
||||||
|
|
||||||
|
/* Level 1: whole byte */
|
||||||
|
.byte {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border: 2px solid var(--dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
}
|
||||||
|
.byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
|
||||||
|
.byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
|
||||||
|
|
||||||
|
/* Split arrows */
|
||||||
|
.split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
|
||||||
|
.split .arrow {
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-left: 9px solid transparent;
|
||||||
|
border-right: 9px solid transparent;
|
||||||
|
border-top: 12px solid var(--hl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Level 2: two nibbles */
|
||||||
|
.nibbles { display: flex; gap: 80px; }
|
||||||
|
.nibble {
|
||||||
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: 2px solid var(--hl);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
|
||||||
|
.nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
|
||||||
|
.nibble .meta { font-size: 0.78rem; color: var(--muted); }
|
||||||
|
|
||||||
|
.single-arrow {
|
||||||
|
width: 0; height: 0;
|
||||||
|
border-left: 9px solid transparent;
|
||||||
|
border-right: 9px solid transparent;
|
||||||
|
border-top: 12px solid var(--hl);
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Level 3: hex digits */
|
||||||
|
.hex-digits { display: flex; gap: 80px; }
|
||||||
|
.hex-digit {
|
||||||
|
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||||
|
padding: 8px 22px;
|
||||||
|
border: 2px solid var(--dark);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--dark);
|
||||||
|
color: var(--hl);
|
||||||
|
}
|
||||||
|
.hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
|
||||||
|
.hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
|
||||||
|
|
||||||
|
/* Merge down to byte */
|
||||||
|
.merge {
|
||||||
|
display: flex; justify-content: center; margin-top: 2px;
|
||||||
|
}
|
||||||
|
.merge-v {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 60px 60px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.merge-v .line {
|
||||||
|
height: 20px;
|
||||||
|
border-right: 2px solid var(--hl);
|
||||||
|
}
|
||||||
|
.merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
|
||||||
|
.bottom-bar { height: 2px; background: var(--hl); width: 120px; }
|
||||||
|
|
||||||
|
/* Final result */
|
||||||
|
.result {
|
||||||
|
margin-top: 14px;
|
||||||
|
padding: 14px 22px;
|
||||||
|
background: #fef3f8;
|
||||||
|
border-left: 4px solid var(--hl);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
.result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
|
||||||
|
.result strong { color: var(--hl); }
|
||||||
|
|
||||||
|
.math {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--dark);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
|
||||||
|
<div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
|
||||||
|
|
||||||
|
<div class="stage">
|
||||||
|
<!-- Level 1 -->
|
||||||
|
<div class="level">
|
||||||
|
<div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
|
||||||
|
<div class="byte">
|
||||||
|
<span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
|
||||||
|
<span class="sep"></span>
|
||||||
|
<span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="split">
|
||||||
|
<div class="arrow"></div>
|
||||||
|
<div class="arrow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Level 2 -->
|
||||||
|
<div class="level">
|
||||||
|
<div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
|
||||||
|
<div class="nibbles">
|
||||||
|
<div class="nibble">
|
||||||
|
<div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
|
||||||
|
<div class="meta">= 4 (dez)</div>
|
||||||
|
</div>
|
||||||
|
<div class="nibble">
|
||||||
|
<div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
|
||||||
|
<div class="meta">= 13 (dez)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="split">
|
||||||
|
<div class="arrow"></div>
|
||||||
|
<div class="arrow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Level 3 -->
|
||||||
|
<div class="level">
|
||||||
|
<div class="label">2 Hex-Ziffern · Symbole 0–F</div>
|
||||||
|
<div class="hex-digits">
|
||||||
|
<div class="hex-digit">
|
||||||
|
<div class="digit">4</div>
|
||||||
|
<div class="meta">Nibble → 1 Ziffer</div>
|
||||||
|
</div>
|
||||||
|
<div class="hex-digit">
|
||||||
|
<div class="digit">D</div>
|
||||||
|
<div class="meta">13 → D</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="result">
|
||||||
|
<code>01001101</code> (bin) = <code>4D</code> (hex) = <strong>77</strong> (dez) = <strong>"M"</strong> (ASCII)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="math">
|
||||||
|
<span class="eq">16 × 16 = 256</span> · <span class="eq">2⁴ × 2⁴ = 2⁸</span> · Darum passt Hex so gut zu Bytes.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</content>
|
||||||
|
</invoke>
|
||||||
BIN
slides/223015b/assets/demos/byte-nibble-hex.png
Normal file
BIN
slides/223015b/assets/demos/byte-nibble-hex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
67
slides/223015b/assets/demos/hex-dec-table.html
Normal file
67
slides/223015b/assets/demos/hex-dec-table.html
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Hex → Dezimal</title>
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
|
||||||
|
body { padding: 28px; }
|
||||||
|
h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
|
||||||
|
.sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
|
||||||
|
table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
|
||||||
|
th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
|
||||||
|
thead th { background: #1a1a2e; color: #fff; }
|
||||||
|
tbody th { background: #334155; color: #fff; font-weight: 600; }
|
||||||
|
tbody td.ascii { background: #f3f4f6; }
|
||||||
|
tbody td.nonascii { background: #fff; color: #6b7280; }
|
||||||
|
.corner { background: #0f0f23; color: #d63384; }
|
||||||
|
.legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
|
||||||
|
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
|
||||||
|
.example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
|
||||||
|
code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Hex → Dezimal</h1>
|
||||||
|
<div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="corner">×16 / +</th>
|
||||||
|
<th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
|
||||||
|
<th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
<span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
|
||||||
|
<span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const rows = '0123456789ABCDEF';
|
||||||
|
const tb = document.querySelector('tbody');
|
||||||
|
for (let r = 0; r < 16; r++) {
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
const th = document.createElement('th');
|
||||||
|
th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
|
||||||
|
tr.appendChild(th);
|
||||||
|
for (let c = 0; c < 16; c++) {
|
||||||
|
const td = document.createElement('td');
|
||||||
|
const v = r*16 + c;
|
||||||
|
td.textContent = v;
|
||||||
|
td.className = v <= 127 ? 'ascii' : 'nonascii';
|
||||||
|
tr.appendChild(td);
|
||||||
|
}
|
||||||
|
tb.appendChild(tr);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
slides/223015b/assets/demos/hex-dec-table.png
Normal file
BIN
slides/223015b/assets/demos/hex-dec-table.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
Reference in New Issue
Block a user