Browser sind dumm und können nicht mit allen Dateiformaten etwas anfangen. Hier sind welche die Interpretiert werden und was ihr dabei beachten müsst.
.jpg | .jpg ist zusammen mit .gif das gängiste Dateiformat. Ihr solltet es verwenden wenn ihr komplexere Grafiken mit Farbverläufen und Fotos benutzt. jpgs sind komprimierte Dateien, dh das Bildbearbeitungsprogramm färbt mehr Pixel gleich als eigentlich gleich sind um die Speichergröße zu verringern. Das kann ziemlich hässlich aussehn ;D Aber in den meisten Bildbearbeitunsprogrammen lässt sich die Komprimierung einstellen. Ihr müsst also einen Kompromiss schließen zwischen Dateigröße und Qualität. |
.gif | Gifs solltet ihr für Sachen verwenden in denen nicht viele Farbverläufe vorkommen, oder ganz kleine Grafiken, denn sonst werden sie kilobyte technisch riiiiieeeeesengroß. Gifs können übrigens auch transparent oder animiert sein. |
.png | PnG ist relativ neu und empfiehlt sich nur für kleine Sachen wie gifs. Es kann zwar auch Fotos gut darstellen, allerdings werden die Dateien riesig und haben lange Wartezeiten. Der Internet Explorer unterstützt auch bei pngs transparenz, allerdings ist das mit Vorsicht zu genießen. |
.bmp | Werden interpretiert, sollten aber AUF KEINEN FALL genommen werden, bmps sind immer unkomprimiert und VIEL zu groß. |
Fazit: haltet euch an .gif und .jpg.
Bilder sind auch Tags die nicht geschlossen werden. Der Tag ist folgender:
<img src="ordner/bildname.jpg">
Ihr seht, mit den Pfadangaben läuft das hier genauso wie mit den Links. Jetzt werdet ihr feststellen, wenn ihr einen Text schreibt und ein Bildchen setzt, dass das Bildchen nicht vom Text umflossen wird:
Wir können Abhilfe schaffen in dem wir ein "align=" zufügen:
Das funktioniert natürlich auch mit "left".
Das ist natürlich auch sehr beliebt und einfach: Ihr setzt einfach den Bilder-Tag an die Stelle wo eigentlich der Linkname kommt.
Ihr seht das ich "border=0" hinzugefügt habe. Das müsst ihr machen weil euer bild sonst einen hässlichen Rand bekommt. Wenn man natürlich einen haben will (kann man ja auch stilistisch einsetzen), lässt man es weg.
Auch das ist nicht schwer: es gibt zwei Möglichkeiten ein Bild zum Seitenhintergrund zu machen. Die eine wäre über einen Style Sheet, aber da sind wir noch nicht angekommen. Also nehmen wir die andere Variante: über den <body> Tag.
<body background="beispielordner/beispielbild.jpg">
Ihr müsst dabei bedenken das sich das Bild "kacheln" wird, sprich, es wird sich wiederholen. Schon an dieser Stelle möchte ich euch einen Fehler den viele Webmaster, auch welche die sich schon für gut halten, ans Herz legen. Oft machen Leute einfach ein ganzes Layout als Hintergrundbild und packen dann einfach den Inhalt in einer Tabelle, die in der Regel einen transparenten Hintergrund haben, darüber. Sie vergessen einfach, das nicht alle Besucher die selbe Auflösung an Monitor und den Browser gleichgroß haben. Dann wiederholt sich das ganze Layout, was ziemlich dämlich aussieht. Außerdem sind die Dateien meist so groß das sie ewig laden. Benutzt also nur kleine Bilder als Hintergrund, und solche, die wenn sie sich kacheln, ineinander übergehen und nicht hässliche Ränder haben:
FALSCH:
RICHTIG:
Ihr könnt solche Hintergründe entweder irgendwo runterladen, oder aber auch mit ein bisschen Erfahrung und dem passenden Grafikprogramm selber machen.