HTML Bilder
HTML-Bildsyntax
In HTML werden Bilder mit dem -Tag definiert.
Das <img> -Tag ist leer, enthält nur Attribute und hat kein schließendes Tag.
Das 'src'-Attribut gibt die URL (Webadresse) des Bildes an:
Beispiel: < img src="url" >
Das alt-Attribut
Das alt-Attribut stellt einen alternativen Text für ein Bild bereit, wenn der Benutzer ihn aus irgendeinem Grund nicht anzeigen kann (aufgrund einer langsamen Verbindung, eines Fehlers im src-Attribut oder wenn der Benutzer einen Bildschirmleser verwendet).
Der Wert des alt-Attributs sollte das Bild beschreiben:
Beispiel: < img src="img_chania.jpg" alt="Flowers in Chania">
Wenn ein Browser kein Bild finden kann, zeigt er den Wert des alt-Attributs an:
Hinweis: Das alt-Attribut ist erforderlich. Eine Webseite wird ohne sie nicht korrekt validiert.
Bildgröße - Breite und Höhe
Mit dem style-Attribut können Sie die Breite und Höhe eines Bildes angeben.
<img src="img_wallpaper.jpg" alt="wallpaper" style="width:500px;height:600px;">
Alternativ können Sie die Attribute "width" und "height" verwenden:
< img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Die Attribute width und height definieren immer die Breite und Höhe des Bildes in Pixel.
Width and Height, oder Style?
Die Attribute width, height und style sind in HTML gültig.
Ich empfehle jedoch die Verwendung des "Style" attributs. Es verhindert, dass Stylesheets die Größe von Bildern ändern:
Bilder auf einem anderen Server
Einige Websites speichern ihre Bilder auf Bildservern.
Tatsächlich können Sie von jeder Webadresse der Welt aus auf Bilder zugreifen:
Beispiel:
< img src="https://www.google.com/images/Windows10wallpaper.jpg" alt="Windows 10 Wallpaper" >
Animierte Bilder(GIFs)
HTML ermöglicht animierte GIFs:
<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:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Bilder in einem anderen Ordner
Wenn nicht angegeben, erwartet der Browser, dass sich das Bild im selben Ordner wie die Webseite befindet.
Es ist jedoch üblich, Bilder in einem Unterordner zu speichern. Sie müssen dann den Ordnernamen in das src-Attribut aufnehmen:
Beispeil: < img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Bild schwebend
Verwenden Sie die CSS-Eigenschaft "float", um das Bild rechts oder links von einem Text schweben zu lassen:
< img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;" >
Das Bild wird rechts vom Text angezeigt.
< img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;" >
Das Bild schwebt links vom Text.