HTML-Pfade, Unterordner und URLs

Worum geht´s?

Wenn du mit <img>-Tags oder <a>-Tags arbeitest, hängt viel davon ab, wo genau in der Ordner-Struktur deiner Webseite die einzelnen Dateien liegen. Liegen alle gemeinsam in einem Ordner, ist die Sache einfach. Du gibst einfach den jeweiligen Dateinamen an. Aber was, wenn z.B. Bilder alle einem Unterordner namens „img“ oder „images“ kommen sollen? Dann brauchen wir HTML-Pfade, um die jeweiligen Dateien wiederzufinden.

1. Was ist ein Pfad in HTML?

Einen Pfad kann man sich vorstellen wie eine Art „Wegbeschreibung“. Er sagt dem Browser, wo er bestimmte angegebene Ressourcen findet, wenn sie nicht ohnehin im gleichen Ordner wie die Datei liegen, von der er ausgeht.

Wovon aber geht der Browser überhaupt aus?

Das hängt ein Stück weit davon ab, ob es sich um einen relativen oder einen absoluten Pfad handelt.

1.1 Absolute HTML-Pfade: Drauf mit dem Holzhammer!

Absolute Pfade haben ein einfaches Prinzip: Wir starten am absoluten Nullpunkt.

Wenn du dich z.B. auf einem Windows-Rechner befindest, wäre der absolute Nullpunkt dann die Festplatte, um die es geht. Ein absoluter Windows-Pfad könnte dann z.B. „C:\Users\Public\XAMPP\htdocs\testerei\index.html“ heißen.

Im Web-Bereich ist der absolute Nullpunkt immer eine Domain. Eine Domain ist alles, was mit .com, .at, .de oder .net endet, wie z.B. auch relativemeister.com.

Ein absoluter Pfad im Web-Bereich könnte z.B. dieser sein: „http://relativemeister.com/wp-content/uploads/wichtelGeld.png“

Als <img>-Tag:

<img src="http://relativemeister.com/wp-content/uploads/wichtelGeld.png">

Der Vorteil von absoluten Pfaden ist, dass sie auch dann noch funktionieren, wenn die Webseite z.B. auf einen anderen Web-Server umgezogen wird, vorausgesetzt, die Domain am Anfang ändert sich nicht.

Wenn der Pfad jedoch auf die eigene Domain zeigt, und sich diese ändert, dann kann es sein, dass gar nichts mehr funktioniert.

Der Pfad mit dem wichtelGeld.png von oben würde z.B. nicht mehr funktionieren, wenn die Website-Domain plötzlich relativemeisterschaft.com heißen würde. Einfach weil der Domain-Anteil des Links ja fix („absolut“) angegeben wurde.

1.2 Relative HTML-Pfade: Flexibel, aber nicht ohne

Im Unterschied zu absoluten Pfaden gehen relative Pfade nicht vom absoluten Nullpunkt einer Webseite aus, sondern von der .html-Datei, die gerade aktiv ist.

Wenn nun also z.B. eine index.html ein Bild beinhaltet, das im gleichen Ordner liegt, dann funktioniert das nur über den Dateinamen:

<img src="wichtelGeld.png">

Was aber, wenn unsere wichtelGeld.png nicht im gleichen Ordner liegt, sondern in einem Unterordner? Oder im Ordner über der index.html?

1.2.1 Relative HTML-Pfade in einen Unterordner

Um in einen Unterodner zu gelangen, muss einfach nur der Name des Unterordners (z.B: „img“) vor den Dateinamen gestellt und dann dazwischen ein Schrägstrich eingefügt werden. In etwa so:

<img src="img/wichtelGeld.png">

1.2.2 Relative HTML-Pfade in einen übergeordneten Ordner

Um eine Ebene in der Ordnerstruktur hinaufzugelangen, braucht man zwei Punkte und einen Schrägstrich:

<img src="../wichtelGeld.png">

1.2.3 Kombinierte HTML-Pfade

Manchmal muss man in einen übergeordneten Ordner, um dann dort in mehrere Unterordner zu gelangen. Auch das geht:

<img src="../img/new/wichtelGeld.png">

Dieser Pfad geht erst eine Ebene in der Ordnerstruktur hinauf, um dann in den Unterordner „img“ und dann von dort in den Unterordner „new“ zu gelangen, wo sich die wichtelGeld.png befindet.

2. Wann verwende ich welche Art von HTML-Pfad?

Im Regelfall wirst du für externe Links (also welche zu anderen Webseiten) absolute Pfade verwenden und für interne Links (zwischen deinen Unterseiten und deiner Ordner-Struktur) relative Pfade.

So stellst du sicher, dass externe Links und interne Links auch nach einem Umzug deiner Webseite auf eine andere Domain immer noch verlässlich funktionieren.

Diskussion zum Tutorial