📁 Arbeitsauftrag: Ordnerstruktur im Webprojekt

In diesem Arbeitsauftrag lernst du, wie du eine korrekte und saubere Ordnerstruktur für ein Webprojekt erstellst.

➡ Du brauchst dieses Wissen später für Bildergalerien, Carousels, Musikplayer und mehr.

1️⃣ Projekt-Ordner korrekt anlegen

Erstelle einen neuen Projektordner. Nenne ihn zum Beispiel:

mein_webprojekt

Lege in diesem Ordner folgende Unterordner an:

mein_webprojekt/
│
├── bilder/
├── audio/
├── css/
├── js/
└── index.html

Diese Struktur ist wichtig, damit du später alles sauber und übersichtlich hältst.

So soll dein Ordner am Ende aussehen:

Beispiel einer sauberen Ordnerstruktur

2️⃣ Projekt im Visual Studio Code richtig öffnen

Damit HTML die Bilder und Audios korrekt findet, musst du immer den gesamten Projektordner öffnen.

So geht’s:

  1. Öffne Visual Studio Code
  2. Klicke oben auf Datei → Ordner öffnen…
  3. Wähle mein_webprojekt
  4. Bestätigen → Fertig!

❌ Fehler: Nur die index.html öffnen → Bilder/Audio können nicht gefunden werden.

3️⃣ Bilder richtig ablegen & referenzieren

Lege deine Bilder in den bilder/-Ordner.

mein_webprojekt/
└── bilder/
    ├── tag1.jpg
    ├── banane-muesli.jfif
    └── wald.avif

So bindest du ein Bild in HTML ein:

<img src="bilder/banane-muesli.jfif" alt="Frühstück" class="img-fluid">

Wichtig: Der Pfad bilder/dateiname muss exakt dem Ordnernamen entsprechen. Groß- & Kleinschreibung ist wichtig (Linux-Webserver!).

4️⃣ Audiodateien richtig ablegen & einbinden

Lege Musik oder Soundeffekte in den Ordner audio/.

mein_webprojekt/
└── audio/
    └── hintergrundmusik.mp3

Einbinden in HTML:

<audio controls>
  <source src="audio/hintergrundmusik.mp3" type="audio/mpeg">
</audio>

5️⃣ Typische Fehler vermeiden

Merke: Alles muss im gleichen Projektordner liegen – sonst geht es schief.

6️⃣ Aufgabe: Projekt mit Ordnerstruktur anlegen

Erstelle ein Webprojekt und füge folgende Punkte ein:

  1. Erstelle den Ordner mein_webprojekt
  2. Füge Unterordner ein:
    • bilder/
    • audio/
    • css/
    • js/
  3. Lege mindestens 2 Bilder in bilder/ ab
  4. Lege mindestens 1 mp3-Datei in audio/ ab
  5. Create eine index.html
  6. Binde ein Bild & eine Audiodatei korrekt ein
  7. Öffne das Projekt in VS Code als gesamten Ordner

➡ Diese Aufgabe musst du sicher beherrschen, bevor du Bootstrap-Karussells und Bewertungsseiten erstellst.