uni/slides/223015c/02-netzwerke-protokolle-css.md

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

<style> :root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; } section.invert { --color-foreground: #fff; } section { font-size: 1.7rem; } h1 { color: #a02060; } section.invert h1 { color: #fff; } h2 { color: #1f2937; } pre { background: #0f0f23; color: #d63384; border-radius: 8px; border-left: 3px solid #d63384; } pre code { background: transparent; color: inherit; } code { background: #0f0f23; padding: 0.15em 0.4em; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } section code:not(.hljs) { color: #d63384 !important; } section code.hljs { color: #f8f8f8 !important; } a { color: var(--color-highlight); } section.klausur { background: repeating-linear-gradient( 135deg, #fce4ec, #fce4ec 40px, #fff 40px, #fff 80px ) !important; } @media print { section.klausur { background: #fce4ec !important; } } section.aufgabe { background: #fce4ec !important; } section.aufgabe footer { display: none; } section.erklaerung { font-size: 1.1rem; } section.erklaerung h1 { font-size: 1.5rem; color: #a02060; margin-bottom: 0.3rem; } section.erklaerung ul, section.erklaerung ol { font-size: 1.0rem; line-height: 1.4; } section.erklaerung p { font-size: 1.0rem; line-height: 1.4; } section.erklaerung table { font-size: 0.9rem; } </style>

Kapitel 2

Netzwerke, Protokolle & CSS

---

Sub-Sektion A: Netzwerk

Wie reisen Pakete?

---

Drei Adressen — IP · MAC · Port

Adresse	Identifiziert	Beispiel
IP	das Endgerät (welt-eindeutig)	192.168.1.42 (v4) · 2001:db8::1 (v6)
MAC	die Netzwerk-Karte (lokal eindeutig)	00:1A:2B:3C:4D:5E (6 Byte hex)
Port	das Programm auf dem Gerät	80 (HTTP) · 443 (HTTPS) · 22 (SSH)

Drei Schichten, drei Fragen. „Welcher Computer?" → IP. „Welches Kabel/WLAN?" → MAC. „Welches Programm?" → Port.

---

---

---

TCP/IP-Schichtenmodell

---

Warum Schichten?

Komplexes Problem „Daten von A nach B" in kleine Aufgaben zerlegt:

• Welche elektrischen Signale auf dem Kabel? (Schicht 1)
• Wie ist das Paket adressiert? (Schicht 2)
• Wie kommt das Paket über mehrere Hops? (Schicht 3)
• Wie ist die Verbindung zuverlässig? (Schicht 4)
• Welche Anwendung benutzt das? (Schicht 5)

Jede Schicht ignoriert, was die anderen tun. Modularer, austauschbarer, debugbarer.

---

TCP/IP · 4 Schichten

#	Schicht	Aufgabe	Beispiel-Protokolle	Dateneinheit
1	Network Access	Bits auf Kabel/WLAN	Ethernet · WiFi	Frame
2	Internet	Routing über mehrere Hops	IP · ICMP	Packet
3	Transport	Verbindung + Zuverlässigkeit	TCP · UDP	Segment
4	Application	Anwendungs-Logik	HTTP · DNS · SMTP	Data

Schichten von unten nach oben. Jede höhere Schicht nutzt die darunter.

---

---

Encapsulation — Datenüberbringung

[Application Data]
        ↓ + TCP-Header
[Segment]
        ↓ + IP-Header
[Packet]
        ↓ + Ethernet-Header + Trailer
[Frame]
        ↓ als Bits auf das Kabel/WLAN

Beim Empfänger: umgekehrte Reihenfolge.

---

OSI vs TCP/IP

OSI (7 Schichten)	TCP/IP (4 Schichten)
7 Application	Application
6 Presentation	(in App-Schicht)
5 Session	(in App-Schicht)
4 Transport	Transport
3 Network	Internet
2 Data Link	Network Access
1 Physical	(in Network Access)

OSI: theoretisches Lehrbuch-Modell (ISO, 1984). TCP/IP: das Modell, das in der Praxis verwendet wird.

---

DNS — die Adress-Auskunft

---

---

---

HTTP — die Sprache des Webs

---

HTTP-Request — was geschickt wird

GET /index.html HTTP/1.1
Host: librete.ch
User-Agent: Mozilla/5.0 (Macintosh; …)
Accept: text/html,application/xhtml+xml
Accept-Language: de-DE,en-US;q=0.9
Connection: keep-alive

Bestandteil	Was
GET	Method — was tun wir
/index.html	Path — was wollen wir
HTTP/1.1	Version
Host: …	Header (mehrere möglich)

---

HTTP-Response — was zurückkommt

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1234
Cache-Control: max-age=3600
Server: nginx/1.24

<!DOCTYPE html>
<html>...

Bestandteil	Was
200 OK	Statuscode + Message
Content-Type: …	Header mit Meta-Information
(leere Zeile)	trennt Header von Body
<!DOCTYPE …	Body (eigentlicher Inhalt)

---

Statuscodes — die wichtigsten

Code	Name	Bedeutung
200	OK	alles gut, hier dein Inhalt
301	Moved Permanently	Seite ist umgezogen, hier neue URL
302	Found	temporäre Weiterleitung
400	Bad Request	deine Anfrage war kaputt
401	Unauthorized	du musst dich einloggen
403	Forbidden	eingeloggt aber nicht berechtigt
404	Not Found	gibt's nicht
500	Internal Server Error	Server hat Bug
503	Service Unavailable	Server überlastet / down

---

HTTP/1.1 → HTTP/2 → HTTP/3

Version	Jahr	Hauptverbesserung
HTTP/1.0	1996	erste Spec
HTTP/1.1	1997	persistent connections (1 TCP für viele Requests)
HTTP/2	2015	multiplexing (parallele Streams im selben TCP) + Header-Komprimierung
HTTP/3	2022	basiert auf QUIC (UDP statt TCP), schnellere Handshakes

Heute: HTTP/2 dominant. HTTP/3 wächst stark, besonders bei Google, Cloudflare.

---

---

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

---

---

Sub-Sektion B: CSS + A11y

Wie wird HTML hübsch + barrierefrei?

---

---

CSS-Selektoren

Selektor	Was
p	alle <p>-Elemente
.btn	alle Elemente mit class="btn"
#header	das Element mit id="header" (nur EINS pro Seite)
*	alle Elemente
button:hover	Button beim Hover
button:focus	Button mit Tastatur-Fokus
input:disabled	deaktivierte Inputs
nav > a	alle <a> direkt unter <nav>
h1 + p	erstes <p> direkt nach einem <h1>

---

---

Spezifizität — wer gewinnt?

Wenn mehrere CSS-Regeln auf das gleiche Element zutreffen: die spezifischste gewinnt.

Selektor-Typ	Spezifizität
Inline style="..."	1000
ID #header	100
Klasse .btn, Attribut [type=text], Pseudo :hover	10
Element p, Pseudo-Element ::before	1
*	0

Bei Gleichstand: letzte Regel im CSS gewinnt.

---

---

Box-Model

+------------------------+
|        margin          |
|  +------------------+  |
|  |     border       |  |
|  | +--------------+ |  |
|  | |   padding    | |  |
|  | | +----------+ | |  |
|  | | | content  | | |  |
|  | | +----------+ | |  |
|  | +--------------+ |  |
|  +------------------+  |
+------------------------+

box-sizing: border-box; ist Best Practice — width inkludiert dann Padding + Border.

---

Display: block · inline · flex · grid

Display	Was
block	nimmt die volle Breite, untereinander
inline	nur so breit wie nötig, nebeneinander
inline-block	nebeneinander, aber width/height respektieren
flex	1D-Layout (Reihe oder Spalte)
grid	2D-Layout (Raster)
none	nicht angezeigt

Flex und Grid sind die modernen Layout-Werkzeuge.

---

Flexbox vs Grid

	Flexbox	Grid
Dimensions	1D (Reihe ODER Spalte)	2D (Reihe UND Spalte)
Geeignet für	Navigation, Karten-Liste, Button-Gruppe	Seiten-Layout, komplexe Raster
Container-CSS	display: flex	display: grid
Reihen-Richtung	flex-direction	grid-template-rows
Spalten-Richtung	(durch flex-direction)	grid-template-columns

Faustregel: Brauchst du nur eine Richtung? Flex. Beide? Grid.

---

---

Barrierefreiheit — Pflicht seit 28.06.2025

---

BFSG + EAA — was kommt am 28.06.2025?

Barrierefreiheitsstärkungsgesetz (BFSG) — DE-Gesetz, setzt European Accessibility Act (EAA) um.

Pflicht für:

• Online-Shops, Buchungssysteme
• Banken, Versicherungen
• E-Books, E-Reader
• Smartphone-Apps mit kommerziellem Bezug

Ausnahmen: Unternehmen < 10 Mitarbeiter + < 2 Mio € Umsatz.

Verstöße: bis 100 000 € Bußgeld + Klagerecht durch Behindertenverbände.

---

WCAG · 4 Prinzipien (POUR)

Prinzip	Bedeutung	Beispiel
Perceivable	wahrnehmbar	Alt-Text für Bilder, Untertitel für Video
Operable	bedienbar	Keyboard-Navigation, Skip-Links
Understandable	verständlich	Lese-Niveau, klare Fehlermeldungen
Robust	robust gegenüber Tech	semantisches HTML, Standards-konform

WCAG 2.1 Level AA ist meist Mindest-Anforderung.

---

---

ARIA — nur als Ergänzung

<!-- Schlecht: div mit ARIA-Krücken -->
<div role="button" tabindex="0" onclick="...">Klick</div>

<!-- Gut: nativer Button -->
<button onclick="...">Klick</button>

<!-- ARIA OK wenn HTML nicht reicht -->
<nav aria-label="Hauptnavigation">
  <a href="...">Home</a>
</nav>

Erste Regel von ARIA: keine ARIA-Attribute verwenden, wenn das richtige HTML-Element verfügbar ist.

---

---

---

---

Selbstlernen — A11y-Audit am eigenen Projekt

1. Öffnet eine eigene Seite (oder eure HdM-Übungsseite)
2. Lighthouse in Chrome DevTools öffnen
3. Audit „Accessibility" laufen lassen
4. Schaut die Top-3-Probleme an → was bedeuten sie?

Manuell: 5. Maus weglegen — nur mit Tab durchnavigieren. Wo bleibt der Fokus stecken? 6. Zoomt im Browser auf 200% — bleibt die Seite lesbar?

---

Zusammenfassung

Netzwerk: IP-Adresse (Endgerät) + MAC (lokales Netz) + Port (Programm). 4 TCP/IP-Schichten mit Encapsulation. DNS löst Namen in IPs auf. HTTP transportiert Daten.

Browser-Synthese: URL → DNS → TCP → TLS → HTTP → HTML/CSS/JS → Pixel.

CSS: Selektoren + Spezifizität + Box-Model + Flexbox/Grid + Responsive.

A11y: BFSG/EAA ab 28.06.2025 Pflicht. WCAG POUR (Perceivable · Operable · Understandable · Robust). Semantisches HTML als Foundation, ARIA als Ergänzung.

→ In Kap 3 schauen wir an: was tun, wenn HTML+CSS da sind und nichts mehr passiert? JavaScript macht es interaktiv.