Text neben Grafik darstellen mit HTML
Grafiken und der <align />-Tag
Eine Grafik innerhalb einer Textzeile einzufügen ist kein Problem, solange Sie nur eine einzige Zeile Text haben. Ein Aspekt von internen Bildern, den ich bis jetzt verschwiegen habe, ist, dass dies alles in HTML 2.0 nur mit einer einzelnen Textzeile funktioniert. Wenn Sie mehrere Textzeilen haben und eine Grafik in deren Mitte einfügen wollen, wird der Text um das Bild (mit Ausnahme einer einzelnen Zeile) ober- und unterhalb der Grafik erscheinen – siehe Abbildung.
Was ist nun aber, wenn Sie mehrere Textzeilen um ein Bild wickeln wollen, sodass der Text das Bild von allen Seiten umschließt? Mit HTML 2.0 können Sie das nicht tun. Sie sind auf eine einzelne Zeile Text auf einer der Seiten des Bildes beschränkt, was ihre Gestaltungsmöglichkeiten einschränkt.
Um diese Beschränkung von HTML 2.0 zu umgehen, definierten Browser zwei neue Werte für das align-Attribut der <img />-Kennung – left und right. Diese beiden Werte wurden in HTML 3.2 aufgenommen und werden inzwischen von vielen anderen Browsern unterstützt.
align="left" und align="right"
align="left" richtet ein Bild zum linken Seitenrand hin aus und align="right" zum rechten. Aber die Anwendung dieser Attribute verursacht ebenfalls, dass der der Grafik folgende Text im Raum auf der linken oder rechten Seite der Grafik dargestellt wird, je nach der gewünschten Ausrichtung. Abbildung zeigt eine Grafik mit etwas Text, der daneben ausgerichtet ist.
<img src="turn_right_128.png" alt="HTML-Lernen" align="left" />
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
<p>
Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim.
</p>
<p>
Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim nisl porta dictumst torquent scelerisque luctus, cursus montes vulputate ornare est sem.
</p>
Sie können beliebigen HTML-Text (Absätze, Überschriften, Listen, andere Grafiken) nach einem ausgerichteten Bild einfügen, wobei der Text in den Raum zwischen dem Bild und dem gegenüber liegenden Seitenrand hineingepackt wird (oder Sie können sogar Grafiken an beiden Seitenrändern haben und den Text in die Mitte setzen). Der Browser füllt den Raum mit Text, bis er das untere Ende der Grafik erreicht, und fährt dann fort, den Text unterhalb des Bildes einzufügen.