<img> – Bild einfügen
Zweck: Fügt ein Bild in die Seite ein.
<img src="images/beispiel.jpg" alt="Beschreibung des Bildes">Beispielausgabe:
🧩 Wichtige Attribute:
src– Pfad zum Bild (relativ oder absolut)alt– Alternativtext (wird angezeigt, wenn das Bild nicht geladen wird)title– Tooltip beim Darüberfahren mit der Maus
📏 Bildgröße ändern
Zweck: Steuerung der Bildgröße über HTML-Attribute oder CSS.
🔹 Variante 1 – HTML-Attribute
<img src="bild.jpg" alt="Beispiel" width="300" height="200">Beispielausgabe:
Achtung: HTML skaliert nur die Anzeigegröße, nicht die tatsächliche Dateigröße! Für Performance besser CSS verwenden:
🔹 Variante 2 – CSS
<img src="bild.jpg" alt="Beispiel" class="klein">
<style>
img.klein {
width: 50%;
max-width: 300px;
}
</style>
Beispielausgabe:
<figure> & <figcaption>
Zweck: Kombiniert ein Bild mit einer Beschriftung (semantisch korrekt).
<figure>
<img src="bild.jpg" alt="Ein Sonnenuntergang">
<figcaption>Ein schöner Sonnenuntergang.</figcaption>
</figure>Beispielausgabe:
<audio> – Audio einbinden
Zweck: Spielt eine Audiodatei direkt auf der Webseite ab.
<audio controls>
<source src="media/beispiel.mp3" type="audio/mpeg">
Dein Browser unterstützt das Audio-Element nicht.
</audio>Beispielausgabe:
<video> – Video einbinden
Zweck: Spielt ein Video im Browser ab (lokal oder online).
<video controls width="320">
<source src="media/beispiel.mp4" type="video/mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>Beispielausgabe:
🔍 Alternativtexte & Barrierefreiheit
Zweck: Alt-Texte sind Pflicht für barrierefreie Websites und wichtig für SEO.
<img src="logo.png" alt="Logo der Firma Beispiel GmbH">→ Wird vorgelesen, wenn das Bild nicht sichtbar ist (z. B. Screenreader).