public/uni

Fork 0

Files

T

libretech 613f37983e

223015c 02: osi/tcp-ip-grafik korrekt gemappt + headline-umbruch fix

2026-06-17 10:39:08 +02:00

56 KiB

Raw Blame History

marp, theme, paginate, backgroundColor, header, footer, title

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Grundlagen IT- und Internettechnik (223015c)	Michael Czechowski – HdM Stuttgart – SoSe 2026	Kapitel 2: Netzwerke, Protokolle & CSS

Grundlagen IT- und Internettechnik

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

Sommersemester 2026

https://librete.ch/hdm/223015c/

Kapitel 2

Netzwerke, Protokolle & CSS

Agenda

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

CODE CRISPIES: https://codecrispi.es/
Online Code-Editor: https://codepen.io/pen/
MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
Flexbox-Spiel: https://flexboxfroggy.com/
Grid-Spiel: https://cssgridgarden.com/

Teil 1: Netzwerke & Protokolle

Die Infrastruktur des Webs

Glossar: Die Landkarte

Das Web folgt dem Client-Server-Modell: Ein Client (Browser) sendet einen Request, ein Server liefert eine Response – nach den Regeln eines Protokolls.

Begriff	Was ist das?
Host	Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in S-Bahn etc.)
Client	Host bzw. Anwendung mit einer Anfrage (bspw. Browser)
Server	Host bzw. Anwendung mit der Antwort (bspw. Webserver)
Request	Die Anfrage des Clients
Response	Die Antwort des Servers
Protokoll	Regeln für Kommunikation (z. B. TCP, HTTP)

Glossar: Adressen & Identitäten

Jedes Gerät im Netz braucht Adressen: eine IP für das globale Routing, eine MAC für das lokale Netz und einen Port für das richtige Programm.

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`

Glossar: Daten unterwegs

Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen Header hinzu und erzeugt so eine neue Dateneinheit.

Begriff	Was ist das?	Schicht
Payload	Die eigentlichen Nutzdaten (bspw. Request, Response)	Anwendung
Header	Metadaten vor und nach dem Payload	Jedes Layer
Segment	Payload + TCP-Header (Anwendungsport)	Transport (Layer 4)
Paket	Payload + IP-Header (WLAN-Router)	Internet (Layer 3)
Frame	Payload + MAC-Header (Netzwerkkarte)	Netzzugang (Layer 2)
Bit	Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk)	Bitübertragung (Layer 1)

Glossar: Netzwerk-Eigenschaften

Latenz und Bandbreite bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität.

Begriff	Was ist das?	Einheit
Latenz	Verzögerung (hin + zurück)	Millisekunden (ms)
Bandbreite	Datenmenge pro Zeiteinheit	Mbit/s
Hop	Ein Sprung zum nächsten Router (im Internet)	–
Round-Trip	Hin- und Rückweg	–
Ping	Client sendet "ping", bekommt von Server "pong"	ms

Glossar: Protokolle

Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTTP) über den Transport (TCP/UDP) bis zum Routing (IP).

Protokoll	Wofür?	Port	Schicht
HTTP	Webseiten + Inhalte übertragen	80	Anwendung (Layer 4)
HTTPS	HTTP + Verschlüsselung	443	Anwendung (Layer 4)
DNS	Namen → IP-Adressen	53	Anwendung (Layer 4)
TCP	Zuverlässige Übertragung	–	Transport (Layer 4)
UDP	Schnelle Übertragung	–	Transport (Layer 4)
IP	Routing durchs Internet	–	Internet (Layer 3)

HTTP(S) = Hypertext Transfer Protocol (Secure) · DNS = Domain Name System · TCP = Transmission Control Protocol · UDP = User Datagram Protocol · IP = Internet Protocol

Das Schichtenmodell

Warum ist Netzwerk-Kommunikation in Schichten organisiert?

Das Problem: Komplexität

Zwischen Klick und fertiger Webseite liegen viele Stationen.

Jede Schicht spricht eine andere Sprache:

Browser → HTTP
Netzwerkkarte → Bits und Signale
Router → IP-Pakete
Provider → Routing

Diese Sprachen müssen zusammenspielen.

Die Lösung: Arbeitsteilung

Statt dass jedes Programm alles können muss, teilen sich mehrere Schichten die Aufgaben.

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	Dienste steuern, Daten austauschen etc.	HTTP, DNS, SMTP
3	Transport	Zuverlässige Verbindung aufbauen (Ports)	TCP, UDP
2	Internet	Routing, global eindeutige Adressen	IP
1	Netzzugang	Lokale Übertragung	Ethernet, WLAN

Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.

TCP/IP-Modell – Vertiefung

Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.

Schicht-Aufgaben im Detail:

Schicht	Frage	Protokolle	Geräte
4 Anwendung	Was will ich?	HTTP, DNS, SMTP, FTP	– (Software)
3 Transport	Kommt es an? Welches Programm?	TCP, UDP	– (Software)
2 Internet	Welcher Rechner weltweit?	IP, ICMP	Router
1 Netzzugang	Wie zum Nachbarn?	Ethernet, WLAN, PPP	Switch, Access Point

OSI vs. TCP/IP:

OSI Schicht 5–7 (Session, Presentation, Application) → TCP/IP Schicht 4
OSI Schicht 1–2 (Physical, Data Link) → TCP/IP Schicht 1

Warum Schichten? Abstraktion. HTTP muss nicht wissen, ob Ethernet oder WLAN verwendet wird. Änderungen in einer Schicht betreffen andere nicht.

Schichten verpacken Daten

Encapsulation: Jede Schicht verpackt die Daten der darüberliegenden Schicht.

Decapsulation: Beim Empfang packt jede Schicht ihren Teil wieder aus.

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

Beim Senden wandern Daten von oben nach unten — jede Schicht verpackt die darüberliegende Einheit mit einem eigenen Header.

Dateneinheiten & Encapsulation – Vertiefung

Encapsulation (Verkapselung): Jede Schicht fügt ihren Header hinzu, ohne den Inhalt der oberen Schicht zu verändern.

Was jeder Header enthält:

Schicht	Einheit	Header-Inhalte
Anwendung	Daten	HTTP-Header, Cookies, Content-Type
Transport	Segment	Quell-/Zielport, Sequenznummer, Flags (SYN, ACK)
Internet	Paket	Quell-/Ziel-IP, TTL, Protokoll (TCP=6, UDP=17)
Netzzugang	Frame	Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme

Overhead-Rechnung (1 Byte HTTP-Body):

Ethernet: 14 + 4 Bytes (Header + Trailer)
IP: 20 Bytes (ohne Optionen)
TCP: 20 Bytes (ohne Optionen)
Minimum: 58 Bytes für 1 Byte Nutzlast

Decapsulation: Empfänger packt in umgekehrter Reihenfolge aus. Jede Schicht prüft ihren Header (z.B. CRC) und reicht Nutzdaten nach oben.

Vorteile der Schichtung

Ohne Schichten: Jede Anwendung müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert und wie Router Pakete weiterleiten.

Mit Schichten: Der Browser fordert nur die Seite an. Alles Weitere übernehmen die Schichten darunter.

Austauschbarkeit: Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1. Löst HTTP/2 die Version HTTP/1 ab, ändert sich nur Schicht 4.

OSI vs. TCP/IP

OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.

Die drei Adressen

IP, MAC und Port im Zusammenspiel

IP-Adresse: Das Endziel

212.132.79.37

Global eindeutig (im gesamten Internet)
Identifiziert einen Rechner
Bleibt gleich auf dem gesamten Weg
Analogie: Empfänger auf einem Brief

Router lesen die Ziel-IP und leiten das Paket in die passende Richtung weiter.

MAC-Adresse: Der nächste Schritt

aa:bb:cc:dd:ee:ff

Lokal eindeutig (nur im lokalen Netzwerk relevant)
Identifiziert eine Netzwerkkarte
Ändert sich bei jedem Hop
Analogie: "Nächstes Postamt: XY"

Sie funktioniert nur innerhalb eines Netzwerksegments.

Port: Das richtige Programm

Ein Port identifiziert ein Programm auf einem Rechner — wie eine Wohnungstür im Mehrfamilienhaus.

80 → HTTP
443 → HTTPS
22 → SSH
53 → DNS

IP vs. MAC vs. Port

Drei Adresstypen arbeiten zusammen — nur die MAC-Adresse ändert sich unterwegs, IP und Port bleiben auf dem gesamten Weg gleich.

	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

IP, MAC, Port – Vertiefung

Drei Adressebenen lösen drei verschiedene Probleme:

IP-Adresse (Schicht 2 – Internet):

Hierarchisch aufgebaut: Netzwerk-Teil + Host-Teil
Router lesen nur den Netzwerk-Teil für Routing-Entscheidungen
IPv4: 32 Bit (z.B. 192.168.1.1), IPv6: 128 Bit

MAC-Adresse (Schicht 1 – Netzzugang):

48 Bit, vom Hersteller fest vergeben (theoretisch)
Erste 24 Bit = OUI (Organizationally Unique Identifier) = Hersteller
Nur relevant für den nächsten Hop – wird bei jedem Router ersetzt
ARP (Address Resolution Protocol) übersetzt IP → MAC

Port (Schicht 3 – Transport):

16 Bit → 65.535 mögliche Ports
Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen

Warum ändert sich nur MAC? IP ist das Endziel (Brief-Adresse), MAC ist der aktuelle Bote (wer trägt den Brief gerade?).

Die Reise eines Klicks

Was passiert, wenn ihr `www.hdm-stuttgart.de` aufruft?

Das Szenario

Ihr seid im WLAN der HdM und ruft auf:

https://www.hdm-stuttgart.de

Zwischen Enter und fertiger Seite vergehen rund 200 Millisekunden.

In dieser Zeit passieren hunderte Operationen.

Die Zeitlinie

Schritt 1: DNS

"Wo wohnt hdm-stuttgart.de?"

DNS: Das Telefonbuch des Internets

Domain Name System

www.hdm-stuttgart.de  →  212.132.79.37

Euer Laptop arbeitet die Quellen der Reihe nach ab:

Browser-Cache prüfen → kein Eintrag
OS-Cache prüfen → kein Eintrag
Router/Provider: DNS-Server anfragen

Die DNS-Hierarchie

Dezentral: Niemand kennt alles.

Jede Ebene kennt nur die nächste:

Root → .de, .com, .org
.de → alle .de-Domains
hdm-stuttgart.de → www, mail, …

DNS ist selbst Netzwerk

Die DNS-Anfrage ist ein gewöhnliches Paket:

Eigenschaft	Wert
Protokoll	UDP (meistens)
Port	53
Inhalt	"A-Record für www.hdm-stuttgart.de?"

DNS durchläuft alle Schichten – genau wie später HTTP.

Nach dem DNS-Lookup

Ergebnis:

www.hdm-stuttgart.de = 212.132.79.37

Diese Information wird gecached (für Minuten bis Stunden).

Der nächste Schritt ist der Verbindungsaufbau.

Schritt 2: TCP-Handshake

"Hallo Server, bist du da?"

Zweck des Handshakes

TCP ist verbindungsorientiert:

Beide Seiten müssen bereit sein
Beide kennen die Sequenznummern des anderen
Verlorene Pakete können erkannt und neu angefordert werden

Analogie: Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt

3-Way-Handshake – Vertiefung

Der Handshake synchronisiert Sequenznummern – essenziell für TCPs Zuverlässigkeit.

Warum zufällige Startwerte (ISN)?

Sicherheit: Verhindert Session-Hijacking durch Raten
Eindeutigkeit: Unterscheidet alte von neuen Verbindungen
ISN = Initial Sequence Number, vom OS zufällig gewählt

TCP-Flags im Handshake:

Paket	Flags	Bedeutung
1	SYN	Client will Verbindung, sendet seine ISN
2	SYN+ACK	Server akzeptiert, sendet seine ISN, bestätigt Client-ISN+1
3	ACK	Client bestätigt Server-ISN+1

Was passiert bei Problemen?

Kein SYN-ACK → Client wiederholt SYN (Timeout)
SYN-Flood-Attacke: Millionen SYNs ohne ACK → Server-Ressourcen erschöpft
Schutz: SYN-Cookies (Server speichert keinen State bis ACK kommt)

Verbindungsabbau: 4-Way-Handshake (FIN → ACK → FIN → ACK) oder RST für sofortigen Abbruch.

Nach dem Handshake

Status: Die TCP-Verbindung steht.

Erst jetzt kann HTTP übertragen werden.

Schritt 3: HTTP-Request

"Gib mir die Startseite"

Was euer Browser sendet

GET / HTTP/2.0
Host: www.hdm-stuttgart.de
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html
Accept-Language: de-DE
Connection: keep-alive

Der Request umfasst rund 200 Bytes Text.

GET ruft Daten ab (im Gegensatz zu POST, das Daten sendet). / bezeichnet die Startseite.

Encapsulation in Aktion

Der Request wird verpackt

Layer 4: Transport (TCP)

HTTP-Request wird zum Segment:

Neu: Ports + Sequenznummer

Layer 3: Network (IP)

Segment wird zum Paket:

Neu: IP-Adressen

Layer 2: Data Link (Ethernet)

Paket wird zum Frame:

Wichtig: Destination MAC = Router, nicht Server!

Router-MAC per ARP ermitteln

ARP – Address Resolution Protocol

Das geschieht automatisch. Die Information wird gecached.

Layer 1: Physical

Frame wird zu Bits – Bits werden zu Signalen:

Medium	Signal
Kupferkabel	Spannung: High/Low
Glasfaser	Licht: An/Aus
WLAN	Funkwellen

01001000 01010100 01010100 01010000 ...

Ab Schicht 1 erfolgt die Übertragung physikalisch.

Die Reise durch das Netz

Hop für Hop

Der erste Hop: Euer Router

Laptop → [Frame] → Router

Der Router verarbeitet das Frame in drei Schritten:

Layer 1: Signale werden zu Bits.
Layer 2: Frame und MAC-Adresse werden geprüft, dann ausgepackt.
Layer 3: Die Ziel-IP liegt außerhalb des lokalen Netzes.

Routing-Entscheidung: Das Paket geht Richtung Internet weiter.

Der Router verpackt neu

IP bleibt gleich. MAC ändert sich.

Mehrere Hops

Bei jedem Hop laufen drei Schritte ab:

Auspacken bis Layer 3 (IP)
Routing-Entscheidung
Neu verpacken mit nächster MAC

IP bleibt gleich · MAC ändert sich jedes Mal.

Die Ankunft

Der Server empfängt und antwortet

Decapsulation am Server

Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.

Am Ende erkennt der Webserver die Anfrage nach der Startseite.

Der Server antwortet

HTTP/2.0 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 45231

<!DOCTYPE html>
<html lang="de">
<head>
    <title>HdM Stuttgart</title>
...

Rund 45 KB HTML müssen nun zu euch übertragen werden.

Encapsulation beim Server

Der Server durchläuft dieselben Schritte – nur in umgekehrter Richtung:

Die Antwort reist zurück

Der Rückweg funktioniert wie der Hinweg:

Hop für Hop durchs Internet
IP bleibt gleich (Start/Ziel)
MAC ändert sich bei jedem Router

Decapsulation bei euch

Der Rückweg ist die umgekehrte Encapsulation.

Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.

Exkurse

TCP vs. UDP, MTU, HTTP-Methoden

TCP vs. UDP

TCP und UDP sind beides Transport-Protokolle — TCP garantiert Vollständigkeit, UDP setzt auf Geschwindigkeit.

	TCP	UDP
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

TCP vs. UDP – Vertiefung

Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlichen Garantien.

TCP (Transmission Control Protocol):

Verbindungsorientiert (Handshake vor Daten)
Sequenznummern → Reihenfolge garantiert
ACKs + Retransmission → Kein Datenverlust
Flow Control (Sliding Window) → Empfänger nicht überlasten
Congestion Control → Netzwerk nicht überlasten

UDP (User Datagram Protocol):

Verbindungslos (Fire-and-Forget)
Keine Sequenznummern, keine ACKs
Header nur 8 Bytes (TCP: 20+ Bytes)
Anwendung muss selbst für Zuverlässigkeit sorgen

Anwendung	Protokoll	Grund
HTTP/HTTPS	TCP	Vollständigkeit kritisch
DNS	UDP	Kleine Pakete, schnelle Antwort
Video-Streaming	UDP/QUIC	Latenz wichtiger als Perfektion
Online-Gaming	UDP	Echtzeit, veraltete Daten nutzlos

QUIC: Googles Protokoll kombiniert UDP-Geschwindigkeit mit TCP-ähnlicher Zuverlässigkeit (HTTP/3).

UDP bei Video-Calls

Szenario: Ein Paket geht verloren.

TCP	UDP
Warten... neu anfordern... warten...	Ignorieren, nächstes Frame zeigen
Video friert ein	Kurzes Artefakt

Bei Echtzeit ist Verzögerung schlimmer als Verlust.

MTU & Fragmentierung

MTU = Maximum Transmission Unit

Ein Ethernet-Frame kann maximal 1500 Bytes Nutzdaten transportieren.

Problem: Ein Foto hat 3.000.000 Bytes.

Lösung: TCP zerschneidet die Daten in ~2000 Segmente. Jedes Segment hat eine Sequenznummer. Der Empfänger setzt sie zusammen.

HTTP-Methoden

HTTP-Methoden beschreiben, was der Client mit einer Ressource tun will.

Methode	Bedeutung	Beispiel
GET	Daten abrufen	Seite laden `GET /index.html HTTP/2.0`
POST	Daten senden	Formular absenden `POST /login HTTP/2.0`
PUT	Daten ersetzen	Profil aktualisieren `PUT /users/42 HTTP/2.0`
DELETE	Daten löschen	Account löschen `DELETE /users/42 HTTP/2.0`

CRUD = Create, Read, Update, Delete

HTTP-Methoden – Vertiefung

HTTP-Methoden definieren die Semantik der Anfrage – was der Client vom Server erwartet.

CRUD-Mapping (Create, Read, Update, Delete):

Methode	CRUD	Idempotent	Safe	Typischer Einsatz
GET	Read	Ja	Ja	Ressource abrufen
POST	Create	Nein	Nein	Formular, neue Ressource
PUT	Update	Ja	Nein	Ressource vollständig ersetzen
PATCH	Update	Nein	Nein	Ressource teilweise ändern
DELETE	Delete	Ja	Nein	Ressource löschen

Idempotent: Mehrfaches Ausführen hat denselben Effekt wie einmaliges (GET, PUT, DELETE). Safe: Ändert nichts am Server (nur GET, HEAD, OPTIONS).

REST-Prinzip: URLs identifizieren Ressourcen, Methoden definieren Aktionen.

GET /users/42        → Benutzer 42 abrufen
PUT /users/42        → Benutzer 42 vollständig ersetzen
DELETE /users/42     → Benutzer 42 löschen
POST /users          → Neuen Benutzer erstellen

HTTP Status-Codes

Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.

HTTP/2.0 200 OK
HTTP/2.0 404 Not Found
HTTP/2.0 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)

HTTP Status-Codes – Vertiefung

Die erste Ziffer kategorisiert die Antwort:

Bereich	Kategorie	Häufige Codes
1xx	Informational	100 Continue, 101 Switching Protocols
2xx	Success	200 OK, 201 Created, 204 No Content
3xx	Redirection	301 Moved Permanently, 302 Found, 304 Not Modified
4xx	Client Error	400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found
5xx	Server Error	500 Internal Error, 502 Bad Gateway, 503 Unavailable

Wichtige Unterscheidungen:

401 vs. 403: 401 = nicht authentifiziert (wer bist du?), 403 = nicht autorisiert (du darfst nicht)
301 vs. 302: 301 = permanent umgezogen (Cache-fähig), 302 = temporär (nicht cachen)
304 Not Modified: Browser hat Cache, Server bestätigt: noch aktuell → spart Bandbreite

API-Design: Korrekte Status-Codes sind wichtig für Clients. 200 bei Fehler mit {"error": "..."} im Body ist schlechtes Design.

Zusammenfassung Teil 1

Der Ablauf:

DNS (UDP:53) → Name zu IP
TCP-Handshake (SYN → SYN-ACK → ACK)
HTTP-Request (GET /...)
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

Netzwerk-Grundlagen – Vertiefung

Die vier Kernkonzepte für Web-Entwickelnde:

1. DNS-Auflösung:

Browser fragt DNS-Resolver (z.B. 8.8.8.8)
Rekursive Abfrage: Root → TLD → Authoritative
Caching auf jeder Ebene (TTL = Time To Live)

2. TCP-Verbindungsaufbau:

3-Way-Handshake vor jeder HTTP(S)-Anfrage (HTTP/2.0)
Keep-Alive: Verbindung bleibt offen für mehrere Requests
HTTP/2: Multiplexing – viele Requests über eine Verbindung

3. HTTP(S) Request/Response:

Request:  Methode + URL + Header + (Body)
Response: Status + Header + Body

4. Schichten & Adressen:

Was bleibt gleich?	Was ändert sich?
Ziel-IP	MAC-Adressen (bei jedem Hop)
Ports	–

Debugging: Browser DevTools (F12 → Network) zeigt alle Requests, Timing, Header.

Werkzeuge zum Selbst-Erkunden

Im Browser (F12 → Network-Tab):

Jeder Request sichtbar
Timing, Headers, Response

Im Terminal:

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

Teil 2: CSS

Webseiten gestalten

CSS im Überblick

Cascading Style Sheets

p {
    color: blue;
    font-size: 16px;
}

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)

<link rel="stylesheet" href="style.css">

Option 2: Style-Tag

<style>p { color: blue; }</style>

Option 3: Inline (vermeiden)

<p style="color: blue;">...</p>

CSS-Anatomie

selector {
    property: value;
}

Beispiel:

h1 {
    color: #333333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

Selektor → was wird gestylt Property → welche Eigenschaft Value → welcher Wert

Selektoren: Element

/* Alle <p>-Elemente */
p {
    color: gray;
}

/* Mehrere Elemente gleichzeitig */
h1, h2, h3 {
    font-family: sans-serif;
}

Element-Selektoren sind die einfachsten.

Selektoren: Klasse

<p class="wichtig">Dieser Text ist wichtig.</p>
<p>Dieser nicht.</p>

.wichtig {
    color: red;
    font-weight: bold;
}

Punkt vor dem Namen = Klasse

Selektoren: ID

<nav id="hauptnavigation">...</nav>

#hauptnavigation {
    background: #333;
    padding: 1rem;
}

Raute vor dem Namen = ID

Achtung: IDs sollten einmalig pro Seite sein.

Selektoren: Kombinationen

/* Nachfahre (beliebig tief verschachtelt) */
article p { line-height: 1.6; }

/* Direktes Kind (nur eine Ebene) */
nav > a { text-decoration: none; }

/* Nächstes Geschwister */
h2 + p { font-size: 1.2rem; }

/* Element mit Klasse */
p.wichtig { color: red; }

Spezifität von Selektoren

Selektor	Spezifität
Element (`p`)	0,0,0,1
Klasse (`.wichtig`)	0,0,1,0
ID (`#header`)	0,1,0,0
Inline (`style="..."`)	1,0,0,0

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

CSS Spezifität – Vertiefung

Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Element zutreffen. Sie wird als 4-stellige Zahl berechnet: (Inline, IDs, Klassen, Elemente).

Berechnung:

Selektor	IDs	Klassen	Elemente	Gesamt
`p`	0	0	1	0,0,0,1
`.info`	0	1	0	0,0,1,0
`p.info`	0	1	1	0,0,1,1
`#header`	1	0	0	0,1,0,0
`#header .nav a`	1	1	1	0,1,1,1

Wichtige Regeln:

Eine Klasse (0,0,1,0) schlägt jede Anzahl von Elementen (0,0,0,99)
Eine ID schlägt jede Anzahl von Klassen
!important bricht alles → vermeiden, da schwer zu überschreiben

Best Practice: Flache Spezifität anstreben. BEM-Methodik (.block__element--modifier) hält Spezifität gleichmäßig niedrig.

Box-Modell

Jedes HTML-Element ist eine rechteckige Box.

Schichten innen → außen:

content – Inhalt (Text, Bild)
padding – Innenabstand
border – Rahmen
margin – Außenabstand

Gesamt-Breite = width + padding + border + margin. Tipp: box-sizing: border-box rechnet padding + border mit ein.

Box-Modell: CSS

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

Wichtig:

box-sizing: border-box;

→ width/height inkludiert padding + border

Farben

CSS kennt fünf Notationen für Farben: Keyword, Hex, RGB, RGBA (mit Transparenz) und HSL.

/* Keyword */
color: red;
color: rebeccapurple;

/* Hex */
color: #FF0000;
color: #F00;

/* RGB / RGBA */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

MDN-Referenz: CSS <color>

Einheiten

CSS-Einheiten bestimmen, ob Größen absolut (px) oder relativ zum Kontext (rem, %, vw) berechnet werden.

Einheit	Bedeutung
`px`	Pixel (absolut)
`%`	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

Pseudo-Klassen

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

/* Vor dem Inhalt einfügen */
.required::before {
    content: "* ";
    color: red;
}

/* Erster Buchstabe */
p::first-letter {
    font-size: 2em;
}

:: = Pseudo-Element (erzeugt "virtuelles" Element) : = Pseudo-Klasse (wählt existierendes Element im Zustand)

Responsive Design

/* Mobile First: Basis-Styles */
.container {
    padding: 1rem;
    background: white;
}
/* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
        background: red;
    }
}
/* Ab 1024px (Desktop): Weitere Anpassungen */
@media (min-width: 1024px) {
    .container {
        background: green;
    }
}

Responsive Design – Vertiefung

Mobile First ist der Standard: Basis-CSS für kleine Screens, dann Erweiterungen für größere.

Breakpoints (gängige Werte):

Breakpoint	Gerät	Media Query
< 576px	Smartphone (Portrait)	Basis (kein Query)
≥ 576px	Smartphone (Landscape)	`@media (min-width: 576px)`
≥ 768px	Tablet	`@media (min-width: 768px)`
≥ 992px	Desktop	`@media (min-width: 992px)`
≥ 1200px	Large Desktop	`@media (min-width: 1200px)`

Viewport-Meta-Tag (kritisch!):

<meta name="viewport" content="width=device-width, initial-scale=1">

Ohne diesen Tag ignorieren mobile Browser eure Media Queries und rendern die Desktop-Version verkleinert.

Moderne Alternativen zu Media Queries:

clamp(): font-size: clamp(1rem, 2vw, 2rem);
Container Queries: Reagieren auf Container-Größe statt Viewport
CSS Grid auto-fit/auto-fill: Automatisches Responsive Layout

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

Fragen & Diskussion

Nächstes Thema: JavaScript

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/

56 KiB Raw Blame History Unescape Escape