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

Bilder und Medien einbinden

Die Schülerinnen und Schüler lernen, Bilder, Audio- und Videodateien in Webseiten einzubinden und deren Eigenschaften zu steuern.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren und Implementieren
• KMK: Sekundarstufe I - Werkzeuge bedarfsgerecht einsetzen

Über dieses Thema

Das Thema 'Bilder und Medien einbinden' vermittelt Schülerinnen und Schülern der Klasse 7, wie sie Bilder, Audio- und Videodateien in HTML-Webseiten integrieren und deren Eigenschaften steuern. Sie arbeiten mit Attributen wie src, alt, width und height für <img>-Tags, lernen die <video>- und <audio>-Elemente kennen und passen Parameter wie autoplay oder controls an. Praktische Übungen zeigen, wie sie Ausrichtung, Responsivität und Barrierefreiheit umsetzen.

Im Rahmen der KMK-Standards 'Modellieren und Implementieren' sowie 'Werkzeuge bedarfsgerecht einsetzen' analysieren die Schüler Attribute, entwerfen Webseiten mit eingebetteten Medien und beurteilen Dateiformate wie JPG, PNG oder MP4 hinsichtlich Ladezeiten und Dateigrößen. Dies stärkt das Verständnis für Webdesign-Grundlagen und verbindet Programmierung mit Mediennutzung. Die Schüler erkennen, dass optimierte Medien die Performance einer Seite verbessern und Nutzererfahrungen steigern.

Active Learning passt ideal zu diesem Thema, weil Schüler direkt im Browser experimentieren und Ergebnisse sehen. Sie testen Variationen von Attributen oder Formaten in Echtzeit, lösen Ladeprobleme gemeinsam und iterieren Designs. Solche hands-on Ansätze machen abstrakte Konzepte wie Performance greifbar, fördern Kreativität und eigenständiges Debuggen.

Leitfragen

1. Analysiere die verschiedenen Attribute, die zur Steuerung von Bildern und Medien in HTML verwendet werden.
2. Entwerfe eine Webseite, die Bilder und ein eingebettetes Video enthält.
3. Beurteile die Bedeutung von Dateiformaten und Dateigrößen für die Performance einer Webseite.

Lernziele

• Analysiere die Funktion und die Attribute (z.B. src, alt, width, height) von HTML-Bild-Tags zur Steuerung der Darstellung.
• Erkläre die grundlegende Funktionsweise der HTML-Elemente <video> und <audio> sowie relevanter Attribute wie controls und autoplay.
• Entwerfe eine einfache Webseite, die sowohl Bilder als auch ein eingebettetes Video korrekt einbindet und deren Darstellung anpasst.
• Bewerte die Auswirkungen unterschiedlicher Bild- und Videoformate (z.B. JPG, PNG, MP4) sowie deren Dateigrößen auf die Ladezeit einer Webseite.

Bevor es losgeht

Grundlagen der HTML-Struktur

Warum: Schüler müssen die grundlegende Syntax von HTML-Tags und die Struktur einer Webseite kennen, um neue Elemente wie <img>, <video> und <audio> einfügen zu können.

Dateiverwaltung und Ordnerstrukturen

Warum: Das Verständnis, wie Dateien in Ordnern organisiert sind und wie Pfade funktionieren, ist essenziell, um das src-Attribut korrekt nutzen zu können.

Schlüsselvokabular

src-Attribut	Gibt den Pfad (URL) zur Bild-, Audio- oder Videodatei an, die eingebunden werden soll.
alt-Attribut	Stellt eine alternative Textbeschreibung für ein Bild bereit, wichtig für Barrierefreiheit und Suchmaschinen.
<video>-Element	Ein HTML-Tag zur Einbettung von Videodateien in eine Webseite, mit Optionen zur Steuerung der Wiedergabe.
<audio>-Element	Ein HTML-Tag zur Einbettung von Audiodateien in eine Webseite, mit Optionen zur Steuerung der Wiedergabe.
Dateiformat	Die Art und Weise, wie digitale Daten (wie Bilder oder Videos) gespeichert werden, z.B. JPG, PNG, MP4, die sich auf Qualität und Größe auswirken.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Der alt-Text ist nur Kosmetik und optional.

Was Sie stattdessen lehren sollten

Der alt-Text ist essenziell für Barrierefreiheit, da Screenreader ihn vorlesen. Active Learning hilft, wenn Schüler Seiten mit/ohne alt testen und Feedback von Mitschülern einholen, um Inklusion zu verstehen.

Häufige Fehlvorstellung

Größere Dateien laden schneller, weil sie detaillierter sind.

Was Sie stattdessen lehren sollten

Größere Dateien verlangsamen die Ladezeit und beeinträchtigen die Performance. Paararbeit mit Dateikompression zeigt messbare Unterschiede in Sekunden, was Schüler zum Optimieren motiviert.

Häufige Fehlvorstellung

Alle Dateiformate funktionieren identisch auf jeder Webseite.

Was Sie stattdessen lehren sollten

Formate wie JPG für Fotos und SVG für Grafiken haben spezifische Vor-/Nachteile. Gruppenexperimente mit Browser-Tests enthüllen Kompatibilität und Qualität, fördern fundierte Auswahl.

Ideen für aktives Lernen

Paararbeit: Bildattribute variieren

Paare fügen ein Bild mit <img src="" alt=""> ein und testen Attribute wie width, height und alt in einem HTML-Editor. Sie verändern Werte, laden die Seite neu und notieren Auswirkungen auf Darstellung und Barrierefreiheit. Abschließend vergleichen sie Screenshots.

30 Min.·Partnerarbeit

Stationenrotation: Medien einbetten

Richten Sie Stationen ein: Bild einfügen, Video mit controls, Audio mit loop und Performance-Test mit verschiedenen Dateigrößen. Gruppen rotieren alle 10 Minuten, bauen Code auf und präsentieren ein Ergebnis.

45 Min.·Kleingruppen

Gemeinsame Webseite erweitern

Die Klasse erweitert eine Vorlage gemeinsam: Jeder fügt ein Medium ein, teilt Code via Padlet und diskutiert Verbesserungen. Testen Sie Ladezeiten mit Browser-Tools und optimieren Sie kollektiv.

50 Min.·Ganze Klasse

Individual: Optimierungs-Challenge

Jeder Schüler wählt ein Bild/Video, bindet es ein und reduziert Dateigröße mit Tools wie TinyPNG. Vergleichen Sie Ladezeiten vor/nach und dokumentieren Attribute für beste Performance.

25 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webdesigner und Content-Ersteller nutzen diese Techniken täglich, um ansprechende Webseiten für Unternehmen wie IKEA oder Nachrichtenportale wie Spiegel Online zu gestalten. Sie wählen passende Bildformate und optimieren Videogrößen, um die Nutzererfahrung zu verbessern.
• Journalisten und Blogger binden multimediale Inhalte in ihre Online-Artikel ein, um Geschichten lebendiger zu erzählen. Sie laden beispielsweise Fotos von Ereignissen oder kurze Videoclips direkt in ihre Beiträge auf Plattformen wie WordPress oder Medium.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Die Schüler erhalten ein HTML-Snippet mit einem Bild-Tag. Sie sollen den Zweck des alt-Attributs erklären und eine alternative Beschreibung für das Bild vorschlagen. Zusätzlich sollen sie eine Frage formulieren, die sich auf die Einbindung eines Videos bezieht.

Kurze Überprüfung

Stellen Sie den Schülern zwei identische Webseiten-Screenshots vor, die sich nur durch die Ladezeit unterscheiden. Fragen Sie: 'Welcher Faktor, den wir heute besprochen haben, könnte die Ladezeit beeinflussen und wie?' Lassen Sie die Schüler ihre Vermutungen kurz aufschreiben.

Gegenseitige Bewertung

Die Schüler tauschen ihre erstellten Webseiten-Entwürfe (mit Bild und Video) aus. Jeder Schüler prüft den Entwurf des Partners auf folgende Punkte: Ist das Bild mit einem alt-Text versehen? Sind die Video-Steuerelemente sichtbar? Gibt es eine kurze Notiz zur Optimierung der Dateigröße?

Häufig gestellte Fragen

Wie binde ich Bilder und Videos in HTML ein?

Verwenden Sie <img src="bild.jpg" alt="Beschreibung" width="300"> für Bilder und <video src="video.mp4" controls width="400"></video> für Videos. Testen Sie Attribute wie height oder poster für Thumbnails. Achten Sie auf relative Pfade und optimieren Sie Dateigrößen für schnelle Ladezeiten. Praktische Übungen im Editor machen den Prozess intuitiv.

Welche Attribute steuern Medieneigenschaften?

Wichtige Attribute sind src für die Quelle, alt für Textalternativen, width/height für Größe, controls für Bedienelemente und autoplay für automatischen Start. Für Videos: loop wiederholt, muted startet stumm. Schüler experimentieren damit, um responsive Designs zu schaffen und Performance zu optimieren.

Warum beeinflussen Dateiformate die Webseiten-Performance?

Formate wie MP4 sind komprimiert und laden schneller als AVI, JPG spart bei Fotos mehr als BMP. Große Dateien verursachen Wartezeiten, besonders mobil. Schüler messen Ladezeiten mit Tools und lernen, Formate passend zu wählen, um Nutzerfrustration zu vermeiden.

Wie unterstützt Active Learning beim Einbinden von Medien?

Active Learning aktiviert Schüler durch Echtzeit-Tests im Browser: Sie ändern Attribute, sehen Sofort-Effekte und debuggen kollaborativ. Stationen oder Challenges fördern Iteration und Problemlösung. Dies vertieft Verständnis für Performance und Barrierefreiheit, da abstrakte Konzepte konkret werden und Motivation steigt.