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:
index.htm
-
bilder
(Ordner)ich.jpg
meine_olle.jpg
-
seiten
(ordner)ueber_mich.htm
ueber_meine_olle.htm
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.