<br />
</blockquote>
Rysunek 7.7.
Opcje wyrównywania
obrazów wyświetlone
w przegladarce Netscape
Obraz otoczony tekstem
Obraz umieszczony w linii tekstu wygląda dobrze tylko wtedy, gdy długość tekstu nie nia
przekracza tej jednej linii. Celowo nie wspom
łam do tej pory o tym, że wyrównywa-
nie obrazów w HTM 2.0 dot
L
yczyło tylko pojedynczej linii tekstu. Jeżeli wstawiłeś ob-
raz do dłuż
ent
szego fragm
u, składającego się z wielu linii, cały tekst (z wyjątkiem jed-
nej linii) przesuwał się pod lub nad obraz.
A co możesz zrobić, jeżeli chcesz, aby obok obrazu znalazło się więcej linii tekstu, tak by tekst, w pewnym sensie, otaczał obraz z trzech lub czterech stron? W HTML-u 2.0
było to niemożliwe. Wszystko, czego można było dokonać, pokazano na powyższym
168 Część 3. Grafika na WWW
rysunku, co w oczywisty sposób ograniczało możliwości projektantów stron.
Aby objeść ograniczenia HTML-a 2.0, firma Netscape wprowadziła dwie nowe warto-
ści atrybutu ALIGN, używanego razem ze znacznikiem <IMG>. Zostały one następnie włączone do standardu HTML 3.2 i dziś są obsługiwane przez większość przeglądarek, nie tylko przez Netscape.
ALIGN=LEFT i ALIGN=RIGHT
Pierwsza z tych wartości, ALIGN="LEFT", pozwala na ułożenie obrazu przy lewym marginesie strony, a ALIGN="RIGHT", jak można się domyślić, przy prawym. Ale to nie wszystko, bowiem użycie jednej z tych wartości powoduje także, że przestrzeń pomiędzy obrazem a przeciwnym marginesem może być wypełniona tekstem. Przykład takiego wzajemnego ułożenia tekstu i grafiki przedstawia rysunek 7.8.
<img src="tulip.gif" align="left" alt="Tulipany" />
<h1>Tajemniczy zabójca tulipanów</h1>
<p>Ktoś lub coś, zniszczyło tulipany w New South Haverford, w Wirginii. Mieszkańcy tego małego miasteczka są zaszokowani i
oburzeni tym bezsensownym aktem wandalizmu, który wydarzył się
w ich małym mieście.</p>
<p>New South Haverford jest znane z ekstrawaganckich pokazów tulipanów w czasie wiosny, dzięki czemu przyciąga całą rzeszę
turystów, zwabionych niezwykłym widokiem dwustu tysięcy
kwitnących w kwietniu i maju tulipanów.</p>
<p>Ostatnio jednak turyści tłumnie przybyli do New South
Haverford, w czasie gdy w ciągu trzech dni, wszystkie tulipany
oraz inne kwiaty w mieście zwiędły nagle w tajemniczych
okolicznościach, podczas gdy niemal wszyscy mieszkańcy spali.</p> Rysunek 7.8.
Tekst i obraz obok siebie
Po ułożonym w ten sposób obrazie możesz wstawiać dowolne elementy HTML-a (akapity, listy, nagłówki, a nawet kolejne obrazy) i możesz być pewien, że każdy z nich znajdzie się pomiędzy nim a przeciwnym marginesem strony (możesz także m u ieścić
obrazy przy obydwu marginesach, wtedy tekst znajdzie się pośrodku). Przeg ą l darka
Rozdział 7. Wykorzystywanie obrazów, koloru i tła 169
wypełnia całą przestrzeń aż do dolnej krawędzi obrazu, a następnie kontynuuje wyświetlanie tekstu pod nim.
Przerwa w otaczaniu obrazu tekstem
Może się zdarzyć, że zechcesz umieścić obok obrazka tylko kilka zdań, a nowy w ątek
tekstu
ąć
rozpocz pod spodem. Zwyczajne przełamanie linii nie zadziała w taki przy m
-
padku poprawnie, tekst zostanie wprawdzie wyświetlony od nowej linii, ale wciąż obok a nie pod obrazem. Nie pomoże także wstawienie nowego paragrafu, jego treść będzie się ciągle znajdowała obok rysunku. Aby przerwać funkcję otaczania obrazu przez tekst, musisz użyć znacznika podziału linii <BR> z atrybutem CLEAR. Powoduje on, że nowa linia rozpoczyna się dopiero pod obrazem a więc w miejscu, gdzie przy e l wym
marginesie nic już nie ma (margines jest wolny).
Atrybut CLEAR może przyjmować jedną z trzech wartości:
LEFT
Nowa linia rozpoczyna się od miejsca, gdzie wolny jest lewy margines (dot czy y
ob-
razów ułożonych po lewej stronie),
RIGHT
|