Bilder und Grafiken #
Bilder oder Grafiken sind nicht Teil der HTML-Datei, sondern werden in ihr lediglich referenziert. Das heißt, der Ort, an dem die Grafiken zu finden sind, sowie die Darstellungsart werden im Quelltext angegeben. Dies erfolgt über den <img>-Tag (image). Dieser Tag besitzt keinen End-Tag.
1 2 3 |
<img src='happy.png' alt='Smiley'><br> <img src='happy.png' height='30' width='50' alt='Smiley'><br> <img src='http://www.zentralplan.de/zentralplan.png' alt='Mein Logo' title='Mein Logo'> |
Der Ort der Grafik wird im Attribut src (source) angegeben. Für den Pfad gelten die gleichen Regeln wie für Links. Zugelassene Bildformate sind JPG bzw. JPEG, GIF, PNG und mit wachsender Browserunterstützung auch SVG. Die Angaben für Höhe und Breite einer Grafik (height und width) sind optional. Werden sie angegeben, kann der Browser die Seite aber bereits aufbauen, bevor die Bilder im Einzelnen geladen sind, was die Geschwindigkeit des Seitenaufbaus erhöht.
Grafiken sollten immer in Originalgröße angezeigt werden. Zwar ist es möglich, über die Attribute height und width die Größe der Grafik zu manipulieren, jedoch geht das häufig auf Kosten der Bildqualität.
Ein Alternativtext wird angezeigt, wenn im Browser die Anzeige von Grafiken ausgeschaltet wurde. Dazu dient das Attribut alt. Dieser Alternativtext ist auch für Menschen mit Sehschwäche hilfreich, die über diesen Text verbale Informationen über die Grafik erhalten können. Die Angabe des alt-Attributs ist vorgeschrieben, kann aber leer sein (alt='').
Der Alternativtext sollte nicht mit dem Titel des Bildes verwechselt werden, der durch das title-Attribut festgelegt wird und durch den ein Tooltip-Text wie bei Links erzeugt wird. Der Internet Explorer verwandelt den Wert des alt-Attributs ebenfalls in einen Tooltip, wenn kein Titel angegeben wurde, was jedoch eigentlich nicht korrekt ist und zur fälschlichen Annahme führen könnte, dass man das alt-Attribut für Tooltips verwenden kann. Das entspricht aber nicht der Idee des HTML-Standards zum alt-Attribut. Für Tooltips also immer das title-Attribut verwenden (funktioniert auch bei anderen HTML-Elementen)!
Für die Planung eines Webprojektes empfiehlt es sich, Grafiken in einem eigenen Verzeichnis unterzubringen, um sie so von den HTML-Dateien getrennt zu halten und eine bessere Übersicht über die vorhandenen Dateien zu gewährleisten.
Favicons #
Favicons sind diese kleinen Bildchen, die in der Adresszeile des Browsers vor der Adresse angezeigt werden können. Mitunter werden diese auch in der Lesezeichen-/Favoritenliste angezeigt. Um solche Bilder zu verwenden, benötigt man natürlich zunächst ein solches Bild. Das Grafikformat dieses Bildes musste früher ICO sein, daher musste man eine Grafik erst in dieses Format umwandeln, bevor man sie zu diesem Zweck verwenden konnte. Aktuelle Browser unterstützen aber auch andere Grafikformate. Die Grafik sollte die Größe 16 × 16 Pixel besitzen. Am besten ist es, diese Grafikdatei unter dem Namen favicon.ico in das Wurzelverzeichnis des Webprojekts zu legen. Dann wird sie im <head> des Skripts mit folgendem Code referenziert:
1 2 3 4 5 |
<!-- ursprüngliches Grafikformat --> <link rel='shortcut icon' href='favicon.ico'> <!-- mittlerweile mögliches anderes Grafikformat --> <link rel='shortcut icon' href='happy.png'> |