# Kap 1 — Geschichte, Grundlagen & HTML

**Bedient Klausur-Blöcke:** A (Von-Neumann) + B (Internet-Entstehung) + G (HTML-Grundlagen)
**Slide-Budget:** ~40 (90-min)
**Aktueller Stand:** 100 Slides → 60% Reduktion nötig.

## Bogen

Eine Stunde, eine Frage: **„Wie sind wir vom Lochkarten-Rechenwerk zum HTML-Tag im Browser gekommen — und warum spielt das heute noch eine Rolle?"**

1. **Eröffner:** „Du tippst `librete.ch` ein und schaust auf eine Seite. Was alles dahinter steht." → 7-Schritte-Diagramm (Vorschau auf Block F, wird in Kap 2 vertieft).
2. **Pioniere:** Lovelace (algorithm) → Hollerith (Maschine zählt Daten) → Turing (universelle Maschine) → von Neumann (Architektur, die wir heute noch nutzen). 6 Personen, keine Galerie-Folie pro Person.
3. **Von-Neumann-Architektur:** 5 Komponenten. Brücke zum Smartphone: „dein iPhone ist eine Von-Neumann-Maschine".
4. **Pivot zu Netz:** „Eine Maschine ist eine Maschine. Was passiert, wenn wir zwei verbinden? ARPANET (1969)."
5. **Internet-Timeline:** ARPANET (1969) → Email (1971) → TCP/IP (1983) → WWW (1989) → Mosaic (1993). Vier Milestones, nicht zwanzig.
6. **Physik:** 1,3 Mio km Unterseekabel als Bodenfaktor, DE-CIX Frankfurt.
7. **Pivot zu HTML:** „Du surfst auf der Website. Was bekommst du eigentlich vom Server geliefert?" → HTML.
8. **HTML-Anatomie:** Tag-Struktur, DOCTYPE, head/body. Semantische Tags. Validität (warum kein div-Suppe).
9. **Selbstlernen:** Im DevTools-Inspector eine Seite anschauen.

## Advance Organizer

Konkret-erkenntnisgewinnend (nicht Schablone): das **Welt-zu-Pixel-Diagramm** mit allen Stationen, die in diesem Kapitel angerissen werden — Rechenarchitektur, Internet-Layer, HTML-Render. Wird in Kap 2 (Netzwerk-Tiefe) und 3 (JS) vertieft.

→ Demo-Datei: `kap-c-01-bogen.html` (NEU)

## Folien-Skelett (Vorschlag)

| # | Typ | Titel/Kern | Lernziel | Visualisierung |
|---|-----|-----------|---------|----------------|
| 1 | Cover | Kapitel 1 | — | reuse |
| 2 | Lead | „Du tippst librete.ch ein..." | — | — |
| 3 | Advance Organizer | Welt → Pixel (alle Stationen) | A.1+B.1+G.1 | NEU kap-c-01-bogen |
| 4 | Lead | Pioniere | — | — |
| 5 | Inhalt | Ada Lovelace + Hollerith | A.3 | reuse |
| 6 | Inhalt | Turing + Manhattan-Projekt + ENIAC | A.3 | reuse |
| 7 | Inhalt | von Neumann + die Architektur | A.1, A.2 | reuse |
| 8 | Klausur | Die 5 Komponenten Von-Neumann | A.1 | reuse |
| 9 | Inhalt | Hopper, Booth, Hamilton | A.3 | reuse |
| 10 | Lead | Vom Militär zum Netz | — | — |
| 11 | Inhalt | Kalter Krieg + ARPANET | B.1 | reuse |
| 12 | Klausur | Internet-Timeline (4 Milestones) | B.1 | NEU timeline |
| 13 | Inhalt | WWW 1989 Berners-Lee | B.1 | reuse |
| 14 | Inhalt | Mosaic + die 90er | B.1 | reuse |
| 15 | Inhalt | Unterseekabel | B.2 | reuse |
| 16 | Inhalt | DE-CIX, Frankfurt | B.2 | NEU dce-cix-karte |
| 17 | Lead | Was bekommt der Browser? | — | — |
| 18 | Inhalt | Eine Webseite ist HTML | G.1 | reuse |
| 19 | Klausur | HTML-Anatomie: Tag-Struktur | G.1 | reuse |
| 20 | Demo | HTML-Grundgerüst | G.3 | reuse grundgeruest |
| 21 | Klausur | DOCTYPE + head + body | G.3 | reuse |
| 22 | Inhalt | Attribute (id, class, href, src) | G.1 | reuse tag-attribut |
| 23 | Inhalt | Semantische HTML-Tags | G.2 | reuse |
| 24 | Klausur | Header/nav/main/article/section/footer | G.2 | reuse |
| 25 | Inhalt | Warum semantisch? (SEO, A11y) | G.4 | reuse |
| 26 | Inhalt | Validität: kein div-Suppe | G.4 | — |
| 27 | Demo | Inspector im Browser | G.1 | reuse dom-tree |
| 28 | Inhalt | Häufige HTML-Tags-Übersicht | G.1, G.2 | NEU html-tags-cheatsheet |
| 29 | Inhalt | Forms (input, label, button, textarea) | G.1 | reuse button + input |
| 30 | Inhalt | Dialog + Details | G.2 | reuse dialog + details-open/closed |
| 31 | Selbstlernen | DevTools-Inspector eigene Lieblings-Seite | G.4 | — |
| 32 | Zusammenfassung | Pioniere → Internet → HTML | alle A+B+G | NEU |

~32 statt 100 Slides. Drastische Reduktion durch Streichen der Vertiefungs-Folien und Galerie-Inflation.

## Streichungs-Liste

Aus aktuellem 01-geschichte-grundlagen-html.md (100 Slides):
- Galerie-Folien pro Person (jede mit Bild + 5 Bullet Points): 12 Personen → 6 (Lovelace, Hollerith, Turing, von Neumann, Hopper, Hamilton)
- Z3, Mark I, ENIAC als drei Einzelfolien → eine
- IBM/NS-Vertiefung als zwei Folien → eine
- HTML-Tag-Listen-Folien (jede mit 5-7 Tags) → eine Cheatsheet-Folie
- Frameworks-Logos-Slides (React, Vue, Astro etc.) — gehört in JS-Kapitel (Block J)
- A11y-Folien hier → verschieben nach Kap 2 (wo CSS/A11y kombiniert)
- Diverse „Bei näherem Hinsehen"-Vertiefungen die Mayer-Redundancy verletzen

## Visualisierungs-TODO

| Demo | Neu/Reuse | Status |
|------|-----------|--------|
| kap-c-01-bogen | NEU | Phase 3 |
| internet-timeline | NEU | Phase 3 |
| dce-cix-karte | NEU | Phase 3 |
| html-tags-cheatsheet | NEU | Phase 3 |
| Alle anderen | reuse | bereits in 164 demos |

→ 4 neue Demos für Kap 1.