Grafiken und Bilder
Sicher wollen wir auch mal irgendwann Bilder auf unsere Webseite tun - die machen alles schön bunt und sehen überhaupt immer gut aus. Erst gibt es ein paar Sachen die wir über Bilder wissen sollten.

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.

Grafiken und Bilder einbinden

Bilder sind auch Tags die nicht geschlossen werden. Der Tag ist folgender:

<img src="pfad zum bild">
<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:

Ich schreibe jetzt mal hier einen superlangen Text. Is zwar doof, in den HTML Büchern die haben immer so kuhle lange Texte, die zitieren immer irgendwas dolles lateinisches oder so, aber ich kann leider kein Latein, das is dann etwas blöd weil dann würd ich was schreiben was ich nich versteh, und auf sowas hab ich ja mal keine Lust.

Wir können Abhilfe schaffen in dem wir ein "align=" zufügen:

<img src="pfad zum bild" align=right>
Ich schreibe jetzt mal hier einen superlangen Text. Is zwar doof, in den HTML Büchern die haben immer so kuhle lange Texte, die zitieren immer irgendwas dolles lateinisches oder so, aber ich kann leider kein Latein, das is dann etwas blöd weil dann würd ich was schreiben was ich nich versteh, und auf sowas hab ich ja mal keine Lust.

Das funktioniert natürlich auch mit "left".

Grafiken und Bilder als Links

Das ist natürlich auch sehr beliebt und einfach: Ihr setzt einfach den Bilder-Tag an die Stelle wo eigentlich der Linkname kommt.

<a href="url"><img src="pfad zum bild" border=0></a>

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.

Grafiken und Bilder als Hintergrund

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="urlzumbild">
<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:

Wie erreiche ich das?
Ihr könnt solche Hintergründe entweder irgendwo runterladen, oder aber auch mit ein bisschen Erfahrung und dem passenden Grafikprogramm selber machen.