public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 10:44:12 +02:00
parent 558d0e5ecd
commit a2934f1327
33 changed files with 566 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
slides/223015c/01-geschichte-grundlagen-html.md
View File

@@ -877,7 +877,7 @@ Kostenlos freigegeben → darum existiert es
<!-- _header: '' -->
<!-- _footer: '' -->
![bg fit](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
<!--
Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente.
@@ -1267,6 +1267,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
# HTML-Tags und Attribute
![bg right:35%](./assets/demos/tag-attribut.png)
```html
<body>
<p class="wichtig">Das ist ein Absatz.</p>
@@ -1298,6 +1300,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
# Vollständiges Grundgerüst
![bg right:35%](./assets/demos/grundgeruest.png)
```html
<!DOCTYPE html>
<html lang="de">
@@ -1373,10 +1377,10 @@ Accessibility ist eingebaut
---
[]
# Beispiel: Details/Summary
![bg right:35%](./assets/demos/details-closed.png)
```html
<details>
<summary>Klick mich!</summary>
@@ -1390,6 +1394,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
# Beispiel: Details/Summary (geöffnet)
![bg right:35%](./assets/demos/details-open.png)
```html
<details open>
<summary>Klick mich!</summary>
@@ -1404,6 +1410,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstel
# Beispiel: Button
![bg right:35%](./assets/demos/button.png)
```html
<button>Add to favorites</button>
```
@@ -1414,6 +1422,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
# Beispiel: Input/Eingabefeld
![bg right:35%](./assets/demos/input.png)
```html
<input
type="text"
@@ -1427,6 +1437,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
# Beispiel: Dialog
![bg right:35%](./assets/demos/dialog.png)
```html
<dialog open>
<p>Greetings, one and all!</p>
@@ -1629,6 +1641,8 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
# Operable: Bedienbar
![bg right:35%](./assets/demos/a11y-focus.png)
**Tastaturzugänglich:**
```css
/* Fokus-Indikator NIE entfernen! */
@@ -1657,6 +1671,8 @@ Skip-Links: "Zum Hauptinhalt springen"
# Understandable: Verständlich
![bg right:35%](./assets/demos/a11y-error.png)
**Sprache angeben:**
```html
<html lang="de">
@@ -1682,6 +1698,8 @@ Fehlermeldungen: konkret, hilfreich, am Feld
# Robust: Technisch solide
![bg right:35%](./assets/demos/a11y-semantic.png)
**Semantisches HTML:**
```html
<!-- Schlecht -->