Informatik · Klasse 9

Ideen für aktives Lernen

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.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Daten und Informationen
• KMK: Sekundarstufe I - Modellieren

• 30–50 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• 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.

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.

Worauf zu achten ist

Geben Sie den Lernenden ein kleines HTML-Snippet (z.B. eine Überschrift und einen Absatz) und eine einfache CSS-Regel. Bitten Sie sie, auf dem Ticket zu notieren, welche visuelle Änderung die CSS-Regel am HTML bewirkt und warum.

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

Aktivität 02

• 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.

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.

Worauf zu achten ist

Zeigen Sie eine einfache Webseite (nur HTML) an die Tafel. Bitten Sie die Lernenden, auf Zuruf die passenden HTML-Tags zu nennen, die für die Strukturierung der Inhalte (Überschriften, Absätze, Listen) verwendet werden könnten.

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

Aktivität 03

• 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.

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.

Worauf zu achten ist

Lassen Sie die Lernenden in Paaren eine einfache HTML-Seite erstellen und diese dann mit einer CSS-Datei gestalten. Anschließend tauschen sie die Dateien und geben sich gegenseitig Feedback: Ist die HTML-Struktur logisch? Sind die CSS-Regeln klar und verbessern sie das Aussehen? Geben Sie den Paaren eine Checkliste mit den wichtigsten Kriterien.

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

Aktivität 04

• 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.

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.

Worauf zu achten ist

Geben Sie den Lernenden ein kleines HTML-Snippet (z.B. eine Überschrift und einen Absatz) und eine einfache CSS-Regel. Bitten Sie sie, auf dem Ticket zu notieren, welche visuelle Änderung die CSS-Regel am HTML bewirkt und warum.

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

Einige Hinweise zum Unterrichten dieser Einheit

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.

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

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

  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.

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

  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.

• 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.

  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.

---

In dieser Übersicht verwendete Methoden

• Projektbasiertes Lernen
• Lernen an Stationen
• Zeitstrahl-Challenge