Bilder in HTML einbetten
Bilder in HTML können das Design einer Webseite verbessern. Bilder sind sehr wichtig, um viele komplexe Konzepte auf einfache Weise auf Ihrer Webseite darzustellen. Die Bilder in HTML werden eingebettet mit dem <img>Start-Tag. Der image <img>Start-Tag beinhaltet nur Attribute und hat kein End-Tag. Das <alt> Attribut beinhaltet einen alternativ Text für ein Bild, falls das Bild nicht angezeigt werden kann (zu langsame Verbindung, einen Fehler beim <src> Attribut oder der Benutzer verwendet einen screen reader). Der Text des <alt> Attribut sollte das Bild beschreiben. Die Grösse des Bildes wird definiert mit den <width> und <height> Attributen(in Pixel).
Pixel- oder Rastergrafiken vs. Vektorengrafiken
Pixelgrafiken wie der Name schon ausdrückt, besteht aus einzelnen Punkten(Pixel). Je mehr Pixel ein Bild beschreiben, desto höher ist die Auflösung und die Dateigrösse. Eine Pixelgrafik kann nicht stufenlos skaliert werden(die Pixel werden gestreckt) ohne Qualitätsverlust. Im Vergleich zu Rastergrafiken lassen sich Vektorengrafiken in deutlich geringer Dateigrösse speichern. Vektoren-Grafiken sind zweidimensinale Objekte. Im Gegensatz zu PNG, GIF, JPEG und BMP bestehen Vektorgrafiken nicht aus einem Pixelraster. Vektorengrafiken bestehen aus Pfaden, geometrische Elemente wie Kurven , Linien und Quadrate werden mit Start- und Endpunkt beschrieben. So kann ein Kreis in einer Vektorgrafik über die Lage des Mittelpunktes, den Radius, die Linienstärke und die Farbe vollständig beschrieben werden. Nur diese Parameter werden gespeichert. Somit können Vektorengrafiken stufenlos ohne Qualitätsverlust skaliert werden. Damit lassen sich auch komplexe Grafiken darstellen die in verschieden Grössen verwendet werden. Rastergrafiken können durch Vektorisierung in Vektorgrafiken umgewandelt werden (mit gewissen Einschränkungen).| Unterschiede der Formate: | GIF | JPG | PNG | TIFF |
|---|---|---|---|---|
| Anzahl der Farben: | 256 | 16,7 Mio. | 16,7 Mio. | Farbtiefe von bis zu 32 Bit pro Farbkomponente. |
| Möglichkeiten zur Animation: | Ja | Nein | Nein | Nein |
| Möglichkeiten zur Kompression: | automatisch | Kompressions-Grad einstellbar | Kompressions-Grad einstellbar | Kompressions möglich |
| Eignung: | animierte Grafiken | Bilder mit vielen Farben. | Bilder mit vielen Farben. | Bilder für Druck. |
animiertes Bild
Die Image-Datei "AnimiertesBild.gif" enthält die Einzelbilder der Animation und Informationen über die Geschwindigkeit.(mit Freeware Gimp 2.10).Image Map
Laut Definition ist eine Image Map eine verweissensitive Grafik. Verweisflächen innerhalb der des Bildes , verweisen zu einer externen oder internen Zieladresse oder beinhalten Informationen auf der gleichen Seite.Background Bild
background-image bestimmt ein Bild als Hintergrundbild für ein Element. Das Dateiformat des Hintergrundbilds kann JPG, PNG, SVG, webP oder GIF sein.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| </head> |
| <body> |
| <img src="Bilder/Logo12Scale.png" alt="Logo"> |
| <p style="padding:1rem">Diese Bild/Grafik ist eine Pixelgrafik und wurde skaliert, es ist zu sehen das sich die Pixel strecken und das Bild unscharf geworden ist. |
| Pixel- oder Rastergrafiken lassen sich nicht stufenlos skalieren.</p> |
| <img src="Bilder/Logo12.svg" alt="Logo" style="height:152px;width:152px;"> |
| <p style="padding:1rem">Diese Vektoren-Grafik ist ebenfalls skaliert, weil die Vektorengrafiken geometrische |
| Elemente in Pfade speichert , kann diese Grafik stufenlos skaliert werden.</p> |
| </body> |
| </html> |
Diese Bild/Grafik ist eine Pixelgrafik und wurde skaliert, es ist zu sehen das sich die Pixel strecken und das Bild unscharf geworden ist. Pixel- oder Rastergrafiken lassen sich nicht stufenlos skalieren.
Diese Vektoren-Grafik ist ebenfalls skaliert, weil die Vektorengrafiken geometrische Elemente in Pfade speichert , kann diese Grafik stufenlos skaliert werden.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| </head> |
| <body> |
| <img src="Bilder/AnimiertesBild.gif" alt=" animiertes Bild" width="750" height="100"> |
| <p style="padding:10px;">Die Image-Datei "AnimiertesBild.gif" enthält die Einzelbilder der Animation und Informationen über die Geschwindigkeit.</p> |
| </body> |
| </html> |
Die Image-Datei "AnimiertesBild.gif" enthält die Einzelbilder der Animation und Informationen über die Geschwindigkeit.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| </head> |
| <body> |
| <h2 style="text-align:center">Image Maps</h2> |
| <p style="text-align:center">Klick auf den Bildschirm, die Maus, die Tastaur oder den Computer:</p> |
| <img src="Bilder/ComputerAusruestung.jpg" alt="Arbeitsplatz" usemap="#workmap" width="400" height="379"> |
| <map name="workmap"> |
| <area shape="rect" coords="90,60,250,180" alt="Bildschirm" href="Bilder/Bildschirm.jpg"> |
| <area shape="circle" coords="320,310,30" alt="Maus" href="Bilder/Maus.jpg"> |
| <area shape="rect" coords="280,20,335,220" alt="Computer-Tower" href="Bilder/Tower.jpg"> |
| <area shape="rect" coords="70,290,230,335" alt="Tastatur" href="Bilder/Tastatur.png"> |
| </map> |
| </body> |
| </html> |
Image Maps
Klick auf den Bildschirm, die Maus, die Tastaur oder den Computer:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page</title> |
| </head> |
| <body> |
| <div class="output" style="background-image: url('Bilder/ServerRoom.jpg');"></div> |
| </body> |
| </html> |
