# HTML Pfade-Übung für die 10. Klasse

## Übungsziel
Diese Übung dient dem Erlernen relativer Pfade in HTML. Die Schüler sollen verstehen, wie man von verschiedenen Verzeichnisebenen aus auf Dateien zugreifen kann.

## Verzeichnisstruktur

html_pfade_uebung/
├── index.html (Hauptverzeichnis)
├── bild1.jpg
├── tiere/
│   ├── index.html
│   ├── bild2.jpg
│   ├── hunde/
│   │   ├── index.html
│   │   ├── bild3.jpg
│   └── katzen/
│       ├── index.html
│       ├── bild4.jpg
├── pflanzen/
│   ├── index.html
│   ├── bild5.jpg
│   ├── baeume/
│   │   ├── index.html
│   │   ├── bild6.jpg
│   └── blumen/
│       ├── index.html
│       ├── bild7.jpg
└── fahrzeuge/
    ├── index.html
    ├── bild8.jpg
    └── autos/
        ├── index.html
        ├── bild9.jpg

## Aufgabenstellung für Schüler

1. Entpacke das ZIP-Archiv
2. Öffne die index.html im Hauptverzeichnis im Browser
3. Du siehst ein Navigationsmenü auf der linken Seite
4. Die Bilder werden nicht angezeigt, weil die Pfade fehlen
5. Öffne die HTML-Datei in einem Texteditor
6. Ergänze die src-Attribute der img-Tags mit den korrekten relativen Pfaden
7. Die Kommentare im Code geben dir Hinweise!
8. Speichere und aktualisiere die Ansicht im Browser
9. Nutze das Navigationsmenü, um zu anderen Seiten zu wechseln
10. Wiederhole dies für alle HTML-Dateien in allen Verzeichnissen

## Neue Features

✨ **Navigationsmenü:** Jede Seite hat nun ein Menü auf der linken Seite, mit dem zwischen allen Seiten navigiert werden kann.
✨ **Breadcrumb:** Zeigt den aktuellen Pfad an
✨ **Aktive Seite:** Die aktuelle Seite ist im Menü hervorgehoben
✨ **Hierarchische Darstellung:** Das Menü zeigt die Verzeichnisstruktur mit Einrückungen

## Wichtige Konzepte

- **Gleiches Verzeichnis:** dateiname.jpg
- **Unterverzeichnis:** unterordner/dateiname.jpg
- **Übergeordnetes Verzeichnis:** ../dateiname.jpg
- **Zwei Ebenen höher:** ../../dateiname.jpg

## Zusätzliche Übung: Navigation

Die Schüler können auch die Pfade im Navigationsmenü analysieren:
- Wie kommt man vom Hauptverzeichnis zu "Hunde"?
- Wie kommt man von "Blumen" zu "Autos"?
- Welche Pfade werden verwendet?

## Lösung

Die Lösungen sind als Kommentare in den HTML-Dateien versteckt (suche nach "LÖSUNG").

## Lehrerhinweise

- Beginnen Sie mit der index.html im Hauptverzeichnis
- Lassen Sie die Schüler zunächst die Verzeichnisstruktur im Explorer/Finder erkunden
- Besprechen Sie das Konzept von relativen vs. absoluten Pfaden
- Die Übung deckt alle drei Ebenen ab und erfordert verschiedene Pfadkonstruktionen
- Jede HTML-Datei enthält alle 9 Bilder, sodass die Schüler unterschiedliche Pfade üben müssen
- Das Navigationsmenü zeigt praktisch, wie relative Pfade auch für Links funktionieren

Viel Erfolg!
