Ordner & Links
Der Baumeister der digitalen Brücken
Mit HTML in deinen Händen wirst du zum Architekten digitaler Brücken. Das <a>-Element und das href-Attribut sind deine Werkzeuge, um magische Verbindungen zu schaffen. Das <a>-Element markiert den verlinkten Text, während href=“ „ dir zeigt, wohin die Reise geht, sei es zu einem vertrauten Ort oder einem mystischen Portal, das direkt in die Untiefen einer anderen Webseite führt.
Relative Pfade sind wie Hinweise auf einer Schatzkarte, die dich von deinem Standpunkt aus zu einem nahegelegenen Schatz führen. Absolute Pfade hingegen sind wie eine genaue Teleportation, die dich direkt zum Ziel führt. Wähle weise, denn der richtige Pfad bestimmt, wohin deine Reise führt. Und niemand will im digitalen Nirgendwo landen, oder?
geheime Pfade
zu deinen internen und externen Ressourcen
Relative Pfade
Wegweiser im nahen Umkreis
Stell dir vor, du bist ein etwas verlorener Wanderer, der durch einen verzauberten
Wald tappt, auf der Suche nach einem geheimen Zauberbuch, dem Grimoire Ein weiser, leicht grimmiger Einheimischer gibt dir ausnahmsweise eine präzise Anweisung:
„Geradeaus, links an der alten Eiche vorbei, dann dem schmalen Pfad folgen bis zum verfallenen Haus. Dort im Zauberbuchladen findest du das Grimoire, das du suchst.“
Diese Wegbeschreibung ist wie ein relativer Pfad in HTML, denn du erhältst Hinweise für den nächsten Schritt, ohne den ganzen Weg zu kennen.
<a href="grimoire.html">Zauberbuch</a>
Absolute Pfade
Koordinaten in der digitalen Welt
Ein absoluter Pfad ist wie ein exakter Wegpunkt auf einer Karte. Er zeigt dir nicht nur die Richtung, sondern führt dich direkt ans Ziel, wie ein Leuchtturm, der unermüdlich den Weg weist, egal wo du gerade umherschipperst. Kein Rätselraten, keine Umwege, nur die glasklare, direkte Route.
<a href="https://www.w3schools.com/">W3Schools</a>
Ein Beispiel
auf den Standpunkt kommt es an
Standpunkt: index.html
Verknüpfung zu: about.html –> href=“about.html“
Befinden sich die zu verknüpfenden Dateien auf der gleichen Ebene, ist es ganz einfach: Du gibst nur den Dateinamen im Attributwert an.
Standpunkt: index.html
Verknüpfung zu: logo.png –> href=“img/logo.png“
Liegt die zu verknüpfende Datei in einem Ordner auf der gleichen Ebene, musst du im Pfad den Ordnernamen angeben. Mit einem /-Zeichen öffnest du diesen Ordner und schreibst danach den Dateinamen.
Standpunkt: style.css
Verknüpfung zu: logo.png –> href=“../img/logo.png“
Befindet sich die zu verknüpfende Datei in einem Ordner eine Ebene höher, musst du zuerst mit ../ aus deinem aktuellen Ordner heraus, dann in den Zielordner hinein und die Datei ansprechen.
In dieser Lektion hast du gelernt…
- Relative Pfade zu nutzen, indem du verstehst, dass ihr Standort vom Speicherort der Datei abhängt.
- Absolute Pfade gezielt einzusetzen, um feste Adressen für Dateien oder Websites eindeutig anzugeben.
- Dateien auf der gleichen Ebene zu verlinken, ohne zusätzliche Verzeichnisse anzugeben.
- Unterordner in Pfaden richtig anzusprechen, damit du auf dort gespeicherte Dateien zugreifen kannst.
- Mit
../eine Ebene nach oben zu navigieren, um Dateien außerhalb deines aktuellen Ordners zu erreichen.
Die Pfade der Magie
Deine Aufgabe
Eldria braucht deine Hilfe, um ihre magischen Tränke und Informationen miteinander zu verbinden. Verwende dein Wissen über relative und absolute Pfade, um sicherzustellen, dass alle Teile ihrer Webseite korrekt miteinander verknüpft sind.
