Bilder sind ein wesentlicher Bestandteil von Webseiten, da sie visuelle Inhalte bereitstellen und die Benutzererfahrung verbessern. In HTML werden Bilder mit dem <img>-Tag eingefügt.

Grundlegende Syntax eines HTML-Bildes:

Ein HTML-Bild wird mit dem <img>-Tag erstellt und verwendet das src-Attribut, um die Bildquelle anzugeben, sowie das alt-Attribut, um eine alternative Beschreibung bereitzustellen.
<img src="bild.jpg" alt="Ein schönes Bild">

Wichtige Attribute des <img>-Tags:

src-Attribut: Das src-Attribut gibt die URL der Bilddatei an. Es kann sich um eine relative oder absolute URL handeln.
<img src="bilder/beispiel.jpg" alt="Beispielbild">

alt-Attribut: Das alt-Attribut bietet eine alternative Beschreibung des Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann. Es ist auch wichtig für die Barrierefreiheit und Suchmaschinenoptimierung (SEO).
<img src="bilder/beispiel.jpg" alt="Ein Beispielbild, das eine schöne Landschaft zeigt">

width und height-Attribute: Diese Attribute geben die Breite und Höhe des Bildes in Pixeln an.
<img src="bilder/beispiel.jpg" alt="Beispielbild" width="600" height="400">

title-Attribut: Das title-Attribut bietet zusätzliche Informationen, die angezeigt werden, wenn der Benutzer den Mauszeiger über das Bild bewegt.
<img src="bilder/beispiel.jpg" alt="Beispielbild" title="Dies ist ein Beispielbild">

Responsive Bilder:

Um sicherzustellen, dass Bilder auf verschiedenen Geräten und Bildschirmgrößen gut aussehen, können Sie CSS verwenden, um Bilder responsiv zu machen.
<img src="bilder/beispiel.jpg" alt="Beispielbild" style="max-width: 100%; height: auto;">

Bilder sind ein wichtiger Bestandteil von Webseiten und können mit dem <img>-Tag einfach eingefügt werden. Durch die Verwendung von Attributen wie src, alt, width, height und title können Sie sicherstellen, dass Ihre Bilder korrekt angezeigt werden und zur Barrierefreiheit und SEO beitragen. Mit CSS können Sie zudem responsive Bilder erstellen, die auf allen Geräten gut aussehen.