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.

Einfügen von Bildern

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:

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 bietet alternativen Text für das Bild. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann oder für Barrierefreiheitszwecke.

Bevor wir ein Beispiel aus der Praxis erkunden, lassen Sie uns die wesentlichen Attribute des img-Tags verstehen und wie sie dessen Inhalt beeinflussen.

Bildattribute

1. src: Gibt die Quelle (URL) der Bilddatei an. Dieses Attribut ist erforderlich, damit das <img>-Tag das Bild anzeigt;
2. alt: Bietet alternativen Text 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 wichtig für Benutzer, die Bildschirmlesegeräte 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 über das Bild. Es wird oft als Tooltip angezeigt, wenn der Benutzer ü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 setzt den Alternativtext für das Bild;
• Das width-Attribut legt die Bildbreite fest;
• Das height-Attribut legt die Bildhöhe fest;
• Das title-Attribut bietet weitere Informationen über das Bild.

Video Tutorial