uni/slides/223015c/klausurfolien.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	Grundlagen IT- und Internettechnik

<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: #1a1a2e; color: #d63384; padding: 0.15em 0.4em; border-radius: 4px; } 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; } </style>

Grundlagen IT- und Internettechnik

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

Sommersemester 2026

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

---

Von-Neumann-Architektur · 5 Komponenten

#	Komponente	Aufgabe
1	Steuerwerk (Control Unit)	holt Befehl, entscheidet was zu tun ist
2	Rechenwerk (ALU)	führt Rechnung / Vergleich aus
3	Speicher (Memory)	hält Daten und Programm
4	Eingabe / Ausgabe (I/O)	Tastatur, Bildschirm, Netzwerk
5	Bus (Verbindung)	transportiert Daten zwischen allen

Schlüssel: Speicher hält beides — Daten + Programm. (Stored Program.)

---

Internet-Timeline · 4 Milestones

Jahr	Was	Was hat es verändert
1969	ARPANET	Erstes paket-vermitteltes Netzwerk, 4 Knoten
1971	Email (Ray Tomlinson)	Erste Nutzung des @-Zeichens
1983	TCP/IP	Wurde Standard-Protokoll des ARPANET
1989	WWW (Berners-Lee, CERN)	HTML, HTTP, URL — das Web wie wir es kennen

1993: Mosaic-Browser → Internet wird populär.

---

HTML-Anatomie

<a href="https://librete.ch">Mein Link</a>

Bestandteil	Was
<a	Opening-Tag mit Tag-Namen
href="https://..."	Attribut (Name + Wert)
>	Ende des Opening-Tags
Mein Link	Inhalt des Elements
</a>	Closing-Tag

Alles zusammen = ein Element.

---

Document-Struktur: das Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Seite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hallo Welt</h1>
  <!-- alle sichtbaren Inhalte -->
</body>
</html>

---

Semantische HTML-Tags

Tag	Bedeutung	Beispiel
<header>	Kopfbereich (Logo, Nav)	oben auf der Seite
<nav>	Navigations-Menü	Hauptmenü
<main>	Hauptinhalt	das eigentliche Thema
<section>	Thematischer Abschnitt	Kapitel der Seite
<article>	eigenständiger Inhalt	Blog-Post, News-Beitrag
<aside>	Seiten-Inhalt	Sidebar, Werbung
<footer>	Fußbereich	Impressum, Copyright

Vorteil: Screen-Reader, Suchmaschinen + andere Entwickler verstehen die Struktur.

---

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 · 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.

---

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

---

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

---

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.

---

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.

---

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.