HIP HOP ERLEBEN - Html Kurs 2

Bilder in die Homepage einbauen
Ein Homepage ohne Bilder ist wie eine Kaugummi ohne Pfefferminzgeschmack. Trotzdem sollte man es nicht übertreiben und die Anzahl der Bilder und vor allen Dingen deren Größe in Grenzen halten. Im Internet stehen zwei Grafikformate im Vordergrund: JPG und GIF. Andere Formate benötigen Plug-ins und sollten vermieden werden. Mit folgendem Tag wird ein Bild eingefügt:

<img src="images/htmlfor.gif">

Hier ist zugleich noch ein Bild verwendet worden, das in einem Unterverzeichnis liegt. Deshalb steht hier noch das "images" davor. Natürlich ist es auch möglich, Bilder auszurichten. Hierzu stellt man wie gewohnt den Tag zur Ausrichtung davor:

<img src="images/htmlfor.gif"

Sinnvoll kann es auch sein, die Größe eines Bildes anzugeben. Hierzu verwendet man die Pixel-Einheit:

Oftmals dauert es eine Ewigkeit, bis ein Bild geladen ist, oder jemand hat die Darstellung von Bildern abgestellt. Da aber gerade bei Bildern auf Titelseiten wichtige Informationen enthalten sind, kann man das Bild "beschriften". Während dem Laden oder wenn die Bilder abgestellt sind, wird hier der Schriftzug "Der HTML-Kurs" angezeigt:

Hintergrundbilder
Interessante Effekte und eine Auflockerung der Seiten kann man mit Hintergrundbildern enthalten. Dabei wird ein Bild nach dem Kachelprinzip neben- und untereinander gesetzt. Der Hintergrund gilt für die ganze Seite. Es ist nicht möglich, innerhalb einer Seit verschiedene Hintergründe zu verwenden (außer bei Verwendung von Frames). Der Hintergrund sollte dezent sein und nicht ablenken:

Andere Grafikformate
Im Internet gibt es auch die Möglichkeit, kleine Animationen einzubauen. Hierzu verwendet man das GIF-Format. Hier hat man die Möglichkeit, z. B. mit dem GIF Construction Set (http://www.mindworkshop.com) ähnlich wie bei einem Daumenkino Einzelbilder aneinanderzureihen, und dabei eine kleine Animation zu erstellen. Beispiel:

Etwas störend wirkt sich hier der schwarze Hintergrund aus. Und genau das ist ein weiterer Vorteil des GIF-Formates. Man hat die Möglichkeit, eine Farbe "durchsichtig" zu machen. Man nennt dies Transparenz. Beispiel:
Nicht transparent

Rahmen um Grafiken
Gerade bei Photos sieht ein Rahmen gut aus. Die Dicke des Rahmens kann man fast beliebig steigern. Diesen bekommt man so um das Bild:

<img src="images/psp01.jpg" border="5"

Rahmen

Tips zur Verwendung von Bildern:

Bilder sollten nicht zu groß werden
Die Verwendung von zu vielen Bildern lenkt ab und verwirrt
Zu viele Animationen nerven
GIF-Grafiken sollte man mit 256 Farben rastern, damit das Bild kleiner wird und auch Leute mit 256 Farben am Bildschirm Spaß haben
JPG-Grafiken sollte man möglichst klein machen, indem man versucht, den Kompressionsfaktor immer höher zu schrauben.
GIF-Version 89a - Interlaced bietet die Möglichkeit, Bilder nach und nach aufzubauen. Diese werden zuerst unscharf und danach immer schärfer aufgebaut. Doch Vorsicht: Dieses Format macht die Dateien auch größer!