W3docs

HTML-Dateipfade

On this page, you can learn about HTML file paths, find the difference between the absolute and relative file paths and see different useful examples.

Ein Dateipfad definiert den Speicherort einer Datei in der Ordnerstruktur einer Website.

Ein Dateipfad wird verwendet, wenn wir auf externe Dateien wie folgende verlinken:

Es gibt absolute und relative Dateipfade.

Absolute Dateipfade

Ein absoluter Dateipfad ist die URL zum Zugriff auf eine Internetdatei.

Beispiel für einen absoluten Dateipfad:

Beispiel für einen absoluten Dateipfad

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Absolute File Path Example</h2>
    <img src="https://www.slrlounge.com/wp-content/uploads/2019/11/Sea-Thru-Underwater-Photography-Algorithm-SLR-Lounge_0001-1000x675.jpg" alt="Sea" style="width:300px" />
  </body>
</html>

Relative Dateipfade

Ein relativer Dateipfad bezieht sich auf eine Datei, die relativ zur aktuellen Seite liegt. Im folgenden Beispiel ist der Pfad root-relativ (beginnt mit /) und verweist auf eine Datei im Ordner images im Stammverzeichnis der Website:

Zu weiteren gängigen relativen Pfaden gehören ./datei.html (gleiches Verzeichnis) und ../ordner/datei.html (übergeordnetes Verzeichnis).

Beispiel für einen relativen Dateipfad:

Beispiel für einen relativen Dateipfad

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Relative File Path Example</h2>
    <img src="/build/images/smile-small.jpg" alt="Smile" width="290" height="260" />
  </body>
</html>

Praxis

Übung

Welche Arten von Dateipfaden gibt es in HTML?