Webseiten mit HTML/CSS
Die Schülerinnen und Schüler lernen die Grundlagen von HTML und CSS, um einfache Webseiten zu erstellen und zu gestalten.
Über dieses Thema
Die Schülerinnen und Schüler erlernen die Grundlagen von HTML und CSS, um einfache Webseiten zu erstellen und zu gestalten. HTML dient der Strukturierung des Inhalts durch Tags wie <html>, <head>, <body>, <h1> für Überschriften, <p> für Absätze, <img> für Bilder und <a> für Links. CSS ergänzt dies, indem es das Aussehen steuert: Farben mit color, Schriftgrößen mit font-size und Layouts mit margin oder display. So entstehen funktionale und ansprechende Seiten.
Dieses Thema knüpft an die KMK-Standards für Sekundarstufe I an, insbesondere Implementieren und Werkzeuge in Digitale Welten Entdecken: Informatik. Es fördert Kompetenzen im Gestalten digitaler Medien, logisches Denken und iteratives Problemlösen. Die Schüler beantworten Schlüsselfragen zur HTML-Struktur, zum Entwurf mit Text, Bildern und Links sowie zur CSS-Steuerung von Aussehen und Layout. Dies bereitet auf komplexere Projekte vor und verbindet Informatik mit kreativem Ausdruck.
Aktives Lernen eignet sich hervorragend, da Schüler durch direktes Codieren und sofortiges Feedback im Browser abstrakte Syntax und Effekte erleben. Experimentieren mit Fehlern stärkt das Verständnis und macht den Prozess motivierend und nachhaltig.
Leitfragen
- Erklären Sie die grundlegende Struktur einer HTML-Seite und die Rolle von Tags.
- Entwerfen Sie eine einfache Webseite mit Text, Bildern und Links unter Verwendung von HTML.
- Analysieren Sie, wie CSS verwendet wird, um das Aussehen und Layout einer Webseite zu steuern.
Lernziele
- Erklären Sie die Funktion und Struktur von HTML-Tags zur Inhaltsgliederung einer Webseite.
- Entwerfen Sie eine einfache Webseite mit Text, Bildern und Hyperlinks unter Verwendung von HTML-Elementen.
- Analysieren Sie die Auswirkungen von CSS-Regeln auf das visuelle Erscheinungsbild und Layout einer Webseite.
- Implementieren Sie grundlegende CSS-Eigenschaften zur Gestaltung von Textfarben, Schriftgrößen und Abständen.
- Vergleichen Sie die Ergebnisse verschiedener CSS-Layout-Eigenschaften wie `display: block` und `display: inline`.
Bevor es losgeht
Warum: Schüler müssen grundlegende Kenntnisse im Umgang mit einem Computer, Dateiverwaltung und der Nutzung eines Webbrowsers besitzen, um mit den Werkzeugen arbeiten zu können.
Warum: Ein grundlegendes Verständnis dafür, was Webseiten sind und wie sie im Internet funktionieren, erleichtert das Verständnis des Zwecks von HTML und CSS.
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. |
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungHTML-Tags ändern den Inhalt der Webseite.
Was Sie stattdessen lehren sollten
HTML strukturiert nur, ändert aber nicht den Text selbst. Aktive Experimente im Editor zeigen, dass <p>Hallo</p> den Text 'Hallo' einrahmt, ohne ihn zu verändern. Peer-Diskussionen klären dies schnell.
Häufige FehlvorstellungCSS verändert den eigentlichen Textinhalt.
Was Sie stattdessen lehren sollten
CSS beeinflusst nur Aussehen wie Farbe oder Position, nicht den Inhalt. Schüler sehen das beim Ändern von color: red, während der Text gleich bleibt. Hands-on-Tests im Browser festigen diesen Unterschied.
Häufige FehlvorstellungEine Webseite braucht Internet zum Erstellen.
Was Sie stattdessen lehren sollten
HTML/CSS-Dateien laufen lokal im Browser. Schüler erstellen und öffnen Dateien offline, was Missverständnisse ausräumt. Gruppenarbeit mit geteilten Dateien verstärkt dieses Wissen.
Ideen für aktives Lernen
Alle Aktivitäten ansehenPair 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.
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.
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.
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.
Bezüge zur Lebenswelt
- Webdesigner und Frontend-Entwickler nutzen HTML und CSS täglich, um interaktive und visuell ansprechende Webseiten für Unternehmen wie Zalando oder für Online-Shops zu erstellen.
- Journalisten und Content-Ersteller verwenden Content-Management-Systeme, die im Hintergrund HTML und CSS nutzen, um Artikel und Berichte für Nachrichtenportale wie Spiegel Online oder Zeit Online zu formatieren und zu veröffentlichen.
- Spieleentwickler können einfache HTML/CSS-Kenntnisse nutzen, um Benutzeroberflächen für Web-basierte Spiele oder interaktive Lernplattformen zu gestalten.
Ideen zur Lernstandserhebung
Geben Sie jedem Schüler eine Karte mit einem HTML-Tag (z.B. `<p>`, `<img>`, `<a>`) und einer CSS-Eigenschaft (z.B. `color`, `font-size`). Die Schüler schreiben eine kurze Erklärung, was der Tag bewirkt bzw. welche Eigenschaft verändert wird, und wie man sie mit einem Beispielwert anwendet.
Zeigen Sie eine einfache Webseite im Browser und eine danebenliegende HTML/CSS-Datei. Stellen Sie gezielte Fragen: 'Welcher Tag ist für die Überschrift verantwortlich?', 'Wie ändert sich die Farbe des Textes, wenn wir den Wert bei `color` ändern?', 'Welche CSS-Regel sorgt für den Abstand zwischen den Absätzen?'
Die Schüler erstellen eine kleine Webseite mit mindestens drei Elementen (Text, Bild, Link) und gestalten sie mit CSS. Anschließend tauschen sie ihre Dateien mit einem Partner. Jeder Partner prüft: Ist die Seite valide aufgebaut? Sind mindestens zwei CSS-Regeln zur Gestaltung angewendet? Geben Sie ein kurzes Feedback zur Verbesserung.
Häufig gestellte Fragen
Was ist die grundlegende Struktur einer HTML-Seite?
Wie unterscheidet sich HTML von CSS?
Wie fügt man Bilder und Links in HTML ein?
Wie kann aktives Lernen beim HTML/CSS-Unterricht helfen?
Planungsvorlagen für 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