Michael Czechowski
a000cdbc8d
- 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
312 lines
21 KiB
HTML
312 lines
21 KiB
HTML
<!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>
|