Einfügen von Bildern

Bilder werden mit dem Image-Tag img eingefügt. Dieser Tag benötigt zwingend das Source-Attribut src, das die URL des Bildes angibt. Im Hinblick auf Unix-Systeme ist die Groß-/Klein-Schreibweise der URL-Adresse zu beachten!

Das Format:

  <img src="....." [alt="..."] [width="..."] [height="..."] [align="..."]>
Es wird empfohlen, das alt-Attribut zu verwenden, mit dem dem Bild ein alternativer Name gegeben werden kann. Dieser Name wird angezeigt, wenn man mit der Maus über das Bild fährt. Für eine Validierung ist das alt-Attribut zwingend notwendig. Nicht nur Faule notieren ein leeres alt-Attribut.

Wenn die Größenattribut width und height fehlen, wird das Bild in Originalgröße geladen. Ansonsten können Größenangaben in Pixel (ohne "px") oder Prozent (mit "%") gemacht werden. Wenn nur ein Größenattribut verwendet wird, dann wird die andere Größe proportional richtig dargestellt.

Jetzt kommen Bilder ... Logo Logo Blume Pfeil home Pfeil oben Pfeil unten

Die folgenden Bilder zeigen die Wirkung des Attributs "align" mit den vordefinierten Werten "top". "midlle", "bottom" und "left", "right". Standard bei fehlendem Attribut "align" ist "bottom".
Vertikale Ausrichtung mit "top", "midlle" und "bottom" (Standard):
top Blume
midlle Blume
bottom Blume

Horizontale Ausrichtung mit "left" und "right":
left
Blume
right
Blume

 

 

 

Der relevante Teil des Quelltextes: 

Jetzt kommen Bilder ...
<img src="GIF-Bilder/FHM-Logo.gif" alt="Logo">
<img src="GIF-Bilder/FHM-Logo.gif" alt="Logo" width="100px">
<img src="GIF-Bilder/Blume.gif"    alt="Blume"      >
<img src="GIF-Bilder/Pf-Home.gif"  alt="Pfeil home" >
<img src="GIF-Bilder/Pf-Oben.gif"  alt="Pfeil oben" >
<img src="GIF-Bilder/Pf-Unten.gif" alt="Pfeil unten"><p>

Die folgenden Bilder zeigen die Wirkung des Attributs "align" mit den
vordefinierten Werten  "top". "midlle", "bottom" und "left", "right".
Standard bei fehlendem Attribut "align" ist "bottom".<P>


Vertikale Ausrichtung mit "top", "midlle" und "bottom" (Standard):<br>
top     <img src="GIF-Bilder/Blume.gif" alt="Blume" align="top"   ><br>
midlle  <img src="GIF-Bilder/Blume.gif" alt="Blume" align="midlle"><br>
bottom  <img src="GIF-Bilder/Blume.gif" alt="Blume" align="bottom"><p>

Horizontale Ausrichtung mit "left" und "right":<br>
left<br>    <img src="GIF-Bilder/Blume.gif" alt="Blume" align="left" > <br>
right<br>   <img src="GIF-Bilder/Blume.gif" alt="Blume" align="right"> <p>

Alle Bilder dieser Seite sind nicht transparent. Tranparente Bilder werden in einer eigenen Seite gezeigt.

Zurück zur Startseite