Otaczanie rysunku tekstem
Aby uzyskać efekt otaczania rysunku tekstem, wykorzystuje się atrybut ALIGN znacznika IMG nadajšc mu wartoć LEFT lub RIGHT. Ilustracja otoczona tekstem dodaje dokumentowi elegancji i estetycznego wyglądu.
Poniżej przedstawiony
jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę
na sposób zastosowania odpowiednich wartości atrybutu ALIGN
znacznika IMG.
<body bgcolor=blue text="FFFF00"> Wstawiamy tło jedno kolorowe i tekst koloru ffff00 Do tej pory wstawialiśmy napisy stosując znaczniki <font color=jakiś kolor size=od 1 do 7 face=nazwa rodzaju czcionki np Arial > teraz to zmienimy i poznamy style czcionki: Wprowadzimy polecenie SPAN- (jest to rozciąganie stylu) SPAN ma kilka parametrów między innymi STYLE jest to atrybut (parametr): rodzaju, koloru, wielkości czcionki. Wpisując kod źródłowy <span style="font-size: 150pt; font-family: Garamond; color: red" > Animals (1976)</span><br> Po tych znacznikach tekst
będzie wielkości 150pt rodzaj garamond, kolor czerwony, na końcu
zamykamy SPAN i przechodzimy do nowej linijki
Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML włączającego ilustrację do dokumentu w sposób umożliwiający otoczenie jej tekstem (ale tylko z jednej strony). <img src="foto1.jpg" align=left> Jakiś tekst, który chcemy wstawić koło ilustracji ............................... ilustracja po lewej stronie, tekst po prawej stronie ilustracji.
atrybutu VSPACE i HSPACE znacznika IMG, w celu odsunięcia tekstu od ilustracji. Do tego służą atrybuty VSPACE i HSPACE wprowadzające odstęp tekstu od rysunku odpowiednio od bocznych krawędzi obrazka (VSPACE) i górnej oraz dolnej (HSPACE). Wartości tych argumentów podaje się w pikselach. <img src="rys.gif" align=left hspace=70 vspace=30> Jakiś tekst, który chcemy wstawić koło ilustracji ............................... ilustracja będzie wstawiona po lewej stronie lewej, tekst po prawej stronie ilustracji 70 pikseli od górnej i dolnej krawędzi ilustracji oraz 30 pikseli od bocznej krawędzi.
<p align=left> jakiś tekst ...................................... - tekst będzie wyrównany do lewej strony <p align=center> jakiś tekst ...................................... - tekst będzie wyśrodkowany <P align=justify> jakiś tekst ...................................... - tekst będzie wyrównany do prawej i lewej strony
NP. <img border="5"
src="bell1.jpg" align="left" vspace="20" hspace="20" width=600
height=450> <span style="font-size: 30pt; font-family: Garamond; color: ffffff"> <p align=justify> tekst wstawiony </span> </p> Kody powyższe
spowodują wstawienie zdjęcia o nazwie bell1.jpg w ramce o grubości
5px po lewej stronie, zdjęcie będzie miało wymiar 600x450 pikseli,
po prawej stronie zdjęcia będzie wstawiony tekst rozmiaru 30, koloru
białego rodzaju czcionki Garamond i tekst będzie wyrównany do prawej
i lewej strony.
Poniżej możesz poćwiczyć swoje zdobyte umiejętności zamieniając tekst w okienku białym - po zmianie naciskając "pokaż widok strony" |
Tutaj można poćwiczyć
W oknie edytora możesz wprowadzić zmiany w tekcie kodu HTML, a po naciśnięciu przycisku "pokaż widok strony" zobaczysz efekt działania edytowanego kodu.