Tutorials – Webdesign
Listen & Aufzählungen | Tabellen
8. Bilder einbetten
Ein wichtiger Bestandteil einer Website sind Bilder. Durch sie kann man einer tristen Seite Leben einhauchen, Texte illustrieren usw.
Wenn ihr eine eigene kleine Homepage habt, bekommt ihr für gewöhnlich auch etwas Speicher, wo ihr Bilder & co hochladen könnt. Wichtig ist, dass ihr nie Bilder anderer Webseiten direkt einbindet, ohne sie vorher auf eurem eigenen Webspace hochzuladen. Das gilt auch für Bilder von Google. Ihr verursacht dem betroffenen Webmaster zusätzliche Kosten, mit großer Wahrscheinlichkeit werdet ihr erwischt und er kann euch anzeigen – Bilder querzuverlinken ist nämlich eine Straftat.
Zusätzlich solltet ihr bei fremden Bildern auch immer das Urheberrecht 
beachten – also den Webmaster der Seite fragen, ob ihr das Bild verwenden dürft.
Bilder werden auf einem Webserver geladen und sind von dort aus durch eine URL wie jede andere Datei abrufbar. Sie liegen in den Dateiformaten JPG, PNG oder GIF vor. Jedes Format hat seine Vor- und Nachteile – Dazu gibt es später noch ein Einzeltutorial. Jetzt sei nur kurz und knapp gesagt:
JPG – Fotos mit vielen Farben
PNG – Bilder mit Transparenz und Halbtransparenz
GIF – flächige Grafiken (max. 256 Farben), Transparenz und Animationen
Mit folgendem Tag kann man in eine Website Bilder einbetten:
<img src="URL_des_Bildes">
Für die URL besteht die Möglichkeit absolute oder relative Pfade anzugeben – ihr erinnert euch, das hatten wir schon mal in Kapitel 6 (Hyperlinks).
Für jedes verwendete Bild sollte ein "alt"-Attribut definiert werden, in der der Inhalt des Bildes mit wenigen Worten beschrieben wird:
<img src="URL_des_Bildes" alt="Beschreibung_des_Bildes">
Warum? Weil dieser Text angezeigt wird, wenn das Bild noch nicht geladen wird oder nicht angezeigt werden kann. Außerdem können sich sehbehinderte Menschen Webseiten vorlesen lassen – ist ein Alternativtext vorhanden, wird dieser auch vorgelesen und die betroffene Person kann etwas damit anfangen. Dazu kommt, dass Google bei der Positionierung der Suchergebnisse u.a. auch die Alt-Attribute von Bildern ausliest.
Bilder, die zum Layouten einer Seite dienen, z.B. Headerbild oder leere Gifs, benötigen keine Beschreibung und bekommen ein leeres Alt-Attribut zugewiesen: alt="".
Zusätzlich kann und sollte auch die Größe eines Bildes angegeben werden:
<img src="URL_des_Bildes" height="Höhe_in_Pixeln" width="Breite_in_Pixeln">
So wird der Ladeprozess beschleunigt und Texte können sich schon aufbauen.
Eine Skalierung des Bildes (vergrößern / verkleinern / verzerren) sollte nicht über diese beiden Attribute gemacht werden, da das Ergebnis qualitativ sehr unzufriedenstellend ist. Besser ist es, das Bild vorher in einem Bildbearbeitungsprogramm (Photoshop, Gimp) in die gewünschte Größe zu bringen.
Mit dem Attribut "align" kann ein Bild positioniert werden:
<img src="URL_des_Bildes" align="left">
Es stehen euch die Werte "left" (Standardeinstellung) und "right" zur Verfügung.
Durch das Attribut "border", kann auch die Breite des Rahmens festgelegt werden:
<img src="URL_des_Bildes" border="2">
erzeugt also einen Rand von 2 Pixeln.
border="0" sorgt dafür, dass es gar keinen Rahmen gibt. Der Rahmen hat die Farbe, die auch der Text im Dokument hat.
Um ein Bild zu verlinken, z.B. für einen Banner, wird einfach anstatt eines Linktextes der Code eines Bildes eingefügt:
<a href="URL_der_Seite"><img src="URL_des_Bildes"></a>
Natürlich kann man einer HTML-Seite auch ein Hintergrundbild verpassen. Dafür muss der BODY-Tag durch das Attribut "background" ergänzt werden:
<body background="URL_des_Bildes">
Das Bild wird automatisch horizontal und vertikal wiederholt, bis das ganze Browserfenster befüllt ist.
Mit CSS besteht die Möglichkeit, diese Wiederholung zu beeinflussen (nur horizontal/vertikal, gar nicht wiederholen) und das Hintergrundbild überall im Fenster (oben/unten/links/rechts usw.) auszurichten.
© since 2002 by Otaku-Welt.de