Aktivität 01
Pair Programming: Erste HTML-Seite
Paare schreiben gemeinsam eine HTML-Seite mit Überschrift, Absatz, Bild und Link. Der eine tippt, der andere navigiert und testet im Browser. Nach 15 Minuten wechseln die Rollen und sie fügen CSS-Farben hinzu.
Erklären Sie die grundlegende Struktur einer HTML-Seite und die Rolle von Tags.
ModerationstippFordern Sie die Paare während der Pair Programming auf, sich abzuwechseln: Eine Person tippt, die andere erklärt, was der nächste Schritt ist, bevor sie ihn ausführt.
Worauf zu achten istGeben Sie jedem Schüler eine Karte mit einem HTML-Tag (z.B. `<p>`, `<img>`, `<a>`) und einer CSS-Eigenschaft (z.B. `color`, `font-size`). Die Schüler schreiben eine kurze Erklärung, was der Tag bewirkt bzw. welche Eigenschaft verändert wird, und wie man sie mit einem Beispielwert anwendet.
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→· · ·
Aktivität 02
CSS-Stationen: Styling üben
Richten Sie vier Stationen ein: Farben ändern, Schrift formatieren, Bilder rahmen, Layout anpassen. Gruppen rotieren alle 10 Minuten, notieren Code-Änderungen und Ergebnisse.
Entwerfen Sie eine einfache Webseite mit Text, Bildern und Links unter Verwendung von HTML.
ModerationstippStellen Sie bei den CSS-Stationen sicher, dass jede Station ein konkretes Ziel hat, z.B. 'Ändere die Schriftfarbe aller Überschriften in Blau', damit die Schüler nicht planlos experimentieren.
Worauf zu achten istZeigen Sie eine einfache Webseite im Browser und eine danebenliegende HTML/CSS-Datei. Stellen Sie gezielte Fragen: 'Welcher Tag ist für die Überschrift verantwortlich?', 'Wie ändert sich die Farbe des Textes, wenn wir den Wert bei `color` ändern?', 'Welche CSS-Regel sorgt für den Abstand zwischen den Absätzen?'
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→· · ·
Aktivität 03
Webseiten-Entwurf: Persönliche Seite
Jeder Schüler entwirft eine eigene Seite über Hobbys mit HTML und CSS. Testen im Browser, dann in Kleingruppen Feedback geben und verbessern.
Analysieren Sie, wie CSS verwendet wird, um das Aussehen und Layout einer Webseite zu steuern.
ModerationstippLassen Sie beim Webseiten-Entwurf die Schüler zunächst einen groben Entwurf auf Papier skizzieren, bevor sie ihn digital umsetzen, um die Strukturplanung zu üben.
Worauf zu achten istDie Schüler erstellen eine kleine Webseite mit mindestens drei Elementen (Text, Bild, Link) und gestalten sie mit CSS. Anschließend tauschen sie ihre Dateien mit einem Partner. Jeder Partner prüft: Ist die Seite valide aufgebaut? Sind mindestens zwei CSS-Regeln zur Gestaltung angewendet? Geben Sie ein kurzes Feedback zur Verbesserung.
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→· · ·
Aktivität 04
Debugging-Runde: Fehler finden
Geben Sie fehlerhafte HTML/CSS-Codes aus. Gruppen identifizieren und korrigieren Tags, Syntax oder Selektoren, testen und präsentieren Lösungen.
Erklären Sie die grundlegende Struktur einer HTML-Seite und die Rolle von Tags.
ModerationstippNutzen Sie die Debugging-Runde, um gezielt nach häufigen Fehlern zu suchen, z.B. vergessene Anführungszeichen bei Attributen oder falsch geschriebene Tag-Namen.
Worauf zu achten istGeben Sie jedem Schüler eine Karte mit einem HTML-Tag (z.B. `<p>`, `<img>`, `<a>`) und einer CSS-Eigenschaft (z.B. `color`, `font-size`). Die Schüler schreiben eine kurze Erklärung, was der Tag bewirkt bzw. welche Eigenschaft verändert wird, und wie man sie mit einem Beispielwert anwendet.
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→Einige Hinweise zum Unterrichten dieser Einheit
Beginne mit einem kurzen Input, der die Grundlagen zeigt, aber sofort in die Praxis übergeht. Vermeide lange Erklärungen zu Details wie allen möglichen HTML-Tags, sondern konzentriere dich auf die zentralen Elemente. Forschung zeigt, dass Schülerinnen und Schüler durch sofortiges Ausprobieren und iterative Fehlerkorrektur am meisten lernen, daher sollte der Fokus auf dem Prozess und nicht auf der Perfektion liegen.
Erfolgreich ist die Lerneinheit, wenn die Schülerinnen und Schüler selbstständig einfache Webseiten erstellen, Tags korrekt einsetzen und mit CSS gezielt das Aussehen beeinflussen können. Ihre Seiten sollten valide sein und mindestens zwei gestalterische Elemente enthalten, die sie erklären können.
Vorsicht vor diesen Fehlvorstellungen
Während der Pair Programming-Aktivität denken einige, dass HTML-Tags den Inhalt der Webseite verändern können.
Fordern Sie die Paare auf, im Editor bewusst Texte zwischen Tags zu ändern und zu beobachten, dass nur die Struktur, nicht der Inhalt betroffen ist. Fragen Sie gezielt: 'Was passiert, wenn ihr den Text zwischen <p> und </p> ändert? Verändert sich der Text oder nur die Darstellung?'.
Bei den CSS-Stationen glauben manche, dass CSS den eigentlichen Textinhalt verändert.
Lassen Sie die Schüler in der Station mit der Eigenschaft 'color' arbeiten und gezielt Fragen stellen: 'Ändert sich der Text, wenn ihr die Farbe ändert? Was bleibt gleich, was verändert sich?' Die sichtbare Diskrepanz zwischen Text und Farbe im Browser klärt dies direkt.
Während der Debugging-Runde oder beim Webseiten-Entwurf entsteht oft der Eindruck, dass eine Webseite immer Internet benötigt.
Zeigen Sie den Schülern, wie sie ihre HTML- und CSS-Dateien lokal speichern und im Browser öffnen. Lassen Sie sie bewusst offline arbeiten und fragen: 'Woher kommt die Seite, wenn ihr sie lokal öffnet? Was braucht ihr nicht?' Gruppenarbeit mit geteilten Dateien verstärkt dieses Verständnis.
In dieser Übersicht verwendete Methoden