223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md

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

<style>
section {
  font-size: 1.7rem;
}
h2 {
  color: var(--color-dimmed);
}
</style>

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

![bg fit opacity:0.4](./assets/digital-landscape.png)

# Grundlagen IT- und Internettechnik

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

**Wintersemester 2025/26**

---

<!-- _class: lead -->

# 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: mail@librete.ch

<!--
Kurze Vorstellung
Praxisbezug betonen
Fragen jederzeit willkommen
-->

---

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

<!--
Niveau der Gruppe einschätzen
Keine falschen Antworten
OS-Verteilung wichtig für Tools später
-->

---

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

<!--
Nicht nur theoretische Inhalte
Praktische Übungen eingebaut
MedienStudentInnen, nicht InformatikerInnen
-->

---

<!-- _class: lead -->

# Teil 1: Die Geschichte
## Von der Lochkarte zum Internet

---

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

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

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

---

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

---

# 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](./assets/dehomag-hollerith.jpg)

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

---

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

<!--
Kontroverse Geschichte
IBM profitierte, lieferte Maschinen, wartete sie
"Technologie ist neutral" – wirklich?
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

<!--
Facebook, Cambridge Analytica
Gesichtserkennung, Überwachung
Verantwortung von TechnikerInnen und MedienarbeiterInnen
-->

---

<!-- _class: lead -->

# Der Zweite Weltkrieg
## Geburt des modernen Computers

---

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

![bg fit opacity:0.4](./assets/oppenheimer-poster.jpg)

<!--
Oppenheimer-Filmplakat (2023)
Christopher Nolan
-->

---

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

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

<!--
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" (meist Frauen!)
→ 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.jpg)

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

---

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

---

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

<!--
ALU = Arithmetic Logic Unit
Bus = Datenautobahn zwischen Komponenten
Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
-->

---

# Warum ist das wichtig?

**Ohne Von-Neumann-Architektur:**
- Kein Betriebssystem
- Keine Apps
- Kein Multitasking
- Keine Updates

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

<!--
Harvard-Architektur: AVR, PIC, viele ARM-Prozessoren
Modified Harvard in modernen CPUs (separate Caches)
Für Medienwirtschaft: Von-Neumann-Konzept reicht
-->

---

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

---

# 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
- **1,3 Mio. km** Kabel unter Wasser
- 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
"Cloud" ist nur jemand anderes Computer
-->

---

<!-- _class: lead -->

# Pause
## 15 Minuten

---

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

---

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

<!--
Speicheradressen werden hexadezimal angegeben
Einfacher zu lesen als binär
Programmierer:innen arbeiten damit täglich
-->

---

<!-- _class: lead -->

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

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

---

# HTML-Anatomie

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

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

<!--
Tags = Etiketten
Attribute = Zusatzinfos
Manche Tags sind selbstschließend: <img />
-->

---

# Grundgerüst

```html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste Seite</title>
</head>
<body>
    <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

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

<!--
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 gedit
- Speichern als `index.html` → Im Browser öffnen

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

**Option 3: Online-Editoren**
- stackblitz.com
- codepen.io

<!--
Erstmal ohne IDE starten!
Verstehen: HTML ist nur Text
-->

---

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

---

# Native HTML: Mehr als ihr denkt!

**Viele Dinge brauchen KEIN JavaScript:**

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

**→ HTML first, JavaScript later!**

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

**Probiert es aus!** Kein JavaScript nötig.

---

# Beispiel: Dialog

```html
<dialog id="meinDialog">
    <h2>Ein Popup!</h2>
    <p>Das ist ein nativer Dialog.</p>
    <button onclick="this.closest('dialog').close()">
        Schließen
    </button>
</dialog>

<button onclick="document.getElementById('meinDialog').showModal()">
    Dialog öffnen
</button>
```

<!--
Minimales JavaScript für öffnen/schließen
Aber: Accessibility eingebaut (ESC schließt, Fokus-Management)
Besser als selbstgebaute Modals
-->

---

# Hands-On: Native HTML Features (30 Min)

**Erweitert eure Seite:**

1. Fügt ein `<details>`-Element mit verstecktem Text hinzu
2. Erstellt ein Kontaktformular mit:
   - `<input type="email">` (automatische Validierung!)
   - `<input type="date">`
   - `<textarea>`
   - `<button type="submit">`

**Tipp:** Browser validiert automatisch!

---

<!-- _class: lead -->

# Mittagspause
## 60 Minuten

---

<!-- _class: lead -->

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

---

<!-- _class: lead -->

# Fragen & Diskussion

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

**Kontakt:** mail@librete.ch

---

# Zusammenfassung Tag 1

**Geschichte:**
- Hollerith → IBM → Nazi-Deutschland → Verantwortung
- Manhattan-Projekt → Von Neumann → Computer-Architektur
- ARPANET → Internet → WWW

**Technik:**
- Bits & Bytes, Hexadezimal
- Von-Neumann-Architektur
- IP-Adressen, Ports, HTTP

**Praxis:**
- HTML-Grundstruktur
- Semantische Tags
- Native HTML-Features

---

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