Projekt: Meine persönliche Webseite

Aktives Lernen funktioniert hier besonders gut, weil Schüler durch die konkrete Umsetzung von HTML und CSS ihr technisches Verständnis sofort anwenden und mit kreativen Ideen verbinden. Die Verbindung von Konzept, Code und Präsentation fördert sowohl logisches Denken als auch Gestaltungsfähigkeit in einem authentischen Kontext.

• Klasse 7
• Digitale Welten verstehen und gestalten
• 4 Aktivitäten
• 30 Min.–45 Min.

Lernziele

1. Entwerfen Sie ein grundlegendes Layout und eine Navigationsstruktur für eine persönliche Webseite, die spezifische Interessen widerspiegelt.
2. Implementieren Sie grundlegende HTML-Strukturelemente zur Organisation von Inhalten wie Text, Bildern und Links auf einer Webseite.
3. Wenden Sie grundlegende CSS-Regeln an, um Farben, Schriftarten und Abstände auf einer Webseite zu gestalten.
4. Bewerten Sie die Benutzerfreundlichkeit und visuelle Attraktivität einer einfachen persönlichen Webseite anhand definierter Kriterien.
5. Analysieren Sie die Struktur einer bestehenden Webseite, um die Anwendung von HTML-Tags und CSS-Eigenschaften zu identifizieren.

Brainstorming-Karussell

⏱ 30 Min.·Einzelarbeit

Brainstorming-Karussell: Konzeptentwurf

Jeder Schüler skizziert auf Papier Inhalte, Struktur und Farbschema für seine Webseite. Sammle Ideen zu Abschnitten wie 'Über mich', 'Hobbys' und 'Fähigkeiten'. Teile Skizzen in der Klasse und notiere erste HTML-Elemente.

Vorbereitung & Details

Entwerfe ein Konzept für eine persönliche Webseite, die deine Interessen und Fähigkeiten widerspiegelt.

Moderationstipp: Während des Brainstormings darauf achten, dass Schüler konkrete Inhalte wie Hobbys, Fähigkeiten oder Projekte benennen, die sie auf der Webseite darstellen möchten.

Setup: Wandplakate mit ausreichend Platz für davor stehende Gruppen

Materials: Flipchart-Papier (eines pro Impuls), Marker (verschiedene Farben pro Gruppe), Timer

• Erinnern
• Verstehen
• Analysieren
• Beziehungsfähigkeit
• Sozialbewusstsein

Projektbasiertes Lernen

⏱ 45 Min.·Partnerarbeit

Paarprogrammierung: HTML und CSS umsetzen

In Paaren baut einer die HTML-Struktur, der andere fügt CSS hinzu, dann tauschen. Testet die Seite im Browser und passt Responsivität an. Wechselt Rollen nach 10 Minuten.

Vorbereitung & Details

Analysiere die Herausforderungen bei der Gestaltung einer benutzerfreundlichen und ästhetisch ansprechenden Webseite.

Moderationstipp: Bei der Paarprogrammierung gezielt auf die Zusammenarbeit eingehen: Ein Partner schreibt Code, der andere beobachtet und nachdenkt, bevor er Vorschläge macht.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 30 Min.·Kleingruppen

Peer Review: Webseiten testen

Jede Webseite wird von zwei Mitschülern auf Funktionalität, Design und Standards geprüft. Nutzt eine Checkliste mit Kriterien wie Ladezeit und Barrierefreiheit. Gibt konstruktives Feedback.

Vorbereitung & Details

Beurteile die eigene Webseite hinsichtlich ihrer Funktionalität, Ästhetik und Einhaltung der Webstandards.

Moderationstipp: Beim Peer Review die Checkliste gemeinsam durchgehen und sicherstellen, dass alle Schüler wissen, wonach sie suchen müssen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 40 Min.·Ganze Klasse

Galerie-Walk: Präsentation

Webseiten lokal hosten und als Galerie präsentieren. Schüler laufen herum, notieren Stärken und Verbesserungsvorschläge. Abschließende Plenumdiskussion.

Vorbereitung & Details

Entwerfe ein Konzept für eine persönliche Webseite, die deine Interessen und Fähigkeiten widerspiegelt.

Moderationstipp: Beim Galerie-Walk klare Präsentationszeiten vorgeben und darauf achten, dass jeder Schüler mindestens eine Rückmeldung zu einer anderen Webseite gibt.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Dieses Thema unterrichten

Erfahrene Lehrkräfte beginnen mit einem klaren Konzeptrahmen, der technische und gestalterische Aspekte verbindet. Sie vermeiden es, vorgefertigte Lösungen zu präsentieren, sondern nutzen Fehler als Lernchancen. Wichtig ist, dass Schüler selbst entdecken, wie HTML und CSS zusammenwirken, statt isolierte Regeln zu lernen. Reflektierende Gespräche über Designentscheidungen vertiefen das Verständnis.

Was Sie erwartet

Erfolgreiches Lernen zeigt sich, wenn Schüler eine funktionsfähige, individuelle Webseite erstellen, die sowohl technische Anforderungen erfüllt als auch persönliche Interessen widerspiegelt. Die Webseite ist klar strukturiert, optisch ansprechend und entspricht grundlegenden Webstandards.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während des Brainstormings könnte ein Schüler sagen: 'Webseiten müssen viele Animationen und Farben haben, um ansprechend zu sein.'

Was Sie stattdessen lehren sollten

Während des Peer Reviews testen die Schüler ihre Webseiten gegenseitig. Sie vergleichen, wie verschiedene Designs auf Lesbarkeit und Nutzerfreundlichkeit wirken. Die Lehrkraft lenkt die Aufmerksamkeit darauf, dass klare Strukturen oft ansprechender sind als überladene Effekte.

Häufige Fehlvorstellung

Während der Paarprogrammierung könnte ein Schüler annehmen: 'HTML dient nur zum Text einfügen, CSS nur zur Farbgebung.'

Was Sie stattdessen lehren sollten

Während der Paarprogrammierung arbeiten die Schüler mit konkreten Code-Beispielen. Sie erkennen durch die gemeinsame Arbeit, wie HTML die semantische Struktur vorgibt und CSS das gesamte Layout und Design steuert. Die Lehrkraft zeigt gezielt, wie beide Sprachen zusammenwirken.

Häufige Fehlvorstellung

Während des Peer Reviews könnte ein Schüler sagen: 'Webstandards wie Validität sind unwichtig für persönliche Seiten.'

Was Sie stattdessen lehren sollten

Während des Peer Reviews nutzen die Schüler Validator-Tools, um ihre HTML- und CSS-Dateien zu prüfen. Die Lehrkraft erklärt, dass Standards nicht nur für professionelle Seiten gelten, sondern auch die Kompatibilität und Zugänglichkeit der eigenen Seite sicherstellen.

Ideen zur Lernstandserhebung

Gegenseitige Bewertung

Nach der Aktivität 'Peer Review' tauschen die Schüler ihre Webseitenentwürfe aus und überprüfen sie anhand einer Checkliste. Jeder gibt zwei positive Rückmeldungen und einen konkreten Verbesserungsvorschlag.

Lernstandskontrolle

Nach dem Galerie-Walk erhalten die Schüler ein Blatt mit zwei Fragen: 1. Nennen Sie ein HTML-Element, das Sie in Ihrer Webseite verwendet haben, und erklären Sie kurz dessen Funktion. 2. Beschreiben Sie eine CSS-Regel, die Sie angewendet haben, und erklären Sie, wie sie das Aussehen Ihrer Seite verändert hat.

Kurze Überprüfung

Während der Aktivität 'Galerie-Walk' zeigt die Lehrkraft eine einfache Webseite auf dem Beamer. Die Schüler identifizieren und benennen per Zuruf oder schriftlich mindestens drei verwendete HTML-Tags und zwei CSS-Eigenschaften.

Erweiterungen & Unterstützung

• Challenge für schnelle Lerner: Fügen Sie eine interaktive Komponente hinzu, z.B. ein Kontaktformular oder ein einfaches Quiz mit JavaScript.
• Scaffolding für Schüler mit Schwierigkeiten: Bereitstellen von Code-Snippets oder einer Vorlage mit klaren Abschnitten, die sie anpassen können.
• Deeper exploration: Vertiefen Sie die Barrierefreiheit, indem Sie die Webseiten mit Screenreader-Tools testen und Verbesserungen vorschlagen.

Schlüsselvokabular

HTML-Element	Ein grundlegender Baustein einer HTML-Seite, der durch öffnende und schließende Tags definiert wird und Inhalte strukturiert.
CSS-Selektor	Ein Muster, das angibt, auf welche HTML-Elemente bestimmte CSS-Stile angewendet werden sollen.
Layout	Die Anordnung von Elementen auf einer Webseite, die bestimmt, wie Inhalte visuell präsentiert werden.
Responsives Design	Eine Designphilosophie, die sicherstellt, dass Webseiten auf verschiedenen Geräten und Bildschirmgrößen gut aussehen und funktionieren.
Benutzerfreundlichkeit (Usability)	Das Maß, in dem eine Webseite einfach zu bedienen ist und den Nutzern hilft, ihre Ziele effizient und zufriedenstellend zu erreichen.