Hauptmenü

Untermenü

HTML - Grundlagen - Pfade

1. Links, Referenzierungen

Innerhalb von HTML gibt es vier Situationen, wo ihr Angaben zum Pfad einer Datei machen müsst, bei Hyperlinks, Formularen, Grafiken, und bei der Einbindung von CSS-, JavaScript- oder anderen Dateien. Um zum Beispiel eine Grafik in ein HTML-Dokument einzubetten, wird nur der Pfad zur entsprechenden Datei und der Name angegeben. Das Bild wird nicht (wie zum Beispiel bei Word) direkt in das Dokument eingebettet. Bei Links zu anderen Seiten ist das Prinzip dasselbe. Dabei gibt es drei Möglichkeiten, diesen Pfad anzugeben. Absolut, relativ oder wurzelbasiert.

2. Absolute Pfade

Diese Vorgehensweise benötigt man, wenn man externe Bilder oder externe Links (also alles, was nicht von euch ist) zu anderen Seiten einbinden will. Dabei wird der komplette Pfad angegeben, also zum Beispiel:
http://www.nicht-meine-bilder.de/bilder/das_bild_das_ich_will.gif oder
http://www.nicht-meine-seite.de/seiten/die_seite_die_ich_will.htm

3. Relative Pfade

Diese sollten dann eingesetzt werden, wenn man seine eigenen Bilder oder Internetseiten verlinken will. Dabei wird der Pfad relativ zum aktuellen HTML-Dokument angegeben. Nehmen wir mal an, unser Internetauftritt hat folgende Struktur:

So jetzt wollen wir auf der ueber_mich.htm-Seite das Bild unserer besseren Hälfte einbauen. Als erstes müssen wir eine Ebene nach oben springen, um den Ordner seiten zu verlassen. Das geschieht mit der Anweisung ../. Jetzt befinden wir uns im Hauptverzeichnis mit den beiden Ordnern bilder und seiten sowie der Datei index.htm. Danach springen wir in den Ordner bilder und wählen unser Bild: meine_olle.jpg. Also sieht der gesamte Pfad dann so aus:
../bilder/meine_olle.jpg.

Eigentlich ganz einfach, für jede Ebene, die wir nach oben springen, setzen wir ein ../, bei jedem Ordner außerhalb des Eigenen geben wir den Namen an. Befindet sich das Bild oder die Seite im selben Verzeichnis wie die aktuelle HTML-Datei, so reicht der Name der Datei als Angabe aus.

Wenn wir zum Beispiel Bilder in die index.htm einbinden wollen, so fängt man einfach mit dem entsprechenden Ordner an, also bilder/meine_olle.jpg.

4. Wurzelpfade

Hier kann man ausgehend vom Wurzelverzeichnis des Internetauftritts die Pfade vorgeben. Dabei beginnt man mit /pfad/datei. Will man also, wie in der oben beschriebenen Struktur, in der Datei ueber_mich.htm das Bild meine_olle.jpg einbinden, so sieht der Pfad folgendermaßen aus: /bilder/meine_olle.jpg. Derselbe käme auch in der index.htm zum Einatz. Ich persönlich halte von dieser Variante nicht so sehr viel, da sie relativ unflexibel ist. Will man zum Beispiel zu Testzwecken einen Auftritt in einem Unterverzeichnis anlegen, um ihn dann später scharf zu schalten, so müssen alle Pfade entsprechend angepasst werden.

5. Wichtig!

Euer kompletter Internetauftritt muss sich innerhalb einer Hierarchieebene (Ordner) befinden! Ihr könnt also zum Beispiel nicht einfach eine HTML-Datei namens bilder.htm zum Beispiel auf d:\Daten\Urlaub abspeichern und dann zum Beispiel mit Dreamweaver per Klickibunti auf eure Urlaubsfotos im Ordner Eigene Dateien\Eigene Bilder verlinken. Das funktioniert nicht. In obigem Fall müssen sich die Bilder und die HTML-Datei zumindest in ein und demselben Hauptordner befinden.

Man muss sich das so vorstellen. Ihr habt euch bei irgendeinem Provider ein Hosting-Paket gemietet. Nun richtet der den Webserver ein und legt ein Verzeichnis fest, auf das man im Internet zugreifen kann. Meistens heißen diese Ordner webseiten, public_html, htdocs, http oder was weiß ich nicht.

Nun gibt es einige Anbieter, die euch per FTP nur Zugriff auf dieses Verzeichnis erlauben, aber bei vielen kann man auch auf weitere zugreifen. Entscheidend ist aber, dass nur die Dateien angezeigt werden können, die sich im dem Verzeichnis befinden, das der Provider für den Zugriff über das Internet freigegeben hat. Und glaubt mir, da gibt es so was wie Eigene Dateien nicht!

6. Struktur

Hier stellt sich natürlich die Frage, wie man seinen Internetauftritt organisiert. Auch hier gibt es (wieder mal) keine Richtlinien oder offizielle Empfehlungen. Die Entscheidung bleibt euch überlassen. Allerdings solltet ihr von Anfang an darauf achten, eine übersichtliche Struktur aufzubauen, da ihr sonst ganz schnell den Überblick verliert. Als kleinen Tipp möchte ich euch zeigen, wie ich das mache.

Die Startseite, die normalerweise index.htm heißt, liegt im Root-Verzeichnis, also auf der Ebene des vom Provider vorgesehenen Verzeichnisses. Dazu gibt es den Ordner pics für die Bilder und site für die HTML-Dateien (die Bezeichnung stammt von meiner ehemaligen dreamweavergeschädigten Kollegin). In beiden Hauptordnern gibt es jetzt zusätzlich noch mehrere Unterordner, die genauso heißen, wie die Hauptmenüpunkte des Auftritts. Also zum Beispiel unternehmen, produkte, leistungen, und so weiter und so fort. In diesen Ordnern sammeln wir jetzt alle HTML-Dateien/Bilder, die zum jeweiligen Punkt gehören.

zurück zum vorherigen Abschnitt weiter zum nächsten Kapitel