Grafiken einfügen
Grafiken einbinden
Nachdem wir jetzt schon Text auf einer Website haben, fehlen eigentlich nur noch Bilder. Eine Seite ohne Bilder ist
langweilig und trist. Besucher werden maximal ein- bis zwei Mal kommen, bis sie genug davon haben. Ein Bild einzubinden ist
prinzipiell nicht schwer. der Befehl lautet
<img src="URL">
Wobei an der Stelle, wo URL steht, die Quelle der Bilddatei angegeben werden muss. Heißt das Bild beispielsweise
pic.jpg und befindet sich auf bilder/, so müsste man schreiben:
<img src="/bilder/pic.jpg">
img steht für image und src für source, also Bild und Quelle. Daraus kann man also praktisch einen
Satz bilden: Bild Quelle = "URL".
Lang- und Kurz-URLs
Die URL kann eine lange Form sein oder eine kurze. Nehmen wir einmal an, unsere Homepage liegt auf www.meine-seite.de. Das
Bild, das wir einfügen wollen, gibt es auf www.andere-seite.de. Somit müssen wir wohl oder übel die gesamte
URL abtippen:
<img src="/bilder/neue/ski/oberstdorf/bild1.jpg">
Unterbefehle
Der img-Tag hat auch noch Unterbefehle. Dazu gehören width, height, border und
alt. Jedes Bild hat eine bestimmte Größe, die in Pixeln (also Bildpunkten) angegeben wird.
Bilder haben eine Breite und eine Höhe, also eine width und eine height. Beide Befehle werden einfach in
den img-Tag eingebunden. Wenn z.B. das Bild ich.jpg 75 x 225 Punkte groß ist, müssten wir schreiben:
<img src="ich.jpg" width="75" height="225">
Als nächstes kann man dem Bild einen Rahmen verpassen, der außen herumläuft. Der Befehl für den Rahmen,
also die Grenze, ist border. Als Attribute (also das, was hinter dem Gleichheitszeichen in "" steht)
wird eine Ziffer (Zahl) eingegeben. Kein Rahmen ist 0, ein normaler Rahmen ist 1, ein etwas breiterer Rahmen ist 2 usw. Wir
wollen um das Bild von eben jetzt einen sehr breiten Rahmen von 3 Punkten haben. Also:
<img src="ich.jpg" width="75" height="225" border="3">
Zu guter letzt sollte man einen alternativen Text anzeigen lassen, wenn das Bild nicht gefunden werden kann. Der Unterbefehl
für den alternativen Text ist alt. Als Attribut wird der Text eingegeben.
<img src="ich.jpg" width="75" height="225" border="3" alt="Bild von mir">
Der Sinn der Unterbefehle
Natürlich ist es nicht notwendig, die Unterbefehle einzubauen. Jedoch kann es die Ladezeit der Seite etwas
verkürzen. Gebe ich z.B. Breite und Höhe an, braucht der Browser nicht mehr danach zu suchen. Ich kann zudem noch
eine andere Größe bestimmen, um z.B. ein großes Bild kleiner zu machen. Jedoch wird das eine verschwommene
Angelegenheit.
Auch der alternative Text ist optional. Jedoch sieht es besser aus, wenn man etwas stehen hat, wenn das Bild tatsächlich
nicht da ist.
Nicht übertreiben!
Bilder sind zwar eine schöne Sache, aber sie haben einen Nachteil: die Ladezeiten sind beträchtlich länger
als die von normalem Text. Besonders bei 56K-Modems dauert der Aufbau eines Bildes extrem lange. Auch zu viele Bilder
erhöhen die Ladezeiten sehr stark! Und aus zu langen Ladezeiten folgt ein niedriges Besucherwachstum (wer will schon
eine viertel Stunde vor dem Computer hocken, bis die Seite fertig ist?!?). Der Sinn von Bildern ist die Veranschaulichung
von etwas. Wenn ich z.B. etwas schwieriges beschreibe, kann ein Bild eine Verständnishilfe sein. Man kann auch
Bilder einfügen, wenn man weiß, dass ein Zeichen oder etwas ähnliches nicht auf allen Computern existiert.