---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
title: "Kapitel 1: Geschichte, Grundlagen & HTML"
---

<style>
:root {
  --color-foreground: #1a1a2e;
  --color-highlight: #d63384;
  --color-dimmed: #4a4a6a;
}
section.invert { --color-foreground: #fff; }
section { font-size: 1.7rem; }
h1 { color: #a02060; }
section.invert h1 { color: #fff; }
h2 { color: #1f2937; }
pre {
  background: #0f0f23;
  color: #d63384;
  border-radius: 8px;
  border-left: 3px solid #d63384;
}
pre code { background: transparent; color: inherit; }
code {
  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
section code:not(.hljs) { color: #d63384 !important; }
section code.hljs { color: #f8f8f8 !important; }
a { color: var(--color-highlight); }
section.klausur {
  background: repeating-linear-gradient(
    135deg,
    #fce4ec,
    #fce4ec 40px,
    #fff 40px,
    #fff 80px
  ) !important;
}
@media print {
  section.klausur { background: #fce4ec !important; }
}
section.aufgabe { background: #fce4ec !important; }
section.aufgabe footer { display: none; }
section.erklaerung { font-size: 1.1rem; }
section.erklaerung h1 { font-size: 1.5rem; color: #a02060; margin-bottom: 0.3rem; }
section.erklaerung ul, section.erklaerung ol { font-size: 1.0rem; line-height: 1.4; }
section.erklaerung p { font-size: 1.0rem; line-height: 1.4; }
section.erklaerung table { font-size: 0.9rem; }
</style>

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: black -->

![bg fit opacity:0.2](./assets/background-termin-2.png)

# Kapitel 1
## Geschichte, Grundlagen & HTML

223015c · Grundlagen IT- und Internettechnik
HdM Stuttgart · SoSe 2026

[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)

---

<!-- _class: lead -->

# „Du tippst `librete.ch` ein. Was alles dahinter steht."

<!--
Eröffner-Hook. Studis kennen das Tippen einer URL aus dem Alltag.

Aber: was passiert wirklich? Ein ganzer Stapel von Schichten:
1. Browser parst die URL
2. DNS findet die IP-Adresse zu librete.ch
3. TCP-Handshake mit dem Server in Frankfurt
4. TLS-Handshake für https
5. HTTP-Request wird gesendet
6. Server antwortet mit HTML
7. Browser parst HTML + CSS + JS und rendert Pixel

Dieser ganze Stack ist 70 Jahre Computing-Geschichte. Wir packen ihn in diesem Kapitel an einem Ende an — bei den Pionieren des Rechnens — und enden beim HTML-Tag, das auf eurem Bildschirm landet.

In Kap 2 wird der Netzwerk-Teil aufgepackt (TCP/IP, DNS, HTTP), in Kap 3 das Interaktive (JavaScript).
-->

---

<!-- _class: lead -->

# Die Pioniere des Computings

<!--
Wir starten bei den Personen, die die Grundlagen geschaffen haben — von der ersten Programmidee bis zur Architektur, die wir heute noch nutzen.

6 Personen, eine pro Folie. Keine Galerie-Inflation.
-->

---

![bg right:35%](./assets/ada-lovelace.jpg)

# Ada Lovelace (1815–1852)

**Erster Algorithmus in der Geschichte.**

Babbage entwarf 1830er die *Analytical Engine* — eine programmierbare Rechenmaschine. Ada Lovelace beschrieb 1843, wie man Bernoulli-Zahlen damit berechnen könnte.

→ **Ihre Notes sind der erste publizierte Algorithmus, der für eine Maschine geschrieben wurde.**

<!--
Ada Lovelace war Mathematikerin und Tochter von Lord Byron. Sie übersetzte einen italienischen Aufsatz über die Analytical Engine — und fügte „Notes" hinzu, die länger waren als das Original.

In Note G beschrieb sie eine Schritt-für-Schritt-Anleitung, wie die Maschine eine mathematische Sequenz berechnen würde. Das gilt heute als erster Algorithmus.

Sie war auch die Erste, die erkannte: die Analytical Engine könnte mehr als nur Zahlen. Man könnte Musik, Texte, jede Form von Logik darüber abbilden. Eine erstaunliche Voraussicht — fast 100 Jahre vor Turing.

Die Programmiersprache „Ada" (1980, vom US-Verteidigungsministerium) wurde nach ihr benannt.
-->

---

![bg right:35%](./assets/herman-hollerith.jpg)

# Herman Hollerith (1860–1929)

**Lochkarte als Datenträger.**

1890er: US-Volkszählung. Hollerith entwickelt eine Maschine, die Daten auf Lochkarten speichert und liest. **8 Jahre Auswertung → 1 Jahr.**

→ Seine Firma wird 1911 zu **CTR**, 1924 zu **IBM**.

<!--
Vor Hollerith dauerte die US-Volkszählung 8 Jahre — bis zur nächsten. Hollerith's Maschine brachte das auf 1 Jahr.

Lochkarten waren bis in die 1980er der Standard-Datenträger. Programme wurden auf Lochkarten gestanzt und in Stapeln zum Rechenzentrum gebracht. „Batch processing".

IBM (1924 unter Thomas J. Watson Sr.) wurde aus Hollerith's Firma. Watson prägte den Slogan "THINK", der noch heute zu IBM-Logos gehört.

Schatten: IBM lieferte in den 1930er Jahren Tabelliermaschinen auch ins NS-Deutschland, wo sie für die Volkszählungen und später für die Lager-Buchhaltung eingesetzt wurden. Edwin Black hat das 2001 in „IBM and the Holocaust" dokumentiert. Wichtig: das ist Teil der IT-Geschichte, nicht ein Anhang.
-->

---

![bg right:35%](./assets/alan-turing.jpg)

# Alan Turing (1912–1954)

**Theoretisches Fundament moderner Computer.**

1936: **Turing-Maschine** — ein gedankliches Modell, das jeden Algorithmus berechnen kann.

1940er: bricht im **Bletchley Park** die deutsche **Enigma**-Verschlüsselung. Geheim bis 1974.

1950: **Turing-Test** für maschinelle Intelligenz.

<!--
Alan Turing ist der Vater der theoretischen Informatik.

Die Turing-Maschine ist ein mathematisches Modell:
- Ein unendliches Band als Speicher
- Ein Lese-/Schreibkopf
- Ein Regelsatz für Zustandsübergänge

Damit beweist Turing 1936, dass es prinzipiell unentscheidbare Probleme gibt (Halteproblem). Und dass es eine „universelle" Maschine geben kann, die jede andere Maschine simulieren kann.

In Bletchley Park wendet er das Konzept praktisch an: gemeinsam mit anderen baut er die „Bombe", eine elektromechanische Maschine, die Enigma-Schlüssel durchprobiert. Geheim bis 1974 — Großbritannien verriet jahrzehntelang nicht, dass sie deutsche Funksprüche entschlüsseln konnten.

Tragisches Ende: Turing wurde 1952 wegen Homosexualität verurteilt und chemisch kastriert. 1954 Selbstmord. 2009 erst offizielle Entschuldigung der britischen Regierung.

Heute trägt der ACM Turing Award (der „Informatik-Nobelpreis") seinen Namen.
-->

---

![bg right:35%](./assets/von-neumann.jpg)

# John von Neumann (1903–1957)

**Die Architektur, die wir heute noch nutzen.**

1945: das **EDVAC-Papier** — Daten und Programm im selben Speicher.

Vorher: ENIAC musste für jedes neue Programm **physisch umgekabelt** werden. 6.000 Schalter, oft Wochen.

Nachher: einfach den Speicher überschreiben.

<!--
John von Neumann war einer der bedeutendsten Universalwissenschaftler des 20. Jahrhunderts — Mathematik, Physik, Wirtschaft, Spieltheorie, Computing.

Sein „First Draft of a Report on the EDVAC" (1945) wurde unautorisiert von Herman Goldstine verteilt. Da der Bericht nur von Neumann's Namen trug, wurde die darin beschriebene Architektur als „Von-Neumann-Architektur" bekannt — obwohl maßgebliche Vorarbeit von Eckert und Mauchly stammte. Bis heute kontrovers.

Die zentrale Innovation: „stored-program" — Daten und Code im gleichen Speicher, addressierbar wie Daten. Damit können Programme als Daten manipuliert werden (Compiler, Debugger, JIT) — heute selbstverständlich, damals revolutionär.

Auch beteiligt: Manhattan-Projekt (Implosions-Linsen für die Atombombe). Zwiespältig.
-->

---

<!-- _class: klausur -->

# Von-Neumann-Architektur · 5 Komponenten

| # | Komponente | Aufgabe |
|---|------------|---------|
| 1 | **Steuerwerk** (Control Unit) | holt Befehl, entscheidet was zu tun ist |
| 2 | **Rechenwerk** (ALU) | führt Rechnung / Vergleich aus |
| 3 | **Speicher** (Memory) | hält Daten *und* Programm |
| 4 | **Eingabe / Ausgabe** (I/O) | Tastatur, Bildschirm, Netzwerk |
| 5 | **Bus** (Verbindung) | transportiert Daten zwischen allen |

**Schlüssel:** Speicher hält *beides* — Daten + Programm. (Stored Program.)

<!--
Klausurfähig: die 5 Komponenten und ihre Aufgaben benennen.

Wo seht ihr das in eurem eigenen Gerät?
- Steuerwerk + Rechenwerk = CPU
- Speicher = RAM (flüchtig) + SSD (persistent)
- I/O = USB-Ports, Display, Audio
- Bus = im Chip (Intern), zwischen Chips (PCIe, USB)

Die Architektur ist seit 1945 stabil. Quantencomputer brechen sie auf (kein klassisches stored program). Aber jeder PC, Mac, Smartphone, jeder Server, jede Spielkonsole folgt ihr noch immer.
-->

---

# Hopper, Booth, Hamilton

**Grace Hopper** (1906–1992): erster *Compiler* (1952). „Submarine of code." US Navy Admiral.

**Kathleen Booth** (1922–2022): erste **Assembly Language** (1947). Notation für Maschinen-Befehle.

**Margaret Hamilton** (*1936): leitete die Software für **Apollo 11**. Prägte den Begriff „Software Engineering".

<!--
Drei Personen, die wichtige Schichten oberhalb der Hardware geschaffen haben:

Grace Hopper:
- Arbeitete an Mark I (Harvard)
- Erfand den ersten Compiler (A-0, 1952) — Mensch-lesbare Sprache → Maschinen-Code
- Hat den Begriff „Bug" populär gemacht (echter Motte im Mark II 1947 gefunden, ins Logbuch geklebt)
- Wurde später US Navy Rear Admiral

Kathleen Booth:
- Erste praktische Assembly Language für die ARC (All-purpose Electronic Computer) am Birkbeck College London
- Vor ihr musste man Befehle in Binär eintippen
- Ihre Notation (z.B. ADD R1, R2) ist im Prinzip noch heute in jeder Assembly-Sprache

Margaret Hamilton:
- Leitete die On-board Software für Apollo 11 (1969, Mondlandung)
- Berühmt: 5 Minuten vor Mondlandung gibt es Alarm 1202 + 1201 — ihre Software hat Prioritäten richtig gesetzt und die wichtige Aufgabe fortgesetzt
- Sie und ihr Team prägten den Begriff „Software Engineering" 1968 — vorher gab es das als Disziplin nicht

Lektionen für heute: Programmierung ist nicht Hardware. Es ist eine eigenständige Disziplin mit ingenieurmäßiger Strenge. Hamilton's Berkeley-Adoptierung des Begriffs „Engineering" war damals nicht selbstverständlich.
-->

---

<!-- _class: lead -->

# Vom Militär zum Netz

<!--
Pivot. Wir verlassen die einzelne Maschine und schauen, wie viele Maschinen miteinander verbunden wurden.

Das Internet entsteht im Kalten Krieg als militärisches Forschungsprojekt — und wird zum globalen Netz.
-->

---

# Kalter Krieg: das Problem der Kommunikation

**Atomare Bedrohung** in den 1960ern.

Klassisches Telefonnetz ist **zentral** — ein Knoten down, ganzer Bezirk down.

**Paul Baran** (RAND, 1962): wenn das Netz **dezentral** ist und Daten in kleinen Paketen reisen, überlebt es einzelne Ausfälle.

→ **Packet Switching** statt **Circuit Switching.**

<!--
Hintergrund: USA und UdSSR im Kalten Krieg. Telefon-Netz war zentral organisiert — ein paar Backbone-Stationen, wenn die ausfielen war alles tot.

Paul Baran beim RAND-Think-Tank schlug 1962 vor: zerteilt Nachrichten in kleine Pakete, jedes Paket findet eigenständig seinen Weg durch ein Mesh-Netzwerk. Wenn ein Knoten ausfällt, finden Pakete einen anderen Pfad.

Das ist die Geburt von „packet switching" — heute Grundlage des gesamten Internets.

ARPANET (1969) ist die erste praktische Umsetzung. 4 Knoten anfangs: UCLA, Stanford, UCSB, Utah. Erste Nachricht: „LOGIN" — Maschine crasht nach „LO".
-->

---

<!-- _class: klausur -->

# Internet-Timeline · 4 Milestones

| Jahr | Was | Was hat es verändert |
|------|-----|----------------------|
| **1969** | ARPANET | Erstes paket-vermitteltes Netzwerk, 4 Knoten |
| **1971** | Email (Ray Tomlinson) | Erste Nutzung des `@`-Zeichens |
| **1983** | TCP/IP | Wurde Standard-Protokoll des ARPANET |
| **1989** | **WWW** (Berners-Lee, CERN) | HTML, HTTP, URL — das Web wie wir es kennen |

1993: Mosaic-Browser → Internet wird *populär*.

<!--
Klausurfähig: die 4 Meilensteine und ihre Bedeutung.

Anmerkungen:
- 1969 ARPANET: noch militärisch + Forschung. Wenige Knoten.
- 1971 Email: Ray Tomlinson schickt die erste E-Mail mit @-Zeichen, das er gewählt hat um „User AT Maschine" zu trennen. Heute auf jedem Tastatur als Standard.
- 1983 TCP/IP: Vint Cerf + Bob Kahn. ARPANET wechselt am 1. Jan 1983 von NCP zu TCP/IP. Das ist die „Geburt des modernen Internets" im technischen Sinne.
- 1989 WWW: Tim Berners-Lee am CERN. Er erfindet HTTP (Protokoll), HTML (Markup) und URL (Adress-System) — drei Standards, eine Person.
- 1993 Mosaic: erste GUI-Browser, der Bilder im Text-Fluss anzeigen konnte. Damit explodierte die Web-Nutzung.

Internet ist nicht Web — Internet ist das Netzwerk, Web ist eine Anwendung darauf. Aber im Volksmund verwechselt.
-->

---

![bg right:45% contain](./assets/tim-berners-lee.jpg)

# Tim Berners-Lee + das WWW (1989)

**CERN, Genf.** Berners-Lee schlägt ein „Hypertext-System" für die interne Wissenschaftler-Kommunikation vor.

Sein Memo „Information Management: A Proposal" wird abgelehnt. Er baut es trotzdem.

**Drei Standards:**
- **HTTP** (Protokoll)
- **HTML** (Format)
- **URL** (Adresse)

1991: erste Website (`info.cern.ch`). Bis heute online.

<!--
Berners-Lee arbeitete am CERN als Informatiker, hatte aber Frustration mit der Fragmentierung der internen Dokumentation. Sein System sollte alle Dokumente verbindbar machen.

Sein erstes Memo wurde mit „vague but exciting" beantwortet. Er bekam keine offizielle Finanzierung, baute den ersten Webserver + Webbrowser dennoch.

Diese drei Standards sind bis heute das Web:
- HTTP: wie geht eine Anfrage über das Netz
- HTML: wie sieht ein Dokument aus
- URL: wo finde ich ein Dokument

Berners-Lee gab das alles **patentfrei** frei. Hätte er die Standards verkauft, wäre das Web vermutlich nie groß geworden — andere Standards (Microsoft Blackbird, AOL-Pages, Apple eWorld) sind alle gescheitert.

2004 wurde er von Queen Elizabeth zum Sir geadelt. 2016 ACM Turing Award.
-->

---

# 1,3 Mio km Unterseekabel

![bg right:45% contain](./assets/unterseekabel-karte.jpg)

Das Internet ist **physisch.**

400+ Unterseekabel transportieren ~99% des interkontinentalen Datenverkehrs.

**DE-CIX Frankfurt:** einer der größten Internet-Knoten der Welt. >12 Tbit/s im Peak.

→ Auch eure WhatsApp-Nachricht nach New York fließt durch ein Glasfaserkabel im Atlantik.

<!--
Internet ist nicht „die Cloud" — die Cloud ist Hardware in Rechenzentren, die mit Glasfaser-Kabeln verbunden sind.

Unterseekabel:
- ~400 aktive Kabel weltweit, ~1,3 Mio km Länge gesamt
- Werden von Spezialschiffen verlegt
- Lebensdauer ~25 Jahre
- Glasfaser-Stränge mit Verstärkern alle ~50–100 km
- Ein einziges Kabel kann 100+ Tbit/s übertragen

Großbritannien-USA: TAT-1 (1956), erst Telefon. Heute: MAREA (2018), Marea, Dunant — alle mehrere Tbit/s.

DE-CIX Frankfurt:
- Internet Exchange Point (IXP) — Punkt, wo viele ISPs sich treffen und Daten austauschen
- Größter IXP der Welt nach Datenverkehr
- ~1.000 Mitglieder (ISPs, Content-Provider)
- ~12 Tbit/s im Peak

Frankfurt hat sich aus historischen Gründen entwickelt (Banken brauchten gute Netzwerk-Anbindung). Heute strategisch wichtig — wer Frankfurt kontrolliert, kontrolliert einen Großteil des europäischen Traffic.
-->

---

<!-- _class: lead -->

# Vom Internet zum Browser-Render

<!--
Pivot. Wir haben gesehen, wie Daten durch das Netzwerk reisen.

Jetzt: was bekommt der Browser eigentlich vom Server? Antwort: HTML.

Dann: wie ist HTML aufgebaut, was sind die wichtigsten Tags, wie schreibe ich eine gültige Webseite?
-->

---

# Was bekommt der Browser?

Wenn ihr `librete.ch` eintippt, schickt der Server:

```html
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Librete</title>
</head>
<body>
  <h1>Willkommen</h1>
  <p>Dies ist HTML.</p>
</body>
</html>
```

Der Browser **parsed** das, rendert es als Pixel, und ihr seht eine Seite.

<!--
HTML = Hypertext Markup Language. „Hypertext" weil Tags Links zu anderen Dokumenten erlauben.

Das Beispiel zeigt:
- DOCTYPE-Deklaration (sagt dem Browser: das ist HTML5)
- html-Element als Wurzel
- head: Meta-Informationen (Titel, Encoding, CSS-Links)
- body: das, was angezeigt wird
- Heading-Tag h1
- Paragraph-Tag p

Nichts Magisches dran. Plain-Text mit Tags drum. Studis könnten das in Notepad oder TextEdit schreiben und sofort im Browser öffnen.
-->

---

<!-- _class: klausur -->

# HTML-Anatomie

```html
<a href="https://librete.ch">Mein Link</a>
```

| Bestandteil | Was |
|-------------|-----|
| `<a` | **Opening-Tag** mit Tag-Namen |
| `href="https://..."` | **Attribut** (Name + Wert) |
| `>` | Ende des Opening-Tags |
| `Mein Link` | **Inhalt** des Elements |
| `</a>` | **Closing-Tag** |

Alles zusammen = ein **Element.**

<!--
Klausurfähig. Studis sollen die Bestandteile eines HTML-Elements unterscheiden können:
- Opening-Tag
- Closing-Tag
- Attribute (Name=Wert)
- Inhalt
- Element = alles zusammen

Achtung: einige Tags sind „self-closing" und haben keinen Closing-Tag:
- `<img src="..." alt="...">`
- `<br>`
- `<input>`
- `<meta>`

Diese werden auf der nächsten Folie behandelt.
-->

---

# Wichtige Attribute

| Attribut | Wo | Bedeutung |
|----------|----|-----------|
| `id` | jedes Element | eindeutige ID auf der Seite |
| `class` | jedes Element | für CSS (mehrere möglich) |
| `href` | `<a>`, `<link>` | Ziel-URL |
| `src` | `<img>`, `<script>` | Quell-URL |
| `alt` | `<img>` | **Alt-Text für A11y!** |
| `title` | jedes Element | Tooltip beim Hover |
| `lang` | meist `<html>` | Sprache des Inhalts |

<!--
Diese Attribute begegnen Studis täglich — wenn auch unbemerkt.

`alt`-Text auf Bildern ist a11y-Pflicht. Wer das vergisst, macht die Seite für Blinde unlesbar. Screen-Reader liest stattdessen `alt`-Wert vor.

`class` vs `id`:
- id: einmal auf der Seite (Anker, JS-Hook)
- class: beliebig oft (Style-Gruppen)

`lang="de"` auf html-Element sagt Screen-Readers, in welcher Sprache der Inhalt ist — wichtig für korrekte Aussprache.
-->

---

# Self-closing Tags

```html
<img src="foto.jpg" alt="Sonnenuntergang">
<br>
<input type="text" name="username">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
```

Diese Tags haben **kein Closing**. Sie sind „leer" — der Browser-Render erzeugt das Pixel-Resultat allein aus dem Opening-Tag.

<!--
Self-closing Tags:
- img: Bild einfügen
- br: Zeilenumbruch
- hr: horizontale Linie
- input: Eingabefeld
- meta: Metadaten im head
- link: Verbindung zu CSS/Favicon

Streng XML-konform würde man `<br />` schreiben (mit / vor >). HTML5 erlaubt beides. Modern üblich: ohne /.

Wichtig: vergesst nicht den `alt`-Text für `<img>` — A11y.
-->

---

<!-- _class: klausur -->

# Document-Struktur: das Grundgerüst

```html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Seite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hallo Welt</h1>
  <!-- alle sichtbaren Inhalte -->
</body>
</html>
```

<!--
Klausurfähig: die DOCTYPE + head + body-Struktur reproduzieren können.

Was passiert wo?
- DOCTYPE: sagt dem Browser „das ist HTML5". Ohne DOCTYPE: Quirks-Mode (alte Browser-Verhaltensweisen).
- html-Element + lang: Wurzel-Element + Sprache
- head: alles, was *nicht* sichtbar ist (Meta, Title, CSS-Links, Scripts)
- meta charset: sagt Browser, wie die Byte zu interpretieren sind (UTF-8 = international, alle Sprachen)
- meta viewport: für Mobile-Rendering, ohne zoomt iPhone alles auf 980px
- title: Browser-Tab-Titel + Lesezeichen-Name
- link stylesheet: CSS einbinden
- body: alle sichtbaren Inhalte
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/demos/grundgeruest.png)

<!--
Visualisierung des Grundgerüsts.

Pädagogisches Ziel: Studis sollen das Muster „<head> = unsichtbares Meta, <body> = sichtbares Drinnen" verinnerlichen.

Faustregel: alles, was den Inhalt der Seite betrifft → body. Alles, was die Seite *beschreibt* → head.
-->

---

<!-- _class: klausur -->

# Semantische HTML-Tags

| Tag | Bedeutung | Beispiel |
|-----|-----------|----------|
| `<header>` | Kopfbereich (Logo, Nav) | oben auf der Seite |
| `<nav>` | Navigations-Menü | Hauptmenü |
| `<main>` | Hauptinhalt | das eigentliche Thema |
| `<section>` | Thematischer Abschnitt | Kapitel der Seite |
| `<article>` | eigenständiger Inhalt | Blog-Post, News-Beitrag |
| `<aside>` | Seiten-Inhalt | Sidebar, Werbung |
| `<footer>` | Fußbereich | Impressum, Copyright |

**Vorteil:** Screen-Reader, Suchmaschinen + andere Entwickler verstehen die Struktur.

<!--
Klausurfähig: die 7 semantischen Tags und ihre Bedeutung.

Vor HTML5 (2008) gab es nur `<div>`. Man hat alles in div verpackt und mit Klassen markiert: `<div class="header">`. Funktioniert visuell — aber Maschinen (Screen-Reader, Suchmaschinen) verstehen nichts.

Mit semantischen Tags:
- Screen-Reader kann „Hauptnavigation überspringen" anbieten
- Google versteht, was Haupt-Inhalt der Seite ist (SEO-Boost)
- Andere Entwickler lesen den Code schneller

Faustregel: wenn ein Tag den *Zweck* eines Bereichs ausdrückt — semantisch. Wenn nur Styling — div.

Drei A11y-relevante Anti-Patterns:
- `<div onclick="...">` statt `<button>` (Tastatur nicht erreichbar)
- `<a href="javascript:void(0)">` statt `<button>` (semantisch falsch)
- alles in `<div>` (keine Hierarchie für Screen-Reader)
-->

---

# Häufige inline-Tags

| Tag | Was |
|-----|-----|
| `<a>` | Hyperlink |
| `<strong>` | wichtig (fett dargestellt) |
| `<em>` | hervorgehoben (kursiv) |
| `<span>` | semantisch neutrale Inline-Container |
| `<code>` | Inline-Code |
| `<br>` | Zeilenumbruch |
| `<img>` | Bild |

**vs Block-Tags:** `<h1>`–`<h6>`, `<p>`, `<div>`, `<ul>`/`<ol>`/`<li>`, `<table>`, alle semantischen.

<!--
Block-Tags brechen automatisch eine neue Zeile, Inline-Tags nicht.

Wichtig pädagogisch:
- `<strong>` ist semantisch (wichtig), nicht stilistisch (fett). Wenn ihr nur fett wollt → CSS, nicht `<b>`.
- `<em>` (emphasized) vs `<i>` (italic) — gleiche Unterscheidung
- `<span>` ist der „div" für Inline — semantisch neutral, nur zum Markieren

Browser stylen die Tags per Default:
- strong → fett
- em → kursiv
- h1 → groß+fett
- p → Absatz mit Margin

Aber das kann mit CSS überschrieben werden. Daher: Tags semantisch wählen, dann mit CSS gestalten.
-->

---

# Listen, Bilder, Links

```html
<!-- Unsortierte Liste -->
<ul>
  <li>Erstes Item</li>
  <li>Zweites Item</li>
</ul>

<!-- Bild mit Alt-Text -->
<img src="./foto.jpg" alt="Sonnenuntergang über Stuttgart">

<!-- Link -->
<a href="https://hdm-stuttgart.de" target="_blank" rel="noopener">
  HdM Stuttgart
</a>
```

<!--
Drei sehr häufige Patterns:

Listen:
- `<ul>` unsortiert (Bullet Points)
- `<ol>` sortiert (Nummern)
- `<li>` für jedes Item

Bilder:
- src: Pfad zum Bild
- alt: Alt-Text — Pflicht für A11y
- Bild-Pfad relativ oder absolut

Links:
- href: Ziel-URL
- target="_blank": neuer Tab (sparsam einsetzen)
- rel="noopener": Sicherheits-Best-Practice für target="_blank"
-->

---

# Formulare: Inputs + Labels

```html
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Absenden</button>
</form>
```

**Immer:** `<label>` mit `for` → `<input>` mit gleichem `id`. **Pflicht für A11y.**

<!--
Formulare sind kritisch für A11y. Screen-Reader liest den Label-Text vor dem Input vor, damit der Nutzer weiß, was eingegeben werden soll.

Verbindung Label-Input:
- `<label for="name">` muss zum `<input id="name">` passen
- Alternative: Input INSIDE Label
- Ohne Label: nur Placeholder-Text → A11y-Mangel

Input-Types (HTML5):
- text, email, tel, url, password, number, date, time, color, range, search

Browser validiert automatisch (z.B. type="email" zeigt Fehler wenn kein @ drin).
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/demos/dom-tree.png)

<!--
Das Dokument-Objekt-Modell (DOM): HTML im Speicher des Browsers als Baum.

Jeder Tag wird zu einem Element-Node. Der Browser baut diesen Baum beim Parsing auf.

JavaScript (Kap 3) kann diesen Baum manipulieren — Elemente erzeugen, ändern, entfernen.

Vorgriff: `document.querySelector('h1').textContent = 'Neuer Text'` ändert den Inhalt eines H1.
-->

---

<!-- _class: aufgabe -->

# Selbstlernen — Inspector live

1. Öffnet eure **Lieblings-Webseite**
2. **Rechtsklick → Untersuchen** (oder F12)
3. Tab **Elements / Inspector** öffnen
4. **HTML-Baum** durchklicken
5. Findet: das `<header>`, das `<main>`, mindestens ein `<a href="...">`

**Bonus:** Element auswählen → in der Console: `$0.style.background = 'pink'`. *Was passiert?*

<!--
Aufgabe ist niederschwellig und zugleich erkenntnisreich.

Ziel: Studis erleben, dass jede Webseite aus HTML-Tags besteht. Es ist nichts Magisches dahinter.

DevTools-Tipps für die Vorlesung:
- F12 öffnet DevTools in den meisten Browsern
- Elements-Tab zeigt den live DOM
- $0 ist eine Referenz zum aktuell selektierten Element (für Console-Experimente)
- Style-Edit live im Inspector — schöne erste Erfahrung mit „selber CSS schreiben"
-->

---

# Zusammenfassung

**Pioniere:** Lovelace (erster Algorithmus), Hollerith (Lochkarte), Turing (Theorie), von Neumann (Architektur), Hopper/Booth/Hamilton (Sprache + SoftwareEng).

**Internet:** ARPANET 1969 → TCP/IP 1983 → WWW 1989. Heute physisch über 1,3 Mio km Unterseekabel.

**HTML:** Tag-Struktur (`<tag attr>Inhalt</tag>`). Document-Grundgerüst (DOCTYPE + head + body). Semantische Tags (`header`, `nav`, `main`, …) als A11y-Foundation.

→ **In Kap 2:** wie reisen die Bytes durchs Netz — und wie wird HTML mit CSS hübsch + barrierefrei?

<!--
Recap.

Zwei Strangs in diesem Kapitel:
1. Wie wurde Computing erfunden? (Pioniere → Von-Neumann-Architektur)
2. Wie wurde es vernetzt? (ARPANET → WWW)

Beides mündet in das, was Studis tagtäglich sehen: HTML in einem Browser.

Anschluss zu Kap 2:
- Netzwerk-Tiefe: TCP/IP-Schichten, IP/MAC/Port, DNS, HTTP, der ganze „URL bis Pixel"-Ablauf
- Visuelle Tiefe: CSS, Box-Model, Flexbox, Grid
- A11y-Tiefe: BFSG, WCAG POUR, semantisches HTML + ARIA

In Kap 3 dann das Dynamische: JavaScript, DOM-Manipulation, Events.
-->