Skip to content

V3_Pfade

Jump to bottom
hzuellig edited this page Mar 3, 2025 · 1 revision

HTML File Pfade (Adressierung)

Zweck

Websiten sind modular aufgebaut. Im Unterschied zu einem Word File, bei dem alle Ressourcen wie Bilder in ein Dokument eingebunden werden, kann eine Seite Elemente enthalten, die in anderen Ordnern oder gar anderen Server liegen. Dafür brauchen wir die Adressierung, damit der Browser weiss, was wo liegt und zusammengefügt werden soll.

Ein Dateipfad beschreibt den Speicherort einer Datei in der Ordnerstruktur einer Website. Dateipfade werden verwendet, wenn auf externe Dateien verlinkt wird, wie z.B.:

  • Web-Seiten
  • Bilder
  • Stilvorlagen
  • JavaScripts
  • Fonts

Drei Beispiel von Anwendungen, bei denen ihr mit Pfaden zu tun hattet:

<link rel="stylesheet" href="style.css"> <!-- Pfad im href (Hypertext Reference) Attribut -->



<style>
@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); /*Pfad im url (Unified Resource Locator Attribut) */
}
</style>

Absolute und Relative Pfade

Absolut

Ein absoluter Dateipfad ist die vollständige URL zu einer Datei, diese Art von Pfad wird benutzt, wenn die andere Datei auf einem anderen Server oder einer anderen Domain liegt. Die URL enthält den Domainnamen und von dort her alle Ordner, Unterordner und zuletzt die Datei.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Bei relativen File Paths bildet sich der Pfad aus dem hierarchischen Bezug der Datei, in der der Link liegt, zur Datei, die eingebunden wird. Ihr denkt immer von der Datei aus, in der der Link liegt.

Das Bild liegt nicht auf demselben Server wie die html Page:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/%28Orgueil%29_-_L%27%C3%89glise_Saint-Ferr%C3%A9ol_-_Voute_du_choeur.jpg/500px-%28Orgueil%29_-_L%27%C3%89glise_Saint-Ferr%C3%A9ol_-_Voute_du_choeur.jpg" alt="Orgueil - Saint Ferréol Church - Vault in trompe-l'oeil of the choir. ">

Relativ

Ein relativer Dateipfad zeigt vom Ort der Datei, die auf eine Ressource verweist auf den Ort dieser Ressource. Liegt sie auf derselben Ebene, ist es einfach, der relative Dateipfad besteht aus dem Namen der fremden Ressource.

<img src="seite2.html"> <!--The "seite2.html" file is located in the same folder as the current page -->

Liegt sie in einem Ober- oder Unterordner, geht der Pfad durch die Ebenen der Ordner durch. Der Verweis ../ geht aus dem Ordner raus in den übergeordneten Ordner.

<img src="../seite2.html">

Der Verweis ordnername/file.html geht in einen Ordner auf der aktuellen Ebene rein und greift dort das File mit dem Namen file.html.

<img src="seiten/seite2.html">

Eine architektonische Vorstellung kann helfen: Stell dir die relative Adressierung wie Angaben in einem Gebäude vor. Alle Gegenstände, die im selben Zimmer liegen, kannst du direkt adressieren. Um aus einem Zimmer rauszugehen, musst du erst zur Tür raus. Dies ist die Analogie, um aus einem Ordner rauszukommen. Willst du in ein anderes Zimmer rein und dort etwas holen, gibt du den Namen des Zimmers an. Dies ist die Analogie, um in einen Ordner einzusteigen. Du musst aber bereits auf dem Gang (auf derselben Ebene, wie das Zimmer) sein.

Auf W3School nachlesen: https://www.w3schools.com/html/html_filepaths.asp

Clone this wiki locally