HTML lernen - Elementare Infos - Dateipfade

Zum Erstellen von Webseiten benötigt man immer wieder Dateipfade. Dies ist z.B. nötig, um anzugeben, wo ein Link hinführen soll oder wo ein Bild zu finden ist. Dabei gibt es verschiedene Sachen zu beachten...

Aufbau einer Web-Adresse (=URL/URI)

URL bedeutet Uniform Resource Locator und gibt an, wo sich ein bestimmtes Objekt oder eine bestimmte Webseite im Internet befindet. Alternativ wird im Web dazu noch der Begriff URI (=Uniform Resource Identifier) oder Webadresse verwendet.
So sieht eine Beispiel-URL aus: http:// steht hier für das Protokoll, das verwendet werden soll um diese Seite aufzurufen. Alternativ dazu gibt es noch https:// (für eine sichere, verschlüsselte Verbindung) und ftp:// (für einen FTP-Zugang).
www. ist die Subdomain. Standardmäßig verwenden alle Webseiten das www. am Anfang. Dieses kann in der Regel jedoch weggelassen werden und man kann trotzdem auf dieselben Inhalte zugreifen. Sollte anstatt des www. z.B. tutorials. stehen (wie z.B. für https://tutorials.abnorm.de/html/4_5_dateipfade.html), handelt es sich hier um eine so genannte Subdomain. Dies ist eine weitere Unterteilung der Domain.
meineseite.de ist die eigentliche Domain bestehend aus einem beliebigen Text und dem jeweiligen Länderkürzel.
webseiten/ ist ein Unterordner oder Verzeichnis der Domain, ähnlich den Ordnern auf einem normalen PC.
seite1.htm ist der Name der Datei mit dazugehörigem Dateityp. Hier könnten auch Bilddateien, Musikdateien, PDF-Dateien, usw. stehen. Es ist egal, ob Sie bei Ihren HTML-Dokument den Dateitypen .html oder .htm nennen. 90% der Programmierer nutzen jedoch .html als Dateitypen.
#absatz2 ist eine so genannte Sprungmarke. Diese sagt dem Browser, dass er nach dem Laden der Webseite zur Stelle "absatz2" springen soll. Diese Stelle muss jedoch vorher im HTML-Dokument festgelegt worden sein.

Achtung! Sämtliche Bestandteile der URL dürfen nur die normalen Buchstaben (keine Umlaute!), die Zahlen 0 bis 9 und Binde- bzw. Unterstriche enthalten. Sollten Sie dies nicht beachten, kann die Seite eventuell nicht aufgerufen werden, egal ob diese existiert oder nicht!

Dateien und Verzeichnisse

Eine Datei erkennt man daran, dass diese einen Punkt enthält, nach dem dann der Dateityp (z.B. html, jpg, gif, pdf, ...) folgt. Ein Verzeichnis endet meist mit einem Slash (/). Dies ist jedoch nicht zwingend nötig.
Beispiel: Hier fehlt der Slash am Ende, jedoch handelt es sich hierbei trotzdem um einen Ordner bzw. ein Verzeichnis, da kein Punkt mit Dateityp im Namen zu finden ist.

Auch die eigentliche Domain http://www.meineseite.de ist ein Verzeichnis, nämlich der Hauptordner bzw. das Hauptverzeichnis, denn es gibt ja keinen übergeordneten Ordner mehr. Viele Browser fügen deshalb automatisch einen Slash am Ende hinzu, wenn Sie eine Domain eingeben.

Automatische Startseite

Sicher kennen Sie das, dass Sie eine Domain eingeben und dann wird auch gleich eine Webseite angezeigt, obwohl Sie kein Verzeichnis und auch keine Datei angegeben haben.

Sie werden auch feststellen, dass dies bei Ihnen nicht funktionieren wird, da es sich bei der Domain um ein Verzeichnis handelt, wie bereits oben beschrieben, und der Browser ja nicht weiß, welche Ihrer Seiten die eigentliche Startseite ist. Stattdessen wird wahrscheinlich sogar eine Fehlermeldung mit dem Code 403 Forbidden angezeigt, die besagt, dass in diesem Verzeichnis keine Standarddatei gefunden wurde oder bei den Dateirechten etwas nicht stimmt. In Ihrem Fall trifft aber ersteres zu.

Damit beim Aufrufen der bloßen Domain auch gleich eine Datei geladen wird, müssen Sie die Datei, die zu Beginn geladen werden soll index.html oder index.htm nennen. Sollten Sie beide Versionen - also .html und .htm - verwenden, ist die .html-Version höherrangig. Alternativ zu index.html gibt es auch noch start.html oder default.html, wobei index.html wiederum höherrangig ist und start.html und default.html nicht von jedem Browser gefunden werden. Deshalb sollten sie nur index.html verwenden!

Selbiges gilt auch für normale Verzeichnisse. Verlinken Sie z.B. auf http://www.meineseite.de/webseiten/, werden Sie auch die 403 Forbidden Fehlermeldung erhalten, wenn dieser Ordner keine index.html enthält. Verlinken Sie jedoch direkt auf eine Datei, wie z.B. http://www.meineseite.de/webseiten/seite1.htm, dann wird diese gefunden, da Sie ja eine Datei angegeben haben.

komplette URL

Sie könnten jedes Mal, wenn Sie Bild oder einen Link angeben möchten, die komplette Adresse dazu angeben, z.B. http://www.ihreseite.de/bilder/bild1.jpg, http://www.ihreseite.de/bilder/bild2.jpg, ...

Diese Variante hat jedoch drei Nachtteile:

1. Alle Programmierer sind in der Regel ziemlich faul und möchten nicht jedes Mal die komplette Adresse zu Ihrer Webseite eingeben müssen.
2. Dies funktioniert nur, wenn Sie die Webseite online gestellt haben und diese dann dort anschauen. Wenn Sie die Webseite jedoch auf Ihrem PC zu Testzwecken ansehen wollen, wird dies nicht funktionieren.
3. Ändert sich die Adresse Ihrer Webseite beispielsweise von http://www.ihreseite.de in http://www.meineseite.de, müssen sie die die Dateipfade in allen Dateien wieder ändern. Das ist sehr aufwändig!

Achtung! Wenn Sie die komplette URL verwenden, dann beginnen Sie diese immer mit http:// und nicht gleich mit www., da der Browser sonst denkt, dass es sich um ein Verzeichnis handelt und die Seite kann nicht gefunden werden!

Achtung! Sollten Sie eine Seite einer anderen Webseite aufrufen möchten, müssen Sie immer die komplette URL angeben. Beispiel: Ihre Seite ist http://www.ihreseite.de und Sie möchten http://www.andereseite.de aufrufen. Hier ist die komplette URL der anderen Seite notwendig!

Beginnender Slash (/)

Ein Slash ist der deutsche Schrägstrich. Sollten Sie bei Links oder bei Bildern auf interne - also unter Ihrer Domain befindliche - Inhalte verweisen wollen, hilft Ihnen der Slash, um diese Adresse abzukürzen.

Steht der Slash am Anfang einer Adresse, wie in nachfolgendem Beispiel, so bedeutet dies, dass der Browser im Hauptverzeichnis der Domain nachschauen soll, um das gesuchte Element zu finden. Der beginnende Slash ersetzt also die eigentliche Domain.
Beispiel: Geben Sie in Ihren HTML-Dokumenten diese Adresse z.B. für einen Link ein, sieht der Browser im Hauptverzeichnis nach. Das ist in diesem Fall die Domain, weil die Domain keinen Überordner oder -verzeichnis haben kann. Nun folgen der Ordner webseiten/ und die Datei seite1.htm. Dem Browser wird also gesagt, dass er in das Hauptverzeichnis (http://www.meineseite.de/) gehen soll, dann in den Ordner webseiten/, der sich darin befindet und anschließend die Datei seite1.htm öffnen, die sich in diesem Ordner befindet.

Bei dieser Variante sparen Sie sich also das ständige Eingeben des Protokolls und der Domain. Außerdem funktioniert die Webseite auch dann noch, wenn sich die Domain Ihrer Webseite ändert, da Sie hier ja keine Domainangaben machen.

Hinweis! Wenn Sie die Webseite auf Ihrem eigenen PC ansehen und die Dateipfade mit dem Slash beginnen, wird Ihr PC auch im Hauptordner suchen. Dies ist bei Windows-PCs das Festplatten-Laufwerk (z.B. C:). Befindet sich Ihre Webseite also nicht direkt im Ordner C:, können Sie diese offline, auf Ihrem PC, nicht komplett richtig ansehen, sondern nur im Web.

Ein Punkt + Slash (./)

Wenn Sie eine Datei aufrufen möchten, die sich im selben Verzeichnis befindet, wie die aktuelle, benötigen Sie ./ dazu.
Beispiel: Diese Anweisung sagt dem Browser, dass er nach seite2.htm im selben Ordner suchen soll, in dem sich auch die aktuell aufgerufene Datei befindet. Dies funktioniert also nur, wenn die aktuelle Seite auch im gleichen Ordner ist, wie die neu aufgerufene.

Hinweis! Die Angabe von ./ für das gleiche Verzeichnis ist nicht zwingend nötig. Alle Browser suchen auch im gleichen Ordner, in dem sich das aktuelle Dokument befindet, wenn kein ./ angegeben wurde, sondern für das Beispiel oben einfach nur seite2.htm.

Zwei Punkte + Slash (../)

Um eine Datei aufzurufen, die sich im "Elternordner" befindet, müssen Sie ../ verwenden.
Beispiel: Bei diesem Beispiel wird der Browser angewiesen die Datei index.htm im übergeordneten Verzeichnis des aktuellen HTML-Dokuments zu suchen. Dies funktioniert nur dann, wenn sich die aufzurufende Datei direkt im nächst höher gelegenen Ordner befindet.

Hinweis! Selbstverständlich kann das ../ auch wiederholt werden, wenn Sie eine Datei aufrufen möchten, die in einem zwei oder mehr Ebenen höher gelegenen Verzeichnis liegt. Beispiel: ../../../test.html ruft die Datei test.html auf, die vom aktuellen Dokument aus gesehen drei Ordner höher liegt.