diff --git a/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md b/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
index 099bea0..7bdb0dc 100644
--- a/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
+++ b/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
@@ -77,26 +77,26 @@ Hochschule der Medien Stuttgart
 | # | Datum | Thema |
 |---|-------|-------|
 | 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
-| 2 | 10.01.2026 | Netzwerke, Protokolle & **CSS** |
-| 3 | 24.01.2026 | Interaktivität & **JavaScript** |
+| 2 | 10.01.2026 | Netzwerke, Protokolle, **semantisches HTML** & **CSS** |
+| 3 | 24.01.2026 | Interaktivität, Animationen & **JavaScript** |
 
 **Format:** Theorie + viele Hands-On-Übungen
 
-**Ziel:** Ihr könnt am Ende eine eigene interaktive Webseite bauen!
+**Ziel:** "Gelernte Hilflosigkeit" ablegen
 
 ---
 
 <!-- _class: lead -->
 
 # Teil 1: Die Geschichte
-## Von der Lochkarte zum Internet
+## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus
 
 ---
 
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg fit](./assets/Ada_Lovelace_daguerreotype_by_Antoine_Claudet_1843_-_cropped.png)
+![bg fit](./assets/Ada_Lovelace.jpg)
 
 <!--
 Ada Lovelace, Daguerreotypie 1843
@@ -105,7 +105,7 @@ Antoine Claudet
 
 ---
 
-![bg right:30% contain](./assets/Ada_Lovelace_daguerreotype_by_Antoine_Claudet_1843_-_cropped.png)
+![bg right:30% contain](./assets/Ada_Lovelace.jpg)
 
 # Ada Lovelace (1815–1852)
 
@@ -118,12 +118,17 @@ Antoine Claudet
 - Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde
 
 <!--
-100 Jahre vor den ersten echten Computern
-Analytical Engine wurde nie gebaut
-Ada erkannte das Potenzial
-Programmiersprache "Ada" nach ihr benannt
+Babbage: Mathematiker, besessen von Rechenmaschinen. Erst die Difference Engine, dann die Analytical Engine – nie fertig gebaut, aber revolutionär im Konzept.
 
-ZITAT: "Die Maschine ist kein denkendes Wesen, sondern lediglich ein Automat, der nach Gesetzen handelt, die ihm auferlegt wurden."
+Ada: Tochter von Lord Byron, dem Dichter. Die Mutter – selbst Mathematikerin – hatte Angst, Ada könnte den "Wahnsinn" des Vaters erben. Also: strikte naturwissenschaftliche Erziehung. Weg von der Poesie, hin zur Logik.
+
+5. Juni 1833, Ada ist 17: Sie trifft Babbage bei seinen legendären »Saturday night soirées«. Elitekreise. Er zeigt ihr seine Maschine – und sie versteht sie. Besser als fast alle anderen.
+
+1835 heiratet sie William King → Ada King, Countess of Lovelace.
+
+Das Zusammenspiel dieser beiden: Ein Ingenieur, der Hardware baut. Eine Dichterstochter, die Software denkt. 100 Jahre vor den ersten echten Computern.
+
+Programmiersprache "Ada" (1980) nach ihr benannt.
 -->
 
 ---
@@ -239,15 +244,15 @@ Wichtige Lektion für MedienethikerInnen
 
 # Lektionen für heute
 
-**Hollerith-Maschinen zeigen:**
-
-1. **Daten sind Macht** – *"Wer Daten kontrolliert, kontrolliert Menschen"*
-2. **Technologie verstärkt** – Gut UND Böse
-3. **"Neutrale" Tools** sind nie neutral
-
-**2025:** Big Data, AI, Social Media → dieselben Fragen
+* Keine
 
 <!--
+* **2025:**
+  * Big Data
+  * Generative KI
+  * Social Media
+  * Rasterfahndung ([https://netzpolitik.org/](https://netzpolitik.org/2025/stuttgart-buendnis-plant-demonstration-gegen-palantir-einsatz/))
+
 Facebook, Cambridge Analytica, Oracle Blue Kai
 Gesichtserkennung, Überwachung, Social Credit System (China)
 Verantwortung von TechnikerInnen und MedienarbeiterInnen
@@ -257,7 +262,7 @@ Verantwortung von TechnikerInnen und MedienarbeiterInnen
 
 <!-- _class: lead -->
 
-# Der Zweite Weltkrieg
+# Vom Ende des Zweiten Weltkriegs
 ## Geburt des modernen Computers
 
 ---
@@ -281,8 +286,6 @@ Bletchley Park
 - 1936: **Turing-Maschine** – theoretisches Modell eines Computers
 - 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung
 - 1950: "Computing Machinery and Intelligence" → **Turing-Test**
-- 1952: Verurteilung wegen Homosexualität
-- Chemische Kastration als "Behandlung"
 - **2013:** Posthume königliche Begnadigung
 
 <!--
@@ -309,12 +312,10 @@ Geheimes Entschlüsselungszentrum im WWII
 
 **Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen
 
-**Turings Lösung:** Elektromechanischer Entschlüssler
+**Turings Lösung:** "Bombe" Elektro-mechanischer Entschlüssler
 
 **Ergebnis:**
 - Alliierten konnten deutschen Funkverkehr mitlesen
-- Krieg wurde um geschätzt **2 Jahre** verkürzt
-- Bis zu **14 Millionen** Leben gerettet
 
 **Geheim bis 1970er!** Turing starb ohne Anerkennung.
 
@@ -362,11 +363,6 @@ Church-Turing-These
 
 ![bg fit opacity:0.4](./assets/oppenheimer.png)
 
-<!--
-Oppenheimer-Filmplakat (2023)
-Christopher Nolan
--->
-
 ---
 
 # Das Manhattan-Projekt (1942–1945)
@@ -393,8 +389,6 @@ Von Neumann kam 1943 als Berater
 
 # John von Neumann (1903–1957)
 
-**"Das letzte Universalgenie"**
-
 - Geboren in Budapest, Österreich-Ungarn
 - Mit 8: Konnte Telefonbücher auswendig
 - Mit 22: Doktor in Mathematik
@@ -420,10 +414,10 @@ Arbeitete am Manhattan-Projekt mit
 - Implosions-Simulationen
 - Nuklearphysik-Gleichungen
 
-**Lösung 1943:** Menschliche "Computer" (meist Frauen!)
+**Lösung 1943:** Menschliche "Computer"
 → Mit Taschenrechnern, Tabellen, IBM-Lochkarten
 
-**Zu langsam!** → Bedarf an automatischer Berechnung
+**Zu langsam** → Bedarf an automatischer Berechnung
 
 <!--
 "Computer" war ein Job-Titel!
@@ -467,6 +461,16 @@ Programmiert durch 6 Frauen (ENIAC Girls)
 
 ---
 
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/First_Computer_Bug,_1947.jpg)
+
+
+---
+
+
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
@@ -573,7 +577,7 @@ Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
 - Kein Betriebssystem
 - Keine Apps
 - Kein Multitasking
-- Keine Updates
+- Keine Updates bzw. Veränderungen am Computer System
 
 **Die meisten Computer** basieren auf diesem Prinzip:
 Laptop, Smartphone, Server, Spielkonsole...
@@ -701,13 +705,6 @@ Latenz: Frankfurt → New York = ~80ms
 
 <!-- _class: lead -->
 
-# Pause
-## 15 Minuten
-
----
-
-<!-- _class: lead -->
-
 # Teil 2: Bits & Bytes
 ## Die Sprache der Computer
 
@@ -792,7 +789,7 @@ Farbbild: Rot + Grün + Blau
 **Jede Hex-Ziffer = 4 Bits**
 0-9, A-F (A=10, B=11, ..., F=15)
 
-**Ihr kennt das:** `#FF0000` = Rot in CSS!
+**Ihr kennt das:** `#FF0000` = Rot in CSS
 
 <!--
 Hex = Shortcut für Menschen
@@ -833,7 +830,7 @@ CSS-Farben nutzen Hex
 <!--
 Speicheradressen werden hexadezimal angegeben
 Einfacher zu lesen als binär
-Programmierer:innen arbeiten damit täglich
+ProgrammiererInnen arbeiten damit täglich
 -->
 
 ---
@@ -845,17 +842,20 @@ Programmierer:innen arbeiten damit täglich
 
 ---
 
-# Was ist HTML?
+# Was ist HTML? (1/2)
 
 **H**yper**T**ext **M**arkup **L**anguage
 
-- **Keine** Programmiersprache!
-- Beschreibt **Struktur** einer Webseite
-- Tags markieren Inhalt
+* **Keine** Programmiersprache
+* Am ehesten eine Formattierungssprache
+* Beschreibt **Struktur und Aufbau** einer Webseite
+  * ```html
+    <p>Das ist ein Absatz.</p>
+
+    <input type="date"/>
+    ```
+
 
-```html
-<p>Das ist ein Absatz.</p>
-```
 
 <!--
 HTML = Auszeichnungssprache (wie Markdown)
@@ -865,10 +865,91 @@ Aktuelle Version: HTML5 (seit 2014)
 
 ---
 
-# HTML-Anatomie
+# Was ist HTML? (2/2)
+
+* Mit HTML werden **HTML-Dokumente** beschrieben (bspw. `index.html`)
+* Ein HTML-Dokument beschreibt das/den `Document Object Model (DOM)` 
+* Der DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
+  * *parent nodes / elements*
+  * *child nodes / elements*
+  * *sibling nodes / elements*
+  * <small>Während wir in HTML von Elementen bzw. *elements* sprechen, so werden sie in JavaScript (JS) eher als *nodes* gelesen.</small>
+
+---
+
+# HTML-Anatomie (1/2)
+
+Formattierungssprache
+
+* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten 
+  * Syntax: `<element attribute="value"> ... </element>` 
+  * Öffnende und schließende HTML-Tags müssen identisch sein
+  * Das schließende Tag muss ein `/` nach der Spitzenklammer haben
+    
+---
+
+# HTML-Anatomie (2/2)
+
+* Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
+  * **Umschließend**
+    * `<b> ... </b>` fett-gedruckter Text (inline)
+    * `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
+    * `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
+    * `<details> ... </details>` Collapsable / Akkordion / Aufklapp-Text
+  * **Selbst-schließend**
+    * `<img />` Bild, Vektorgrafik etc.
+    * `<input />` Eingabefeld
+    * `<meta />` Metadaten
+---
+
+# Darstellungsebene und Metadaten
 
 ```html
-<p class="wichtig">Das ist ein Absatz.</p>
+<html>
+  <head>
+    METADATEN
+  </head>
+  
+  <body>
+    DARSTELLUNGSEBENE
+  </body>
+</html>
+```
+
+* Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
+  *  `<head> ... </head>` Metadaten für den Browser, zum Teilen, für Suchmaschinen
+  *  `<body> ... </body>` Darzustellender Inhalt, Text, Formulare
+  
+---
+
+# HTML Metadaten
+
+```html
+<html>
+  <head>
+    <title>Im Browsertab als Überschrift sichtbar</title>
+    
+    <meta name="description" content="" />
+    
+    <meta name="og:image" content="https://...." />
+  </head>
+   
+  ...
+   
+</html>
+```
+
+* <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
+* <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
+
+---
+
+# HTML-Tags und Attribute
+
+```html
+<body>
+  <p class="wichtig">Das ist ein Absatz.</p>
+</body>
 ```
 
 | Teil | Bezeichnung |
@@ -878,37 +959,39 @@ Aktuelle Version: HTML5 (seit 2014)
 | `Das ist ein Absatz.` | Inhalt |
 | `</p>` | Closing Tag (schließendes Tag) |
 
-<!--
-Tags = Etiketten
-Attribute = Zusatzinfos
-Manche Tags sind selbstschließend: <img />
--->
+---
+
+# HTML-Tags und Attribute (selbst-schließend) 
+
+```html
+<input type="" />
+```
+
+| Teil | Bezeichnung |
+|------|-------------|
+| `<input ...` | Eingabefeld |
+| `type="date"` | Attribut *type* mit dem Wert *date* |
+| `... />` | Schließendes `/` im *(öffnenden) Tag* enthalten |
 
 ---
 
-# Grundgerüst
+# Vollständiges Grundgerüst
 
 ```html
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <meta charset="UTF-8">
-    <title>Meine erste Seite</title>
+  <title>Portfolio von ...</title>
+  <meta name="description" content="Hier gibt es die besten ..." />
+  <meta name="og:image" content="https://...." />
 </head>
 <body>
-    <h1>Hallo Welt!</h1>
-    <p>Das ist mein erster Absatz.</p>
+  <h1>Hallo Welt!</h1>
+  <p>Das ist mein erster Absatz.</p>
 </body>
 </html>
 ```
 
-<!--
-DOCTYPE: Sagt Browser "das ist HTML5"
-html: Wurzelelement
-head: Metadaten (nicht sichtbar)
-body: Sichtbarer Inhalt
--->
-
 ---
 
 # Die wichtigsten Tags
@@ -917,8 +1000,8 @@ body: Sichtbarer Inhalt
 |-----|-----------|
 | `<h1>` bis `<h6>` | Überschriften (h1 = größte) |
 | `<p>` | Absatz (Paragraph) |
-| `<a href="...">` | Link |
-| `<img src="...">` | Bild |
+| `<a href="..."> ... </a>` | Hyper-Link |
+| `<img src="..."/>` | Bild |
 | `<ul>`, `<ol>`, `<li>` | Listen |
 | `<div>` | Container/Box |
 | `<span>` | Inline-Container |
@@ -942,159 +1025,7 @@ a = anchor (Anker)
 - Extension: "Live Server"
 
 **Option 3: Online-Editoren**
-- [https://stackblitz.com](https://stackblitz.com)
-- [https://codepen.io](https://codepen.io)
-
-<!--
-Erstmal ohne IDE starten!
-Verstehen: HTML ist nur Text
--->
-
----
-
-# Terminal & Paketmanager
-
-**Warum brauchen wir das?**
-- Professionelle Webentwicklung läuft über die Kommandozeile
-- Tools wie `git`, `node`, `npm` werden später benötigt
-- Bash-Skripte automatisieren wiederkehrende Aufgaben
-
-**Je nach Betriebssystem:**
-
-| macOS | Windows |
-|-------|---------|
-| Terminal ist vorinstalliert | **WSL** installieren |
-| **Homebrew** als Paketmanager | Ubuntu-Terminal nutzen |
-
-<!--
-Heute nur Einrichtung
-Später: git, node.js, npm
-Bash = Standard-Shell für Entwickler
--->
-
----
-
-# macOS: Homebrew installieren
-
-**Terminal öffnen:** Spotlight → "Terminal"
-
-**Homebrew installieren:**
-```bash
-/bin/bash -c "$(curl -fsSL https://homebrew.sh/install.sh)"
-```
-
-**Danach verfügbar:**
-```bash
-brew install git        # Versionskontrolle
-brew install node       # JavaScript-Runtime
-brew install --cask visual-studio-code
-```
-
-**Homebrew** = Der fehlende Paketmanager für macOS
-https://brew.sh
-
-<!--
-Einzeiler kopieren, im Terminal einfügen
-Passwort eingeben
-Dauert 2-5 Minuten
--->
-
----
-
-# Windows: WSL installieren (1/2)
-
-**PowerShell als Administrator öffnen:**
-
-1. `Windows-Taste` drücken
-2. `powershell` eintippen
-3. Rechtsklick → **"Als Administrator ausführen"**
-   *(oder: Rechts auf "Als Administrator ausführen" klicken)*
-
-**Im PowerShell-Fenster eingeben:**
-```powershell
-wsl --install
-```
-
-**Danach: Neustart erforderlich!**
-
-<!--
-WSL = Windows Subsystem for Linux
-Echtes Linux im Windows
-Alle Linux-Tools verfügbar
--->
-
----
-
-# Windows: WSL einrichten (2/2)
-
-**Nach dem Neustart:** Ubuntu wird als App in Windows installiert
-→ Ubuntu-Terminal öffnet sich zur Einrichtung
-→ Username + Passwort festlegen (Passwort wird nicht angezeigt!)
-
-**Im Ubuntu-Terminal:**
-```bash
-sudo apt update
-sudo apt install git nodejs npm
-```
-
-**VS Code installieren:** [https://code.visualstudio.com](https://code.visualstudio.com)
-→ Extension **"WSL"** installieren
-→ Danach: `code .` öffnet VS Code aus Ubuntu heraus
-
-<!--
-Passwort-Eingabe: Cursor bewegt sich nicht, einfach tippen
-sudo = Super User DO (Admin-Rechte)
-VS Code verbindet sich automatisch mit WSL
--->
-
----
-
-# Hands-On: Erste HTML-Seite (45 Min)
-
-**Aufgabe:**
-
-1. Erstelle Datei `index.html`
-2. Schreibe das Grundgerüst (abtippen, nicht kopieren!)
-3. Füge hinzu:
-   - Eine Überschrift über dich
-   - Einen Absatz mit kurzem Steckbrief
-   - Eine Liste deiner Hobbies
-   - Ein Bild (aus dem Internet)
-   - Einen Link zu einer Webseite
-
-**Hilfe:** https://nextlevelshit.github.io/html-over-js/
-
-<!--
-Abtippen = besser lernen als Copy-Paste
-Fehler sind erlaubt und wichtig!
-Untereinander helfen
--->
-
----
-
-# Beispiel-Lösung
-
-```html
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <title>Über mich</title>
-</head>
-<body>
-    <h1>Max Mustermann</h1>
-    <p>Ich studiere Medienwirtschaft an der HdM.</p>
-    <h2>Meine Hobbies</h2>
-    <ul>
-        <li>Musik hören</li>
-        <li>Kochen</li>
-        <li>Gaming</li>
-    </ul>
-    <img src="https://placekitten.com/200/200" alt="Katze">
-    <a href="https://hdm-stuttgart.de">HdM Website</a>
-</body>
-</html>
-```
+- [https://codepen.io/pen/](https://codepen.io/pen/)
 
 ---
 
@@ -1108,7 +1039,7 @@ Untereinander helfen
 | Popup/Modal | `<dialog>` |
 | Fortschrittsbalken | `<progress>` |
 | Datum-Auswahl | `<input type="date">` |
-| Validierung | `required`, `min`, `max` |
+| Validierung | Attribute beliebig verknüpfbar `required`, `min`, `max` |
 
 **→ HTML first, JavaScript later!**
 
@@ -1125,13 +1056,11 @@ Accessibility ist eingebaut
 
 ```html
 <details>
-    <summary>Klick mich!</summary>
-    <p>Dieser Text war versteckt.</p>
+  <summary>Klick mich!</summary>
+  <p>Dieser Text war versteckt.</p>
 </details>
 ```
 
-**Probiert es aus!** Kein JavaScript nötig.
-
 ---
 
 # Beispiel: Dialog
@@ -1158,7 +1087,7 @@ Besser als selbstgebaute Modals
 
 ---
 
-# Hands-On: Native HTML Features (30 Min)
+# Hands-On: Native HTML Features
 
 **Erweitert eure Seite:**
 
@@ -1166,336 +1095,30 @@ Besser als selbstgebaute Modals
 2. Erstellt ein Kontaktformular mit:
    - `<input type="email">` (automatische Validierung!)
    - `<input type="date">`
-   - `<textarea>`
-   - `<button type="submit">`
-
-**Tipp:** Browser validiert automatisch!
+   - `<textarea> ... </textarea>`
+   - `<button type="submit"> ... </button>`
 
 ---
 
-<!-- _class: lead -->
+# Zusammenfassung Termin 1
 
-# Mittagspause
-## 60 Minuten
+**Geschichte:**
+- Lovelace, Hollerith, Turing, Hopper – PionierInnen
+- IBM & NS-Deutschland → Verantwortung
+- Von-Neumann-Architektur
+- ARPANET → Internet → WWW
+
+**Technik:**
+- Bits & Bytes, Hexadezimal
+- Von-Neumann-Architektur
 
 ---
 
-<!-- _class: lead -->
+# Zusammenfassung Termin 1 (Praxis)
 
-# Teil 4: Rechner verbinden
-## Netzwerk-Grundlagen
-
----
-
-# Warum Rechner verbinden?
-
-**Ein Rechner allein macht nicht glücklich!**
-
-- Daten teilen
-- Zusammenarbeiten
-- Kommunizieren
-- Ressourcen teilen (Drucker, Speicher)
-
-**Was für Kommunikationsmöglichkeiten kennt ihr?**
-(ohne Internet)
-
-<!--
-Interaktive Frage an Studierende
-Antworten sammeln: Brief, Telefon, Fax, Funk...
--->
-
----
-
-# Kommunikationsarten
-
-| Kategorie | Beispiel |
-|-----------|----------|
-| **Synchron** | Telefonat, Video-Call |
-| **Asynchron** | E-Mail, Brief, SMS |
-| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
-| **Verbindungslos** | Brief, Postkarte |
-
-<!--
-Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
--->
-
----
-
-# Das OSI-Modell
-
-**7 Schichten der Netzwerkkommunikation:**
-
-| Schicht | Name | Beispiel |
-|---------|------|----------|
-| 7 | Anwendung | HTTP, FTP, SMTP |
-| 6 | Darstellung | Verschlüsselung, Kompression |
-| 5 | Sitzung | Sessions |
-| 4 | Transport | TCP, UDP |
-| 3 | Vermittlung | IP, Routing |
-| 2 | Sicherung | Ethernet, MAC |
-| 1 | Bitübertragung | Kabel, WLAN |
-
-<!--
-OSI = Open Systems Interconnection
-ISO-Standard
-Theoretisches Modell
-TCP/IP ist die praktische Implementierung
--->
-
----
-
-# TCP/IP: Die Praxis
-
-**Das Internet nutzt TCP/IP (4 Schichten):**
-
-| TCP/IP | Entspricht OSI | Protokolle |
-|--------|----------------|------------|
-| Anwendung | 5-7 | HTTP, DNS, SMTP |
-| Transport | 4 | TCP, UDP |
-| Internet | 3 | IP |
-| Netzzugang | 1-2 | Ethernet, WLAN |
-
-**TCP/IP = Transmission Control Protocol / Internet Protocol**
-
-<!--
-TCP/IP einfacher als OSI
-Praktisch gewachsen, nicht theoretisch geplant
--->
-
----
-
-# IP-Adressen
-
-**Jeder Rechner im Netzwerk braucht eine Adresse**
-
-**IPv4:** 4 Zahlen (0-255), Punkt-getrennt
-`192.168.1.1`
-
-**Problem:** 2³² = nur 4,3 Milliarden Adressen
-→ Reicht nicht für alle Geräte!
-
-**IPv6:** 128 Bit = 3,4 × 10³⁸ Adressen
-`2001:0db8:85a3:0000:0000:8a2e:0370:7334`
-
-<!--
-Eure IP: ipconfig (Win) / ifconfig (Mac/Linux)
-Private IPs: 192.168.x.x, 10.x.x.x
-Öffentliche IP: Router hat eine
-NAT = Network Address Translation
--->
-
----
-
-# Spezielle IP-Adressen
-
-| Adresse | Bedeutung |
-|---------|-----------|
-| `127.0.0.1` | **Localhost** – Ihr eigener Rechner |
-| `192.168.x.x` | Private Adressen (Heimnetz) |
-| `10.x.x.x` | Private Adressen (Firmen) |
-
-**Localhost = "Ich selbst"**
-→ Perfekt für Web-Entwicklung!
-
-<!--
-Localhost für lokale Entwicklung
-Private IPs werden nicht im Internet geroutet
-Router macht NAT (Network Address Translation)
--->
-
----
-
-# Ports: Die Türnummern
-
-**IP-Adresse = Hausnummer**
-**Port = Wohnungstür**
-
-| Port | Dienst |
-|------|--------|
-| 80 | HTTP (Web) |
-| 443 | HTTPS (Web, verschlüsselt) |
-| 22 | SSH (Terminal) |
-| 25 | SMTP (E-Mail senden) |
-
-**Beispiel:** `192.168.1.1:8080`
-(IP-Adresse : Port)
-
-<!--
-Ein Server kann viele Dienste anbieten
-Ports 0-1023 = "well-known" (reserviert)
-Ports 1024-65535 = frei nutzbar
--->
-
----
-
-# Routing: Der Weg durchs Netz
-
-**Router = Postamt**
-- Entscheidet, wohin Pakete gehen
-- Findet besten Weg
-- Pakete können verschiedene Wege nehmen!
-
-**Traceroute:** Zeigt den Weg
-```bash
-traceroute google.de     # Mac/Linux
-tracert google.de        # Windows
-```
-
-<!--
-Live-Demo: traceroute zu google.de
-Zeigt alle Router auf dem Weg
-Pakete können verschiedene Wege nehmen
-Adaptives Routing bei Auslastung
--->
-
----
-
-# HTTP: Das Web-Protokoll
-
-**H**yper**T**ext **T**ransfer **P**rotocol
-
-```
-Browser                          Server
-   |                               |
-   |---- GET /index.html --------->|
-   |                               |
-   |<------ 200 OK + HTML ---------|
-   |                               |
-```
-
-**Methoden:**
-- `GET` – Daten abrufen
-- `POST` – Daten senden
-- `PUT` – Daten aktualisieren
-- `DELETE` – Daten löschen
-
-<!--
-Stateless: Jede Anfrage ist unabhängig
-Request → Response
-HTTPS = HTTP + TLS-Verschlüsselung
--->
-
----
-
-# Hands-On: Netzwerk erkunden (20 Min)
-
-**Terminal öffnen:** PowerShell (Win) / Terminal (Mac/Linux)
-
-```bash
-ipconfig          # IP-Adresse (Win)
-ifconfig          # IP-Adresse (Mac/Linux)
-ping google.de    # Erreichbarkeit testen
-tracert google.de # Weg zum Server (Win)
-```
-
----
-
-<!-- _class: lead -->
-
-# Teil 5: HTML vertiefen
-## Semantik & Formulare
-
----
-
-# Semantisches HTML
-
-**Nicht alles ist ein `<div>`!**
-
-| Statt | Besser |
-|-------|--------|
-| `<div class="header">` | `<header>` |
-| `<div class="nav">` | `<nav>` |
-| `<div class="main">` | `<main>` |
-| `<div class="footer">` | `<footer>` |
-| `<div class="article">` | `<article>` |
-
-**Warum?** Accessibility, SEO, Wartbarkeit
-
-<!--
-ScreenReader nutzen semantische Tags
-Google nutzt sie für SEO
-Code wird lesbarer
--->
-
----
-
-# Semantisches Grundgerüst
-
-```html
-<body>
-    <header>
-        <nav>
-            <a href="/">Home</a>
-            <a href="/about">Über uns</a>
-        </nav>
-    </header>
-    
-    <main>
-        <article>
-            <h1>Hauptinhalt</h1>
-            <p>...</p>
-        </article>
-    </main>
-    
-    <footer>
-        <p>© 2025 Meine Webseite</p>
-    </footer>
-</body>
-```
-
----
-
-# Formulare: Input-Typen
-
-```html
-<form>
-    <input type="text" placeholder="Name">
-    <input type="email" placeholder="E-Mail">
-    <input type="password" placeholder="Passwort">
-    <input type="number" min="0" max="100">
-    <input type="date">
-    <input type="color">
-    <input type="range" min="0" max="100">
-    <button type="submit">Absenden</button>
-</form>
-```
-
-**Browser validiert automatisch!** (type="email" prüft @)
-
-<!--
-Viele Typen, die Arbeit abnehmen
-Keyboard passt sich an (Handy)
-Validierung kostenlos
--->
-
----
-
-# Hands-On: Komplette Seite (60 Min)
-
-**Baut eine "Über mich"-Seite mit:**
-
-1. Semantisches Grundgerüst (header, nav, main, footer)
-2. Navigation mit Links zu Abschnitten
-3. Über-mich-Abschnitt mit Bild
-4. Hobbies-Liste
-5. Kontaktformular (Name, E-Mail, Nachricht, Button)
-
-**Ziel:** Vollständige, valide HTML-Seite
-
----
-
-# Fleißaufgabe bis 10.01.
-
-**Erweitert eure Seite:**
-
-1. Fügt mindestens 3 weitere Abschnitte hinzu
-2. Nutzt `<details>` für FAQ-Bereich
-3. Erstellt zweite HTML-Datei und verlinkt sie
-4. Bonus: Fügt Tabelle mit Stundenplan ein
-
-**Ressourcen:**
-- MDN Web Docs: https://developer.mozilla.org/de/
-- HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
+**Was wir gemacht haben:**
+- HTML-Grundstruktur erstellt
+- Native HTML-Features genutzt
 
 ---
 
@@ -1509,29 +1132,6 @@ Validierung kostenlos
 
 ---
 
-# Zusammenfassung Termin 1
-
-**Geschichte:**
-- Hollerith → IBM → NS-Deutschland → Verantwortung
-- Manhattan-Projekt → Von Neumann → Computer-Architektur
-- ARPANET → Internet → WWW
-
-**Technik:**
-- Bits & Bytes, Hexadezimal
-- Von-Neumann-Architektur
-- IP-Adressen, Ports, HTTP
-
----
-
-# Zusammenfassung Termin 1 (Praxis)
-
-**Was wir gemacht haben:**
-- HTML-Grundstruktur erstellt
-- Semantische Tags angewendet
-- Native HTML-Features genutzt
-
----
-
 # Lizenz
 
 Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**