Newsletter
- Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
Login
Umfrage
BlackBeats
Linktipps
» Startseite » HTML, CSS und JavaScript Tutorials
XHTML - Grafiken
In XHTML kann man selbstverständlich auch Grafiken, Photos und Bilder einbinden. Das geschieht mit dem <img>-Tag. Man kann ihn als Standalone-Tag benutzen (<img ... />) oder auch mit einem Start- und End-Tag (<img ...></img>). Allerdings wird fast ausschließlich die erste Version wirklich genutzt.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Grafiken</title>
</head>
<body>
<img src="../images/xmoz.jpg" alt="Mozilla!" width="100" height="100" />
</body>
</html>
Im Beispiel kommt im <img>-Tag zuerst das
src=""-Attribut. Es gibt die Quelle, also
den Ort, der Grafik-Datei an. Er kann durch einen relativen oder absoluten
Pfad angegeben werden. Eine absolute Pfadangabe wäre z.B. src="http://www.domain.de/images/xmoz.jpg",
relative Angaben, wie im Beispiel src="../images/xmoz.jpg"
gehen von dem Ort der Datei, in der die Grafik ist, aus. Das ../
bedeutet: Gehe ein Verzeichnis nach oben. images/
bedeutet: Wechsele dann ins Unterverzeichnis images, dort findest du die Datei
xmoz.jpg. Das alt=""-Attribut enthält
einen alternativen Text, falls der Browser keine Bilder anzeigt, ansonsten
wird er beim Überfahren mit der Maus angezeigt. Das alt-Attribut ist
Plicht. Die Angaben width und height geben die Breite und Höhe des Bildes
an. Sie sind nicht zwingend Notwenig, aber Bilder werden so schneller geladen.
Grafiken sollten für das Web im JPEG(*.jpg,*.jpe,*.jpeg), GIF(*.gif)
oder PNG-Format(*.png) vorliegen.
Diese Artikel könnten Sie auch interessieren:
XHTML - Textauszeichnungen
XHTML - HTML allgemein
monatlich wechselnder Link mit JavaScript
Wie baue ich CSS ein