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.


<br> -   Przejście kursorem do nowej linijki.

<img src="foto1.jpg" align=right>Jakiś tekst, który chcemy wstawić koło ilustracji ............................... ilustracja po prawej stronie, tekst po lewj 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.


Wyrównywanie tekstu


<p align=right> jakiś tekst ...................................... - tekst będzie wyrównany do prawej strony

<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"


Adres do ćwiczenia, które samodzielnie wykonasz

Tutaj można poćwiczyć

W oknie edytora możesz wprowadzić zmiany w tekœcie kodu HTML, a po naciœśnięciu przycisku "pokaż widok strony" zobaczysz efekt działania edytowanego kodu.