HTML Bilder und Medien

Bilder und Medien einbinden in HTML

<!DOCTYPE html>
<html lang="de">
<head>

<title>Beispiel Medien</title>

<style>
  .container {
    width: 800px;
    max-width: 100%;
    margin: 30px auto;
    padding: 10px 30px;
  }
</style>
</head>

<body>
<div class="container">

<h2>Ein Bild</h2>
<img src="medien/thumbnail002.jpg" alt="Beschreibung des Bildes" width="700"><br/>

<h2>Ein Video</h2>
<video src="medien/abspann-brand-720.mp4" controls style="width: 700px;"></video><br/>

<h2>Eine Audio</h2>
<audio controls>
  <source src="medien/letsplay-audio.mp3" type="audio/mpeg">
</audio>

</div>
</body>
</html>
Beispiel bh001

Wichtige Attribute:

  • src → Pfad zur Bilddatei (z. B. JPG, PNG, GIF, SVG)
  • alt → Alternativtext (wird bei Ladefehlern oder Screenreadern angezeigt – wichtig für Barrierefreiheit und SEO)
  • width / height → Bildgröße (in Pixeln, meist besser per CSS)
  • controls → zeigt Steuerelemente (Play, Pause, Lautstärke)
  • autoplay, loop, muted, poster → automatische Wiedergabe, Wiederholung, stumm, Vorschaubild

    • Responsive Medien einbetten (Best Practices)

    <img src="bild.jpg" alt="..." style="max-width: 100%; height: auto;">

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://www.youtube.com/embed/xyz" 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
          frameborder="0" allowfullscreen></iframe>
</div>

    Wenn Webseiten auf verschiedenen Bildschirmgrößen funktionieren sollen (Smartphones, Tablets, große Monitore), müssen eingebettete Medien responsiv gestaltet sein. Das bedeutet: Sie passen sich automatisch an die Breite ihres Containers an, ohne ihr Seitenverhältnis zu verlieren.

  • max-width: 100% sorgt dafür, dass das Bild nie breiter als sein umgebendes Element wird.
  • height: auto stellt sicher, dass das ursprüngliche Seitenverhältnis beibehalten wird.
  • So skaliert das Bild sauber auf kleineren Bildschirmen mit – perfekt für responsive Layouts.
  • Die äußere div hat padding-bottom: 56.25% → das ergibt ein 16:9-Format, denn 9 / 16 = 0.5625.
  • position: relative auf dem Container + position: absolute auf dem <iframe> sorgt dafür, dass das eingebettete Video immer genau in diesen Rahmen passt.
  • Dadurch ist das Video komplett skalierbar und mobilfreundlich, ohne Verzerrung.