Aktivität 01
Stationenrotation: HTML-Grundlagen
Richten Sie vier Stationen ein: 1. HTML-Struktur mit <head> und <body>, 2. Textformatierung mit <h1> bis <p>, 3. Listen und Links einfügen, 4. Bilder einbinden. Gruppen rotieren alle 10 Minuten und notieren Code-Beispiele. Abschließend teilen sie Erkenntnisse im Plenum.
Entwerfen Sie eine eigene Webseite zu einem vorgegebenen Thema.
ModerationstippBei der Stationenrotation zu HTML-Grundlagen sorgen Sie für klare Arbeitsanweisungen an jeder Station, damit die Schülerinnen und Schüler selbstständig und zielgerichtet üben können.
Worauf zu achten istJede Schülerin und jeder Schüler erhält ein Kärtchen mit einer der folgenden Fragen: 'Nenne zwei HTML-Tags, die du für deine Webseite verwendet hast, und erkläre ihre Funktion.' oder 'Beschreibe eine CSS-Regel, die du angewendet hast, und erkläre, welchen Effekt sie hatte.' Die Antworten werden eingesammelt und auf Verständnis geprüft.
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→· · ·
Aktivität 02
Pair Programming: CSS-Design
Paare codieren gemeinsam eine Webseite: Partner A tippt HTML, Partner B CSS für Hintergrund, Schrift und Ausrichtung. Alle 5 Minuten wechseln sie Rollen. Testen Sie im Browser und passen Sie an.
Implementieren Sie die Webseite unter Berücksichtigung von Struktur und Design.
ModerationstippBeim Pair Programming zu CSS-Design achten Sie darauf, dass die Paare abwechselnd tippen, um beide aktiv einzubinden und Diskussionen über Code-Entscheidungen zu fördern.
Worauf zu achten istDie Schülerinnen und Schüler tauschen ihre Webseiten aus und bewerten sie anhand einer Checkliste. Fragen könnten sein: 'Ist die Navigation klar?' 'Sind die Farben gut aufeinander abgestimmt?' 'Sind alle Bilder mit Alternativtexten versehen?' Jedes Paar gibt sich gegenseitig konstruktives Feedback zu zwei Verbesserungsmöglichkeiten.
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→· · ·
Aktivität 03
Peer-Review-Karussell: Evaluierung
Jede Gruppe lädt ihre Webseite hoch. Andere Gruppen rotieren, bewerten mit Checkliste (Funktion, Design, Barrierefreiheit) und geben Feedback. Eigene Seite basierend darauf überarbeiten.
Evaluieren Sie die eigene Webseite hinsichtlich Funktionalität, Ästhetik und Barrierefreiheit.
ModerationstippBeim Peer-Review-Karussell legen Sie die Bewertungskriterien vorab fest und geben den Schülerinnen und Schülern Zeit, sich in Ruhe mit den Webseiten ihrer Mitschülerinnen und Mitschüler auseinanderzusetzen.
Worauf zu achten istStellen Sie während der Codierphase gezielte Fragen zu spezifischen HTML- oder CSS-Konstrukten. Zum Beispiel: 'Wie würdest du einen Link zu einer anderen Seite erstellen?' oder 'Welche CSS-Eigenschaft ändert die Hintergrundfarbe eines Elements?' Dies dient der sofortigen Überprüfung des Verständnisses.
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→· · ·
Aktivität 04
Individuell: Veröffentlichen
Schüler laden ihre finale Webseite auf eine kostenlose Plattform wie GitHub Pages hoch. Sie testen Links, Responsivität und teilen den Link mit der Klasse per QR-Code.
Entwerfen Sie eine eigene Webseite zu einem vorgegebenen Thema.
ModerationstippBeim individuellen Veröffentlichen stellen Sie sicher, dass alle Zugriff auf die benötigten Tools haben und dokumentieren Sie mögliche Hürden, um gezielt unterstützen zu können.
Worauf zu achten istJede Schülerin und jeder Schüler erhält ein Kärtchen mit einer der folgenden Fragen: 'Nenne zwei HTML-Tags, die du für deine Webseite verwendet hast, und erkläre ihre Funktion.' oder 'Beschreibe eine CSS-Regel, die du angewendet hast, und erkläre, welchen Effekt sie hatte.' Die Antworten werden eingesammelt und auf Verständnis geprüft.
AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen→Einige Hinweise zum Unterrichten dieser Einheit
Beginnen Sie mit kleinen, überschaubaren Beispielen, damit die Schülerinnen und Schüler Erfolgserlebnisse sammeln. Vermeiden Sie zu frühe Komplexität wie Frames oder JavaScript, um Frustration zu minimieren. Nutzen Sie häufige, niedrigschwellige Überprüfungen durch Pair Programming und Peer-Reviews, um das Verständnis zu sichern. Forschung zeigt, dass visuelle Debugging-Tools und Live-Vorschauen das Lernen beschleunigen, da sie direkte Rückmeldung geben.
Am Ende des Themas haben die Lernenden eine funktionsfähige Webseite erstellt, die strukturiert, gestaltet und veröffentlicht ist. Sie können sowohl den Code als auch ihre Gestaltungsentscheidungen erklären und begründen.
Vorsicht vor diesen Fehlvorstellungen
Während der Stationenrotation zu HTML-Grundlagen denken einige Schülerinnen und Schüler, HTML diene nur zum Formatieren von Texten. Hier bieten Sie gezielt Stationen an, bei denen HTML-Code ohne CSS angezeigt wird, um den Struktur-Aspekt bewusst zu machen.
Zeigen Sie den Schülerinnen und Schülern während der Stationenrotation bewusst Code-Beispiele, bei denen HTML ohne CSS angezeigt wird. Fordern Sie sie auf, die reine Struktur zu beschreiben und den Unterschied zum späteren Design zu erkennen. Diskutieren Sie im Plenum, warum diese Trennung sinnvoll ist.
Während der Pair-Programming-Phase zu CSS-Design glauben manche, eine Webseite müsse sofort online sein, um zu testen. Hier nutzen Sie die gemeinsame Arbeit an lokalen Dateien mit Live-Servern, um iterative Tests zu ermöglichen.
Fordern Sie die Paare während der Pair-Programming-Phase auf, regelmäßig ihre Änderungen lokal zu testen und gemeinsam zu besprechen. Nutzen Sie Live-Server, um schnelle Rückmeldungen zu geben und die iterative Entwicklung zu fördern.
Während des Peer-Review-Karussells nehmen einige Schülerinnen und Schüler an, Barrierefreiheit betrifft nur Menschen mit Behinderungen. Hier integrieren Sie Evaluierungs-Stationen mit Screenreadern, um den Nutzen für alle sichtbar zu machen.
Integrieren Sie beim Peer-Review-Karussell eine Station mit Screenreadern. Fordern Sie die Schülerinnen und Schüler auf, ihre Webseiten vorzulesen und zu prüfen, ob die Inhalte auch ohne visuelle Darstellung verständlich sind. Diskutieren Sie im Anschluss, warum klare Strukturen und Alternativtexte für alle Nutzerinnen und Nutzer von Vorteil sind.
In dieser Übersicht verwendete Methoden