Lektion 8 - Grafiken einbinden

In dieser Lektion lernen Sie die wichtigsten Dinge, im Umgang mit Bildern auf HTML-Seiten .

Das Wichtigste beim Verwenden von Bildern ist, dass man die Dateigrößen im Auge behält. Ansonsten ist man ja noch jung und kann warten, weil es immernoch loadet und loadet.

Ärgerlich wird es dann, wenn man merkt, dass z.B. Bilder schlecht bearbeitet worden sind und dass die Hälfte der Datenmenge für die selbe Bildqualität gereicht hätte. Manchmal sind auf Seiten auch unnötig viele Bilder. Also meine Rat - nie zu viele Bilder und immer darauf achten, dass die Datenmengen so klein wie möglich bleiben.

Einbinden von Grafiken

Der Befehl, der angibt wo ein Bild hin soll, heißt:

<IMG SRC="Dateiname" ALT="Text" HEIGHT=(Höhe) WIDTH=(Breite) BORDER=(Rahmenstärke)>

IMG SRC="..."
- gibt Ort und Dateinamen der Grafik an (SRC heißt Source, auf deutsch Quelle). Das funktionsweise entspticht den in Lektion 7 beschriebenen Links. Die Grafik sollte im .GIF oder .JPG Format abgelegt sein.

ALT="..."
- hier trägt man einen Titel oder einen alternativen Text für die Grafik ein. Wenn jemand das Bild nicht laden will oder kann, wird dieser Eintrag statt der Grafik angezeigt.

HEIGHT="..."
- gibt die Höhe der Grafik an.

WIDTH="..."
- gibt die Breite der Grafik an.

BORDER="..."
- hier kann man die Rahmenstärke einer Grafik angeben. Wenn kein Rahmen dargestellt werden soll , setzt man den Wert auf Null.


Als Beispiel soll die Grafik "Computer-Doc.jpg" in eine Seite eingebaut werden:

Sie ist 124 Pixel hoch und 129 Picel breit. Die gragik soll einen Rahmen von einem Pixel erhalten und als alternativer Text soll : "Computer-Doc" ausgegeben werden.

Der HTML-Befehl dazu muss so aussehen:

<img src="Computer-Doc.jpg" alt="Computer-Doc" height="129" width="124" border="1">

Und hier das Ergebnis:

Computer-Doc

Übrigens den Alt-Text sieht man "on mouse over".


Hintergrundgrafiken

Natürlich kann man Grafiken auch als Hintergrund für eine Webseite verwenden und damit das Layout der Page verbessern. Eine solche Grafik sollte möglicht klein sein und wird meißt gekachelt dargestellt. Eine solche Kachel könnte zum Beispiel so aussehen:

   Dateiname: hg-kachel.jpg

Ich habe die Grafik mit einem Rahmen versehen, damit sie deutlicher hervor tritt.

Um diese Kachel als Hintergrundgrafik verwenden zu können benutzt man folgenden Eintrag im <BODY></BODY> - Tag:

<BODY background="hg-kachel.jpg"></BODY>

Beispiel anzeigen


zur Lektion 9