---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
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;  /* darker raspberry */
}
section.invert h1 {
  color: #fff;
}
h2 {
  color: #1f2937;  /* dark gray, almost black */
}
pre {
  background: #0f0f23;
  color: #d63384;
  border-radius: 8px;
  border-left: 3px solid #d63384;
}
pre code {
  background: transparent;
  color: inherit;
}
code {
  background: #1a1a2e;
  color: #d63384;
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
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;
}
</style>

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

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

# Grundlagen IT- und Internettechnik

**223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart

**Wintersemester 2025/26**

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

---

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

![bg fit](./assets/qr/slides-223015c.png)

---

<!-- _class: lead -->

# Kapitel 1
## 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

---

<!-- _class: lead -->

# Teil 1: Die Geschichte
## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus

---

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

![bg fit](./assets/Ada_Lovelace.jpg)

<!--
Ada Lovelace, Daguerreotypie 1843
Antoine Claudet
-->

---

![bg right:30% contain](./assets/Ada_Lovelace.jpg)

# 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

<!--
Babbage: Mathematiker, besessen von Rechenmaschinen. Erst die Difference Engine, dann die Analytical Engine – nie fertig gebaut, aber revolutionär im Konzept.

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.
-->

---

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

![bg fit](./assets/Hollerith.jpg)

<!--
Herman Hollerith, ca. 1890
-->

---

![bg right:30% contain](./assets/Hollerith.jpg)

# 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!)

<!--
Hollerith: Deutsch-amerikanischer Ingenieur
Inspiration: Jacquard-Webstuhl (Lochkarten für Muster)
Lochkarte = erstes standardisiertes Datenformat
Eine Karte = ein Datensatz (eine Person)
-->

---

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

![bg fit](./assets/hollerith-machine.jpg)

<!--
Hollerith-Lochkartenmaschine, ca. 1908
US Census Bureau
-->

---

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

![bg fit](./assets/hollerith-machine-3.jpg)

<!--
Hollerith-Lochkartenmaschine, ca. 1940
US Census Bureau
-->

---

# 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.

<!--
Thomas J. Watson Sr. → "THINK"-Motto
IBM = "Big Blue"
Lochkarten = Standard bis in die 1970er
Heute: IBM als Cloud- und AI-Unternehmen (Watson, Red Hat)
-->

---

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

![bg fit](./assets/dehomag-hollerith.webp)

<!--
Hollerith-Maschinen im Dritten Reich
Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
-->

---

![bg right:30% contain](./assets/IBM_Front_Cover_2021_from_Amazon.jpg)

# 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)

<!--
Kontroverse Geschichte
IBM profitierte, lieferte Maschinen, wartete sie
"Technologie ist neutral" – wirklich?
Wichtige Lektion für MedienethikerInnen
-->

---

# Lektionen für heute

* Technologie ist nie neutral


<!--
* **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
-->

---

<!-- _class: lead -->

# Vom Ende des Zweiten Weltkriegs
## Geburt des modernen Computers

---

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

![bg fit](./assets/alan-turing.jpg)

<!--
Alan Turing, ca. 1940
Bletchley Park
-->

---

# 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

<!--
Genialer Mathematiker und Logiker
Rettete vermutlich Millionen Leben durch Enigma-Arbeit
Erst 2009 offizielle Entschuldigung der brit. Regierung
-->

---

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

![bg cover](./assets/Bletchley_Park_Mansion.jpg)

<!--
Bletchley Park, England
Geheimes Entschlüsselungszentrum im WWII
-->

---

# 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.

<!--
Enigma: Elektrische Rotor-Chiffriermaschine
Täglich neue Einstellungen
Bombe: Vorläufer moderner Computer
Parallelisierte Berechnung
-->

---

# 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

<!--
Abstraktes Gedankenmodell
Kein echter Bau nötig
Church-Turing-These
-->

---

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

![bg fit opacity:0.4](./assets/oppenheimer.png)

---

# 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)

<!--
Los Alamos, New Mexico
Geheimes Labor, beste WissenschaftlerInnen der Welt
Von Neumann kam 1943 als Berater
-->

---

![bg right:40%](./assets/john-von-neumann.png)

# 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**

<!--
Neumann János Lajos → John von Neumann
Sprach 7 Sprachen fließend
Legendäre Anekdoten über sein Gedächtnis
Arbeitete am Manhattan-Projekt mit
-->

---

# 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

<!--
"Computer" war ein Job-Titel!
Meist Mathematikerinnen
Feynman leitete eine Abteilung davon
ENIAC-Projekt in Philadelphia sollte helfen
-->

---

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

![bg](./assets/eniac.avif)

<!--
ENIAC (1945)
Electronic Numerical Integrator and Computer
University of Pennsylvania
-->

---

# 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

<!--
Kam zu spät für Manhattan-Projekt (Krieg war vorbei)
Aber bewies: Elektronische Berechnung möglich
Programmiert durch 6 Frauen (ENIAC Girls)
→ Erste ProgrammiererInnen der Geschichte
-->

---


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

![bg fit](./assets/First_Computer_Bug,_1947.jpg)


---


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

![bg fit](./assets/Grace_Hopper.jpg)

<!--
Grace Hopper, ca. 1984
US Navy
-->

---

![bg right:30% contain](./assets/Grace_Hopper.jpg)

# 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

<!--
Compiler: Übersetzt menschenlesbare Sprache in Maschinencode
COBOL läuft heute noch auf Bankensystemen
"It's easier to ask forgiveness than permission"
-->

---

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

![bg fit](./assets/hammilton.jpg)

<!--
Margaret Hamilton mit dem Quellcode der Apollo-Flugsoftware, 1969
MIT/NASA
-->

---

![bg right:30% contain](./assets/hammilton-portrait.jpg)

# 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

<!--
Das Foto zeigt sie neben dem ausgedruckten Quellcode – größer als sie selbst
Die Software priorisierte kritische Aufgaben automatisch
2016 erhielt sie die Presidential Medal of Freedom
-->

---

# 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

<!--
EDVAC = Electronic Discrete Variable Automatic Computer
Nachfolger von ENIAC
Von Neumann schrieb den Bericht
Daher: "Von-Neumann-Architektur"
-->

---

# Von-Neumann-Architektur

```
┌─────────────────────────────────────────┐
│                  CPU                    │
│  ┌─────────────┐    ┌─────────────────┐ │
│  │ Rechenwerk  │    │   Steuerwerk    │ │
│  │    (ALU)    │    │ (Control Unit)  │ │
│  └─────────────┘    └─────────────────┘ │
└─────────────────────────────────────────┘
              ↕ Bus-System ↕
┌─────────────────┐    ┌──────────────────┐
│  Speicherwerk   │    │ Ein-/Ausgabewerk │
│    (Memory)     │    │     (I/O)        │
└─────────────────┘    └──────────────────┘
```

<!--
5 Grundkomponenten
JEDER Computer folgt diesem Prinzip
Euer Laptop, euer Handy, der Server dieser Präsentation
-->

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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 (1945): Grundlage aller modernen Computer
5 KOMPONENTEN:
- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
-->

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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)

<!--
BEDEUTUNG VON-NEUMANN-ARCHITEKTUR:
- Betriebssystem möglich: Lädt verschiedene Programme aus gleichem Speicher
- Apps installierbar: Können gelöscht/installiert werden ohne Hardware-Änderung
- Multitasking: Mehrere Programme gleichzeitig im Speicher
- Updates: Software austauschbar, Hardware bleibt gleich
- Universalrechner: Gleiche Hardware für Text, Spiele, Video, Wissenschaft
HARVARD-ARCHITEKTUR (Alternative):
- Separate Speicher für Code und Daten
- Vorteil: Schneller (paralleler Zugriff), sicherer (Code nicht überschreibbar)
- Nachteil: Weniger flexibel, aufwändiger
- Anwendung: Mikrocontroller (Arduino, ESP32), DSPs, einige ARM-Chips
MODERNE CPUs: Modified Harvard (L1-Cache getrennt für Speed, RAM gemeinsam für Flexibilität)
PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beispiele
-->

---

<!-- _class: lead -->

# 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

<!--
ARPA (später DARPA) = Pentagon-Forschung
Sputnik-Schock 1957 → USA investiert in Forschung
Paul Baran (RAND Corp): Packet Switching
-->

---

# 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 |

<!--
ARPANET: 4 Knoten anfangs
Erste Nachricht: "LO" (Login, Absturz nach 2 Buchstaben!)
WWW ≠ Internet (WWW ist eine Anwendung AUF dem Internet)
-->

---

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

![bg](./assets/arpanet-1969.png)

<!--
ARPANET-Karte 1969
4 Knoten: UCLA, Stanford, UCSB, Utah
-->

---

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

![bg](./assets/arpanet.jpg)

<!--
ARPANET-Karte 1969
4 Knoten: UCLA, Stanford, UCSB, Utah
-->

---

# 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

<!--
CERN = Europäische Organisation für Kernforschung
Berners-Lee wollte Forschungspapiere verlinken
WWW war NICHT kommerziell geplant!
Kostenlos freigegeben → darum existiert es
-->

---

# 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.

<!--
Google, Meta, Microsoft besitzen eigene Kabel
Sabotage-Risiko (Russland, Anker)
Latenz: Frankfurt → New York = ~80ms
-->

---

<!-- _class: lead -->

# Teil 2: Bits & Bytes
## Die Sprache der Computer

---

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

![bg](./assets/lightbulb-onoff.png)

<!--
Bit = Binary Digit
Demonstration: Glühbirne AN/AUS = 1 Bit
-->

---

# 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

<!--
Alles Digitale basiert darauf
Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
Shannon: Begründer der Informationstheorie
-->

---

# Das Byte

**8 Bits = 1 Byte**

```
0 1 0 0 1 0 0 1
```

**Wie viele Kombinationen?**
2⁸ = **256 Möglichkeiten** (0-255)

<!--
BYTE = Wortspiel aus "Bit" + "Bite" (Bissen)
Warum 8 Bits? IBM System/360 (1964) setzte Standard
2×2×2×2×2×2×2×2 = 256
-->

---

# 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**

<!--
1 Byte ist limitiert
Farbbild: Rot + Grün + Blau
256³ = 16.777.216 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

<!--
Hex = Shortcut für Menschen
1 Byte = 2 Hex-Ziffern (00-FF)
CSS-Farben nutzen Hex
-->

---

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

![bg fit](./assets/hex-dec-lookup-table.png)

---

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

![bg fit](./assets/8bit-P-character.png)

---

# 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

<!--
Präfixe:
- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
- # = CSS-Konvention für Farben

Speicheradressen erklärt:
- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
- Beispiel vollständig: 0x0000000000A04F20
                          ^^^^^^^^^^
                          └── führende Nullen, meist ungenutzt
- Tools kürzen zu: 0xA04F20 (führende Nullen weggelassen)
- "0x" = Präfix, sagt nur "jetzt kommt Hex"

MAC-Adresse = eindeutige Hardware-ID der Netzwerkkarte
Fehlercodes: Windows zeigt diese bei Bluescreens
-->

---

# 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)!

<!--
Bits = kleines b, Bytes = großes B
Internetanbieter: Mbit/s (klingt größer!)
100 Mbit/s ÷ 8 = 12,5 MB/s
Warum? Marketing - 100 klingt besser als 12,5
-->

---

# 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**

<!--
Dezimal: SI-System (Système International) - Basis 10
Binär: IEC-Standard (International Electrotechnical Commission) - Basis 2
Kibi/Mebi/Gibi = Kunstwörter für binäre Einheiten
Hersteller nutzen Dezimal = klingt größer = Marketing
Windows zeigt binär, schreibt aber "GB" statt "GiB"
-->

---

<!-- _class: lead -->

# 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
    <p>Das ist ein Absatz.</p>

    <input type="date"/>
    ```



<!--
HTML = Auszeichnungssprache (wie Markdown)
Erfunden 1989 von Tim Berners-Lee
Aktuelle Version: HTML5 (seit 2014)
-->

---

# 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
<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
  
---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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>

<!--
HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
WICHTIGE META-TAGS:
- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
- <meta name="viewport">: Mobile Darstellung (width=device-width)
- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
- og:title, og:description, og:image, og:url
TWITTER CARDS: twitter:card, twitter:title, twitter:image
SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
-->

---

# HTML-Tags und Attribute

```html
<body>
  <p class="wichtig">Das ist ein Absatz.</p>
</body>
```

| Teil | Bezeichnung |
|------|-------------|
| `<p>` | Opening Tag (öffnendes Tag) |
| `class="wichtig"` | Attribut |
| `Das ist ein Absatz.` | Inhalt |
| `</p>` | Closing Tag (schließendes Tag) |

---

# 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 |

---

# Vollständiges Grundgerüst

```html
<!DOCTYPE html>
<html lang="de">
<head>
  <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>
</body>
</html>
```

---

# Die wichtigsten Tags

| Tag | Bedeutung |
|-----|-----------|
| `<h1>` bis `<h6>` | Überschriften (h1 = größte) |
| `<p>` | Absatz (Paragraph) |
| `<a href="..."> ... </a>` | Hyper-Link |
| `<img src="..."/>` | Bild |
| `<ul>`, `<ol>`, `<li>` | Listen |
| `<div>` | Container/Box |
| `<span>` | Inline-Container |
| `<input type="...">` | Eingabefeld/Input |

<!--
Semantische Tags wichtig für Accessibility
h1 sollte nur einmal pro Seite vorkommen
a = anchor (Anker)
-->

---

# Hands-On: Werkzeuge einrichten

**Option 1: Texteditor + Browser**
- Notepad, TextEdit oder DreamWeaver
- Speichern als `index.html` → Im Browser öffnen

**Option 2: VS Code** (empfohlen)
- [https://code.visualstudio.com](https://code.visualstudio.com)
- Extension: "Live Server"

**Option 3: Online-Editoren**
- [https://codepen.io/pen/](https://codepen.io/pen/)

---

# Natives HTML

Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. *"Code smell"*. 

| Funktion | HTML-Element |
|----------|--------------|
| Aufklapp-Text | `<details>` + `<summary>` |
| Popup/Modal | `<dialog>` |
| Fortschrittsbalken | `<progress>` |
| Datum-Auswahl | `<input type="date">` |
| Validierung | Attribute beliebig verknüpfbar `required`, `min`, `max` |

<!--
Progressive Enhancement
HTML kann mehr als die meisten denken
JavaScript nur wenn wirklich nötig
Accessibility ist eingebaut
-->

---

# Beispiel: Details/Summary

```html
<details>
  <summary>Klick mich!</summary>
  <p>Dieser Text war versteckt.</p>
</details>
```

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details

---

# Beispiel: Details/Summary (geöffnet)

```html
<details open>
  <summary>Klick mich!</summary>
  <p>Dieser Text war versteckt.</p>
</details>
```

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box

---


# Beispiel: Button

```html
<button>Add to favorites</button>
```

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button

---

# Beispiel: Input/Eingabefeld

```html
<input
  type="text"
  maxlength="8"
  size="10" />
```

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input

---

# Beispiel: Dialog

```html
<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>
```

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog


---

<!-- _class: lead -->

# "Barrierefreiheit"
## a11y – Accessibility

---

<!-- _class: lead -->

# Web Disability Simulator

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# Wie nutzen Menschen das Web?

| Eingabe | Nutzungsweise |
|---------|---------------|
| **Maus** | Klicken, Scrollen |
| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
| **Sprachsteuerung** | "Klicke auf Anmelden" |
| **Augensteuerung** | Eye-Tracking |
| **Switch-Geräte** | Ein-/Aus-Schalter |

→ **Nicht alle nutzen Maus + Bildschirm!**

<!--
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
ARTEN VON EINSCHRÄNKUNGEN:
- Permanent: Blindheit, Taubheit, motorische Einschränkungen
- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
ASSISTIVE TECHNOLOGIEN:
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
- Braillezeilen: Taktile Ausgabe für Blinde
- Switch-Geräte: Für motorische Einschränkungen
- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
-->

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# Warum "Barrierefreiheit"?

**Rechtlich:**
- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen

**Ethisch:**
- Teilhabe für alle Menschen
- Digitale Inklusion

**Praktisch:**
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
- Größerer Markt (~15% der Bevölkerung)

<!--
RECHTLICHER RAHMEN:
- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
- Strafen: Bis zu 100.000€ Bußgeld möglich
CURB-CUT-EFFEKT:
- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
BUSINESS CASE:
- 15% Zielgruppe (Menschen mit Behinderung)
- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
-->

---

# WCAG: Der Standard

**W**eb **C**ontent **A**ccessibility **G**uidelines

**4 Prinzipien (POUR):**

| Prinzip | Bedeutung |
|---------|-----------|
| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
| **Understandable** | Verständlich – Inhalte müssen klar sein |
| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |

<!--
WCAG vom W3C (World Wide Web Consortium)
Aktuelle Version: WCAG 2.2 (2023)
Level: A (minimal), AA (Standard), AAA (optimal)
Gesetzlich meist Level AA gefordert
-->

---

# Perceivable: Wahrnehmbar

**Textalternativen für Nicht-Text:**
```html
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
```

**Kontrast:** Mindestens 4.5:1 für Text

**Untertitel:** Videos brauchen Captions

**Responsive:** Inhalte bei 200% Zoom nutzbar

<!--
Leeres alt="" für dekorative Bilder
Contrast-Checker: WebAIM Contrast Checker
Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
-->

---

# Operable: Bedienbar

**Tastaturzugänglich:**
```css
/* Fokus-Indikator NIE entfernen! */
:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

/* Wenn custom styling: */
button:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
}
```

**Genug Zeit:** Keine automatischen Timeouts ohne Warnung

**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde

<!--
Tab-Reihenfolge = DOM-Reihenfolge
Skip-Links: "Zum Hauptinhalt springen"
:focus-visible = nur bei Tastatur-Navigation
-->

---

# Understandable: Verständlich

**Sprache angeben:**
```html
<html lang="de">
```

**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle

**Fehler erklären:**
```html
<input type="email" aria-describedby="email-error">
<p id="email-error" role="alert">
    Bitte geben Sie eine gültige E-Mail-Adresse ein.
</p>
```

<!--
Screenreader nutzen lang für korrekte Aussprache
Konsistenz reduziert kognitive Last
Fehlermeldungen: konkret, hilfreich, am Feld
-->

---

# Robust: Technisch solide

**Semantisches HTML:**
```html
<!-- Schlecht -->
<div class="button" onclick="...">Klick mich</div>

<!-- Gut -->
<button type="button">Klick mich</button>
```

**ARIA nur wenn nötig:**
```html
<!-- Nötig: Custom-Komponente -->
<div role="tablist" aria-label="Produktkategorien">
    <button role="tab" aria-selected="true">Schuhe</button>
    <button role="tab" aria-selected="false">Jacken</button>
</div>
```

<!--
ARIA = Accessible Rich Internet Applications
Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
button hat eingebaute Tastatur-Unterstützung
div-Button braucht JavaScript für Enter/Space
-->

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# Barrieren im Netz vermeiden (a11y)

**Tastatur-Test:**
- Alle Funktionen nur mit Tab + Enter nutzbar?
- Fokus immer sichtbar?
- Logische Tab-Reihenfolge?

**Screenreader-Test:**
- VoiceOver (Mac): `Cmd + F5`
- NVDA (Windows): Gratis-Download

**Tools:**
- axe DevTools, WAVE (Browser-Extensions)
- Lighthouse (in Chrome DevTools)

<!--
Automatische Tests finden ~30% der Probleme
Manuelles Testen unverzichtbar
Echte NutzerInnen einbeziehen = Gold-Standard
-->

---


<!-- _class: lead -->

# Fragen & Diskussion

**Nächster Termin:** 10.01.2026 – CSS & Netzwerke

**Kontakt:** lb-czechowski@hdm-stuttgart.de

---

# Lizenz

Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**

Basiert auf Material von:
- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
- Michael Czechowski

Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/