📋
Euer Arbeitsauftrag
Erstellt eine vollständige Website mit 4 Seiten, externem CSS, Bildern und Boxen – zu einem Thema eurer Wahl.
🎯 Die Aufgabe
Ihr erstellt eine vollständige, mehrseitige Website zu einem selbst gewählten Thema. Das Thema muss fundiert und tiefgründig behandelt werden – oberflächliche Seiten mit nur wenigen Sätzen werden nicht akzeptiert.
Jede Schülerin / jeder Schüler arbeitet eigenständig an ihrer/seiner Website und gibt sie als ZIP-Datei ab.
📄
4 HTML-Seiten
Startseite + 3 Unterseiten
🎨
Externes CSS
1 style.css für alle Seiten
🖼️
Mind. 3 Bilder
mit alt-Text, im bilder/-Ordner
📦
Mind. 2 Boxen
verschiedene CSS-Klassen
⚙️ Was muss die Website enthalten?
📁 Dateistruktur
index.html– Startseiteseite1.html– Unterseite 1seite2.html– Unterseite 2seite3.html– Unterseite 3style.css– externes CSSbilder/– Unterordner mit Bildern- Alle im selben Ordner!
🏷️ HTML-Pflicht (jede Seite!)
<meta charset="UTF-8"><meta name="viewport"><link rel="stylesheet"><header> <nav> <main> <footer>- Navigation zu allen 4 Seiten
class="aktiv"korrekt gesetzt
🖼️ Bilder
- Mind. 3 Bilder gesamt
- Alle im
bilder/-Ordner - Jedes mit
alt="..." - Mind. 1× Bild links/rechts neben Text
- Themenrelevant & beschriftet
🎨 Externes CSS
- Hintergrundfarbe, Textfarbe, Schrift
- Header & Navigation gestaltet
- Mind. 1 Hover-Effekt
- Mind. 2 eigene CSS-Klassen
- Kein Inline-CSS im Body!
📦 Boxen & Layout
- Mind. 2 verschiedene Box-Typen
- Boxen durch Klassen gestaltet
- Übersichtlicher Seitenaufbau
- Bild-Text-Kombination vorhanden
✏️ Inhalt & Thema
- Mind. 150 Wörter pro Seite
- Eigene Texte – kein Copy-Paste!
- Keine Rechtschreibfehler
- Quellen im Footer angegeben
- Fundiert & tiefgründig
💡 Thema wählen – so geht's
Wählt ein Thema, das euch wirklich interessiert und das genug Inhalt für 4 Seiten bietet. Teilt es in eine Einführung + 3 Teilaspekte auf.
Hunde
- Start: Geschichte & Domestizierung
- Seite 1: Beliebte Rassen
- Seite 2: Haltung & Pflege
- Seite 3: Hunde als Arbeitstiere
Gaming & E-Sport
- Start: Geschichte des Gamings
- Seite 1: Beliebteste Genres
- Seite 2: E-Sport als Beruf
- Seite 3: Gaming & Gesundheit
Klimawandel
- Start: Was ist Klimawandel?
- Seite 1: Ursachen
- Seite 2: Folgen weltweit
- Seite 3: Was kann ich tun?
Musik & Genres
- Start: Geschichte der Musik
- Seite 1: Genre 1 (z.B. Hip-Hop)
- Seite 2: Genre 2 (z.B. Rock)
- Seite 3: Musik & Gesellschaft
Künstliche Intelligenz
- Start: Was ist KI?
- Seite 1: KI im Alltag
- Seite 2: Chancen & Risiken
- Seite 3: KI & Zukunft der Arbeit
Kulinarik & Länderküchen
- Start: Überblick & Einführung
- Seite 1: Land 1 + Rezept
- Seite 2: Land 2 + Rezept
- Seite 3: Land 3 + Rezept
Weitere Ideen: Sport, Reisen, Astronomie, Psychologie, Nachhaltigkeit, Tiere, Filme, Mode, Geschichte, Technologie …
⚠️ Bitte Thema mit der Lehrperson absprechen, bevor ihr anfangt!
✅ Checkliste – vor der Abgabe
Hakt jeden Punkt ab. Erst wenn alle grün sind, könnt ihr abgeben!
📁 Dateien & Struktur
- Projektordner mit
bilder/-Unterordner angelegt -
index.html,seite1–3.htmlundstyle.cssvorhanden - Alle Bilder im
bilder/-Ordner und werden angezeigt - Keine Leerzeichen in Dateinamen
🏷️ HTML (auf jeder Seite)
-
<meta charset="UTF-8">vorhanden -
<meta name="viewport">vorhanden -
<link rel="stylesheet" href="style.css">vorhanden -
<header> <nav> <main> <footer>vorhanden - Navigation: alle Links funktionieren
-
class="aktiv"auf jeder Seite korrekt gesetzt - Mind. 3 Bilder mit
alt-Text - Mind. 1× Bild links oder rechts neben Text
- Mind. 2 verschiedene Box-Klassen verwendet
🎨 CSS
- Alles im externen CSS – kein
style="..."im Body! - Header und Navigation gestaltet
- Mind. 1 Hover-Effekt funktioniert
- Mind. 2 eigene Klassen definiert und verwendet
✏️ Inhalt
- Jede Seite: mind. 150 Wörter eigener Text
- Keine Rechtschreibfehler (Rechtschreibprüfung genutzt!)
- Eigene Formulierungen – kein Copy-Paste
- Quellen im Footer jeder Seite angegeben
- Thema ist fundiert und tiefgründig ausgearbeitet
🏆 Beurteilungsraster
So wird eure Website bewertet. Insgesamt sind 36 Punkte zu erreichen.
| Kriterium | Max. | Sehr gut (4) | Gut (3) | Befried. (2) / Gen. (1) |
|---|---|---|---|---|
| Dateistruktur 4× HTML, style.css, bilder/ |
/ 4 | Alle Dateien korrekt, sinnvoll benannt | Alle da, kleinere Fehler | Dateien fehlen / kaum Struktur |
| HTML-Grundgerüst meta, link, header/main/footer |
/ 4 | Vollständig auf allen 4 Seiten | Vorhanden, 1–2 Fehler | Unvollständig / kaum vorhanden |
| Externes CSS style.css, kein Inline-CSS |
/ 4 | Alles im CSS, kein Inline, reichhaltig | CSS da, wenig Inline-CSS | Häufig Inline / kein externes CSS |
| Navigation nav, Links, class aktiv |
/ 4 | Gestaltet, alle Links korrekt, aktiv-Klasse richtig | Links ok, wenig gestaltet | Links defekt / fehlt |
| CSS-Gestaltung Farben, Hover, 2+ Klassen |
/ 4 | Durchdachtes Design, Hover, 3+ Klassen | Ansprechend, Hover, 2 Klassen | Kaum Gestaltung / 1 Klasse |
| Bilder 3+, alt-Text, bild-links/rechts |
/ 4 | 3+ Bilder, alt-Text, Bild-Text-Kombi | 3 Bilder, alt-Text meist da | Zu wenige / alt-Text fehlt |
| Boxen & Layout 2+ Box-Typen, Layout |
/ 4 | 2+ Boxen, Bild-Text, kreatives Layout | 2 Boxen, einfaches Layout | 1 Boxtyp / kein Layout |
| Inhalt & Tiefe 150 Wörter/Seite, eigene Texte |
/ 4 | Tiefgründig, eigene Texte, Quellen | Ausreichend, meist eigene Texte | Knapp / Copy-Paste |
| Gesamteindruck Kreativität, Konsistenz |
/ 4 | Professionell, stimmig, kreativ | Stimmig, guter Aufwand | Uneinheitlich / wenig Aufwand |
| Gesamtpunkte | / 36 | |||
| Notenschlüssel: Sehr gut: 33–36 | Gut: 27–32 | Befriedigend: 20–26 | Genügend: 13–19 | Nicht genügend: 0–12 | ||||
📥 Das vollständige Beurteilungsraster als Word-Datei zum Herunterladen:
⬇️ Beurteilungsraster herunterladen (.docx)📤 Abgabe
So gebt ihr ab:
-
Ordner benennen:
Nachname_Vorname_Website - Abgabetermin: 16. Juni 2026
- HTML Ordner hochladen: Im Unterricht laden wir gemeinsam am 16. Juni eure HTML-Dateien auf den Server hoch. Die Schule stellt den Server zur Verfügung.