06 – Ordner & Pfade 🗂️

Ordnung ist das halbe Web – versteh, wie Pfade funktionieren

🎯 1. Einleitung & W3Schools

In Kapitel 06 hast du gelernt, wie man ein Webprojekt strukturiert, Pfade schreibt und Fehler vermeidet.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🧠 2. KI-Prompt-Training – strukturiert denken

Deine Aufgabe: Formuliere einen Prompt, der keine Ordnerstruktur liefert, sondern dir hilft, zu verstehen, wie relative Pfade funktionieren.

❌ Vermeide: „Gib mir eine Ordnerstruktur für mein Projekt.“ ✅ Fragen, die denken erzwingen:

„Warum funktioniert ein Pfad wie ../css/style.css in einer Unterordner-HTML-Datei, aber nicht in der index.html?“
„Erkläre mir, warum man nie absolute Pfade wie C:\projekt\style.css im Web verwendet.“
„Wie zählt man die Ordner-Ebenen, um den richtigen Pfad zu finden?“

💡 Merke: Wenn die KI dir eine Ordnerstruktur zeichnet, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht kopiere!

Ein Schüler hat folgende Projektstruktur und Pfade:

projekt/
├── index.html
├── kontakt.html
├── css/style.css
└── pages/
    └── about.html

In index.html steht: <link rel="stylesheet" href="css/style.css"> → funktioniert. In pages/about.html steht: <link rel="stylesheet" href="css/style.css"> → funktioniert nicht.

Schreibe (auf Papier oder in Textdatei):

Warum funktioniert der Pfad in about.html nicht?
Welcher korrekte relative Pfad müsste in about.html stehen?
Erkläre anhand der Ordnerstruktur, warum .. „eine Ebene höher“ bedeutet.
Warum ist es wichtig, immer den gesamten Projektordner in VS Code zu öffnen – und nicht nur eine HTML-Datei?

⚠️ Hinweis: Wer nur den richtigen Pfad hinschreibt, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Umsetzung!

🧱 Aufgabe 2: Strukturiere bewusst – erst nach der Analyse!

Erstelle ein Projektverzeichnis mein-projekt mit folgender Struktur:

mein-projekt/
├── index.html
├── kontakt.html
├── ueber-uns.html
├── css/
│   └── style.css
└── assets/
    ├── bilder/
    │   └── logo.png
    └── docs/
        └── info.pdf

Anforderungen:

Alle HTML-Dateien verlinken korrekt auf css/style.css
In index.html wird logo.png als Bild eingebunden
In kontakt.html gibt es einen Link zu info.pdf
Öffne den gesamten Ordner mein-projekt in VS Code mit Live Server

💡 Teste selbst:
- Wird das CSS in allen Seiten geladen?
- Wird das Bild in index.html angezeigt?
- Öffnet sich die PDF beim Klick auf den Link?

📊 Beurteilungskriterien – Übung 06: Ordner & Pfade

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis.

Kriterium	✅	➖	❌
Relative Pfade: Kannst du im Gespräch erklären, warum `../` nötig ist – und wie man den Pfad anhand der Ordnerstruktur ableitet?
Projektstruktur: Weißt du, warum man den gesamten Projektordner in VS Code öffnen muss – und was passiert, wenn man es nicht tut?
Fehleranalyse: Kannst du typische Pfadfehler erkennen und beheben – ohne Trial-and-Error?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum steht in about.html ../css/style.css?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.