Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  


Linktipps

Anzeige

 

www.finanzcheck.de
» 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.



Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
XHTML - HTML allgemein
XHTML - Textauszeichnungen
monatlich wechselnder Link mit JavaScript
Übersichlichere Formulare


 
Anzeige