HTML I XHTML. Przewodnik Encyklopedyczny

IDZ DO
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
HTML i XHTML
przewodnik encyklopedyczny
Autorzy: Chuck Musciano, Bill Kennedy
Tumaczenie: Adam Podstawczyski
ISBN: 83-7197-440-X
Tytu oryginau: HTML and XHTML. The definitive
guide. Fourth Edition.
Format: B5, stron: 700
Jzyk HTML zmienia si tak szybko, e trudno nady za coraz to nowszymi
technologiami, ktre si z nim wi. Skd wiedzie, czego i jak naley uywa? HTML
i XHTML. Przewodnik encyklopedyczny pomaga odpowiedzie na te pytania. Ksika ta
sposb najbardziej caociowy ze wszystkich dostpnych w sprzeday traktuje o jzyku
HTML. Opisuje najwiesze standardy, HTML 4.01 i XHTML 1.0, a take wszystkie funkcje
obsugiwane przez popularne przegldarki.
Poznawanie HTML-a lub XHTML-a to jak poznawanie kadego innego jzyka. Wikszo
uczcych si zaczyna od przyswojenia przykadw. Czerpanie z dowiadczenia innych osb
to naturalny, prosty i atrakcyjny sposb nauki. Ale czerpanie wiedzy z czyich rozwiza
ma te swoje ograniczenia. Przecie przykad moe by dobry albo zy. Lepiej przyswaja
sobie HTML trzymajc w rku caociowy materia referencyjny, obejmujcy skadni,
semantyk i wariacje jzyka oraz pomagajcy w rozrnieniu co jest zym, a co dobrym
przykadem uycia HTML-a.
Ksika pomaga Czytelnikowi na oba sposoby: autorzy szczegowo opisuj kady element
obu standardw i wyjaniaj zasad jego dziaania oraz sposb interakcji z innymi
elementami. Przedstawiono wiele praktycznych wskazwek pomocnych przy tworzeniu
zarwno prostych podrcznikw online, jak i zoonych prezentacji marketingowych. Setki
przykadw uatwiaj Czytelnikowi stworzy wydajn stron WWW, a take opanowa
bardziej zaawansowane mechanizmy publikacji w Sieci. Ksika opisuje rwnie, jak
przestawi si z HTML-a na XHTML.
W ksice opisano nastpujce zagadnienia:
Arkusze stylw i ich wpyw na wygld dokumentu
Tabele (od prostych do zoonych)
Ramki pomagajce w prezentowaniu grup dokumentw
Sposb projektowania i tworzenia interaktywnych formularzy i dokumentw
dynamicznych
Sposb umieszczania na stronach grafiki, plikw dwikowych, filmw, apletw
i programw JavaScript
Sposb tworzenia dokumentw dobrze prezentujcych si na rnych
przegldarkach
XHTML -- jzyk publikacji elektronicznych przyszoci
STOP -- Najnoszwe informacje! Netscape Navigator 6.0! Internet Explorer 5.0! HTML 4.01!
XML i XHTML! Arkusze stylw! Przestaj by tajemnic! STOP Tylko z tym przewodnikiem
odnajdziesz waciw drog -- STOP.
"
"
"
"
"
"
"

1.1. Internet, intranety i ekstranety...........................................................................................17
1.2. Internetowy argon............................................................................................................20
1.3. Czym jest HTML?.............................................................................................................23
1.4. Czym jest XHTML?..........................................................................................................24
1.5. Czym nie s HTML i XHTML?........................................................................................24
1.6. Niestandardowe rozszerzenia............................................................................................25
1.7. Narzdzia dla projektanta stron WWW ............................................................................27

2.1. Narzdzia ..........................................................................................................................31
2.2. Pierwszy dokument HTML...............................................................................................32
2.3. Zagniedone znaczniki ....................................................................................................33
2.4. Szkielet dokumentu HTML...............................................................................................34
2.5. Sedno dokumentu HTML lub XHTML ............................................................................35
2.6. Tekst..................................................................................................................................36
2.7. Odsyacze ..........................................................................................................................40
2.8. Elementy graficzne co specjalnego ............................................................................43
2.9. Listy, dokumenty z moliwoci przeszukiwania, formularze .........................................45
2.10. Tabele..............................................................................................................................47
2.11. Ramki ..............................................................................................................................48
2.12. Arkusze stylw i JavaScript............................................................................................49
2.13. Co dalej? .........................................................................................................................50

!" #"#
$
3.1. Zwodniczy wygld............................................................................................................51
3.2. Struktura dokumentu HTML.............................................................................................52
3.3. Znaczniki i atrybuty ..........................................................................................................53
3.4. Poprawnie uformowane dokumenty a XHTML................................................................56
3.5. Zawarto dokumentu .......................................................................................................57
3.6. Elementy dokumentu HTML ............................................................................................59
3.7. Nagwek dokumentu .......................................................................................................62
3.8. Tre dokumentu ...............................................................................................................65
3.9. Znaczniki redaktorskie......................................................................................................67
3.10. Znacznik <bdo> ..............................................................................................................70
%
& '(" )'

4.1. Dziay i akapity .................................................................................................................73
4.2. Nagwki ...........................................................................................................................80
4.3. Zmiana wygldu tekstu .....................................................................................................86
4.4. Znaczniki stylw opartych na zawartoci .........................................................................87
4.5. Znaczniki stylw fizycznych.............................................................................................94
4.6. Rozszerzona obsuga fontw w HTML-u.........................................................................98
4.7. Precyzyjne sterowanie odstpami i ukadem ..................................................................104
4.8. Cytaty blokowe ...............................................................................................................117
4.9. Adresy .............................................................................................................................120
4.10. Specjalne kodowanie znakw .......................................................................................122
$
" * + #
$
5.1. Linie poziome..................................................................................................................125
5.2. Wstawianie elementw graficznych ...............................................................................132
5.3. Kolory dokumentu i grafika w tle...................................................................................155
5.4. Dwik w tle ...................................................................................................................162
5.5. Animacja tekstu...............................................................................................................164
5.6. Inna zawarto multimedialna.........................................................................................167
,
- ' .& (/'"0

6.1. Podstawy hipertekstu ......................................................................................................171
6.2. Odwoywanie si do dokumentw: adres URL...............................................................172
6.3. Tworzenie odsyaczy.......................................................................................................187
6.4. Wydajne odsyacze..........................................................................................................195

6.5. Obrazki zawierajce mapy odsyaczy .............................................................................199

6.6. Tworzenie dokumentw z moliwoci przeszukiwania................................................209
6.7. Relacje ............................................................................................................................212
6.8. Wspomaganie automatyzacji ..........................................................................................217

+ "

7.1. Listy nieuporzdkowane .................................................................................................221
7.2. Listy uporzdkowane ......................................................................................................224
7.3. Znacznik <li> ..................................................................................................................227
7.4. Zagniedanie list ...........................................................................................................230
7.5. Listy definicji ..................................................................................................................232
7.6. Poprawne korzystanie z list.............................................................................................236
7.7. Listy typu katalog ........................................................................................................237
7.8. Listy typu menu...........................................................................................................238
1
2 #3
%
8.1. Elementy stylw..............................................................................................................242
8.2. Skadnia arkuszy stylw .................................................................................................250
8.3. Klasy stylw....................................................................................................................255
8.4. Waciwoci ....................................................................................................................260
8.5. Style bezznacznikowe: znacznik <span> ....................................................................288
8.6. Stosowanie stylw w dokumentach ................................................................................289
4
5#
4
9.1. Formularze podstawy.................................................................................................293
9.2. Znacznik <form>.............................................................................................................294
9.3. Przykad prostego formularza .........................................................................................301
9.4. Pobieranie danych poprzez e-mail ..................................................................................302
9.5. Znacznik <input> ............................................................................................................304
9.6. Znacznik <button> ..........................................................................................................315
9.7. Obszary tekstu wielowierszowego..................................................................................317
9.8. Elementy umoliwiajce wybr......................................................................................319
9.9. Oglne atrybuty elementw formularzy .........................................................................323
9.10. Oznaczanie i grupowanie elementw formularza.........................................................327
9.11. Efektywne formularze...................................................................................................331
9.12. Programowanie formularzy...........................................................................................334

6

%
10.1. Standardowy model tabeli.............................................................................................341
10.2. Znaczniki tworzce tabel.............................................................................................343
10.3. Najnowsze znaczniki zwizane z tabelami ...................................................................359
10.4. Wicej ni zwyke tabele ..............................................................................................370

11.1. Ramki charakterystyka.............................................................................................371
11.2. Znaczniki opisujce ramki ............................................................................................372
11.3. Ukad ramkowy.............................................................................................................373
11.4. Zawarto ramek ...........................................................................................................379
11.5. Znacznik <noframes>....................................................................................................382
11.6. Ramki zagniedone .....................................................................................................383
11.7. Ramki nazwane lub okna docelowe..............................................................................385

7 )8" "
4
12.1. Aplety i obiekty.............................................................................................................391
12.2. Zawarto zagniedona ...............................................................................................394
12.3. JavaScript......................................................................................................................409
12.4. Arkusze stylw JavaScript............................................................................................417

7 )8" '"
%$
13.1. Dokumenty dynamiczne przegld............................................................................425
13.2. Dokumenty pobierane przez klienta..............................................................................426
13.3. Dokumenty wypychane przez serwer ...........................................................................430
%
" 9' &
% $
14.1. Pusta przestrze.............................................................................................................436
14.2. Ukad wielokolumnowy................................................................................................440
14.3. Warstwy ........................................................................................................................445
$

%$
15.1. Jzyki i metajzyki........................................................................................................458
15.2. Dokumenty i definicje DTD..........................................................................................460
15.3. Zrozumie definicje XML DTD ...................................................................................461
15.4. Gramatyka elementw ..................................................................................................465

15.5. Atrybuty elementw......................................................................................................469

15.6. Bloki warunkowe ..........................................................................................................471
15.7. Tworzenie definicji XML DTD ....................................................................................472
15.8. Korzystanie z XML-a....................................................................................................473
,

%
16.1. Dlaczego XHTML?.......................................................................................................477
16.2. Tworzenie dokumentw XHTML.................................................................................479
16.3. HTML kontra XHTML .................................................................................................482
16.4. Czy korzysta z XHTML-a?.........................................................................................486

.2#' #' 0
%4
17.1. Porada dnia....................................................................................................................491
17.2. Drobiazg czy naduycie? ..............................................................................................493
17.3. Specjalne wypunktowanie.............................................................................................493
17.4. Sztuczki z tabelami .......................................................................................................494
17.5. Przezroczyste obrazki....................................................................................................501
17.6. Triki z oknami i ramkami..............................................................................................503

: !; (/
$64
Konwencje gramatyczne ........................................................................................................509
Gramatyka..............................................................................................................................511
: <7" '" =
$
Podstawowe atrybuty .............................................................................................................521
Spis znacznikw i atrybutw HTML .....................................................................................522
: > )' )' #3
$$4
: ::+ " '( ::%
6
$,$
: ?:+ " '( ::
6
$4
: 5& "'(
$4$

: ;9 )' 3
,6
Wartoci kolorw...................................................................................................................601
Nazwy kolorw......................................................................................................................601
Standardowa paleta kolorw..................................................................................................603

,6$

Tekst stanowi najczciej wikszo zawartoci dokumentu. Czyste informacje tekstowe warto
jednak czasem uatrakcyjni za pomoc linii poziomych, obrazkw lub innych elementw graficznych. Takie wstawki nie musz peni roli tylko dekoracyjnej. Oywiaj dokument i umoliwiaj przekazanie informacji innego typu, czsto niedostpnej na innych nonikach (np. w druku).
W niniejszym rozdziale dokadnie opisano sposb wstawiania do dokumentw elementw multimedialnych, a take kiedy warto je stosowa, a kiedy ich unika.
Cz Czytelnikw by moe zechce take zerkn teraz do rozdziau 12., Zawarto wykonywalna.
Opisane tam zostay znaczniki oglne: zdefiniowany w HTML 4 i XHTML <object> oraz obsugiwany przez Netscape <embed>. Umoliwiaj one wstawianie do dokumentu dowolnej zawartoci i typw danych, w tym multimediw.

Linie poziome (ang. horizontal rules) pozwalaj na wizualne, przejrzyste rozdzielenie czci dokumentu. Za ich pomoc mona w prosty sposb wydzieli niewielk porcj zawartoci, odgraniczy nagwek i stopk, czy dodatkowo podkreli nagwki czci.

Znacznik <hr> informuje przegldark, e w danym miejscu ma zosta wywietlona linia pozioma. Podobnie jak znacznik <br>, <hr> powoduje przeamanie wiersza, ale dodatkowo wymusza
jeszcze domylne wyrwnanie nastpnego akapitu (do lewej strony). Przegldarka umieszcza lini
bezporednio pod biecym wierszem; normalny tok tekstu przywracany jest pod lini.
Sposb wywietlania linii poziomej zaley od przegldarki. Zazwyczaj linia rysowana jest na caej
szerokoci dokumentu. Przegldarki graficzne mog ozdabia lini efektami specjalnymi linia wycinita lub wyobiona. Przegldarki tekstowe wykorzystuj w tym miejscu najczciej sekwencj cznikw lub znakw podkrelenia.
Ani nad, ani pod lini nie jest wstawiany aden dodatkowy odstp. Jeli chcemy taki odstp uzyska, musimy jawnie umieci lini w znacznikach akapitu. Na przykad, spjrzmy jak wstawiane
s odstpy w poniszym kodzie rdowym oraz jak wygldaj one na rysunku 5.1.

Funkcja:
Przerywa cigo tekstu i wstawia poziom lini
Atrybuty:
ALIGN
CLASS
COLOR
ID
NOSHADE
ONCLICK
ONDBLCLICK
ONKEYDOWN
ONKEYPRESS
ONKEYUP
ONMOUSEDOWN
ONMOUSEMOVE
ONMOUSEOUT
ONMOUSEOVER
ONMOUSEUP
LANG
DIR
SIZE
STYLE
TITLE
WIDTH
Znacznik zamykajcy:
w HTML-u brak, w XHTML-u </hr> lub <hr ... />
Zawiera:
Nic
Stosowany wewntrz:
body_content
Niniejszy tekst znajduje si bezporednio ponad lini.
<hr>
A ten bezporednio pod ni.
<p>
Podczas gdy midzy tym tekstem a nastpn lini zachowano pewien odstp.
<p>
<hr>
<p>
Odstp jest te po linii.
Znacznik akapitu po znaczniku linii jest konieczny, jeli chcemy, aby tekst pod lini by wyrwnany w jakikolwiek inny sposb ni wyrwnanie domylne (do lewej).

!

Zazwyczaj przegldarki wywietlaj linie poziome o gruboci jednego lub dwch pikseli1, trjwymiarowe i wyobione jakby wcinite w stron. Lini mona pogrubi za pomoc atrybutu size. Wymagana warto atrybutu to grubo w pikselach. Spjrzmy na poniszy przykad
i rysunek 5.2.
<p>
Oto typowy tekst dokumentu, po ktrym zobaczymy lini wywietlan
przez IE jako kresk o gruboci 2 pikseli.
<hr>
Nastpne trzy linie bd miay grubo odpowiednio 12, 36 i 72 pikseli.
<hr size=12>
<hr size=36>
<hr size=72>

(
*+,- . /012/

Nie musi nam si podoba linia rysowana w trzech wymiarach. Po dodaniu atrybutu noshade
uzyskana linia bdzie dwuwymiarowa. W HTML-u atrybut ten nie wymaga podania adnej wartoci, w XHTML-u uyjemy noshade="noshade". Porwnajmy normaln lini 3D z t na rysunku 5.3 (specjalnie pogrubion tak, aby rnica bya bardziej ewidentna):
<hr size=32>
<p>
<hr size=32 noshade>
Standardy HTML 4 i XHTML nie zalecaj korzystania z atrybutu noshade, ten sam efekt mona
uzyska za pomoc stylw.
1
Piksel to jeden z wielu maych punktw skadajcych si na wywietlany obraz komputerowy. Ekrany maj
rne przektne, ale zazwyczaj jeden piksel rwna si jednemu punktowi na monitorze o rozdzielczoci
75 dpi (punktw na cal). Punkt to jednostka miary wykorzystywana w drukowaniu i rwna ok. 1/72 cala
(dokadnie w calu jest 72,27 punkta). Typowy krj czcionki wykorzystywany w popularnych
przegldarkach ma wysoko 12 punktw czyli na jeden cal przypada sze linii tekstu.
!"#$%&"#$%
'

()

3
%45.

Domylnie linia rysowana jest na caej szerokoci okna przegldarki. Mona to zmieni za pomoc
atrybutu width umoliwia on tworzenie linii albo o bezwzgldnej szerokoci w pikselach, albo
zajmujcych okrelon szeroko procentow otaczajcego tekstu. Wikszo przegldarek automatycznie wyrodkowuje linie, t cech mona zmieni za pomoc atrybutu align (podpunkt 5.1.1.4).
Poniej przedstawiono kilka przykadw uycia parametru width przy tworzeniu linii (rysunek 5.4):
Ponisze linie maj szeroko 40 i 320 pikseli,
bez wzgldu na szeroko samego okna przegldarki:
<hr width=40>
<hr width=320>
Natomiast te linie bd zawsze zajmoway 10 i 75
procent szerokoci okna, bez wzgldu na jego
rozmiary:
<hr width="10%">
<hr width="75%">

6
%7048010
Zauwamy rwnie, e warto wzgldna (procentowa) w atrybucie width zostaa umieszczona

w cudzysowach. Tak naprawd w standardowym HTML-u nie s one absolutnie wymagane 2, ale
poniewa symbol procentu zazwyczaj suy do oznaczania symbolu zakodowanego, pominicie
cudzysoww moe spowodowa niepoprawne wywietlenie dokumentu.
2
W XHTML-u wszystkie wartoci atrybutw umieszcza si w cudzysowach.
"

W wikszoci przypadkw nie powinno si okrela bezwzgldnej szerokoci linii. Okno przegldarki moe mie rne wymiary i to, co u jednego uytkownika bdzie krtk kreseczk, u innego
moe si okaza nieproporcjonalnie dug lini. Dlatego zaleca si stosowanie wartoci procentowych po zmianie rozmiaru okna przegldarki linie zachowaj odpowiedni dugo wzgldn.
Standardy HTML 4 oraz XHTML nie zalecaj ju stosowania atrybutu width ten sam efekt
mona uzyska za pomoc stylw.

Atrybut align w znaczniku <hr> moe przybiera trzy rne wartoci: left, center lub right.
Te linie, ktrych szeroko jest mniejsza ni otaczajcy tekst, zostan umieszczone w odpowiednim miejscu wzgldem marginesw okna. Domylne pooenie to rodek, czyli center.
Za pomoc rnie wyrwnanych linii mona w ciekawy sposb rozdziela poszczeglne czci
dokumentu. Na przykad, w poniszym fragmencie linia o 35-procentowej szerokoci wywietlana
jest kolejno po prawej stronie, porodku i po lewej (rysunek 5.5):
<hr width="35%" align=right>
<h3>Zalecenia odnonie pakowania owocw</h3>
...
<hr width="35%" align=center>
<h3>Transport kumkwatw</h3>
...
<hr width="35%" align=left>
<h3>Przetwarzanie soku</h3>
...

2. .4 :4;41
Standardy HTML 4 oraz XHTML nie zalecaj ju stosowania atrybutu align ten sam efekt
mona uzyska za pomoc stylw.

Atrybut color jest obsugiwany tylko przez przegldark Internet Explorer i umoliwia zmian
koloru linii. Warto tego atrybutu to albo nazwa koloru, albo zbir trzech cyfr szesnastkowych
opisujcych jego warto. Pen list nazw i wartoci kolorw znajdziemy w dodatku G.
!"#$%&"#$%
'

(9

Domylnie linia jest tego samego koloru, co to dokumentu i ma wyobione krawdzie (nieco
ciemniejsze i janiejsze od ta). Po okreleniu wasnego koloru, czy to poprzez atrybut color, czy
przez style, efekt trjwymiarowoci ulega zniweczeniu.

!
Atrybuty opisujce wygld linii mona czy, a ich kolejno nie ma znaczenia. Na przykad, eby uzyska duy prostokt, czymy atrybuty size i width (rysunek 5.6):
<hr size=32 width=50% align=center>

<
= 14 >:? 0/@A B
Zreszt czenie niektrych atrybutw w przypadku linii jest wymagane na przykad, sam atrybut align w zasadzie nie ma adnego znaczenia, bo przecie domylnie linia rozciga si na caej
szerokoci okna.
"
##$###
W wielu znacznikach opisujcych zawarto obsugiwany jest pewien zestaw wsplnych atrybutw. Pozwalaj one na identyfikacj (title) oraz oznaczenie (id) zawartoci znacznika w celu
pniejszego odwoania si do danego elementu lub uproszczenia automatycznego przetwarzania.
Inne umoliwiaj zmian wygldu elementu (class, style) oraz okrelenie jzyka i kierunku
wywietlania tekstu (lang i dir). Oczywicie trudno powiedzie, w jaki sposb te dwa ostatnie
mog wpyn na wywietlanie linii poziomej, tym niemniej stanowi one standardowe atrybuty
tego znacznika. [atrybut dir, 3.6.1.1] [atrybut lang, 3.6.1.2] [atrybut id, 4.1.1.4] [atrybut
title, 4.1.1.5] [atrybut style, 8.1.1] [atrybut class, 8.3]
Ponadto istniej jeszcze atrybuty opisujce reakcj na rne zdarzenia zwizane z danym elementem i wymagajce pewnych zabiegw programistycznych (atrybuty on). [procedury obsugi
zdarze JavaScript, 12.3.3]

Linie poziome bardzo upraszczaj nawigacj w obrbie dokumentu. eby jednak ich obecno
bya uzasadniona, najpierw trzeba okreli, ile poziomw nagwkw znajduje si w dokumencie
oraz ile miejsca zostao przewidziane na kad cz. Dopiero wtedy mona zdecydowa, w ktrych nagwkach uycie linii poziomej bdzie uzasadnione.
Liniami mona rwnie oddziela informacje organizacyjne dokumentu np. spis treci, indeks, bibliografi czy spis rysunkw.
#

Dowiadczeni autorzy wykorzystuj rwnie linie poziome do oznaczania pocztku i koca formularza. Jest to szczeglnie przydatne w dugich formularzach, wymagajcych przewijania okna
przegldarki. Konsekwentne oznaczanie pocztku i koca formularza upraszcza poruszanie si po
nim i gwarantuje, e uytkownik nie przeoczy tej czci, ktra znajduje si akurat poza polem
widzenia przegldarki.

!
Przy tworzeniu caych zbiorw dokumentw bardzo istotne jest, aby zachowa spjny i konsekwentny ukad stron. Dotyczy to rwnie obecnoci standardowego nagwka i stopki na kadej z nich.
Zazwyczaj w nagwku znajduj si narzdzia nawigacyjne umoliwiajce proste przejcie do czci
wewntrznych danego dokumentu oraz do innych dokumentw. W stopce znajduj si informacje
o autorze i dokumencie oraz np. adres umoliwiajcy wysanie komentarza do opiekuna strony.
Linie pozwalaj odgraniczy nagwek i stopk od reszty dokumentu. Spjrzmy na poniszy kod
oraz sposb jego wywietlenia (rysunek 5.7):
Podrcznik hodowcw kumkwatw - sezon hodowlany
<hr>
<h1>Sezon hodowlany</h1>
Sezon hodowlany szlachetnego owocu wystpuje w Stanach
Zjednoczonych w rnym czasie, zalenie od pooenia
geograficznego. Zostao to przedstawione na poniszej mapie:
<p>
<img src="mapa.jpg">
<p>
<hr>
<i>Dane opublikowane przez
<a href="komentarze.html">Stowarzyszenie Mionikw Kumkwatw</a></i>

)
C0 074 ..:
!"#$%&"#$%
'

Jedn z najatrakcyjniejszych cech standardw HTML i XHTML jest moliwo urozmaicenia dokumentu tekstowego elementami graficznymi. Elementy takie mog zosta albo wstawione bezporednio do dokumentu, albo opisane odsyaczami i udostpnione do oddzielnego pobrania, mog
rwnie stanowi to dokumentu. Rozsdne korzystanie z grafiki animowanych ikon, obrazkw, ilustracji, rysunkw itd., zwiksza atrakcyjno dokumentu, przyciga uwag czytelnika
i przyczynia si do profesjonalnego wygldu. Rysunek mona rwnie przygotowa tak, e bdzie stanowi map odsyaczy. Jednak nadmiar grafiki moe spowodowa baagan na stronie,
utrudni wyszukiwanie informacji oraz wyduy czas jej adowania.
"

Ani HTML, ani XHTML nie definiuj oficjalnego formatu plikw graficznych. Jednak popularne przegldarki obsuguj tylko pewn grup takich formatw przede wszystkim GIF i JPEG
(ich opisy znajduj si poniej). Przegldanie wikszoci innych formatw multimedialnych wymaga zastosowania specjalnego oprogramowania, instalowanego dodatkowo. Nic wic dziwnego,
e GIF i JPEG to de facto standardowe pliki graficzne sieci WWW.
Oba te formaty byy szeroko stosowane jeszcze zanim pojawia si usuga WWW, a wic istnieje
caa gama programw pozwalajcych na przygotowanie grafiki w tej postaci. Kady z tych formatw ma swoje zalety i wady, posiadaj one take pewne cechy wykorzystywane przez niektre
przegldarki w sposb specjalny.
%&'
Graphics Interchange Format (GIF) to format pierwotnie opracowany w celu przesyania obiektw
graficznych w sieci CompuServe. Pewne cechy tego formatu zadecydoway o jego popularnoci
wrd autorw stron HTML i XHTML. Algorytm kodowania GIF jest niezaleny od platformy,
a wic oprogramowanie dekodujce (wbudowane w wikszo przegldarek) pozwala na wywietlenie np. pliku stworzonego na macintoshu, czy w komputerze PC pod kontrol systemu Windows.
Druga istotna cecha to specjalna technologia kompresji, zapewniajca znaczce zmniejszenie rozmiaru pliku graficznego i tym samym szybsze przesyanie w sieci. Kompresja GIF jest bezstratna, tzn. dane oryginalnego obrazu nie s zmieniane czy gubione; po dekompresji obraz wyglda tak, jak pierwowzr. Do tego dochodzi jeszcze atwo animacji obrazw GIF.
Pliki GIF maj niezmiennie rozszerzenie .gif (lub .GIF), ale tak naprawd istniej dwie wersje tego formatu: oryginalny GIF87 oraz rozszerzony GIF89a, bogatszy o nowe moliwoci, czsto wykorzystywane przez autorw stron WWW: przezroczyste ta, zachowywanie z przeplotem, animacja (patrz podpunkt 5.2.1.2). Wspczesne przegldarki obsuguj obie wersje formatu. W obu
tych wersjach zastosowano taki sam typ kodowania: 8-bitowe wartoci odpowiadajce poszczeglnym pikselom odwzorowywane s na palet kolorw, zawierajc maksymalnie 256 kolorw
dla jednego pliku. Wikszo obrazkw GIF zbudowana jest z nawet mniejszej liczby kolorw,
istniej te narzdzia do zmniejszania palety nawet w bogatych w barwy grafikach. Im prostszy
obrazek GIF, tym mniejsza wystarczy mu paleta kolorw i tym wiksza kompresja (a wic szybsze adowanie).
#

! " #" $%$&

Jednake, wanie z powodu ograniczonej liczby kolorw, format GIF nie nadaje si do wszystkich
zastosowa. Szczeglnie dotyczy to fotografii (patrz opis formatu JPEG, podpunkt 5.2.1.3). GIF-y
wietnie spisuj si natomiast w ikonkach, obrazkach o niewielkiej liczbie kolorw i rysunkach.
Poniewa wikszo przegldarek graficznych obsuguje format GIF bez adnych dodatkowych
zabiegw, obecnie jest to najpopularniejszy format graficzny sieci WWW. Elementy GIF mona
docza bezporednio do dokumentu, jak i odwoywa si do nich za porednictwem odsyaczy.
W razie wtpliwoci odnonie tego, jaki format graficzny wybra, wybierzmy GIF. W wikszoci
sytuacji bdzie to wybr trafny.
( )#) *+,-

Format GIF umoliwia uzyskanie trzech efektw specjalnych: przeplotu, przezroczystoci oraz
animacji. Dziki przeplotowi grafika adowana na stronie WWW nie jest wywietlana po kawaku
od gry w d, ale sprawia wraenie stopniowej materializacji. Zazwyczaj obrazek zakodowany
w formacie GIF to sekwencja danych o pikselach, pogrupowanych w rzdy, w kolejnoci od gry
do dou. Typowy element w formacie GIF jest wywietlany od gry i przypomina zsuwanie podcignitych aluzji. Obrazek z przeplotem pojawia si od razu cay i jest stopniowo uzupeniany
przypomina obracanie ju zsunitych aluzji. W GIF-ie z przeplotem wywietlany jest najpierw co czwarty rzd pikseli. Najpierw grafika jest wic rozmyta (ale obraz wida czterokrotnie
szybciej ni zwykle), a potem coraz ostrzejsza. Ten rozmyty obrazek pozwala ju dobrze zorientowa si odnonie zawartoci pliku graficznego i tym samym upraszcza uytkownikom surfowanie.
Wszystkie przegldarki graficzne potrafi wywietla pliki GIF z przeplotem, jednak nie we
wszystkich udaje si osign efekt materializacji. A nawet w tych, ktre to potrafi, uytkownik moe zawsze wczy opcj mwic przegldarce, e ma odczeka a do penego pobrania
obrazka i dopiero wtedy go wywietli. Starsze przegldarki zawsze pobieraj i dekoduj takie
elementy przed wywietleniem, zupenie ignorujc materializacj.
Kolejny popularny efekt specjalny formatu GIF89a to przezroczysto. W takich obrazkach cz
grafiki jest niewidzialna i przewituje przez ni to, co znajduje si pod spodem (zazwyczaj to
strony). W takich plikach GIF jeden z kolorw w palecie zosta okrelony jako kolor ta. Przegldarka po prostu ignoruje ten kolor i z tego wynika efekt przewitywania. Staranne dobranie
rozmiarw obrazka oraz uycie jednolitego ta umoliwia uzyskanie efektu wtopienia si lub
unoszenia grafiki nad stron.
Przezroczyste elementy GIF wietnie nadaj si wszdzie tam, gdzie grafika ma zosta wpleciona
w dokument i gdzie zaley nam na unikniciu prostoktnego ksztatu obrazka. Popularne s na
przykad przezroczyste emblematy firm, ikony i ozdobniki czyli wszystko to, co ma zosta wywietlone w naturalnym ksztacie. Przezroczysty GIF moe rwnie zosta wpleciony w sam tekst
i peni rol jakiego symbolu, niemoliwego do uzyskania w standardowy sposb.
Kopot z przezroczystoci polega na tym, e taki obrazek GIF bdzie wyglda mao zachcajco,
jeli nie usuniemy jego otoczki (ramki) bdcej rezultatem wstawienia tego elementu w odsyacz
(znacznik <a>) albo po prostu stanowicej cz stylu. Wszystko to, co opywa obrazek, przylega do jego ksztatu faktycznego czyli prostoktnego, a nie tylko tego widzialnego. To potrafi
bardzo zepsu wygld strony.
Trzeci trik wynikajcy ze stosowania formatu GIF89a, to moliwo tworzenia animacji. Za pomoc specjalnych narzdzi tworzy si jeden plik skadajcy si z wielu klatek GIF. Przegldarka
wywietla kolejne klatki takiego elementu, podobnie jak klatki filmu rysunkowego. Dziki istnieniu
!"#$%&"#$%
'

33
'

specjalnych segmentw sterujcych pomidzy poszczeglnymi czciami skadowymi obrazka

moliwe jest okrelenie liczby powtrze caego filmu, ustalenie odstpw pomidzy poszczeglnymi klatkami, okrelenie, czy poprzednia klatka na czas wywietlania nastpnej ma zosta
przeniesiona do ta, itp. Poczenie tych wszystkich funkcji sterujcych z innymi cechami GIF-w
(indywidualne palety kolorw, przezroczysto i przeplot) umoliwia tworzenie naprawd piknych i wyszukanych animacji3.
Proste animacje z uyciem plikw GIF s ciekawym rozwizaniem z jeszcze jednego powodu: aby
je wstawi do dokumentu, nie musimy wykonywa adnych dodatkowych zabiegw. Ale wszystko ma swoj cen: pliki GIF z animacj (poza tymi maymi ikonkami i symbolami) bywaj
bardzo due objtociowo, nawet jeli przy ich tworzeniu zabiegalimy o to, aby w animacji nie
byy powtarzane miejsca statyczne obrazu. A jeli w jednym dokumencie znajduje si wiele animacji, to jego adowanie moe si bardzo wyduy. Tak wic, przy projektowaniu strony trzeba
bacznie uwaa, aby nie przesadzi z animacjami.
Wszystkie te triki z plikami GIF przeplot, przezroczysto i animacja, nie dziej si tak same
z siebie. Do przygotowania takiego pliku wymagane jest specjalne oprogramowanie. Wiele narzdzi graficznych pozwala zachowa wykonan prac w formacie GIF i okreli miejsca przezroczyste. S rwnie programy shareware i freeware wyspecjalizowane w tworzeniu przezroczystych
i animowanych elementw graficznych GIF wystarczy poszuka ich w archiwach oprogramowania w Internecie. Dodatkowe informacje o tworzeniu elementw przezroczystych znajduj si
w rozdziale 17., Kruczki i sztuczki.
.(/%
Format kodowania obrazu JPEG powsta w wyniku prac grupy Joint Photographic Experts Group.
Podobnie jak pliki GIF, obrazy JPEG s niezalene od platformy i skompresowane, co uatwia
transport w sieciach cyfrowych. W przeciwiestwie do formatu GIF, obrazy JPEG mog si skada z dziesitkw tysicy kolorw, a wic format ten lepiej nadaje si do prezentacji wysublimowanych, fotorealistycznych elementw graficznych. W formacie JPEG zastosowano specjalne algorytmy pozwalajce na uzyskanie o wiele wikszego stopnia kompresji. Cakiem powszechne s
sytuacje, w ktrych 200-kilobajtowy plik GIF mona przekonwertowa do postaci 30-kilobajtowego
JPEG-a. Tak wielki stopie kompresji wynika z faktu, e JPEG jest formatem stratnym. Jednak stopie stratnoci mona regulowa za pomoc specjalnych, przeznaczonych do tego celu
narzdzi a wic, cho zdekompresowany obraz moe nieco rni si od oryginau, to ta rnica bdzie na tyle niewielka, e wikszo osb jej po prostu nie zauway.
JPEG wietnie nadaje si do prezentacji fotografii, ale gorzej do zwykych ilustracji, czy rysunkw. Zastosowane algorytmy kompresji i dekompresji powoduj pozostawianie zauwaalnych
otoczek przy duych obszarach jednolitego koloru. Jeli wic trzeba przedstawi rysunek, GIF
bdzie si nadawa do tego lepiej.
Pliki formatu JPEG (rozszerzenie .jpg lub .JPG) s rozumiane przez niemal wszystkie wspczesne przegldarki graficzne. Rzadko ju spotyka si te starsze, nie obsugujce tego formatu.
Wydawnictwo Songline Studios opublikowao ca ksik o animacji w formacie GIF: GIF Animation
Studio Richarda Komana.
#$

! " #" $%$&

#
!
$%
&
Dobry obrazek jest wicej wart ni tysic sw. Trzeba jednak uwaa, eby tymi tysicami sw
nie przegada odbiorcy. Przede wszystkim naley pamita, e elementy graficzne na stronie s
narzdziem wizualnym, a nie przynt na czytelnika. Maj wspiera zawarto tekstow i pomaga w nawigacji. Maj wyjania, ilustrowa lub suy jako przykad. Fotografie wzbogacajce
tre, wykresy, diagramy, mapy i rysunki to wanie doskonali kandydaci do umieszczenia na
stronie WWW. Na przykad, w katalogach sklepowych zdjcia produktw s wrcz nieodzowne.
Natomiast ikony lub symbole-odsyacze (take animowane) bardzo wspomagaj nawigacj po
wewntrznych i zewntrznych zasobach strony. Jeli element graficzny nie pasuje do adnej z powyszych kategorii, warto zastanowi si, czy w ogle jest potrzebny!
Jednym z najwaniejszych problemw zwizanych z obecnoci grafiki w dokumencie jest wyduony czas adowania. Problem ten doskwiera szczeglnie osobom korzystajcym z modemw.
Typowy dokument tekstowy ma najwyej 10 15 tysicy bajtw; obrazki mog t objto zwikszy o setki i tysice bajtw kady. A cakowity czas pobierania dokumentu nie zaley wycznie
od sumy objtoci wszystkich komponentw, ale take od opnie przy ich pobieraniu.
W zalenoci od szybkoci poczenia tzw. przepustowoci (ang. bandwidth) zazwyczaj wyraanej w bitach lub bajtach na sekund oraz aktualnego ruchu w sieci, jeden dokument zawierajcy
100-kilobajtowy obrazek moe si adowa od 15 sekund (modem 57,6 Kb/s wczesnym rankiem)
a do ponad dziesiciu minut (modem 9600 b/s o pnocy). Tak to wanie wyglda.
Ale, oczywicie, powszechno grafiki i innych obiektw multimedialnych skania usugodawcw
internetowych do oferowania szybszych i wydajniejszych pocze. Wkrtce modemy 57,6 Kb/s
odejd w niepami (tak jak odeszy te o prdkoci 9600 b/s) na korzy modemw kablowych
i technologii ADSL. Wkrtce wikszo uytkownikw bdzie czya si z prdkociami niedawno dostpnymi tylko dla najbogatszych ponad megabit na sekund.
Ale w miar obniania cen dostpu do Internetu, wzrasta take liczba uytkownikw i tym samym
ruch w sieci. Jeli staramy si uzyska dostp do przecionego serwera, prdko naszego poczenia nie ma w ogle praktycznego znaczenia.
#
$!&
Tekst nie przesta by modny. W przypadku niektrych uytkownikw jest to jedyna zawarto
strony, do jakiej maj dostp. W wikszoci wypadkw powinno si tak tworzy dokumenty, aby
mogli z nich skorzysta take ci, ktrzy nie mog zobaczy elementw graficznych lub w swoich
przegldarkach wyczyli automatyczne adowanie takich elementw (np. w celu przyspieszenia
pobierania stron). Pokusa wzbogacania wszystkich dokumentw obrazkami moe by silna, trzeba
jednak pamita, e w niektrych sytuacjach o wiele sensowniejszy bdzie po prostu zwyky tekst.
Dokumenty konwertowane do postaci HTML z innych formatw rzadko zawieraj grafik. Materiay referencyjne i inna powana zawarto czsto wystarczajco dobrze jest reprezentowana
jako czysty tekst.
Jeli bardzo zaley nam na szybkim adowaniu strony, warto poprzesta na zawartoci tekstowej.
Kiedy wiadomo, e stron bdzie pobiera wiele osb, nie mona przeadowywa dokumentu grafik czytelnikom trudniej bdzie dosta si do takiej strony. W ekstremalnych przypadkach
!"#$%&"#$%
'

mona wstawi stron wprowadzajc, na ktrej czytelnik bdzie mg wybra wersj naszej strony zawierajc obrazki lub nie. Popularne przegldarki wstawiaj specjalne ikonki w miejscach,
gdzie powinny zosta zaadowane elementy graficzne mog one spowodowa baagan i spadek
czytelnoci dokumentu.
Jeeli dokument ma zosta poprawnie zindeksowany przez wyszukiwarki WWW, powinien zawiera wikszo tekstu i tylko uzasadnione elementy graficzne bez niepotrzebnych ozdbek. Wyszukiwarki takie niemal zawsze ignoruj pliki graficzne. Jeli wikszo strony zawiera grafik,
wyszukiwarki internetowe by moe nie bd potrafiy uzyska z takiego dokumentu adnych sensownych informacji.
'( !
!
)

%

Istnieje kilka sposobw przyspieszenia adowania elementw graficznych (oczywicie, poza sam
powcigliwoci przy wstawianiu ich do dokumentu):
Uproci grafik
Penoekranowa grafika w 24-bitowym kolorze, nawet skompresowana do postaci pliku GIF
lub JPEG, i tak spowoduje zapchanie poczenia. Warto zdoby narzdzia do optymalizacji
rozmiarw obrazka i liczby kolorw i korzysta z nich. Naley w miar moliwoci upraszcza
elementy graficzne. Unika panoramicznych fotografii i duych obszarw pustych, a take
pokanych obramowa i innych zajmujcych wiele miejsca komponentw. Trzeba rwnie
z rezerw stosowa dithering (czenie przylegajcych punktw w rnych kolorach w celu
uzyskania trzeciego); technika ta zmniejsza moliwoci kompresji. Nie stosowa duych
obszarw o jednolitym kolorze kiepsko si kompresuj zarwno w formacie GIF, jak i JPEG.
Uywa wielokrotnie tych samych elementw
Szczeglnie dotyczy to ikon i animowanych GIF-w. Wikszo przegldarek przechowuje
raz pobrane elementy strony w pamici podrcznej (ang. cache), dziki czemu ich kolejne
adowanie nie wymaga czenia z sieci i odbywa si bardzo szybko. W animacjach GIF
kolejne klatki naley budowa poprzez zmian tylko fragmentu poprzednich, a nie
przerysowywa cay obrazek (to rwnie przyspiesza sam animacj).
Dzieli due dokumenty na czci
Ta oglna zasada dotyczy rwnie elementw graficznych. Dokumenty rozdzielone na wiele
maych segmentw i poczone za pomoc odsyaczy oraz spisw treci s lepiej przyjmowane
przez czytelnikw ni strony bardzo due. Odbiorca woli zazwyczaj przerzuci kilka stron
ni czeka na zaadowanie jednej, ale dugiej (to jest jak przeczanie kanaw w pilocie
syndrom choroby telewizyjnej). Czsto przytacza si praktyczn zasad, mwic, e jeden
dokument nie powinien przekroczy objtoci 50 kilobajtw wtedy odbiorca korzystajcy
nawet z wolnego poczenia nie zniechci si dugim czasem adowania.
Oddziela due elementy graficzne
Due elementy graficzne warto oddzieli od waciwego dokumentu i zastpi je odsyaczem
do pliku (np. w postaci miniaturki obrazka). Wtedy czytelnik sam zadecyduje, czy pobra taki
element graficzny. A poniewa pobrana w ten sposb grafika nie jest wymieszana z innymi
elementami strony (np. obrazkami wplecionymi w tekst), atwiej jest j zachowa i przejrze
w pniejszym czasie (wicej o pobieraniu takich elementw graficznych w punkcie 5.6.2).
#!

! " #" $%$&

Podawa rozmiary obrazka

Jeszcze inny sposb zwikszenia wydajnoci to okrelenie wysokoci i szerokoci obrazka
w jego znaczniku. W ten sposb eliminuje si dodatkowe czynnoci, jakie musi wykona
przegldarka w celu zaplanowania rozmieszczenia elementw strony; takie postpowanie
ma jednak rwnie wady o nich w podpunkcie 5.2.6.12.
*(+, ,-"&
Jeli posiadamy ju gotowe obrazki w jednym tylko formacie, lub korzystamy z narzdzia zapisujcego tylko GIF lub tylko JPEG, moemy wzbogaca stron elementami graficznymi tylko tego
jednego typu. Po stronie czytelnika nie powinno by natomiast adnych problemw z odczytaniem
i jednego, i drugiego formatu.
Tym niemniej zaleca si zdobycie narzdzi pozwalajcych na zapis lub konwersj do obu tych
formatw; kady z nich ma charakterystyczne cechy. Na przykad, w ikonach i symbolach przydaje si moliwo uzyskania przezroczystoci (GIF), a w duych i kolorowych zdjciach specjalna kompresja stratna (JPEG).
.

Znacznik <img> umoliwia wstawienie elementu graficznego w biecym miejscu dokumentu.
Ani przed, ani po tym znaczniku nie jest wstawiane domylnie przeamanie wiersza, tak wic domylnie wszystkie obrazki zostaj zagniedone w tekcie, czy innej zawartoci.
Format samego pliku graficznego nie jest zdefiniowany w standardach HTML i XHTML. Popularne przegldarki obsuguj dwa formaty: GIF i JPEG. Standardy nie opisuj ani nie ograniczaj
rwnie rozmiarw obrazka. Grafika moe mie dowoln liczb kolorw, ale sposb ich wywietlania w duym stopniu zaley od przegldarki.
Prezentacja grafiki w ogle bardzo zaley od browsera. Przegldarki tekstowe mog ignorowa
grafik, a te pracujce w ograniczonym rodowisku mog za przedstawia j w zmodyfikowany
sposb. Cz uytkownikw, szczeglnie tych korzystajcych z powolnych pocze, moe w ogle
wyczy pobieranie obrazkw. Trzeba wic zaplanowa stron tak, aby miaa ona dla czytelnika
sens nawet bez adnych elementw graficznych.

Atrybut src jest w znaczniku <img> wymagany (chyba e zastosowano atrybut dynsrc obsugiwany przez Internet Explorer i wykorzystywany do prezentacji filmw). Warto atrybutu src to
adres URL pliku, absolutny albo wzgldny w stosunku do biecego dokumentu. Aby nie zamieca katalogu strony, autorzy zazwyczaj przenosz wszystkie pliki graficzne do oddzielnego folderu o odpowiedniej nazwie, np. obrazki czy pics. [adresy URL, 6.2]
!"#$%&"#$%
'

3)

Funkcja:
Powoduje wstawienie do dokumentu elementu graficznego
Atrybuty:
ALIGN
ALT
BORDER
CLASS
CONTROLS
DIR
DYNSRC
HEIGHT
HSPACE
ID
ISMAP
LANG
LONGDESC
LOOP
LOWSRC
NAME
ONABORT
ONCLICK
ONDBLCLICK
ONERROR
ONKEYDOWN
ONKEYPRESS
ONKEYUP
ONLOAD
ONMOUSEDOWN
ONMOUSEMOVE
ONMOUSEOUT
ONMOUSEOVER
ONMOUSEUP
SRC
START
STYLE
TITLE
USEMAP
VSPACE
WIDTH
Znacznik zamykajcy:
w HTML-u brak, w XHTML-u </img> lub <img ... />
Zawiera:
Nic
Stosowany wewntrz:
text
Na przykad, poniszy fragment kodu HTML powoduje umieszczenie w dokumencie zdjcia kumkwatw (rysunek 5.8):
Poniej widzimy, w caej swej okazaoci, szlachetne owoce kumquat:
<p>
<img src="kumquat.jpg">
<p>
Czy nie pikny widok?
W przykadzie tym wok znacznika <img> wstawiono znaczniki akapitw, dziki czemu przed
obrazkiem i po nim przegldarka dodaa nieco pustego miejsca. Jak opisano to w podpunkcie
5.2.6.4, tekst moe take przystawa z boku obrazka.
#"

! " #" $%$&

D
C1 .

Przegldarka Netscape umoliwia uzupenienie atrybutu src atrybutem lowsrc, za ktrego pomoc
mona przyspieszy adowanie dokumentu. Wartoci lowsrc, podobnie jak src, jest adres URL
pliku graficznego adowanego przez przegldark po napotkaniu znacznika <img>. Plik ten jest
adowany natychmiast; dopiero po zaadowaniu caej strony, gdy moe ona ju by odczytana
przez uytkownika, adowany jest plik podany jako warto atrybutu src.
Obrazek okrelany atrybutem lowsrc ma nisk rozdzielczo i jest ubosz wersj pliku waciwego. Uytkownik poznaje zawarto obrazka nie czekajc dugo na pobranie. Atrybut ten moe jednak suy rwnie do uzyskiwania efektw specjalnych.
Przegldarka Netscape rezerwuje pewien obszar dokumentu na element graficzny, zgodnie z rozmiarami obrazka podanego jako warto lowsrc, chyba e wielkoci te (szeroko i wysoko)
podane zostan jawnie za pomoc atrybutw height i width. Jeli wic rozmiary obrazka okrelonego w atrybucie src s rne od tego w lowsrc, albo jeli jawnie podano atrybuty wysokoci
i szerokoci, obrazek podany jako src zostanie wywietlony jako zmniejszony, powikszony, rozcignity lub cinity tak, aby pasowa do przydzielonego miejsca. Co wicej, obrazki okrelone w atrybutach lowsrc i src nie musz przedstawia tego samego, a wic opnione wywietlanie mona zamieni w prost animacj.
Atrybut lowsrc jest obsugiwany wycznie przez Netscape. Inne przegldarki ignoruj go i aduj tylko ten element, ktry okrelono jako warto atrybutu src. Jeli uytkownik wyczy pobieranie obrazkw w Netscape, przegldarka ta nie zaaduje adnej z tych dwch wersji pliku.
W takim przypadku obrazki te zostan pobrane w odpowiedniej kolejnoci dopiero wtedy, gdy
uytkownik kliknie na ikonie wstawionej w miejsce grafiki. adna przegldarka nie aduje tylko
elementu opisanego jako lowsrc; zawarcie atrybutu src jest wic konieczne inaczej w oknie
przegldarki nie pojawi si aden obrazek poza ikonk-wypeniaczem.
!"#$%&"#$%
'

39
'

Atrybut alt umoliwia okrelenie alternatywnego tekstu, jaki zostanie wywietlony przez przegldark nie obsugujc grafiki lub, w ktrej uytkownik wyczy pobieranie obrazkw. Znacznik ten jest opcjonalny, ale naprawd warto korzysta z niego w wikszoci przypadkw. Jeli
element graficzny nie bdzie dostpny, uytkownik zobaczy chocia co miao si tam znale.
Ponadto, najnowsze przegldarki wywietlaj tekst podany jako warto argumentu alt w ramce
tekstowej, gdy uytkownik umieci wskanik myszy nad obrazkiem. Mona wic umieci tam
informacje dodatkowe, wywietlane np. po najechaniu mysz na ma ikonk (rysunek 5.9).

9
E470 2 2/ 1 .
Warto atrybutu alt to acuch tekstowy o dugoci do 1024 znakw, w tym spacje i znaki przestankowe. Zawsze wstawiany jest w cudzysowach. Moe zawiera encje, ale nie znaczniki; nie
jest moliwe sterowanie stylem takiego tekstu.
Jeli obrazek jest dostpny, a uytkownik wczy pobieranie grafiki, przegldarki graficzne zazwyczaj nie wywietlaj wartoci atrybutu alt. W przeciwnym razie warto ta pokazywana jest
obok ikonki wstawianej w miejscu obrazka. Dobrze dobrane etykiety alt mog wic bardzo pomc uytkownikom nie pobierajcym grafiki z powodu posiadania powolnego cza.
Przegldarki tekstowe, takie jak Lynx, umieszczaj zawarto atrybutu alt bezporednio w tekcie, tak jak kady inny element zawartoci dokumentu. Odpowiedni tekst takiego atrybutu moe
wic z powodzeniem zastpi grafik (uytkownicy przegldarek tekstowych bardzo to doceni
nie lubi, kiedy na kadym kroku udowadnia si im, e s internautami drugiej kategorii). Na
przykad, w poniszym przykadzie uytkownik przegldarki graficznej zobaczy kulk suc do
wypunktowania, a uytkownik przegldarki tekstowej gwiazdk:
<h3>img src="obrazki/kulka.gif" alt="*">Wprowadzenie</h3>
Natomiast w poniszym przykadzie tekst zastpuje symboliczn ikonk:

<ul>
<li> Przepisy na przyrzdzanie kumkwatw
<img src="obrazki/nowosc.gif" alt="(Nowo!)">
<li> Okresy zbiorw
</ul>
W przegldarce tekstowej zamiast ikonki nowosc.gif pojawi si napis (Nowo!). W atrybucie

alt moe si znale nawet duszy tekst (patrz rysunek 5.10):
$

! " #" $%$&
'
Poniej widzimy, w caej swej okazaoci, szlachetne owoce kumquat:

<p>
<img src="kumquat.jpg" alt="[Zdjcie owocw kumkwata w naturalnym otoczeniu]">
<p>
Czy nie pikny widok?

'
0 . 1 2 1
Atrybut longdesc jest podobny do atrybutu alt, ale umoliwia stosowanie duszych opisw.
Wartoci tego atrybutu jest adres URL dokumentu zawierajcego opis obrazka. Jeli chcemy umieci opis duszy ni 1024 znaki, to robimy to wanie za pomoc longdesc. Ani HTML 4, ani
XHTML nie wyszczeglniaj, jaka moe by zawarto takiego opisu. Obecnie adna przegldarka
nie obsuguje take tego atrybutu, trudno wic przytoczy jakkolwiek praktyczn rad na jego temat.

Standardy nie definiuj domylnego wyrwnania elementw graficznych wzgldem pozostaego
tekstu oraz innych obrazkw w tym samym wierszu nigdy nie mona dokadnie przewidzie,
jak elementy te zostan rozoone na stronie4. Obrazki zazwyczaj wstawiane s wraz z tekstem
w jednej linijce. Z innych mediw, np. z gazet, znamy natomiast odmienny sposb rozkadania
elementw: tekst opywa ilustracj i poszczeglne wiersze przystaj do jej boku.
Na szczcie twrcy dokumentw HTML s w stanie uzyska pewn kontrol nad wyrwnaniem
ilustracji wzgldem otaczajcego tekstu. Suy do tego atrybut align znacznika <img>. Standardy HTML i XHTML definiuj pi wartoci tego atrybutu: left, right, top, middle i bottom.
Pierwsze dwie wartoci powoduj, e nastpujcy po obrazku tekst opywa obrazek; sam obrazek jest za przesuwany do, odpowiednio, lewego lub prawego marginesu. Pozostae trzy wartoci
steruj wyrwnaniem pionowym wzgldem otaczajcego tekstu. Netscape obsuguje jeszcze cztery inne wartoci zwizane z wyrwnaniem pionowym: texttop, absmiddle, baseline oraz
absbottom, Internet Explorer obsuguje warto center.
Poniej przedstawiono opisy wartoci mwicych o wyrwnaniu zagniedonego w tekcie obrazka; przykady przedstawiono na rysunku 5.11.
4
Wikszo popularnych przegldarek wstawia element graficzny tak, e spd obrazka zrwnany jest
z podstaw linijki tekstu czyli tak, jakby podano warto wyrwnania bottom. Nie mona jednak by
cakowicie pewnym takiego zachowania i zawsze naley jednoznacznie okrela wyrwnanie elementw
graficznych.
!"#$%&"#$%
'

'

F 14 1 0.
top
Szczyt obrazka jest wyrwnywany ze szczytem najwyszego elementu w biecej linijce

tekstu. Jeli w biecym wierszu nie ma innych elementw graficznych, obrazek jest
wyrwnywany do grnej granicy tekstu.
texttop
Atrybut align=texttop powoduje, e w przegldarce Netscape szczyt obrazka jest

zrwnywany ze szczytem najwyszego elementu tekstowego w biecej linijce. Rni si od
wartoci top tym, e ta ostatnia powoduje wyrwnanie do najwyszego elementu bez wzgldu
na to, czy jest to tekst czy element graficzny. Jeli linijka nie zawiera innych elementw
graficznych wystajcych ponad tekst, texttop i top dziaaj identycznie.
middle
Netscape i Internet Explorer traktuj warto middle na rne sposoby. Netscape zrwnuje
rodek wysokoci obrazka z podstaw linijki tekstu, bez wzgldu na inne elementy
zagniedone (np. inny obrazek rysunek 5.12). Internet Explorer zrwnuje rodek
wysokoci obrazka ze rodkiem najwyszego elementu w biecej linijce tekstowego czy
te graficznego (rysunek 5.13). Spjrzmy na rnice w sposobie wyrwnania na rysunkach
5.12 i 5.13, widoczne szczeglnie wtedy, gdy tylko jeden obrazek jest opisany atrybutem
align. Na obu rysunkach przedstawiono sposb interpretacji poniszego fragmentu kodu:
Linijka tekstu
<img src="poziomy.gif" align=middle>
<img src="pionowy.gif">
idzie sobie dalej...
<br clear=left>
<p>
Linijka tekstu
<img src="poziomy.gif" align=middle>
<img src="pionowy.gif" align=middle>
idzie sobie dalej...
$

! " #" $%$&
'

(
- 4221 .

3
*+,4221 2. ;0.
Naley rwnie zauway, e przegldarka Internet Explorer w wersji 3 oraz pniejszych

traktuje middle, absmiddle i center identycznie. Wczeniejsze wersje oraz Netscape
rozrniaj pomidzy wyrwnaniem middle a absmiddle (osoby, ktrym wszystkie te
wartoci zaczynaj si wanie myli, proszone s o podniesienie rki).
absmiddle
Jeli atrybut align przyjmie warto absmiddle, przegldarka dopasuje bezwzgldny rodek
(ang. absolute middle) wysokoci obrazka do bezwzgldnego rodka wysokoci biecej
linijki. W Netscape oraz wczesnych wersjach Internet Explorera warto ta dziaa inaczej ni
middle ta ostatnia zrwnuje rodek wysokoci obrazka ze spodem biecej linijki tekstu
(podstaw znakw). Przegldarka Internet Explorer w wersjach 3 i pniejszych traktuje
absmiddle dokadnie tak jak middle i center.
!"#$%&"#$%
'

63
''

center
Warto center jest traktowana przez Internet Explorer i przez Netscape dokadnie tak jak
absmiddle, pamitajmy jednak, e obie te przegldarki inaczej traktuj absmiddle.
bottom i baseline (ustawienie domylne)
W przypadku Netscape oraz wczesnych wersji Internet Explorera wartoci bottom

i baseline miay takie samo dziaanie: tak jakbymy nie wstawili w ogle atrybutu align
spd obrazka by na tej samej wysokoci, co podstawa linijki tekstu. Nie jest to jednak to samo,
co absbottom tutaj spd tekstu to miejsce, do ktrego sigaj ogonki liter, np. maej
litery y. Internet Explorer w wersji 3 i pniejszych traktuje natomiast bottom tak jak
absbottom.
absbottom
Atrybut align=absbottom informuje przegldark, e spd obrazka ma zosta zrwnany

z faktycznym spodem biecej linijki tekstu. Faktyczny spd to najnisze miejsce w tekcie,
przy czym brane s pod uwag ogonki liter takich jak y (nawet, jeli nie wystpuj w danej
linijce). Podstawa linijki tekstu przystaje natomiast do dou czci v w znaku y.
Przy wstawianiu ikon, symboli lub innych specjalnych znakw scalanych z otaczajcym tekstem
najlepiej uywa wartoci top lub middle. W innych przypadkach najlepsze efekty daje zazwyczaj zapis align=bottom (czyli ustawienie domylne). Przy wyrwnywaniu jednego lub wicej
obrazkw w jednym wierszu, najlepiej poeksperymentowa z wyrwnaniami i wybra to prezentujce si najkorzystniej.
01)2-3
-4
Okrelenie wartoci atrybutu align jako left lub right powoduje, e przegldarka umieszcza
obrazek odpowiednio przy lewym lub prawym marginesie. Nastpnie dalsza cz zawartoci dokumentu jest wywietlana obok obrazka. Efekt jest taki, e tre znajdujca si za obrazkiem
opywa go.
<img src="kumquat.jpg" align=left>
Kumkwat to najmniejszy owoc cytrusowy. Przypomina malutk pomaracz.
Na tym jednak podobiestwo si koczy. Pomaracze s zazwyczaj sodkie,
kumkwaty za bardzo gorzkie. Nie sposb je polubi za pierwszym razem;
umiowanie tych szlachetnych owocw przychodzi z czasem.
Na rysunku 5.14 przedstawiono sposb interpretacji powyszego fragmentu w HTML-u.

6
#7 4
$$

! " #" $%$&
'
Ilustracje mona umieszcza jednoczenie przy obu marginesach (rysunek 5.15); tekst zostanie
wtedy wstawiony pomidzy obrazkami:
<img src="kumquattree_maly.jpg" align=right>
umiowanie tych szlachetnych owocw przychodzi z czasem.

#.4 .. 04 .
Na caej wysokoci obrazka rol marginesu dla zawartoci peni nie granica okna przegldarki, ale
wanie krawd obrazka. Kolejne ilustracje wyrwnane w ten sam sposb bd przylegay jedna
do drugiej. Oto przykadowy kod wywoujcy taki efekt (patrz rysunek 5.16):
<img src="obrazki/linux.gif" align=left>
Penguin!
<br>
<img src="obrazki/livre.gif" align=left>
Pingwin!
<br>
<img src="obrazki/linlogo.gif" align=left>
Tux!

<
#0
Kiedy tekst przelewa si poza doln krawd obrazka, margines powraca do dawnej pozycji
zazwyczaj do krawdzi okna przegldarki.
!"#$%&"#$%
'

'

5*
Czy Czytelnik zauway, e za pomoc atrybutu align nie jest moliwe wyrodkowanie elementu
graficznego? Wartoci middle oraz absmiddle wyrodkowuj obrazek pionowo wzgldem biecej linijki, poziome wyrwnanie zaley od wczeniejszej zawartoci oraz rozmiarw okna przegldarki.
Poziome wyrodkowanie obrazka zagniedonego w zawartoci strony jest moliwe, ale tylko jeli
obrazek ten jest odizolowany od otaczajcej treci np. za pomoc znacznika akapitu, dziau lub
przeamania wiersza. Wtedy wystarczy uy znacznika <center> lub atrybutu align=center,
ewentualnie odpowiedniego stylu opisujcego uyty znacznik. Na przykad:
Szlachetne owoce kumkwaty
<br>
<center>
<img src="kumquat.gif">
</center>
- posiek w witaminy bogaty!
Jeli trzeba uzyska nieco dodatkowej przestrzeni ponad oraz pod wyrodkowanym obrazkiem,
uywamy atrybutu align=center:
Szlachetne owoce kumkwaty
<p align=center>
<img src="kumquat.gif">
</p>
- posiek w witaminy bogaty!
"
-
Standardy HTML 4 oraz XHTML nie zalecaj ju stosowania atrybutu align w adnym znaczniku, a wic take w <img>; maj go zastpi style. Tym niemniej atrybut ten jest wci bardzo popularny wrd autorw HTML i jest cigle obsugiwany przez najpopularniejsze przegldarki. Tak
wic mona si spodziewa, e kiedy atrybut ten zostanie zupenie zaniechany, ale nie nastpi to
jeszcze tak szybko.
6

Obrazki bdce jednoczenie odsyaczami (umieszczone wewntrz znacznika <a>) s zazwyczaj
przez przegldarki opatrywane kolorow ramk o gruboci dwch pikseli uytkownik dowiaduje si w ten sposb, e obrazek mona klikn i w ten sposb przej do innego dokumentu.
Atrybut border pozwala zmieni grubo takiej ramki lub j usun (border=0). Ten atrybut take
nie jest ju zalecany przez standardy HTML 4 i XHTML, wci jednak jest powszechnie stosowany.
Na rysunku 5.17 przedstawiono sposb, w jaki grubo ramek interpretuje Internet Explorer:
<a href="test.html">
<img src="kumquat.jpg" border="1" />
</a>
</a>
$!

! " #" $%$&
'

</a>
</a>

)
G1 .471 4
78
,
Ramk obrazka-odsyacza mona w ogle usun, stosujc w znaczniku <img> atrybut border=0.
W przypadku niektrych ilustracji, szczeglnie map odsyaczy, taki zabieg stanowczo poprawia
wygld strony. Obrazki bdce ju na pierwszy rzut oka odsyaczami do innych stron najlepiej
wygldaj bez adnych dodatkowych ozdobnikw.
Tym niemniej przy usuwaniu obramowania takiej ilustracji trzeba uwaa, aby nie spada uyteczno strony. Brak ramki to brak jakiejkolwiek wskazwki, e dany element graficzny jest odsyaczem czytelnikowi automatycznie trudniej jest znale linki na stronie. Co prawda, po najechaniu mysz na taki obrazek-odsyacz wskanik zmienia wygld, ale raczej nie powinno si
oczekiwa od czytelnikw badania w ten sposb wszystkich obrazkw na stronie.
Stanowczo naley wyranie zaznacza, e okrelony obrazek pozbawiony ramki jest odsyaczem.
Wystarczy choby krtka informacja tekstowa.
9

Na pewno nieraz Czytelnik zaobserwowa efekt polegajcy na przesuwaniu si w poziomie rnych elementw strony w czasie jej adowania. Dzieje si tak, gdy przegldarka dopasowuje rozkad strony do ju pobranych ilustracji. Po okreleniu rozmiaru obrazka co jest moliwe dopiero po pobraniu go i odczytaniu zawartych w pliku informacji rezerwowana jest prostoktna
przestrze na stronie5. Nie jest to najwydajniejszy sposb interpretacji dokumentu przegldarka
musi zbada kady plik graficzny i obliczy przestrze, jak on zajmie, dopiero potem moe zosta wstawiona dalsza tre. W ten sposb wydua si czas pobierania caej strony to moe
zniechci czytelnika.
5
To kolejny naoczny dowd, e obrazki s oddzielnymi plikami, adowanymi niezalenie od strony.
!"#$%&"#$%
'

6)
'

Ten proces mona jednak przyspieszy, stosujc atrybuty height i width znacznika <img>.
Dziki nim przegldarka potrafi zarezerwowa odpowiedni przestrze jeszcze przed pobraniem
elementu graficznego, co przyspiesza wywietlanie dokumentu i eliminuje efekt przesuwania.
Oba atrybuty przyjmuj wartoci w postaci liczb cakowitych odpowiadajcych wysokoci (ang.
height) oraz szerokoci (ang. width) obrazka w pikselach. Nie jest istotna kolejno tych atrybutw.
:,*

- )2
Atrybuty height i width pozwalaj na zastosowanie pewnego triku, polegajcego na podaniu
innych rozmiarw obrazka ni s faktyczne. W takiej sytuacji przegldarka automatycznie skaluje
ilustracj tak, aby pasowaa do okrelonej przestrzeni. W ten sposb mona atwo tworzy miniaturki duych ilustracji oraz powiksza mae obrazki. Trzeba jednak zachowa tutaj ostrono:
bez wzgldu na to, jakie rozmiary zostan podane, przegldarka i tak musi pobra cay plik; jeli
natomiast zostan zachwiane proporcje pomidzy wysokoci a szerokoci, zaburzy to wygld
elementu graficznego.
Kolejny trik zwizany z opisywanymi atrybutami polega na wypenianiu obszarw strony i zwikszaniu wydajnoci pobierania. Wyobramy sobie, e zamierzamy wstawi na stronie kolorow
belk biegnc przez ca szeroko dokumentu 6. Zamiast wstawia obrazek penych wymiarw,
wystarczy utworzy GIF-a o rozmiarach jeden na jeden piksel i w danym kolorze; nastpnie
okreli atrybuty height i width zgodnie z wymaganymi rozmiarami:
<img src="obrazki/jeden_piksel.gif" width=640 height=20>
May, jednopikselowy obrazek aduje si bardzo szybko, a dziki opisywanym atrybutom rozciga si do podanych rozmiarw (rysunek 5.18).

D
# .01
Ostatni trik z atrybutem width polega na uyciu wartoci procentowej zamiast wielkoci w pikselach. Przegldarka skaluje wtedy obrazek tak, by zajmowa okrelon procentowo cz szerokoci okna przegldarki. Tak wic, aby stworzy pasek o wysokoci 20 pikseli i szerokoci okna
przegldarki, uyjemy zapisu:
<img src="obrazki/jeden_piksel.gif" width="100%" height=20>
Po zmianie wielkoci okna przegldarki, wielko obrazka zostanie odpowiednio dopasowana.

6
Midzy innymi w ten sposb mona tworzy kolorowe linie poziome w przegldarce Netscape 3
lub wczeniejszej, nie obsugujcej atrybutu color w znaczniku <hr>.
$"

! " #" $%$&
'
Jeli podamy szeroko procentow, a pominiemy wysoko, przegldarka zachowa procentowy

stosunek wielkoci bokw przy zmianie wielkoci elementu graficznego. Oznacza to, e wysoko
bdzie zawsze proporcjonalna do szerokoci i zawarto obrazka nie ulegnie zburzeniu.
( , * *

Atrybuty height i width w znaczniku <img> zwikszaj prdko adowania obrazka i umoliwiaj zastosowanie opisanych powyej trikw. Ale wie si z nimi rwnie pewien problem:
przegldarka rezerwuje okrelon przestrze nawet wtedy, gdy uytkownik wyczy automatyczne pobieranie obrazkw. W takim przypadku czsto okazuje si, e strona pena jest pustych ramek z nic nie znaczcymi ikonkami w rodku. Wyglda to bardzo nieciekawie i zazwyczaj utrudnia zorientowanie si w dokumencie. Jeli nie poda si rozmiarw obrazka, przegldarka po prostu
wstawia na stronie sam ikonk i przynajmniej nie ma trudnoci z odczytaniem tekstu.
Nie czas tutaj rozwaa, ktre wyjcie jest lepsze; warto natomiast stosowa atrybut alt i tym samym dostarcza czytelnikowi opis tego, czego ewentualnie nie moe zobaczy (patrz punkt 5.2.6.3).
W sumie, raczej naleaoby skania si do stosowania atrybutw width i height kady sposb przyspieszenia adowania strony jest dobry.

)$)
Przegldarki graficzne zazwyczaj wywietlaj grafik tak, e pomidzy obrazkiem a tekstem nie
pozostaje zbyt wiele miejsca. Jeli nie umiecimy w obrazku przezroczystej ramki zwikszajcej t
przestrze, to zazwyczaj dwupikselowy odstp jest stanowczo za may i wyglda nieestetycznie.
A po wstawieniu obrazka w odsyacz nawet przezroczysta ramka zostanie przesonita kolorowan
otoczk doczan przez przegldark.
Przestrze wok obrazka mona jednak okreli samodzielnie, za pomoc atrybutw hspace
i vspace. Pierwszy umoliwia podanie w pikselach odlegoci pomidzy obrazkiem a tekstem po
jego prawej i lewej stronie, drugi pozwala okreli, jak dua przestrze ma zosta zachowana
nad i pod ilustracj:
umiowanie tych szlachetnych owocw przychodzi z czasem. Wikszo osb
po pierwszym sprbowaniu zastanawia si, jak mona w ogle co takiego
wzi do ust -- a co dopiero polubi.
<p>
<img src="kumquat.jpg" align=left hspace=10 vspace=10>
umiowanie tych szlachetnych owocw przychodzi z czasem. Wikszo osb
po pierwszym sprbowaniu zastanawia si, jak mona w ogle co takiego
wzi do ust -- a co dopiero polubi.
Na rysunku 5.19 pokazano, jak powyszy kod jest interpretowany.

Chyba wszyscy si zgodz, e dodatkowa przestrze wok obrazka sprawia lepsze wraenie i zwiksza czytelno strony.
!"#$%&"#$%
'

69

9
471 2/

,)
,)
Atrybuty ismap i usemap informuj przegldark, e element graficzny ma posta specjalnej mapy wizualnej zawierajcej jeden lub wicej odsyaczy, ilustracj tak najczciej okrela si mianem mapy odsyaczy. Mapy odsyaczy opisywane atrybutem ismap dziaaj po stronie serwera
(ang. server-side) i mog by obsugiwane tylko poprzez znacznik <a>. [<a>, 6.3.1]
Na przykad:
<a href="/cgi-bin/obrazki/mapa2">
<img src="mapa2.gif" ismap>
</a>
Kiedy uytkownik kliknie taki obrazek, przegldarka automatycznie wysya wsprzdne x i y

wskanika myszy (wzgldem grnego lewego rogu obrazka) do serwera. Specjalne oprogramowanie po stronie serwera (w tym przykadzie program /cgi-bin/obrazki/mapa2) po przeanalizowaniu
otrzymanych danych podejmuje waciwe dziaanie.
Atrybut usemap suy do obsugi map odsyaczy po stronie klienta (ang. client-side) i pozwala
oby si bez jakichkolwiek zabiegw wykonywanych na serwerze; w ten sposb eliminowane s
rwnie przestoje zwizane z opnieniami przesyania danych przez sie. Za pomoc specjalnych
znacznikw <map> i <area> okrela si wsprzdne aktywnych regionw ilustracji opisanej atrybutem usemap oraz podaje adres URL wywoywany po klikniciu na takim regionie. Warto atrybutu usemap to adres URL wskazujcy na t specjaln sekcj <map>.[<map>, 6.5.3] [<area>, 6.5.4]
Na przykad, w poniszym fragmencie opisano element graficzny mapa2.gif o rozmiarach 100100
pikseli. Zdefiniowano cztery segmenty, ktre po klikniciu odsyaj czytelnika do innych dokumentw. Zauwamy, e w znaczniku <img> umieszczono rwnie atrybut ismap. Dziki niemu
mona wprowadzi tak sam obsug na serwerze, jak po stronie klienta i uytkownicy nie posiadajcy przegldarek obsugujcych usemap nie odczuj adnych niedogodnoci:

! " #" $%$&

<a href="/cgi-bin/obrazki/mapa2">
<img src="mapa2.gif" ismap usemap="#mapa2">
</a>
...
<map name="map2">
<area coords="0,0,49,49" href="link1.html">
</map>
Rozwizania tego typu wietnie nadaj si do prezentacji map geograficznych na przykad, firma moe zamieci na stronie mapk z rozmieszczonymi oddziaami lokalnymi, ktre wystarczy
klikn, aby przej do strony najbliszego geograficznie punktu obsugi klienta. Zalet atrybutu
usemap jest fakt, e przetwarzanie obrazka nie wymaga oprogramowania ani jakichkolwiek zabiegw po stronie serwera, mona wic go wykorzysta w stronach prezentowanych poza Internetem np. na dysku lokalnym czy CD-ROM-ie.
Wicej informacji o punktach zakotwiczenia oraz odsyaczach, a take o mapach odsyaczy znajduje si w rozdziale 6.5.

##$###
W wielu znacznikach opisujcych zawarto obsugiwany jest pewien zestaw wsplnych atrybutw. Pozwalaj one na identyfikacj (title) oraz oznaczenie (id) zawartoci znacznika w celu
pniejszego odwoania si do danego elementu lub uproszczenia automatycznego przetwarzania;
inne umoliwiaj zmian wygldu elementu (class, style) oraz okrelenie jzyka i kierunku
wywietlania tekstu (lang i dir). [atrybut style, 8.1.1] [atrybut class, 8.3]
Ponadto istniej jeszcze atrybuty opisujce reakcj na rne zdarzenia zwizane z danym elementem i wymagajce pewnych zabiegw programistycznych (atrybuty on). [procedury obsugi
zdarze JavaScript, 12.3.3]
Z atrybutw tych, w kontekcie ilustracji najwaniejszy jest id. Umoliwia on oznaczenie obrazka
i pniejsze odwoanie si do niego z programu lub poprzez funkcj przegldarki (patrz rozdzia 12.).
[atrybut id, 4.1.1.4]
Pozostae atrybuty raczej w niky sposb oddziauj na znacznik <img>. S pewne aspekty stylw,
ktre mog wpyn na jego zachowanie, mona te poda tytu (title), cho lepiej stosowa
atrybut alt. Trudno wyobrazi sobie, jak w kontekcie grafiki mog dziaa atrybuty jzyka (lang)
lub kierunku tekstu (dir). [atrybut dir, 3.6.1.1] [atrybut lang, 3.6.1.2] [atrybut title, 4.1.1.5]

,# #/#; ,
Przegldarka Netscape obsuguje obecnie cztery atrybuty znacznika <img>, umoliwiajce wykonywanie na ilustracji rnych czynnoci za pomoc programw JavaScript. Pierwszy z nich to
atrybut name. Atrybut ten mona zastpi standardowym id7, a umoliwia on oznaczenie elementu
graficznego w celu pniejszego odwoania si do niego poprzez aplet JavaScript. Na przykad:
7
Standard HTML 4.01 definiuje atrybut name, cho obecnie jest on obsugiwany tylko przez Netscape.
!"#$%&"#$%
'

<img src="kumquat.jpg" name="kumquat">
Do obrazka opisanego tak jak powyej mona si potem odwoa z apletu JavaScript poprzez nazw
kumquat np. w celu jego usunicia lub zmodyfikowania. Nie jest moliwe operowanie na elemencie graficznym z poziomu JavaScript, jeli nie zosta on nazwany poprzez atrybut name lub id.
Pozostae trzy atrybuty umoliwiaj przypisanie elementowi graficznemu procedur obsugi JavaScript. Warto tych atrybutw to kod JavaScript w cudzysowach. Kod ten moe mie posta jednego lub wicej wyrae JavaScript oddzielonych rednikami.
Przegldarka Netscape uruchamia procedur obsugi onAbort kiedy uytkownik zatrzyma pobieranie obrazka (zazwyczaj klikajc przycisk stop). Za pomoc komunikatu wywoywanego poprzez onAbort mona na przykad ostrzec uytkownika, e zatrzymuje on wanie adowanie bardzo wanego obrazka choby mapy odsyaczy (patrz punkt 6.5):
<img src="kumquat.jpg" usemap=#map1"
onAbort="window.alert('Uwaga: ten obrazek zawiera wane odsyacze.
Prosz pobra go w caoci.')">
Atrybut onError dochodzi do gosu wtedy, gdy w czasie pobierania obrazka nastpi bd, ale
inny ni ten spowodowany brakiem pliku graficznego lub przerwaniem adowania przez uytkownika. Atrybut taki mona wykorzysta na przykad do podjcia specjalnych krokw zwizanych
z bdem lub zaadowania zapasowego obrazka.
Zawarto atrybutu onLoad wykonywana jest natychmiast po udanym pobraniu i wywietleniu
obrazka.
Wicej informacji o programach JavaScript i procedurach obsugi mona znale w rozdziale 13.3.3.
"
,!
Atrybuty standardowe i niestandardowe znacznika <img> mona czy tam, gdzie tylko ma to
sens. Kolejno atrybutw nie ma znaczenia. Trzeba tylko pamita, aby nie wstawia ich nadmiarowo trudno wtedy przewidzie, jak przegldarka si zachowa.
/0 !

Specjalne atrybuty niestandardowe znacznika <img>, jak controls, dynsrc, loop i start,
dziaaj tylko w przegldarce Internet Explorer i nie zostay zdefiniowane w standardach HTML 4
ani XHTML. Umoliwiaj zagniedenie filmu w zawartoci strony podobnie jak w przypadku
ilustracji.
Identyczny efekt w przegldarce Netscape uzyskuje si poprzez program okrelany mianem moduu
dodatkowego (ang. plug-in). Modu to jednak rozwizanie bardziej kopotliwe dla uytkownika
aby obejrze film, musi on takiego plug-ina pobra i zainstalowa. W przegldarce Internet Explorer mechanizm przegldania filmw jest wbudowany i obsugiwany poprzez rozszerzenia znacznika
<img>. [Zawarto zagniedona, 12.2]
Ale z rozszerzeniem Internet Explorera do obsugi filmw wi si powane ograniczenia: nie
jest ono obsugiwane przez adn inn przegldark i obsuguje jedynie filmy w formacie Audio

! " #" $%$&

Video Interleave (AVI) poprzez oprogramowanie wbudowane w system Microsoft Windows. Co

wicej, dziki najnowszym rozwizaniom zastosowanym w przegldarkach (szczeglnie chodzi tu
o obsug obiektw i apletw), te rozszerzenia znacznika <img> mog sta si zbdne.
"

Atrybut dynsrc znacznika <img> suy do wstawienia do strony filmu w formacie AVI; film taki
moe by wywietlony jedynie przez przegldark Internet Explorer. Warto atrybutu to adres
URL pliku filmowego, umieszczony w cudzysowach. Na przykad, w poniszym znaczniku odwoujemy si do filmu intro.avi:
<img dynsrc="filmy/intro.avi">
Przegldarka rezerwuje w oknie wewntrzne okienko, w ktrym odgrywany jest film (wraz z dwikiem, o ile taki zosta zarejestrowany w filmie i o ile potrafi odgrywa go nasz komputer). Przegldarka Internet Explorer traktuje filmy dynsrc podobnie jak obrazek o okrelonych rozmiarach.
I tak jak w przypadku ilustracji, film jest wywietlany natychmiast po zaadowaniu z serwera.
Mona to zachowanie zmieni, dodajc moliwo sterowania wywietlaniem przez uytkownika.
Poniewa wszystkie inne przegldarki ignoruj te specjalne atrybuty suce do wywietlania filmw, mog buntowa si, gdy nie znajd w znaczniku <img> wymaganego atrybutu src z adresem obrazka. Zaleca si wic nawet w znacznikach odwoujcych si do filmu wstawianie
tego atrybutu i podawanie jako jego warto istniejcego pliku graficznego. Po napotkaniu takiego
znacznika Internet Explorer wywietli film, a nie wywietli obrazka, inne przegldarki postpi
odwrotnie. Kolejno atrybutw nie ma znaczenia. Na przykad:
<img dynsrc="filmy/intro.avi" src="obrazki/jedna_klatka.gif">
Internet Explorer pobiera i odgrywa film AVI intro.avi, inne przegldarki graficzne zaaduj obrazek jedna_klatka.gif.
"

Internet Explorer zazwyczaj odgrywa film w wewntrznym okienku jeden raz i nie wywietla
adnych dodatkowych elementw sterujcych. Moliwe jest zatrzymanie, zrestartowanie i kontynuacja ogldania filmu poprzez kliknicie mysz wewntrz okienka. Za pomoc atrybutu controls
(bez wartoci) mona do okienka podgldowego filmu doda elementy sterujce, za pomoc ktrych uytkownik moe film odgrywa, przewija, zatrzymywa i pauzowa zupenie jak w magnetowidzie. Jeli klip filmowy zawiera ciek dwikow, pojawia si rwnie potencjometr
gonoci. Na przykad, taki zapis:
<img dynsrc="filmy/intro.avi" controls src="obrazki/jedna_klatka.gif">
powoduje dodanie elementw sterujcych do okienka podgldowego klipu filmowego tak, jak to
pokazano na rysunku 5.20.
!"#$%&"#$%
'

'

('
1 00A.0
.4:
"
)
Standardowo Internet Explorer po pobraniu odgrywa film jeden raz, od pocztku do koca. Atrybut loop znacznika <img> powoduje, e film bdzie odgrywany tyle razy, ile wynosi warto tego
atrybutu (liczba cakowita) lub w nieskoczono, jeli jako warto atrybutu podamy infinite.
Uytkownik moe przerwa t ptl klikajc na okienku filmu, wciskajc przycisk stop (o ile podano
atrybut controls patrz 5.2.7.2) lub przechodzc do innego dokumentu.
W poniszym przykadzie film intro.avi zostanie odegrany od pocztku do koca, a nastpnie zrestartowany i odegrany w ten sposb jeszcze dziewi razy:
<img dynsrc="filmy/intro.avi" loop=10 src="obrazki/jedna_klatka.gif">
Tutaj natomiast film bdzie odgrywany raz po raz, w nieskoczono:

<img dynsrc="filmy/intro.avi" loop=infinite src="obrazki/jedna_klatka.gif">
Zaptlanie filmw niekoniecznie musi suy do denerwowania ogldajcego. Niektre specjalne

animacje to wanie powtarzajce si na okrgo sekwencje klatek. Zamiast tworzy cay cig
powtarzajcych si fragmentw, film wystarczy zaptli i uzyska si taki sam efekt.
"

Standardowo odgrywanie filmw w przegldarce Internet Explorer rozpoczyna si po pobraniu
pliku AVI. Zachowanie to mona zmieni poprzez dodanie do znacznika <img> atrybutu start.
Jeli ustawimy jego warto na mouseover, odgrywanie filmu zostanie odoone a do momentu
najechania przez uytkownika myszk na okienko podgldowe. Inna warto, fileopen, jest
rwnoznaczna z ustawieniem domylnym: odgrywanie ma si rozpocz po pobraniu. Jeli poczy te dwie wartoci w atrybucie start, odgrywanie filmu rozpocznie si natychmiast po pobraniu, a potem bdzie powtarzane dopiero po najechaniu myszk na okienko podgldu. Aby poczy wartoci atrybutu start, wpisujemy je oddzielone przecinkami bez spacji; jeli chcemy uy
spacji, musimy uj cao w cudzysowy.
$

(% "
Na przykad, kiedy przegldarka zinterpretuje poniszy kod, plik intro.avi zostanie odegrany raz
po zaadowaniu dokumentu, a potem za kadym razem, gdy uytkownik przesunie wskanik myszy na okienko podgldu:
<img dynsrc="filmy/intro.avi" start="fileopen,mouseover"
src="obrazki/jedna_klatka.gif">
"
,! ,<,
Moliwe jest czenie atrybutw znacznika <img>, zarwno tych specyficznych dla filmw, jak
i standardowych. Na przykad, moliwe jest wyrwnanie okienka podgldu filmu (lub jego zamiennika w postaci obrazka) do prawej strony okna przegldarki:
<img dynsrc="filmy/intro.avi" src="obrazki/jedna_klatka.gif" align=right>
czenie atrybutw bywa bardzo przydatne. Zalecane jest take, gdzie tylko to moliwe, wstawianie atrybutu powodujcego wywietlenie elementw sterujcych. Na przykad, jeli zaptlamy
film w nieskoczono, powinnimy take doda do znacznika <img> atrybut controls, tak aby
uytkownik mg zatrzyma film bez koniecznoci opuszczania dokumentu.
Jak ju zostao to opisane w punkcie 5.2.7.4, czc atrybuty mona rwnie spowodowa, e odgrywanie zostanie opnione a do momentu, w ktrym uytkownik przesunie wskanik myszy
nad okienko podgldowe. Wtedy w zaczarowany sposb film oywia si i odgrywany jest w nieskoczono:
<img dynsrc="filmy/intro.avi" start=mouseover
loop=infinite src="obrazki/jedna_klatka.gif">

W standardach HTML 4 i XHTML zdefiniowano specjalne atrybuty znacznika <body>, umoliwiajce definiowanie kolorw tekstu, odsyaczy i ta dokumentu. Moliwe jest rwnie okrelenie
pliku graficznego, ktry bdzie suy jako to strony. Internet Explorer udostpnia jeszcze rozszerzenia pozwalajce zdefiniowa szerokoci marginesw oraz zapewniajce lepsz kontrol nad
sposobem wywietlania grafiki w tle. Oczywicie, wszystkimi tymi parametrami mona rwnie
sterowa poprzez arkusze stylw obsugiwane przez wspczesne przegldarki.
1)
! 23
)
Atrybuty sterujce tem, kolorem tekstu oraz marginesami dokumentu wstawiane s do znacznika
<body>. [<body>, 3.8.1]

Jednym ze standardowych sposobw zmiany domylnego koloru ta okna przegldarki, jest uycie
atrybutu bgcolor znacznika <body>. Podobnie jak atrybut color znacznika <font>, bgcolor
moe przyjmowa wartoci dwch rodzajw: liczb okrelajc ilo barw czerwonej, zielonej
i niebieskiej (RGB) lub standardow nazw koloru. Omwienie kodowania RGB wraz z tabel
nazw kolorw mona znale w dodatku G.
!"#$%&"#$%
'

Ustawienie koloru ta jest proste. Aby uzyska to barwy czystej czerwieni za pomoc kodowania
RGB, wpisujemy:
<body bgcolor="#FF0000">
A teraz to bardziej subtelne:

<body bgcolor="peach">

Jeli nie wystarczy nam jednolity kolor, w tle moemy rwnie umieci obrazek. W tym celu
uyjemy atrybutu background.
Wymagan wartoci tego atrybutu jest adres URL obrazka. Przegldarka automatycznie powiela
obrazek poziomo i pionowo, tak aby zapeni cae okno.
Zazwyczaj powinno si wybiera niewielkie, stonowane elementy graficzne tak, aby to byo
interesujce, ale jednoczenie nie przeszkadzao w przegldaniu strony. No i plik niewielkich rozmiarw szybciej przemierzy bezkresy Internetu ni ilustracja zajmujca cay ekran.
Na rysunku 5.21 przedstawiono sposb, w jaki przegldarka o rozszerzonych moliwociach wywietla jeden niewielki obrazek, powielajc go tak, by zapenione zostao cae to:
<body background="obrazki/tlo.gif">

(
7701 -
Za pomoc elementw graficznych o rnych rozmiarach mona tworzy bardzo interesujce

efekty w poziomie i w pionie. Na przykad, wski i wysoki plik graficzny moe suy do oddzielenia nagwka dokumentu:
<body background="obrazki/pionowy.gif">
<h3>Dziedzictwo kumkwata</h3>
Przez cae wieki powstao wiele mitw i legend zwizanych z kumkwatem.
W kumkwacie dopatrywano si nie tylko waciwoci leczniczych;
szlachetny owoc przynosi dobrym szczcie, a zym -- szczeglnie tym,
ktrzy zaprzeczali jego cudownym cechom -- pecha.
!

(% "

Jeli obrazek pionowy.gif jest wysoki i wski, janiejszy u gry i ciemniejszy u dou, uzyskamy efekt
podobny do tego na rysunku 5.22.

((
+A 007 0 *+,
Inny efekt da nam to w postaci obrazka szerokiego, ale bardzo niskiego (rysunek 5.23).

(3
#78
Atrybut background wedug standardw HTML 4 i XHTML nie jest ju zalecany podobne
efekty mona uzyska za pomoc stylw.

))
Atrybut bgproperties jest rozszerzeniem znacznika <body> obsugiwanym tylko przez przegldark Internet Explorer. Przyjmuje tylko jedn warto: fixed. Powoduje, e to zostaje zablokowane i nie jest przewijane wraz z tekstem. Tak wic w poniszym przykadzie plik znakH2O.gif
moe suy jako znak wodny strony:
<body background="obrazki/znakH2O.gif" bgproperties=fixed">
!"#$%&"#$%
'

=
Kiedy ju zmienimy kolor lub grafik suc jako to strony, moemy zaj si kolorem samego
tekstu czasem (np. gdy to okrelimy jako czarne) jest to wrcz niezbdne. Standardowy atrybut
text znacznika <body> suy wanie do tego celu: ustawia kolor tekstu nie penicego roli odsyacza dla caego dokumentu.
Warto atrybutu text to kolor wyraony podobnie jak w przypadku ta za pomoc wartoci
RGB lub nazwy (patrz podpunkt 6.3.1.1 oraz dodatek G). Na przykad, aby uzyska tekst niebieski
na bladotym tle, napiszemy:
<body bgcolor="#777700" text="blue">
Oczywicie, najlepiej wybra kolor kontrastowy wzgldem koloru lub grafiki ta.
Standardy HTML 4 i XHTML nie zalecaj ju korzystania z atrybutu text, podobne efekty mona uzyska za pomoc stylw.

#$
Atrybuty link, vlink oraz alink znacznika <body> su do okrelania koloru odsyaczy (elementw opisanych znacznikiem <a>) w caym dokumencie. Wszystkie trzy przyjmuj warto
w postaci kodu RGB lub nazwy koloru, podobnie jak bgcolor i text.
Atrybut link okrela kolor wszystkich odsyaczy, z ktrych uytkownik jeszcze nie skorzysta.
Atrybut vlink definiuje kolor odsyaczy ju wczeniej odwiedzonych (ang. visited link), za
alink odsyaczy aktywnych (ang. active link), czyli wanie wybranych (gdy uytkownik
przesunie nad taki odsyacz wskanik myszy i kliknie).
Podobnie jak kolor tekstu, kolor odsyaczy musi by dobrze widoczny na tle strony, odsyacz musi
take wyrnia si z otaczajcego tekstu.
Standardy HTML 4 i XHTML nie zalecaj ju korzystania z tych atrybutw, podobne efekty mona uzyska za pomoc stylw.

<,
Atrybut leftmargin, obsugiwany tylko przez przegldark Internet Explorer, pozwala okreli
wcicie lewego marginesu wzgldem lewej krawdzi okna przegldarki (podobnie jak na kartkach
ksiki). Inne przegldarki ignoruj ten atrybut i wyrwnuj zawarto strony do lewego brzegu
okna przegldarki.
Warto atrybutu leftmargin to liczba cakowita wyraajca gboko wcicia lewego marginesu w pikselach, warto domylna to 0. Margines wypeniany jest kolorem lub grafik ta.
Na przykad, Internet Explorer wywietla poniszy tekst, jako wyrwnany do lewego marginesu
szerokiego na 50 pikseli (rysunek 5.24):
<body leftmargin=50>
Internet Explorer umoliwia wcicie<br>
<-- tego marginesu<br>
wzgldem lewej krawdzi okna przegldarki.
</body>
"

(% "

(6
1A. 00 *+, /
22
"
),
Podobnie jak leftmargin, atrybut topmargin jest obecnie obsugiwany wycznie przez przegldark Internet Explorer. Wstawiany jest do znacznika <body> i definiuje przestrze, jaka zostanie pozostawiona u gry dokumentu. Margines taki jest wypeniany kolorem lub grafik ta.
Zawarto strony jest wywietlana dopiero poniej marginesu szerokiego na liczb pikseli podan
jako warto topmargin, ustawienie domylne to 0.
Na przykad, poniszy tekst zostanie wywietlony przynajmniej o 50 pikseli niej ni grna krawd okna przegldarki (patrz rysunek 5.25):
<body topmargin=50>
<p align=center>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Internet Explorer pozwala zachowa w grnej czci dokumentu
nieco dodatkowego miejsca.
</p>
</body>

(
7 1. 00 *+,
!"#$%&"#$%
'

6

Okrelenie stylu zwizanego ze znacznikiem <body> moliwe jest rwnie poprzez kaskadowe
arkusze stylw CSS. Jednym ze sposobw jest okrelenie stylu wewntrz znacznika, poprzez atrybut style; jednak zalecane jest umieszczenie stylu w nagwku, poprzez znacznik <style> lub
w zewntrznym arkuszu. Odwoanie si z poziomu stylw do konkretnego znacznika <body>
umoliwia atrybut class (cho jeli w danym dokumencie moe by tylko jeden znacznik <body>,
to jaki jest cel okrelania nazwy klasy?). O stylach i definicjach klas w rozdziale 8.
7> )

!
Atrybuty background i bgcolor mog wystpi w jednym znaczniku <body>, ale obrazek penicy rol ta zasoni okrelony przez nas kolor chyba e w pliku graficznym okrelono obszary
przezroczyste, o ktrych byo powiedziane wczeniej. Ale nawet jeli grafika cakowicie zasania
barwne to, warto umieci atrybut bgcolor w znaczniku <body> i ustawi go na odpowiedni
warto. Przecie uytkownik moe wyczy pobieranie grafiki, a wic take grafiki ta. To moe
spowodowa, e strona bdzie wygldaa bardzo nieatrakcyjnie. Ponadto, jeli nie wstawimy atrybutu bgcolor lub nie okrelimy grafiki ta, przegldarki zignoruj atrybuty opisujce kolor tekstu
i odsyaczy, zastpujc je wartociami domylnymi lub tymi okrelonymi przez uytkownika.
*! !

Rne zabiegi z kolorami powiod si tylko wtedy, gdy uytkownik posiada w komputerze wywietlacz obsugujcy przynajmniej 256 kolorw, du ilo pamici, nieograniczon przepustowo cza sieciowego i dobrze widzi obraz. W rzeczywistoci jednak wielu uytkownikw ma monitory monochromatyczne lub oferujce tylko ograniczon liczb kolorw, niewiele pamici RAM
na buforowanie grafiki, cze o bardzo niskiej przepustowoci i... saby wzrok.
Z powodu tych wanie ogranicze powinnimy w miar moliwoci unika opisywanych rozszerze. Podobnie jak za dawnych czasw uytkownicy macintoshy zmieniali w dokumentach kroje
czcionek niczym szantaysta wyklejajcy list z wycinkw gazet (Ja tu mam 40 fontw i mam
zamiar uy kadego z nich!), wielu autorw nie moe powstrzyma si przed dodaniem teksturowego ta w swoich stronach WWW (Ja tu mam 13 kor drzewnych i 22 marmury i mam zamiar
uy ich wszystkich!).
W rzeczywistoci ta teksturowe wnosz niewiele informacji do naszego dokumentu, chyba e cao zostaa naprawd dobrze przemylana. Warto dokumentu tak czy inaczej ley w jego treci
w tekcie i odpowiednich ilustracjach, a nie w zachwycajcym wzorze ta. eby nie wiem jak
piknie to wszystko wygldao, czytelnikom takie ozdoby niewiele pomog, a mog jedynie
zmniejszy przejrzysto strony.
Lepiej wic nie korzysta z opisywanych kolorowych rozszerze jzyka, chyba e w celowo
frywolnych miejscach sieci WWW lub tam, gdzie takie zabiegi rzeczywicie zwikszaj warto
strony (np. na stronach reklamowych lub marketingowych).
!

(% "
( , ,

Oto problemy, na jakie mona si natkn w zwizku z obrazkami w tle:
Czas adowania dokumentu wydua si o czas potrzebny do zaadowania obrazka.
Wywietlanie reszty dokumentu nie jest moliwe dopty, dopki nie zostanie pobrane to.
Obrazek w tle zajmuje miejsce w lokalnej pamici podrcznej przegldarki, by moe kosztem
innych, naprawd uytecznych elementw graficznych. Przez to inne dokumenty, by moe
nawet nie posiadajce adnej grafiki w tle, pobierane s duej.
W systemie czytelnika mog by niedostpne kolory uyte w obrazku ta; spowoduje to
dithering grafiki due obszary okrelonego koloru zamieniane s na powtarzajce si
wzorce kilku przyblionych barw. To zmniejsza czytelno nie tylko samej grafiki,
ale rwnie tekstu.
Poniewa przegldarka musi cay czas wywietla obraz w tle (a nie po prostu wypenia to
jednym kolorem), przewijanie dokumentu moe odbywa si bardziej opornie.
Nawet jeli tego od razu nie zauwaamy, to zawsze tekst na tle grafiki bdzie trudniej
przeczyta. Czasem moe to by niemoliwe.
W rnych komputerach s dostpne rne kroje czcionek; fonty uyte w przegldarce autora
mog wspgra z tem, fonty u czytelnika mog si z tem gry.
( , 2,#,,2

Cakiem sporo problemw moe rwnie wystpi w zwizku z kolorami ta. Oto niektre:
Wybrany kolor, wedug nas taki liczny, moe czytelnikowi wydawa si okropny. Po co
denerwowa odbiorc i zmienia kolory, ktre ustawi sobie w przegldarce?
By moe jestemy zwolennikami stylu biao na czarnym; wiele osb woli natomiast styl
praktykowany od ponad trzech tysicy lat, czyli czarno na biaym. Zamiast prbowa trafi
w czyje gusta, po prostu przyjmijmy, e uytkownik ustawi ju sobie przegldark wedug
wasnych upodoba.
S osoby nie potrafice rozrnia kolorw. My stworzymy stron o wydumanej kombinacji
barw, dla nich pozostanie ona cakowicie nieczytelna. Szczeglnie trzeba uwaa na to, by nie
uywa koloru zielonego do oznaczania odsyaczy odwiedzonych lub nieodwiedzonych.
Miliony mczyzn nie potrafi odrni koloru zielonego od czerwonego.
Godzinami dobierana barwa moe nie by dostpna na wywietlaczu czytelnika. Przegldarka
wybiera wtedy najbliszy moliwy kolor. W przypadku wywietlaczy o bardzo ograniczonej
liczbie kolorw (takich jak te w kilku milionach uywanych wci systemw Windows
z kartami VGA obsugujcymi 16 kolorw), najbliszy kolor dla ta i tekstu moe si okaza...
tym samym kolorem!
Z tych samych powodw identycznie mog wyglda odsyacze odwiedzone, nieodwiedzone
i aktywne.
Zmieniajc kolory tekstu, a szczeglnie odsyaczy odwiedzonych i nieodwiedzonych, moemy
wprowadzi cakiem spore zamieszanie. Zmuszamy wtedy czytelnika do eksperymentowania,
klikania to tu, to tam, i odkrywania co jest czym na naszej stronie.
!"#$%&"#$%
'

<

Wikszo projektantw stron nie ma wiedzy z zakresu psychologii poznawczej, sztuk

piknych czy projektowania przemysowego, a jednak beztrosko bawi si kolorami.
Czasem warto jednak spyta specjalist, co sdzi o takim, a nie innym doborze kolorw.
-
Nie mona jednak zaprzeczy, e dziki tym rozszerzeniom mona stworzy naprawd niesamowicie wygldajce strony. A eksperymentowanie z kolorami to naprawd wietna zabawa. Naley
wic testowa i realizowa ciekawe pomysy. Po prostu trzeba to robi z rozwag.
!"#
Jest jeszcze jeden rodzaj multimediw dostpny dla duej czci internautw: dwik. Wikszo przegldarek traktuje pliki dwikowe jak oddzielne dokumenty, pobierane i wywietlane
przez specjalne aplikacje pomocnicze, aplety lub moduy rozszerzajce. Z drugiej strony, np. Internet Explorer posiada wbudowany dekoder dwiku i obsuguje specjalny znacznik umoliwiajcy zintegrowanie z dokumentem pliku audio i odgrywanie go w tle jako podkad strony. [aplety
i obiekty, 12.1] [zawarto zagniedona, 12.2]
Trzeba pochwali programistw Internet Explorera za zbudowanie mechanizmu spajajcego
dwik z dokumentami HTML i XHTML tworzy on naprawd ciekawe moliwoci. Jednoczenie trzeba jednak przestrzec autorw wykorzystujcych te specyficzne znaczniki i atrybuty: uzyskany w ten sposb efekt nie bdzie widzialny (a raczej syszalny) na innych przegldarkach. I nie
mona zakada, e w przyszoci w tych innych przegldarkach dwik bdzie obsugiwany wanie w ten sposb. Miejmy si wic na bacznoci.
'
)!
Za pomoc znacznika <bgsound> mona stworzy podkad muzyczny strony WWW. Znacznik
dziaa tylko w przegldarce Internet Explorer. Plik audio jest pobierany i odgrywany w czasie pierwszego pobrania i wywietlania dokumentu. Po odwieeniu strony plik odgrywany jest ponownie.

Funkcja:
Odgrywa podkad dwikowy strony WWW
Atrybuty:
LOOP
Znacznik zamykajcy:
w HTML-u brak
SRC
Zawiera:
Nic
Stosowany wewntrz:
body_content
!

' )*"+"

Atrybut src w znaczniku <bgsound> jest wymagany. Jego warto to adres URL odpowiedniego
pliku dwikowego. Na przykad, kiedy uytkownik pierwszy raz pobierze dokument zawierajcy
znacznik:
<bgsound src="audio/powitanie.wav">
odegrany zostanie jeden raz plik powitanie.wav prawdopodobnie zawierajcy komunikat powitalny.
Obecnie przegldarka Internet Explorer obsuguje trzy rne formaty plikw dwikowych: wav
(podstawowy format obsugiwany przez komputery PC), au (podstawowy format dwikowy
w systemach uniksowych) oraz MIDI (uniwersalny schemat kodowania zapisu muzycznego). Informacje o obsugiwanych formatach zawarto rwnie w tabeli 5.1.
# 1

A. :.. : . 4
Format
Typ
Rozszerzenie
Rodzima platforma formatu
GIF
grafika
gif
wszystkie
JPEG
grafika
jpg, jpeg, jpe
wszystkie
XBM
grafika
xbm
Unix
TIFF
grafika
tif, tiff
wszystkie
PICT
grafika
pic, pict
wszystkie
Rasterfile
grafika
ras
Sun
MPEG
film
mpg, mpeg
wszystkie
AVI
film
avi
Microsoft
QuickTime
film
qt, mov
Apple
AU
dwik
au, snd
Sun
WAV
dwik
wav
Microsoft
AIFF
dwik
aif, aiff
Apple
MIDI
dwik
midi, mid
wszystkie
PostScript
dokument
ps, eps, ai
wszystkie
Acrobat
dokument
pdf
wszystkie

)
Podobnie jak w przypadku zagniedanych plikw filmowych, atrybut loop znacznika <bgsound> powoduje, e podkad dwikowy jest odgrywany okrelon liczb razy (lub na okrgo),
a przynajmniej do czasu, gdy uytkownik przejdzie do nastpnej strony lub zamknie przegldark.
Warto atrybutu loop to liczba cakowita oznaczajca liczb odtworze pliku dwikowego lub
infinite (plik odtwarzany w nieskoczono).
!"#$%&"#$%
'

<3
'

Na przykad:
<bgsound src="audio/tadum.wav" loop=10>
spowoduje odegranie melodyjki tadum dziesi razy, natomiast:

<bgsound src="audio/halas.wav" loop=infinite>
oznacza odtwarzanie pliku halas.wav w nieskoczono.
'1 !!)
4
5
Istniej take inne sposoby doczania dwiku do dokumentw, na przykad za pomoc bardziej
oglnych mechanizmw obsugujcych rwnie inne typy zagniedonej zawartoci multimedialnej. Najbardziej znan alternatyw znacznika <bgsound> jest <embed>, pierwotnie obsugiwany
tylko przez Netscape; znacznik ten w standardach HTML 4 i XHTML zosta zastpiony elementem <object>. Wicej informacji na ten temat mona znale w rozdziale 12.
$%
W przegldarce Internet Explorer, chyba gwnie z myl o twrcach reklam, udostpniono obsug animowanego tekstu. Animacja nie jest skomplikowana tekst przewijany jest poziomo
w oknie przegldarki, ale dobrze nadaje si do uwydatnienia sloganw, hase, nagwkw i innych
tego typu informacji. Z drugiej strony, podobnie jak w przypadku znacznika <blink>, taki animowany tekst moe szybko zdenerwowa odbiorc. Jeli wic koniecznie musimy z takich urozmaice korzysta, rbmy to z rozwag.

6
Znacznik <marquee> opisuje tekst przewijany poziomo w oknie przegldarki. Jest obsugiwany tylko przez Internet Explorera i nie wchodzi w skad standardw. Rozmiarem przewijanego obszaru,
jego wygldem, sposobem wyrwnania oraz szybkoci przewijania steruj odpowiednie atrybuty.
Znacznik <marquee> oraz jego atrybuty s ignorowane przez pozostae przegldarki, nie dotyczy
to jednak samej zawartoci tego elementu. Zawarto ta wywietlana jest po prostu jako tekst statyczny, bez formatowania opisanego znacznikami.

Internet Explorer umieszcza tekst <marquee> w otaczajcej zawartoci podobnie jak elementy
graficzne mona wic stosowa tutaj takie same typy wyrwnania. Atrybut align przyjmuje
wartoci top, middle lub bottom i powoduje odpowiednie wyrwnanie animowanego tekstu
wzgldem otaczajcej zawartoci. Tak wic:
<marquee align=top>
!$

, $- !

spowoduje zrwnanie obszaru przewijanego ze szczytem otaczajcego tekstu. Wpyw na wygld

caoci maj tutaj take opisane dalej atrybuty height, width, hspace i vspace, sterujce rozmiarami tego obszaru.

Funkcja:
Tworzy obszar tekstu przewijanego
Atrybuty:
ALIGN
BEHAVIOR
BGCOLOR
CLASS
DIRECTION
HEIGHT
HSPACE
LOOP
SCROLLAMOUNT
SCROLLDELAY
STYLE
VSPACE
WIDTH
Znacznik zamykajcy:
</marquee>, nigdy nie jest pomijany
Zawiera:
plain_text
Stosowany wewntrz:
body_content

$# )
Te trzy atrybuty steruj stylem, kierunkiem oraz czasem przewijania tekstu.
Atrybut behavior przyjmuje jedn z trzech wartoci:
scroll (domylna)
Warto scroll powoduje, e przewijany tekst wyglda jak reklama na placu Times Square:
najpierw opisany obszar jest pusty, potem wjeda na niego tekst z jednej strony (z ktrej
to zaley od atrybutu direction) i przewijany jest a do opuszczenia tego obszaru.
slide
Ta warto powoduje, e opisywany obszar jest pocztkowo pusty, potem tekst przewijany jest
od jednej strony do drugiej. Po osigniciu drugiej krawdzi obszaru tekst zatrzymuje si
i przewijany jest w przeciwnym kierunku. Teraz ju przez cay czas pozostaje widoczny.
alternate
Tekst jest od pocztku w peni widzialny na jednym z kocw obszaru przewijania. Nastpnie
przesuwany jest do drugiego koca, tam zatrzymuje si i wraca.
!"#$%&"#$%
'

<

Jeli nie okrelimy atrybutu behavior, domylnie przyjmowana jest warto scroll.
Atrybut direction okrela kierunek przewijania tekstu. Dopuszczalne wartoci to left (domylna) lub right. Zauwamy, e pocztkowa pozycja tekstu to przeciwiestwo kierunku przewijania: left oznacza, e tekst na pocztku znajduje si po prawej stronie, a potem jest przewijany w lewo. Pamitajmy rwnie, e osoby przyzwyczajone do czytania z lewej do prawej bd
miay trudnoci z odczytaniem tekstu przewijanego w praw stron.
Atrybut loop przyjmuje warto cakowit i okrela liczb przewini tekstu. Mona rwnie
okreli jego warto jako infinite wtedy tekst przewijany bdzie dopty, dopki uytkownik nie pobierze do przegldarki nowego dokumentu.
Spjrzmy jak to wyglda w praktyce:
<marquee align=center loop=infinite>
Kumkwaty nie s zapychajce
..............
I maj doskonay smak!
</marquee>
W powyszym przykadzie tekst rozpoczyna wdrwk po prawej stronie okna (ustawienie domylne), jest przewijany do samego koca w lewo, a nastpnie znw pojawia si z prawej
i tak w kko, dopki uytkownik nie przejdzie do nastpnej strony. Zauwamy obecno kropek
i spacji; nie jest moliwe doczanie jednego przewijanego napisu do drugiego.
Przewijanie z atrybutem slide nie prezentuje si korzystnie przy wczonym powtarzaniu.

Atrybut bgcolor umoliwia zmian koloru ta przewijanego tekstu. Dopuszczalne wartoci to
albo liczba wyraajca natenie barw RGB, albo standardowa nazwa kolorw (patrz dodatek G).
Aby stworzy obszar przewijania o tym kolorze, trzeba napisa:
<marquee bgcolor=yellow>

Atrybuty height i width okrelaj rozmiary przewijanego obszaru. Jeli ich nie podamy, obszar
ten rozciga si na ca szeroko okna Internet Explorera i jest akurat na tyle wysoki, eby zmieci si w nim przewijany tekst.
Oba atrybuty przyjmuj wartoci numeryczne, oznaczajce absolutn wielko w pikselach, lub
wartoci procentowe, oznaczajce rozmiar w stosunku do wysokoci i szerokoci okna przegldarki.
Na przykad, aby stworzy obszar przewijania o wysokoci 50 pikseli i zajmujcy jedn trzeci
okna przegldarki, napiszemy:
<marquee height=50 width="33%">
Zazwyczaj obszar powinien by na tyle wysoki, eby tekst si w nim mieci, czsto natomiast
dugo okrela si krtsz ni tekst powstaje wtedy jakby okienko podgldowe, za ktrym
przesuwane s sowa.
!!

. " /0

)$)
Atrybuty hspace i vspace su do definiowania przestrzeni pomidzy przewijanym tekstem
a otaczajc zawartoci.
Oba atrybuty wymagaj jako argumentu liczby cakowitej wyraajcej wymagan przestrze w pikselach. Atrybut hspace tworzy przestrze z lewej i prawej strony przewijanego tekstu, vspace
opisuje przestrze nad i pod nim. Aby pozostawi wok caego tekstu 10-pikselowy margines,
naley napisa:
<marquee vspace=10 hspace=10>

,

Te atrybuty opisuj prdko i pynno przewijania.
Warto atrybutu scrollamount to liczba pikseli, o jak przesuwany jest tekst za kadym razem.
Im nisza warto, tym pynniejsze ale rwnie wolniejsze przewijanie.
Warto atrybutu scrolldelay to liczba milisekund pomidzy kolejnymi przesuniciami tekstu.
Im jest ona mniejsza, tym przewijanie jest szybsze.
Za pomoc niskiej wartoci scrolldelay mona przyspieszy przesuwanie tekstu opisanego nisk wartoci scrollamount. Na przykad:
<marquee scrollamount=1 scrolldelay=1>
Tekst bdzie przesuwany co jeden piksel, ale tak szybko jak tylko to moliwe. W tym przypadku
szybko przewijania bdzie ograniczona tylko moliwociami komputera uytkownika.
&'
()
W sieci WWW mona przesya i udostpnia zupenie dowoln zawarto. W tej czci rozdziau
przyjrzymy si innym sposobom odwoywania si do grafiki, filmw, materiaw dwikowych
i dokumentw w innych formatach.
. 7$

7
Pord rnych formatw multimedialnych grafika jest traktowana specjalnie przez przegldarki
(poza nielicznymi): moliwe jest wstawianie obrazkw bezporednio w dokument HTML lub
XHTML i wywietlanie w jednym oknie wraz z pozosta zawartoci. Czasem jednak, o czym ju
wspomniano, warto jest odwoywa si do zewntrznych plikw graficznych. Dotyczy to szczeglnie plikw duych, w ktrych licz si detale, ale niekoniecznie obowizkowo obecnych w samym dokumencie. Inne elementy multimedialne np. cyfrowe audio i wideo, rwnie doczane
s poprzez zewntrzne odsyacze.
!"#$%&"#$%
'

<)

Zazwyczaj do odwoania si do zewntrznych elementw multimedialnych w biecym dokumencie stosujemy znacznik zakotwiczenia (<a>). Podobnie jak w przypadku innych odsyaczy, po jego
wybraniu przegldarka pobiera obiekt multimedialny i prezentuje go uytkownikowi, by moe za
porednictwem zewntrznej aplikacji lub moduu rozszerzajcego. Proces ten zawsze skada si
z dwch etapw: przedstawienie dokumentu odwoujcego si do obiektu multimedialnego, a dopiero potem przedstawienie samego obiektu (po wybraniu odsyacza). [<a>, 6.3.1]
W przypadku obrazkw mona wybra spord dwch sposobw prezentacji: jako element zagniedony w dokumencie (znacznik <img>) lub jako element zewntrzny (<a>). Jeli elementy
graficzne s niewielkie i stanowi integraln cz dokumentu, powinno si je wstawia bezporednio na stronie. Jeli s due i maj tylko dodatkowe znaczenie poprzez znacznik <a>.
Jeli wybierzemy ten drugi sposb, czasem warto poinformowa czytelnika, jak duy jest plik,
ktry ma zosta pobrany; mona rwnie przedstawi jego miniaturk. Uytkownik sam zdecyduje, czy obrazek warto pobra.
.8

%
9

Do dowolnego zewntrznego dokumentu, bez wzgldu na jego format lub typ, odwoujemy si za
pomoc konwencjonalnego znacznika <a>:
<a href="muzyka/hymn.au">Hymn Hodowcw Kumkwatw</a> to hod oddany
tysicom hodowcw szlachetnych owocw na caym wiecie.
Podobnie jak w przypadku dowolnych innych dokumentw, do ktrych si odwoujemy, serwer

dostarcza obiekt multimedialny do przegldarki kiedy tylko uytkownik wybierze odsyacz. Jeli
przegldarka zauway, e pobrany dokument nie jest w formacie HTML lub XHTML, automatycznie uruchamia odpowiednie narzdzie lub w inny sposb przedstawia pobran zawarto uytkownikowi.
Moliwe jest skonfigurowanie przegldarki tak, by do obsugi rnych formatw dokumentw
wykorzystywaa odpowiednie aplikacje pomocnicze. Na przykad, do odgrywania plikw dwikowych moe suy program przetwarzajcy dane audio, do odgrywania filmw odgrywarka
wideo. Jeli przegldarka nie zostaa skonfigurowana do obsugi okrelonego formatu dokumentu,
poinformuje o tym uytkownika i bdzie on mg po prostu zachowa taki plik na dysku. Potem
z pobranych w ten sposb danych mona skorzysta za pomoc oddzielnego narzdzia.
Przegldarki okrelaj format i specjalnie traktuj pliki multimedialne, kierujc si dwiema wskazwkami: albo typem MIME (Multipurpose Internet Mail Extension) opisujcym plik i dostarczanym przez serwer, albo rozszerzeniem nazwy pliku. Preferowany sposb to MIME za pomoc
tego standardu mona do szczegowo opisa plik i jego zawarto. Jednak w rozpoznawaniu
pierwszorzdne znaczenie ma rozszerzenie np. .gif lub .jpg (pliki GIF i JPEG) czy .au (specjalny plik dwikowy).
Poniewa nie wszystkie przegldarki obsuguj typy MIME i nie we wszystkich skonfigurowano
odpowiednie aplikacje pomocnicze, w nazwach obiektw multimedialnych zawsze naley stosowa poprawne rozszerzenia (patrz tabela 5.1 we wczeniejszej czci rozdziau).
!"

. " /0

.* $!

5)
5 &
Bardzo wane jest, aby dobrze przemyle sposb, w jaki odwoamy si do zewntrznego obiektu
multimedialnego. Uytkownik musi wiedzie, jaki element kryje si za odsyaczem oraz jaka aplikacja ma zosta wykonana. Ponadto wikszo obiektw multimedialnych to due pliki, wic wypada jako zaznaczy, jak dugiego pobierania moe si spodziewa uytkownik.
Oprcz odsyacza do duego pliku graficznego i opisujcego go tekstu warto rwnie wstawi miniaturk obrazka, dziki ktrej czytelnik zorientuje si, czy duy plik moe by dla niego przydatny.
.'

W sieci WWW mona zamieci niemal dowolny typ dokumentu w postaci elektronicznej nie
tylko grafik, dwik czy pliki wideo. Aby je jednak wywietli, przegldarka musi skorzysta
z aplikacji pomocniczej. Wspczesne przegldarki obsuguj oprogramowanie w postaci wtyczek
i jak opisano w rozdziale 12., mog zosta rozszerzone tak, by na przykad wywietla obiekty
multimedialne jako zagniedone w tekcie.
Na przykad, wyobramy sobie firm, w ktrej szeroka dokumentacja produktw przechowywana
jest w formacie jakiej popularnej aplikacji do skadu tekstu, np. FrameMaker, Quark XPress czy
PageMaker. Do dystrybucji takich dokumentw sie WWW nadaje si wrcz doskonale, ale konwersja do HTML-a lub XHTML-a zajaby zbyt wiele czasu.
Rozwizanie polega na przygotowaniu kilku dokumentw HTML lub XHTML sucych jako
katalogi plikw we waciwych formatach i pobraniu tych plikw, uruchamiajcych odpowiedni
aplet. Mona rwnie zaoy, e uytkownik zainstalowa w przegldarce odpowiedni wstawk
lub skonfigurowa j tak, by uruchamiana bya aplikacja pomocnicza. Typow wstawk jest program Acrobat Reader. Kiedy przegldarka pobiera dokument w formacie Acrobat (.pdf), wstawka
ta jest automatycznie uruchamiana i dokument zostanie wywietlony czsto bezporednio w oknie
przegldarki.
!"#$%&"#$%
'

<9

HTML I XHTML. Przewodnik Encyklopedyczny

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML I XHTML. Przewodnik Encyklopedyczny

Uploaded by

Copyright:

Available Formats

IDZ DO

6.5. Obrazki zawierajce mapy odsyaczy .............................................................................199

15.5. Atrybuty elementw......................................................................................................469

: <7" '"  =

: > )' )'  #3

: ;9   )' 3

Zauwamy rwnie, e warto wzgldna (procentowa) w atrybucie width zostaa umieszczona

W XHTML-u wszystkie wartoci atrybutw umieszcza si w cudzysowach.

  

! "  #"  $%$&

( )#)    *+  ,-

specjalnych segmentw sterujcych pomidzy poszczeglnymi czciami skadowymi obrazka

! "  #"  $%$&

! "  #"  $%$&

Podawa rozmiary obrazka

! "  #"  $%$&

Natomiast w poniszym przykadzie tekst zastpuje symboliczn ikonk:

W przegldarce tekstowej zamiast ikonki nowosc.gif pojawi si napis (Nowo!). W atrybucie

! "  #"  $%$&

Poniej widzimy, w caej swej okazaoci, szlachetne owoce kumquat:

Szczyt obrazka jest wyrwnywany ze szczytem najwyszego elementu w biecej linijce

Atrybut align=texttop powoduje, e w przegldarce Netscape szczyt obrazka jest

! "  #"  $%$&

Naley rwnie zauway, e przegldarka Internet Explorer w wersji 3 oraz pniejszych

W przypadku Netscape oraz wczesnych wersji Internet Explorera wartoci bottom

Atrybut align=absbottom informuje przegldark, e spd obrazka ma zosta zrwnany

Na rysunku 5.14 przedstawiono sposb interpretacji powyszego fragmentu w HTML-u.

! "  #"  $%$&

! "  #"  $%$&

<img src="kumquat.jpg" border="4" />

To kolejny naoczny dowd, e obrazki s oddzielnymi plikami, adowanymi niezalenie od strony.

:,  * 

Po zmianie wielkoci okna przegldarki, wielko obrazka zostanie odpowiednio dopasowana.

! "  #"  $%$&

Jeli podamy szeroko procentow, a pominiemy wysoko, przegldarka zachowa procentowy

( ,  *  * 

Na rysunku 5.19 pokazano, jak powyszy kod jest interpretowany.

Kiedy uytkownik kliknie taki obrazek, przegldarka automatycznie wysya wsprzdne x i y

! "  #"  $%$&

! "  #"  $%$&

Video Interleave (AVI) poprzez oprogramowanie wbudowane w system Microsoft Windows. Co

Tutaj natomiast film bdzie odgrywany raz po raz, w nieskoczono:

Zaptlanie filmw niekoniecznie musi suy do denerwowania ogldajcego. Niektre specjalne

 (%     " 

A teraz to bardziej subtelne:

Za pomoc elementw graficznych o rnych rozmiarach mona tworzy bardzo interesujce

 (%     " 

 (%     " 

7>    )  

*!  ! 

 (%     " 

( ,   , 

( , 2,# , ,  2 

Wikszo projektantw stron nie ma wiedzy z zakresu psychologii poznawczej, sztuk

' )*"+ " 

Rodzima platforma formatu

jpg, jpeg, jpe

spowoduje odegranie melodyjki tadum dziesi razy, natomiast:

oznacza odtwarzanie pliku halas.wav w nieskoczono.

spowoduje zrwnanie obszaru przewijanego ze szczytem otaczajcego tekstu. Wpyw na wygld

.  " /0  

. 7$ 

Podobnie jak w przypadku dowolnych innych dokumentw, do ktrych si odwoujemy, serwer

: <7" '" =

: > )' )' #3

: ;9 )' 3

! " #" $%$&

( )#) *+,-

! " #" $%$&

! " #" $%$&

! " #" $%$&

! " #" $%$&

! " #" $%$&

! " #" $%$&

! " #" $%$&

:,*

! " #" $%$&

( ,

! " #" $%$&

! " #" $%$&

(% "

(% "

(% "

7> )

*! !

(% "

( , ,

( , 2,#,,2

' )*"+"

. " /0

. 7$

. " /0

.* $!