hdm/2025

Files

T

libretech 64f4729f45 add erklaerung slides after klausur slides in 223015c

- add section.erklaerung CSS class with pink theme styling
- add 6 explanation slides to 01-geschichte-grundlagen-html.md
- add 10 explanation slides to 02-netzwerke-protokolle-css.md
- each slide includes definition, key points, and mnemonics

2026-02-02 14:03:54 +01:00

58 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 – WS 2025/26	Kapitel 2: Netzwerke, Protokolle & CSS

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/

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

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

Glossar: Adressen & Identitäten

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

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.

TCP/IP-Modell: Erklaerung

Definition: Das TCP/IP-Modell beschreibt die Kommunikation im Internet in vier hierarchischen Schichten.

Schicht	Frage	Protokolle	Dateneinheit
4 Anwendung	Was will ich?	HTTP, DNS, SMTP	Daten
3 Transport	Kommt es an?	TCP, UDP	Segment
2 Internet	Welcher Rechner?	IP	Paket
1 Netzzugang	Wie zum Nachbarn?	Ethernet, WLAN	Frame

Kernprinzip: Jede Schicht hat eine Aufgabe und kennt nur ihre Nachbarschichten.

Encapsulation: Jede Schicht verpackt die Daten der darueberliegenden Schicht mit eigenem Header.

Merkhilfe Schichten: "Alle Trinken Immer Noch" (Anwendung-Transport-Internet-Netzzugang)

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: Daten → Segment → Paket → Frame („Der Sache Praktischer Folgen")

Dateneinheiten: Erklaerung

Definition: Jede Schicht im TCP/IP-Modell hat eine eigene Bezeichnung fuer die Daten, die sie verarbeitet.

Schicht	Dateneinheit	Was kommt hinzu?
Anwendung	Daten (Message)	Anwendungsspezifische Infos
Transport	Segment	Ports, Sequenznummern
Internet	Paket	IP-Adressen (Quelle, Ziel)
Netzzugang	Frame	MAC-Adressen, Pruefsumme

Encapsulation-Prozess:

Daten → [TCP-Header + Daten] → [IP-Header + Segment] → [Eth-Header + Paket + Eth-Trailer]

Merkhilfe: "Der Sache Praktischer Folgen" (Daten-Segment-Paket-Frame, von oben nach unten)

Warum ist das clever?

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

Mit Schichten: Der Browser sagt: "Ich will diese Seite." Alles andere übernehmen die Schichten darunter.

Austauschbarkeit: WLAN statt Ethernet? Nur Schicht 1 ändert sich. HTTP/2 statt HTTP/1? Nur Schicht 4 ändert sich.

Exkurs: OSI vs. TCP/IP

    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  │        │                     │
└─────────────────────┘        └─────────────────────┘

OSI = Theorie. TCP/IP = Realität.

Die drei Adressen

IP, MAC und Port – wer braucht was?

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 IP und entscheiden: "Ist das für mich? Nein → in welche Richtung weiterleiten?"

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"

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
443	HTTPS
22	SSH
53	DNS

IP vs. MAC vs. Port

	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 vs. MAC vs. Port: Erklaerung

Definition: Drei verschiedene Adresstypen fuer drei verschiedene Fragen im Netzwerk.

Adresstyp	Frage	Reichweite	Aendert sich?
IP-Adresse	Welcher Rechner im Internet?	Global	Nein (Ziel bleibt)
MAC-Adresse	Welches Geraet nebenan?	Lokal (1 Hop)	Ja, bei jedem Hop
Port	Welches Programm?	Auf einem Rechner	Nein

Analogie Briefpost:

IP = Empfaengeradresse auf dem Brief (bleibt gleich)
MAC = "Naechstes Postamt" (aendert sich bei jeder Station)
Port = Wohnungsnummer im Mehrfamilienhaus

Merkhilfe: "IP = Internet-weit, MAC = Momentaner Nachbar, Port = Programm"

Die Reise eines Klicks

Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?

Das Szenario

Du bist im WLAN der HdM und rufst auf:

https://www.hdm-stuttgart.de

Zwischen Enter und fertiger Seite: ~200 Millisekunden.

In dieser Zeit passieren hunderte Operationen.

Die Zeitlinie

[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

Schritt 1: DNS

"Wo wohnt hdm-stuttgart.de?"

DNS: Das Telefonbuch des Internets

Domain Name System

www.hdm-stuttgart.de  →  212.132.79.37

Dein Laptop fragt sich durch:

Browser-Cache: "War ich da kürzlich?" → Nein
OS-Cache: "Kennt das Betriebssystem die IP?" → Nein
Router/Provider: DNS-Server wird gefragt

Die DNS-Hierarchie

                    . (Root)
                   /|\
                  / | \
               .de .com .org ...
               /
        hdm-stuttgart
             |
            www

Dezentral: Niemand kennt alles. Jede Ebene kennt nur die nächste.

Der DNS-Lookup

Dein Laptop → Resolver:    "Wo ist www.hdm-stuttgart.de?"

Resolver → Root (.):       "Wer verwaltet .de?"
                           ← "Frag 194.0.0.53"

Resolver → .de-Server:     "Wer verwaltet hdm-stuttgart.de?"
                           ← "Frag den Nameserver der HdM"

Resolver → HdM-NS:         "Welche IP hat www?"
                           ← "212.132.79.37"

Resolver → Dein Laptop:    "Die IP ist 212.132.79.37"

DNS ist selbst Netzwerk

Die DNS-Anfrage ist ein ganz normales 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).

Nächster Schritt: Verbindung aufbauen.

Schritt 2: TCP-Handshake

"Hallo Server, bist du da?"

Warum ein Handshake?

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

Nicht: Einfach losreden und hoffen, dass jemand zuhört.

Der 3-Way-Handshake

Client (dein Laptop)                      Server
    |                                        |
    |-------- SYN (Seq=1000) --------------->|
    |         "Ich will reden"               |
    |                                        |
    |<--- SYN-ACK (Seq=5000, Ack=1001) ------|
    |     "OK, ich auch. Ich starte bei 5000"|
    |                                        |
    |-------- ACK (Ack=5001) --------------->|
    |         "Verstanden, los geht's"       |
    |                                        |
    |        [ Verbindung steht ]            |

SYN = Synchronize · ACK = Acknowledge

3-Way-Handshake: Erklaerung

Definition: Der TCP-Verbindungsaufbau in drei Schritten, bei dem Client und Server ihre Sequenznummern austauschen.

Die drei Schritte:

SYN (Client → Server): "Ich will reden, starte bei Seq=1000"
SYN-ACK (Server → Client): "OK, ich starte bei Seq=5000, erwarte 1001"
ACK (Client → Server): "Verstanden, erwarte 5001 - los geht's!"

Warum so kompliziert?

Beide Seiten muessen bereit sein
Sequenznummern werden synchronisiert (daher SYN)
Verlorene Pakete koennen spaeter erkannt und nachgefordert werden

Analogie Telefonat:

Klingeln → Abheben → "Hallo?" → Gespraech beginnt

Merkhilfe: "Sag mir → Sicher, Antworte → Alles klar" (SYN → SYN-ACK → ACK)

Nach dem Handshake

Status: Die TCP-Verbindung steht.

Client:    141.62.xxx.xxx:52431
                         └─── Zufälliger Port für diese Verbindung

Server:    212.132.79.37:443
                        └─── HTTPS-Port

Jetzt erst kann HTTP gesprochen werden.

Schritt 3: HTTP-Request

"Gib mir die Startseite"

Was dein Browser sendet

GET / HTTP/1.1
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

~200 Bytes Text.

GET = "Gib mir" (im Gegensatz zu POST = "Nimm das") / = "Die Startseite"

Encapsulation in Aktion

Der Request wird verpackt

Layer 4: Transport (TCP)

HTTP-Request wird zum Segment:

┌─────────────────────────────────────────────────┐
│ TCP-Header                                      │
│ ┌─────────────┬─────────────┬─────────────────┐ │
│ │ Source Port │ Dest Port   │ Sequence Number │ │
│ │ 52431       │ 443         │ 1001            │ │
│ └─────────────┴─────────────┴─────────────────┘ │
├─────────────────────────────────────────────────┤
│ Payload: "GET / HTTP/1.1..."                    │
└─────────────────────────────────────────────────┘

Neu: Ports + Sequenznummer

Layer 3: Network (IP)

Segment wird zum Paket:

┌─────────────────────────────────────────────────┐
│ IP-Header                                       │
│ ┌─────────────────┬─────────────────┐           │
│ │ Source IP       │ Destination IP  │           │
│ │ 141.62.xxx.xxx  │ 212.132.79.37   │           │
│ └─────────────────┴─────────────────┘           │
├─────────────────────────────────────────────────┤
│ TCP-Segment (unverändert)                       │
└─────────────────────────────────────────────────┘

Neu: IP-Adressen

Layer 2: Data Link (Ethernet)

Paket wird zum Frame:

┌─────────────────────────────────────────────────┐
│ Ethernet-Header                                 │
│ ┌─────────────────┬─────────────────┐           │
│ │ Source MAC      │ Destination MAC │           │
│ │ aa:bb:cc:dd:ee  │ 11:22:33:44:55  │           │
│ └─────────────────┴─────────────────┘           │
├─────────────────────────────────────────────────┤
│ IP-Paket (unverändert)                          │
├─────────────────────────────────────────────────┤
│ FCS (Frame Check Sequence / Prüfsumme)          │
└─────────────────────────────────────────────────┘

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

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 hier übernimmt die Physik.

Die Reise durch das Netz

Hop für Hop

Der erste Hop: Dein Router

Laptop → [Frame] → Router

Der Router empfängt:

Layer 1: Signale → Bits
Layer 2: Frame prüfen. MAC okay? → Auspacken
Layer 3: IP lesen. "212.132.79.37 – nicht mein Netz"

Routing-Entscheidung: "Ich schicke es Richtung Internet."

Der Router verpackt NEU

┌─────────────────────────────────────────────────┐
│ Ethernet-Header (NEU!)                          │
│ ┌─────────────────┬─────────────────┐           │
│ │ Source MAC      │ Destination MAC │           │
│ │ Router-MAC      │ Nächster-Router │           │
│ └─────────────────┴─────────────────┘           │
├─────────────────────────────────────────────────┤
│ IP-Paket (UNVERÄNDERT)                          │
│ Source: 141.62.xxx.xxx                          │
│ Dest: 212.132.79.37                             │
└─────────────────────────────────────────────────┘

IP bleibt gleich. MAC ändert sich.

Mehrere Hops

Dein Laptop
    ↓ [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, neu verpacken.

Die Ankunft

Der Server empfängt und antwortet

Decapsulation am Server

Bits empfangen (Layer 1)
    ↓
Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
    ↓
IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
    ↓
TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
    ↓
HTTP lesen: "GET / HTTP/1.1" (Layer 7)

Der Webserver versteht: "Jemand will die Startseite."

Der Server antwortet

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

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

~45 KB HTML müssen jetzt zu dir.

Encapsulation beim Server

Der Server macht dasselbe – nur in die andere Richtung:

HTTP-Response: "HTTP/1.1 200 OK..."
    ↓
TCP: Dest-Port: 52431 (dein Browser!)
    ↓
IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
    ↓
Ethernet: Dest-MAC: Router des Server-Netzes
    ↓
Bits

Die Antwort reist zurück

Server
    ↓
Router → Router → Router → ...
    ↓
Router HdM
    ↓
Dein Laptop

Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.

Decapsulation bei dir

Bits empfangen
    ↓
Frame: MAC = meine MAC? → Auspacken
    ↓
IP: Ziel-IP = meine IP? → Auspacken
    ↓
TCP: Port 52431 = mein Browser → Auspacken
    ↓
HTTP: "HTTP/1.1 200 OK..."
    ↓
Browser rendert die Seite

Exkurse

TCP vs. UDP, MTU, HTTP-Methoden

TCP vs. UDP

	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: Erklaerung

Definition: Die zwei Transport-Protokolle mit unterschiedlichen Garantien und Anwendungsfaellen.

Eigenschaft	TCP	UDP
Verbindungsaufbau	Ja (3-Way-Handshake)	Nein
Reihenfolge	Garantiert	Nicht garantiert
Verlorene Pakete	Werden nachgefordert	Gehen verloren
Geschwindigkeit	Langsamer (Overhead)	Schneller

Wann TCP? Wenn alles ankommen muss:

Web (HTTP/HTTPS), E-Mail, Datei-Downloads

Wann UDP? Wenn Geschwindigkeit wichtiger ist als Vollstaendigkeit:

Video-Calls, Gaming, DNS, Streaming

Merkhilfe: "TCP = Total Complete Packages" vs. "UDP = Unsicher, Dafuer Prompt"

Warum 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

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

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

GET /index.html HTTP/1.1
POST /login HTTP/1.1

HTTP-Methoden: Erklaerung

Definition: HTTP-Methoden beschreiben die gewuenschte Aktion auf einer Ressource.

Methode	Bedeutung	Typischer Einsatz
GET	Daten abrufen	Webseite laden, Bild anzeigen
POST	Daten senden	Formular absenden, Login
PUT	Daten ersetzen	Profil komplett aktualisieren
PATCH	Daten teilweise aendern	Einzelnes Feld aendern
DELETE	Daten loeschen	Account loeschen

Idempotenz: GET, PUT, DELETE koennen mehrfach ausgefuehrt werden mit gleichem Ergebnis. POST nicht (mehrfach absenden = mehrere Bestellungen).

REST-APIs: Nutzen diese Methoden systematisch fuer CRUD-Operationen (Create, Read, Update, Delete).

Merkhilfe: "Gib mir, Poste das, Platziere neu, Delete" (GET, POST, PUT, DELETE)

HTTP Status-Codes

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)

HTTP Status-Codes: Erklaerung

Definition: Dreistellige Codes, die der Server zurueckgibt, um das Ergebnis einer Anfrage zu beschreiben.

Bereich	Bedeutung	Wichtige Codes
2xx	Erfolg	200 OK, 201 Created, 204 No Content
3xx	Umleitung	301 Moved Permanently, 304 Not Modified
4xx	Client-Fehler	400 Bad Request, 403 Forbidden, 404 Not Found
5xx	Server-Fehler	500 Internal Error, 502 Bad Gateway, 503 Unavailable

Haeufigste Codes im Alltag:

200: Alles OK, hier sind die Daten
404: Seite nicht gefunden (falsche URL)
403: Zugriff verweigert (keine Berechtigung)
500: Server hat einen Fehler (nicht eure Schuld)

Merkhilfe: "2=alles gut, 3=woanders, 4=du Fehler, 5=Server Fehler"

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

Netzwerke Zusammenfassung: Erklaerung

Der Ablauf eines Webseitenaufrufs:

DNS (UDP:53): Domain → IP-Adresse aufloesen
TCP-Handshake: SYN → SYN-ACK → ACK (Verbindung aufbauen)
HTTP-Request: GET /index.html (Seite anfordern)
HTTP-Response: 200 OK + HTML (Seite erhalten)

Die 4 Schichten (TCP/IP):

Schicht	Protokolle	Dateneinheit
Anwendung	HTTP, DNS	Daten
Transport	TCP, UDP	Segment
Internet	IP	Paket
Netzzugang	Ethernet	Frame

Merkhilfen:

Schichten: "Alle Trinken Immer Noch"
Dateneinheiten: "Der Sache Praktischer Folgen"
IP bleibt gleich, MAC aendert sich bei jedem Hop

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

Was ist CSS?

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 ✓

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

Option 2: Style-Tag

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

Option 3: Inline ✗

<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

⚠️ 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: Welche Regel gewinnt?

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 Spezifitaet: Erklaerung

Definition: Spezifitaet bestimmt, welche CSS-Regel gewinnt, wenn mehrere Regeln auf dasselbe Element zutreffen.

Spezifitaet als 4-stellige Zahl (a,b,c,d):

Kategorie	Gewicht	Beispiel
a: Inline-Style	1,0,0,0	`style="..."`
b: ID	0,1,0,0	`#header`
c: Klasse, Attribut, Pseudo-Klasse	0,0,1,0	`.wichtig`, `:hover`
d: Element, Pseudo-Element	0,0,0,1	`p`, `::before`

Vergleich: Von links nach rechts, hoehere Zahl gewinnt.

0,1,0,0 > 0,0,99,99 (eine ID schlaegt beliebig viele Klassen)

Praktische Tipps:

Vermeide IDs in CSS (zu spezifisch)
Vermeide !important (bricht das System)
Nutze Klassen fuer wiederverwendbare Styles

Box-Modell

┌─────────────────────────────────────┐
│              margin                 │
│   ┌─────────────────────────────┐   │
│   │          border             │   │
│   │   ┌─────────────────────┐   │   │
│   │   │       padding       │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   content   │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

Jedes Element ist eine Box.

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

/* 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%);

Einheiten

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: Erklaerung

Definition: Webseiten passen sich automatisch an verschiedene Bildschirmgroessen an (Desktop, Tablet, Smartphone).

Mobile First Ansatz:

Basis-CSS fuer kleine Bildschirme schreiben
Mit @media (min-width: ...) fuer groessere Bildschirme erweitern

/* Basis (Mobile) */
.container { padding: 1rem; }

/* Ab 768px (Tablet) */
@media (min-width: 768px) { .container { padding: 2rem; } }

/* Ab 1024px (Desktop) */
@media (min-width: 1024px) { .container { max-width: 1200px; } }

Typische Breakpoints:

576px: Kleine Smartphones
768px: Tablets
1024px: Desktop
1200px: Grosse Bildschirme

Merkhilfe: "Mobile First" = Basis klein, dann groesser werden

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ächster Termin: 24.01.2026 – 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/

58 KiB Raw Blame History Unescape Escape