Bilder und Medien

Diese Lektion erklärt, wie Bilder, Audio- und Videodateien in HTML eingebunden werden und welche Attribute dabei wichtig sind.

1. Bilder mit <img>

Bilder werden mit dem <img>-Element eingebunden. Es ist ein leeres Element (kein schließender Tag). 
<img src="bild.jpg" alt="Beschreibung des Bildes">
Das alt-Attribut ist verpflichtend und beschreibt den Bildinhalt für Screenreader oder falls das Bild nicht geladen werden kann.

2. Bildgrößen festlegen

Die Anzeigegröße eines Bildes kann mit width und height festgelegt werden. 
<img src="logo.png" alt="Logo" width="200" height="100">
In der Praxis werden Größen häufig über CSS gesteuert.

3. Bildformate

HTML unterstützt gängige Bildformate.

4. Audio einbinden

Audiodateien werden mit dem <audio>-Element eingebunden. 
<audio controls>
  <source src="musik.mp3" type="audio/mpeg">
  Ihr Browser unterstützt dieses Audioformat nicht.
</audio>

5. Video einbinden

Videos werden mit dem <video>-Element eingebunden. 
<video controls width="400">
  <source src="film.mp4" type="video/mp4">
  Ihr Browser unterstützt dieses Videoformat nicht.
</video>

6. Automatische Wiedergabe und Schleifen

Medienelemente können automatisch starten oder sich wiederholen. 
<audio src="sound.mp3" autoplay loop></audio>
Autoplay wird von vielen Browsern eingeschränkt, insbesondere bei Audio.

7. Barrierefreiheit und Best Practices

8. Zusammenfassung