Einführung in HTML – Grafiken

Bilder werden bei den meisten Webseiten verwendet. Seitdem es die schnellen Internetanbindungen gibt, bestehen die meisten Seiten zum Großteil nur noch aus Grafiken, welche verlinkt sind.

Wie man Images einbindet und auch verlinkt wird im Folgenden beschrieben.

Standardmäßig werden Bilder so im Body eingebunden:

<img src="#" />

Dies ist die Grundfunktion. Dem Browser wird gesagt, dass es sich eben um ein img(age) handelt und wo es auf dem Server liegt. Natürlich können auch externe Grafiken als Source (src) angegeben werden.

Dabei kommen allerdings noch zwei weitere Attribute. Zum einen der Titel des Bildes und zum Anderen ein alternativer Text, für Textbrowser. Dieser Text wird aber auch angezeigt, wenn das Bild falsch verlinkt wurde, oder bei externer Verlinkung mal gelöscht wurde. Außerdem können Screenreader diesen Text auch vorlesen.

Im Ganzen sieht es dann so aus:

<img src="#" title="Grafik" alt="Grafik zur Anschauung" />

Des weiteren sieht man auch hier, dass ein Image-Tag direkt wieder geschlossen wird. Also, dass am Ende ein /> steht. Dies hat wiederum den Grund, weil der Tag ja kein Text zulässt, sondern direkt ausgelesen wird.

Eine Grafik kann auch als Linktext gelten. Hierbei wird einfach das a href-Tag genommen und als Linktext das Bild eingesetzt.

<a href="#" title="Titel der Seite"><img src="#" alt="Grafik" /></a>

Dabei wird aber der Titel in den Link geschrieben, sodass bei der Grafik nur noch der alternative Text steht. Optional kann man bei einem Link der Grafik auch noch das Attribut border=”0″ geben. Dies hat zur Folge, dass kein blauer Rahmen um die Grafik gezogen wird.

<a href="#" title="Titel der Seite"><img src="#" alt="Grafik" border"0" /></a>