JPG-Bilder
GIF Bilder
PNG Bilder
Beispiel
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Versuch es selber " Immer geben die Breite und Höhe eines Bildes. Wenn Breite und Höhe nicht angegeben werden, flackert die Seite, während das Bild geladen.
HTML Bilder Syntax
In HTML - Bilder werden mit dem definierten <img> -Tag.
Der <img> tag ist leer, es enthält Attribute nur, und nicht über einen schließenden Tag.
Das src - Attribut gibt die URL (web address) des Bildes:
<img src=" url " alt=" some_text ">Das alt - Attribut
Das alt - Attribut gibt einen alternativen Text für ein Bild, wenn das Bild nicht angezeigt werden kann.
Das alt - Attribut bietet alternative Informationen für ein Bild , wenn ein Benutzer aus irgendeinem Grunde nicht sehen kann (wegen der langsamen Verbindung, ein Fehler im src - Attribute, oder wenn der Benutzer verwendet einen Bildschirmleser).
Wenn ein Browser ein Bild nicht finden kann, wird es den Alt-Text angezeigt werden:
Beispiel
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Versuch es selber " Das alt - Attribut ist erforderlich. Eine Web-Seite validiert nicht richtig ohne sie.
Leser HTML-Bildschirm
Ein Screenreader ist ein Software-Programm, das lesen, was auf dem Bildschirm angezeigt wird.
Screenreader sind nützlich für Menschen, die blind sind, Sehbehinderte oder Lernbehinderte.
Bildschirmlesegeräte können das lesen alt - Attribut.
Bildgröße - Breite und Höhe
Sie können die Verwendung style - Attribut die Breite und Höhe eines Bildes angeben.
Die Werte werden in Pixel angegeben (use px after the value) , (use px after the value) :
Beispiel
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Versuch es selber " Alternativ können Sie verwenden , width und height Attribute. Dabei werden die Werte in Pixel standardmäßig angegeben:
Breite und Höhe oder Style?
Sowohl die Breite, Höhe und Style-Attribute gelten in dem neuesten HTML5-Standard.
Wir empfehlen Ihnen die Verwendung style - Attribut. Es verhindert, dass Stylesheets von der Originalgröße der Bilder zu ändern:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> Versuch es selber " Bilder in einem anderen Ordner
Wenn nicht anders angegeben, erwartet, dass der Browser das Bild im selben Ordner wie die Webseite zu finden.
Allerdings ist es üblich, einen Unterordner zu speichern Bilder in. Anschließend müssen Sie die Ordnernamen in dem Include - src - Attribute:
Beispiel
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Versuch es selber " Bilder auf einem anderen Server
Einige Websites speichern ihre Bilder auf das Bild Servern.
Eigentlich kann man Bilder Zugriff von jeder Web-Adresse in der Welt:
Animierte Bilder
Die GIF-Standard ermöglicht animierte Bilder:
Beispiel
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Versuch es selber " Beachten Sie, dass die Syntax des Einsetzens animierte Bilder nicht von nicht-animierten Bildern.
Unter Verwendung eines Bildes als Link
Um ein Bild als Link zu verwenden, einfach Nest das <img> -Tag innerhalb des <a> tag:
Beispiel
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Versuch es selber " In "border:0;" IE9 zu verhindern (and earlier) von der Anzeige einen Rahmen um das Bild.
Floating image
Verwenden Sie die CSS-Eigenschaft float, um das Bild schweben zu lassen.
Das Bild kann auf der rechten Seite schweben oder links von einem Text:
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> Versuch es selber " Imagemaps
Verwenden Sie die <map> -Tag , um ein Bild-Karte zu definieren. Eine Bild-Karte ist ein Bild mit klickbaren Bereichen.
Das name - Attribut des <map> -Tag mit dem zugehörigen <img> ‚s usemap Attribute und schafft eine Beziehung zwischen dem Bild und der Karte.
Die <map> -Tag enthält eine Reihe von <area> Tags, die die anklickbare Bereiche im Bild-Karte definiert:
Beispiel
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> Versuch es selber " Kapitelzusammenfassung
- Verwenden Sie das HTML <img> Element ein Bild zu definieren
- Verwenden Sie das HTML - src - Attribut die URL des Bildes zu definieren
- Verwenden Sie das HTML - alt - Attribut einen alternativen Text für ein Bild zu definieren, wenn es nicht angezeigt werden kann
- Verwenden , um die HTML - width und height Attribute die Größe des Bildes zu definieren ,
- Verwenden Sie die CSS width und height Eigenschaften , die Größe des Bildes zu definieren (alternatively)
- Verwenden Sie die CSS - float - Eigenschaft auf das Bild schweben zu lassen
- Verwenden Sie die HTML <map> Element eine Bild-Karte definieren
- Verwenden Sie die HTML <area> Element die anklickbare Bereiche im Bild-Karte definieren
- Verwenden Sie die HTML <img> ‚s Element usemap Attribut auf eine Bild Karte zeigen
Laden von Bildern braucht Zeit. Große Bilder können Sie Ihre Seite verlangsamen. Verwenden Sie sorgfältig Bilder.
Testen Sie sich mit Übungen!
Aufgabe 1 » Übung 2» Exercise 3 » Exercise 4» Exercise 5 » Exercise 6»
HTML Image-Tags
| Etikett | Beschreibung |
|---|---|
| <img> | Definiert ein Bild |
| <map> | Definiert ein Bild-Karte |
| <area> | Definiert einen klickbaren Bereich innerhalb einer Bild-Karte |