E-Book Startseite Karteikarten-Programm
0
Inhalt dieser Seite
  1. Bilder

Bilder

In HTML ist es möglich, Grafiken bzw. Bilder einzubinden. Um Bilder einzubinden benötigen Sie den sogenannten Image-Tag. Unter HTML5 und XHTML lautet dies <img /> In diesen Image-Tag können / müssen Sie nun verschiedene Attribute notieren: Quelle (src), Alternativtext (alt), Breite (width), Höhe (height), Rahmen (border), Titel (title) und der Grafik-Beschreibungs-Verweis.

<img src="/Bilder/Logo.jpg" /><br />
<img src="/Bilder/Logo.jpg" alt="Logo" /><br />
<img src="/Bilder/Logo.jpg" alt="Logo" width="50" /><br />
<img src="/Bilder/Logo.jpg" alt="Logo" width="50" height="50" /><br />
<img src="/Bilder/Logo.jpg" alt="Logo" width="50" height="50" border="5" /><br />
<img src="/Bilder/Logo.jpg" alt="Logo" width="50" height="50" border="5" title="Logo" /><br />
<img src="/Bilder/Logo.jpg" alt="Logo" width="50" height="50" border="5" title="Logo" longdesc="/HTML/bilder.php" />
Anzeigebeispiel
Anzeigebeispiel


Vergleichen Sie mal die einzelnen Beispiele in der Vorschau:

  1. Hier sehen Sie das Bild in Original-Größe
  2. Zusätzlich noch ein Alternativ-Text der nur angezeigt wird, wenn das Bild nicht vorhanden ist
  3. Hier legen wir eine Breite fest, das Seitenverhältnis des Bildes wird automatisch beibehalten
  4. Mit der zusätzlichen Angabe von der Höhe könnten wir das Bild bei Bedarf verzerren
  5. Das Bild erhält einen Rahmen mit 5px Breite
  6. Das Bild erhält den Titel "Logo", welcher angezeigt wird, wen man mit der Maus über das Bild fährt
  7. Wenn das Bild nicht vorhanden ist, wird der Link zu einer Beschreibung angezeigt (um keine Konflikte zu bekommen, müssen sie evtl. das alt-Attribut entfernen)

Laut W3C wird empfohlen, dass ein Bild ein src-, width-, height- und alt-Attribut besitzt. Die meisten Browser sehen dies aber nicht so eng.

Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de