HTML - Schritt für Schritt
	Bilder machen eine Internetseite bunt und beleben den Text. Aber sie machen die Seite auch langsam! Die grafische Aufbereitung einer Internetseite ist darum immer ein Gratwanderung zwischen gestalterischem Anspruch und zumutbarer Übertragungsdauer.   Seien Sie sparsam. Die buntesten Seiten des Internets sind nicht die erfolgreichsten und beliebtesten Seiten. Eine gute Internetseite bietet Inhalte! Und diese Inhalte gilt es ansprechend zu verpacken. Es gibt schon genug langsame Internetseiten, die aus leeren Verpackungen bestehen.

	Einfügen von Bildern
	Die Bilder des Internets sind zu fast 100% Bilder im GIF- und JPG-Format. Beides sind komprimierte Datenformate. Das GIF-Format eignet sich am besten für mehrfarbige Bilder ohne feine Farbabstufungen. Das JPG-Format eignet sich am besten für fotorealistische Darstellungen mit vielen Details. Für Bilder mit transparentem Hintergrund oder für Animationen muß das GIF-Format benutzt werden, da JPG beide Funktionen nicht unterstützt. Wenn Sie kein Grafiktalent sind müssen Sie sich Bilder besorgen. Im Internet gibt es einige Quellen, bei denen Bilder kostenlos erhältlich sind. http://webclipart.about.com/arts/webclipart/mbody.htm

	Bild einfügen (ohne Attribute)
	Diese Karikatur von mir hat der Grafiker Johannes Fritz vor einigen Jahren erstellt. Inzwischen sind meine Haare fast weiß. Das Bild wurde mit der einfachsten Form des dafür vorgesehenen HTML-Tags eingefügt.   <img src="bilder/07_01.gif">   Die gute Nachricht: Der Tag ist wirklich einfach.   Die schlechte Nachricht: Benutzen Sie diesen Tag niemals ohne die folgenden Attribute!

	Bild einfügen mit den wichtigsten Attributen
	Textübertragungen erfolgen sehr viel schneller als Bildübertragungen. Wenn Bilder richtig eingebunden werden, kann der Browser bereits den gesamten Text anzeigen, während die Bildinformationen erst nach und nach eintreffen und angezeigt werden.   Dazu muß dem Browser bekannt sein, wie groß das anzuzeigende Bild sein wird. Er kann dann den Text sofort richtig darstellen und reserviert einfach den für die später eintreffenden Bilder erforderlichen Platz. <img src="bilder/07_01.gif" width=120 height=130>   Durch die Größenangabe im Tag kann der Browser einen Bereich von 120 * 130 Pixel Größe für die spätere Anzeige des Bildes reservieren. Und woher wissen Sie, wie groß das Bild ist?   Wenn Sie ein gutes Malprogramm haben ist es kein Problem für Sie, diese Information zu besorgen. Laden Sie einfach das Bild und schauen Sie nach. Wenn Sie kein Programm haben, das Ihnen diesen Dienst leistet, dann können Sie die Größe mit einem guten Bildbetrachter ermitteln. Laden Sie das Programm Irfan View von http://www.irfanview.com/deutsch.htm Irfan View ist in einer deutschsprachigen Version erhältlich und für den Privatgebrauch kostenlos. Laden Sie ein Bild und schauen Sie im Menü "Bildinformation" nach. Dort finden Sie die erforderlichen Größenangaben. Aber Irfan View kann noch viel mehr. Beispielsweise ein Bild im BMP-Format laden und als GIF oder JPG speichern.

	Weitere Bildattribute
	Manche Besucher des Internets schalten die Grafikanzeige des Browsers ab oder benutzen einen textorientierten Browser, der keine Bilder anzeigt. Für diese (seltenen) Besucher können Sie dem Bild einen Text hinzufügen, der in diesen Fällen statt des Bildes angezeigt wird. Der Text wird von neueren Browsern außerdem in einem kleinen Textfeld eingeblendet, wenn sich der Mauszeiger über dem Bild befindet. <img src="bilder/07_01.gif" width=120 height=130 alt="Josef Becker">   Sie können das Bild mit einem Rahmen versehen oder bewußt die Anzeige eines Rahmens ausschalten. Das folgende Bild ist Bestandteil eines Links, der Rahmen wurde nicht ausgeschaltet. <a href="07html.htm"> <img src="bilder/07_01.gif" width=120 height=130 alt="Josef Becker" border=3> </a>   Wenn Sie nicht möchten dass ein Rahmen angezeigt wird, setzen Sie Border einfach auf 0. Ein weiteres wichtiges Attribut steuert die Position nachfolgender Seitenelemente. Standardmäßig werden diese beginnend an der rechten unteren Bildecke plaziert. Das sieht nicht besonders gut aus. Aus diesem Grund wurde in den vorstehenden Beispielen der Text mit dem Zeilenumbruch <br> unter das Bild gesetzt. Dieser Text wurde mit dem Attribut align="left" beginnend ab der rechten oberen Bildecke plaziert.   <img src="bilder/07_01.gif" width=120 height=130 align="left">   Der Wert von align kann left, right, top, middle oder bottom sein. Probieren Sie es einfach aus und lassen Sie sich überraschen. Wichtig sind die Werte left und right.   Im soeben gezeigten Beispiel wird der Text direkt an das Bild geschrieben. Es fällt nicht auf, weil das Bild größer als der sichtbare Teil ist, der transparente Hintergrund ist unsichtbar.   Sie können ein weiteres Attribut einfügen. Mit diesem Attribut wird Freiraum um das Bild herum geschaffen und die umgebenden Elemente entsprechend auf Abstand gehalten. Mit hspace=50 wurde links und rechts vom Bild ein horizontaler Freiraum von jeweils 50 Pixel eingefügt. Der zusätzliche Freiraum oberhalb und unterhalb des Bildes wurde mit vspace=0 auf 0 Pixel gesetzt.   <img src="bilder/07_01.gif" width=120 height=130 align="left" hspace=50 vspace=0>     Im nächsten Teil geht es wieder um Bilder, und zwar um GIF-Animationen.