diff --git a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
index 3264ccd..d524e97 100644
--- a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -68,6 +68,9 @@ section.aufgabe {
section.aufgabe footer {
display: none;
}
+section.glossar {
+ font-size: 1.4rem;
+}
@@ -98,22 +101,39 @@ Hochschule der Medien Stuttgart
-# Termin 2 – 10.01.2026
+# Internet- Grundlagen
## Netzwerke, Protokolle & CSS
+
+
---
# Agenda
-**Teil 1: Die Reise eines Klicks**
-- Warum ist Netzwerk-Kommunikation kompliziert?
-- Was passiert, wenn du eine URL aufrufst?
-- DNS → TCP → HTTP → Response
+**Teil 1: Netzwerke & Protokolle**
+- Glossar: Die wichtigsten Begriffe
+- Das Schichtenmodell: Wie das Internet organisiert ist
+- Die Reise eines Klicks: Was passiert bei einem Seitenaufruf?
**Teil 2: CSS**
- Grundlagen, Selektoren, Spezifität
- Box-Modell, Farben, Einheiten
+
+
---
# Ressourcen zum Selbstlernen
@@ -124,293 +144,566 @@ Hochschule der Medien Stuttgart
* Flexbox-Spiel: https://flexboxfroggy.com/
* Grid-Spiel: https://cssgridgarden.com/
----
-
-
-
-# Teil 1: Die Reise eines Klicks
-## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
-
----
-
-# Das Szenario
-
-Du bist im WLAN der HdM angemeldest und gehst auf:
-
-```
-hdm-stuttgart.de
-```
-
-**Zwischen Enter und der fertigen Seite:** ~200 Millisekunden.
-
-In dieser Zeit passieren hunderte Operationen.
-
-Bevor wir sie durchgehen: **Warum ist das überhaupt so kompliziert?**
+
---
-# Das Grundproblem
-## Warum brauchen wir Schichten, Adressen, Ports?
+# Teil 1: Netzwerke & Protokolle
+## Die Infrastruktur des Webs
+
+
---
-# Was zwischen dir und dem Server liegt
+
-Du willst eine Webseite. Klingt einfach.
+# Glossar: Die Landkarte
-Aber dazwischen liegen:
-- Deine WLAN-Karte
-- Der Router im Flur
-- Das Netzwerk der HdM
-- Das Internet (dutzende Router)
-- Der Webserver in Vaihingen
+| Begriff | Was ist das? | Analogie |
+|---------|--------------|----------|
+| **Client** | Der, der fragt (Browser) | Gast im Restaurant |
+| **Server** | Der, der antwortet | Küche im Restaurant |
+| **Request** | Die Anfrage | Bestellung |
+| **Response** | Die Antwort | Das Essen |
+| **Protokoll** | Regeln für Kommunikation | Speisekarte + Bestellablauf |
+| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
-**Jede Station spricht eine andere "Sprache":**
-- Dein Browser spricht HTTP ("Gib mir /index.html")
-- Das Kabel versteht nur Strom an/aus
+
---
-# Die Lösung: Aufgabenteilung
+
-Statt dass jedes Programm alles können muss, teilen wir die Arbeit auf:
+# Glossar: Adressen & Identitäten
-| Wer | Kümmert sich um |
-|-----|-----------------|
-| **HTTP** | "Was will ich?" (Webseite, Bild, Video) |
-| **TCP** | "Kommt alles an? In der richtigen Reihenfolge?" |
-| **IP** | "Wo muss es hin?" (welcher Rechner im Internet) |
-| **Ethernet** | "Wie kommt es zum nächsten Gerät?" |
-| **Physik** | "Strom oder Licht durch das Kabel" |
+| Begriff | Was ist das? | Beispiel |
+|---------|--------------|----------|
+| **IP-Adresse** | Globale Adresse im Internet | `212.132.79.37` |
+| **MAC-Adresse** | Hardware-Adresse der Netzwerkkarte | `aa:bb:cc:dd:ee:ff` |
+| **Port** | "Türnummer" auf einem Rechner | `80`, `443`, `22` |
+| **DNS** | Telefonbuch: Name → IP | hdm-stuttgart.de → IP |
+| **Domain** | Menschenlesbarer Name | `hdm-stuttgart.de` |
-Jeder macht seinen Job. Keiner muss wissen, wie die anderen arbeiten.
+
+
+---
+
+
+
+# Glossar: Daten unterwegs
+
+| Begriff | Was ist das? | Schicht |
+|---------|--------------|---------|
+| **Paket** | Daten + IP-Header | Internet (Layer 3) |
+| **Segment** | Daten + TCP-Header | Transport (Layer 4) |
+| **Frame** | Daten + MAC-Header | Netzzugang (Layer 2) |
+| **Header** | Metadaten am Anfang | Jede Schicht |
+| **Payload** | Die eigentlichen Nutzdaten | Der Inhalt |
+
+
+
+---
+
+
+
+# Glossar: Netzwerk-Eigenschaften
+
+| Begriff | Was ist das? | Einheit |
+|---------|--------------|---------|
+| **Latenz** | Verzögerung (hin + zurück) | Millisekunden |
+| **Bandbreite** | Datenmenge pro Zeiteinheit | Mbit/s |
+| **Hop** | Ein Sprung zum nächsten Router | – |
+| **Round-Trip** | Hin- und Rückweg | – |
+| **Ping** | "Bist du da?" + Antwort | ms |
+
+
+
+---
+
+
+
+# Glossar: Protokolle
+
+| Protokoll | Wofür? | Port | Schicht |
+|-----------|--------|------|---------|
+| **HTTP** | Webseiten übertragen | 80 | Anwendung |
+| **HTTPS** | HTTP + Verschlüsselung | 443 | Anwendung |
+| **TCP** | Zuverlässige Übertragung | – | Transport |
+| **UDP** | Schnelle Übertragung | – | Transport |
+| **IP** | Routing durchs Internet | – | Internet |
+| **DNS** | Namen → IP-Adressen | 53 | Anwendung |
+
+
+
+---
+
+
+
+# Das Schichtenmodell
+## Warum ist Netzwerk-Kommunikation in Schichten organisiert?
+
+
+
+---
+
+# Das Problem: Komplexität
+
+Zwischen dir und einer Webseite liegen:
+
+```
+Dein Browser
+ ↓
+Deine Netzwerkkarte (WLAN oder Ethernet)
+ ↓
+Router im Flur / zu Hause
+ ↓
+Netzwerk der HdM / deines Providers
+ ↓
+Das Internet (dutzende Router)
+ ↓
+Netzwerk des Ziel-Servers
+ ↓
+Der Webserver
+```
+
+Jede Komponente "spricht" anders.
+
+
+
+---
+
+# Die Lösung: Arbeitsteilung
+
+Statt dass jedes Programm alles können muss: **Aufgaben aufteilen.**
+
+| Wer? | Aufgabe | Typische Geräte |
+|------|---------|-----------------|
+| **Browser/App** | Was will ich? | Laptop, Handy, Server |
+| **TCP/UDP** | Kommt alles an? | – (Software) |
+| **IP** | Welcher Rechner? | Router, Firewall |
+| **Ethernet/WLAN** | Nächstes Gerät? | Switch, Access Point |
+| **Physik** | Signale übertragen | Kabel, Glasfaser, Antenne |
+
+
+
+---
+
+
+
+
+
+# Das TCP/IP-Modell
+
+| Schicht | Name | Aufgabe | Protokolle |
+|---------|------|---------|------------|
+| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP |
+| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP |
+| **2** | Internet | Routing, globale Adressen | IP |
+| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
+
+**4 Schichten. Das reicht, um das Internet zu verstehen.**
+
+
+
+---
+
+# Schichten verpacken Daten
+
+```
+Anwendung: [ HTTP-Request: "GET /index.html" ]
+ ↓ verpackt in
+Transport: [ TCP-Header | HTTP-Request ]
+ ↓ verpackt in
+Internet: [ IP-Header | TCP-Header | HTTP-Request ]
+ ↓ verpackt in
+Netzzugang: [ Eth-Header | IP-Header | TCP | HTTP | Eth-Trailer ]
+ ↓
+Physik: 01001000 01010100 01010100...
+```
+
+**Encapsulation:** Jede Schicht packt ein.
+**Decapsulation:** Beim Empfang wird ausgepackt.
+
+
+
+---
+
+
+
+
+
+# Dateneinheiten pro Schicht
+
+| Schicht | Name | Dateneinheit | Was kommt hinzu? |
+|---------|------|--------------|------------------|
+| Anwendung | HTTP, DNS | **Daten** | – |
+| Transport | TCP, UDP | **Segment** | Ports, Sequenznummern |
+| Internet | IP | **Paket** | IP-Adressen |
+| Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |
+
+Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
+(„**D**er **S**ache **P**raktischer **F**olgen")
+
+
---
# Warum ist das clever?
**Ohne Schichten:**
-Dein Browser müsste wissen, wie man Ethernet-Frames baut, wie WLAN-Frequenzen funktionieren, wie Router Pakete weiterleiten...
+Jede App müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert, wie Router Pakete weiterleiten...
**Mit Schichten:**
-Dein Browser sagt nur: "Ich will diese Seite."
+Der Browser sagt: "Ich will diese Seite."
Alles andere übernehmen die Schichten darunter.
-**Das Prinzip heißt Abstraktion:**
-Jede Schicht versteckt ihre Komplexität vor den anderen.
-
----
+**Austauschbarkeit:**
+WLAN statt Ethernet? Nur Schicht 1 ändert sich.
+HTTP/2 statt HTTP/1? Nur Schicht 4 ändert sich.
-
-
-# Warum brauchen wir IP-Adressen?
-
---
-# Das Internet ist kein einzelnes Netzwerk
-
-Das Internet besteht aus **tausenden** separaten Netzwerken:
-
-- Netzwerk der HdM
-- Netzwerk der Telekom
-- Netzwerk von Google
-- Netzwerk deines Heimrouters
-- ...
-
-Ein Paket muss von Netzwerk zu Netzwerk weitergereicht werden.
-
-**Router** entscheiden bei jedem Hop: "In welches Netzwerk als nächstes?"
-
----
-
-# IP-Adressen = Globale Adressen
+# Exkurs: OSI vs. TCP/IP
```
-141.62.xxx.xxx ← HdM-Netzwerk
-212.132.79.37 ← Ziel-Server
+ OSI (7 Schichten) TCP/IP (4 Schichten)
+┌─────────────────────┐ ┌─────────────────────┐
+│ 7. Anwendung │ │ │
+├─────────────────────┤ │ Anwendung │
+│ 6. Darstellung │ │ │
+├─────────────────────┤ │ │
+│ 5. Sitzung │ │ │
+├─────────────────────┤ ├─────────────────────┤
+│ 4. Transport │ │ Transport │
+├─────────────────────┤ ├─────────────────────┤
+│ 3. Vermittlung │ │ Internet │
+├─────────────────────┤ ├─────────────────────┤
+│ 2. Sicherung │ │ │
+├─────────────────────┤ │ Netzzugang │
+│ 1. Bitübertragung │ │ │
+└─────────────────────┘ └─────────────────────┘
```
-Die IP-Adresse sagt dem Router:
-1. **In welchem Netzwerk** ist der Rechner?
-2. **Welcher Rechner** in diesem Netzwerk?
+OSI = Theorie. TCP/IP = Realität.
-"141.62... ist nicht bei mir. Ich schicke das Paket Richtung eduroam."
-
-**Die IP-Adresse bleibt auf dem gesamten Weg gleich.**
-Sie ist die Empfängeradresse auf dem Brief.
-
----
-
-# Warum reicht die MAC-Adresse nicht?
-
-Jede Netzwerkkarte hat eine **MAC-Adresse** (z.B. `aa:bb:cc:dd:ee:ff`).
-
-**Problem:** MAC funktioniert nur **lokal**.
-- Dein Laptop kennt die MAC deines Routers
-- Dein Router kennt die MAC des nächsten Routers
-- Aber niemand kennt die MAC des Webservers in Vaihingen
-
-**MAC = "Wer ist mein direkter Nachbar?"**
-**IP = "Wo ist das Ziel im gesamten Internet?"**
-
-Deshalb brauchen wir beides.
+
---
-# Warum brauchen wir Ports?
+# Die drei Adressen
+## IP, MAC und Port – wer braucht was?
+
+
---
-# Ein Rechner, viele Programme
+# IP-Adresse: Das Endziel
-Dein Laptop hat **eine** IP-Adresse.
+```
+212.132.79.37
+```
-Aber gleichzeitig laufen:
-- Browser
-- Mail-Programm
-- Spotify
-- Discord
-- System-Updates
+- **Global eindeutig** (im gesamten Internet)
+- Identifiziert einen **Rechner**
+- **Bleibt gleich** auf dem gesamten Weg
+- Analogie: **Empfänger auf einem Brief**
-Ein Paket kommt an. **Für welches Programm ist es?**
+Router lesen die IP und entscheiden:
+"Ist das für mich? Nein → in welche Richtung weiterleiten?"
+
+
---
-# Ports = Türnummern
+# MAC-Adresse: Der nächste Schritt
```
-IP-Adresse = Hausnummer → "Friedrichstraße 10"
-Port = Wohnungstür → "3. Stock links"
+aa:bb:cc:dd:ee:ff
```
-Jedes Programm "lauscht" auf einem Port:
+- **Lokal eindeutig** (nur im lokalen Netzwerk relevant)
+- Identifiziert eine **Netzwerkkarte**
+- **Ändert sich bei jedem Hop**
+- Analogie: **"Nächstes Postamt: XY"**
+
+Funktioniert nur innerhalb eines Netzwerksegments.
+
+
+
+---
+
+# Port: Das richtige Programm
+
+```
+212.132.79.37:443
+ └─── Port 443 = HTTPS
+```
+
+- Identifiziert ein **Programm** auf einem Rechner
+- Ein Rechner, viele Dienste
+- Analogie: **Wohnungstür im Mehrfamilienhaus**
| Port | Dienst |
|------|--------|
-| 80 | HTTP (Webseiten) |
-| 443 | HTTPS (Webseiten, verschlüsselt) |
-| 25 | SMTP (E-Mail senden) |
-| 22 | SSH (Terminal) |
+| 80 | HTTP |
+| 443 | HTTPS |
+| 22 | SSH |
+| 53 | DNS |
---
-# Beide Seiten haben Ports
+
+
+
-```
-Dein Laptop: 141.62.xxx.xxx:52431
- └─────── Dein Browser lauscht hier
+# IP vs. MAC vs. Port
-Server: 212.132.79.37:443
- └─────── Webserver lauscht hier
-```
+| | IP-Adresse | MAC-Adresse | Port |
+|---|-----------|-------------|------|
+| **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
+| **Reichweite** | Global | Lokal (1 Hop) | Auf einem Rechner |
+| **Ändert sich?** | Nein | Ja, bei jedem Hop | Nein |
+| **Schicht** | Internet (IP) | Netzzugang (Ethernet) | Transport (TCP/UDP) |
+| **Beispiel** | 212.132.79.37 | aa:bb:cc:dd:ee | 443 |
-**52431** ist ein zufälliger Port, den dein System für diese Verbindung vergeben hat.
-
-Die Antwort des Servers geht an `141.62.xxx.xxx:52431` – und landet bei deinem Browser, nicht bei Spotify.
+
---
-# Zusammenfassung: Die Bausteine
+# Die Reise eines Klicks
+## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
+
+
---
-# Was wir jetzt wissen
+# Das Szenario
-| Konzept | Löst welches Problem? |
-|---------|----------------------|
-| **Schichten** | Komplexität aufteilen, Abstraktion |
-| **IP-Adresse** | Ziel im globalen Internet finden |
-| **MAC-Adresse** | Nächsten Nachbarn im lokalen Netz finden |
-| **Port** | Richtiges Programm auf dem Rechner finden |
+Du bist im WLAN der HdM und rufst auf:
-Mit diesen Bausteinen können wir jetzt die Reise eines Klicks verfolgen.
+```
+https://www.hdm-stuttgart.de
+```
----
+**Zwischen Enter und fertiger Seite:** ~200 Millisekunden.
-
+In dieser Zeit passieren hunderte Operationen.
-# Die Reise beginnt
-## Schritt für Schritt
+
---
# Die Zeitlinie
```
-[0 ms] DNS-Anfrage: "Welche IP hat www.hdm-stuttgart.de?"
- ↓
-[~20 ms] DNS-Antwort: "212.132.79.37"
- ↓
-[~25 ms] TCP-Handshake: Verbindung aufbauen
- ↓
-[~50 ms] HTTP-Request: "GET /index.html"
- ↓
-[~150 ms] HTTP-Response: Der HTML-Code kommt zurück
- ↓
-[~200 ms] Browser rendert die Seite
+[0 ms] DNS: "Welche IP hat www.hdm-stuttgart.de?"
+ ↓
+[~20 ms] DNS-Antwort: "212.132.79.37"
+ ↓
+[~25 ms] TCP-Handshake beginnt
+ ↓
+[~50 ms] TCP-Verbindung steht
+ ↓
+[~55 ms] HTTP-Request: "GET /index.html"
+ ↓
+[~150 ms] HTTP-Response: HTML kommt zurück
+ ↓
+[~200 ms] Browser rendert die Seite
```
-Jeder dieser Schritte durchläuft alle Schichten – runter und wieder rauf.
+
---
@@ -419,15 +712,12 @@ Jeder dieser Schritte durchläuft alle Schichten – runter und wieder rauf.
# Schritt 1: DNS
## "Wo wohnt hdm-stuttgart.de?"
----
-
-# Das Problem
-
-Dein Browser kennt nur den Namen: `www.hdm-stuttgart.de`
-
-Das Internet kennt nur Zahlen: `212.132.79.37`
-
-**Jemand muss übersetzen.**
+
---
@@ -435,13 +725,24 @@ Das Internet kennt nur Zahlen: `212.132.79.37`
**D**omain **N**ame **S**ystem
-Dein Laptop fragt sich durch eine Hierarchie:
+```
+www.hdm-stuttgart.de → 212.132.79.37
+```
+
+Dein Laptop fragt sich durch:
1. **Browser-Cache:** "War ich da kürzlich?" → Nein
-2. **Betriebssystem-Cache:** "Kennt Windows/Mac die IP?" → Nein
-3. **Router / ISP:** "Frag den DNS-Server deines Providers"
+2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
+3. **Router/Provider:** DNS-Server wird gefragt
-Wenn auch der Provider es nicht weiß, beginnt die **rekursive Suche**.
+
---
@@ -451,14 +752,24 @@ Wenn auch der Provider es nicht weiß, beginnt die **rekursive Suche**.
. (Root)
/|\
/ | \
- .de .com .org
+ .de .com .org ...
/
hdm-stuttgart
|
www
```
-**Jede Ebene kennt nur die nächste Ebene darunter.**
+**Dezentral:** Niemand kennt alles.
+Jede Ebene kennt nur die nächste.
+
+
---
@@ -479,33 +790,59 @@ Resolver → HdM-NS: "Welche IP hat www?"
Resolver → Dein Laptop: "Die IP ist 212.132.79.37"
```
+
+
---
-# DNS ist selbst ein Netzwerk-Request
+# DNS ist selbst Netzwerk
-Die DNS-Anfrage ist nicht magisch. Sie ist selbst ein Paket, das durch alle Schichten muss:
+Die DNS-Anfrage ist ein ganz normales Paket:
| Eigenschaft | Wert |
|-------------|------|
-| Protokoll | UDP |
-| Port | 53 |
-| Inhalt | "A-Record für www.hdm-stuttgart.de?" |
+| **Protokoll** | UDP (meistens) |
+| **Port** | 53 |
+| **Inhalt** | "A-Record für www.hdm-stuttgart.de?" |
-Das DNS-Paket macht die gleiche Reise wie später der HTTP-Request – nur zu einem anderen Ziel.
+DNS durchläuft alle Schichten – genau wie später HTTP.
+
+
---
# Nach dem DNS-Lookup
-**Ergebnis:** Dein Browser weiß jetzt:
+**Ergebnis:**
```
www.hdm-stuttgart.de = 212.132.79.37
```
-Diese Information wird gecached.
+Diese Information wird gecached (für Minuten bis Stunden).
-**Nächster Schritt:** Verbindung zum Server aufbauen.
+**Nächster Schritt:** Verbindung aufbauen.
+
+
---
@@ -514,15 +851,40 @@ Diese Information wird gecached.
# Schritt 2: TCP-Handshake
## "Hallo Server, bist du da?"
+
+
---
# Warum ein Handshake?
-HTTP läuft über **TCP** (Transmission Control Protocol).
+TCP ist **verbindungsorientiert**:
-TCP ist **verbindungsorientiert**: Bevor Daten fließen, müssen sich beide Seiten einig sein, dass sie miteinander reden wollen.
+- Beide Seiten müssen bereit sein
+- Beide kennen die Sequenznummern des anderen
+- Verlorene Pakete können erkannt und neu angefordert werden
-**Analogie:** Du rufst jemanden an. Das Telefon klingelt. Die Person nimmt ab. Erst dann redest du.
+**Analogie:**
+Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt
+
+Nicht: Einfach losreden und hoffen, dass jemand zuhört.
+
+
---
@@ -533,34 +895,30 @@ TCP ist **verbindungsorientiert**: Bevor Daten fließen, müssen sich beide Seit
# Der 3-Way-Handshake
```
-Dein Laptop HdM-Server
+Client (dein Laptop) Server
| |
|-------- SYN (Seq=1000) --------------->|
| "Ich will reden" |
| |
|<--- SYN-ACK (Seq=5000, Ack=1001) ------|
- | "OK, ich auch" |
+ | "OK, ich auch. Ich starte bei 5000"|
| |
|-------- ACK (Ack=5001) --------------->|
- | "Gut, dann los" |
+ | "Verstanden, los geht's" |
| |
| [ Verbindung steht ] |
```
**SYN** = Synchronize · **ACK** = Acknowledge
----
-
-# Warum die Sequenznummern?
-
-**Problem:** Pakete können im Internet:
-- Verloren gehen
-- Doppelt ankommen
-- In falscher Reihenfolge ankommen
-
-**Lösung:** Jedes Byte wird nummeriert.
-
-Der Empfänger weiß genau, welches Byte als nächstes kommen muss – und kann fehlende Pakete erneut anfordern.
+
---
@@ -569,19 +927,36 @@ Der Empfänger weiß genau, welches Byte als nächstes kommen muss – und kann
**Status:** Die TCP-Verbindung steht.
```
-Dein Laptop ←————————————————→ 212.132.79.37:443
- (Port 52431) (Port 443)
+Client: 141.62.xxx.xxx:52431
+ └─── Zufälliger Port für diese Verbindung
+
+Server: 212.132.79.37:443
+ └─── HTTPS-Port
```
-**Jetzt erst** kann der eigentliche HTTP-Request gesendet werden.
+**Jetzt erst** kann HTTP gesprochen werden.
+
+
---
-# Schritt 3: Der HTTP-Request
+# Schritt 3: HTTP-Request
## "Gib mir die Startseite"
+
+
---
# Was dein Browser sendet
@@ -595,44 +970,39 @@ Accept-Language: de-DE
Connection: keep-alive
```
-Das sind **~200 Bytes** Text.
+~200 Bytes Text.
-Aber diese 200 Bytes müssen durch das halbe Internet.
+**GET** = "Gib mir" (im Gegensatz zu POST = "Nimm das")
+**/** = "Die Startseite"
-**Wie?**
+
---
-# Die Verpackungsstraße
-## Encapsulation: Schicht für Schicht
+# Encapsulation in Aktion
+## Der Request wird verpackt
----
-
-# Jede Schicht verpackt
-
-```
-HTTP-Request: "GET / HTTP/1.1..."
- ↓
-TCP packt ein: [ Ports + Seq-Nr ] + HTTP-Request
- = Segment
- ↓
-IP packt ein: [ IP-Adressen ] + Segment
- = Paket
- ↓
-Ethernet packt: [ MAC-Adressen ] + Paket + [ Prüfsumme ]
- = Frame
- ↓
-Physik: 01001000 01010100 01010100 01010000 ...
- = Bits auf dem Kabel
-```
+
---
# Layer 4: Transport (TCP)
-Der HTTP-Request wird zum **Segment**.
+HTTP-Request wird zum **Segment**:
```
┌─────────────────────────────────────────────────┐
@@ -646,13 +1016,24 @@ Der HTTP-Request wird zum **Segment**.
└─────────────────────────────────────────────────┘
```
-**Neu hinzugekommen:** Ports (wer sendet? wer empfängt?) und Sequenznummer
+**Neu:** Ports + Sequenznummer
+
+
---
# Layer 3: Network (IP)
-Das Segment wird zum **Paket**.
+Segment wird zum **Paket**:
```
┌─────────────────────────────────────────────────┐
@@ -662,17 +1043,27 @@ Das Segment wird zum **Paket**.
│ │ 141.62.xxx.xxx │ 212.132.79.37 │ │
│ └─────────────────┴─────────────────┘ │
├─────────────────────────────────────────────────┤
-│ TCP-Segment (von oben) │
+│ TCP-Segment (unverändert) │
└─────────────────────────────────────────────────┘
```
-**Neu:** IP-Adressen – woher kommt das Paket, wohin soll es?
+**Neu:** IP-Adressen
+
+
---
# Layer 2: Data Link (Ethernet)
-Das Paket wird zum **Frame**.
+Paket wird zum **Frame**:
```
┌─────────────────────────────────────────────────┐
@@ -682,19 +1073,55 @@ Das Paket wird zum **Frame**.
│ │ aa:bb:cc:dd:ee │ 11:22:33:44:55 │ │
│ └─────────────────┴─────────────────┘ │
├─────────────────────────────────────────────────┤
-│ IP-Paket (von oben) │
+│ IP-Paket (unverändert) │
├─────────────────────────────────────────────────┤
-│ FCS (Prüfsumme) │
+│ FCS (Frame Check Sequence / Prüfsumme) │
└─────────────────────────────────────────────────┘
```
-**Neu:** MAC-Adressen – aber Achtung: Das ist die MAC des **Routers**, nicht des Servers!
+**Wichtig:** Destination MAC = **Router**, nicht Server!
+
+
+
+---
+
+# Woher kennt dein Laptop die Router-MAC?
+
+**ARP** – Address Resolution Protocol
+
+```
+Laptop (Broadcast):
+ "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
+
+Router:
+ "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
+```
+
+Das passiert automatisch. Die Info wird gecached.
+
+
---
# Layer 1: Physical
-Der Frame wird zu **Bits** – und die Bits zu physikalischen Signalen.
+Frame wird zu **Bits** – Bits werden zu Signalen:
| Medium | Signal |
|--------|--------|
@@ -708,38 +1135,16 @@ Der Frame wird zu **Bits** – und die Bits zu physikalischen Signalen.
Ab hier übernimmt die Physik.
----
-
-
-
-
-
-# MAC vs. IP – nochmal genau
-
-| | IP-Adresse | MAC-Adresse |
-|---|-----------|-------------|
-| **Frage** | Wer ist das Endziel? | Wer ist der nächste Hop? |
-| **Reichweite** | Global (ganzes Internet) | Lokal (bis zum nächsten Router) |
-| **Ändert sich?** | Nein, bleibt gleich | Ja, bei jedem Hop |
-| **Analogie** | Empfänger auf dem Brief | "Nächstes Postamt: XY" |
-
-**Die MAC-Adresse im ersten Frame ist die MAC des Routers – nicht des Servers!**
-
----
-
-# Woher kennt dein Laptop die MAC des Routers?
-
-**ARP** – Address Resolution Protocol
-
-```
-Dein Laptop (Broadcast an alle):
- "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
-
-Router:
- "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
-```
-
-Diese Information wird gecached.
+
---
@@ -748,28 +1153,41 @@ Diese Information wird gecached.
# Die Reise durch das Netz
## Hop für Hop
+
+
---
# Der erste Hop: Dein Router
```
-Dein Laptop → [Frame] → Router
+Laptop → [Frame] → Router
```
-Der Router empfängt den Frame:
+Der Router empfängt:
1. **Layer 1:** Signale → Bits
-2. **Layer 2:** Prüft Frame. "MAC stimmt, FCS okay" → Auspacken
-3. **Layer 3:** Liest IP-Header. "212.132.79.37 – nicht mein Netz"
+2. **Layer 2:** Frame prüfen. MAC okay? → Auspacken
+3. **Layer 3:** IP lesen. "212.132.79.37 – nicht mein Netz"
-**Routing-Entscheidung:** "Ich schicke es Richtung eduroam."
+**Routing-Entscheidung:** "Ich schicke es Richtung Internet."
+
+
---
# Der Router verpackt NEU
-Der Router erstellt einen **neuen Frame** für den nächsten Hop:
-
```
┌─────────────────────────────────────────────────┐
│ Ethernet-Header (NEU!) │
@@ -784,7 +1202,18 @@ Der Router erstellt einen **neuen Frame** für den nächsten Hop:
└─────────────────────────────────────────────────┘
```
-**Die IP bleibt gleich. Die MAC ändert sich.**
+**IP bleibt gleich. MAC ändert sich.**
+
+
---
@@ -792,29 +1221,25 @@ Der Router erstellt einen **neuen Frame** für den nächsten Hop:
```
Dein Laptop
- ↓ [Frame mit MAC des HdM-Routers]
-Router (HdM-Netz)
- ↓ [Frame mit MAC des eduroam-Routers]
-Router (BelWü)
- ↓ [Frame mit MAC des nächsten Routers]
-...weitere Router...
- ↓ [Frame mit MAC des Ziel-Servers]
+ ↓ [Frame an Router 1]
+Router HdM-Netz
+ ↓ [Frame an Router 2]
+Router BelWü
+ ↓ [Frame an Router 3]
+...
+ ↓ [Frame an Server]
Webserver der HdM
```
-Bei jedem Hop: Auspacken bis Layer 3, Routing-Entscheidung, neu verpacken.
+Bei jedem Hop: Auspacken bis Layer 3, Routing, neu verpacken.
---
@@ -822,34 +1247,42 @@ Zeigt jeden Router auf dem Weg mit IP und Antwortzeit.
# Die Ankunft
-## Decapsulation am Server
+## Der Server empfängt und antwortet
+
+
---
-# Der Server empfängt
-
-Am Webserver passiert alles **rückwärts** (Decapsulation):
+# Decapsulation am Server
```
Bits empfangen (Layer 1)
↓
-Frame prüfen: MAC korrekt? FCS okay? → Auspacken (Layer 2)
+Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
↓
-IP-Paket lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
+IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
↓
-TCP-Segment lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
+TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
↓
-HTTP-Request lesen: "GET / HTTP/1.1" (Layer 7)
+HTTP lesen: "GET / HTTP/1.1" (Layer 7)
```
Der Webserver versteht: "Jemand will die Startseite."
----
-
-
-
-# Die Antwort
-## Der gleiche Weg zurück
+
---
@@ -867,29 +1300,43 @@ Content-Length: 45231
...
```
-Diese ~45 KB HTML müssen jetzt zu dir.
+~45 KB HTML müssen jetzt zu dir.
+
+
---
# Encapsulation beim Server
-Der Server macht **dasselbe wie du vorher** – nur in die andere Richtung:
+Der Server macht **dasselbe** – nur in die andere Richtung:
```
HTTP-Response: "HTTP/1.1 200 OK..."
↓
-TCP packt ein: [ Ports + Seq-Nr ] + Response
- Dest-Port: 52431 (dein Browser!)
+TCP: Dest-Port: 52431 (dein Browser!)
↓
-IP packt ein: [ IP-Adressen ]
- Dest-IP: 141.62.xxx.xxx (dein Laptop!)
+IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
↓
-Ethernet packt: [ MAC-Adressen ]
- Dest-MAC: Router des Server-Netzes
+Ethernet: Dest-MAC: Router des Server-Netzes
↓
-Bits auf dem Kabel
+Bits
```
+
+
---
# Die Antwort reist zurück
@@ -897,18 +1344,21 @@ Bits auf dem Kabel
```
Server
↓
-Router (Ziel-Netz)
+Router → Router → Router → ...
↓
-...weitere Router...
- ↓
-Router (HdM-Netz)
+Router HdM
↓
Dein Laptop
```
-Bei jedem Hop: Auspacken bis Layer 3, Routing-Entscheidung, neu verpacken.
+Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
-Bis die Antwort bei dir ankommt – und dein Browser sie auspackt.
+
---
@@ -919,143 +1369,35 @@ Bits empfangen
↓
Frame: MAC = meine MAC? → Auspacken
↓
-IP-Paket: Ziel-IP = meine IP? → Auspacken
+IP: Ziel-IP = meine IP? → Auspacken
↓
-TCP-Segment: Port 52431 = mein Browser → Auspacken
+TCP: Port 52431 = mein Browser → Auspacken
↓
-HTTP-Response: "HTTP/1.1 200 OK..."
+HTTP: "HTTP/1.1 200 OK..."
↓
Browser rendert die Seite
```
----
-
-
-
-# Zusammenfassung
-## Das TCP/IP-Modell
-
----
-
-
-
-
-
-# Die Schichten (TCP/IP)
-
-| Schicht | Name | Dateneinheit | Adressierung |
-|---------|------|--------------|--------------|
-| 4 | **Anwendung** | Daten | – |
-| 3 | **Transport** | Segment | Ports |
-| 2 | **Internet** | Paket | IP-Adressen |
-| 1 | **Netzzugang** | Frame | MAC-Adressen |
-
-**4 Schichten.** Das reicht, um das Internet zu verstehen.
-
----
-
-# OSI vs. TCP/IP
-
-```
- OSI (Theorie) TCP/IP (Praxis)
-┌─────────────────┐ ┌─────────────────┐
-│ 7. Anwendung │ │ │
-├─────────────────┤ │ Anwendung │
-│ 6. Darstellung │ │ │
-├─────────────────┤ │ │
-│ 5. Sitzung │ │ │
-├─────────────────┤ ├─────────────────┤
-│ 4. Transport │ │ Transport │
-├─────────────────┤ ├─────────────────┤
-│ 3. Vermittlung │ │ Internet │
-├─────────────────┤ ├─────────────────┤
-│ 2. Sicherung │ │ │
-├─────────────────┤ │ Netzzugang │
-│ 1. Bitübertrag │ │ │
-└─────────────────┘ └─────────────────┘
-```
-
-OSI ist ein **Referenzmodell**. TCP/IP ist die Realität.
-
----
-
-
-
-
-
-# Was ihr wissen solltet
-
-**Den Ablauf:**
-1. DNS-Lookup (UDP:53) → IP-Adresse
-2. TCP-Handshake (SYN → SYN-ACK → ACK)
-3. HTTP-Request
-4. HTTP-Response
-
-**Die Konzepte:**
-- IP bleibt gleich, MAC ändert sich pro Hop
-- Ports identifizieren Programme
-- Encapsulation/Decapsulation
-
----
-
-
-
-
-
-# Die Dateneinheiten (PDUs)
-
-| Schicht | Dateneinheit | Was kommt hinzu? |
-|---------|--------------|------------------|
-| Anwendung | **Daten** | HTTP-Header |
-| Transport | **Segment** | Ports, Seq-Nr |
-| Internet | **Paket** | IP-Adressen |
-| Netzzugang | **Frame** | MAC, Prüfsumme |
-
-**Encapsulation:** Jede Schicht verpackt die Daten der Schicht darüber.
-**Decapsulation:** Beim Empfang wird Schicht für Schicht ausgepackt.
+
---
-# Exkurs: MTU & Fragmentierung
+# Exkurse
+## TCP vs. UDP, MTU, HTTP-Methoden
----
-
-# Die MTU (Maximum Transmission Unit)
-
-Ein Ethernet-Frame kann maximal **1500 Bytes Nutzdaten** transportieren.
-
-```
-┌───────────┬──────────────────────────────────────────┬──────────┐
-│ Header │ Payload (max. 1500 Bytes) │ Trailer │
-│ 14 Bytes │ │ 4 Bytes │
-└───────────┴──────────────────────────────────────────┴──────────┘
-```
-
-**Problem:** Ein Foto hat 3.000.000 Bytes.
-**Lösung:** TCP zerschneidet die Daten in ~2000 Segmente.
-
----
-
-# TCP sorgt für Ordnung
-
-Jedes Segment hat eine **Sequenznummer**.
-
-```
-Segment 1: Bytes 0-1459 Seq=0
-Segment 2: Bytes 1460-2919 Seq=1460
-Segment 3: Bytes 2920-4379 Seq=2920
-...
-```
-
-Der Empfänger setzt die Segmente zusammen – auch wenn sie in falscher Reihenfolge ankommen.
-
----
-
-
-
-# Exkurs: TCP vs. UDP
+
---
@@ -1063,34 +1405,27 @@ Der Empfänger setzt die Segmente zusammen – auch wenn sie in falscher Reihenf
-# Zwei Transport-Protokolle
+# TCP vs. UDP
| | TCP | UDP |
|---|-----|-----|
-| Verbindung | Ja (Handshake) | Nein |
-| Reihenfolge garantiert | Ja | Nein |
-| Fehlende Pakete | Werden nachgefordert | Gehen verloren |
-| Geschwindigkeit | Langsamer | Schneller |
+| **Verbindung** | Ja (Handshake) | Nein |
+| **Reihenfolge** | Garantiert | Nicht garantiert |
+| **Verlorene Pakete** | Werden nachgefordert | Gehen verloren |
+| **Overhead** | Höher | Niedriger |
+| **Use Cases** | Web, Email, Downloads | Video-Calls, Gaming, DNS |
----
-
-# Wann was?
-
-**TCP:**
-- Web (HTTP/HTTPS)
-- E-Mail
-- Dateitransfer
-- SSH
-
-→ Wenn **jedes Byte ankommen muss**
-
-**UDP:**
-- DNS
-- Video-Streaming
-- Online-Gaming
-- Video-Calls
-
-→ Wenn **Geschwindigkeit wichtiger ist als Vollständigkeit**
+
---
@@ -1098,32 +1433,44 @@ Der Empfänger setzt die Segmente zusammen – auch wenn sie in falscher Reihenf
**Szenario:** Ein Paket geht verloren.
-**TCP:** Wartet, fordert neu an, wartet... → Video friert ein
+| TCP | UDP |
+|-----|-----|
+| Warten... neu anfordern... warten... | Ignorieren, nächstes Frame zeigen |
+| Video friert ein | Kurzes Artefakt |
-**UDP:** Ignoriert es, zeigt nächstes Frame → Kurzes Artefakt
+Bei **Echtzeit** ist Verzögerung schlimmer als Verlust.
-Bei Echtzeit ist ein verlorenes Frame weniger schlimm als Verzögerung.
+
---
-
-
-
+# MTU & Fragmentierung
-# HTTP-Response & Status-Codes
+**MTU** = Maximum Transmission Unit
-```http
-HTTP/1.1 200 OK
-Content-Type: text/html; charset=UTF-8
+Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren.
-
-```
+**Problem:** Ein Foto hat 3.000.000 Bytes.
-**Status-Codes:**
-- **2xx** Erfolg (200 OK)
-- **3xx** Umleitung (301 Moved)
-- **4xx** Client-Fehler (404 Not Found)
-- **5xx** Server-Fehler (500 Internal Error)
+**Lösung:** TCP zerschneidet die Daten in ~2000 Segmente.
+Jedes Segment hat eine Sequenznummer.
+Der Empfänger setzt sie zusammen.
+
+
---
@@ -1133,13 +1480,103 @@ Content-Type: text/html; charset=UTF-8
# HTTP-Methoden
-| Methode | Zweck | Beispiel |
-|---------|-------|----------|
+| Methode | Bedeutung | Beispiel |
+|---------|-----------|----------|
| **GET** | Daten abrufen | Seite laden |
| **POST** | Daten senden | Formular absenden |
| **PUT** | Daten ersetzen | Profil aktualisieren |
| **DELETE** | Daten löschen | Account löschen |
+```http
+GET /index.html HTTP/1.1
+POST /login HTTP/1.1
+```
+
+
+
+---
+
+
+
+
+
+# HTTP Status-Codes
+
+```http
+HTTP/1.1 200 OK
+HTTP/1.1 404 Not Found
+HTTP/1.1 500 Internal Server Error
+```
+
+| Code-Bereich | Bedeutung |
+|--------------|-----------|
+| **2xx** | Erfolg (200 OK, 201 Created) |
+| **3xx** | Umleitung (301 Moved, 304 Not Modified) |
+| **4xx** | Client-Fehler (400 Bad Request, 404 Not Found) |
+| **5xx** | Server-Fehler (500 Internal Error, 503 Unavailable) |
+
+
+
+---
+
+
+
+
+
+# Zusammenfassung Teil 1
+
+**Der Ablauf:**
+1. DNS (UDP:53) → Name zu IP
+2. TCP-Handshake (SYN → SYN-ACK → ACK)
+3. HTTP-Request (GET /...)
+4. HTTP-Response (200 OK + HTML)
+
+**Die Konzepte:**
+- 4 Schichten: Anwendung → Transport → Internet → Netzzugang
+- IP bleibt gleich, MAC ändert sich pro Hop
+- Ports identifizieren Programme
+- Encapsulation: Jede Schicht verpackt die darüberliegende
+
+
+
---
# Werkzeuge zum Selbst-Erkunden
@@ -1150,12 +1587,40 @@ Content-Type: text/html; charset=UTF-8
**Im Terminal:**
```bash
-ping hdm-stuttgart.de
-traceroute hdm-stuttgart.de
-nslookup hdm-stuttgart.de
-curl -I hdm-stuttgart.de
+ping hdm-stuttgart.de # Latenz messen
+traceroute hdm-stuttgart.de # Route anzeigen (Mac/Linux)
+tracert hdm-stuttgart.de # Route anzeigen (Windows)
+nslookup hdm-stuttgart.de # DNS abfragen
+curl -I hdm-stuttgart.de # HTTP-Header abrufen
```
+
+
+---
+
+
+
+# Pause
+## Danach: CSS
+
+
+
---
@@ -1163,16 +1628,20 @@ curl -I hdm-stuttgart.de
# Teil 2: CSS
## Webseiten gestalten
+
+
---
# Was ist CSS?
**C**ascading **S**tyle **S**heets
-- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
-- "Cascading" = Regeln können überschrieben werden
-- Eine CSS-Datei für viele HTML-Seiten
-
```css
p {
color: blue;
@@ -1180,11 +1649,27 @@ p {
}
```
+- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
+- "Cascading" = Regeln können überschrieben werden
+- Eine CSS-Datei kann viele HTML-Seiten stylen
+
+
+
---
# CSS einbinden
-**Option 1: Externe Datei** (empfohlen)
+**Option 1: Externe Datei** ✓
```html
```
@@ -1194,11 +1679,23 @@ p {
```
-**Option 3: Inline** (vermeiden)
+**Option 3: Inline** ✗
```html
...
```
+
+
---
# CSS-Anatomie
@@ -1218,6 +1715,22 @@ h1 {
}
```
+Selektor → was wird gestylt
+Property → welche Eigenschaft
+Value → welcher Wert
+
+
+
---
# Selektoren: Element
@@ -1228,12 +1741,24 @@ p {
color: gray;
}
-/* Mehrere Elemente */
+/* Mehrere Elemente gleichzeitig */
h1, h2, h3 {
font-family: sans-serif;
}
```
+Element-Selektoren sind die einfachsten.
+
+
+
---
# Selektoren: Klasse
@@ -1252,6 +1777,16 @@ h1, h2, h3 {
**Punkt** vor dem Namen = Klasse
+
+
---
# Selektoren: ID
@@ -1271,15 +1806,25 @@ h1, h2, h3 {
⚠️ IDs sollten **einmalig** pro Seite sein.
+
+
---
# Selektoren: Kombinationen
```css
-/* Nachfahre (beliebig tief) */
+/* Nachfahre (beliebig tief verschachtelt) */
article p { line-height: 1.6; }
-/* Direktes Kind */
+/* Direktes Kind (nur eine Ebene) */
nav > a { text-decoration: none; }
/* Nächstes Geschwister */
@@ -1289,8 +1834,26 @@ h2 + p { font-size: 1.2rem; }
p.wichtig { color: red; }
```
+
+
---
+
+
+
+
# Spezifität: Welche Regel gewinnt?
| Selektor | Spezifität |
@@ -1303,8 +1866,23 @@ p.wichtig { color: red; }
```css
p { color: blue; } /* 0,0,0,1 */
.text { color: green; } /* 0,0,1,0 → gewinnt */
+#intro { color: red; } /* 0,1,0,0 → gewinnt über beide */
```
+
+
---
# Box-Modell
@@ -1324,6 +1902,24 @@ p { color: blue; } /* 0,0,0,1 */
└─────────────────────────────────────┘
```
+Jedes Element ist eine Box.
+
+
+
---
# Box-Modell: CSS
@@ -1335,13 +1931,26 @@ p { color: blue; } /* 0,0,0,1 */
padding: 20px;
border: 2px solid black;
margin: 10px;
-
- /* Wichtig: */
- box-sizing: border-box;
}
```
-`box-sizing: border-box` → width inkl. padding + border
+**Wichtig:**
+```css
+box-sizing: border-box;
+```
+→ width/height inkludiert padding + border
+
+
---
@@ -1350,12 +1959,13 @@ p { color: blue; } /* 0,0,0,1 */
```css
/* Keyword */
color: red;
+color: rebeccapurple;
/* Hex */
color: #FF0000;
color: #F00;
-/* RGB/RGBA */
+/* RGB / RGBA */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
@@ -1363,6 +1973,22 @@ color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
```
+
+
---
# Einheiten
@@ -1370,40 +1996,96 @@ color: hsl(0, 100%, 50%);
| Einheit | Bedeutung |
|---------|-----------|
| `px` | Pixel (absolut) |
-| `%` | Prozent vom Parent |
-| `em` | Relativ zur Schriftgröße |
-| `rem` | Relativ zur Root-Schriftgröße |
-| `vw/vh` | Viewport-Breite/-Höhe |
+| `%` | Prozent vom Elternelement |
+| `em` | Relativ zur Schriftgröße des Elements |
+| `rem` | Relativ zur Schriftgröße des Root-Elements |
+| `vw` / `vh` | Prozent der Viewport-Breite/-Höhe |
-**Empfehlung:** `rem` für Schrift, `%` oder `vw/vh` für Layout
+**Empfehlung:**
+`rem` für Schrift, `%` oder `vw/vh` für Layout
+
+
---
# Pseudo-Klassen
```css
+/* Hover – Maus drüber */
a:hover { color: red; }
+
+/* Besuchter Link */
a:visited { color: purple; }
+
+/* Fokussiertes Element */
input:focus { border-color: blue; }
+/* Erstes/n-tes Kind */
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #eee; }
```
+`:` vor dem Namen = Pseudo-Klasse
+
+
+
---
# Pseudo-Elemente
```css
+/* Vor dem Inhalt einfügen */
.required::before {
content: "* ";
color: red;
}
-p::first-letter { font-size: 2em; }
+/* Erster Buchstabe */
+p::first-letter {
+ font-size: 2em;
+}
```
-`:` = Pseudo-Klasse · `::` = Pseudo-Element
+`::` = Pseudo-Element (erzeugt "virtuelles" Element)
+`:` = Pseudo-Klasse (wählt existierendes Element im Zustand)
+
+
---
@@ -1414,18 +2096,69 @@ p::first-letter { font-size: 2em; }
# Responsive Design
```css
-/* Mobile First */
-.container { padding: 1rem; }
+/* Mobile First: Basis-Styles */
+.container {
+ padding: 1rem;
+}
-/* Ab 768px (Tablet) */
+/* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) {
- .container {
- padding: 2rem;
- max-width: 720px;
+ .container {
+ padding: 2rem;
+ max-width: 720px;
+ }
+}
+
+/* Ab 1024px (Desktop): Weitere Anpassungen */
+@media (min-width: 1024px) {
+ .container {
+ max-width: 960px;
}
}
```
+
+
+---
+
+# Zusammenfassung CSS
+
+**Selektoren:**
+- Element: `p`
+- Klasse: `.wichtig`
+- ID: `#header`
+- Kombinationen: `nav > a`, `h2 + p`
+
+**Box-Modell:** content → padding → border → margin
+
+**Spezifität:** Inline > ID > Klasse > Element
+
+**Einheiten:** rem für Text, %, vw/vh für Layout
+
+
+
---
@@ -1436,6 +2169,18 @@ p::first-letter { font-size: 2em; }
**Kontakt:** lb-czechowski@hdm-stuttgart.de
+
+
---
# Lizenz