Informatik · Klasse 7 · Webdesign: Meine erste Webseite · 2. Halbjahr

Projekt: Meine persönliche Webseite

Anwendung der gelernten HTML- und CSS-Kenntnisse zur Erstellung einer eigenen, einfachen persönlichen Webseite.

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

Über dieses Thema

Das Projekt 'Meine persönliche Webseite' wendet gelerntes HTML- und CSS-Wissen an, um eine einfache, individuelle Webseite zu erstellen. Schüler entwerfen ein Konzept, das ihre Interessen und Fähigkeiten zeigt, implementieren Struktur mit HTML und Gestaltung mit CSS und bewerten das Ergebnis auf Funktionalität, Ästhetik sowie Einhaltung von Webstandards. So verbinden sie technisches Know-how mit persönlicher Kreativität und lernen, benutzerfreundliche Designs zu schaffen.

Im KMK-Lehrplan für Digitale Welten (Sekundarstufe I) deckt das Projekt die Standards 'Modellieren und Implementieren', 'Produzieren und Präsentieren' sowie 'Werkzeuge bedarfsgerecht einsetzen' ab. Es fördert systematisches Denken, Reflexion und die Anwendung digitaler Tools in authentischen Szenarien. Schüler analysieren Herausforderungen wie responsive Layouts oder Barrierefreiheit und üben Selbst- und Fremdbewertung.

Aktives Lernen eignet sich hervorragend, da Schüler iterativ bauen, testen und verbessern. Peer-Reviews und Präsentationen machen Fehler sichtbar, Feedback konkret und Erfolge spürbar. So entsteht echtes Verständnis und Motivation durch greifbare Produkte.

Leitfragen

1. Entwerfe ein Konzept für eine persönliche Webseite, die deine Interessen und Fähigkeiten widerspiegelt.
2. Analysiere die Herausforderungen bei der Gestaltung einer benutzerfreundlichen und ästhetisch ansprechenden Webseite.
3. Beurteile die eigene Webseite hinsichtlich ihrer Funktionalität, Ästhetik und Einhaltung der Webstandards.

Lernziele

• Entwerfen Sie ein grundlegendes Layout und eine Navigationsstruktur für eine persönliche Webseite, die spezifische Interessen widerspiegelt.
• Implementieren Sie grundlegende HTML-Strukturelemente zur Organisation von Inhalten wie Text, Bildern und Links auf einer Webseite.
• Wenden Sie grundlegende CSS-Regeln an, um Farben, Schriftarten und Abstände auf einer Webseite zu gestalten.
• Bewerten Sie die Benutzerfreundlichkeit und visuelle Attraktivität einer einfachen persönlichen Webseite anhand definierter Kriterien.
• Analysieren Sie die Struktur einer bestehenden Webseite, um die Anwendung von HTML-Tags und CSS-Eigenschaften zu identifizieren.

Bevor es losgeht

Grundlagen der Internetnutzung

Warum: Schüler müssen wissen, wie man Webseiten im Browser öffnet und navigiert, um ihre eigenen Ergebnisse betrachten zu können.

Einführung in HTML-Strukturierung

Warum: Das Verständnis grundlegender HTML-Tags wie `<h1>`, `<p>`, `<img>` und `<a>` ist notwendig, um Inhalte auf der Webseite zu platzieren.

Einführung in CSS-Grundlagen

Warum: Grundkenntnisse über CSS-Syntax und die Anwendung von grundlegenden Eigenschaften wie `color`, `font-size` und `background-color` sind erforderlich, um das Aussehen der Seite zu gestalten.

Schlüsselvokabular

HTML-Element	Ein grundlegender Baustein einer HTML-Seite, der durch öffnende und schließende Tags definiert wird und Inhalte strukturiert.
CSS-Selektor	Ein Muster, das angibt, auf welche HTML-Elemente bestimmte CSS-Stile angewendet werden sollen.
Layout	Die Anordnung von Elementen auf einer Webseite, die bestimmt, wie Inhalte visuell präsentiert werden.
Responsives Design	Eine Designphilosophie, die sicherstellt, dass Webseiten auf verschiedenen Geräten und Bildschirmgrößen gut aussehen und funktionieren.
Benutzerfreundlichkeit (Usability)	Das Maß, in dem eine Webseite einfach zu bedienen ist und den Nutzern hilft, ihre Ziele effizient und zufriedenstellend zu erreichen.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Webseiten müssen viele Animationen und Farben haben, um ansprechend zu sein.

Was Sie stattdessen lehren sollten

Einfache, klare Designs sind oft benutzerfreundlicher. Peer-Reviews helfen Schülern, übertriebene Effekte zu erkennen und auf Lesbarkeit zu achten. Aktive Tests zeigen, wie Minimalismus die Nutzererfahrung verbessert.

Häufige Fehlvorstellung

HTML dient nur zum Text einfügen, CSS nur zur Farbgebung.

Was Sie stattdessen lehren sollten

HTML strukturiert Inhalte semantisch, CSS gestaltet ganzheitlich. Gemeinsame Codingsessions klären die Trennung und zeigen, wie beide zusammenarbeiten. Schüler entdecken durch Iteration die Flexibilität.

Häufige Fehlvorstellung

Webstandards wie Validität sind unwichtig für persönliche Seiten.

Was Sie stattdessen lehren sollten

Standards sorgen für Kompatibilität und Barrierefreiheit. Gruppenbewertungen mit Validator-Tools machen den Nutzen greifbar und motivieren zur korrekten Implementierung.

Ideen für aktives Lernen

Brainstorming-Karussell: Konzeptentwurf

Jeder Schüler skizziert auf Papier Inhalte, Struktur und Farbschema für seine Webseite. Sammle Ideen zu Abschnitten wie 'Über mich', 'Hobbys' und 'Fähigkeiten'. Teile Skizzen in der Klasse und notiere erste HTML-Elemente.

30 Min.·Einzelarbeit

Paarprogrammierung: HTML und CSS umsetzen

In Paaren baut einer die HTML-Struktur, der andere fügt CSS hinzu, dann tauschen. Testet die Seite im Browser und passt Responsivität an. Wechselt Rollen nach 10 Minuten.

45 Min.·Partnerarbeit

Peer Review: Webseiten testen

Jede Webseite wird von zwei Mitschülern auf Funktionalität, Design und Standards geprüft. Nutzt eine Checkliste mit Kriterien wie Ladezeit und Barrierefreiheit. Gibt konstruktives Feedback.

30 Min.·Kleingruppen

Galerie-Walk: Präsentation

Webseiten lokal hosten und als Galerie präsentieren. Schüler laufen herum, notieren Stärken und Verbesserungsvorschläge. Abschließende Plenumdiskussion.

40 Min.·Ganze Klasse

Bezüge zur Lebenswelt

• Webdesigner bei Agenturen wie 'Pixel & Code' in Berlin erstellen Webseiten für kleine Unternehmen und Start-ups, indem sie HTML und CSS verwenden, um deren Markenidentität online darzustellen.
• Journalisten und Blogger nutzen Content-Management-Systeme, die auf HTML und CSS basieren, um ihre Artikel und persönlichen Blogs ansprechend zu gestalten und für Leser auf PCs und Smartphones zugänglich zu machen.
• Künstler und Musiker erstellen eigene Portfolios oder Webseiten, um ihre Werke zu präsentieren und mit potenziellen Kunden oder Fans in Kontakt zu treten, ähnlich wie die Webseite des Fotografen Annie Leibovitz ihre Arbeiten zeigt.

Ideen zur Lernstandserhebung

Gegenseitige Bewertung

Schüler tauschen ihre Webseitenentwürfe aus. Jeder Schüler prüft die Webseite des Partners anhand einer Checkliste: Sind alle geforderten HTML-Elemente vorhanden? Sind mindestens drei CSS-Regeln zur Gestaltung angewendet? Gibt es einen Link zu einer externen Seite? Geben Sie dem Partner schriftlich zwei positive Rückmeldungen und eine konkrete Verbesserungsidee.

Lernstandskontrolle

Die Schüler erhalten ein Blatt mit zwei Fragen: 1. Nennen Sie ein HTML-Element, das Sie für Ihre Webseite verwendet haben, und erklären Sie kurz dessen Funktion. 2. Beschreiben Sie eine CSS-Regel, die Sie angewendet haben, und erklären Sie, wie sie das Aussehen Ihrer Seite verändert hat.

Kurze Überprüfung

Der Lehrer zeigt eine einfache Webseite auf dem Beamer. Die Schüler identifizieren und benennen per Zuruf oder schriftlich mindestens drei verwendete HTML-Tags und zwei CSS-Eigenschaften, die sie erkennen können.

Häufig gestellte Fragen

Wie entwerfe ich ein Konzept für eine persönliche Webseite?

Beginnen Sie mit einer Mindmap zu Interessen, Hobbys und Fähigkeiten. Definieren Sie klare Abschnitte wie Header, Hauptbereich und Footer. Skizzieren Sie Wireframes für Layout und notieren Sie HTML-Tags sowie CSS-Eigenschaften. Das sorgt für eine fokussierte Umsetzung und erleichtert spätere Bewertung. (62 Wörter)

Welche Herausforderungen gibt es bei benutzerfreundlichem Webdesign?

Häufige Probleme sind unklare Navigation, schlechte Lesbarkeit oder fehlende Responsivität. Schüler lernen, Kontraste zu prüfen, Menüs logisch zu gliedern und Media Queries einzusetzen. Tests auf verschiedenen Geräten und Feedback-Runden helfen, diese zu meistern und ästhetisch ansprechende Seiten zu schaffen. (68 Wörter)

Wie bewerte ich meine Webseite auf Funktionalität und Standards?

Nutzen Sie Checklisten für Ladezeiten, Links, semantische HTML und CSS-Validierung. Testen Sie Barrierefreiheit mit Screenreadern und Responsivität. Peer-Reviews und Tools wie W3C-Validator liefern objektive Kriterien. So fördern Sie Selbstreflexion und Qualitätssicherung. (64 Wörter)

Wie unterstützt aktives Lernen beim Projekt 'Meine persönliche Webseite'?

Aktives Lernen macht abstraktes Coding konkret durch iterative Entwicklung, Peer-Feedback und Präsentationen. Schüler bauen, testen und verbessern in Gruppen, was Motivation steigert und Fehler früh aufdeckt. Solche Ansätze verbinden Theorie mit Praxis, fördern Kollaboration und tiefes Verständnis von HTML/CSS. (72 Wörter)