07 – Links & Navigation 🔗

Verbinde Seiten – mit Sinn und Barrierefreiheit

🎯 1. Einleitung & W3Schools

In Kapitel 07 hast du gelernt, wie man interne und externe Links erstellt, Navigationen semantisch strukturiert und barrierefreie Links schreibt.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🔗 W3Schools – HTML Links

🧠 2. KI-Prompt-Training – verlinken mit Absicht

Deine Aufgabe: Formuliere einen Prompt, der keinen Link-Code liefert, sondern dir hilft, zu verstehen, wie man Links barrierefrei und sicher gestaltet.

❌ Vermeide: „Gib mir eine Navigation für mein Projekt.“ ✅ Fragen, die denken erzwingen:

„Warum ist rel="noopener" nötig, wenn man target="_blank" verwendet?“
„Erkläre mir, warum ‚Klicken Sie hier‘ eine schlechte Link-Beschriftung ist.“
„Warum sollte man Navigationen mit <ul> umsetzen – und nicht mit <div>?“

💡 Merke: Wenn die KI dir HTML-Links gibt, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht behebe!

Ein Schüler hat folgenden Link-Code geschrieben:

<nav>
  <div><a href="start.html">Klicken Sie hier</a></div>
  <div><a href="https://htblatraun.at" target="_blank">Externer Link</a></div>
</nav>

Schreibe (auf Papier oder in Textdatei):

Warum ist die Link-Beschriftung „Klicken Sie hier“ problematisch – besonders für Screenreader-Nutzer?
Was fehlt beim externen Link, um ihn sicher zu machen?
Warum ist die Verwendung von <div> in der Navigation falsch – und was wäre semantisch korrekt?
Welche drei Attribute sind für barrierefreie Links besonders wichtig?

⚠️ Hinweis: Wer nur den „richtigen Code“ hinschreibt, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Umsetzung!

🧭 Aufgabe 2: Verbinde bewusst – erst nach der Analyse!

Erstelle eine HTML-Datei navigation.html mit folgenden Anforderungen:

Eine Navigation mit semantischer Struktur: <nav> + <ul> + <li>
Drei interne Links: index.html, ueber.html, kontakt.html
Einen externen Link zu https://www.w3schools.com – sicher geöffnet in neuem Tab
Alle Links müssen aussagekräftige Texte haben (nicht „Klicken Sie hier“)
Verknüpfe eine CSS-Datei, die die Punkte der Liste entfernt und horizontale Ausrichtung erzeugt

💡 Teste selbst:
- Öffne mit VS Code Live Server
- Prüfe: Wird die Navigation horizontal angezeigt?
- Prüfe: Öffnet sich der externe Link sicher (kein Zugriff auf dein Fenster)?

📊 Beurteilungskriterien – Übung 07: Links & Navigation

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis.

Kriterium	✅	➖	❌
Barrierefreie Links: Kannst du im Gespräch erklären, warum „Klicken Sie hier“ unbrauchbar ist – und wie man stattdessen Links beschriftet?
Sichere externe Links: Weißt du, warum `rel="noopener"` nötig ist – und was passiert, wenn es fehlt?
Semantische Navigation: Kannst du begründen, warum `<nav><ul><li><a>` korrekt ist – und `<div>` nicht?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Code-Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum ist rel="noopener" wichtig?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.