public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
102a6d53e595106d2e6853383999d288ec65d9f3
uni/slides/223015c/klausurfragen.md
T
libretechandClaude Opus 4.8 102a6d53e5 223015b+c klausurfragen: sose26-klausurset kuratiert + wording-fixes 
- 223015c: G7 id-selektor neu (ersetzt spezifität-ansatz), B10 encapsulation
  + E3 gesamtablauf disabled (tcp-handshake nie ausreichend behandelt),
  G6 ohne hsl + farbname/color code, H6 curb-cut-wording (genau zwei
  beispiele, klickflächen/kontrast/tab+enter), H7 attribute statt tags
  + screenreader-distraktor + tastatur-wording, B7b dns: domain->ip
- 223015b: J22 ohne buch-lesen + überwiegend unabhängig, K2 sie-form
  + taschenrechner-hinweis, strg/cmd+f
- .gitignore: slides/**/*-INTERN.md (lokale klausur-previews, nie deployen)
- 223015b/CLAUDE.md: deck-doku + downstream-verweis aufs klausur-repo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-03 13:37:01 +02:00

41 KiB
Raw Blame History

marp, theme, paginate, backgroundColor, header, footer, title
marp theme paginate backgroundColor header footer title
true gaia true Fragenkatalog – IT-Grundlagen (223015c)
<style> :root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; } section.invert { --color-foreground: #fff; } section { font-size: 1.325rem; } h1 { color: #a02060; /* darker raspberry */ } section.invert h1 { color: #fff; } h2 { color: #1f2937; /* dark gray, almost black */ } pre { background: #0f0f23; color: #f8f8f8; border-radius: 8px; } pre code { background: transparent; color: inherit; } code { background: #0f0f23; color: #d63384; padding: 0.15em 0.4em; border-radius: 4px; } section code:not(.hljs) { color: #d63384 !important; } section code.hljs { color: #f8f8f8 !important; } a { color: var(--color-highlight); } section.disable { opacity: 0.3; } </style>

Klausurfragen – 223015c

IT-Grundlagen · HdM Stuttgart · M. Czechowski

Stand: 24.06.2026

Legende – Moodle XML-Typen: [MC] = multichoice (einzelne Auswahl) [MM] = multichoice + <single>false</single> (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)

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

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.
  • 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?

  • 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.
  • 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.
  • 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.
  • 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)?

  • 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?

  • 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?

  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 – <head> vs. <body>: Was passiert bei Fehler?

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.
  • (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.
  • (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:

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

<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; }

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

Reference in New Issue View Git Blame Copy Permalink