Web-Technologien: HTML und CSS

Aktives Lernen funktioniert hier besonders gut, weil Schülerinnen und Schüler die Trennung von Struktur und Design durch eigenes Ausprobieren begreifen. Beim Bauen und Gestalten erleben sie direkt, wie HTML die Grundbausteine setzt und CSS diese dann sichtbar formt.

• Klasse 9
• Digitale Welten Gestalten: Informatik und Gesellschaft
• 4 Aktivitäten
• 30 Min.–50 Min.

Lernziele

1. Konstruieren Sie eine einfache Webseite mit mindestens drei verschiedenen HTML-Elementen (z.B. Überschrift, Absatz, Liste).
2. Analysieren Sie die Struktur einer gegebenen Webseite und identifizieren Sie die verwendeten HTML-Tags und ihre semantische Bedeutung.
3. Entwerfen Sie CSS-Regeln, um das Aussehen von Text (Schriftart, Größe, Farbe) und Hintergrund einer Webseite zu verändern.
4. Demonstrieren Sie die Anwendung von CSS-Selektoren, um spezifische HTML-Elemente gezielt zu gestalten.
5. Erklären Sie die Trennung von Inhalt (HTML) und Präsentation (CSS) anhand eines selbst erstellten Beispiels.

Projektbasiertes Lernen

⏱ 30 Min.·Partnerarbeit

Pair Programming: Basis-HTML-Seite

Paare schreiben gemeinsam eine HTML-Seite mit Überschrift, Absatz und Liste. Sie testen im Browser und notieren Beobachtungen. Im zweiten Schritt fügen sie einfache CSS-Regeln für Farbe und Schrift hinzu.

Vorbereitung & Details

Erklären Sie die Rolle von HTML und CSS beim Aufbau einer Webseite.

Moderationstipp: Während des Pair Programming wechseln sich die Partner nach jedem Schritt ab, sodass beide aktiv den Code schreiben und die Wirkung der Änderungen besprechen.

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

Lernen an Stationen

⏱ 45 Min.·Kleingruppen

Lernen an Stationen: CSS-Eigenschaften

Richten Sie Stationen ein: Farben ändern, Abstände justieren, Hintergründe setzen. Gruppen rotieren, experimentieren und dokumentieren Code-Snippets. Abschließend teilen sie Ergebnisse.

Vorbereitung & Details

Analysieren Sie, wie HTML-Elemente Inhalte strukturieren.

Moderationstipp: An den CSS-Stationen arbeiten die Lernenden mit vorgefertigten HTML-Dateien, um sich auf die Eigenschaften zu konzentrieren und nicht von der Struktur abgelenkt zu werden.

Setup: Im Raum verteilte Tische/Stationen

Materials: Stationskarten mit Arbeitsanweisungen, Unterschiedliche Materialien je Station, Timer für die Rotation

• Erinnern
• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Beziehungsfähigkeit

Zeitstrahl-Challenge

⏱ 50 Min.·Einzelarbeit

Zeitstrahl-Challenge: Persönliche Startseite

Individuell erstellen Schülerinnen und Schüler eine Startseite mit HTML-Struktur und CSS-Styling. Sie integrieren mindestens drei Elemente und präsentieren im Plenum.

Vorbereitung & Details

Konstruieren Sie eine einfache Webseite mit HTML und gestalten Sie diese mit CSS.

Moderationstipp: In der Challenge lassen Sie die Gruppen ihre Projekte präsentieren und gezielt Fragen zu ihrer Code-Struktur stellen, um das Verständnis zu vertiefen.

Setup: Lange Wand oder Bodenfläche für den Zeitstrahl

Materials: Ereigniskarten mit Daten und Beschreibungen, Basis für den Zeitstrahl (Klebeband oder Papierrolle), Verbindungspfeile oder Schnüre, Impulskarten für die Debatte

• Erinnern
• Verstehen
• Analysieren
• Selbststeuerung
• Beziehungsfähigkeit

Projektbasiertes Lernen

⏱ 35 Min.·Kleingruppen

Review-Runde: Code-Kritik

Gruppen bewerten gegenseitig Webseiten auf Struktur und Design. Sie schlagen Verbesserungen vor und implementieren eine. Diskussion schließt ab.

Vorbereitung & Details

Erklären Sie die Rolle von HTML und CSS beim Aufbau einer Webseite.

Moderationstipp: In der Review-Runde fordern Sie die Lernenden auf, ihre Entscheidungen für bestimmte HTML- oder CSS-Regeln zu begründen, um metakognitive Prozesse anzuregen.

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

Vermitteln Sie die Grundlagen kurz und prägnant, bevor die Lernenden selbst aktiv werden. Vermeiden Sie lange Erklärungen zu Eigenschaften, die sie später selbst entdecken können. Lassen Sie Fehler zu und nutzen Sie sie als Lerngelegenheiten, um zu zeigen, dass Debugging ein natürlicher Teil des Programmierens ist. Forschung belegt, dass hands-on Erfahrungen das Verständnis für die Trennung von Inhalt und Gestaltung signifikant erhöhen.

Was Sie erwartet

Erfolg zeigt sich, wenn Lernende selbstständig einfache Webseiten erstellen und dabei HTML für die logische Struktur und CSS für das ansprechende Layout nutzen. Die Trennung beider Technologien wird nicht nur verstanden, sondern auch angewendet und erklärt.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Aktivität Pair Programming beobachten Sie, dass einige Schülerinnen und Schüler HTML-Tags mit Design-Eigenschaften wie Farbangaben mischen.

Was Sie stattdessen lehren sollten

Nutzen Sie die Pair-Programming-Phase, um gemeinsam zu reflektieren, warum das style-Attribut in HTML nicht die beste Praxis ist. Zeigen Sie, wie CSS die Regeln zentral verwaltet und Änderungen sofort global wirksam werden.

Häufige Fehlvorstellung

An den CSS-Stationen verwenden Lernende häufig inline-Styles, weil sie den Effekt schneller sehen möchten.

Was Sie stattdessen lehren sollten

Fordern Sie die Gruppen auf, die gleiche Gestaltung zunächst mit externem CSS umzusetzen. Lassen Sie sie beobachten, wie eine Änderung in der CSS-Datei alle verlinkten HTML-Seiten aktualisiert.

Häufige Fehlvorstellung

In der Challenge gestalten einige Gruppen das Design nur für das gesamte Dokument und verstehen nicht, wie sie gezielt einzelne Elemente ansprechen können.

Was Sie stattdessen lehren sollten

Führen Sie während der Challenge gezielte Fragen ein, wie z.B. 'Wie könnt ihr nur die Überschriften der zweiten Ebene gestalten?' und lassen Sie die Gruppen mit Klassen oder IDs experimentieren.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der Aktivität Pair Programming geben Sie den Lernenden ein HTML-Snippet (z.B. eine Liste und einen Absatz) und eine einfache CSS-Regel (z.B. font-family: Arial;). Bitten Sie sie, auf dem Ticket zu notieren, welche visuelle Änderung die Regel bewirkt und warum HTML und CSS hier unterschiedlich wirken.

Kurze Überprüfung

Nach der Stationenarbeit zu CSS-Eigenschaften zeigen Sie eine einfache, ungestaltete Webseite an der Tafel. Bitten Sie die Lernenden, nacheinander die passenden CSS-Eigenschaften zu nennen, die für die Gestaltung von Farben, Schriftgrößen und Abständen verwendet werden können.

Gegenseitige Bewertung

Nach der Challenge Persönliche Startseite lassen Sie die Lernenden ihre HTML- und CSS-Dateien tauschen und gegenseitig mit einer Checkliste bewerten. Die Checkliste enthält Kriterien wie 'Logische HTML-Struktur', 'Klar definierte CSS-Selektoren' und 'Verbessertes Aussehen durch CSS'.

Erweiterungen & Unterstützung

• Fordern Sie schnelle Gruppen auf, eine Navigation mit Dropdown-Menü zu implementieren.
• Bei Unsicherheit geben Sie den Lernenden eine vorgefertigte HTML-Struktur, die sie mit CSS gestalten sollen.
• Ermutigen Sie interessierte Lernende, eine zweite CSS-Datei zu erstellen, um das Design zu wechseln und die Wirkung zu vergleichen.

Schlüsselvokabular

HTML-Element	Ein grundlegender Baustein einer Webseite, bestehend aus einem öffnenden Tag, Inhalt und einem schließenden Tag, z.B. `<p>Dies ist ein Absatz.</p>`.
CSS-Selektor	Ein Muster, das angibt, auf welche HTML-Elemente die CSS-Regeln angewendet werden sollen, z.B. `h1` für alle Überschriften erster Ordnung.
Semantisches HTML	Die Verwendung von HTML-Tags, die ihre Bedeutung und Funktion klar beschreiben, wie `<h1>` für die Hauptüberschrift oder `<nav>` für Navigationslinks.
CSS-Eigenschaft	Ein Stilmerkmal, das auf ein HTML-Element angewendet wird, um sein Aussehen zu verändern, z.B. `color` für die Textfarbe oder `font-size` für die Schriftgröße.