Grafiken in HTML Webseiten nutzen
Posted in Allgemeines, Grundlagen, HTML on 11/18/2010 02:42 by Hoegerl_KarlFotos und Grafiken werden auf fast jeder Webseite eingesetzt. Ein Bild sagt oft mehr als tausend Worte. Verwenden Sie deshalb treffende und aussagekräftige Bilder! Es können die Bildformate Jpg, Gif und Png benutzt werden.
| Eigenschaften | Gif | Jpg | Png |
| Anzahl der Farben | 256 | 16,3 Mio. | 256 oder 16,3 Mio. |
| Anzahl der Graustufen | 16 | 256 | 16 oder 256 |
| Transparente Farbe | 1 | Keine | Mit Alpha Kanal |
| Komprimierung | Gering | Mittel | Gering |
| Verluste | Nein | Ja | Nein |
| Animation | Ja | Nein | Nein |
| Copyright | Nein | Ja | Nein |
| Einsatzbereich | Grafik, Animation | Fotos | Fotos, Grafik |
Für die Einbindung von Grafiken legen Sie ein Verzeichnis „images“ an. Dort werden alle Bilder abgelegt. Mit dem Tag
<img src=“images/bildname“ alt=“alternativer Text“ width=“300“ height=“200“
hspace=“10“ vspace=“10“ border=“2“>
Attribute für Tag img![]()
Bei dem Attribut src wird der Pfad und der Dateiname des Bildes angegeben. Da später die Dateien auf einen Webserver kopiert werden, muss nur das Verzeichnis innerhalb des Webprojekts angegeben werden.
Wenn das Bild im Browser nicht angezeigt werden kann, dann erscheint an der Stelle der Text des Attributs alt.
Optional kann mit width die Breite und mit height die Höhe des Bildes angegeben werden.
Mit hspace und vspace wird der Abstand des Textes zur Bildkante festgelegt.
Durch border wird ein Rahmen um das Bild gelegt. Alle Angaben werden in Pixel gemacht.
Beispiel:
…
<body>
<h1>Grafiken und Bilder einbinden</h1>
Hier ist die Grafik in der Webseite:
<img src=“images/Vorlaeufer-Welt.gif” >
</body>
…
Hier ist die Grafik in der Webseite: …
Ergebnis:
Zuletzt aktualisiert von .
