8. Bilder einbettenEin 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 macht 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:
- Code:
-
<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:
- Code:
-
<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:
- Code:
-
<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:
- Code:
-
<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:
- Code:
-
<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 hast.
Um ein
Bild zu verlinken, z.B. für einen Banner, wird einfach anstatt eines Linktextes der Code eines Bildes eingefügt:
- Code:
-
<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:
- Code:
-
<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.
~~~
Damit haben wir den interessanten Teil zur Bebilderung einer Website abgeschlossen, bitte entschuldigt die Verzögerung. Nächste Woche gibts das Kapitel "Tabellen".
Wer Fragen hat, kann die ganz einfach hier im Forum (einfach auf "antworten" klicken, auch als Gast) loswerden oder mir eine eMail schicken.
Startseite Otaku-Welt.de 
