06 – Ordner & Pfade 🗂️

Ordnung ist das halbe Web – lerne, wie Pfade funktionieren

🏗️ 1. So beginnst du ein Webprojekt – Schritt für Schritt

Bevor du die erste Zeile Code schreibst, plane dein Projekt:

Thema festlegen: Was willst du zeigen? (z. B. Steckbrief, Galerie, Rezeptebuch)
Seiten planen: Welche Seiten brauchst du? (Startseite, Kontakt, Galerie, Impressum)
Ordner anlegen: Erstelle die Struktur vorher – nicht währenddessen!
Erste Datei: Beginne mit index.html im Hauptordner.

Beispiel: Du erstellst eine Künstlerseite. Dein Ordner könnte so aussehen:

/kuenstler-projekt/
├── index.html
├── kontakt.html
├── galerie.html
├── css/style.css
└── assets/
    ├── bilder/
    │   ├── werk1.jpg
    │   └── werk2.jpg
    └── logo.svg

💡 Professioneller Start:
Öffne in VS Code immer den gesamten Projektordner –
niemals nur eine einzelne Datei!

📚 Vertiefung auf W3Schools – Relative Pfade

W3Schools erklärt, wie Pfade zwischen Dateien funktionieren – mit interaktiven Beispielen.

🔗 W3Schools: File Paths

📂 2. Warum eine klare Ordnerstruktur?

Ohne Ordnung scheitert alles – besonders bei:

Bildern, die nicht angezeigt werden
CSS-Dateien, die nicht laden
Links, die ins Nichts führen

Eine Website besteht selten aus nur einer Datei. Schon bei zwei Seiten, einem CSS-File und einem Bild brauchst du Ordnung. Ohne klare Struktur verlierst du schnell den Überblick – und die Pfade stimmen nicht mehr.

📌 Merke: Eine gute Ordnerstruktur ist wie ein gut sortierter Werkzeugkasten – du findest alles sofort, und nichts geht kaputt.

⚠️ Fehler Nr. 1: Nur eine HTML-Datei öffnen → Pfade funktionieren nicht! → Öffne immer den gesamten Projektordner in VS Code.

🔗 3. Relative vs. Absolute Pfade

Relative Pfade sind der Standard im Web:

bild.jpg → Datei im selben Ordner
assets/bild.jpg → Unterordner
../style.css → Eine Ebene höher („..“ = parent)

Absolute Pfade (z. B. C:\mein-projekt\style.css) funktionieren nicht im Browser!

💡 Merke: Im Web zählt nur die Ordnerstruktur – nicht dein Laufwerk!

🔍 Praxis: Pfad von verschiedenen Orten zur CSS-Datei

Aktuelle Datei	Korrekter Pfad zu `css/style.css`
`index.html` (im Root)	`css/style.css`
`kontakt.html` (im Root)	`css/style.css`
`modules/01-html-elements.html`	`../css/style.css`
`pages/ueber-uns.html`	`../css/style.css`

📌 Tipp: Zähle die Ordner-Ebenen – und nutze .. so oft wie nötig!

🧱 4. Empfohlene Ordnerstruktur

/html-css-tutorial/
├── index.html
├── css/style.css
├── js/main.js
├── kapitel/
├── uebungen/
├── abschluss/
└── assets/
    ├── images/
    ├── favicon.svg
    └── logo.svg

Diese Struktur ist:

✅ Übersichtlich
✅ Skalierbar
✅ Kompatibel mit deinem Tutorial-System

❌ 5. Häufige Fehler & Lösungen

Fehler	Lösung
Bild wird nicht angezeigt	Pfad prüfen: `<img src="assets/images/logo.svg">`
CSS lädt nicht	Im `<head>`: `<link rel="stylesheet" href="css/style.css">`
Link führt ins Nichts	Relativer Pfad: `<a href="kapitel/01-html-elements.html">...</a>`

➡️ 6. Warum das jetzt wichtig ist

Ab jetzt baust du mehrseitige Websites. Ohne korrekte Pfade funktioniert nichts: → Kein CSS, → keine Bilder, → keine Links zwischen Seiten.

🌟 Mit dieser Ordnung legst du das Fundament für alle zukünftigen Projekte – in der Schule und darüber hinaus.

🧠 7. KI als Lernpartner – guter Prompt

❌ Schlecht: „Gib mir eine Website.“ ✅ Gut: „Kannst du mir eine klare Ordnerstruktur für mein HTML/CSS-Projekt vorschlagen – mit sinnvollen Namen für Kapitel, Übungen, Assets – und erkläre, wie relative Pfade funktionieren?“