Bilder und Medien einbinden

Aktives Ausprobieren hilft den Schülerinnen und Schülern, die technischen Zusammenhänge zwischen Bildern, Medien und HTML zu verstehen. Indem sie selbst Attribute setzen und Effekte testen, erkennen sie, warum bestimmte Entscheidungen wichtig sind. Die direkte Anwendung macht abstrakte Konzepte greifbar und fördert das selbstgesteuerte Lernen.

• Klasse 7
• Digitale Welten verstehen und gestalten
• 4 Aktivitäten
• 25 Min.–50 Min.

Lernziele

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

Projektbasiertes Lernen

⏱ 30 Min.·Partnerarbeit

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.

Vorbereitung & Details

Analysiere die verschiedenen Attribute, die zur Steuerung von Bildern und Medien in HTML verwendet werden.

Moderationstipp: Geben Sie den Paaren in der Paararbeit konkrete Dateien vor, damit sie gezielt mit src, alt, width und height experimentieren 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

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 45 Min.·Kleingruppen

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.

Vorbereitung & Details

Entwerfe eine Webseite, die Bilder und ein eingebettetes Video enthält.

Moderationstipp: Stellen Sie bei der Stationenrotation sicher, dass jede Station klare Aufgabenstellungen und die benötigten Materialien enthält, um Zeitverlust zu vermeiden.

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

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 50 Min.·Ganze Klasse

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.

Vorbereitung & Details

Beurteile die Bedeutung von Dateiformaten und Dateigrößen für die Performance einer Webseite.

Moderationstipp: Beobachten Sie bei der gemeinsamen Webseite erweiterung, wie die Schülerinnen und Schüler ihre Code-Fragmente integrieren und ob sie dabei typische Fehler wie korrekte Pfade oder Attribute machen.

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

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 25 Min.·Einzelarbeit

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.

Vorbereitung & Details

Analysiere die verschiedenen Attribute, die zur Steuerung von Bildern und Medien in HTML verwendet werden.

Moderationstipp: Bereiten Sie für die Individual: Optimierungs-Challenge verschiedene Dateigrößen und Formate vor, damit die Schülerinnen und Schüler messbare Unterschiede erkennen und dokumentieren 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

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Dieses Thema unterrichten

Erfahrene Lehrkräfte setzen auf das Prinzip des entdeckenden Lernens: Schülerinnen und Schüler sollen selbst herausfinden, warum bestimmte Attribute notwendig sind. Vermeiden Sie lange Frontalphasen, sondern lassen Sie die Lernenden direkt experimentieren und Fehler machen. Nutzen Sie gezielte Impulsfragen, um Reflexion anzuregen, z.B. 'Was passiert, wenn das alt-Attribut fehlt?'. Feedback sollte immer an konkrete Beobachtungen anknüpfen, nicht an abstrakte Bewertungen.

Was Sie erwartet

Am Ende der Einheit sollten die Lernenden Bilder und Medien technisch korrekt einbinden können. Sie verstehen den Zweck von Attributen wie alt, width oder controls und berücksichtigen dabei Barrierefreiheit und Performance. Die erstellten Webseiten zeigen, dass sie die Inhalte praktisch umsetzen und reflektieren können.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Paararbeit: 'Der alt-Text ist nur für die Optik und kann weggelassen werden.'

Was Sie stattdessen lehren sollten

Fordern Sie die Paare auf, eine Webseite ohne alt-Text mit einem Screenreader zu testen und die Unterschiede in der Barrierefreiheit zu dokumentieren. Besprechen Sie im Anschluss, warum der alt-Text essenziell ist.

Häufige Fehlvorstellung

Während der Stationenrotation: 'Größere Dateien laden schneller, weil sie mehr Details enthalten.'

Was Sie stattdessen lehren sollten

Lassen Sie die Schülerinnen und Schüler in der Station mit Dateikompression zwei identische Bilder in unterschiedlichen Größen laden und die Ladezeiten vergleichen. Die gemessenen Unterschiede machen den Zusammenhang zwischen Dateigröße und Performance deutlich.

Häufige Fehlvorstellung

Während der Stationenrotation: 'Alle Formate wie JPG, PNG oder SVG funktionieren gleich gut auf jeder Webseite.'

Was Sie stattdessen lehren sollten

Geben Sie den Gruppen verschiedene Dateiformate vor und lassen Sie sie in unterschiedlichen Browsern testen. Die Schülerinnen und Schüler sollen dokumentieren, welche Formate in welchen Browsern Probleme verursachen und warum.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der Paararbeit: Geben Sie den Schülerinnen und Schülern ein HTML-Snippet mit einem fehlerhaften img-Tag. Sie sollen den Fehler identifizieren, eine korrekte alt-Beschreibung formulieren und eine Frage zu Video-Attributen wie controls oder autoplay stellen.

Kurze Überprüfung

Nach der Stationenrotation: Zeigen Sie zwei identische Webseiten-Screenshots mit unterschiedlichen Ladezeiten. Fragen Sie: 'Welcher Faktor beeinflusst die Ladezeit und wie lässt er sich messen?' Die Schülerinnen und Schüler notieren ihre Antworten kurz.

Gegenseitige Bewertung

Während der gemeinsamen Webseite erweitern: Lassen Sie die Schülerinnen und Schüler ihre Entwürfe nach Fertigstellung tauschen. Jeder prüft den Entwurf des Partners auf korrekte alt-Texte, sichtbare Video-Steuerelemente und eine Notiz zur Dateigrößen-Optimierung.

Erweiterungen & Unterstützung

• Fordern Sie schnelle Schülerinnen und Schüler auf, ein Video mit mehreren Quellenformaten (MP4, WebM) einzubinden und die Kompatibilität in verschiedenen Browsern zu testen.
• Für Schülerinnen und Schüler mit Schwierigkeiten bereiten Sie vorbereitete Code-Snippets vor, die sie nur noch anpassen müssen, um den Einstieg zu erleichtern.
• Vertiefen Sie das Thema mit einer Recherche zu neuen Web-Technologien wie WebP oder AVIF für optimierte Medieninhalte und lassen Sie die Ergebnisse im Plenum präsentieren.

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.