223015c kap2: block-F 'URL→Pixel-7-schritte' klausur-marker raus (live-bonus, kein klausur-pflicht)
This commit is contained in:
@@ -536,8 +536,6 @@ UDP hingegen hat keinen Handshake — Pakete fliegen los ohne Bestätigung. Schn
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- _class: klausur -->
|
|
||||||
|
|
||||||
# Block F · URL → Pixel in 7 Schritten
|
# Block F · URL → Pixel in 7 Schritten
|
||||||
|
|
||||||
1. **URL parsen** — Schema, Host, Port, Path extrahieren
|
1. **URL parsen** — Schema, Host, Port, Path extrahieren
|
||||||
|
|||||||
@@ -487,38 +487,6 @@ Memo:
|
|||||||
<!-- _footer: "" -->
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
# Block F · URL → Pixel in 7 Schritten
|
|
||||||
|
|
||||||
1. **URL parsen** — Schema, Host, Port, Path extrahieren
|
|
||||||
2. **DNS-Lookup** — Host-Name → IP-Adresse
|
|
||||||
3. **TCP-Handshake** mit Server-IP auf Port 443
|
|
||||||
4. **TLS-Handshake** für https (Zertifikat prüfen)
|
|
||||||
5. **HTTP-Request** senden
|
|
||||||
6. Server antwortet mit **HTML, CSS, JS** (als Body)
|
|
||||||
7. Browser **parsed + rendert** — HTML-Baum + CSS-Regeln + JS-Ausführung → Pixel
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Klausurfähig (Block F — die Synthese-Stelle).
|
|
||||||
|
|
||||||
Pädagogisch wichtig: Studis sollen diese 7 Schritte FREI reproduzieren können.
|
|
||||||
|
|
||||||
Konkretes Beispiel: was passiert, wenn ich `https://librete.ch` eintippe?
|
|
||||||
1. URL: Schema https, Host librete.ch, Port 443 (Default für https), Path /
|
|
||||||
2. DNS-Resolver fragt: librete.ch → 185.232.71.45
|
|
||||||
3. Browser öffnet TCP-Verbindung zu 185.232.71.45:443
|
|
||||||
4. TLS-Handshake: Zertifikat prüfen, Verschlüsselung aushandeln
|
|
||||||
5. HTTP-Request: `GET / HTTP/1.1 \r\n Host: librete.ch ...`
|
|
||||||
6. Server antwortet mit `HTTP/1.1 200 OK` + HTML
|
|
||||||
7. Browser baut DOM-Tree, lädt CSS-Dateien, lädt Bilder, führt JS aus, rendert Pixel
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- _header: "" -->
|
|
||||||
<!-- _footer: "" -->
|
|
||||||
|
|
||||||
|
|
||||||
# CSS-Selektoren
|
# CSS-Selektoren
|
||||||
|
|
||||||
| Selektor | Was |
|
| Selektor | Was |
|
||||||
|
|||||||
Reference in New Issue
Block a user