Grafiken und Text in HTML

Grafiken und Text in HTML

Beschriftung einer Grafik

In einigen Beispielen wurden bereits die Attribute align, hspace und vspace zur Textausrichtung bezüglich einer Grafik eingesetzt. Über das Attribut align legen Sie fest, wie ein Text, der sich neben einer Grafik befindet, dargestellt wird.

Die oben angegebenen Attribute sollten nach dem aktuellen HTML - Standard nicht mehr verwendet werden. Stattdessen sollten die betreffenden Eigenschaften über StyleSheets genutzt werden.

align="Ausrichtung"
Eine Grafik können Sie mithilfe des Attributs align (Ausrichtung) beschriften. Die möglichen Werte des Attributs sind:

top (oben)

middle (mittig)

bottom (unten)

Der Text wird jeweils rechts neben der Grafik dargestellt.

Beispiel:

 <img src="img/berge.jpg" align="top" width="160" height="120" border="0" alt="berge"> align=top <img src="img/berge.jpg" align="middle" width="160" height="120" border="0" alt="berge"> align=middle <img src="img/berge.jpg" align="bottom" width="160" height="120" border="0" alt="berge"> align=bottom 

berge align=top

berge align=middle

berge align=bottom

berge align=bottom Wird der Text so lang, dass er umgebrochen wird, so wird er unterhalb der Grafik weitergeführt. (Abhilfe dadurch, dass man Grafik und Text in eine blinde Tabelle setzt)

Abstand zwischen Grafik und Text

Dem Attribut align können Sie zwei weitere Werte zuweisen, die jedoch nicht zur Beschriftung dienen. Sie bestimmen, wie der Abstand zwischen der Grafik und dem Text gesetzt werden soll.

<img src="Quelle" hspace="Breite" space="Höhe">
Der Abstand einer Grafik zum Text wird in Pixeln angegeben. Dabei kennzeichnet das Attribut hspace den horizontalen (rechts, links) und das Attribut vspace den vertikalen Abstand (oben, unten).

<img src="Quelle" align="Ausrichtung">
Weiterhin ist die Angabe der Ausrichtung der Grafik und des Textes um die Grafik mit dem Attribut align möglich. Für das umfließen eines Textes um eine Grafik sind die Werte left (links) sowie right (rechts) zulässig.

Um ein Umfließen eines Textes zu beenden, wird eine Abwandlung des Tags   angewendet.

Der Tag   erzeugt einen Zeilenumbruch. durch die Angabe des Attributs clear mit dem Wert all (alles löschen) teilen Sie dem Browser mit, das der nachfolgende Text wieder unterhalb der Grafik fortgesetzt werden soll.

Dieses Attribut ist vor allen Dingen dann notwendig, wenn zwei nacheinander folgende Grafiken näher beschrieben werden. Ohne die Angabe von   würde der Text, der neben der nächsten Grafik stehen soll, möglicherweise noch neben der ersten Grafik stehen.

Beispiel:

<h3>Pseudo-Latein für Flaschenkenner</h3> Fortune plango vulnera stilantibus ocellis, quod sua michi munera subtrahit rebellis. <img src="img/flasche.jpg" height="100" width="55" align="right" vspace="15" hspace="20"> quicquid enim florui felix et beatus, nunc a summo corrui gloria privatus. Fortune rota volvitur descendo minoratus, alter in altum tollitur, nimis exaltatus rex sedet in vertice; caveat ruinam! Nam sub axe legimus hecubam redinam. <img src="img/flasche2.jpg" height="100" width="55" align="right" vspace="15" hspace="20"> Omnia Sol temperat purus et subtilis, novo mundo reserat faciem Aprilis; ad Amorem prosperat animus herilis et iocundis imperat deus puerilis. Rerum tanta novitas in solemni vere et veris auctoritas iubet nos gaudere, vias prebet solitas, et in tue vere fides. ohne   <h3> Pseudo-Latein für Flaschenkenner </h3> Fortune plango vulnera stilantibus ocellis, quod sua michi munera subtrahit rebellis. <img src="img/flasche.jpg" height="100" width="55" align="right" vspace="15" hspace="20"> quicquid enim florui felix et beatus, nunc a summo corrui gloria privatus. Fortune rota volvitur descendo minoratus, alter in altum tollitur, nimis exaltatus rex sedet in vertice; caveat ruinam! Nam sub axe legimus hecubam redinam. <img src="img/flasche2.jpg" height="100" width="55" align="right" vspace="15" hspace="20"> Omnia Sol temperat purus et subtilis, novo mundo reserat faciem Aprilis; ad Amorem prosperat animus herilis et iocundis imperat deus puerilis. Rerum tanta novitas in solemni vere et veris auctoritas iubet nos gaudere, vias prebet solitas, et in tue vere fides. mit 

Pseudo-Latein für Flaschenkenner

Fortune plango vulnera stilantibus ocellis, quod sua michi munera subtrahit rebellis. flasche quicquid enim florui felix et beatus, nunc a summo corrui gloria privatus. Fortune rota volvitur descendo minoratus, alter in altum tollitur, nimis exaltatus rex sedet in vertice; caveat ruinam! Nam sub axe legimus hecubam redinam. flasche Omnia Sol temperat purus et subtilis, novo mundo reserat faciem Aprilis; ad Amorem prosperat animus herilis et iocundis imperat deus puerilis. Rerum tanta novitas in solemni vere et veris auctoritas iubet nos gaudere, vias prebet solitas, et in tue vere fides.

ohne  

Pseudo-Latein für Flaschenkenner

Fortune plango vulnera stilantibus ocellis, quod sua michi munera subtrahit rebellis. flasche quicquid enim florui felix et beatus, nunc a summo corrui gloria privatus. Fortune rota volvitur descendo minoratus, alter in altum tollitur, nimis exaltatus rex sedet in vertice; caveat ruinam! Nam sub axe legimus hecubam redinam.
flasche2 Omnia Sol temperat purus et subtilis, novo mundo reserat faciem Aprilis; ad Amorem prosperat animus herilis et iocundis imperat deus puerilis. Rerum tanta novitas in solemni vere et veris auctoritas iubet nos gaudere, vias prebet solitas, et in tue vere fides.

mit  