Tripod-HTML-Kurs (1)
Tripod-HTML-Kurs (2): Einführung
- <BODY>-Tag
- <IMG>-Tag
- Imagemaps
- Farbmodelle
- Bildformate
- <META>-Tag
- farbige Tabellen
- Style Sheets
- Formulare
- Test
Tripod-HTML-Kurs (2): Das <IMG>-Tag
Das <IMG>-Tag haben Sie bereits im ersten Teil des Kurses
kennengelernt:
es ist ein Standalone-Tag, daß mindestens das Attribut "src" braucht,
um den Pfad und Namen des zu ladenden Bildes anzugeben.
Mit "alt" kann eine Textbeschreibung des Bildes angegeben werden, die angezeigt wird, falls die
Graphikdarstellung des Browsers abgestellt ist.
Außerdem kann mit "height" und "width" die Größe des Bildes
angegeben werden. Der Browser stellt dann beim Aufbau der Seite bereits einen
entsprechenden Platz für das Bild bereit, die Größe des Bildes
muß nicht erst aus der Grafikdatei selbst herausgelesen werden.
Das <IMG>-Tag hat noch andere Attribute mit denen Sie z.B.
festlegen können, wie Text bei einem Bild dargestellt werden soll oder ob
das Bild einen Rahmen erhalten soll. In der Tabelle erhalten Sie eine
|
Auswahl an weiteren Attributen:
|
| Attribut |
Bedeutung |
Werte, Beispiel |
| border |
"Rahmen": gibt die Dicke eines Rahmens (in Pixel) um ein Bild an |
numerische Werte - Rahmen von 2 Pixel
Dicke: <img src="bild.gif" border=2> |
| align |
Ausrichtung eines Bildes relativ zum Bildschirmrand,
beziehungs- |
left, right: links, rechts -
Ausrichtung des Bildes am linken Bildschirmrand: <img src="bild.gif" align=left> |
| align |
weise(*): Ausrichtung von Text um ein Bild |
top, middle, bottom: oben, Mitte, unten -
der Text wird in der Bildmitte angeordnet: <img src="bild.gif" align=middle> |
| hspace, vspace |
Abstand des Textes zum Bild und zum Rand: horizontaler bzw. vertikaler Abstand |
numerische Werte - horizontaler Abstand des Textes
zum Bild (und damit gleichzeitig Abstand des Bildes vom Bildschirmrand) von 40 Pixeln:
<img src="bild.gif" hspace=40> |
*: der Text bei einem links ausgerichteten Bild fließt rechts herum, bei
einem rechts ausgerichteten Bild fließt der Text links herum.
Bilder können auch verlinkt werden, gerade dann sollten
Sie an einen alternativen Text für das Bild denken:
<a href="http://www.tripod.de"><img src="./logo.gif" alt="Link zu Tripod"></a>
Das <IMG>-Tag wird von dem <A HREF>-Tag umschlossen.
Der Übersichtlichkeit zuliebe haben wir die Attribute "height" und "width" weggelassen.
|
Bilder für allerlei Zwecke
|
Bilder können Sie auch als Symbole bei Listen (anstatt der üblichen Browser-definierten
Symbole, wie Quadrat, Kreis) verwenden oder Sie setzen ein Bild als horiziontalen Strich ein.
Die Bilder sollten bei dieser gestalterischen Benutzung besonders klein sein (die Dateigröße)!
Bilder als Listensymbole:
<img src="katze.gif" width=20 height=30 alt="*">Die Katze ist ein Säugetier<br>
<img src="katze.gif" width=20 height=30 alt="*">Die Katze hat Fell<br>
Ein Bild als horizontaler Strich:
<img src="strich.gif" width=400 height=5 alt="-----------------------------------------">
Als alternativen Text für das Bild haben wir eine Reihe von horizontalen Strichen gewählt.
