Multimedia
Eine Webseite ohne Bilder, Videos oder Ton wirkt oft leblos.
Mit HTML kannst du ganz einfach grafische und multimediale Inhalte einbinden – also Bilder, Audio, Videos oder externe Inhalte wie YouTube-Clips oder Karten.
In dieser Lektion lernst du:
wie du Bilder, Ton und Videos korrekt einfügst,
was bei Dateiformaten zu beachten ist,
und wie du fremde Inhalte sicher einbettest.
1. Bilder
Bilder werden mit dem <img>-Tag eingebunden.
Dieses Tag ist leer, das heißt: es hat kein schließendes </img>.
<img src="bilder/ava.jpg" alt="Labrador im Garten" width="300">
| Attribut | Bedeutung |
|---|---|
src | Pfad zur Bilddatei |
alt | Alternativtext (wird angezeigt, wenn das Bild fehlt oder von Screenreadern gelesen wird) |
width / height | Größe in Pixeln |
title | Hinweis beim Überfahren mit der Maus |
Beispiel:
<img src="logo.png" alt="Mein Firmenlogo" title="Studio Reichert" width="200">
Tipp:
Immer alt angeben! – Das ist wichtig für Barrierefreiheit und Suchmaschinen.
2. Audio einbinden
Mit dem <audio>-Tag kannst du Audiodateien direkt im Browser abspielen.
<audio controls>
<source src="musik.mp3" type="audio/mpeg">
<source src="musik.ogg" type="audio/ogg">
Dein Browser unterstützt das Audio-Tag nicht.
</audio>
| Attribut | Bedeutung |
|---|---|
controls | zeigt Play-, Pause- und Lautstärke-Buttons |
autoplay | startet Wiedergabe automatisch (nicht empfohlen) |
loop | spielt Datei endlos ab |
muted | startet stumm |
Beispiel:
<audio controls loop>
<source src="sounds/theme.mp3" type="audio/mpeg">
</audio>
3. Video einbinden
Das <video>-Tag funktioniert ähnlich wie <audio>.
<video width="400" controls>
<source src="beispiel.mp4" type="video/mp4">
<source src="beispiel.webm" type="video/webm">
Dein Browser unterstützt das Video-Tag nicht.
</video>
| Attribut | Bedeutung |
|---|---|
controls | zeigt Wiedergabe-Steuerung |
poster | Bild, das vor dem Start angezeigt wird |
autoplay | startet automatisch (wird oft blockiert) |
loop | Wiederholung |
muted | Ton deaktiviert |
Hinweis:
Verwende Formate wie .mp4, .webm, .ogg – sie werden von den meisten Browsern unterstützt.
4. YouTube oder externe Inhalte (iframes)
Wenn du ein Video z. B. von YouTube einbetten willst, nutzt du <iframe>.
YouTube stellt dafür fertige Codes zur Verfügung („Teilen → Einbetten“).
Beispiel:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/TiC8pigZeh0"
title="YouTube Video Player"
frameborder="0"
allowfullscreen>
</iframe>
Wichtig:
Nutze nur vertrauenswürdige Quellen.
Datenschutz beachten (externe Inhalte laden Daten vom jeweiligen Anbieter).
5. Kombination von Medien
Du kannst mehrere Medien auf einer Seite kombinieren:
<h1>Studio Reichert – Behind the Scenes</h1>
<img src="druckwerkstatt.jpg" alt="Siebdruckrahmen" width="400">
<p>So entsteht ein Druckmotiv bei uns:</p>
<video width="400" controls poster="druck_poster.jpg">
<source src="druckprozess.mp4" type="video/mp4">
</video>
<p>Soundtrack zum Video:</p>
<audio controls>
<source src="soundtrack.mp3" type="audio/mpeg">
</audio>
6. Häufige Fehler
| Fehler | Ursache | Lösung |
|---|---|---|
| Medien werden nicht angezeigt | Pfad falsch | src-Pfad prüfen |
| Kein Ton / kein Play-Button | controls fehlt | Attribut ergänzen |
| Bild zu groß | keine Größenangabe | width/height nutzen oder CSS |
| Datenschutzprobleme bei YouTube | externer Inhalt lädt Cookies | Datenschutzhinweis oder Einbettung per „nocookie“-URL |
7. Zusatz: Datenschutzfreundliche YouTube-Einbettung
Du kannst YouTube-Videos auch über die Domain youtube-nocookie.com einbinden:
<iframe width="560" height="315"
src="https://www.youtube-nocookie.com/embed/TiC8pigZeh0"
title="YouTube Video Player"
frameborder="0"
allowfullscreen>
</iframe>
So werden keine Cookies gesetzt, bevor das Video abgespielt wird.
8. Fazit
Bilder →
<img src="..." alt="...">Audio →
<audio controls>Video →
<video controls>Externe Inhalte →
<iframe>Achte immer auf Dateipfade, Dateiformate und Barrierefreiheit (alt-Text).
Multimedia steigert Aufmerksamkeit, erfordert aber auch Datenschutzbewusstsein.