add html/css demos for 223015c chapter 1: html basics, widgets, a11y

This commit is contained in:
2026-04-20 10:44:12 +02:00
parent 558d0e5ecd
commit a2934f1327
33 changed files with 566 additions and 3 deletions

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fokus-Indikator</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
:focus, .is-focused {
outline: 2px solid blue;
outline-offset: 2px;
}
button:focus-visible, button.is-focused {
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
}
button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
</style>
</head>
<body>
<p>Tab-Taste drücken:</p>
<button class="is-focused">Erster Button</button>
<button>Zweiter Button</button>
<button>Dritter Button</button>
</body>
</html>