Informatik · Klasse 8

Ideen für aktives Lernen

Einführung in CSS: Styling für das Web

Aktive Lernformate passen hier, weil Schülerinnen und Schüler die Trennung von Inhalt und Darstellung erst dann wirklich verstehen, wenn sie selbst die Wirkung von CSS-Regeln im Browser erleben. Durch praktisches Ausprobieren und sofortiges Feedback wird abstrakte Theorie zu greifbarem Wissen, das bleibt.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Strukturieren und Modellieren
• KMK: Sekundarstufe I - Implementieren

• 20–45 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Projektbasiertes Lernen
• 25 Min. · Partnerarbeit

Paararbeit: CSS-Farben und Schriften

Paare erhalten ein einfaches HTML-Beispiel. Sie fügen CSS-Regeln für Hintergrundfarben, Textfarben und Schriftarten hinzu, speichern und laden im Browser. Gemeinsam variieren sie Werte und notieren Beobachtungen.

Erklären Sie die Trennung von Inhalt (HTML) und Gestaltung (CSS).

Moderationstipp

Lassen Sie die Paare während der Paararbeit die Farbnamen und Schriftarten direkt auf einer vorbereiteten HTML-Seite ausprobieren und ihre Ergebnisse im Browser vergleichen.

Worauf zu achten ist

Geben Sie den Schülerinnen und Schülern ein kleines HTML-Fragment (z.B. einen Absatz) und eine Aufgabe: 'Schreiben Sie eine CSS-Regel, die die Textfarbe dieses Absatzes auf Rot ändert und die Schriftart auf 'Verdana' setzt. Nennen Sie den Selektor und die Deklarationen, die Sie verwenden würden.'

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

Aktivität 02

• Projektbasiertes Lernen
• 35 Min. · Kleingruppen

Kleingruppen: Externes Stylesheet bauen

Gruppen erstellen eine separate CSS-Datei und verknüpfen sie mit HTML. Sie stylen Überschriften, Absätze und Listen. Jede Gruppe präsentiert eine Änderung und diskutiert Auswirkungen auf mehrere Seiten.

Implementieren Sie einfache CSS-Regeln zur Änderung von Farben und Schriftarten.

Moderationstipp

Geben Sie den Kleingruppen klare Anweisungen zum Aufbau eines externen Stylesheets und einer zugehörigen HTML-Datei, damit die Struktur sofort sichtbar wird.

Worauf zu achten ist

Zeigen Sie eine einfache Webseite mit einem kleinen Fehler im CSS (z.B. Tippfehler bei einer Eigenschaft). Fragen Sie: 'Was ist hier falsch? Wie würden Sie es korrigieren, um die Schriftgröße zu ändern?'

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

Aktivität 03

• Projektbasiertes Lernen
• 45 Min. · Ganze Klasse

Ganzer Unterricht: Stil-Challenge

Klasse bekommt ein Standard-HTML. Jeder schlägt eine CSS-Regel vor, Klasse stimmt ab und implementiert. Browser-Vergleich vor/nach zeigt Effekte. Abschließende Runde zu Vorteilen.

Analysieren Sie die Vorteile der Verwendung von externen Stylesheets.

Moderationstipp

Starten Sie die Stil-Challenge mit einer vorbereiteten, unattraktiven Seite, damit die Schülerinnen und Schüler die Verbesserung durch CSS direkt erleben können.

Worauf zu achten ist

Stellen Sie die Frage: 'Stellen Sie sich vor, Sie haben eine Webseite mit 50 Seiten. Warum ist es besser, ein externes Stylesheet zu verwenden, anstatt jede Seite einzeln mit Inline-Styles zu gestalten? Nennen Sie mindestens zwei Gründe.'

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

Aktivität 04

• Projektbasiertes Lernen
• 20 Min. · Einzelarbeit

Individuell: Persönlicher Stil-Editor

Schüler kopieren ein HTML-Template und experimentieren allein mit CSS für Farben und Fonts. Sie speichern Versionen und wählen ihre Favoritin aus.

Erklären Sie die Trennung von Inhalt (HTML) und Gestaltung (CSS).

Moderationstipp

Fordern Sie die Schülerinnen und Schüler auf, ihre persönlichen Stil-Editor-Seiten mit mindestens drei verschiedenen CSS-Regeln auszustatten und diese zu präsentieren.

Worauf zu achten ist

Geben Sie den Schülerinnen und Schülern ein kleines HTML-Fragment (z.B. einen Absatz) und eine Aufgabe: 'Schreiben Sie eine CSS-Regel, die die Textfarbe dieses Absatzes auf Rot ändert und die Schriftart auf 'Verdana' setzt. Nennen Sie den Selektor und die Deklarationen, die Sie verwenden würden.'

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

Einige Hinweise zum Unterrichten dieser Einheit

Erfahrene Lehrkräfte beginnen mit kleinen, sichtbaren Änderungen und steigern die Komplexität schrittweise. Sie vermeiden lange theoretische Erklärungen und setzen stattdessen auf sofortiges Ausprobieren. Wichtig ist, die Trennung von HTML und CSS durch konkrete Beispiele zu festigen und Missverständnisse wie die Wirkung von Inline-Styles durch Gegenbeispiele zu klären.

Erfolgreich lernen die Schülerinnen und Schüler, wenn sie CSS-Regeln gezielt anwenden, die Auswirkungen im Browser sehen und die Vorteile externer Stylesheets für Wartung und Konsistenz erkennen. Sie können erklären, warum CSS nur die Darstellung beeinflusst und wie Selektoren funktionieren.

---

Vorsicht vor diesen Fehlvorstellungen

• Während der Paararbeit zu CSS-Farben und Schriften beobachten Sie, dass einige Schülerinnen und Schüler denken, die Farbe ändere den eigentlichen Textinhalt.

  Nutzen Sie die aktive Browser-Ansicht: Die Schülerinnen und Schüler sehen, dass der HTML-Quellcode unverändert bleibt, nur die Darstellung im Browser sich ändert. Fordern Sie sie auf, den Quellcode zu überprüfen und zu vergleichen.

• Während der Kleingruppenarbeit zum externen Stylesheet vermuten manche, Inline-Styles seien immer die bessere Wahl.

  Lassen Sie die Gruppen ihre externen Stylesheets mit Inline-Styles vergleichen: Ändern Sie gemeinsam eine Eigenschaft im externen Sheet und zeigen Sie, wie alle verlinkten Seiten sofort aktualisiert werden. Die Schülerinnen und Schüler erleben so die Wartungsvorteile.

• Während der Stil-Challenge denken einige, CSS-Regeln wirken nur auf eine einzelne Seite.

  Führen Sie die Schülerinnen und Schüler dazu, ein externes Stylesheet für mehrere Seiten zu nutzen. Zeigen Sie, wie Änderungen im Sheet alle verlinkten Seiten betreffen, und lassen Sie sie dies in der Challenge praktisch anwenden.

---

In dieser Übersicht verwendete Methoden

• Projektbasiertes Lernen