Bilder

Bilder spielen eine entscheidende Rolle bei der Verbesserung der visuellen Attraktivität und der Vermittlung von Informationen auf Webseiten. In HTML werden Bilder mit dem <img>-Tag eingefügt.

Bilder einfügen

Das <img>-Tag wird verwendet, um Bilder in ein HTML-Dokument einzufügen. Im Gegensatz zu den meisten HTML-Tags hat das <img>-Tag keinen schließenden Tag und ist selbstschließend.
Beispiel:

<img src="image.jpg" alt="Description of the image">

Im obigen Beispiel:

• Das <img>-Tag wird verwendet, um ein Bild einzufügen;
• Das src-Attribut gibt die Quelle (URL) der Bilddatei an;
• Das alt-Attribut liefert einen alternativen Text für das Bild. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann oder für Barrierefreiheitszwecke.

Bevor wir ein praxisnahes Beispiel betrachten, sollten wir die wichtigsten Attribute des img-Tags und deren Auswirkungen auf den Inhalt verstehen.

Bildattribute

1. src: Gibt die Quelle (URL) der Bilddatei an. Dieses Attribut ist erforderlich, damit das <img>-Tag das Bild anzeigt;
2. alt: Liefert einen Alternativtext für das Bild. Der im alt-Attribut angegebene Text wird angezeigt, wenn das Bild nicht geladen werden kann oder für Barrierefreiheitszwecke. Es ist unerlässlich für Nutzer, die Screenreader verwenden, oder in Situationen, in denen das Bild nicht angezeigt werden kann;
3. width: Gibt die Breite des Bildes in Pixeln oder als Prozentsatz des übergeordneten Containers an;
4. height: Gibt die Höhe des Bildes in Pixeln oder als Prozentsatz des übergeordneten Containers an;
5. title: Bietet zusätzliche Informationen zum Bild. Wird häufig als Tooltip angezeigt, wenn der Benutzer mit der Maus über das Bild fährt.
   Beispiel:

Im obigen Beispiel:

• Das <img>-Tag fügt ein Bild auf einer Webseite ein;
• Das src-Attribut gibt die Quell-URL der Bilddatei an;
• Das alt-Attribut legt den Alternativtext für das Bild fest;
• Das width-Attribut legt die Bildbreite fest;
• Das height-Attribut legt die Bildhöhe fest;
• Das title-Attribut liefert zusätzliche Informationen zum Bild.

Videoanleitung