Dateipfade in HTML

In HTML verweisen wir häufig auf andere Dateien wie Bilder, CSS oder JavaScript. Um diese Elemente korrekt zu laden, müssen wir den richtigen Pfad angeben.

Absoluter Pfad

Ein absoluter Pfad ist eine vollständige URL, die mit dem Protokoll (https://) und der Domain beginnt. Verwende ihn für externe Dateien.

<img src="https://example.com/images/logo.png" alt="Logo">

Relativer Pfad

Ein relativer Pfad definiert den Speicherort relativ zur aktuellen Datei. Das ist die gebräuchlichste Methode innerhalb der Projektstruktur.

<img src="images/photo.jpg" alt="Photo">

Datei im übergeordneten Ordner aufrufen

Wenn sich die Ziel-Datei eine Ebene über der aktuellen befindet, verwende ../, um in den übergeordneten Ordner zu wechseln.

<img src="../assets/image.png" alt="Image from parent folder">

Datei im gleichen Ordner aufrufen

Wenn sich die Datei im selben Ordner wie deine HTML-Datei befindet, gib einfach den Dateinamen an.

<link rel="stylesheet" href="style.css">

Datei in einem Unterordner aufrufen

Wenn sich die Datei in einem Unterordner befindet, gib zuerst den Ordnernamen und dann den Dateinamen an, z. B. 'scripts/main.js'.

<script src="scripts/main.js"></script>

Tipps zur Verwendung von Dateipfaden

Überprüfe stets deine Ordner- und Dateistruktur. Vermeide ungültige Zeichen (z. B. Leerzeichen oder Akzente) und verwende konsistente Benennungen. Denke daran, dass Dateinamen insbesondere auf Servern groß-/kleinschreibungsempfindlich sein können.

Beispiel für eine Projektstruktur

Die untenstehende Ordnerstruktur zeigt, wie ein einfaches HTML-Projekt aussehen könnte:

project/
├── index.html
├── style.css
├── images/
│   └── logo.png
└── scripts/
    └── app.js

In der oben gezeigten Struktur kannst du so auf andere Dateien aus index.html zugreifen. Diese visuelle Darstellung hilft, das Pfadkonzept zu verstehen.

Praktisches Beispiel

Schauen wir uns ein praktisches Beispiel an, wie man in einem echten Projekt korrekt auf verschiedene Dateien verweist:

<!-- Reference to an image -->
<img src="images/logo.png" alt="Logo">

<!-- Reference to a CSS file -->
<link rel="stylesheet" href="style.css">

<!-- JavaScript script -->
<script src="scripts/app.js"></script>

Zusammenfassung

Die genaue Angabe von Pfaden ist besonders bei größeren Projekten entscheidend. Stelle sicher, dass der Pfad der tatsächlichen Dateistruktur entspricht.