` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das? - [ ] Kein Problem – Browser ignorieren die Unterscheidung. - [ ] (1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen. - [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet. - [ ] Nur das Fehlen von `<meta charset>` ist ein Problem. --- ### F1 – `<head>` vs. `<body>`: Was passiert bei Fehler? (Lösung) **Thema:** HTML-Struktur – head/body **Punkte:** 2 **Typ:** `[MC]` Eine studierende Person platziert den `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das? - [ ] Kein Problem – Browser ignorieren die Unterscheidung. - [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.** - [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet. - [ ] Nur das Fehlen von `<meta charset>` ist ein Problem. > **Feedback:** `<head>` = Metadaten (unsichtbar für die Benutzenden, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert. --- ### F2 – `<head>`: Was gehört wohin? **Thema:** HTML-Struktur – Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört. **Element:** - `<title>` - `<meta charset="UTF-8">` - `<meta name="description">` - `<h1>Willkommen</h1>` - `<p>Text hier</p>` - `<link rel="stylesheet">` **Wohin? (ungeordnet):** - `<head>` - `<body>` - `<body>` - `<head>` - `<head>` - `<head>` --- ### F2 – `<head>`: Was gehört wohin? (Lösung) **Thema:** HTML-Struktur – Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört. | Element | Wohin? | |---|---| | `<title>` | `<head>` | | `<meta charset="UTF-8">` | `<head>` | | `<meta name="description">` | `<head>` | | `<h1>Willkommen</h1>` | `<body>` | | `<p>Text hier</p>` | `<body>` | | `<link rel="stylesheet">` | `<head>` | > **Feedback:** `<head>` = alles, was die Benutzenden nicht direkt sehen (Metadaten, Styles, Titel). `<body>` = alles, was im Browser-Fenster angezeigt wird. --- ### F4 – Umschließende vs. selbst-schließende Tags **Thema:** HTML-Anatomie – Tag-Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedes HTML-Element seinem Tag-Typ zu. **Element:** - `<a>` - `<body>` - `<img>` - `<input>` - `<meta>` **Tag-Typ (ungeordnet):** - Selbst-schließend (kein End-Tag) - Selbst-schließend (kein End-Tag) - Selbst-schließend (kein End-Tag) - Umschließend (Start- und End-Tag) - Umschließend (Start- und End-Tag) --- ### F4 – Umschließende vs. selbst-schließende Tags (Lösung) **Thema:** HTML-Anatomie – Tag-Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedes HTML-Element seinem Tag-Typ zu. | Element | Tag-Typ | |---|---| | `<a>` | Umschließend (Start- und End-Tag) | | `<body>` | Umschließend (Start- und End-Tag) | | `<img>` | Selbst-schließend (kein End-Tag) | | `<input>` | Selbst-schließend (kein End-Tag) | | `<meta>` | Selbst-schließend (kein End-Tag) | > **Feedback:** Umschließende Tags haben Inhalt zwischen Start und Ende (`<a>…</a>`). Selbst-schließende Tags stehen allein, weil sie keinen Inhalt umschließen (`<img>`, `<input>`, `<meta>`). ---  ## BLOCK G – CSS --- ### G6 – CSS-Farbnotationen zuordnen **Thema:** CSS Farben – Notationen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu. **Schreibweise:** - `red` - `#FF0000` - `rgb(255, 0, 0)` - `rgba(255, 0, 0, 0.5)` **Notation (ungeordnet):** - RGBA (RGB + Alpha/Transparenz) - RGB (Red Green Blue) - Hexadezimal - Farbname / Color Code --- ### G6 – CSS-Farbnotationen zuordnen (Lösung) **Thema:** CSS Farben – Notationen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu. | Schreibweise | Notation | |---|---| | `red` | Farbname / Color Code | | `#FF0000` | Hexadezimal | | `rgb(255, 0, 0)` | RGB (Red Green Blue) | | `rgba(255, 0, 0, 0.5)` | RGBA (RGB + Alpha/Transparenz) | > **Feedback:** Vier Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz). --- ### G7 – Selektoren: Der ID-Selektor **Thema:** CSS Selektoren – ID-Selektor **Punkte:** 2 **Typ:** `[MC]` Gegeben ist folgendes HTML-Element: ```html <p id="intro" class="text">Hallo Welt</p> ``` Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine ID** an? - [ ] `#intro { color: red; }` - [ ] `.intro { color: red; }` - [ ] `p { color: red; }` - [ ] `ul > li#intro { color: red; }` --- ### G7 – Selektoren: Der ID-Selektor (Lösung) **Thema:** CSS Selektoren – ID-Selektor **Punkte:** 2 **Typ:** `[MC]` Gegeben ist folgendes HTML-Element: ```html <p id="intro" class="text">Hallo Welt</p> ``` Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine ID** an? - [x] **`#intro { color: red; }`** - [ ] `.intro { color: red; }` - [ ] `p { color: red; }` - [ ] `ul > li#intro { color: red; }` > **Feedback:** Der ID-Selektor beginnt mit `#` und wählt das Element mit dem passenden `id`-Attribut; eine `id` darf pro Seite nur einmal vorkommen – er adressiert genau ein Element. Abgrenzung: `.intro` = Klassen-Selektor (die Klasse hier heißt zudem `text`), `p` = Element-Selektor (trifft alle `<p>`), `ul > li#intro` = Kind-Kombinator – trifft nur ein `<li>` mit dieser ID direkt unter einem `<ul>`, nie das gegebene `<p>`. ---  ## BLOCK H – Barrierefreiheit --- ### H1 – Wie nutzen Menschen das Web? **Thema:** Barrierefreiheit – Eingabegeräte **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu. **Eingabe:** - Maus - Tastatur - Screenreader - Sprachsteuerung - Augensteuerung - Switch-Geräte **Nutzungsweise (ungeordnet):** - Ein-/Aus-Schalter - Eye-Tracking - „Klicke auf Anmelden" - Vorlesen von Inhalten - Tab-Navigation, Enter, Pfeiltasten - Klicken, Scrollen --- ### H1 – Wie nutzen Menschen das Web? (Lösung) **Thema:** Barrierefreiheit – Eingabegeräte **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu. | Eingabe | Nutzungsweise | |---|---| | Maus | Klicken, Scrollen | | Tastatur | Tab-Navigation, Enter, Pfeiltasten | | Screenreader | Vorlesen von Inhalten | | Sprachsteuerung | „Klicke auf Anmelden" | | Augensteuerung | Eye-Tracking | | Switch-Geräte | Ein-/Aus-Schalter | > **Feedback:** Nicht alle nutzen Maus + Bildschirm. ~15% der Weltbevölkerung haben eine Behinderung (WHO). Assistive Technologien wie Screenreader (NVDA, VoiceOver, JAWS) oder Switch-Geräte ermöglichen Web-Zugang für Menschen mit verschiedenen Einschränkungen. --- ### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende? **Thema:** Barrierefreiheit – Business Case **Punkte:** 2 **Typ:** `[ESSAY]` Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops. --- ### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende? (Lösung) **Thema:** Barrierefreiheit – Business Case **Punkte:** 2 **Typ:** `[ESSAY]` Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops. > **Musterlösung (je zwei ausreichend):** Curb-Cut-Effekt = barrierefreie Gestaltung hilft allen. (1) Große Klickflächen – nötig bei motorischen Einschränkungen (z. B. Parkinson), helfen aber allen auf kleinen Screens oder mit Touchpad. (2) Guter Kontrast – nötig bei Sehschwäche, hilft aber allen bei Sonnenlicht auf dem Display. (3) Untertitel – nötig für Gehörlose, helfen allen in lauter Umgebung. (4) Tastaturbedienung (bspw. Navigation mit Tab- und Enter-Taste) – nötig bei motorischen Einschränkungen, nutzen auch Power-User (Shortcuts). Analogie: Bordsteinabsenkung für Rollstühle nutzt auch Kinderwagen und Rollkoffern. --- ### H7 – Tastatur-Test: Was prüfen? **Thema:** Barrierefreiheit – Praktischer Test **Punkte:** 2 **Typ:** `[MC]` Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie? - [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist. - [ ] Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch? - [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden. - [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`). --- ### H7 – Tastatur-Test: Was prüfen? (Lösung) **Thema:** Barrierefreiheit – Praktischer Test **Punkte:** 2 **Typ:** `[MC]` Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie? - [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist. - [x] **Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?** - [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden. - [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`). > **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab- und Enter-Taste benutzen. Wenn man so eine Funktion nicht erreichen kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.

--- marp: true theme: gaia paginate: true backgroundColor: #fff header: "" footer: "" title: "Fragenkatalog – IT-Grundlagen (223015c)" --- # Klausurfragen – 223015c **IT-Grundlagen · HdM Stuttgart · M. Czechowski** Stand: 03.07.2026 --- > **Legende – Moodle XML-Typen:** > `[MC]` = `multichoice` (einzelne Auswahl) > `[MM]` = `multichoice` + `false` (Mehrfachauswahl) > `[MATCH]` = `matching` (Zuordnung) > `[ORDER]` = `ordering` (Reihenfolge) > `[ESSAY]` = `essay` (Freitext, manuell bewertet) > `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft) > `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz) > `[CLOZE]` = `cloze` (Lückentext, gemischt)` --- ## BLOCK A – Von-Neumann-Architektur --- ### A3 – Von-Neumann: Was wird ermöglicht? **Thema:** Von-Neumann – Bedeutung **Punkte:** 2 **Typ:** `[MM]` (Mehrfachauswahl) Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglicht? (Mehrere Antworten möglich) - [ ] Betriebssysteme können verschiedene Programme aus dem Speicher laden. - [ ] Apps können ohne Hardwareänderung installiert werden. - [ ] Der Computer kann nur ein einziges Programm gleichzeitig ausführen. - [ ] Multitasking wird möglich. - [ ] Die Hardware muss für jedes neue Programm physisch umgebaut werden. - [ ] Software kann aktualisiert werden, ohne die Hardware zu ändern. --- ### A3 – Von-Neumann: Was wird ermöglicht? (Lösung) **Thema:** Von-Neumann – Bedeutung **Punkte:** 2 **Typ:** `[MM]` (Mehrfachauswahl) Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglicht? (Mehrere Antworten möglich) - [x] **Betriebssysteme können verschiedene Programme aus dem Speicher laden.** - [x] **Apps können ohne Hardwareänderung installiert werden.** - [ ] Der Computer kann nur ein einziges Programm gleichzeitig ausführen. - [x] **Multitasking wird möglich.** - [ ] Die Hardware muss für jedes neue Programm physisch umgebaut werden. - [x] **Software kann aktualisiert werden, ohne die Hardware zu ändern.** > **Feedback:** Kern der Von-Neumann-Architektur: Programme und Daten teilen denselben Speicher → Programme sind austauschbare Daten. Ohne das: kein Betriebssystem, keine Apps, kein Multitasking, keine Updates. --- ### A5 – Von-Neumann vs. Harvard-Architektur **Thema:** Von-Neumann – Abgrenzung **Punkte:** 2 **Typ:** `[MC]` Was unterscheidet die Von-Neumann-Architektur von der Harvard-Architektur? - [ ] Von-Neumann nutzt mehrere CPUs, Harvard nur eine. - [ ] Bei Von-Neumann liegen Programme und Daten im selben Speicher; die Harvard-Architektur trennt Befehls- und Datenspeicher physisch. - [ ] Die Harvard-Architektur kann keine Schleifen ausführen. - [ ] Es gibt keinen Unterschied – beide Begriffe meinen dasselbe. --- ### A5 – Von-Neumann vs. Harvard-Architektur (Lösung) **Thema:** Von-Neumann – Abgrenzung **Punkte:** 2 **Typ:** `[MC]` Was unterscheidet die Von-Neumann-Architektur von der Harvard-Architektur? - [ ] Von-Neumann nutzt mehrere CPUs, Harvard nur eine. - [x] **Bei Von-Neumann liegen Programme und Daten im selben Speicher; die Harvard-Architektur trennt Befehls- und Datenspeicher physisch.** - [ ] Die Harvard-Architektur kann keine Schleifen ausführen. - [ ] Es gibt keinen Unterschied – beide Begriffe meinen dasselbe. > **Feedback:** Kernunterschied: gemeinsamer Speicher (Von-Neumann) gegenüber getrennten Speichern für Befehle und Daten (Harvard). Der gemeinsame Speicher macht Programme zu austauschbaren Daten – die Grundlage für ladbare Software. --- ## BLOCK B – Netzwerk-Grundlagen (Client-Server & TCP/IP) --- ### B0 – Client-Server: Begriffe zuordnen **Thema:** Client-Server-Modell – Grundbegriffe **Punkte:** 3 **Typ:** `[MATCH]` Ordnen Sie jedem Begriff des Client-Server-Modells seine Beschreibung zu. **Begriff:** - Host - Client - Server - Request - Response - Protokoll **Beschreibung (ungeordnet):** - Regeln für die Kommunikation (z. B. TCP, HTTP) - Die Antwort des Servers - Die Anfrage des Clients - Host bzw. Anwendung mit der Antwort (z. B. Webserver) - Host bzw. Anwendung mit einer Anfrage (z. B. Browser) - Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in der S-Bahn) --- ### B0 – Client-Server: Begriffe zuordnen (Lösung) **Thema:** Client-Server-Modell – Grundbegriffe **Punkte:** 3 **Typ:** `[MATCH]` Ordnen Sie jedem Begriff des Client-Server-Modells seine Beschreibung zu. | Begriff | Beschreibung | |---|---| | Host | Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in der S-Bahn) | | Client | Host bzw. Anwendung mit einer Anfrage (z. B. Browser) | | Server | Host bzw. Anwendung mit der Antwort (z. B. Webserver) | | Request | Die Anfrage des Clients | | Response | Die Antwort des Servers | | Protokoll | Regeln für die Kommunikation (z. B. TCP, HTTP) | > **Feedback:** Das Web folgt dem Client-Server-Modell: Ein Client sendet einen Request, ein Server liefert eine Response – nach den Regeln eines Protokolls. Host = der Rechner, Client/Server = die Rollen, die er dabei einnimmt. --- ### B0a – Was ist das Client-Server-Modell? **Thema:** Client-Server-Modell – Grundprinzip **Punkte:** 1 **Typ:** `[MC]` Ein Browser fordert eine Webseite an, ein Webserver liefert sie aus. Wie heißt dieses Grundmodell des Web? - [ ] Client-Server-Modell: Ein Client stellt eine Anfrage (Request), ein Server antwortet (Response). - [ ] Peer-to-Peer-Modell: Alle Geräte sind gleichberechtigt und tauschen direkt Daten aus. - [ ] Broadcast-Modell: Ein Server sendet ununterbrochen an alle Geräte im Netz. - [ ] Master-Slave-Modell: Der Browser steuert den Server fern. --- ### B0a – Was ist das Client-Server-Modell? (Lösung) **Thema:** Client-Server-Modell – Grundprinzip **Punkte:** 1 **Typ:** `[MC]` Ein Browser fordert eine Webseite an, ein Webserver liefert sie aus. Wie heißt dieses Grundmodell des Web? - [x] **Client-Server-Modell: Ein Client stellt eine Anfrage (Request), ein Server antwortet (Response).** - [ ] Peer-to-Peer-Modell: Alle Geräte sind gleichberechtigt und tauschen direkt Daten aus. - [ ] Broadcast-Modell: Ein Server sendet ununterbrochen an alle Geräte im Netz. - [ ] Master-Slave-Modell: Der Browser steuert den Server fern. > **Feedback:** Im Client-Server-Modell hat jede Seite eine feste Rolle: Der Client fragt an (Request), der Server antwortet (Response). Derselbe Host kann je nach Situation Client oder Server sein. --- ### B0b – Client-Server: Lückentext **Thema:** Client-Server-Modell – Terminologie **Punkte:** 2 **Typ:** `[CLOZE]` Das Web folgt dem Client-Server-Modell: Ein [___] sendet einen [___], ein [___] liefert eine [___] – nach den Regeln eines [___] (z. B. HTTP). --- ### B0b – Client-Server: Lückentext (Lösung) **Thema:** Client-Server-Modell – Terminologie **Punkte:** 2 **Typ:** `[CLOZE]` Das Web folgt dem Client-Server-Modell: Ein [[1:Client]] sendet einen [[2:Request]], ein [[3:Server]] liefert eine [[4:Response]] – nach den Regeln eines [[5:Protokolls]] (z. B. HTTP). > **Feedback:** Client = fragt an, Server = antwortet, Request = Anfrage, Response = Antwort, Protokoll = die Regeln, nach denen beide kommunizieren. --- ### B4 – Was ist eine MAC-Adresse? **Thema:** MAC-Adresse – Konzept **Punkte:** 1 **Typ:** `[MC]` Was identifiziert eine MAC-Adresse? - [ ] Den konkreten Dienst (z. B. Webserver) auf einem Computer. - [ ] Den Computer im globalen Internet über Netzwerkgrenzen hinweg. - [ ] Die Netzwerkkarte eines Geräts auf einem lokalen Netzwerksegment. - [ ] Die Routen, die ein Paket durch das Internet nimmt. --- ### B4 – Was ist eine MAC-Adresse? (Lösung) **Thema:** MAC-Adresse – Konzept **Punkte:** 1 **Typ:** `[MC]` Was identifiziert eine MAC-Adresse? - [ ] Den konkreten Dienst (z. B. Webserver) auf einem Computer. - [ ] Den Computer im globalen Internet über Netzwerkgrenzen hinweg. - [x] **Die Netzwerkkarte eines Geräts auf einem lokalen Netzwerksegment.** - [ ] Die Routen, die ein Paket durch das Internet nimmt. > **Feedback:** MAC = Media Access Control. Sie ist eine 48-Bit-Adresse, die einer Netzwerkkarte ab Werk zugewiesen wird – lokal, ein Hop. --- ### B5 – Was ist eine IP-Adresse? **Thema:** IP-Adresse – Konzept **Punkte:** 1 **Typ:** `[MC]` Was identifiziert eine IP-Adresse? - [ ] Die Netzwerkkarte eines Geräts auf einem lokalen Segment. - [ ] Ein Gerät (Host) im globalen Internet – sie ermöglicht das Routing über Netzwerkgrenzen. - [ ] Den Dienst, der auf einem bestimmten Port läuft. - [ ] Die physische Leitung zwischen zwei Computern. --- ### B5 – Was ist eine IP-Adresse? (Lösung) **Thema:** IP-Adresse – Konzept **Punkte:** 1 **Typ:** `[MC]` Was identifiziert eine IP-Adresse? - [ ] Die Netzwerkkarte eines Geräts auf einem lokalen Segment. - [x] **Ein Gerät (Host) im globalen Internet – sie ermöglicht das Routing über Netzwerkgrenzen.** - [ ] Den Dienst, der auf einem bestimmten Port läuft. - [ ] Die physische Leitung zwischen zwei Computern. > **Feedback:** IP = Internet Protocol. Die IP-Adresse ist der globale „Hausnummer" eines Geräts – routing-tauglich, im Gegensatz zur lokalen MAC-Adresse. --- ### B6 – Was ist eine Port-Nummer? **Thema:** Port – Konzept **Punkte:** 1 **Typ:** `[MC]` Wozu dient eine Port-Nummer auf dem Zielrechner? - [ ] Sie bestimmt die Geschwindigkeit der Verbindung. - [ ] Sie identifiziert das Gerät im Netzwerk. - [ ] Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver auf 80, HTTPS auf 443). - [ ] Sie zeigt an, ob das Gerät per WLAN oder Kabel verbunden ist. --- ### B6 – Was ist eine Port-Nummer? (Lösung) **Thema:** Port – Konzept **Punkte:** 1 **Typ:** `[MC]` Wozu dient eine Port-Nummer auf dem Zielrechner? - [ ] Sie bestimmt die Geschwindigkeit der Verbindung. - [ ] Sie identifiziert das Gerät im Netzwerk. - [x] **Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver auf 80, HTTPS auf 443).** - [ ] Sie zeigt an, ob das Gerät per WLAN oder Kabel verbunden ist. > **Feedback:** IP = „Welches Gebäude?", Port = „Welche Tür im Gebäude?" (welcher Dienst soll die Anfrage empfangen). --- ### B7 – IP, MAC, Port: Zuordnung **Thema:** Adressierung – Unterschiede auf einen Blick **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder Adresse ihre Beschreibung zu. **Adresse:** - IP-Adresse - MAC-Adresse - Port-Nummer **Beschreibung (ungeordnet):** - Adressiert einen bestimmten Dienst auf einem Computer - Lokale Adresse einer Netzwerkkarte – nur innerhalb eines Segments gültig - Globale Adresse eines Geräts – ermöglicht Routing über Netzwerkgrenzen --- ### B7 – IP, MAC, Port: Zuordnung (Lösung) **Thema:** Adressierung – Unterschiede auf einen Blick **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder Adresse ihre Beschreibung zu. | Adresse | Beschreibung | |---|---| | IP-Adresse | Globale Adresse eines Geräts – ermöglicht Routing über Netzwerkgrenzen | | MAC-Adresse | Lokale Adresse einer Netzwerkkarte – nur innerhalb eines Segments gültig | | Port-Nummer | Adressiert einen bestimmten Dienst auf einem Computer | > **Feedback:** Drei Ebenen der Adressierung: Gerät global (IP), Gerät lokal (MAC), Dienst auf dem Gerät (Port). --- ### B7a – IP, MAC, Port: Drei Ebenen erklären **Thema:** Adressierung – Transfer **Punkte:** 3 **Typ:** `[ESSAY]` Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und **Port-Nummer**. Beschreiben Sie für jede: (1) was sie identifiziert, (2) auf welcher Ebene sie gilt (lokal/global), (3) eine Analogie aus dem Alltag. --- ### B7a – IP, MAC, Port: Drei Ebenen erklären (Lösung) **Thema:** Adressierung – Transfer **Punkte:** 3 **Typ:** `[ESSAY]` Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und **Port-Nummer**. Beschreiben Sie für jede: (1) was sie identifiziert, (2) auf welcher Ebene sie gilt (lokal/global), (3) eine Analogie aus dem Alltag. > **Musterlösung:** **IP-Adresse:** Identifiziert ein Gerät im Internet. Global gültig, ermöglicht Routing über Netzwerkgrenzen. Analogie: „Postanschrift eines Hauses". **MAC-Adresse:** Identifiziert eine Netzwerkkarte. Nur lokal gültig (ein Hop). Analogie: „Seriennummer des Briefkastens". **Port-Nummer:** Identifiziert einen Dienst auf dem Gerät. Analogie: „Türnummer in einem Mehrfamilienhaus" – IP sagt welches Haus, Port sagt welche Wohnung. --- ### B7b – Adressen & Identitäten: Begriffe zuordnen **Thema:** Adressierung – Glossar (IP, MAC, Port, DNS, Domain) **Punkte:** 3 **Typ:** `[MATCH]` Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu. **Begriff:** - IP-Adresse - MAC-Adresse - Port - DNS - Domain - Host **Was ist das? / Beispiel (ungeordnet):** - Ein netzwerkfähiger Rechner (Laptop, Smartphone) - Menschenlesbarer Name – z. B. `hdm-stuttgart.de` - „Telefonbuch": übersetzt eine Domain in eine IP - Nummer eines Programms bzw. Dienstes – z. B. `80`, `443`, `22` - Hardware-Adresse der Netzwerkkarte – z. B. `aa:bb:cc:dd:ee:ff` - Globale Adresse im Internet – z. B. `212.132.79.37` --- ### B7b – Adressen & Identitäten: Begriffe zuordnen (Lösung) **Thema:** Adressierung – Glossar (IP, MAC, Port, DNS, Domain) **Punkte:** 3 **Typ:** `[MATCH]` Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu. | Begriff | Was ist das? / Beispiel | |---|---| | IP-Adresse | Globale Adresse im Internet – z. B. `212.132.79.37` | | MAC-Adresse | Hardware-Adresse der Netzwerkkarte – z. B. `aa:bb:cc:dd:ee:ff` | | Port | Nummer eines Programms bzw. Dienstes – z. B. `80`, `443`, `22` | | DNS | „Telefonbuch": übersetzt eine Domain in eine IP | | Domain | Menschenlesbarer Name – z. B. `hdm-stuttgart.de` | | Host | Ein netzwerkfähiger Rechner (Laptop, Smartphone) | > **Feedback:** IP = global, MAC = lokal (Hardware), Port = Programm auf dem Host, DNS = Domain→IP, Domain = der lesbare Name, Host = der Rechner selbst. --- ### B5a – IP-Adresse: Beispiel erkennen **Thema:** IP-Adresse – Format/Beispiel **Punkte:** 1 **Typ:** `[MC]` Welche der folgenden Angaben ist eine IP-Adresse (IPv4)? - [ ] `212.132.79.37` - [ ] `aa:bb:cc:dd:ee:ff` - [ ] `hdm-stuttgart.de` - [ ] `443` --- ### B5a – IP-Adresse: Beispiel erkennen (Lösung) **Thema:** IP-Adresse – Format/Beispiel **Punkte:** 1 **Typ:** `[MC]` Welche der folgenden Angaben ist eine IP-Adresse (IPv4)? - [x] **`212.132.79.37`** - [ ] `aa:bb:cc:dd:ee:ff` - [ ] `hdm-stuttgart.de` - [ ] `443` > **Feedback:** IPv4 = vier durch Punkte getrennte Zahlen (0–255). `aa:bb:cc:dd:ee:ff` ist eine MAC, `hdm-stuttgart.de` eine Domain, `443` ein Port. --- ### B4a – MAC-Adresse: Eigenschaften **Thema:** MAC-Adresse – Format/Eigenschaften **Punkte:** 1 **Typ:** `[MC]` Welche Aussage über die MAC-Adresse `aa:bb:cc:dd:ee:ff` ist korrekt? - [ ] Sie ist die Hardware-Adresse der Netzwerkkarte, ab Werk vergeben und nur im lokalen Netz relevant. - [ ] Sie wird vom Internet-Provider zugewiesen und ermöglicht globales Routing. - [ ] Sie identifiziert ein bestimmtes Programm auf dem Rechner. - [ ] Sie ändert sich, sobald der Rechner eine neue Webseite aufruft. --- ### B4a – MAC-Adresse: Eigenschaften (Lösung) **Thema:** MAC-Adresse – Format/Eigenschaften **Punkte:** 1 **Typ:** `[MC]` Welche Aussage über die MAC-Adresse `aa:bb:cc:dd:ee:ff` ist korrekt? - [x] **Sie ist die Hardware-Adresse der Netzwerkkarte, ab Werk vergeben und nur im lokalen Netz relevant.** - [ ] Sie wird vom Internet-Provider zugewiesen und ermöglicht globales Routing. - [ ] Sie identifiziert ein bestimmtes Programm auf dem Rechner. - [ ] Sie ändert sich, sobald der Rechner eine neue Webseite aufruft. > **Feedback:** MAC = Media Access Control. 48 Bit, in Hex notiert (`aa:bb:cc:dd:ee:ff`), ab Werk in die Netzwerkkarte eingebrannt, nur lokal (ein Hop) gültig. Globales Routing macht die IP, das Programm adressiert der Port. --- ### B6a – Port: Well-Known Ports zuordnen **Thema:** Port – bekannte Portnummern **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder Portnummer den passenden Dienst zu. **Port:** - 80 - 443 - 22 - 53 **Dienst (ungeordnet):** - DNS (Namensauflösung) - SSH (verschlüsselte Fernwartung) - HTTPS (Web, verschlüsselt) - HTTP (Web, unverschlüsselt) --- ### B6a – Port: Well-Known Ports zuordnen (Lösung) **Thema:** Port – bekannte Portnummern **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder Portnummer den passenden Dienst zu. | Port | Dienst | |---|---| | 80 | HTTP (Web, unverschlüsselt) | | 443 | HTTPS (Web, verschlüsselt) | | 22 | SSH (verschlüsselte Fernwartung) | | 53 | DNS (Namensauflösung) | > **Feedback:** Well-Known Ports (0–1023) sind festen Diensten zugeordnet. 80 = HTTP, 443 = HTTPS, 22 = SSH, 53 = DNS. Der Port sagt dem Host, welches Programm die Anfrage bekommt. --- ### B10 – Encapsulation: Reihenfolge sortieren **Thema:** Encapsulation – Reihenfolge **Punkte:** 2 **Typ:** `[ORDER]` Sortieren Sie die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (von innen nach außen): 1. Daten 2. Segment 3. Paket 4. Frame > **Feedback:** Zwiebelprinzip: Die Anwendung erzeugt Daten → Transport verpackt zu einem Segment → Internet zu einem Paket → Netzzugang zum Frame. --- ## BLOCK C – HTTP --- ### C1 – HTTP-Methoden: Zuordnung **Thema:** HTTP-Methoden – Was macht was **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder HTTP-Methode ihre Hauptfunktion zu. **Methode:** - GET - POST - PUT - DELETE **Hauptfunktion (ungeordnet):** - Löscht eine Ressource auf dem Server - Ersetzt eine existierende Ressource vollständig - Erstellt eine neue Ressource auf dem Server - Ruft eine Ressource ab (nur lesen) --- ### C1 – HTTP-Methoden: Zuordnung (Lösung) **Thema:** HTTP-Methoden – Was macht was **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder HTTP-Methode ihre Hauptfunktion zu. | Methode | Hauptfunktion | |---|---| | GET | Ruft eine Ressource ab (nur lesen) | | POST | Erstellt eine neue Ressource auf dem Server | | PUT | Ersetzt eine existierende Ressource vollständig | | DELETE | Löscht eine Ressource auf dem Server | > **Feedback:** CRUD-Mapping: GET=Read, POST=Create, PUT=Update, DELETE=Delete. --- ### C2 – POST vs. PUT: Unterschied **Thema:** HTTP-Methoden – POST vs. PUT **Punkte:** 1 **Typ:** `[MC]` Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet? - [ ] POST – eine neue Ressource wird erstellt. - [ ] PUT – PUT wird immer verwendet, wenn Daten gesendet werden. - [ ] GET – GET kann auch Daten senden mit URL-Parametern. - [ ] DELETE – DELETE erstellt und löscht gleichzeitig. --- ### C2 – POST vs. PUT: Unterschied (Lösung) **Thema:** HTTP-Methoden – POST vs. PUT **Punkte:** 1 **Typ:** `[MC]` Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet? - [x] **POST – eine neue Ressource wird erstellt.** - [ ] PUT – PUT wird immer verwendet, wenn Daten gesendet werden. - [ ] GET – GET kann auch Daten senden mit URL-Parametern. - [ ] DELETE – DELETE erstellt und löscht gleichzeitig. > **Feedback:** POST = „Erstelle etwas Neues". PUT = „Ersetze etwas Bestehendes". Neuer Blog-Eintrag → POST. --- ### C3 – PUT: Profilbild ersetzen **Thema:** HTTP-Methoden – PUT im Szenario **Punkte:** 1 **Typ:** `[MC]` Eine Person aktualisiert ihr Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode? - [ ] GET – GET kann auch Daten senden. - [ ] PUT – ersetzt eine existierende Ressource. - [ ] POST – POST ist immer für das Ersetzen zuständig. - [ ] DELETE – DELETE sendet das neue Foto und löscht das alte. --- ### C3 – PUT: Profilbild ersetzen (Lösung) **Thema:** HTTP-Methoden – PUT im Szenario **Punkte:** 1 **Typ:** `[MC]` Eine Person aktualisiert ihr Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode? - [ ] GET – GET kann auch Daten senden. - [x] **PUT – ersetzt eine existierende Ressource.** - [ ] POST – POST ist immer für das Ersetzen zuständig. - [ ] DELETE – DELETE sendet das neue Foto und löscht das alte. > **Feedback:** „Ersetzen einer existierenden Ressource" = PUT. POST wäre, wenn ein völlig neues Bild erstellt würde, ohne dass ein vorhandenes überschrieben wird. --- ### C4 – DELETE: Wann nutzen? **Thema:** HTTP-Methoden – DELETE im Szenario **Punkte:** 1 **Typ:** `[MC]` Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden? - [ ] GET – GET kann auch Löschvorgänge auslösen. - [ ] POST – POST ist die Standardmethode für alle Änderungen. - [ ] PUT – PUT löscht und ersetzt gleichzeitig. - [ ] DELETE – der Kommentar wird vom Server entfernt. --- ### C4 – DELETE: Wann nutzen? (Lösung) **Thema:** HTTP-Methoden – DELETE im Szenario **Punkte:** 1 **Typ:** `[MC]` Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden? - [ ] GET – GET kann auch Löschvorgänge auslösen. - [ ] POST – POST ist die Standardmethode für alle Änderungen. - [ ] PUT – PUT löscht und ersetzt gleichzeitig. - [x] **DELETE – der Kommentar wird vom Server entfernt.** > **Feedback:** DELETE = „Entferne diese Ressource vom Server." Konkret: der Kommentar wird anhand seiner URL/ID identifiziert und gelöscht. --- ### C6 – Status-Codes: Kategorisierung **Thema:** HTTP Status-Codes – Bedeutung der ersten Ziffer **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu. **Erste Ziffer:** - 2xx - 3xx - 4xx - 5xx **Bedeutung (ungeordnet):** - Server-Fehler – der Server hat ein Problem - Client-Fehler – die Anfrage der Anfragenden war fehlerhaft - Weiterleitung – die Ressource wurde verschoben - Erfolg – die Anfrage wurde erfolgreich verarbeitet --- ### C6 – Status-Codes: Kategorisierung (Lösung) **Thema:** HTTP Status-Codes – Bedeutung der ersten Ziffer **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu. | Erste Ziffer | Bedeutung | |---|---| | 2xx | Erfolg – die Anfrage wurde erfolgreich verarbeitet | | 3xx | Weiterleitung – die Ressource wurde verschoben | | 4xx | Client-Fehler – die Anfrage der Anfragenden war fehlerhaft | | 5xx | Server-Fehler – der Server hat ein Problem | > **Feedback:** Die erste Ziffer = Kategorie. 200 OK, 301 Moved, 404 Not Found, 503 Service Unavailable – die Kategorie sagt Ihnen sofort, wo das Problem liegt. --- ### C7 – 503: Server-Fehler erkläre **Thema:** HTTP Status-Codes – 5xx Transfer **Punkte:** 1 **Typ:** `[MC]` Sie rufen eine Webseite auf und erhalten `HTTP/2 503 Service Unavailable`. Was bedeutet das? - [ ] Sie haben die falsche URL eingegeben. - [ ] Der Server hat die Anfrage erfolgreich umgeleitet. - [ ] Der Server ist überlastet oder temporär nicht verfügbar – Verantwortung liegt beim Betreiber. - [ ] Der Server hat die Seite dauerhaft verschoben. --- ### C7 – 503: Server-Fehler erkläre (Lösung) **Thema:** HTTP Status-Codes – 5xx Transfer **Punkte:** 1 **Typ:** `[MC]` Sie rufen eine Webseite auf und erhalten `HTTP/2 503 Service Unavailable`. Was bedeutet das? - [ ] Sie haben die falsche URL eingegeben. - [ ] Der Server hat die Anfrage erfolgreich umgeleitet. - [x] **Der Server ist überlastet oder temporär nicht verfügbar – Verantwortung liegt beim Betreiber.** - [ ] Der Server hat die Seite dauerhaft verschoben. > **Feedback:** 5xx = Server-Problem. Sie als Client können nur später erneut versuchen. Der Betreiber muss das lösen. --- ### C8 – 404: Wer hat „Schuld"? **Thema:** HTTP Status-Codes – 4xx Transfer **Punkte:** 1 **Typ:** `[MC]` Sie erhalten einen 404-Fehler. Wer ist für die Ursache verantwortlich? - [ ] Der Server ist abgestürzt. - [ ] Das Internet ist ausgefallen. - [ ] Der Client (Anfragende) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link). - [ ] Der DNS-Server konnte den Namen nicht auflösen. --- ### C8 – 404: Wer hat „Schuld"? (Lösung) **Thema:** HTTP Status-Codes – 4xx Transfer **Punkte:** 1 **Typ:** `[MC]` Sie erhalten einen 404-Fehler. Wer ist für die Ursache verantwortlich? - [ ] Der Server ist abgestürzt. - [ ] Das Internet ist ausgefallen. - [x] **Der Client (Anfragende) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).** - [ ] Der DNS-Server konnte den Namen nicht auflösen. > **Feedback:** 4xx = Client-Fehler. Der Server funktioniert perfekt, er sagt nur: „Das, was Sie anfragen, habe ich nicht." --- ### C9 – Status-Codes: Szenarios zuordnen **Thema:** HTTP Status-Codes – Transfer Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Szenario den passenden HTTP-Status-Code zu. **Szenario:** - Sie rufen eine Seite auf, die seit letztem Jahr auf eine neue URL umgeleitet wurde - Eine Webseite lädt erfolgreich - Sie geben eine URL ein, die nicht existiert - Der Webserver ist überlastet **Status-Code (ungeordnet):** - 503 Service Unavailable - 404 Not Found - 200 OK - 301 Moved Permanently --- ### C9 – Status-Codes: Szenarios zuordnen (Lösung) **Thema:** HTTP Status-Codes – Transfer Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Szenario den passenden HTTP-Status-Code zu. | Szenario | Status-Code | |---|---| | Sie rufen eine Seite auf, die seit letztem Jahr auf eine neue URL umgeleitet wurde | 301 Moved Permanently | | Eine Webseite lädt erfolgreich | 200 OK | | Sie geben eine URL ein, die nicht existiert | 404 Not Found | | Der Webserver ist überlastet | 503 Service Unavailable | > **Feedback:** 200 = Alles gut. 301 = dauerhaft verschoben. 404 = nicht gefunden (Ihr Fehler). 503 = Server-Problem (Betreiber). --- ### C9a – Status-Codes: 2xx, 4xx, 5xx vergleichen **Thema:** HTTP Status-Codes – Kategorien erklären **Punkte:** 3 **Typ:** `[ESSAY]` Erklären Sie die drei HTTP-Status-Code-Kategorien **2xx**, **4xx** und **5xx**. Beschreiben Sie für jede: (1) was sie bedeutet, (2) wer „schuld" ist (Client oder Server), (3) ein konkretes Beispiel mit Szenario. --- ### C9a – Status-Codes: 2xx, 4xx, 5xx vergleichen (Lösung) **Thema:** HTTP Status-Codes – Kategorien erklären **Punkte:** 3 **Typ:** `[ESSAY]` Erklären Sie die drei HTTP-Status-Code-Kategorien **2xx**, **4xx** und **5xx**. Beschreiben Sie für jede: (1) was sie bedeutet, (2) wer „schuld" ist (Client oder Server), (3) ein konkretes Beispiel mit Szenario. > **Musterlösung:** **2xx (Erfolg):** Die Anfrage wurde erfolgreich verarbeitet. Niemand ist „schuld" – alles funktioniert. Beispiel: 200 OK – die Webseite wurde korrekt geladen. **4xx (Client-Fehler):** Die Anfrage war fehlerhaft. Der Client ist verantwortlich. Beispiel: 404 Not Found – Nutzende haben eine URL eingetippt, die nicht existiert. **5xx (Server-Fehler):** Der Server hat ein Problem. Der Betreiber ist verantwortlich. Beispiel: 503 Service Unavailable – der Server ist überlastet oder in Wartung. --- ## BLOCK D – DNS --- ### D1 – DNS: Was macht es? **Thema:** DNS – Grundfunktion **Punkte:** 1 **Typ:** `[MC]` Was ist die Hauptfunktion eines DNS-Servers? - [ ] Er verschlüsselt die Verbindung zwischen Client und Server. - [ ] Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse. - [ ] Er routet Pakete durch das Internet. - [ ] Er weist jedem Computer eine MAC-Adresse zu. --- ### D1 – DNS: Was macht es? (Lösung) **Thema:** DNS – Grundfunktion **Punkte:** 1 **Typ:** `[MC]` Was ist die Hauptfunktion eines DNS-Servers? - [ ] Er verschlüsselt die Verbindung zwischen Client und Server. - [x] **Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.** - [ ] Er routet Pakete durch das Internet. - [ ] Er weist jedem Computer eine MAC-Adresse zu. > **Feedback:** DNS = Domain Name System = „Telefonbuch des Internets". Name → IP. Ohne DNS müsste man überall IP-Adressen eintippen. --- ### D2 – DNS: Zeitlicher Ablauf **Thema:** DNS – Rolle im Gesamtablauf **Punkte:** 1 **Typ:** `[MC]` Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor** dem TCP-Handshake? - [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach benötigt. - [ ] DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen. - [ ] DNS passiert nach dem TCP-Handshake. - [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden. --- ### D2 – DNS: Zeitlicher Ablauf (Lösung) **Thema:** DNS – Rolle im Gesamtablauf **Punkte:** 1 **Typ:** `[MC]` Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor** dem TCP-Handshake? - [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach benötigt. - [x] **DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.** - [ ] DNS passiert nach dem TCP-Handshake. - [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden. > **Feedback:** DNS vor TCP. Kein Name-to-IP? Kein Handshake möglich. TCP arbeitet auf IP-Adressen, nicht auf Domain-Namen. --- ## BLOCK E – Der Gesamtablauf (Zusammen) --- ### E3 – Gesamtablauf: DNS, TCP, HTTP erklären **Thema:** Gesamtablauf – Schritte erklären **Punkte:** 3 **Typ:** `[ESSAY]` Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung**, **TCP-Verbindungsaufbau** und **HTTP-Request/Response**. Beschreiben Sie für jede Phase: (1) was passiert, (2) warum sie vor der nächsten kommen muss. > **Musterlösung:** **DNS-Auflösung:** Der Domain-Name wird in eine IP-Adresse übersetzt. Muss zuerst kommen, weil TCP nur mit IP-Adressen arbeiten kann. **TCP-Verbindungsaufbau:** Der 3-Way-Handshake (SYN → SYN-ACK → ACK) baut eine zuverlässige Verbindung auf. Muss vor HTTP kommen, weil HTTP auf TCP aufsetzt und eine bestehende Verbindung braucht. **HTTP-Request/Response:** Der Browser sendet GET, der Server antwortet mit 200 OK + HTML. Kann erst nach TCP-Verbindung stattfinden. --- ## BLOCK F – HTML-Grundlagen --- ### F1 – `` vs. ``: Was passiert bei Fehler? **Thema:** HTML-Struktur – head/body **Punkte:** 2 **Typ:** `[MC]` Eine studierende Person platziert den `` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das? - [ ] Kein Problem – Browser ignorieren die Unterscheidung. - [ ] (1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen. - [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet. - [ ] Nur das Fehlen von `<meta charset>` ist ein Problem. --- ### F1 – `<head>` vs. `<body>`: Was passiert bei Fehler? (Lösung) **Thema:** HTML-Struktur – head/body **Punkte:** 2 **Typ:** `[MC]` Eine studierende Person platziert den `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das? - [ ] Kein Problem – Browser ignorieren die Unterscheidung. - [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.** - [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet. - [ ] Nur das Fehlen von `<meta charset>` ist ein Problem. > **Feedback:** `<head>` = Metadaten (unsichtbar für die Benutzenden, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert. --- ### F2 – `<head>`: Was gehört wohin? **Thema:** HTML-Struktur – Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört. **Element:** - `<title>` - `<meta charset="UTF-8">` - `<meta name="description">` - `<h1>Willkommen</h1>` - `<p>Text hier</p>` - `<link rel="stylesheet">` **Wohin? (ungeordnet):** - `<head>` - `<body>` - `<body>` - `<head>` - `<head>` - `<head>` --- ### F2 – `<head>`: Was gehört wohin? (Lösung) **Thema:** HTML-Struktur – Zuordnung **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört. | Element | Wohin? | |---|---| | `<title>` | `<head>` | | `<meta charset="UTF-8">` | `<head>` | | `<meta name="description">` | `<head>` | | `<h1>Willkommen</h1>` | `<body>` | | `<p>Text hier</p>` | `<body>` | | `<link rel="stylesheet">` | `<head>` | > **Feedback:** `<head>` = alles, was die Benutzenden nicht direkt sehen (Metadaten, Styles, Titel). `<body>` = alles, was im Browser-Fenster angezeigt wird. --- ### F4 – Umschließende vs. selbst-schließende Tags **Thema:** HTML-Anatomie – Tag-Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedes HTML-Element seinem Tag-Typ zu. **Element:** - `<a>` - `<body>` - `<img>` - `<input>` - `<meta>` **Tag-Typ (ungeordnet):** - Selbst-schließend (kein End-Tag) - Selbst-schließend (kein End-Tag) - Selbst-schließend (kein End-Tag) - Umschließend (Start- und End-Tag) - Umschließend (Start- und End-Tag) --- ### F4 – Umschließende vs. selbst-schließende Tags (Lösung) **Thema:** HTML-Anatomie – Tag-Typen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedes HTML-Element seinem Tag-Typ zu. | Element | Tag-Typ | |---|---| | `<a>` | Umschließend (Start- und End-Tag) | | `<body>` | Umschließend (Start- und End-Tag) | | `<img>` | Selbst-schließend (kein End-Tag) | | `<input>` | Selbst-schließend (kein End-Tag) | | `<meta>` | Selbst-schließend (kein End-Tag) | > **Feedback:** Umschließende Tags haben Inhalt zwischen Start und Ende (`<a>…</a>`). Selbst-schließende Tags stehen allein, weil sie keinen Inhalt umschließen (`<img>`, `<input>`, `<meta>`). ---  ## BLOCK G – CSS --- ### G6 – CSS-Farbnotationen zuordnen **Thema:** CSS Farben – Notationen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu. **Schreibweise:** - `red` - `#FF0000` - `rgb(255, 0, 0)` - `rgba(255, 0, 0, 0.5)` **Notation (ungeordnet):** - RGBA (RGB + Alpha/Transparenz) - RGB (Red Green Blue) - Hexadezimal - Farbname / Color Code --- ### G6 – CSS-Farbnotationen zuordnen (Lösung) **Thema:** CSS Farben – Notationen **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu. | Schreibweise | Notation | |---|---| | `red` | Farbname / Color Code | | `#FF0000` | Hexadezimal | | `rgb(255, 0, 0)` | RGB (Red Green Blue) | | `rgba(255, 0, 0, 0.5)` | RGBA (RGB + Alpha/Transparenz) | > **Feedback:** Vier Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz). --- ### G7 – Selektoren: Der ID-Selektor **Thema:** CSS Selektoren – ID-Selektor **Punkte:** 2 **Typ:** `[MC]` Gegeben ist folgendes HTML-Element: ```html <p id="intro" class="text">Hallo Welt</p> ``` Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine ID** an? - [ ] `#intro { color: red; }` - [ ] `.intro { color: red; }` - [ ] `p { color: red; }` - [ ] `ul > li#intro { color: red; }` --- ### G7 – Selektoren: Der ID-Selektor (Lösung) **Thema:** CSS Selektoren – ID-Selektor **Punkte:** 2 **Typ:** `[MC]` Gegeben ist folgendes HTML-Element: ```html <p id="intro" class="text">Hallo Welt</p> ``` Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine ID** an? - [x] **`#intro { color: red; }`** - [ ] `.intro { color: red; }` - [ ] `p { color: red; }` - [ ] `ul > li#intro { color: red; }` > **Feedback:** Der ID-Selektor beginnt mit `#` und wählt das Element mit dem passenden `id`-Attribut; eine `id` darf pro Seite nur einmal vorkommen – er adressiert genau ein Element. Abgrenzung: `.intro` = Klassen-Selektor (die Klasse hier heißt zudem `text`), `p` = Element-Selektor (trifft alle `<p>`), `ul > li#intro` = Kind-Kombinator – trifft nur ein `<li>` mit dieser ID direkt unter einem `<ul>`, nie das gegebene `<p>`. ---  ## BLOCK H – Barrierefreiheit --- ### H1 – Wie nutzen Menschen das Web? **Thema:** Barrierefreiheit – Eingabegeräte **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu. **Eingabe:** - Maus - Tastatur - Screenreader - Sprachsteuerung - Augensteuerung - Switch-Geräte **Nutzungsweise (ungeordnet):** - Ein-/Aus-Schalter - Eye-Tracking - „Klicke auf Anmelden" - Vorlesen von Inhalten - Tab-Navigation, Enter, Pfeiltasten - Klicken, Scrollen --- ### H1 – Wie nutzen Menschen das Web? (Lösung) **Thema:** Barrierefreiheit – Eingabegeräte **Punkte:** 2 **Typ:** `[MATCH]` Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu. | Eingabe | Nutzungsweise | |---|---| | Maus | Klicken, Scrollen | | Tastatur | Tab-Navigation, Enter, Pfeiltasten | | Screenreader | Vorlesen von Inhalten | | Sprachsteuerung | „Klicke auf Anmelden" | | Augensteuerung | Eye-Tracking | | Switch-Geräte | Ein-/Aus-Schalter | > **Feedback:** Nicht alle nutzen Maus + Bildschirm. ~15% der Weltbevölkerung haben eine Behinderung (WHO). Assistive Technologien wie Screenreader (NVDA, VoiceOver, JAWS) oder Switch-Geräte ermöglichen Web-Zugang für Menschen mit verschiedenen Einschränkungen. --- ### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende? **Thema:** Barrierefreiheit – Business Case **Punkte:** 2 **Typ:** `[ESSAY]` Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops. --- ### H6 – Barrierefreiheit: Warum auch für „normale" Benutzende? (Lösung) **Thema:** Barrierefreiheit – Business Case **Punkte:** 2 **Typ:** `[ESSAY]` Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops. > **Musterlösung (je zwei ausreichend):** Curb-Cut-Effekt = barrierefreie Gestaltung hilft allen. (1) Große Klickflächen – nötig bei motorischen Einschränkungen (z. B. Parkinson), helfen aber allen auf kleinen Screens oder mit Touchpad. (2) Guter Kontrast – nötig bei Sehschwäche, hilft aber allen bei Sonnenlicht auf dem Display. (3) Untertitel – nötig für Gehörlose, helfen allen in lauter Umgebung. (4) Tastaturbedienung (bspw. Navigation mit Tab- und Enter-Taste) – nötig bei motorischen Einschränkungen, nutzen auch Power-User (Shortcuts). Analogie: Bordsteinabsenkung für Rollstühle nutzt auch Kinderwagen und Rollkoffern. --- ### H7 – Tastatur-Test: Was prüfen? **Thema:** Barrierefreiheit – Praktischer Test **Punkte:** 2 **Typ:** `[MC]` Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie? - [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist. - [ ] Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch? - [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden. - [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`). --- ### H7 – Tastatur-Test: Was prüfen? (Lösung) **Thema:** Barrierefreiheit – Praktischer Test **Punkte:** 2 **Typ:** `[MC]` Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie? - [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist. - [x] **Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?** - [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden. - [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`). > **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab- und Enter-Taste benutzen. Wenn man so eine Funktion nicht erreichen kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.