diff --git a/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
new file mode 100644
index 0000000..40e4cb0
--- /dev/null
+++ b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
@@ -0,0 +1,1242 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Grundlagen IT- und Internettechnik"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: "Termin 1: Geschichte, Grundlagen & HTML"
+---
+
+
+
+
+
+
+
+
+
+
+# Grundlagen IT- und Internettechnik
+
+**223015c** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015c](https://git.librete.ch/hdm/223015c)
+
+---
+
+
+
+# Termin 1 – 20.12.2025
+## Geschichte, Grundlagen & HTML
+
+---
+
+# Kursübersicht
+
+**3 Termine (10:00 – 16:30 Uhr):**
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
+| 2 | 10.01.2026 | Netzwerke, Protokolle, **semantisches HTML** & **CSS** |
+| 3 | 24.01.2026 | Interaktivität, Animationen & **JavaScript** |
+
+**Format:** Theorie + viele Hands-On-Übungen
+
+**Ziel:** "Gelernte Hilflosigkeit" ablegen
+
+---
+
+
+
+# Teil 1: Die Geschichte
+## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus
+
+---
+
+
+
+
+
+
+
+
+---
+
+
+
+# Ada Lovelace (1815–1852)
+
+**Die erste Programmiererin der Welt**
+
+- Arbeitete mit **Charles Babbage** an der "Analytical Engine"
+- Ihre »Notes« zu Babbages Maschine: **umfangreicher als sein Text**
+- 1843 publiziert – unter Initialen »A.A.L.« Ada Augusta Lovelace
+- Erst **1953** wiederentdeckt und gewürdigt
+- Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+
+
+# 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 NS-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
+
+* Technologie ist nie neutral
+* Steigerung der Rechenleistung ist immer dann nötig, wenn die angehäuften Datenmengen nicht mehr von Menschenhand berechnet werden können
+
+
+
+
+---
+
+
+
+# Vom Ende des Zweiten Weltkriegs
+## Geburt des modernen Computers
+
+---
+
+
+
+
+
+
+
+
+---
+
+# Alan Turing (1912–1954)
+
+**Vater der theoretischen Informatik**
+
+- 1936: **Turing-Maschine** – theoretisches Modell eines Computers
+- 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung
+- 1950: "Computing Machinery and Intelligence" → **Turing-Test**
+- **2013:** Posthume königliche Begnadigung
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+# Enigma & Bletchley Park
+
+**Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen
+
+**Turings Lösung:** "Bombe" Elektro-mechanischer Entschlüssler
+
+**Ergebnis:**
+- Alliierten konnten deutschen Funkverkehr mitlesen
+
+**Geheim bis 1970er!** Turing starb ohne Anerkennung.
+
+
+
+---
+
+# Die Turing-Maschine (1936)
+
+**Theoretisches Modell eines Computers:**
+
+```
+┌─────────────────────────────────────────┐
+│ ... │ 0 │ 1 │ 1 │ 0 │ 1 │ 0 │ ... │ ← Unendliches Band
+└─────────────────────────────────────────┘
+ ↑
+ ┌─────────────┐
+ │ Lese-/ │
+ │ Schreibkopf │
+ └─────────────┘
+ ↓
+ ┌─────────────┐
+ │ Zustand │ ← Endliche Zustände
+ └─────────────┘
+```
+
+**Beweis:** Alles Berechenbare kann so berechnet werden!
+→ Grundlage für **alle** modernen Computer
+
+
+
+---
+
+
+
+
+
+
+---
+
+# 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)
+
+- 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"
+→ 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
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+
+
+
+
+
+
+
+
+---
+
+
+
+# Grace Hopper (1906–1992)
+
+**"Amazing Grace" – Pionierin der Softwareentwicklung**
+
+- **1944:** Programmierte den Mark I (Harvard)
+- **1952:** Entwickelte den ersten **Compiler** (A-0)
+- **1959:** Mitentwicklung von **COBOL**
+- **Rear Admiral** der US Navy
+
+**Der erste "Bug":**
+1947 fand sie eine echte Motte im Mark II
+→ "Debugging" wurde zum Begriff
+
+
+
+---
+
+
+
+
+
+
+
+
+---
+
+
+
+# Margaret Hamilton (*1936)
+
+**Pionierin des Software Engineering**
+
+- **1965–1969:** Leitete das Software-Team am MIT für Apollo
+- Entwickelte die **Flugsoftware für Apollo 11**
+- Prägte den Begriff **"Software Engineering"**
+- Software verhinderte Abbruch der Mondlandung
+
+**Apollo 11 (1969):**
+Ihre Fehlererkennung rettete die Mission, als der Computer überlastet wurde
+
+
+
+---
+
+# 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!
+
+
+
+---
+
+
+
+# Von-Neumann-Architektur: Bedeutung
+
+**Ohne Von-Neumann-Architektur:**
+- Kein Betriebssystem
+- Keine Apps
+- Kein Multitasking
+- Keine Updates bzw. Veränderungen am Computer System
+
+**Die meisten Computer** basieren auf diesem Prinzip:
+Laptop, Smartphone, Server, Spielkonsole...
+
+**Ausnahme:** Mikrocontroller & DSPs nutzen oft die **Harvard-Architektur**
+(separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)
+
+
+
+---
+
+
+
+# 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
+- Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)
+
+**Das Internet ist physisch!** Keine "Cloud" ohne Kabel.
+
+
+
+---
+
+
+
+# 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
+
+
+
+---
+
+
+
+
+
+
+---
+
+
+
+
+
+
+---
+
+# Wo begegnet euch Hex?
+
+| Kontext | Beispiel |
+|---------|----------|
+| CSS-Farben | `#FF5733` |
+| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
+| Fehlercodes | `0x80070005` |
+| Speicheradressen | `0xA04F20` |
+| Unicode | `U+00E4` (ä) |
+
+→ Hex ist überall in der Technik
+
+
+
+---
+
+# Bits vs. Bytes: Die Verwirrung
+
+**1 Byte = 8 Bit** → Bits ÷ 8 = Bytes
+
+| Einheit (Bit) | Einheit (Byte) |
+|---------------|----------------|
+| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte |
+| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte |
+| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte |
+
+**Praxis:** 100 Mbit/s Internet = **12,5 MB/s** Download
+
+**Aber:** Computer rechnen binär (Basis 2)!
+
+
+
+---
+
+# Warum zeigt meine 1TB-Festplatte nur 931GB?
+
+**Zwei Zählweisen:**
+
+| Dezimal (Hersteller) | Binär (Computer) |
+|---------------------|------------------|
+| Kilo = 1.000 | Kibi = 1.024 (2¹⁰) |
+| Mega = 1.000.000 | Mebi = 1.048.576 (2²⁰) |
+| Giga = 1.000.000.000 | Gibi = 1.073.741.824 (2³⁰) |
+| Tera = 1.000.000.000.000 | Tebi = 1.099.511.627.776 (2⁴⁰) |
+
+**Das Problem:**
+- Hersteller verkauft: 1 TB = 1.000.000.000.000 Bytes
+- Computer rechnet: 1 TiB = 1.099.511.627.776 Bytes
+- Differenz: **9,1%** → zeigt nur **931 GB**
+
+
+
+---
+
+
+
+# Teil 3: Eure erste Webseite
+## HTML-Grundlagen
+
+---
+
+# Was ist HTML? (1/2)
+
+**H**yper**T**ext **M**arkup **L**anguage
+
+* **Keine** Programmiersprache
+* Am ehesten eine Formattierungssprache
+* Beschreibt **Struktur und Aufbau** einer Webseite
+ * ```html
+
Das ist ein Absatz.
+
+
+ ```
+
+
+
+
+
+---
+
+# 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*
+ * Während wir in HTML von Elementen bzw. *elements* sprechen, so werden sie in JavaScript (JS) eher als *nodes* gelesen.
+
+---
+
+# HTML-Anatomie (1/2)
+
+Formattierungssprache
+
+* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten
+ * Syntax: ` ... `
+ * Ö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**
+ * ` ... ` fett-gedruckter Text (inline)
+ * ` ... ` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
+ * ` ... ` Sichtbarer Teil eines HTML-Dokuments
+ * ` ... ` Collapsable / Akkordion / Aufklapp-Text
+ * **Selbst-schließend**
+ * `` Bild, Vektorgrafik etc.
+ * `` Eingabefeld
+ * `` Metadaten
+---
+
+# Darstellungsebene und Metadaten
+
+```html
+
+
+ METADATEN
+
+
+
+ DARSTELLUNGSEBENE
+
+
+```
+
+* Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
+ * ` ... ` Metadaten für den Browser, zum Teilen, für Suchmaschinen
+ * ` ... ` Darzustellender Inhalt, Text, Formulare
+
+---
+
+
+
+# HTML Metadaten
+
+```html
+
+
+ Im Browsertab als Überschrift sichtbar
+
+
+
+
+
+
+ ...
+
+
+```
+
+* *Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*
+* *Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*
+
+---
+
+# HTML-Tags und Attribute
+
+```html
+
+
Das ist ein Absatz.
+
+```
+
+| Teil | Bezeichnung |
+|------|-------------|
+| `
` | Opening Tag (öffnendes Tag) |
+| `class="wichtig"` | Attribut |
+| `Das ist ein Absatz.` | Inhalt |
+| `
` | Closing Tag (schließendes Tag) |
+
+---
+
+# HTML-Tags und Attribute (selbst-schließend)
+
+```html
+
+```
+
+| Teil | Bezeichnung |
+|------|-------------|
+| `` | Schließendes `/` im *(öffnenden) Tag* enthalten |
+
+---
+
+# Vollständiges Grundgerüst
+
+```html
+
+
+
+ Portfolio von ...
+
+
+
+
+
Hallo Welt!
+
Das ist mein erster Absatz.
+
+
+```
+
+---
+
+# Die wichtigsten Tags
+
+| Tag | Bedeutung |
+|-----|-----------|
+| `