lekcja - Pozycjonowanie ilustracji względem tekstu

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na sposób ustalania pozycji rysunku względem tekstu.

<html>
<head>
<meta http-equiv="Content-Type" content=" text/html; charset=ISO-8859-2">
<title>Gimnazjum nr 3</title>
</head>
<body bgcolor="#ffff00" text="FFFFFF">

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML ustalającego różne ustawienia ilustracji względem linijki tekstu. Przeanalizuj dokładnie ten tekst i porównaj go z przykładowym dokumentem zapisanym zgodnie z niniejszym kodem.

<center>
<img src="kowboj.jpg">
<font size="3">Kowboj i </font><font size="7">Indianin</font>
<img src="indianin.jpg" alt="Indianin w ładnym wdzianku." align=texttop>
<font size="3">texttop</font><P>

Texttop: ilustracja wyrównywana jest do najwyższego tekstu w linii.

<img src="kowboj.jpg">
<font size="3">Kowboj i </font><font size="7">Indianin</font>
<img src="indianin.jpg" alt="Indianin w ładnym wdzianku." align=top>
<font size="3">top</font><P>

Top: ilustracja wyrównywana jest do najwyższego elementu w linii.

<img src="kowboj.jpg">
<font size="3">Kowboj i </font><font size="7">Indianin</font>
<img src="indianin.jpg" alt="Indianin w ładnym wdzianku." align=middle>
<font size="3">middle</font><P>

Middle: środek ilustracji wyrównywany jest do linii bazowej.

<img src="kowboj.jpg">
<font size="3">Kowboj i </font><font size="7">Indianin</font>
<img src="indianin.jpg" alt="Indianin w ładnym wdzianku." align=absmiddle>
<font size="3">absmiddle</font><P>

Absmiddle: środek ilustracji wyrównywany jest do środka najwyższego elementu w linii.

<img src="kowboj.jpg">
<font size="3">Kowboj i </font><font size="7">Indianin</font>
<img src="indianin.jpg" alt="Indianin w ładnym wdzianku." align=bottom>
<font size="3">bottom</font><P>

Bottom: dolna krawędź ilustracji wyrównywana jest do linii bazowej.

<img src="kowboj.jpg">
<font size="3">Kowboj i </font><font size="7">Indianin</font>
<img src="indianin.jpg" alt="Indianin w ładnym wdzianku." align=baseline>
<font size="3">baseline</font><P>

Baseline: tak jak bottom.

<img src="kowboj.jpg">
<font size="3">Kowboj i </font><font size="7">Indianin</font>
<img src="indianin.jpg" alt="Indianin w ładnym wdzianku." align=absbottom>
<font size="3">absbottom</font>

Absbottom: dolna krawędź ilustracji wyrównywana jest do najniższego elementu w linii.

</body>
</html>

Rady:

Nie jest możliwe jednoczesne wyrównywanie obrazu względem tekstu i otaczanie tegoż tekstem.