Kurs tworzenia stron internetowych w języku HTML







BODY {
BACKGROUND-COLOR: #ffffff
}











 






















































Wykorzystywanie
ilustracji



Wstawianie ilustracji
Do wstawiania ilustracji na stronę WWW służy znacznik
<IMG>.
<IMG SRC="lokalizacja grafiki">, gdzie
lokalizacja grafiki to ścieżka dostępu oraz nazwa pliku
znajdującego się na serwerze.
Bez dodatkowych atrybutów, obrazek jest ustawiany
przy lewym brzegu dokumentu i ma wielkość oryginału. Można użyć
wiele parametrów, które zmienią położenie, wielkość i inne cechy
obrazka.
Dzięki atrybutowi BORDER można ustalić
grubość obramowania.
<IMG SRC="obrazek.gif" BORDER=0>
Przykład:
<IMG SRC="obrazek.gif" BORDER="0">
<IMG SRC="obrazek.gif" BORDER="2">
UWAGI:
Do zlikwidowania cienkiego niebieskiego obramowania wokół
grafiki wykorzystywanej w połączeniach należy podać wartość
BORDER=0.
Kolor obramowania nie możne być zmieniony.

Tekst zastępczy
W przeglądarkach, które nie obsługują grafiki lub
użytkownik sam wyłączy taką funkcję, zamiast ilustracji mogą
wyświetlać się teksty zastępcze. Służy do tego atrybut ALT w
znaczniku IMG. W systemie Windows tekst zastępczy (ang. alternative
text) jest wyświetlany w postaci "dymku", po tym jak wskaźnik myszy
zatrzyma się na obrazkiem.
<IMG SRC="obrazek.jpeg" ALT="">,
pomiędzy cudzysłowami należy wpisać tekst, który ma być
wyświetlony
Przykład:
<IMG SRC="obrazek.jpeg" ALT="To jest obrazek
">

Miniatura obrazka
Czasem umieszczenie na stronie WWW ilustracji o
dużych rozmiarach może nie być korzystne dla użytkowników, którzy
nie mają szybkich łącz internetowych. Dlatego dobrym rozwiązaniem
jest stworzenie miniatury ilustracji, która będzie się szybko
wyświetlać, i dopisać do niej hiperłącze do dużego obrazka.
<A HREF="lokazlizacja obrazka"><IMG
SRC="lokalizacja miniatury"></A>




Otaczanie ilustracji tekstem
Można otaczać obrazek tekstem dzięki atrybutowi
ALIGN przybierającemu wartości left lub
right.
<IMG SRC="lokalizacja obrazka"
ALIGN=otaczanie>
ALIGN=right, aby dosunąć obrazek do prawej
krawędzi strony i otoczyć go tekstem z lewej.
<IMG SRC="obrazek.gif" ALIGN=right>To jest przykładowy tekst. To jest przykładowy
tekst. To jest przykładowy tekst.
ALIGN=left, aby dosunąć obrazek do lewej
krawędzi strony i otoczyć go tekstem z prawej
<IMG SRC="obrazek.gif" ALIGN=left>To jest przykładowy tekst. To jest przykładowy
tekst. To jest przykładowy tekst.

Zakończenie otaczania tekstem
Obrazek otoczony tekstem przesuwa cały następujący
po nim tekst, dopóki linia nie zostanie w specjalny sposób
zakończona znacznikiem BR z atrybutem CLEAR. Powoduje on przerwanie
otaczania obrazka z wybranej strony i wyświetlenie kolejnego tekstu
w następnej linii.
<BR CLEAR=left>, tekst nie będzie
wypisywany aż do końca ilustracji przesuniętej w lewo.
Przykład:To jest przykładowy tekst. To jest przykładowy
tekst. To jest przykładowy tekst.
<BR CLEAR=right>, tekst nie będzie
wypisywany aż do końca ilustracji przesuniętej w prawo.
Przykład:To jest przykładowy tekst. To jest przykładowy
tekst. To jest przykładowy tekst.
<BR CLEAR=all>, aby tekst nie był
wypisywany aż do końca ilustracji (przesunietych w lewo i w
prawo).
Przykład: To jest przykładowy tekst. To jest przykładowy
tekst. To jest przykładowy tekst. To jest przykładowy tekst. To jest
przykładowy tekst. To jest przykładowy tekst. To
jest przykładowy tekst. To jest przykładowy tekst.


Zwiększanie odstępu wokół
ilustracji
Zarówno przeglądarka Netscape jak i Internet
Explorer mają skłonność do zbyt bliskiego wyświetlania tekstu i
obrazków. Aby tego uniknąć należy użyć atrybutów HSAPCE i
VSPACE w znaczniku IMG:
<IMG SRC="lokalizacja obrazka" HSPACE=h
VSPACE=v>, gdzie h to szerokość odstępu po obu
stronach obrazka; a v  to szerokość odstępu nad i pod
obrazkiem (wyrażone w pikselach).
Przykład:
<IMG SRC="obrazek.gif">To jest przykładowy tekst.
<IMG SRC="obrazek.gif" HSPACE=10
VSPACE=20>To jest przykładowy tekst.
<IMG SRC="obrazek.gif" HSPACE=40
VSPACE=10>To jest przykładowy tekst.
UWAGI:
IE domyślnie zostawia 4 piksele odstępu po prawej stronie
obrazka
Atrybuty te nie muszą być stosowane razem.

Wielkość ilustracji
Po natrafieniu na wskaźnik IMG przeglądarka musi
ściągnąć ilustrację, aby ustalić jej wymiary i ilość miejsca, które
musi dla niej zarezerwować na stronie. Po określeniu wymiarów przez
autora strony przeglądarka będzie mogła poprawnie wypisać tekst już
w trakcie ściągania obrazka.
Określenie wielkości obrazka odbywa się
następująco:<IMG SRC="lokalizacja obrazka" WIDTH=w
HEIGHT=h>, gdzie w i h to nowe wymiary obrazka
(w pikselach).
Przykład:
<IMG SRC="obrazek.gif" ALT="To jest obrazek."
WIDTH="181" HEIGHT="219" BORDER="0">
Mając obrazek, który ma być umieszczony na stronie
WWW możemy w ten sposób zmienić jego wielkość, chociaż zmniejszanie
nie jest wskazane. Aby zachować proporcje obrazka najlepiej pomnożyć
prawdziwe wymiary przez tą samą liczbę.
Przykład:
<IMG SRC="obrazek.gif" WIDTH="100"
HEIGHT="219">
<IMG SRC="obrazek.gif" WIDTH="100"
HEIGHT="119">

Wyrównywanie obrazków
Wyrównywanie obrazka względem tekstu jest możliwe
dzięki atrybutowi ALIGN znacznika IMG. Pozwala on na własne
ustalenie pozycji ilustracji względem tekstu. Istnieje kilka
rodzajów wyrównań obrazka względem pojedynczej linii tekstu wewnątrz
akapitu.
<IMG SRC="lokalizacja obrazka"
ALIGN=wyrównianie>
ALIGN przybiera wartości:
Texttop - obrazek wyrównany do najwyższego
tekstu w linii
<IMG SRC="obrazek.gif" ALIGN=TEXTTOP>A to przykładowy tekst.
Top - obrazek wyrównany do najwyższego elementu
w linii
<IMG SRC="obrazek.gif" ALIGN=TOP>A to przykładowy tekst.
Middle - środek obrazka wyrównany do linii
bazowej
<IMG SRC="obrazek.gif" ALIGN=MIDDLE>A to przykładowy tekst.
Absmiddle - środek obrazka wyrównany do środka
najwyższego elementu w linii
<IMG SRC="obrazek.gif" ALIGN=ABSMIDDLE>A to przykładowy tekst.
Absbottom - dolna krawędź obrazka wyrównana
jest do najwyższego elementu w linii
<IMG SRC="obrazek.gif" ALIGN=ABSBOTTOM>A to przykładowy tekst.
Bottom lub baseline - dolna krawędź
obrazka wyrównana jest do linii bazowej
<IMG SRC="obrazek.gif" ALIGN=BOTTOM>A to przykładowy tekst.
UWAGI:
Obrazka nie można jednocześnie wyrównywać względem tekstu i
otaczać go tekstem.
IE traktuje texttop jak top, absmiddle jak middle, a absbottom
jak bottom.

Poziome linie
Powszechne jest stosowanie na stronach WWW
poziomych linii, które przyjęły się już we wszystkich
przeglądarkach. Do wstawiania poziomych linii służy znacznik
<HR>. Może on być uzupełniany kilkoma atrybutami:
SIZE=n, gdzie n to grubość linii (w
pikselach)
WIDTH=w, gdzie w to szerokość linii (w
pikselach lub %)
ALIGN=x, gdzie x oznacza sposób
umieszczenia linii na stronie; są do wyboru wartości: left (po
lewej), right (po prawej), center (na środku); (Atrybut ten brany
jest pod uwagę jeżeli linia jest szersza od strony).
NOSHADE - linia, która jest trójwymiarowym
prostokątem.
Przykład:
<HR SIZE=3 WIDTH=60% ALIGN=left NOSHADE>


<HR SIZE=7 WIDTH=90% ALIGN=right>


<HR SIZE=10 WIDTH=300 ALIGN=CENTER>


UWAGI:
Znacznik HR automatycznie kończy poprzednią linię, a za sobą
zaczyna nowy akapit.