Grafikstrukturierung in HTML

Bereich

Quellcode, Beschreibung und Parameter

Grafiken einbinden

<img src="/2014/URI" alt="Alternativtext">

Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben.
Für Alternativtext einen Kurztext notieren für den Fall, dass die Grafik nicht angezeigt werden kann.

Breite und
Höhe der Grafik

<img src="/2014/URI" alt="Alternativtext" width="Breite" height="Höhe">

Für Breite und Höhe eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 60% für Größe in Bezug auf Umgebung.

Rahmen
um Grafik

<img src="/2014/URI" alt="Alternativtext" border="Dicke">

Für Dicke eine Zahl wie z.B. 3 für die Rahmendicke in Pixeln notieren.

Namen
für Grafik

<img src="/2014/URI" alt="Alternativtext" name="Name">

Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).

Langbeschreibung
für Grafik

<img src="/2014/URI" alt="Alternativtext" longdesc="URI">

Für URI bei longdesc eine Web-Adresse oder ein Ziel mit oder ohne Pfad einer Datei (z.B. HTML) mit Beschreibungen zur Grafik angeben.

Grafiken
im Text
ausrichten

<img src="/2014/URI" alt="Alternativtext" align="Ausrichtung">

Für Ausrichtung einen der folgenden Werte notieren:
top = obenbündig mit Text davor oder danach,
middle = mittig zu Text davor oder danach,
bottom = untenbündig mit Text davor oder danach.

Text um Grafik
fließen lassen

<img src="/2014/URI" alt="Alternativtext"
   align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten">

Für Ausrichtung einen der folgenden Werte notieren:
left = Grafik links ausrichten (nachfolgende Inhalte fließen rechts vorbei),
right = Grafik rechts ausrichten (nachfolgende Inhalte fließen links vorbei),
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Grafik zur Umgebung links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Grafik zur Umgebung oben und unten zu bestimmen.

Verweis-sensitive
Grafik

<img src="/2014/URI" alt="Alternativtext" usemap="#Mapname">
<map name="Mapname">
<area shape="Typ" coords="Koordinaten" href="/2014/URI">
</map>

Bei Mapname beim usemap-Attribut des <img>-Tags und beim name-Attribut des <map>-Tags den gleichen Namen vergeben. Beim usemap-Attribut das Gatterzeichen # voranstellen.
Bei Typ einen der folgenden Werte notieren:
rect = viereckiger Bereich innerhalb der Grafik,
circle = Kreisbereich,
poly = vieleckiger Bereich (Polygon).
Bei Koordinaten bei rect so etwas angeben wie 10,20,90,100 (10 ist Anfang Pixel von links, 20 Anfang oben, 90 Ende links, 100 Ende unten),
bei Koordinaten bei circle so etwas angeben wie 100,150,50 (100 ist Kreismittelpunkt in Pixeln von links, 150 Kreismittelpunkt von oben, 50 der Kreisradius),
und bei Koordinaten bei poly so etwas angeben wie 10,20,40,30,300,200 (10 ist erste Ecke links in Pixeln, 20 erste Ecke oben, 40 zweite Ecke links, 30 zweite Ecke oben, 300 dritte Ecke links, 200 dritte Ecke oben). Usw. beliebig viele Ecken.
Bei URI beim href-Attribut das Verweisziel notieren, das mit dem verweissensitiven Bereich verknüpft sein soll.