diff --git a/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md b/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
new file mode 100644
index 0000000..a1828e6
--- /dev/null
+++ b/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
@@ -0,0 +1,1301 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Grundlagen IT- und Internettechnik"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: "Tag 1: Geschichte, Grundlagen & HTML"
+---
+
+
+
+
+
+
+
+
+
+# Grundlagen IT- und Internettechnik
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+---
+
+
+
+# Tag 1 – 20.12.2025
+## Geschichte, Grundlagen & HTML
+
+---
+
+# Über mich
+
+**Michael Czechowski**
+
+- Softwareentwickler & IT-Berater
+- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
+- Hintergrund: Philosophie & Informatik
+- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de
+
+
+
+---
+
+# Kurze Umfrage
+
+**Bitte Hand heben:**
+
+1. Wer hat einen Windows-Laptop dabei?
+2. Wer hat einen Mac dabei?
+3. Wer nutzt Linux?
+4. **Wer hat schon mal HTML oder CSS geschrieben?**
+5. Wer kann programmieren (egal welche Sprache)?
+
+
+
+---
+
+# Kursübersicht
+
+**3 Ganztage (10:00 – 16:30 Uhr):**
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
+| 2 | 10.01.2026 | Netzwerke, Protokolle & **CSS** |
+| 3 | 24.01.2026 | Interaktivität & **JavaScript** |
+
+**Format:** Theorie + viele Hands-On-Übungen
+
+**Ziel:** Ihr könnt am Ende eine eigene interaktive Webseite bauen!
+
+
+
+---
+
+
+
+# Teil 1: Die Geschichte
+## Von der Lochkarte zum Internet
+
+---
+
+
+
+
+
+
+
+
+---
+
+# Torches of Freedom (1929)
+
+**Edward Bernays** – Neffe von Sigmund Freud
+
+**Problem:** Frauen rauchen nicht in der Öffentlichkeit (Tabu)
+**Auftraggeber:** American Tobacco Company
+
+**Lösung:** Suffragetten-Marsch, Osterparade NYC
+"Torches of Freedom" – Zigaretten als Freiheitssymbol
+
+**Ergebnis:** Umsatz verdoppelt, Tabu gebrochen
+
+
+
+---
+
+# Warum diese Geschichte?
+
+**Technik ist nie neutral.**
+
+- Lochkarten zählten Menschen... und sortieren sie
+- Computer berechneten Atombomben... und verbinden uns
+- Das Internet demokratisiert Wissen... und verbreitet Desinformation
+
+**MedienwirtschaftlerInnen** müssen verstehen:
+Technologie ist ein Werkzeug – **wofür** es genutzt wird, entscheiden Menschen.
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+# Herman Hollerith (1860–1929)
+
+**Das Problem:** US-Volkszählung 1880 dauerte **7 Jahre** zur Auswertung
+
+**Die Lösung:** Lochkarten + elektromechanische Tabelliermaschine
+
+**1890 Census:** 62 Millionen Menschen in **2,5 Jahren** gezählt
+
+**Ersparnis:** 5 Millionen Dollar (damals!)
+
+
+
+---
+
+# Die Geburt von IBM
+
+**1896:** Hollerith gründet "Tabulating Machine Company"
+
+**1911:** Fusion → "Computing-Tabulating-Recording Company" (CTR)
+
+**1924:** Umbenennung in **International Business Machines (IBM)**
+
+IBM dominiert die nächsten 50 Jahre die Computerwelt.
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+# IBM und Nazi-Deutschland
+
+**Dehomag** = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
+
+**Einsatz:**
+- Volkszählung 1933 (Identifikation von Juden)
+- Verwaltung der Konzentrationslager
+- Logistik der Deportationen
+
+**Edwin Black:** *"IBM and the Holocaust"* (2001)
+
+
+
+---
+
+# 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
+
+
+
+---
+
+
+
+# Der Zweite Weltkrieg
+## Geburt des modernen Computers
+
+---
+
+
+
+
+
+
+
+
+---
+
+# Das Manhattan-Projekt (1942–1945)
+
+**Ziel:** Bau der ersten Atombombe
+
+**Problem:** Berechnung von Implosionswellen
+→ Millionen von Berechnungen nötig
+
+**Team:**
+- J. Robert Oppenheimer (Leitung)
+- Richard Feynman (Rechenabteilung)
+- **John von Neumann** (Mathematik & Stoßwellen)
+
+
+
+---
+
+
+
+# John von Neumann (1903–1957)
+
+**"Das letzte Universalgenie"**
+
+- Geboren in Budapest, Österreich-Ungarn
+- Mit 8: Konnte Telefonbücher auswendig
+- Mit 22: Doktor in Mathematik
+
+**Beiträge:**
+- Quantenmechanik
+- Spieltheorie
+- **Computerarchitektur**
+
+
+
+---
+
+# Das Problem der Berechnung
+
+**Manhattan-Projekt brauchte:**
+- Ballistik-Berechnungen
+- Implosions-Simulationen
+- Nuklearphysik-Gleichungen
+
+**Lösung 1943:** Menschliche "Computer" (meist Frauen!)
+→ Mit Taschenrechnern, Tabellen, IBM-Lochkarten
+
+**Zu langsam!** → Bedarf an automatischer Berechnung
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+# ENIAC (1945)
+
+**Electronic Numerical Integrator and Computer**
+
+- **30 Tonnen**, 167 m² Fläche
+- **18.000 Vakuumröhren**
+- 5.000 Additionen pro Sekunde
+- Programmierung durch **Umstecken von Kabeln**
+
+**Problem:** Bei jedem neuen Problem → Wochen Umverkabelung
+
+
+
+---
+
+# Von Neumanns Idee (1945)
+
+**"First Draft of a Report on the EDVAC"**
+
+**Kernidee:** Programm und Daten im **selben Speicher**
+
+**Vorher:** Hardware = Programm (Umstecken)
+**Nachher:** Software = austauschbar (laden)
+
+→ **Gespeichertes Programm** = Revolution
+
+
+
+---
+
+# Von-Neumann-Architektur
+
+```
+┌─────────────────────────────────────────┐
+│ CPU │
+│ ┌─────────────┐ ┌─────────────────┐ │
+│ │ Rechenwerk │ │ Steuerwerk │ │
+│ │ (ALU) │ │ (Control Unit) │ │
+│ └─────────────┘ └─────────────────┘ │
+└─────────────────────────────────────────┘
+ ↕ Bus-System ↕
+┌─────────────────┐ ┌──────────────────┐
+│ Speicherwerk │ │ Ein-/Ausgabewerk │
+│ (Memory) │ │ (I/O) │
+└─────────────────┘ └──────────────────┘
+```
+
+
+
+---
+
+# Die 5 Komponenten
+
+| Komponente | Funktion |
+|------------|----------|
+| **Rechenwerk (ALU)** | Führt Berechnungen durch |
+| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
+| **Speicherwerk** | Speichert Programme UND Daten |
+| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
+| **Bus-System** | Verbindet alle Komponenten |
+
+**Wichtig:** Programme und Daten **gemeinsam** im Speicher!
+
+
+
+---
+
+# Warum ist das wichtig?
+
+**Ohne Von-Neumann-Architektur:**
+- Kein Betriebssystem
+- Keine Apps
+- Kein Multitasking
+- Keine Updates
+
+**JEDES digitale Gerät** basiert auf diesem Prinzip:
+Laptop, Smartphone, Router, Smartwatch, Auto-Computer...
+
+
+
+---
+
+
+
+# Vom Militär zum Netz
+## Die Entstehung des Internets
+
+---
+
+# Das Problem (1960er)
+
+**Kalter Krieg:**
+- Was passiert bei einem Nuklearangriff?
+- Zentrale Kommunikation → ein Treffer = alles tot
+
+**DARPA** (Defense Advanced Research Projects Agency):
+→ Dezentrales Netzwerk, das Angriffe überlebt
+
+
+
+---
+
+# Internet-Timeline
+
+| Jahr | Meilenstein |
+|------|-------------|
+| **1966** | ARPANET-Projekt startet |
+| **1969** | Erste Verbindung: UCLA ↔ Stanford |
+| **1974** | TCP/IP-Protokoll entwickelt |
+| **1983** | ARPANET wechselt zu TCP/IP |
+| **1989** | Tim Berners-Lee erfindet das WWW |
+| **1993** | Erster grafischer Browser (Mosaic) |
+| **1995** | Kommerzialisierung, Amazon/eBay gegründet |
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+# Das WWW (1989)
+
+**Tim Berners-Lee** am CERN (Genf)
+
+**Problem:** WissenschaftlerInnen können Dokumente nicht verlinken
+
+**Lösung:**
+- **HTML** – Auszeichnungssprache für Dokumente
+- **HTTP** – Protokoll zum Übertragen
+- **URL** – Eindeutige Adressen
+
+**1991:** Erste Webseite geht online
+
+
+
+---
+
+# 1,3 Millionen Kilometer Unterseekabel
+
+**Heute:**
+
+- **5,5 Milliarden** Menschen online
+- **>400** Unterseekabel weltweit
+- **1,3 Mio. km** Kabel unter Wasser
+- Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)
+
+**Das Internet ist physisch!** Keine "Cloud" ohne Kabel.
+
+
+
+---
+
+
+
+# Pause
+## 15 Minuten
+
+---
+
+
+
+# Teil 2: Bits & Bytes
+## Die Sprache der Computer
+
+---
+
+
+
+
+
+
+
+
+---
+
+# Das Bit
+
+**Kleinste Informationseinheit**
+
+- **0 oder 1**
+- AN oder AUS
+- Strom fließt oder nicht
+
+**BIT** = **B**inary Dig**IT** (Binärziffer)
+Geprägt 1948 von Claude Shannon
+
+
+
+---
+
+# Das Byte
+
+**8 Bits = 1 Byte**
+
+```
+0 1 0 0 1 0 0 1
+```
+
+**Wie viele Kombinationen?**
+2⁸ = **256 Möglichkeiten** (0-255)
+
+
+
+---
+
+# Was kann man mit 256 Zuständen machen?
+
+- **256 Zeichen** (Buchstaben, Zahlen, Symbole)
+- **256 Graustufen** (0 = Schwarz, 255 = Weiß)
+- **256 Lautstärkestufen**
+- **Zahlen 0-255**
+
+**Für Farbe:** 3 Bytes pro Pixel (RGB)
+R=0-255, G=0-255, B=0-255 → **16,7 Millionen Farben**
+
+
+
+---
+
+# Hexadezimal: Lesbarkeit
+
+**Binär ist unleserlich:**
+`01001101 01010000 00110011`
+
+**Hexadezimal (Base 16):**
+`4D 50 33` (= "MP3" in ASCII)
+
+**Jede Hex-Ziffer = 4 Bits**
+0-9, A-F (A=10, B=11, ..., F=15)
+
+**Ihr kennt das:** `#FF0000` = Rot in CSS!
+
+
+
+---
+
+# Speicheradressen
+
+**64-Bit-System:**
+- Speicheradresse = 64 Bit lang
+- 64 Bit = 16 Hex-Ziffern
+
+**Beispiel (vereinfacht, 12 Bit):**
+
+| Dezimal | Binär | Hexadezimal |
+|---------|-------|-------------|
+| 258 | 0001 0000 0010 | 102 |
+
+**4 Bits = 1 Hex-Ziffer**
+
+
+
+---
+
+
+
+# Teil 3: Eure erste Webseite
+## HTML-Grundlagen
+
+---
+
+# Was ist HTML?
+
+**H**yper**T**ext **M**arkup **L**anguage
+
+- **Keine** Programmiersprache!
+- Beschreibt **Struktur** einer Webseite
+- Tags markieren Inhalt
+
+```html
+Das ist ein Absatz.
+```
+
+
+
+---
+
+# HTML-Anatomie
+
+```html
+Das ist ein Absatz.
+```
+
+| Teil | Bezeichnung |
+|------|-------------|
+| `` | Opening Tag (öffnendes Tag) |
+| `class="wichtig"` | Attribut |
+| `Das ist ein Absatz.` | Inhalt |
+| `
` | Closing Tag (schließendes Tag) |
+
+
+
+---
+
+# Grundgerüst
+
+```html
+
+
+
+
+ Meine erste Seite
+
+
+ Hallo Welt!
+ Das ist mein erster Absatz.
+
+
+```
+
+
+
+---
+
+# Die wichtigsten Tags
+
+| Tag | Bedeutung |
+|-----|-----------|
+| `` bis `` | Überschriften (h1 = größte) |
+| `
` | Absatz (Paragraph) |
+| `` | Link |
+| `
` | Bild |
+| ``, ``, `- ` | Listen |
+| `
+ HdM Website + + +``` + +--- + +# Native HTML: Mehr als ihr denkt! + +**Viele Dinge brauchen KEIN JavaScript:** + +| Funktion | HTML-Element | +|----------|--------------| +| Aufklapp-Text | `
` + `