HTML-Tutorial
Bewertung:
/ 0
- Details
- Zuletzt aktualisiert am Sonntag, 01. Juli 2012 08:11
- Geschrieben von Jan Pionzewski
7. Grafiken einbinden
In HTML besteht selbstverständlich auch die Möglichkeit, Grafiken und Bilder in die eigene Webseite einzubinden. Wie das genau funktioniert und was es dabei zu beachten gibt, wird in diesem Teil des Tutorials erklärt.
7.1 Grafiken einbinden
Um ein Bild in Ihre Webseite einzubinden, muss dafür der IMG-Tag benutzt werden. Über das Attribut src="/..." wird der Pfad zum Bild definiert.
Beispiel:
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>
<img src="/bild.jpg">
<img src="/../grafiken/bild02.jpg>
<img src="http://www.webmasterparadies.de/logo.jpg">
</body>
</html>
7.2 Höhe und Breite von Bildern definieren
Wenn ein Bild noch nicht vollständig geladen ist, zeigt der Browser standardmäßig einen Platzhalter an. Dieser soll dem Surfer zeigen, dass an dieser Stelle noch ein Bild geladen wird. Ist nun keine Größenangabe zu dem Bild definiert, fällt der Platzhalter in einer bestimmten Standardgröße aus. Das kann bewirken, dass das Design der Webseite nicht mehr passt, oder bei mehreren Grafiken das Browserbild anfängt "herumzuspringen", wenn die Grafiken nach und nach geladen werden. Um dies zu vermeiden ist es also immer sinnvoll, Höhe und Breite des Bildes anzugeben. Die Angabe erfolgt dabei in Pixel.
Beispiel:
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>
<img src="/04.jpg" width="100" height="100">
</body>
</html>
Hinweis:
Wenn Sie bei einer großen Grafik die angezeigte Größe beschränken, ändert sich dadurch nicht die Dateigröße der Grafik. Die Grafik wird nur verkleinert dargestellt.
7.3 Alternativtexte für Grafiken
Beispiel:
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>
<img src="/portrait.jpg" alt="Portraitfoto vom Autor der Seite" title="Dies ist mein Portraitfoto">
</body>
</html>
Das Attribut alt="..." wird für den Alternativtext verwendet, den Screenreader oder Suchmaschinen-Indexer benutzen. Das Attribut title="..." wird für ein kleines PopUp verwendet, welches automatisch dann erscheint, wenn der Benutzer den Mauszeiger auf dem Bild ruhen lässt. Das Attribut alt="..." sollte also ausschließlich als Alternativtext für das Bild benutzt werden, während das title="..."-Attribut für zusätzliche Informationen dienen kann.
