Webseiten mit HTML/CSSAktivitäten & Unterrichtsstrategien
Aktives Ausprobieren ist hier entscheidend, weil die Schülerinnen und Schüler die Trennung zwischen Struktur (HTML) und Gestaltung (CSS) nur durch eigenes Handeln wirklich verstehen. Jeder Tippfehler oder Farbwechsel im Browser zeigt sofort, wie die beiden Sprachen zusammenwirken und warum klare Regeln notwendig sind.
Lernziele
- 1Erklären Sie die Funktion und Struktur von HTML-Tags zur Inhaltsgliederung einer Webseite.
- 2Entwerfen Sie eine einfache Webseite mit Text, Bildern und Hyperlinks unter Verwendung von HTML-Elementen.
- 3Analysieren Sie die Auswirkungen von CSS-Regeln auf das visuelle Erscheinungsbild und Layout einer Webseite.
- 4Implementieren Sie grundlegende CSS-Eigenschaften zur Gestaltung von Textfarben, Schriftgrößen und Abständen.
- 5Vergleichen Sie die Ergebnisse verschiedener CSS-Layout-Eigenschaften wie `display: block` und `display: inline`.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
Pair Programming: Erste HTML-Seite
Paare schreiben gemeinsam eine HTML-Seite mit Überschrift, Absatz, Bild und Link. Der eine tippt, der andere navigiert und testet im Browser. Nach 15 Minuten wechseln die Rollen und sie fügen CSS-Farben hinzu.
Vorbereitung & Details
Erklären Sie die grundlegende Struktur einer HTML-Seite und die Rolle von Tags.
Moderationstipp: Fordern Sie die Paare während der Pair Programming auf, sich abzuwechseln: Eine Person tippt, die andere erklärt, was der nächste Schritt ist, bevor sie ihn ausführt.
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
CSS-Stationen: Styling üben
Richten Sie vier Stationen ein: Farben ändern, Schrift formatieren, Bilder rahmen, Layout anpassen. Gruppen rotieren alle 10 Minuten, notieren Code-Änderungen und Ergebnisse.
Vorbereitung & Details
Entwerfen Sie eine einfache Webseite mit Text, Bildern und Links unter Verwendung von HTML.
Moderationstipp: Stellen Sie bei den CSS-Stationen sicher, dass jede Station ein konkretes Ziel hat, z.B. 'Ändere die Schriftfarbe aller Überschriften in Blau', damit die Schüler nicht planlos experimentieren.
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
Webseiten-Entwurf: Persönliche Seite
Jeder Schüler entwirft eine eigene Seite über Hobbys mit HTML und CSS. Testen im Browser, dann in Kleingruppen Feedback geben und verbessern.
Vorbereitung & Details
Analysieren Sie, wie CSS verwendet wird, um das Aussehen und Layout einer Webseite zu steuern.
Moderationstipp: Lassen Sie beim Webseiten-Entwurf die Schüler zunächst einen groben Entwurf auf Papier skizzieren, bevor sie ihn digital umsetzen, um die Strukturplanung zu üben.
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
Debugging-Runde: Fehler finden
Geben Sie fehlerhafte HTML/CSS-Codes aus. Gruppen identifizieren und korrigieren Tags, Syntax oder Selektoren, testen und präsentieren Lösungen.
Vorbereitung & Details
Erklären Sie die grundlegende Struktur einer HTML-Seite und die Rolle von Tags.
Moderationstipp: Nutzen Sie die Debugging-Runde, um gezielt nach häufigen Fehlern zu suchen, z.B. vergessene Anführungszeichen bei Attributen oder falsch geschriebene Tag-Namen.
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
Dieses Thema unterrichten
Beginne mit einem kurzen Input, der die Grundlagen zeigt, aber sofort in die Praxis übergeht. Vermeide lange Erklärungen zu Details wie allen möglichen HTML-Tags, sondern konzentriere dich auf die zentralen Elemente. Forschung zeigt, dass Schülerinnen und Schüler durch sofortiges Ausprobieren und iterative Fehlerkorrektur am meisten lernen, daher sollte der Fokus auf dem Prozess und nicht auf der Perfektion liegen.
Was Sie erwartet
Erfolgreich ist die Lerneinheit, wenn die Schülerinnen und Schüler selbstständig einfache Webseiten erstellen, Tags korrekt einsetzen und mit CSS gezielt das Aussehen beeinflussen können. Ihre Seiten sollten valide sein und mindestens zwei gestalterische Elemente enthalten, die sie erklären können.
Diese Aktivitäten sind ein Ausgangspunkt. Die vollständige Mission ist das Erlebnis.
- Vollständiges Moderationsskript mit Lehrkraft-Dialogen
- Druckfertige Schülermaterialien, bereit für den Unterricht
- Differenzierungsstrategien für jeden Lerntyp
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungWährend der Pair Programming-Aktivität denken einige, dass HTML-Tags den Inhalt der Webseite verändern können.
Was Sie stattdessen lehren sollten
Fordern Sie die Paare auf, im Editor bewusst Texte zwischen Tags zu ändern und zu beobachten, dass nur die Struktur, nicht der Inhalt betroffen ist. Fragen Sie gezielt: 'Was passiert, wenn ihr den Text zwischen <p> und </p> ändert? Verändert sich der Text oder nur die Darstellung?'.
Häufige FehlvorstellungBei den CSS-Stationen glauben manche, dass CSS den eigentlichen Textinhalt verändert.
Was Sie stattdessen lehren sollten
Lassen Sie die Schüler in der Station mit der Eigenschaft 'color' arbeiten und gezielt Fragen stellen: 'Ändert sich der Text, wenn ihr die Farbe ändert? Was bleibt gleich, was verändert sich?' Die sichtbare Diskrepanz zwischen Text und Farbe im Browser klärt dies direkt.
Häufige FehlvorstellungWährend der Debugging-Runde oder beim Webseiten-Entwurf entsteht oft der Eindruck, dass eine Webseite immer Internet benötigt.
Was Sie stattdessen lehren sollten
Zeigen Sie den Schülern, wie sie ihre HTML- und CSS-Dateien lokal speichern und im Browser öffnen. Lassen Sie sie bewusst offline arbeiten und fragen: 'Woher kommt die Seite, wenn ihr sie lokal öffnet? Was braucht ihr nicht?' Gruppenarbeit mit geteilten Dateien verstärkt dieses Verständnis.
Ideen zur Lernstandserhebung
Nach der Pair Programming-Aktivität erhalten die Schüler einen Zettel mit einem HTML-Tag und einer CSS-Eigenschaft. Sie erklären kurz, was der Tag bewirkt und wie die Eigenschaft angewendet wird, z.B. '<h1> für die Hauptüberschrift' oder 'font-size: 20px; für die Schriftgröße'.
Während der CSS-Stationen zeigen Sie eine einfache Webseite im Browser und die dazugehörige CSS-Datei. Fragen Sie gezielt: 'Welche CSS-Regel bestimmt die Farbe des Textes?', 'Wie würdest du den Abstand zwischen den Absätzen erhöhen?' Die Schüler zeigen auf die passenden Zeilen.
Nach dem Webseiten-Entwurf tauschen die Schüler ihre Dateien mit einem Partner. Dieser prüft, ob die Seite valide aufgebaut ist, mindestens drei Elemente (Text, Bild, Link) enthält und zwei CSS-Regeln zur Gestaltung nutzt. Feedback geben sie mündlich oder schriftlich auf einem vorbereiteten Bogen.
Erweiterungen & Unterstützung
- Fordern Sie schnelle Schüler auf, eine einfache Navigation mit Dropdown-Menü zu erstellen oder eine responsive Version ihrer Seite mit Media Queries zu entwickeln.
- Für Schüler mit Schwierigkeiten bieten Sie eine Vorlage mit bereits platzierten Tags und CSS-Regeln an, die sie nur noch anpassen müssen.
- Vertiefen Sie mit einer Gruppe die Box-Modell-Konzepte oder zeigen Sie, wie CSS-Selektoren wie Klassen und IDs funktionieren.
Schlüsselvokabular
| HTML-Tag | Ein Befehl in spitzen Klammern, der dem Webbrowser sagt, wie Inhalte strukturiert und dargestellt werden sollen, z.B. `<p>` für einen Absatz. |
| CSS-Regel | Eine Anweisung, die festlegt, wie HTML-Elemente aussehen sollen, bestehend aus einem Selektor und Deklarationen für Eigenschaften und Werte, z.B. `h1 { color: blue; }`. |
| Hyperlink | Ein klickbarer Verweis auf eine andere Webseite, eine Datei oder eine Stelle innerhalb derselben Seite, erstellt mit dem `<a>`-Tag. |
| Selektor | Der Teil einer CSS-Regel, der angibt, auf welche HTML-Elemente die Stiländerungen angewendet werden sollen, z.B. `p` für alle Absätze. |
| Eigenschaft (Property) | Ein Stilmerkmal, das in CSS geändert werden kann, wie z.B. `color` für die Textfarbe oder `font-size` für die Schriftgröße. |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten Entdecken: Informatik
Mehr in Digitale Medien gestalten
Bilder bearbeiten
Die Schülerinnen und Schüler lernen grundlegende Techniken der Bildbearbeitung kennen und wenden diese praktisch an.
2 methodologies
Audio und Video aufnehmen
Die Schülerinnen und Schüler experimentieren mit der Aufnahme und einfachen Bearbeitung von Audio- und Videodateien.
2 methodologies
Präsentationen gestalten
Die Schülerinnen und Schüler erstellen ansprechende digitale Präsentationen unter Berücksichtigung von Designprinzipien.
2 methodologies
Storytelling mit digitalen Medien
Die Schülerinnen und Schüler nutzen digitale Werkzeuge, um eigene Geschichten zu erzählen und multimediale Inhalte zu erstellen.
2 methodologies
Bereit, Webseiten mit HTML/CSS zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen