Informatik · Klasse 9 · Vernetzte Systeme und Internetprotokolle · 1. Halbjahr

Web-Technologien: HTML und CSS

Die Schülerinnen und Schüler lernen die Grundlagen von HTML zur Strukturierung und CSS zur Gestaltung von Webseiten kennen.

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

Über dieses Thema

HTML strukturiert Webseiteninhalte durch semantische Elemente wie <h1> für Überschriften, <p> für Absätze und <ul> für Listen. CSS gestaltet diese Inhalte, indem Eigenschaften wie Farben, Schriftgrößen und Abstände definiert werden. Schülerinnen und Schüler in Klasse 9 lernen, einfache Webseiten zu bauen, indem sie HTML für die Grundstruktur und CSS für das Layout nutzen. Dies entspricht den KMK-Standards zu Daten und Informationen sowie Modellieren und beantwortet Schlüsselfragen zur Rolle beider Technologien.

Im Unterrichtsthema 'Vernetzte Systeme und Internetprotokolle' verstehen Lernende die Trennung von Inhalt und Präsentation. Sie analysieren, wie HTML-Elemente logische Hierarchien schaffen und CSS-Regeln diese visuell anpassen. Praktische Konstruktion fördert systematisches Denken und Problemlösung, da Schülerinnen und Schüler Code schreiben, testen und debuggen.

Active Learning eignet sich hervorragend, weil Schülerinnen und Schüler eigene Webseiten iterativ erstellen und in Gruppen austauschen. Solche hands-on Ansätze machen Syntax und Selektoren greifbar, steigern Motivation durch sichtbare Ergebnisse und trainieren kollaboratives Debugging.

Leitfragen

1. Erklären Sie die Rolle von HTML und CSS beim Aufbau einer Webseite.
2. Analysieren Sie, wie HTML-Elemente Inhalte strukturieren.
3. Konstruieren Sie eine einfache Webseite mit HTML und gestalten Sie diese mit CSS.

Lernziele

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

Bevor es losgeht

Grundlagen der Computerbedienung

Warum: Schülerinnen und Schüler müssen grundlegende Kenntnisse im Umgang mit einem Computer und einem Texteditor haben, um HTML-Dateien erstellen und speichern zu können.

Dateiverwaltung

Warum: Das Verständnis von Ordnerstrukturen und Dateinamen ist notwendig, um HTML- und CSS-Dateien korrekt zu organisieren und miteinander zu verknüpfen.

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.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

HTML dient dem Design, CSS der Struktur.

Was Sie stattdessen lehren sollten

HTML definiert semantische Struktur, CSS die visuelle Gestaltung. Active Learning mit Pair Programming hilft, da Schülerinnen und Schüler Code schrittweise aufbauen und den Effekt jeder Änderung sehen. Gruppenfeedback verstärkt die Trennung.

Häufige Fehlvorstellung

Tags brauchen immer Attribute wie style.

Was Sie stattdessen lehren sollten

Inline-Styles mit style sind möglich, aber CSS-Dateien trennen besser Inhalt und Design. Hands-on Experimente in Stationen zeigen den Vorteil externer CSS, da Schülerinnen und Schüler Regeln zentral ändern und den globalen Effekt beobachten.

Häufige Fehlvorstellung

CSS wirkt nur auf das gesamte Dokument.

Was Sie stattdessen lehren sollten

Selektoren wie Klassen oder IDs zielen präzise ab. Kollaborative Challenges machen dies klar, weil Gruppen gezielt Elemente stylen und Unterschiede vergleichen.

Ideen für aktives Lernen

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.

30 Min.·Partnerarbeit

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.

45 Min.·Kleingruppen

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.

50 Min.·Einzelarbeit

Review-Runde: Code-Kritik

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

35 Min.·Kleingruppen

Bezüge zur Lebenswelt

• Webentwickler bei Unternehmen wie Zalando oder Lieferando nutzen HTML und CSS täglich, um die Benutzeroberflächen für Online-Shops und Bestellplattformen zu erstellen und zu gestalten. Sie sorgen dafür, dass Produkte ansprechend präsentiert werden und die Navigation für Kunden intuitiv ist.
• Journalisten und Redakteure bei Nachrichtenportalen wie Spiegel Online oder Süddeutsche Zeitung verwenden HTML und CSS, um Artikel und multimediale Inhalte online verständlich und visuell ansprechend aufzubereiten. Sie strukturieren Texte und binden Bilder oder Videos ein, um die Lesbarkeit zu verbessern.

Ideen zur Lernstandserhebung

Lernstandskontrolle

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.

Kurze Überprüfung

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.

Gegenseitige Bewertung

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.

Häufig gestellte Fragen

Wie erkläre ich die Rolle von HTML und CSS?

HTML baut die skeletale Struktur einer Webseite auf, ähnlich einem Umriss. CSS fügt das Design hinzu, wie Farben und Layout. Zeigen Sie Beispiele: Ohne CSS wirkt HTML nüchtern, mit CSS ansprechend. Lassen Sie Schülerinnen und Schüler ein Template kopieren und modifizieren, um den Unterschied zu erleben. Dies fördert tiefes Verständnis der Standards.

Wie baue ich eine einfache Webseite mit HTML und CSS?

Beginnen Sie mit <!DOCTYPE html>, dann <html>, <head> mit <link> zu CSS und <body> mit Elementen. CSS in einer separaten Datei: body { font-family: Arial; }. Testen Sie im Browser. Erweitern Sie schrittweise mit Klassen. Bieten Sie Vorlagen an, damit Schülerinnen und Schüler fokussiert experimentieren.

Wie fördert aktives Lernen das Verständnis von HTML und CSS?

Aktives Lernen macht Syntax greifbar durch immediates Feedback im Browser. Pair Programming teilt Wissen, Stationenrotations üben gezielt Eigenschaften. Schülerinnen und Schüler iterieren eigene Seiten, debuggen Fehler und präsentieren. Dies steigert Engagement, reduziert Frustration und verbindet Theorie mit Praxis, passend zu KMK-Modellierstandards.

Welche häufigen Fehler passieren bei HTML und CSS-Anfängern?

Vergessene schließende Tags verzerren Layouts, ungültige Selektoren verhindern Styling. Fehlende Semantik wie <header> statt <div> ignoriert Barrierefreiheit. Korrigieren Sie durch Live-Coding-Demos und Peer-Reviews. Active Ansätze wie Challenges helfen, da Schülerinnen und Schüler Fehler selbst entdecken und beheben.