Bilder in HTML-Webseiten im WWW

Es geht um einen Internet-Auftritt mit Bildern.

Topologische und metrische Daten

Topologische Daten bestehen wesentlich aus Abhängigkeiten von Datenstrukturen,wie z.B. BREP-Daten.

Metrische Daten entsprechen mehr einer Menge von gleichartigen ( beziehunlosen ) Daten, wie z.B. Bitmaps ( Folge voneinander unabhängigen Bits ).

Es gibt z.B.

• GIF ( Graphics Interchange Format, Rastergrafiken ) komprimiert auf Farbpalette
• PNG ( Portable Network Graphics ) ermöglicht Rastergrafiken mit verlustfreier Kompression
• JPEG ( Joint Photographic Experts Group, JPEG File Interchange Format, Rastergrafiken ) komprimiert auf Auflösung
• TIFF ( Tagged Image File Format ) verlustlos ( keine Ebenen, Rastergrafiken ) mit Unterformate
• SVG ( Scalable Vector Graphics, W3c, XML-Code )
• WMF ( Windows Metafile, Binär ) und EPS ( Encapsulated PostScript, Binär ) erhalten Vektordaten

Browser und Dateiformate

Welche Dateiformate unterstützt der Browser? Siehe  Mime-Toolchen

Hier sind Übersichttabellen zu Dateiformaten der Grafik.
Siehe wikipedia-Listen zu Dateiformaten für Rastergrafiken ,
Siehe wikipedia-Listen zu Dateiformaten für 2D-Vektorgrafiken ,
Siehe wikipedia-Listen zu Dateiformaten für 3D-Vektorgrafiken

Beispiel: Bild als HTML-Tag width="100" height="45"

Wie kann ein Bild ( Quelle Wikipedia ) mit width="100" height="45" in eine HTML-Seite eingebunden werden?

Das Bild wird klein angezeigt ( width="100" height="45" ):

<img src="hyperlink.png" width="100" height="45"
 alt="Unterstrich bei Hyperlink ( Quelle Wikipedia )" />

Beispiel: Bild als HTML-Tag width="200" height="89"

Bild wird mit width="200" height="89" angezeigt:

 <img src="hyperlink.png" width="200" height="89"
 alt="Unterstrich bei Hyperlink ( Quelle Wikipedia )" />

Beispiel: Bild als HTML-Tag width="200" height="89"

Bild wird in normaler Größe ( und d.h. style="width:400px; height:178px" ) angezeigt:

 <img src="hyperlink.png" style="width:400px; height:178px"
 alt="Unterstrich bei Hyperlink ( Quelle Wikipedia )" />

Beispiel: Bild im neuen Browser a mit target="_blank"

Zeige das Online-Bild W3C-Timeline im neuen Browser an ( W3C-Bildquelle ). HTML-Code etwa:

<a target="_blank"
   href="my.png">
   Zeige Bild im neuen Browser
</a>

Beispiel: Bild in Inline-Frame Copyright beachten!

Das iframe-Tag kann als Target für ein Bild dienen. Das W3C-Timeline-Bild ( Online ) kommt von einer fremden Domain. Bitte das Copyright beachten! HTML-Code etwa:

<iframe src="my.png"
   style="border:none;width:97%;height:200px;">
</iframe>

Bildquelle W3C:

Beispiel: Bilder in Inline-Frame mit a-Tag schalten Sichtbar/Unsichtbar

Das iframe-Tag kann als Target für einen Weblink dienen. Bitte Copyright beachten! Das W3C-Timeline-Bild ( Online ) kommt von einer fremden Domain. Das W3C-Timeline-Bild kann im iframe dargestellt werden. Bitte das Copyright beachten! Code siehe Quelltext der Seite.
Bitte Klicken: W3C-Timeline anzeigen , Zentralprojektion anzeigen , Bild verbergen