Schritt-für-Schritt

1

Thema wählen & planen

Bevor ihr eine Zeile Code schreibt, müsst ihr wissen, worüber eure Website sein soll. Ein gutes Thema hat genug Inhalt für 4 Seiten!

So findet ihr ein gutes Thema:

Was interessiert euch wirklich? (Sport, Musik, Tiere, Technik, Kochen, …)
Gibt es genug zu schreiben? (mind. 150 Wörter pro Seite!)
Lässt es sich in 3 Unterseiten aufteilen?

Plant eure 4 Seiten:

📄 index.html → Startseite: Einführung ins Thema
📄 seite1.html → Unterseite 1: Teilaspekt A
📄 seite2.html → Unterseite 2: Teilaspekt B
📄 seite3.html → Unterseite 3: Teilaspekt C oder Fazit

Beispiel: Thema „Hunde"

Startseite → Was sind Hunde? Geschichte, Domestizierung
Seite 1 → Beliebte Rassen & ihre Eigenschaften
Seite 2 → Hunde richtig halten & pflegen
Seite 3 → Hunde als Arbeitstiere (Polizei, Rettung, …)

✅ Schritt 1 abgeschlossen wenn:

Ich habe mein Thema gewählt
Ich weiß, was auf jeder der 4 Seiten steht
Ich habe mein Thema mit der Lehrperson besprochen

2

Farben aussuchen

Gute Websites haben eine durchdachte Farbpalette – nicht zu viele Farben, aber auch nicht langweilig. Sucht euch 3–4 Farben aus, die zusammenpassen.

Welche Farben braucht ihr?

🎨 Hauptfarbe – für Header, Navigation, Überschriften
z.B. ein dunkles Blau, Grün oder Rot
✨ Akzentfarbe – für Hover-Effekte, Highlights
Soll sich von der Hauptfarbe abheben
🖼️ Hintergrundfarbe – für die gesamte Seite
Meist sehr hell (fast weiß) oder weiß
🖊️ Textfarbe – für normalen Text
Fast schwarz ist am besten lesbar

Wo findet ihr Farben?

coolors.co – Drückt die Leertaste für neue Paletten!
color.adobe.com – Adobe Color mit Harmonie-Vorschlägen
colorhunt.co – fertige Paletten zum Inspirieren

Wie schreibt man Farben im CSS? Als Hex-Code – eine Raute gefolgt von 6 Zeichen:

/* Beispiele für Hex-Farben: */
header { background-color: #1e3c5a; }   /* dunkles Blau */
nav a   { background-color: #2e6a8a; }   /* mittleres Blau */
body    { background-color: #f0f5fa; }   /* sehr helles Blau */
body    { color: #1a2a3a; }             /* fast schwarz */

✅ Schritt 2 abgeschlossen wenn:

Ich habe meine 3–4 Hex-Farben notiert
Ich weiß, welche Farbe wofür verwendet wird

3

Ordner anlegen & Dateien erstellen

Bevor ihr Code schreibt, legt ihr die Struktur an:

Einen neuen Ordner anlegen – z.B. mein-projekt auf dem Desktop
Darin einen Unterordner namens bilder anlegen
Die Vorlage herunterladen (Link unten) und in euren Ordner kopieren
Die Vorlage 4x kopieren und umbenennen: index.html, seite1.html, seite2.html, seite3.html
Die CSS-Vorlage herunterladen und als style.css speichern

📁 mein-projekt/
  📄 index.html ← Vorlage kopiert & umbenannt
  📄 seite1.html ← Vorlage kopiert & umbenannt
  📄 seite2.html ← Vorlage kopiert & umbenannt
  📄 seite3.html ← Vorlage kopiert & umbenannt
  📄 style.css ← CSS-Vorlage
  📁 bilder/ ← leerer Ordner, kommt noch!

📥 Vorlagen zum Herunterladen:

⬇️ vorlage.html herunterladen – das HTML-Grundgerüst
⬇️ style.css herunterladen – das CSS-Grundgerüst

✅ Schritt 3 abgeschlossen wenn:

Projektordner mit bilder/-Unterordner angelegt
index.html, seite1–3.html und style.css vorhanden
index.html öffnet sich im Browser (auch ohne Styling)

4

Das CSS gestalten

Jetzt passt ihr die style.css auf eure Farben und euren Stil an. Öffnet die Datei in VS Code und sucht nach den Stellen mit einem Pfeil-Kommentar (← eure Farbe).

Diese Stellen müsst ihr mindestens anpassen:

Hintergrundfarbe der Seite:

body {
  background-color: #eurer-hex-code;  /* ← hier eure Farbe */
}

Header-Farbe:

header {
  background-color: #eure-hauptfarbe;
}

Navigation:

nav    { background-color: #etwas-dunkler; }
nav a  { background-color: #eure-hauptfarbe; }
nav a:hover { background-color: #eure-akzentfarbe; }

Eigene Box-Klassen erstellen:

/* Klasse definieren – mit Punkt davor: */
.box-meine {
  border-left: 6px solid #eure-farbe;
  background-color: #sehr-helle-variante;
}

/* Im HTML verwenden – ohne Punkt: */
<section class="box-meine"> ... </section>

✅ Schritt 4 abgeschlossen wenn:

Meine Farben sind im CSS eingetragen
Header und Navigation sehen nach meinen Farben aus
Ich habe mindestens 2 eigene Box-Klassen definiert
Ein Hover-Effekt auf der Navigation funktioniert

5

Inhalte in die HTML-Seiten schreiben

Jetzt füllt ihr eure HTML-Dateien mit echtem Inhalt. Fangt mit der index.html (Startseite) an und arbeitet euch dann zu seite1, seite2, seite3 vor.

Auf jeder Seite:

Ändert den <title> im <head>
Schreibt euren eigenen Text (mind. 150 Wörter)
Fügt mindestens 1 Bild mit alt-Text ein
Verwendet mindestens 2 verschiedene Box-Klassen
Setzt class="aktiv" beim richtigen Nav-Link

So fügt ihr ein Bild ein:

<!-- 1. Bild in den bilder/-Ordner speichern -->
<!-- 2. Dann so einbinden: -->
<figure class="bild-box">
  <img
    src="bilder/mein-bild.jpg"
    alt="Beschreibung des Bildes"
  />
  <figcaption>Bildunterschrift</figcaption>
</figure>

So setzt ihr class="aktiv" richtig:

<!-- Auf index.html: -->
<a href="index.html" class="aktiv">Startseite</a>

<!-- Auf seite1.html: (nur hier das aktiv wechseln!) -->
<a href="seite1.html" class="aktiv">Seite 1</a>

✅ Schritt 5 abgeschlossen wenn:

Alle 4 Seiten haben eigenen Text (mind. 150 Wörter je)
Mindestens 3 Bilder mit alt-Text auf der Website
2+ verschiedene Box-Klassen verwendet
Navigation zeigt auf jeder Seite die richtige "aktiv"-Seite
Footer hat meinen Namen und Quellen

6

Testen & abgeben

Bevor ihr abgebt, testet eure Website gründlich! Öffnet index.html im Browser und klickt alles durch.

Die finale Checkliste:

📦 So gebt ihr ab:

Ordner benennen: Nachname_Vorname_Website
Ihr ladet eure fertigen HTML-Dateien auf den von der Schule zur Verfügung gestellten Server. Das machen wir gemeinsam am 16. Juni im Unterricht.

🎉 Fertig! Viel Erfolg, liebe 3B!

Bei Fragen schaut ins Nachschlagewerk oder fragt die Lehrperson.

📋 Zur Aufgabenstellung →

HTML & externes CSS

🗺️ Eure Bauanleitung