Informatik · Klasse 7

Ideen für aktives Lernen

CSS: Das Styling des Webs

Aktives Ausprobieren hilft Schülern, die Wirkung von CSS direkt zu erleben. In diesem Thema geht es darum, dass Schülerinnen und Schüler durch eigenes Experimentieren verstehen, wie CSS das Aussehen einer Webseite verändert, ohne den Inhalt zu beeinflussen. Das praktische Tun festigt das Konzept der Trennung von Struktur und Präsentation nachhaltig.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren und Implementieren
• KMK: Sekundarstufe I - Produzieren und Präsentieren

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

Aktivität 01

• Projektbasiertes Lernen
• 30 Min. · Partnerarbeit

Paarprogrammierung: CSS-Farben und Schriften

In Paaren bearbeiten Schüler eine vorgefertigte HTML-Datei. Sie schreiben CSS-Regeln für Farben und Schriftarten, laden die Seite neu und vergleichen Ergebnisse. Abschließend präsentieren sie ihre Designs.

Erkläre, wie CSS verwendet wird, um das Aussehen einer HTML-Seite zu steuern.

Moderationstipp

Während der Paarprogrammierung mit CSS-Farben und Schriften solltest du sicherstellen, dass beide Partner abwechselnd tippen und die Ergebnisse gemeinsam besprechen.

Worauf zu achten ist

Gib den Schülern ein HTML-Snippet und ein einfaches CSS-Regelset. Frage: 'Welche Änderungen bewirkt dieses CSS-Regelset im HTML-Snippet?' und 'Nenne eine CSS-Eigenschaft, die du hinzufügen würdest, um den Text fett zu machen.'

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

Aktivität 02

• Lernen an Stationen
• 45 Min. · Kleingruppen

Lernen an Stationen: Layout-Experimente

Richten Sie drei Stationen ein: 1. Zentrierung mit margin, 2. Hintergründe mit background-color, 3. Abstände mit padding. Gruppen rotieren, notieren Code-Snippets und Beobachtungen.

Entwerfe ein CSS-Regelset, um die Schriftart und Farbe einer Webseite zu ändern.

Moderationstipp

Bei den Stationen zu Layout-Experimenten ist es hilfreich, klare Zeitlimits pro Station zu setzen, damit alle Gruppen die Aufgaben schaffen.

Worauf zu achten ist

Zeige zwei Versionen einer Webseite: eine ohne CSS und eine mit einfachem CSS. Frage die Schüler: 'Was ist der Hauptunterschied zwischen diesen beiden Webseiten?' und 'Welche Vorteile siehst du in der zweiten Version?'

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

Aktivität 03

• Projektbasiertes Lernen
• 40 Min. · Ganze Klasse

Whole-Class-Challenge: Persönliche Stilseite

Zeigen Sie eine Basis-HTML-Seite. Die Klasse entwirft gemeinsam ein CSS-Thema (z.B. 'Dunkelmodus'), wählt Eigenschaften ab und testet live. Diskutieren Sie Kaskadierung.

Vergleiche die Vorteile der Trennung von Inhalt (HTML) und Design (CSS).

Moderationstipp

Gib bei der Whole-Class-Challenge klare Vorgaben für die persönliche Stilseite, damit alle Schülerinnen und Schüler vergleichbare Ergebnisse erzielen.

Worauf zu achten ist

Stelle die Frage: 'Warum ist es sinnvoll, den Inhalt (HTML) vom Aussehen (CSS) zu trennen?' Lass die Schüler in Kleingruppen diskutieren und anschließend die wichtigsten Argumente (z.B. Wartbarkeit, Wiederverwendbarkeit, Zugänglichkeit) im Plenum sammeln.

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

Aktivität 04

• Projektbasiertes Lernen
• 25 Min. · Einzelarbeit

Individual: Stil-Überarbeitung

Jeder Schüler stylt eine eigene Mini-Webseite mit drei CSS-Regeln. Sie exportieren Screenshots vor/nach und reflektieren Vorteile der Trennung.

Erkläre, wie CSS verwendet wird, um das Aussehen einer HTML-Seite zu steuern.

Moderationstipp

Führe bei der Stil-Überarbeitung Einzelgespräche, um individuelle Fragen zu klären und gezielt Feedback zu geben.

Worauf zu achten ist

Gib den Schülern ein HTML-Snippet und ein einfaches CSS-Regelset. Frage: 'Welche Änderungen bewirkt dieses CSS-Regelset im HTML-Snippet?' und 'Nenne eine CSS-Eigenschaft, die du hinzufügen würdest, um den Text fett zu machen.'

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

Einige Hinweise zum Unterrichten dieser Einheit

Erfahrungsgemäß lernen Schülerinnen und Schüler CSS am besten durch sofortiges Ausprobieren und iterative Anpassungen. Vermeide lange Erklärungen am Anfang, sondern lasse sie selbst entdecken, wie Eigenschaften wirken. Nutze konkrete Beispiele und vergleiche sie direkt mit dem HTML-Code, um die Trennung von Struktur und Präsentation zu verdeutlichen. Wiederholte Reflexion in Kleingruppen fördert das Verständnis und korrigiert Missverständnisse frühzeitig.

Erfolgreiches Lernen zeigt sich darin, dass Schülerinnen und Schüler CSS-Regeln bewusst anwenden, um Layouts zu gestalten und Formatierungen vorzunehmen. Sie können erklären, warum CSS nur das Aussehen beeinflusst und nicht den HTML-Code. Zudem erkennen sie die Vorteile externer Stylesheets gegenüber Inline-Styles.

---

Vorsicht vor diesen Fehlvorstellungen

• Während der Stationen Layout-Experimente beobachten die Schüler und du, wie CSS den Textinhalt verändert.

  Zeige den Schülern explizit, dass sie den HTML-Code nicht ändern sollen. Lass sie stattdessen CSS-Regeln entfernen und die Seite neu laden, um zu sehen, dass der Inhalt gleich bleibt.

• Während der Whole-Class-Challenge persönliche Stilseite achten einige Schüler nur auf das Aussehen und nicht auf die Struktur.

  Fordere die Schüler auf, ihre HTML-Struktur schriftlich zu dokumentieren und mit der CSS-Gestaltung zu vergleichen, um die Trennung bewusst zu reflektieren.

• Während der Paarprogrammierung CSS-Farben und Schriften glauben einige, dass Inline-Styles immer die bessere Wahl sind.

  Gib den Paaren zwei Versionen derselben Seite vor: eine mit Inline-Styles und eine mit externem CSS. Lasst sie die Wartbarkeit und Übersichtlichkeit vergleichen.

---

In dieser Übersicht verwendete Methoden

• Projektbasiertes Lernen
• Lernen an Stationen