HTML lernen (1): Einführungskurs

HTML-Grundlagen: Bilder und Pfade: HTML-Grundlagen: Relative Pfade

∅ 4.5 / 19 Bewertungen

HTML-Grundlagen: Relative Pfade

Auf dieser Seite

Grafik aus einem anderen Ordner einbinden (mit relativen Pfadnamen)

Um andere Elemente in Ihre HTML-Dateien einzubinden, müssen Sie angeben, wo sie sich befinden. Diese Angabe nennt man Pfad, man unterscheidet zwischen relativen und absoluten Pfaden.

Liegen die HTML-Dateien und die Elemente, die Sie einsetzen möchten, auf demselben Server, so benutzen Sie relative Pfadnamen. Sie führen von Ihrem HTML-Dokument zum gewünschten Element. Eine Web-Site besteht aus HTML-Dateien, Bildern, eventuell Animationen, Klangdateien usw. Für die Bilder (engl. images) existiert in der Regel ein eigenes Verzeichnis, das meist den Namen "images" trägt. Werden Bilder in die HTML-Dateien eingebunden, muss das Tag <img src=....> auf den Ordner verweisen, in dem das gewünschte Bild liegt. Dies geschieht mit Hilfe von relativen Pfadnamen.

Diese sind immer relativ zu der HTML-Datei, in der sie genannt werden. Die Schaubilder sollen Ihnen verdeutlichen, wie relative Pfadnamen funktionieren. Man liest von unten nach oben. An den Bildern wird Ihnen sicherlich auffallen, daß in den Pfadangaben zwischen den Angaben der einzelnen Ordner der Schrägstrich (Slash) " / " und nicht, wie unter DOS/Windows üblich der Rückstrich (Backslash) " \ ", eingesetzt wird. Hier sieht man die Unix-Welt, die Verzeichnisse durch einen Schrägstrich " / " trennt.

50087_folder6.gif

<img src="delphin.gif">
Das Bild delphin.gif liegt im gleichen Ordner projekt, wie die HTML-Datei index.htm.

<img src="images/delphin.gif">
Das Bild delphin.gif liegt im Ordner images. Dieser Ordner befindet sich eine Ebene unter projekt.

<img src="../delphin.gif">
Das Bild delphin.gif im Ordner images liegt eine Ebene höher als die HTML-Datei archiv.htm aus dem Ordner archiv. Das drückt der relative Pfadname ../ aus.

<img src="../../delphin.gif">
Das Bild delphin.gif im Ordner delphine liegt 2 Ebenen höher als die HTML-Datei index.htm. Das wird durch ../../ ausgedrückt.

<img src="../images/ delphin.gif">
delphin.gif liegt eine Ebene höher und von dort aus im Ordner images, von archiv.htm aus gesehen.

<img src="../../../ images/delphine/delphin.gif">
Drei Ebenen nach oben, dann abbiegen in den Ordner images und zu guter Letzt wechseln in den Ordner delphine, wo das Bild delphin.gif liegt

Die Vorteile relativer Pfadnamen

Sicherlich werden Sie sich fragen, warum man relative Pfadnamen benutzt. Ein wesentlicher Vorteil ist, dass Sie so die gesamte Web-Site auf Ihrem lokalen Rechner erstellen können und im Browser anschauen können. Beim Übertragen auf den Web-Server (per FTP) kann der gesamte Verzeichnisbaum komplett übernommen werden, ohne daß dadurch die internen Verweisstrukturen verloren gehen.