HTML -Bilder
Bilder können das Design und das Erscheinungsbild einer Webseite verbessern.
Beispiel
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Beispiel
<img src="img_girl.jpg"
alt="Girl in a jacket">
Beispiel
<img src="img_chania.jpg"
alt="Flowers in Chania">
Syntax von HTML-Bildern
Das HTML <img>-Tag wird verwendet, um ein Bild in eine Webseite einzubetten.
Bilder werden nicht technisch in eine Webseite eingefügt; Bilder sind mit Webseiten verlinkt. Das <img>Tag erstellt einen Haltebereich für das referenzierte Bild.
Das <img>Tag ist leer, es enthält nur Attribute und hat kein schließendes Tag.
Das <img>Tag hat zwei erforderliche Attribute:
- src - Gibt den Pfad zum Bild an
- alt – Gibt einen alternativen Text für das Bild an
Syntax
<img src="url" alt="alternatetext">
Das src-Attribut
Das erforderliche srcAttribut gibt den Pfad (URL) zum Bild an.
Hinweis: Wenn eine Webseite geladen wird, ist es in diesem Moment der Browser, der das Bild von einem Webserver erhält und es in die Seite einfügt. Stellen Sie daher sicher, dass das Bild in Bezug auf die Webseite tatsächlich an derselben Stelle bleibt, da Ihre Besucher sonst ein Symbol für einen defekten Link erhalten. Das Symbol für einen defekten Link und der altText werden angezeigt, wenn der Browser das Bild nicht finden kann.
Beispiel
<img src="img_chania.jpg" alt="Flowers
in Chania">
Das alt-Attribut
Das erforderliche altAttribut bietet einen alternativen Text für ein Bild, wenn der Benutzer es aus irgendeinem Grund nicht sehen kann (aufgrund einer langsamen Verbindung, eines Fehlers im src-Attribut oder wenn der Benutzer einen Bildschirmleser verwendet).
Der Wert des altAttributs sollte das Bild beschreiben:
Beispiel
<img src="img_chania.jpg" alt="Flowers
in Chania">
Wenn ein Browser ein Bild nicht finden kann, zeigt er den Wert des alt
Attributs an:
Beispiel
<img src="wrongname.gif" alt="Flowers
in Chania">
Tipp: Ein Screenreader ist ein Softwareprogramm, das den HTML-Code liest und es dem Benutzer ermöglicht, den Inhalt „anzuhören“. Screenreader sind nützlich für Menschen mit Seh- oder Lernbehinderung.
Bildgröße - Breite und Höhe
Sie können das styleAttribut verwenden, um die Breite und Höhe eines Bildes anzugeben.
Beispiel
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternativ können Sie die Attribute widthund verwenden:height
Beispiel
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Die Attribute widthund heightdefinieren immer die Breite und Höhe des Bildes in Pixeln.
Hinweis: Geben Sie immer die Breite und Höhe eines Bildes an. Wenn Breite und Höhe nicht angegeben sind, flackert die Webseite möglicherweise, während das Bild geladen wird.
Breite und Höhe oder Stil?
Die Attribute width, height, und stylesind alle in HTML gültig.
Wir empfehlen jedoch die Verwendung des styleAttributs. Es verhindert, dass Stylesheets die Größe von Bildern ändern:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Bilder in einem anderen Ordner
Wenn Sie Ihre Bilder in einem Unterordner haben, müssen Sie den Ordnernamen in das srcAttribut aufnehmen:
Beispiel
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Bilder auf einem anderen Server/einer anderen Website
Einige Websites verweisen auf ein Bild auf einem anderen Server.
srcUm auf ein Bild auf einem anderen Server zu verweisen, müssen Sie im Attribut eine absolute (vollständige) URL angeben :
Beispiel
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Hinweise zu externen Bildern: Externe Bilder können urheberrechtlich geschützt sein. Wenn Sie keine Genehmigung zur Verwendung erhalten, verstoßen Sie möglicherweise gegen Urheberrechtsgesetze. Außerdem können Sie keine externen Bilder steuern; es kann plötzlich entfernt oder geändert werden.
Animierte Bilder
HTML erlaubt animierte GIFs:
Beispiel
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Bild als Link
Um ein Bild als Link zu verwenden, fügen Sie das <img>Tag in das <a>
Tag ein:
Beispiel
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Bild schwebend
Verwenden Sie die CSS float-Eigenschaft, um das Bild rechts oder links von einem Text schweben zu lassen:
Beispiel
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Tipp: Um mehr über CSS Float zu erfahren, lesen Sie unser CSS Float Tutorial .
Gängige Bildformate
Hier sind die gängigsten Bilddateitypen, die in allen Browsern (Chrome, Edge, Firefox, Safari, Opera) unterstützt werden:
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Kapitelzusammenfassung
- Verwenden Sie das HTML
<img>-Element, um ein Bild zu definieren - Verwenden Sie das HTML
src-Attribut, um die URL des Bildes zu definieren - Verwenden Sie das HTML
alt-Attribut, um einen alternativen Text für ein Bild zu definieren, wenn es nicht angezeigt werden kann - Verwenden Sie HTML
widthundheightAttribute oder CSSwidthundheightEigenschaften, um die Größe des Bildes zu definieren - Verwenden Sie die CSS
float-Eigenschaft, um das Bild nach links oder rechts schweben zu lassen
Hinweis: Das Laden großer Bilder nimmt Zeit in Anspruch und kann Ihre Webseite verlangsamen. Verwenden Sie Bilder sorgfältig.
HTML-Übungen
HTML-Bild-Tags
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .