Eigene Webseite gestalten und veröffentlichenAktivitäten & Unterrichtsstrategien
Aktives Ausprobieren von HTML und CSS hilft den Schülerinnen und Schülern, die Trennung zwischen Struktur und Design konkret zu erleben. Durch das Gestalten einer eigenen Webseite verstehen sie, wie Code direkt wirkt und warum Planung wichtig ist.
Lernziele
- 1Entwerfen Sie die Struktur einer einfachen Webseite mit HTML-Elementen wie Überschriften, Absätzen und Listen für ein vorgegebenes Thema.
- 2Implementieren Sie grundlegende CSS-Regeln zur Gestaltung von Farben, Schriftarten und Layouts einer Webseite.
- 3Analysieren Sie die Funktionalität und Ästhetik einer selbst erstellten Webseite anhand vordefinierter Kriterien.
- 4Evaluieren Sie die Barrierefreiheit einer einfachen Webseite unter Berücksichtigung von Kontrasten und alternativen Texten.
- 5Erstellen Sie eine einfache, funktionale Webseite, die Inhalte logisch strukturiert und visuell ansprechend gestaltet ist.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
Stationenrotation: HTML-Grundlagen
Richten Sie vier Stationen ein: 1. HTML-Struktur mit <head> und <body>, 2. Textformatierung mit <h1> bis <p>, 3. Listen und Links einfügen, 4. Bilder einbinden. Gruppen rotieren alle 10 Minuten und notieren Code-Beispiele. Abschließend teilen sie Erkenntnisse im Plenum.
Vorbereitung & Details
Entwerfen Sie eine eigene Webseite zu einem vorgegebenen Thema.
Moderationstipp: Bei der Stationenrotation zu HTML-Grundlagen sorgen Sie für klare Arbeitsanweisungen an jeder Station, damit die Schülerinnen und Schüler selbstständig und zielgerichtet üben können.
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
Pair Programming: CSS-Design
Paare codieren gemeinsam eine Webseite: Partner A tippt HTML, Partner B CSS für Hintergrund, Schrift und Ausrichtung. Alle 5 Minuten wechseln sie Rollen. Testen Sie im Browser und passen Sie an.
Vorbereitung & Details
Implementieren Sie die Webseite unter Berücksichtigung von Struktur und Design.
Moderationstipp: Beim Pair Programming zu CSS-Design achten Sie darauf, dass die Paare abwechselnd tippen, um beide aktiv einzubinden und Diskussionen über Code-Entscheidungen zu fördern.
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
Peer-Review-Karussell: Evaluierung
Jede Gruppe lädt ihre Webseite hoch. Andere Gruppen rotieren, bewerten mit Checkliste (Funktion, Design, Barrierefreiheit) und geben Feedback. Eigene Seite basierend darauf überarbeiten.
Vorbereitung & Details
Evaluieren Sie die eigene Webseite hinsichtlich Funktionalität, Ästhetik und Barrierefreiheit.
Moderationstipp: Beim Peer-Review-Karussell legen Sie die Bewertungskriterien vorab fest und geben den Schülerinnen und Schülern Zeit, sich in Ruhe mit den Webseiten ihrer Mitschülerinnen und Mitschüler auseinanderzusetzen.
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
Individuell: Veröffentlichen
Schüler laden ihre finale Webseite auf eine kostenlose Plattform wie GitHub Pages hoch. Sie testen Links, Responsivität und teilen den Link mit der Klasse per QR-Code.
Vorbereitung & Details
Entwerfen Sie eine eigene Webseite zu einem vorgegebenen Thema.
Moderationstipp: Beim individuellen Veröffentlichen stellen Sie sicher, dass alle Zugriff auf die benötigten Tools haben und dokumentieren Sie mögliche Hürden, um gezielt unterstützen zu können.
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
Beginnen Sie mit kleinen, überschaubaren Beispielen, damit die Schülerinnen und Schüler Erfolgserlebnisse sammeln. Vermeiden Sie zu frühe Komplexität wie Frames oder JavaScript, um Frustration zu minimieren. Nutzen Sie häufige, niedrigschwellige Überprüfungen durch Pair Programming und Peer-Reviews, um das Verständnis zu sichern. Forschung zeigt, dass visuelle Debugging-Tools und Live-Vorschauen das Lernen beschleunigen, da sie direkte Rückmeldung geben.
Was Sie erwartet
Am Ende des Themas haben die Lernenden eine funktionsfähige Webseite erstellt, die strukturiert, gestaltet und veröffentlicht ist. Sie können sowohl den Code als auch ihre Gestaltungsentscheidungen erklären und begründen.
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 Stationenrotation zu HTML-Grundlagen denken einige Schülerinnen und Schüler, HTML diene nur zum Formatieren von Texten. Hier bieten Sie gezielt Stationen an, bei denen HTML-Code ohne CSS angezeigt wird, um den Struktur-Aspekt bewusst zu machen.
Was Sie stattdessen lehren sollten
Zeigen Sie den Schülerinnen und Schülern während der Stationenrotation bewusst Code-Beispiele, bei denen HTML ohne CSS angezeigt wird. Fordern Sie sie auf, die reine Struktur zu beschreiben und den Unterschied zum späteren Design zu erkennen. Diskutieren Sie im Plenum, warum diese Trennung sinnvoll ist.
Häufige FehlvorstellungWährend der Pair-Programming-Phase zu CSS-Design glauben manche, eine Webseite müsse sofort online sein, um zu testen. Hier nutzen Sie die gemeinsame Arbeit an lokalen Dateien mit Live-Servern, um iterative Tests zu ermöglichen.
Was Sie stattdessen lehren sollten
Fordern Sie die Paare während der Pair-Programming-Phase auf, regelmäßig ihre Änderungen lokal zu testen und gemeinsam zu besprechen. Nutzen Sie Live-Server, um schnelle Rückmeldungen zu geben und die iterative Entwicklung zu fördern.
Häufige FehlvorstellungWährend des Peer-Review-Karussells nehmen einige Schülerinnen und Schüler an, Barrierefreiheit betrifft nur Menschen mit Behinderungen. Hier integrieren Sie Evaluierungs-Stationen mit Screenreadern, um den Nutzen für alle sichtbar zu machen.
Was Sie stattdessen lehren sollten
Integrieren Sie beim Peer-Review-Karussell eine Station mit Screenreadern. Fordern Sie die Schülerinnen und Schüler auf, ihre Webseiten vorzulesen und zu prüfen, ob die Inhalte auch ohne visuelle Darstellung verständlich sind. Diskutieren Sie im Anschluss, warum klare Strukturen und Alternativtexte für alle Nutzerinnen und Nutzer von Vorteil sind.
Ideen zur Lernstandserhebung
Nach der Stationenrotation zu HTML-Grundlagen erhalten die Schülerinnen und Schüler ein Kärtchen mit der Frage: 'Nenne zwei HTML-Tags, die du für deine Webseite verwendet hast, und erkläre ihre Funktion.' Die Antworten werden eingesammelt und auf Verständnis geprüft.
Nach dem Peer-Review-Karussell tauschen die Schülerinnen und Schüler ihre Webseiten aus und bewerten sie anhand einer Checkliste. Fragen könnten sein: 'Ist die Navigation klar?' 'Sind die Farben gut aufeinander abgestimmt?' 'Sind alle Bilder mit Alternativtexten versehen?' Jedes Paar gibt sich gegenseitig konstruktives Feedback zu zwei Verbesserungsmöglichkeiten.
Während der Pair-Programming-Phase zu CSS-Design stellen Sie gezielte Fragen zu spezifischen Konstrukten, z.B.: 'Wie würdest du einen Link zu einer anderen Seite erstellen?' oder 'Welche CSS-Eigenschaft ändert die Hintergrundfarbe eines Elements?' Dies dient der sofortigen Überprüfung des Verständnisses.
Erweiterungen & Unterstützung
- Fordern Sie leistungsstärkere Schülerinnen und Schüler auf, eine responsiv gestaltete Webseite zu erstellen, die sich an verschiedene Bildschirmgrößen anpasst.
- Unterstützen Sie Schülerinnen und Schüler, die unsicher sind, indem Sie ihnen vorgefertigte Code-Snippets zur Verfügung stellen, die sie anpassen können.
- Bieten Sie eine vertiefende Aufgabe an, bei der die Lernenden ihre Webseite um ein einfaches Kontaktformular mit HTML-Formular-Elementen erweitern.
Schlüsselvokabular
| HTML (HyperText Markup Language) | Eine Standard-Auszeichnungssprache zur Erstellung von Webseiten. Sie definiert die Struktur und den Inhalt einer Webseite mithilfe von Tags. |
| CSS (Cascading Style Sheets) | Eine Stylesheet-Sprache zur Beschreibung des Aussehens und der Formatierung einer Webseite. Sie kontrolliert Farben, Schriftarten, Layout und mehr. |
| Tag | Ein Befehl in HTML, der von spitzen Klammern umschlossen ist (z.B. `<p>`). Tags definieren Elemente wie Absätze, Überschriften oder Links. |
| Selektor | Ein Muster in CSS, das angibt, auf welche HTML-Elemente die Stilregeln angewendet werden sollen (z.B. `h1` für alle Überschriften erster Ordnung). |
| Eigenschaft | Ein Stilmerkmal in CSS, das auf ein ausgewähltes Element angewendet wird (z.B. `color` für die Textfarbe oder `font-size` für die Schriftgröße). |
| Wert | Der spezifische Wert, der einer CSS-Eigenschaft zugewiesen wird (z.B. `blue` für die Farbe oder `16px` für die Schriftgröße). |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten Gestalten: Informatik
Mehr in Web-Technologien: Eigene Inhalte gestalten
Das Internet und das World Wide Web
Die Schülerinnen und Schüler unterscheiden zwischen dem Internet als Infrastruktur und dem World Wide Web als Dienst.
2 methodologies
HTML: Die Struktur des Webs
Die Schülerinnen und Schüler lernen die grundlegende Syntax von HTML und erstellen einfache Webseiten mit Text und Überschriften.
2 methodologies
Bilder und Links in HTML
Die Schülerinnen und Schüler integrieren Bilder und Hyperlinks in ihre HTML-Dokumente.
2 methodologies
Listen und Tabellen in HTML
Die Schülerinnen und Schüler strukturieren Informationen mit geordneten und ungeordneten Listen sowie einfachen Tabellen.
2 methodologies
Einführung in CSS: Styling für das Web
Die Schülerinnen und Schüler lernen die Grundlagen von CSS zur visuellen Gestaltung von HTML-Elementen kennen.
2 methodologies
Bereit, Eigene Webseite gestalten und veröffentlichen zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen