08 – Medien 🖼️

Bilder, Videos, GIFs – richtig einbinden und optimieren

🎯 1. Einleitung & W3Schools

In Kapitel 08 hast du gelernt, wie man Bilder und Videos einbindet, Formate auswählt und Dateien optimiert.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🔗 W3Schools – HTML Bilder
🔗 W3Schools – HTML Videos

🧠 2. KI-Prompt-Training – Medien mit Bedacht

Deine Aufgabe: Formuliere einen Prompt, der keine Medien-Code liefert, sondern dir hilft, zu verstehen, wie man Medien barrierefrei und effizient einbindet.

❌ Vermeide: „Gib mir ein Bild für meine Website.“ ✅ Fragen, die denken erzwingen:

„Warum ist das alt-Attribut bei <img> Pflicht – und was schreibt man hinein?“
„Erkläre mir den Unterschied zwischen lokalen Videos und YouTube-Einbettung – Vor- und Nachteile.“
„Welches Bildformat eignet sich für Fotos – und welches für Logos? Warum?“

💡 Merke: Wenn die KI dir <img>-Tags gibt, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht korrigiere!

Ein Schüler hat folgenden Code abgegeben:

<img src="https://irgendeine-seite.at/bild.jpg" alt="Bild">
<video src="video.mp4" controls></video>

Schreibe (auf Papier oder in Textdatei):

Warum ist der Bild-Link problematisch – rechtlich, technisch und ethisch?
Warum ist der alt-Text „Bild“ unzureichend – und was wäre besser?
Welche zwei Probleme hat das Videotag – und wie behebt man sie?
Warum sollte man Bilder vor dem Hochladen optimieren – und wie geht das einfach?

⚠️ Hinweis: Wer nur den „richtigen Code“ hinschreibt, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Umsetzung!

🖼️ Aufgabe 2: Integriere bewusst – erst nach der Analyse!

Erstelle ein Projektverzeichnis mein-medienprojekt mit folgender Struktur:

mein-medienprojekt/
├── index.html
├── assets/
│   ├── bilder/
│   │   └── logo.svg
│   └── videos/
│       └── demo.mp4
└── css/
    └── style.css

Anforderungen:

In index.html: Einbindung von logo.svg mit sinnvollem alt-Text
In index.html: Einbindung von demo.mp4 mit <video>-Element und Steuerelementen
Keine externen Bild- oder Video-Links verwenden!
Alle Medien müssen im Projektordner liegen
Öffne den gesamten Ordner in VS Code mit Live Server

💡 Teste selbst:
- Wird das Bild angezeigt?
- Spielt das Video ab?
- Ist der alt-Text aussagekräftig?

📊 Beurteilungskriterien – Übung 08: Medien

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis.

Kriterium	✅	➖	❌
Barrierefreie Bilder: Kannst du im Gespräch erklären, warum `alt` Pflicht ist – und wie man einen sinnvollen Text formuliert (nicht „Bild von…“)?
Medien-Hosting: Weißt du, warum man keine externen Bild-Links verwenden darf – und welche Probleme dabei entstehen?
Videos & Formate: Kannst du die Vor- und Nachteile von lokalen Videos vs. YouTube-Einbettung nennen – und wann du was verwendest?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Code-Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum ist ‚Bild‘ ein schlechter alt-Text?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.