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
68 lines
3.1 KiB
HTML
68 lines
3.1 KiB
HTML
<!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>
|