32 KiB
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 |
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
- URL parsen — Schema, Host, Port, Path extrahieren
- DNS-Lookup — Host-Name → IP-Adresse
- TCP-Handshake mit Server-IP auf Port 443
- TLS-Handshake für https (Zertifikat prüfen)
- HTTP-Request senden
- Server antwortet mit HTML, CSS, JS (als Body)
- 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
- Öffnet eine eigene Seite (oder eure HdM-Übungsseite)
- Lighthouse in Chrome DevTools öffnen
- Audit „Accessibility" laufen lassen
- 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.