mit relativen Datei-Pfaden
Elemente aus einem anderen Ordner einbinden

Um andere Elemente in eine HTML-Dateien einzubinden, muss man angeben, wo sie sich befinden. Diese Angabe nennt man Pfad. Dieser Pfad ist sozusagen die Postadresse von Dateien im Internet oder auf der Festplatte des eigenen PC.
Man unterscheidet zwischen relativen und absoluten Pfaden.

Absolute Pfade auf dem PC beginnen mit der Angabe der verwendeten Hardware (beispielsweise "C" für die Festplatte C), einem Doppelpunkt mit anschliessendem Backslash (C:\) und dem Verzeichnisbaum bis zur Datei (z.B. Dokumente und Einstellungen\Nutzernamen\Eigene Dateien\), anhand dieses Beispiels wäre das dann
C:\Dokumente und Einstellungen\Nutzername\Eigene Dateien\

Absolute Pfade im Internet beginnen immer mit einem Protokoll wie beispielsweise http:// oder https:// (verschlüsselte Übertragung) und mit der Domain (z.B. www.meinedomain.de), also beispielsweise http://www.meinedomain.de
Das Projekt zu der die Domain gehört, befindet sich in einem Ordner von Webspace auf einem Server (Internet). Nennen wir diesen Ordner nachfolgend Hauptverzeichnis.

Liegen die HTML-Dateien und die Elemente, die man einsetzen möchten, innerhalb des selben Server Hauptverzeichnis, so benutzt man vorzugsweise relative Pfadnamen. Sie führen vom HTML-Dokument (in den Beispielen unten immer index.htm) zum gewünschten Element (Grafik-, SWF-, oder Musikdatei usw., CSS- und JS-, oder weiteres HTML-Dokument usw.).

Eine Website besteht aus HTML-Dateien, Bildern, eventuell Animationen, Musikdateien usw. Für die Bilder/Grafiken und andere Dateien existieren in der Regel jeweils eigene Verzeichnisse, bei Beepworld-Websites heisst dieses Verzeichnis "files" (eng: "Dateien").
Werden Bilder in die HTML-Dateien (z.B. in die Seiten der Seitenverwaltung "Seitenerstellen u. Inhalte ändern") eingebunden, muss das Tag (z.B. Bilder-Tag <img src=[...]> oder Link <a href=[...]>Linktext</a>) auf den Ordner "files" verweisen, in dem das gewünschte Bild liegt. Dies funktioniert sowohl mit absolutem Pfad - Beispiel <img src="http://deinnicname.beepworld.de/files/[...]"> - oder mit Hilfe der viel kürzeren relativen Pfadnamen - Beispiel <img src="files/[...]">.

Diese relativen Pfade sind immer relativ zu der HTML-Datei (in den Beispielen jeweils die index.htm), in der sie genannt werden. Die Schaubilder sollen dir verdeutlichen, wie relative Pfadnamen funktionieren. Ein Verzeichnisbaum wird immer von unten nach oben gelesen, dh. das innerste Verzeichnis wird zuunterst dargestellt und ein äusseres Verzeichnis (übergeordnetes Verzeichnis/Ordner) weiter oben. An den Bildern wird dir sicherlich auffallen, dass 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.

Um die Beispiele unten etwas übersichtlicher zu gestalten, wurden nur die Ordner (Verzeichnisse) gross dargestellt, worin dich die für das Beispiel ausgesuchten Dateien befinden.
Alle weiteren Verzeichnisse, die nur für die Berechnung des Pfades wichtig sind, werden etwas kleiner dargestellt.
Verzeichnisse und Dateien die in den Beispielen zur Berechnung der Pfade unwichtig sind, werden gar nicht dargestellt.

Eine Erklärung der Vorteile relativer Pfade, findest du weiter unten.

Dieses Tutorial ist ein Service von...  

Banner meinbeepweb
 

Beispiele - mit Bildern zur Ansicht

Pfad: dateiname.gif | Beispiel-Tag: <img src="dateiname.gif">

Das Bild  dateiname.gif  liegt im gleichen Ordner  files , wie die HTML-Datei  index.htm .

Pfad: files/dateiname.gif
Beispiel-Tag: <img src="files/dateiname.gif">

Das Bild  dateiname.gif  liegt im Ordner  files . Dieser Ordner befindet sich eine Ebene unter  seitenverwaltung .

Pfad: ../seite1.htm
Beispiel-Tag: <a href="../seite1.htm">Linktext</a>

Die Seite  seite1.htm  im Ordner der  seitenverwaltung  liegt eine Ebene höher als die HTML-Datei  index.htm  aus dem Ordner  files . Einen Schritt zurück in das übergeordnete Verzeichnis drückt das  ../  im relativen Pfad aus.

Pfad: ../../seite1.htm
Beispiel-Tag: <a href="../../seite1.htm">Linktext</a>

Die Seite  seite1.htm  im Ordner der  Seitenverwaltung  liegt 2 Ebenen höher als die HTML-Datei  index.htm 
Das Anwählen des übernächsten übergeordneten Verzeichnisses (zwei Schritte nach oben) wird durch  ../../  ausgedrückt.

Pfad: ../datei/style.css
Beispiel-Tag:
<link rel="stylesheet" type="text/css" href="../datei/style.css" />

 style.css  liegt, von  index.htm  aus gesehen, eine Ebene höher (Ordner  files ) und von dort aus im Ordner  datei .
Man muss also aus dem Ordner  zoo1  zuerst mit  ../  hinauf in den Ordner  files  und dann mit  datei/  hinunter in den Ordner  datei 

Pfad: ../../../bilder/delfine/dateiname.gif
Beispiel-Tag:
<a href="../../../bilder/delfine/dateiname.gif">Linktext</a>

Von der  index.htm  in  band1  drei Ebenen nach oben in  files , und von dort dann hinunter in den Ordner  bilder  und noch einen Schritt hinunter in den Ordner  delfine , wo das Bild  dadeiname.gif  liegt.

Datei aus einem anderen Ordner einbinden (Beispiele) | nach oben

Die Vorteile relativer Pfade

Sicherlich wirst du dich fragen, warum man relativer Pfade benutzt?
Ein wesentlicher Vorteil ist, dass man so die gesamte Website auf seinem PC erstellen (offline bearbeiten) kann und direkt von da im Browser anschauen kann ohne online zu gehen. Beim Übertragen auf den Web-Server (z.B. per FTP oder mit der Uploadfunktion in der Dateiverwaltung) kann der gesamte Verzeichnisbaum komplett übernommen werden, ohne dass dadurch die internen Verweisstrukturen (z.B. Links) verloren gehen.
Dies gilt auch, wenn man sein Projekt später auf anderen Webspace umziehen möchte, dann muss man nicht in mühevoller Kleinarbeit die gesammten Pfade (in Links, Bilder-Tags usw.) anpassen, sondern es kann alles einfach übernommen werden...

Du siehst, es lohnt sich also, sich generell anzugewöhnen, relative, anstelle von absoluten, Pfaden zu verwenden. Auch wenn man denkt, dass man es zur Zeit nicht braucht, man weiss ja nie was später einmal ist...

Wenn dir dieses Tutorial etwas gebracht hat, wäre es schön, wenn du im Gästebuch ein Feedback von dir hinterlassen könntest :)
Herzlichen Dank!

Dieses Tutorial ist ein Service von...  

Banner meinbeepweb