Overview
Die Vorlesung behandelt das praktische Erstellen und Anwenden von Hyperlinks in HTML, sowohl zu externen Webseiten als auch zu lokalen Dateien mithilfe relativer Pfadangaben.
Einführung in Hyperlinks
- Hyperlinks ermöglichen die Navigation zwischen Webseiten und Dateien im Internet und auf dem eigenen Rechner.
- Für die Arbeit wird Visual Studio Code mit einer strukturierten Ordnerverwaltung verwendet.
Aufbau einer Beispiel-Webseite
- Im "infodateien"-Ordner werden Unterordner für Hyperlinks und Sprungmarken angelegt.
- Eine index.html wird erstellt und mit Grundstruktur (head, body, Header) und Beispieltext gefüllt.
- Artikel mit Überschriften und Blindtext sorgen für Arbeitsmaterial beim Üben der Verlinkungen.
Externe Hyperlinks (ins Internet)
- Hyperlinks werden mit dem
<a>-Tag und dem Attribut href (Hyper Reference) erstellt.
- Beispiel:
<a href="https://youtube.de" hreflang="de">Mehr Informationen</a>.
- Das Attribut
hreflang gibt die Sprache der Zielseite an (z.B. "de" für Deutsch).
- Mit dem Attribut
target="_blank" öffnen sich Links in einem neuen Tab oder Fenster._
Interne Hyperlinks (lokale Dateien)
- Weitere HTML-Dateien (z.B. unterseite.html) werden im gleichen oder in Unterordnern angelegt.
- Verlinkung auf lokale Dateien erfolgt ebenfalls mit
<a href="unterseite.html">Unterseite</a>.
- Für Unterordner wird die relative Pfadangabe wie z.B.
href="Nebenseiten/nebenseite.html" genutzt.
Navigation mit relativen Pfadangaben
- Um von einer Datei in einem Unterordner in eine Datei im Hauptordner zu verlinken, nutzt man
href="../unterseite.html".
- Der Editor schlägt beim Tippen von Pfaden passende Dateien und Ordner vor.
- Ein "Zurück"-Button kann am Seitenende eingebaut werden, z.B.
<a href="index.html">Zurück</a> oder mit Pfadangabe ../index.html.
Typische Fehler und Tipps
- Verlinkung funktioniert nur, wenn der Pfad korrekt ist und die Zieldatei existiert.
- Die geordnete Ablage aller Dateien in einen Ordner erleichtert die Navigation und Pflege.
Key Terms & Definitions
- Hyperlink — ein klickbarer Verweis auf eine andere Webseite oder Datei.
- <a>-Tag — HTML-Element zur Erstellung von Hyperlinks.
- href — Attribut für die Zieladresse des Links.
- hreflang — Attribut für die Sprache der Zielseite.
- target="_blank" — Attribut, um den Link in neuem Tab/Fenster zu öffnen.
- relative Pfadangabe — beschreibt den Pfad einer Datei relativ zum aktuellen Speicherort._
Action Items / Next Steps
- Erstellt eigene HTML-Dateien und verknüpft sie mittels relativer und absoluter Pfadangaben.
- Baut eine einfache Navigation mit "Zurück"-Button zwischen den Seiten ein.
- Übt, verschiedene Dateipfade und Ordnerstrukturen zu verwenden.