🎄Willkommen zum 9. Türchen 🎄

– HTML sauber strukturieren –

Hallo Moritz!
Heute räumen🧹wir ein bisschen auf. Nicht im Zimmer, sondern wir bringen Ordnung in deinen HTML-Code 💻 und wir bringen Ordnung in deine Dateien📁.
So arbeiten richtige Webentwickler – und du ab heute auch!

📝 Deine Aufgabe heute

Du strukturierst deinen HTML-Code sauber und übersichtlich.
Du ordnest deine Webseite in Ordnern, damit alles gut sortiert ist.

Teil 1 – Deinen HTML-Code sauber strukturieren

Warum das wichtig ist:

Du findest dich besser zurecht.
Fehler fallen schneller auf.
Dein Code sieht professionell aus und lässt sich später leichter erweitern.

So sollte eine sauber eingerückte Datei aussehen:

<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Moritz Weihnachtsseite</title> 
    <link rel="stylesheet" href="../style.css"> 
  </head> 
  <body> 
    <h1>Frohe Weihnachten von Moritz!</h1>
    <nav>  
      <a href="../index.html">Startseite</a>  
      <a href="../weihnachten/index.html">Weihnachten</a>  
      <a href="../neujahr/index.html">Neujahr</a>  
    </nav>  

    <p>Hier steht dein Grußtext...</p>  

    <img src="../bilder/weihnachten.jpg" width="300">  
  </body>
</html>

Achte dabei auf:

Einrückung mit zwei Leerzeichen
Ordentliche Reihenfolge:
- erst head, dann body
- Navigation steht immer oben im body
erst head, dann body
Navigation steht immer oben im body

Teil 2 – Deine Dateien in Ordner sortieren

Jetzt wird deine Webseite richtig professionell aufgebaut – genau wie bei großen Webseiten.

So baust du deine Ordnerstruktur:

Öffne deinen Projektordner moritz-weihnachtsseite.
Erstelle folgende Ordner:
- bilder weihnachten neujahr

Verschiebe die Dateien:

style.css bleibt direkt im Hauptordner
weihnachten.jpg kommt in den Ordner bilder
Die Weihnachtsseite kommt in den Ordner weihnachten und heißt dort index.html
Die Neujahrsseite kommt in den Ordner neujahr und heißt dort ebenfalls index.html
Die Startseite bleibt im Hauptordner und heißt index.html

Am Ende sieht es so aus:

moritz-weihnachtsseite
- index.html
- style.css
- bilder
  - weihnachten.jpg
- weihnachten
  - index.html
- neujahr
  - index.html

Teil 3 – Navigation auf allen Seiten anpassen

Damit alle Seiten funktionieren, brauchst du überall dieselbe Navigation:

<nav> 
  <a href="../index.html">Startseite</a> 
  <a href="../weihnachten/index.html">Weihnachten</a> 
  <a href="../neujahr/index.html">Neujahr</a> 
</nav>

Auf der Startseite verwendest du stattdessen:

<nav> 
  <a href="weihnachten/index.html">Weihnachten</a> 
  <a href="neujahr/index.html">Neujahr</a> 
</nav>

Speichere alle Dateien.

🎉 Was jetzt passiert:

Deine Webseite ist jetzt wie eine echte kleine Website aufgebaut
Alle Seiten liegen in ihren eigenen Ordnern
Die Navigation funktioniert trotzdem überall
Dein Code ist sauber und gut lesbar

Das ist ein großer Schritt – super gemacht!

🎯 Tagesziel erreicht

Du hast deinen HTML-Code sauber formatiert
Du hast eine professionelle Ordnerstruktur erstellt
Du hast verstanden, wie man mit relativen Pfaden arbeitet
Du hast deine komplette Webseite ordentlich sortiert

🎁 Morgen geht es weiter:

Dann installieren wir Git und richten es ein. Der nächste Schritt zum Profi Entwickler!