Zurück || Weiter Index Startseite
HTML Einführung: Grafiken
Die Einbringung von Grafiken in den Text

Verweise

In diesem Kapitel finden Sie Informationen über:

  1. Hintergrundbild
  2. Bilder im Text

Allgemeines

Zum jetzigen Zeitpunkt sind wir schon in der Lage einiges mit dem Text anzufangen. Allerdings fehlt noch ein wenig Pepp. Den versuchen wir nun mit Grafiken zu erreichen.

HTML-Browser können in der Regel mit Bildern vom Typ GIF oder JPEG (JPG) umgehen. Es ist möglich, den Text mit einer Grafik zu unterlegen (Hintergrundbild), Grafiken in den Text einzubinden, ganze Grafiken mit Verweisen zu belegen und Grafikbereiche mit Verweisen zu versehen.

So schön Grafiken auch sind, bedenken Sie bitte eines:

Grafiken kosten viel Speicher, der über das Netz übertragen werden muss. Je mehr Grafiken eine Seite besitzt, desto länger dauert der Ladevorgang! - Setzen Sie Grafiken also gezielt ein!

Hintergrundbild

Um den Hintergrund von seiner tristen Einfärbigkeit zu befreien, müssen wir eine Option des <body> Tags nutzen. Die Anweisung <body background="Datei"> stellt die Grafikdatei Datei wiederholt im Hintergrund des Dokuments dar (Kacheleffekt), sodass ein gleichmäßiger Eindruck entsteht.
(Als Beispiel für diese Technik probieren Sie einmal unser 4.Beispiel.)

Soll z.B. eine Grafik "paper3.gif" in den Hintergrund gelegt werden, so sieht das Tag wie folgt aus:

<body background="paper3.gif">

Grafiken im Text

Nun wollen wir ein einfaches Bild in den Text einfügen. Dazu dient das Image-Tag (kein Paar!)

    <img src="Datei" width=Zahl height=Zahl alt="Text" align=Option border=Zahl>
Dabei ist Datei durch den Dateinamen der Grafik zu ersetzen. Die Angaben align, alt und border sind optional. Letzteres gibt die Stärke des Rahmens um die Grafik an (default: 0). Zur Ausrichtung des Bildes zum Text sind für Option folgende Angaben zulässig:

  • top, middle oder bottom
  • left bzw. right

Wenn Sie Grafiken in HTML-Dateien einbinden, sollten Sie immer die Breite und Höhe der Grafik mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Wenn Sie Breite und Höhe nicht angeben, wartet der Browser dagegen mit der Anzeige der Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat.
Sie können die Grafik auch skalieren (d.h. größer oder kleiner machen), indem Sie absichtlich eine größere oder kleinere Angabe für width oder height machen. (Eine der beiden Angaben genügt für diesen Fall.)

Hinweis: HTML-Editoren ermitteln Ihnen die Größe der einzufügenden Grafik schon automatisch (und fügen sie in das Image-Tag ein), aber auch jedes bessere Grafik-Programm zeigt Ihnen diese Daten an.

Auch den alt-Text sollten Sie unbedingt angeben (außer es handelt sich um eine reine "Ziergrafik"). Er wird im Leerraum angezeigt, wo die Grafik hineinkommt, solange sie noch nicht vollständig vom Server geladen ist - ist also auch nützlich, wenn der Benutzer das automatische Laden von Grafiken überhaupt ausgeschaltet hat!

Mit dem optionalen align-Tag können Sie die Grafik zum Text ausrichten. Dabei bezieht sich die Ausrichtung immer auf die Zeile, in der die Grafik beginnt. Wird der Text in die nächste Zeile umgebrochen, so fängt dieser erst unter dem Bild wieder an:
 

HTML Lernen ist doch leicht! Dieses Bild wurde mit align=top plaziert; border=1 wurde verwendet.

You've got new mail! Dieses Bild wurde mit align=middle relativ zum Text plaziert. Die nächste Zeile steht jetzt unter dem Bild. - Oje!

Niemals aufgeben! Dieses Bild wurde mit align=bottom plaziert.

Snoopy! Snoopy! Die Optionen left und right richten die Grafik so weit links oder rechts aus, dass der evtl. vorhandene Text umflossen wird.

Zusammenfassung und Beispiel

Alle Beispiele aus den vorherigen Abschnitten gehen davon aus, dass die Grafikdateien im gleichen Verzeichnis wie die HTML-Seite liegen. Ist dies nicht der Fall, so muss der Pfad relativ (pfad/dateiname) oder absolut (http://...) angegeben werden.

Gleiches gilt auch für das nächste Beispiel:   (Die Grafiken liegen hier im Unterverzeichnis img)

<html>
<head>
<title>Beispiel mit Grafiken</title>
</head>
<body background="img/eyes.gif">

<h1>Grafiken mit HTML</h1>
<h3>Einbindung von Grafik - Teil 1</h3>
<img src="img/computer.gif" align="top"
   alt="Computer einer anderen Generation">
<p>
<b>Des Kaisers neuer Computer</b>

</body>
</html>

Wird dieses Dokument in den Browser geladen, so sieht es wie folgt aus:

Im nächsten Kapitel beschäftigen wir uns mit den verschiedenen Arten von Listen.

 

Zurück || Weiter Index Startseite
Version 1.2, Jänner 2000 - Copyright © 1999-2000 by Peter Bittner