Pfade und Verzeichnisse

Jetzt der Teil, an dem am meisten Zeit verloren geht: Das Bild wird nicht angezeigt, der Link führt ins Leere, und der Code sieht doch richtig aus. In fast allen Fällen stimmt der Pfad nicht.

Pfade betreffen nicht nur Links. Genauso funktionieren src beim Bild, href beim Stylesheet und src beim Skript. Einmal verstanden, gilt es überall.

Diese Lektion kannst du ausrechnen, aber du musst nicht: Klick einfach auf die Links. In der Adresszeile steht danach, wo du gelandet bist. Der Browser kennt hier nur die Dateien, die im Editor offen sind, deshalb meldet er bei allen anderen Pfaden, dass es die Seite nicht gibt. Genau das macht die Rechnung sichtbar. Zwei Ausnahmen wirst du sehen: Führt ein Link nach draußen, bleibt die Seite stehen und du siehst nur die Zieladresse in der Adresszeile. Und ../ von der Startseite aus führt nirgendwohin, weil über der Wurzel nichts mehr kommt.

01 / 04Drei Arten, ein Ziel zu nennen

<p><a href="https://example.com/rezepte">Absolut mit Protokoll: eine fremde Seite</a></p>

<p><a href="/rezepte/linsensuppe.html">Absolut ab Wurzel: immer vom Anfang der Seite aus</a></p>

<p><a href="linsensuppe.html">Relativ: im selben Ordner wie diese Datei</a></p>

Absolut mit Protokoll beginnt mit https:// und nennt die komplette Adresse samt Domain. Das brauchst du für alles, was außerhalb deiner eigenen Seite liegt. Innerhalb der eigenen Seite ist es unpraktisch: Wechselt die Domain oder testest du lokal, zeigen alle Links weiter nach draußen.

Absolut ab Wurzel beginnt mit einem einzelnen Schrägstrich. Der Browser hängt es an die Domain der aktuellen Seite. /rezepte/linsensuppe.html bedeutet also: Geh zur Wurzel deiner Seite, dann in den Ordner rezepte, dort liegt die Datei. Der Vorteil: Der Pfad funktioniert von jeder Seite aus gleich, egal wie tief sie liegt.

Relativ beginnt ohne Schrägstrich. Dann sucht der Browser vom Ordner der aktuellen Datei aus. Steht die aktuelle Seite in rezepte/, meint linsensuppe.html die Datei rezepte/linsensuppe.html.

02 / 04Eine Ebene hoch

Für relative Pfade gibt es zwei Kürzel, die immer wieder auftauchen:

<p><a href="../index.html">Eine Ebene höher zur Startseite</a></p>

<p><a href="../bilder/teller.jpg">Eine Ebene höher, dann in den Bilder-Ordner</a></p>

<p><a href="./linsensuppe.html">Ausdrücklich im selben Ordner</a></p>

<p><a href="../../archiv/2024.html">Zwei Ebenen höher</a></p>

.. heißt „eine Ebene höher“. Liegt deine Datei in rezepte/ und du willst zur Startseite im Hauptordner, ist das ../index.html. Das lässt sich stapeln: ../../ geht zwei Ebenen hoch. Und es lässt sich kombinieren: ../bilder/teller.jpg bedeutet eine Ebene hoch, dann in bilder hinein.

Klick den letzten Link im Beispiel an, den mit ../../. In der Adresszeile steht danach /archiv/2024.html und nicht /../../archiv/2024.html. Über die Wurzel hinaus geht es nämlich nicht, der Browser schluckt die überzähligen Schritte einfach. Gut zu wissen, wenn du dich mal verzählt hast: Der Pfad landet dann nicht im Nirgendwo, sondern an einer falschen Stelle im eigenen Projekt, und das ist der schwerer zu findende Fehler.

. heißt „der aktuelle Ordner“. ./linsensuppe.html und linsensuppe.html sind dasselbe. Manche schreiben es hin, weil es deutlicher macht, dass ein Pfad gemeint ist, nötig ist es nicht.

Eine Merkhilfe für die Entscheidung: Absolut ab Wurzel für alles, was zur Seitenstruktur gehört (Navigation, Logo, Stylesheet). Relativ für alles, was zum aktuellen Dokument gehört und mit ihm zusammen umzieht (die Bilder eines Artikels im selben Ordner).

03 / 04Dieselbe Regel überall

Der Pfad ist unabhängig davon, wofür du ihn benutzt:

<img src="bilder/teller.jpg" alt="Ein Teller Linsensuppe" width="200">

<p><a href="bilder/teller.jpg">Das Bild in Originalgröße</a></p>

<p>Auch link und script im head arbeiten mit genau denselben Pfaden.</p>

Ob im src eines Bildes oder im href eines Links, gerechnet wird immer gleich. Hier lädt das Bild nicht, weil es die Datei nicht gibt. Der alt-Text springt ein, und du siehst genau das, was ein falscher Pfad im echten Projekt anrichtet.

04 / 04Zwei Stolperfallen

Groß- und Kleinschreibung. Öffnest du deine Datei lokal unter Windows, ist Teller.jpg und teller.jpg dasselbe. Auf einem Linux-Server, und das ist praktisch jeder Webserver, sind das zwei verschiedene Dateien. Das ist der Klassiker: lokal alles gut, live fehlt das halbe Bildmaterial. Schreib Dateinamen deshalb konsequent klein.

Umlaute und Leerzeichen. Grüße vom Küchentisch.jpg funktioniert vielleicht, macht aber Ärger, sobald jemand den Link kopiert oder verschickt. Nimm Bindestriche statt Leerzeichen und ue statt ü. Aus dem Beispiel wird gruesse-vom-kuechentisch.jpg, und das läuft überall.