0251 / 590 644 - 0
info@a-coding-project.de

HTML: Grafiken

Eine gerne verwandte Möglichkeit der Gestalltung von Webseiten ist die Benutzung von Grafiken, Bildern und anderen grafischen Objekten.

Bilder

Bilder lassen sich u.a. mit dem img-Element darstellen. Das Attribut src gibt dabei die URL der anzuzeigenden (Bild-)Datei an. Verwendet werden können fast alle Bildformate, üblich sind aber *.gif und *.jpg/*.jpeg. Beispiel:

<img src="bildname.gif">
<img src="/bild1.jpg"> 

Bitte beachten Sie dabei, dass das img-Element kein schließendes Tag hat, allerdings ist es nicht falsch dieses zu notieren, da er einfach vom Browser übergangen wird.

Bildtext

Das title-Attribut des img-Elements gibt den Bildtext an. Dieser wird angezeigt sobald man die Maus etwa 2 Sekunden über das jeweilige Bild hält. Der Bildtext kann als Beschreibung des Bildes dienen oder um zusätzliche Informationen dazu zu geben.
Außerdem kann das alt-Attribut als Alternativtext verwendet werden. Dieser Text wird immer dann angezeigt wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann. Nützlich ist es auch wenn die Dokumente auch von beinträchtigten Personen komplett verstanden werden sollen (z.B. kann der Alternativtext eine Erklärung dazu geben, was auf dem Bild zu sehen, damit auch sehbeeinträchtige Menschen alles 'mitbekommen'). Beispiel:

<img src="affe.gif" alt="Das Bild zeigt einen Affen auf 
 einem Baum" title="Der Affe mag den Baum">

Des Weiteren kann auch eine, sozusagen externe, Beschreibung des Bildes existieren. Diese kann mit dem longdesc-Attribt referenziert werden indem man die URL bzw. sonstige Adresse als Wert angibt. Beispiel:

<img src="name.gif" alt="Mein Bild" 
     longdesc="bildbeschreibung.htm#bild3"> 

Bildmaße

Um die Bildmaße (die Größe des Bildes) zu bestimmen gibt es zwei Attribute: Das height-Attribut, welches die Bildhöhe bestimmt, und das width-Attribut, welches die Bildbreite bestimmt. Beide können Angaben in Pixeln oder Prozent enthalten. Werden diese Attribute nicht verwendet wird das Bild in seiner vom Browser dargestellten Normalgröße ausgegeben. Beispiel:

<img src="bild1.gif" width="120" height="240">
<img src="grafik24.jpg" width="80%" height="10%">

Bildausrichtung

Bilder können ebenso wie z.B. Text mit dem align-Attribut ausgerichtet werden. Hier sind folgende Werte möglich:

  • left - Bild wird links ausgerichtet
  • center - Bild wird zentriert ausgerichtet
  • right - Bild wird rechts ausgerichtet

Berispiel:

<img src="bild.gif" align="right">
<img src="bild.gif" align="center"> 

Des Weiteren kann eine vertikale Ausrichtung bezüglich des darauffolgenden Textes vorgenommen werden. Dies wird ebenfalls mit dem align-Attribut vorgenommen. Als Werte sind folgende denkbar:

  • top - Der folgende Text wird über dem Bild angezeigt.
  • middle - Der folgende Text wird neben dem Bild angezeigt.
  • bottom - Der folgende Text wird unter dem Bild angezeigt.

Beispiel:

<img ... align="top"> ein Bild </img> 

Eine Kombination der beiden Möglichkeiten ist durch Trennung durch Komma (,) oder Leertaste möglich. Beispiel:

<img ... align="center bottom"> ein Bild </img> 

Bildrahmen

Um Rahmen um Bilder zu legen, kann das border-Attribut verwendet werden. Die Angaben der Rahmenbreite können hierbei in Pixeln notiert werden - voreingestellt ist 1 Pixel Breite. Beispiel:

<img src="bildvonklaus.gif" border="0">
<img src="bildname.gif" border="3"> 

Bildabstand

Um den Abstand des jeweiligen Bildes zu anderen Objekten festzulegen gibt es zwei Attribute. Das vspace-Attribut beschreibt den vertikalen Abstand (überhalb und unterhalb des Bildes). Das andere Attribut ist das hspace-Attribut, welches den horizontalen Abstand beschreibt (rechts und links neben dem Bild). Die Angaben können entweder in Pixeln oder in Prozent notiert werden. Beispiel:

<img src="mama.gif" vspace="20" hspace="30">
<img src="vogel.jpg" hspace="10%" vspace="5%">

Bitte beachten Sie dabei, dass nicht alle Browser dieses Attribut korrekt darstellen können.

Bildversionen

Bei sehr großen und aufwendigen Bildern und Grafiken ist es manchmal nützlich verschiedene Bildversionen einzubinden. Die geschieht mit dem lowsrc-Attribut bei dem als Wert eine kleinere (kleiner von der Dateigröße her) Version des gleichen Bildes angeben sollte. Die Verfahrensweise das Browsers ist dann so, dass als erstes die kleinere Bilddatei geladen wird. Ist das gesammte Dokument dann komplett geladen wird schließlich die größere, aufwendigere Bilddatei nachgeladen und über die kleinere gelegt. Das ergibt den angenehmen Effekt, dass auch aufwendigere Seiten schneller vollständig angezeigt werden können. Beispiel:

<img src="praesentation.jpg" lowsrc="vorwegbild.gif" 
     height="100" width="130">
<img src="bild1.jpg" lowsrc="bild1.gif"> 

Gratis: HTML-Kurs per E-Mail

Mit unserem HTML-Kurs wirst Du in kurzer Zeit deine erste Website mit HTML erstellen können.
Du erhältst von uns:

  • Schritt für Schritt Anleitungen, um HTML zu lernen
  • Tipps & Tricks, die dir die Arbeit mit HTML erleichtern
  • Aktuelle Neuerungen rund um das Thema HTML