XHTML I CSS. Dostępne Witryny Internetowe

XHTML i CSS.
Dostpne
witryny internetowe
Autor: Jon Duckett
Tumaczenie: Radosaw Meryk
ISBN: 978-83-246-1293-2
Tytu oryginau: Accessible XHTML
and CSS Web Sites Problem Design Solution
Format: 168 x237, stron: 488
Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Wykorzystaj nowoczesne technologie, aby Twoje strony WWW stay si bardziej dostpne
Jak przekonwertowa witryn zgodnie z wymaganiami dostpnoci?
Jak korzysta z technologii XHTML i CSS, aby tworzy przyjazne
dla wszystkich strony WWW?
Jak tworzy serwisy przeznaczone dla wielu platform?
Nowoczesne technologie zapewniania dostpnoci koncentruj si na umoliwieniu
korzystania z internetu wszystkim ludziom - w jak najwikszym zakresie. Szczeglnie
istotne jest przystosowanie witryn do potrzeb osb niepenosprawnych. Tworzenie takich
stron ma istotne znaczenie nie tylko ze wzgldw spoecznych, ale take ekonomicznych
i prawnych (Amerykanie i Brytyjczycy wprowadzili ustaw antydyskryminacyjn, ktra
nakada na przedsibiorstwa obowizek posiadania witryn internetowych dostpnych
dla wszystkich). Niektrzy twrcy stron WWW obawiaj si, e ograniczy to ich
kreatywno. Jednak wspczesne narzdzia sprawiaj, e aplikacje nie tylko nie trac
na atrakcyjnoci, ale jeszcze powiksza si grupa potencjalnych odbiorcw, co moe
przekada si na wzrost zyskw firmy.
Ksika, ktr trzymasz w rkach, prezentuje rne zastosowania nowych technologii
na konkretnym przykadzie konwersji witryny napisanej w jzyku HTML na nowoczesn
stron w XHTML, wykorzystujc kaskadowe arkusze stylw o zwikszonej dostpnoci.
Utworzone w ten sposb strony nie dyskryminuj niepenosprawnych uytkownikw,
majcych trudnoci z czytaniem maych czcionek lub posugiwaniem si tradycyjnymi
urzdzeniami sterujcymi. Podrcznik ten jest przeznaczony dla wszystkich, ktrzy
korzystali wczeniej z HTML, a teraz chc zaktualizowa swoj wiedz i umiejtnoci.
Dziki tej ksice naprawd szybko nauczysz si pisania kodu w XHTML czy korzystania
z CSS przy zarzdzaniu ukadem strony, a take poznasz reguy i wytyczne dotyczce
dostpnoci oraz technologie j wspomagajce.
Transformacja kodu HTML na XHTML
Narzdzia XML i moliwoci ich uywania
Zastosowanie CSS do definiowania stylu dokumentw
Rodzaje selektorw
Czcionki i waciwoci tekstowe
Pseudoelementy tekstowe
Wymiary, kolor i to
Walidacja arkuszy CSS
Wykorzystanie CSS do zarzdzania ukadem dokumentu
Reguy i wytyczne dotyczce dostpnoci
Aby Twoje strony byy atrakcyjne i dostpne dla wszystkich!
Spis treci
O autorze ................................................................................................................................................... 7
Przedmowa ............................................................................................................................................... 9
Wprowadzenie ..........................................................................................................................................11
Rozdzia 1. Przedstawiamy witryn ........................................................................................................17
Problemy z jzykiem HTML ............................................................................................ 18
Projekt ........................................................................................................................ 19
Terminologia ........................................................................................................... 20
Wprowadzenie do jzyka HTML ................................................................................. 21
Problemy zwizane z przegldarkami ......................................................................... 25
Lekcje ze rodowiska telefonw komrkowych ........................................................... 26
Dostpno ............................................................................................................ 27
Oddzielenie stylu od treci ....................................................................................... 29
X w nazwie XHTML ............................................................................................... 30
Historia technologii CSS ............................................................................................... 31
Korzystanie z arkuszy stylw ......................................................................................... 32
Wprowadzenie do przykadowej witryny ........................................................................... 34
Strona gwna ........................................................................................................ 37
Strony z listami produktw ....................................................................................... 44
Strony ze szczegowymi danymi o produktach .......................................................... 47
Struktura witryny ..................................................................................................... 51
Aktualizacja witryny ................................................................................................. 52
Podsumowanie ............................................................................................................ 54
Rozdzia 2. Transformacja kodu HTML na XHTML ................................................................................. 55

Problem ....................................................................................................................... 56
Projekt ........................................................................................................................ 56
Strict XHTML .......................................................................................................... 58
Transitional XHTML ................................................................................................. 58
Frameset XHTML .................................................................................................... 59
Przykadowy dokument XHTML ................................................................................. 59
Pisanie dokumentw zgodnych ze skadni XML ........................................................ 61
XHTML i CSS. Dostpne witryny internetowe

Dlaczego XML? ....................................................................................................... 71
Rnice pomidzy wersjami Transitional i Strict jzyka XHTML 1.0 .............................. 74
Obsuga XHTML w narzdziach do tworzenia stron WWW ............................................ 81
Walidacja ............................................................................................................... 83
Rozwizanie ................................................................................................................. 87
Strona gwna ........................................................................................................ 87
Strony z list produktw .......................................................................................... 98
Strony ze szczegowymi danymi o produktach ........................................................ 100
Walidacja ............................................................................................................. 104
Podsumowanie .......................................................................................................... 105
Rozdzia 3. Zastosowanie CSS do definiowania stylu dokumentw ....................................................107

Problem ..................................................................................................................... 108
Projekt ...................................................................................................................... 108
Jak dziaa CSS? .................................................................................................... 108
Wicej informacji na temat dodawania regu CSS ..................................................... 115
Selektory .............................................................................................................. 120
Czcionki ............................................................................................................... 124
Waciwoci tekstowe ........................................................................................... 132
Pseudoelementy tekstowe ..................................................................................... 138
Model ramek ........................................................................................................ 139
Elementy <div> i <span> ....................................................................................... 142
Waciwoci ramek ............................................................................................... 144
Wymiary ............................................................................................................... 150
Kolor i to ............................................................................................................. 154
Rozwizanie ............................................................................................................... 162
Strona gwna ...................................................................................................... 163
Strony z listami produktw ..................................................................................... 173
Strony ze szczegowymi danymi produktw ............................................................ 175
Podsumowanie .......................................................................................................... 178
Rozdzia 4. Zaawansowane zastosowania jzyka CSS ........................................................................179

Problem ..................................................................................................................... 180
Projekt ...................................................................................................................... 180
Pseudoklasy i pseudoelementy .............................................................................. 180
Listy .................................................................................................................... 195
Waciwoci tabel ................................................................................................. 198
Widoczno elementw ......................................................................................... 202
Wiele arkuszy stylw i regua @import ..................................................................... 204
Priorytety regu ...................................................................................................... 206
Walidacja arkuszy CSS .......................................................................................... 207
Rozwizanie ............................................................................................................... 208
Poprawa wygldu czy .......................................................................................... 208
Obramowania tabel na stronach ze szczegowymi danymi produktw ....................... 210
Podsumowanie .......................................................................................................... 213
Rozdzia 5. Wykorzystanie CSS do zarzdzania ukadem dokumentu ................................................215

Problem ..................................................................................................................... 216
Projekt ...................................................................................................................... 216
Schematy okrelania pozycji w CSS ........................................................................ 216
Warstwy nakadajce si na siebie ......................................................................... 232
Spis treci
Popularne ukady .................................................................................................. 235

Moliwoci wyboru ukadu ...................................................................................... 251
Rozwizanie ............................................................................................................... 253
Podsumowanie .......................................................................................................... 262
Rozdzia 6. Dostpno .........................................................................................................................263

Problem ..................................................................................................................... 264
Projekt ...................................................................................................................... 265
Technologie wspomagajce ................................................................................... 266
Dodatkowe korzyci ze stosowania si do regu dostpnoci .................................... 267
Wytyczne dotyczce dostpnoci ............................................................................ 268
Tworzenie dostpnych stron WWW .......................................................................... 270
Rozwizanie ............................................................................................................... 302
Zdefiniowanie odpowiednikw tekstowych dla elementw nietekstowych ................... 302
Sprawdzenie dynamicznej zawartoci oraz kolorw i kontrastu .................................. 303
Dodanie czy w celu pominicia powtarzajcych si czy nawigacyjnych ................... 303
Podsumowanie .......................................................................................................... 306
Rozdzia 7. Tworzenie dostpnych tabel i formularzy oraz testowanie witryny .............................307

Problem ..................................................................................................................... 308
Projekt ...................................................................................................................... 309
Tabele ................................................................................................................. 309
Formularze ........................................................................................................... 322
Zagadnienia dostpnoci witryn dla osb niesyszcych ........................................... 336
Dostpne ramki .................................................................................................... 337
Ostatnia deska ratunku sam tekst ..................................................................... 340
Sprawdzanie zgodnoci witryny z wymogami dostpnoci ......................................... 341
Rozwizanie ............................................................................................................... 344
Strony ze szczegowymi danymi o produktach ........................................................ 344
Testowanie witryny za pomoc programu Bobby ....................................................... 346
Testowanie za pomoc LIFT ................................................................................... 347
Podsumowanie .......................................................................................................... 348
Rozdzia 8. Spojrzenie w przyszo ...................................................................................................349

Problem ..................................................................................................................... 350
Projekt ...................................................................................................................... 350
Sytuacja bieca ................................................................................................... 350
Nowe urzdzenia ................................................................................................... 351
Lekcje ze rodowiska urzdze mobilnych ............................................................... 352
Moduy abstrakcyjne jzyka XHTML ......................................................................... 353
XHTML 1.1 ........................................................................................................... 355
XHTML Basic ........................................................................................................ 361
Dokumenty hybrydowe ........................................................................................... 363
Jzyk XHTML na rnych urzdzeniach .................................................................... 368
Rozwizanie ............................................................................................................... 377
Podsumowanie .......................................................................................................... 381
Dodatek A Kocowy kod przykadu ......................................................................................................383

Strona gwna ............................................................................................................ 384
Strony z list produktw .............................................................................................. 386
Strony ze szczegowymi danymi o produktach .............................................................. 389
Arkusz stylw CSS ...................................................................................................... 391

Dodatek B Elementy XHTML ...................................................................................................................397
Dodatek C Waciwoci CSS .................................................................................................................435
Waciwoci dotyczce czcionek .................................................................................. 435
Waciwoci tekstowe ................................................................................................. 439
Waciwoci dotyczce koloru i ta ............................................................................... 442
Waciwoci dotyczce obramowania ........................................................................... 444
Wymiary .................................................................................................................... 446
Waciwoci marginesw ............................................................................................ 449
Waciwoci wypenienia ............................................................................................. 449
Waciwoci list ......................................................................................................... 450
Waciwoci opisujce pozycje .................................................................................... 451
Waciwoci obrysu .................................................................................................... 456
Waciwoci tabel ....................................................................................................... 456
Waciwoci dodatkowe .............................................................................................. 458
Waciwoci midzynarodowe ...................................................................................... 460
Jednostki dugoci ...................................................................................................... 461
Dodatek D Sekwencje sterujce ..........................................................................................................463

Wbudowane sekwencje sterujce jzyka XML ............................................................... 464
Encje znakowe XHTML ................................................................................................ 464
Dodatek E Typy MIME ............................................................................................................................467

Tekst ........................................................................................................................ 468
Grafika ...................................................................................................................... 468
Dokumenty wieloczciowe ......................................................................................... 468
Dwik ...................................................................................................................... 468
Wideo ....................................................................................................................... 469
Aplikacje .................................................................................................................... 469
Skorowidz ..............................................................................................................................................471
Przedstawiamy witryn
W cigu stosunkowo krtkiego czasu internet rozwin si w niezwykym tempie. Kiedy zaczem uczy si jzyka HTML, nie wyobraaem sobie nawet, e dzi tak wiele osb bdzie korzysta z internetu. Siedzc przy moim komputerze desktop PC, nie wyobraaem sobie rwnie
tego, e obecnie bd musia pisa strony, do ktrych mona uzyska dostp za pomoc tak wielu
rnych urzdze na przykad telefonw komrkowych bd przystawek telewizyjnych
typu STB. Te nowe urzdzenia do znacznie si rni od komputerw desktop maj ekrany
innych rozmiarw, a take inn moc obliczeniow i dostpn ilo pamici, a poza tym pozwalaj
uytkownikom na dostp do informacji na wiele rnych sposobw. Biorc pod uwag skal
rozwoju internetu oraz sposb, w jaki si zmieni, nie ma si co dziwi, e ci z nas, ktrzy zajmuj si tworzeniem witryn WWW, musz zadba o zaktualizowanie swoich umiejtnoci oraz
e narzdzia wykorzystywane do tej pracy rwnie wymagaj modernizacji.
W tym rozdziale opisano, dlaczego warto nauczy si pisania stron za pomoc XHTML i CSS
oraz dlaczego tak bardzo wane jest zadbanie o to, aby strony byy dostpne. W tym rozdziale
zaprezentujemy rwnie przykadow witryn, z ktr bdziemy pracowa na kartach tej
ksiki.
W tym rozdziale:
Q
przeanalizujemy niektre problemy, jakie sprawia uywanie tradycyjnego jzyka

HTML;
dowiemy si, dlaczego istotne znaczenie ma oddzielenie stylu od treci;
zapoznamy si z przykadow witryn Fajna Promocja; jest to witryna, ktr

bdziemy aktualizowali na kartach tej ksiki;
dowiemy si, jakie s cele modyfikacji projektu witryny;
dowiemy si czego wicej na temat korzyci, jakie mona uzyska, tworzc

dostpne witryny z wykorzystaniem XHTML i CSS.
Po przeczytaniu niniejszego rozdziau Czytelnicy bd rozumieli powody, dla ktrych naley

zaktualizowa swoje umiejtnoci i zmodyfikowa witryny, oraz bd wiedzieli, jakie dziaania
bd wykonywane z przykadow witryn zamieszczon w tej ksice.
18
Problemy z jzykiem HTML

Rwnolegle ze zmianami, jakie zaszy w internecie, zmienia si rwnie jzyk HTML. Organizacja W3C (World Wide Web Consortium zajmujca si ustalaniem wielu standardw
internetowych) opublikowaa kilka wersji jzyka HTML. Pierwsza pozwalaa na korzystanie
z zestawu znacznikw do opisywania struktury dokumentu, ale nie oferowaa zbyt wielu mechanizmw zarzdzania ich wygldem. Wersja HTML 4 jest o wiele bardziej zoona od swojej
pierwotnej wersji. Wasnoci dodawane w cigu wielu lat do jzyka HTML dostarczyy projektantom stron internetowych wielu mechanizmw zarzdzania wygldem stron. Na przykad,
autorzy stron WWW uzyskali mechanizm zarzdzania dokadn szerokoci tabel (co do piksela),
rozmiarem i wielkoci czcionek, kolorami, grafik uywan w tle itp.
Dodanie nowych regu pozwalajcych projektantom na zarzdzanie wygldem stron oznaczao
moliwo tworzenia atrakcyjnych stron, ktre doskonale dziaay na komputerach biurkowych
o przecitnej mocy obliczeniowej. Pomimo tego, projektanci stron w dalszym cigu napotykali
trudnoci:
Q
Producenci rnych przegldarek opracowuj rne sposoby wykonywania tych

samych zada, co oznacza, e witryny nie wygldaj ani nie dziaaj tak samo we
wszystkich przegldarkach.
Rni uytkownicy stosuj ekrany rnych rozmiarw oraz rne rozdzielczoci,

zatem strony nie wygldaj tak samo na wszystkich komputerach.
Powstay nowe urzdzenia pozwalajce na dostp do internetu. Nie byy to ju

wycznie biurowe komputery PC, ale take przystawki telewizyjne typu STB,
telefony komrkowe itp., a kade nowe urzdzenie charakteryzowao si nowym
zestawem funkcji. Na przykad strona zawierajca tabel o szerokoci 700 pikseli
nie zmieci si na ekranie telefonu o rozmiarze 128 pikseli.
Jeli programista (lub jego szef) zechcia zmieni jakie elementy projektu strony
na przykad kolory lub uywane czcionki, musia zmienia wszystkie strony,
poniewa informacje te byy zapisane w kodzie HTML kadej ze stron.
W miar jak projektanci zaczli uywa coraz wicej kodu HTML do zarzdzania
ukadem stron, kod rdowy stron stawa si coraz obszerniejszy, a jego pisanie
stawao si coraz bardziej skomplikowane. To z kolei stwarzao wicej okazji
do popeniania bdw podczas tworzenia oraz edycji witryn.
Uytkownicy z wadami wzroku mog mie trudnoci z przeczytaniem niektrych

fragmentw tekstu w witrynach, a osoby z powanym osabieniem widzenia w ogle
nie s w stanie porusza si po niektrych witrynach.
W rezultacie niektre firmy zaczy tworzy po kilka wersji swoich witryn WWW opracowywano rne wersje dla rnych przegldarek i urzdze, a nawet tworzono wersje wycznie
tekstowe majce na celu spenienie wymaga osb niepenosprawnych. Oczywicie oznaczao
to mnstwo dodatkowej pracy, a czasami prowadzio do sytuacji, w ktrej pewne wersje witryn
nie byy tak aktualne, jak pozostae. Oczywicie takie rozwizanie jest dalekie od idealnego.
Rozdzia 1.
19
Podsumowujc, posugiwanie si tradycyjnym jzykiem HTML stwarzao nastpujce problemy:

Q
W miar rozwoju jzyka HTML wprowadzano do niego mnstwo regu definiowania

stylu pozwalajcych autorom stron WWW na zarzdzanie wygldem swoich stron.
Jednak te usprawnienia w jzyku oznaczay, e reguy rzdzce wygldem stron
mieszano z zasadnicz treci dokumentw i wiele z nich dziaao w zamierzony
sposb wycznie w biurkowych komputerach PC.
Poniewa internet jest tak rozbudowanym medium, powinien by dostpny

dla maksymalnie szerokiego grona uytkownikw. Dotyczy to rwnie osb
niepenosprawnych majcych trudnoci z czytaniem, syszeniem lub posugujcych
si mysz nie tak sprawnie, jak inni.
Jak mona zauway, zmiany, jakie trzeba wprowadzi w sposobie tworzenia stron, odzwierciedlaj jedynie wzrost popularnoci internetu oraz zmiany w sposobach posugiwania si
nim. W tym rozdziale dowiemy si, w jaki sposb i dlaczego zmieniy si jzyki tworzenia
stron WWW.
Projekt
Po opublikowaniu HTML 4.0, organizacja W3C (odpowiedzialna za opracowywanie specyfikacji jzyka HTML) zdecydowaa, e nadszed czas na wielk przemian w sposobie pisania
witryn internetowych. Problemy opisane w poprzednim podrozdziale daway wzkazwk organizacji W3C, e zmiany powinny odzwierciedla nastpujcy prosty fakt:
Rni uytkownicy wymagaj rnego sposobu prezentacji tych samych informacji.
Oto trzy najczstsze powody, dla ktrych trzeba prezentowa informacje w witrynach WWW na
rne sposoby:
Q
Rne technologie uywane do przegldania stron internetowych maj rne

moliwoci i nie wszystkie s w stanie wywietli ten sam projekt tak samo
dla wszystkich uytkownikw.
Informacje dostpne online czsto s przydatne w rnych formatach, na przykad

w postaci wydrukowanej lub w formie slajdw prezentowanych na konferencji.
Niektre osoby maj trudnoci z dostpem do informacji w sposb, ktry dla innych
jest atwy. Na przykad osoby z wadami wzroku mog mie trudnoci z czytaniem
tekstu na ekranie komputera.
Ten ostatni punkt jest szczeglnie wany, bowiem internet w znaczcy sposb zmienia codzienne
ycie wielu osb zastosowania internetu obejmuj szeroki zakres operacji (poczwszy od
moliwoci robienia zakupw, korzystania z usug bankowych i pacenia rachunkw online,
a skoczywszy na prbach elektronicznego gosowania) w zwizku z tym nie mona wyczy z grona jego uytkownikw osb niepenosprawnych.
20

Internet moe mie olbrzymi wpyw na ycie osb niepenosprawnych, zwaszcza tych,
dla ktrych opuszczanie domu jest trudniejsze ni dla osb sprawnych. W zwizku z tym
jest bardzo wane, aby z osigni postpu technicznego mogli korzysta wszyscy.
Organizacja W3C zaproponowaa nastpujce rozwizanie tych problemw: usunicie z zestawu
znacznikw wszystkich elementw, przez lata dodawanych do HTML, ktre suyy do prezentacji danych, a zatem takich jak <font> i <center> oraz atrybuty bgcolor i color. Pozostae
znaczniki HTML opisuj struktur i semantyk dokumentw, na przykad tytu dokumentu,
pocztek i koniec akapitu, teksty reprezetujce nagwki itp. Nie oznacza to, e projektanci stron
WWW stracili kontrol nad wygldem dokumentw. Zaproponowano im uywanie arkuszy
stylw osobnych dokumentw okrelajcych sposb wywietlania stron. W rzeczywistoci
arkusze stylw maj kilka innych zalet. Zostan one opisane w dalszej czci tego rozdziau.
W rezultacie oddzielenia stylu od treci organizacja W3C opracowaa dwa standardy: XHTML
i CSS. Producenci przegldarek powinni zadba o ich obsug, natomiast autorzy stron WWW
powinni si ich nauczy. Nie naley si jednak tym zraa. W rzeczywistoci oba jzyki s
bardzo podobne do jzyka HTML, ktry ju znamy. Dziki temu proces uczenia si wymienionych technologii jest do szybki i prosty.
Przed przystpieniem do analizowania tego, w jaki sposb zmieniy si jzyki tworzenia stron
internetowych, w nastpnym punkcie objanimy kilka kluczowych terminw. Dziki temu bd
mia pewno, e Czytelnicy rozumiej je w taki sam sposb, jak ja. Nastpnie opowiem troch
o tym, jak to si stao i dlaczego dzi stajemy przed koniecznoci nauki nowych jzykw oraz
wyjani rnice pomidzy prezentacyjnym a strukturalnym zestawem znacznikw.
Terminologia
Z pewnoci wiele spord terminw opisanych poniej bdzie brzmiao znajomo dla wikszoci
Czytelnikw. Trzeba jednak pamita, e czasami rne osoby opisuj t sam rzecz, uywajc
nieco innych poj. Szybki przegld niezbdnych definicji da nam pewno, e Czytelnicy przed
przystpieniem do aktualizowania swoich umiejtnoci bd waciwie rozumieli pojcia zamieszczone w poniszym tekcie.
Znacznik to zbir znakw ujty w nawiasy trjktne. Na przykad poniej zamieszczono popularny znacznik otwierajcy:
<td>
Towarzyszy mu znacznik zamykajcy. Wszystko, co znajduje si pomidzy tymi znacznikami,

wystpuje jako dane tabeli (ang. table data std litery td):
</td>
Element odnosi si zarwno do znacznika otwierajcego, jak i zamykajcego, plus wszystkiego,

co znajduje si pomidzy nimi. Na przykad poniej pokazano element komrki tabeli:
<td>234.5</td>
Rozdzia 1.
21
Tre wystpujc pomidzy znacznikami otwierajcym i zamykajcym okrela si terminem

zawarto elementu.
Elementy mog mie atrybuty, ktre dodatkowo je opisuj. Atrybuty zawsze umieszcza si
wewntrz znacznika otwierajcego element. Oto przykad uycia atrybutu align:
<td align="right">
Powyszy atrybut wskazuje na to, e zawarto komrki tabeli powinna by wyrwnana do

prawej.
Dla niektrych elementw nie uywa si znacznikw zamykajcych. Na przykad element <img>
moe mie kilka atrybutw, ale nie ma adnej zawartoci nie ma niczego pomidzy znacznikiem otwierajcym a zamykajcym:
<img src="/images/120x80_logo.gif" alt="Logo Acme" width="120" height="80">
Elementy bez zawartoci okrela si jako tzw. puste elementy. Jak si przekonamy w rozdziale 2.,
puste elementy w XHTML zapisuje si inaczej, zatem trzeba si nauczy pisania znacznikw
<img>, <br> i <hr> w nowy sposb.
Przedstawione pojcia pokazano na rysunku 1.1.
Rysunek 1.1
Wprowadzenie do jzyka HTML

Usunicie z jzyka HTML wszystkich regu dotyczcych stylu mona uzna raczej za krok
wstecz ni za ekscytujc now cech jzyka. Aby zrozumie, dlaczego jzyk HTML ewoluowa
w taki sposb tzn. dlaczego wprowadzono w nim zestaw znacznikw do zarzdzania stylami,
takich jak elementy <font> i atrybut bgcolor, skoro miay one by usunite naley przyjrze
si, jak doszo do tego, e HTML rozwin si w jzyk, ktry dzi znamy i uywamy. Jak to
zwykle bywa, odpowied okazaa si oczywista poniewczasie c, problemy nie zawsze
dadz si przewidzie.
HTML opracowano jako jzyk znacznikw w celu opisania struktury i semantyki dokumentu.
Elementy i atrybuty HTML miay wskazywa takie fragmenty, jak tytu dokumentu, nagwki,
akapity, dane nalece do akapitu itp. W najwczeniejszej postaci internet mia suy do
przesyania dokumentw naukowych, tak by spoeczno miaa szybki i atwy dostp do opublikowanej pracy. Oto fragment dokumentu, ktry moe by przykadem informacji wygenerowanych dla spoecznoci naukowej (ten kod jest zapisany w pliku r01_list01.html dostpnym
do pobrania):
22

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/
REC-html401-19991224/strict.dtd">
<html>
<head>
<title>Wpyw internetu na teorie psychologiczne na temat jednostki</title>
</head>
<body>
<h1>Wpyw internetu na teorie psychologiczne na temat jednostki</h1>
<h2>Streszczenie</h2>
<p>W artykule omwiono cele, w jakich uytkownicy internetu przyjmuj okrelon
osobowo online oraz wpyw tych zachowa na teorie psychoanalityczne
dotyczce jednostki i tosamoci czowieka.</p>
<p>O ile psychologowie od dawna sugerowali, e nasze pojcie jednostki
powinno odzwierciedla pojedyncz, jednorodn i racjonaln osobowo, wiele
osb przyjmuje osobowo online, ktra znacznie si rni od osobowoci
w yciu codziennym.</p>
...
</body>
</html>
Chocia tego typu dokument by bardzo praktyczny i umoliwia pracownikom naukowym

znacznie atwiejsze wspdzielenie informacji w porwnaniu z drukowanymi magazynami,
prezentacja tych dokumentw bya do monotonna. Mona to zauway na rysunku 1.2, gdzie
pokazano, jak wygldaby dokument z listingu w przegldarce.
Rysunek 1.2
Bardzo szybko wiele osb zdao sobie spraw z olbrzymiego potencjau internetu. Uytkownicy
ci zaczli tworzy strony WWW suce rnym celom od osobistych stron do rozbudowanych serwisw firmowych majcych na celu reklam produktw i usug firm. Nie mino
zbyt wiele czasu, zanim autorzy stron WWW zdali sobie spraw z tego, e dobrze by byo
zarzdza wygldem tworzonych przez nich witryn. Oczekiwali tego samego poziomu kontroli
nad wygldem stron, jaki maj twrcy magazynw drukowanych nad swoimi dokumentami.
Na przykad, projektanci stron WWW chcieli mie moliwo zmiany czcionek i kolorw
uywanych w dokumentach oraz okrelania miejsc, w ktrych ma si pojawi tekst na stronie.
W rezultacie producenci najpopularniejszych przegldarek zaczli dodawa nowe elementy
i atrybuty zarzdzajce wygldem stron WWW. Zarwno firma Netscape, jak i Microsoft usilnie
prboway zdoby jak najwikszy udzia w rynku przegldarek dziki zapewnieniu projektantom WWW wikszej kontroli nad stronami wywietlanymi w przegldarkach. Wiele takich
elementw wprowadzia rwnie organizacja W3C w kolejnych wersjach jzyka HTML.
Rozdzia 1.
23
Ten nowy zestaw znacznikw jest znany jako prezentacyjny lub inaczej stylistyczny, poniewa ma wpyw na wygld strony (nie opisuje struktury i semantyki dokumentu w sposb
zgodny z pierwotnym przeznaczeniem jzyka HTML). Najwaniejszymi przykadami znacznikw nowego typu s elementy <center> i <font> oraz atrybuty bgcolor i color.
Projektanci stron szybko opanowali sztuczki umoliwiajce im zarzdzanie ukadem stron (ustawianiem pozycji tekstu na ekranie) w sposb podobny do tego, jaki wykorzystywali specjalici
od druku. Dwie najczciej stosowane techniki rozmieszczania tekstu na stronie to uycie tabel
w roli siatek oraz przezroczystych, jednopikselowych plikw GIF (sztuczka znana powszechnie
jako jednopikselowy GIF lub przezroczysty GIF).
Na poniszym listingu pokazano stron z pliku r01_list01.html z dodanymi znacznikami zarzdzajcymi jej prezentacj. Nowy dokument dostpny w pliku r01_list02.html z powodu
znacznikw stylu dodanych do strony jest znacznie obszerniejszy od poprzedniego:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
</head>
<body bgcolor="#000">
<center>
<table width="650" border="1" cellpadding="10" cellspacing="0">
<tr>
<td bgcolor="#999">
<h1>
<font face="Arial, Helvetica, sans-serif" size="5" color="#fff">
Wpyw internetu na teorie psychologiczne na temat jednostki
</font>
</h1>
</td>
</tr>
<tr>
<td bgcolor="#efefef">
<h2>
<font face="Arial, Helvetica, sans-serif" size="4" color="#006">
Streszczenie
</font>
</h2>
W artykule omwiono cele, w jakich uytkownicy internetu przyjmuj
okrelon osobowo online oraz wpyw tych zachowa na teorie
psychoanalityczne dotyczce jednostki i tosamoci czowieka.<br>
O ile psychologowie od dawna sugerowali, e nasze pojcie jednostki
powinno odzwierciedla pojedyncz, jednorodn i racjonaln osobowo,
wiele osb przyjmuje osobowo online, ktra znacznie si rni od
osobowoci w yciu codziennym.
...
</font>
</td>
</tr>
</table>
</center>
</body>
</html>
24

Pomimo e ukad dokumentu w dalszym cigu jest stosunkowo prosty, rozmiar strony znacznie
si zwikszy. Liczba znakw (bez spacji) niemal podwoia si. Plik r01_list01.html mia
zaledwie 529 znakw, podczas gdy dokument r01_list02.html zawiera a 928 znakw. Ta
dodatkowa zoono zwiksza moliwo popenienia bdu, zarwno podczas tworzenia strony,
jak i podczas wprowadzania modyfikacji. Dokument r01_list02.html w postaci, w jakiej wywietla si w przegldarce, pokazano na rysunku 1.3.
Rysunek 1.3
Kiedy reguy zarzdzajce prezentacj strony WWW s pomieszane z waciw zawartoci

strony, zmiana dowolnego aspektu prezentacji witryny (na przykad kroju czcionki nagwkw
lub koloru ta strony) oznacza konieczno zmiany kadej strony w witrynie. Kiedy wemie
si pod uwag fakt, e wiele stron jest zamieconych znacznikami <font> oraz mnstwem
atrybutw prezentacyjnych, znalezienie znacznika, ktry chcemy zmieni, staje si bardzo trudne.
Jak atwo zauway, wprowadzenie definicji stylw do zestawu znacznikw HTML stworzyo
wicej okazji do popenienia bdw.
Rwnoczenie z pisaniem nowych wersji przegldarek zdolnych do obsuenia nowego zestawu
znacznikw, ich producenci starali si uatwi pisanie stron ich autorom poprzez wprowadzenie
moliwoci zdefiniowania kodu, ktry wywietlaby strony nawet wtedy, kiedy kod HTML
zawiera bdy. Oznaczao to, e wielu autorw dokumentw HTML uczyo si zych nawykw.
Nawet niektre wiodce narzdzia do tworzenia stron generoway niezgrabny kod. Co wicej,
poniewa producenci przegldarek tworzyli je w taki sposb, by mogy generowa strony nawet
wtedy, gdy dokumenty zawieray bdy, musiay si zwikszy wymagania w zakresie iloci
miejsca na dysku oraz pamici potrzebnej do dziaania przegldarek.
adne z wprowadzonych usprawnie nie byo z gruntu ze. Gdyby nie mona byo tworzy
atrakcyjnych stron WWW oraz gdyby tworzenie stron WWW nie byo tak atwe, jak jest dzisiaj,
to internet prawdopodobnie nie staby si tak popularny, jak w tej chwili. Jednak jak ju si
przekonalimy, z powodu wprowadzonych nowych znacznikw oraz sposobw kontroli ukadu
dokumentw stosowanych przez projektantw, strony WWW staway si coraz bardziej obszerne.
Rozdzia 1.
25
Zestaw znacznikw nie suy ju tylko do opisania struktury strony oraz wskazywania elementw
dokumentu, ale take zawiera mnstwo znacznikw, ktrych wycznym celem byo zarzdzanie prezentacj strony dla urzdzenia jednego typu: biurkowego komputera PC.
Problemy zwizane z przegldarkami

Problemy zwizane z pisaniem stron zawierajcych reguy zarzdzajce ich wygldem zaostrza
fakt, i sposb, w jaki uytkownicy przegldali strony, zmienia si rwnie szybko, jak rosa
liczba uytkownikw internetu. Jak ju wspominaem, postp w technologiach wiza si z nastpujcymi faktami:
Q
zwikszay si moliwoci procesorw i kart graficznych;
stay si dostpne ekrany o wyszej rozdzielczoci;
spadaa cena wikszych ekranw, a wraz ze spadkiem cen, staway si one coraz
powszechniejsze;
pojawiy si urzdzenia inne ni komputery desktop PC zdolne do korzystania

z internetu, takie jak telefony komrkowe i przystawki STB; obecnie produkuje
si nawet lodwki z wbudowanymi przegldarkami WWW.
Kady z tych aspektw stwarza nowe wyzwania:

Q
W miar poprawy jakoci procesorw i kart graficznych, coraz wicej osb

zachcano do uywania ekranw o wyszej rozdzielczoci.
Ze wzgldu na powszechniejsze wykorzystanie wikszych ekranw, wicej osb

zaczo uywa wyszych rozdzielczoci.
Witryny zaprojektowane dla rozdzielczoci 640480 w rozdzielczoci 1024768

wydaway si mniejsze, dlatego czytanie ich w wyszych rozdzielczociach
stawao si trudniejsze.
Nowe urzdzenia zwykle miay mniejsze ekrany, nisze rozdzielczoci, mniejsz

moc obliczeniow oraz mniej pamici do dyspozycji.
Najwicej wyzwa stwarzay nowe typy urzdze uywanych do dostpu do internetu, takie
jak telefony komrkowe, komputery PDA (na przykad Blackberry i Palm Pilot) oraz przystawki
STB, poniewa ich ekrany znacznie si rniy od ekranw komputerw PC typu desktop (nie
chodzio tylko o nieco wikszy rozmiar lub troch wysz rozdzielczo). Z ca pewnoci dla
autorw stron WWW nie byaby dobra konieczno pisania stron WWW od pocztku dla kadego
urzdzenia, ktre moe uzyska dostp do internetu.
Problemy opisane powyej podkrel to raz jeszcze s zwizane ze sposobem, w jaki zaprojektowano jzyk HTML. Gdyby mona byo oddzieli tre od regu zarzdzajcych
sposobem wywietlania stron na komputerach desktop PC, mona by zaprezentowa t sam
tre dla kolejnego urzdzenia poprzez stworzenie tylko jednego nowego zbioru regu prezentacyjnych wykorzystywanych przez kad stron serwisu WWW (w odrnieniu od koniecznoci modyfikowania kadej strony i dostosowywania jej do stylu waciwego dla nowego
urzdzenia).
26

Oczywicie stworzenie od podstaw nowej wersji witryny dla kadego typu urzdzenia, ktre
moe uzyska dostp do internetu, nie jest rozwizaniem praktycznym. Jak si przekonamy,
mona si wiele nauczy, przygldajc si sposobom, w jakie pierwsze urzdzenia mobilne
korzystay z sieci. Mona miao stwierdzi, e sytuacja opisana powyej spowodowaa zintensyfikowanie wysikw organizacji W3C w kierunku opracowania nowej wersji jzyka XHTML.
Lekcje ze rodowiska telefonw komrkowych

Kiedy producenci telefonw komrkowych postanowili stworzy telefony pozwalajce na
korzystanie z internetu, wiedzieli, e strony HTML dostpne w internecie nie s odpowiednie
dla tych urzdze. Nie tylko strony te byy zaprojektowane dla ekranw znacznie wikszych
i bardziej skomplikowanych, ale rwnie telefony dysponoway znacznie mniejsz iloci pamici
i miay zbyt sab moc obliczeniow, by mona byo uywa ich do przegldania stron.
Kluczowym elementem bya pami, poniewa jak wspomniaem wczeniej, przegldarki
zaprojektowane do pracy na komputerach biurkowych miay obszerny kod pozwalajcy na
wywietlanie stron nawet wtedy, gdy byy z bdami. Jeli wemie si pod uwag, e wymagania systemowe przegldarki Netscape 7.2 to 26 MB miejsca na twardym dysku oraz 64 MB
pamici RAM, nietrudno doj do wniosku, e to za duo jak na przecitny telefon komrkowy.
Poniewa telefony komrkowe korzystaj z internetu w tak bardzo rny sposb w porwnaniu
z komputerami PC, ich producenci opracowali wasny jzyk zaprojektowany specjalnie w celu
udostpniania stron internetowych dla telefonw komrkowych. W rezultacie powstao kilka
konkurujcych ze sob jzykw majcych na celu udostpnianie treci z internetu telefonom
komrkowym na przyklad jzyk WML (Wireless Markup Language) nalecy do grupy
specyfikacji WAP (Wireless Application Protocol), Compact HTML czy te HDML (Handheld
Device Markup Language). Jeli jednak przyjrzymy si bliej tym wszystkim jzykom, przekonamy si, e maj one pewn wspln cech wszystkie dziaaj tak, jakby stanowiy podzbir jzyka HTML, i pozwalaj uytkownikom na wykonywanie nastpujcych operacji:
Q
tworzenie tytuw, nagwkw i tekstu;
definiowanie czy pomidzy stronami;
osadzenie prostych obrazw;
tworzenie prostych tabel;
pobieranie danych od uytkownikw za pomoc prostych formularzy.
W jzykach tych brakowao bardziej zaawansowanych wasnoci przegldarek WWW, na

przykad wywietlania zoonego ukadu stron z wykorzystaniem tabel oraz pobierania informacji
z wykorzystaniem zoonych elementw sterujcych formularzy. Nie mona byo rwnie
wywietla animacji Flash oraz uruchamia skomplikowanych skryptw.
Jzyki te wymagay rwnie od autorw cisego przestrzegania regu skadni przegldarki
telefonw komrkowych nie radziy sobie z niecisociami w kodowaniu, jak gwne przegldarki w komputerach desktop.
Rozdzia 1.
27
Dziki utworzeniu wasnych, mniej rozbudowanych jzykw, producenci telefonw komrkowych mogli stworzy mniej skomplikowane przegldarki wymagajce mniej pamici i mocy
obliczeniowej, i dziki temu zdolne do dziaania w telefonach. Poniewczasie mona zauway,
e wszystkie te dziaania mona porwna do okrywania koa na nowo, podczas gdy zamiast tego mona byo skorzysta z okrojonego zbioru elementw HTML i atrybutw. Tak si jednak
nie stao.
W kilku momentach historii internetu mona byo doj do przekonania. e kade nowe urzdzenie korzystajce z internetu bdzie wymagao opracowania wasnego jzyka odzwierciedlajcego moliwoci tego urzdzenia. Oznaczaoby to konieczno tworzenia kilku rnych
wersji kadej strony osobnej dla kadego urzdzenia. Czytelnikw, ktrzy kiedykolwiek
zmagali si z prbami stworzenia witryny dziaajcej jednoczenie w przegldarce Internet
Explorer i Netscape, taka perspektywa z pewnoci przyprawia o dreszcze. Co wicej, jeli kade
nowe urzdzenie wymagao wasnego jzyka, zaakceptowanie ich byo trudniejsze, poniewa
sukces okrelonego urzdzenia wymaga specjalnego opracowania dla niego treci dostpnych
w internecie.
Jak si przekonamy w ostatnim rozdziale tej ksiki, rozwizanie organizacji W3C umoliwio wszystkim urzdzeniom, zarwno dostpnym na rynku obecnie, jak i w przyszoci, na
uywanie jzykw bazujcych na XHTML. Zanim jednak Czytelnicy bd mogli nauczy si
pracy z wieloma urzdzeniami, musz przej dug drog.
W praktyce, w przypadku tworzenia witryn przeznaczonych dla wielu platform zazwyczaj
strony s generowane dynamicznie na podstawie zawartoci bazy danych (nie s za
tworzone statycznie dla kadego urzdzenia z osobna). Z tego wzgldu, jak przekonamy
si w tej ksice, wane jest zapewnienie, by w bazie danych znalaz si kod XHTML,
ktry mona pniej przeksztaci na potrzeby rnych urzdze.
Dostpno
Wielu projektantw stron internetowych przyjo zwyczaj projektowania witryn internetowych
z dokadnoci co do piksela. Do projektowania ukadu stron wykorzystywali tabele o szerokoci
mierzonej w pikselach, uywali czcionek o staej szerokoci i czsto korzystali z grafiki w celu
opracowywania atrakcyjnego ukadu stron. Takie podejcie uatwiao zapewnienie takiego samego
wygldu strony na rnych komputerach (lub przynajmniej w rnych przegldarkach pracujcych w komputerach biurkowych). Stwarzao to jednak wiele problemw dla osb z wadami wzroku lub majcych trudnoci w poruszaniu mysz.
Wielu uytkownikw komputerw majcych problemy ze wzrokiem uywa do czytania zawartoci ekranu urzdze znanych jako czytniki ekranu. Urzdzenia te obsuguj skomplikowane zestawy skrtw klawiaturowych umoliwiajcych uytkownikom posugiwanie si
oprogramowaniem bez koniecznoci widzenia zawartoci ekranu. Czytniki ekranu to tylko
jeden z wielu typw urzdze dostpnych dla uytkownikw nie w peni sprawnych, a w wielu
krajach obowizuj obecnie przepisy prawne nakadajce obowizek przystosowania wszystkich stron internetowych dla osb niepenosprawnych.
28

Oto niektre problemy, jakie napotykaj uytkownicy z wadami wzroku, odwiedzajc
serwisy WWW:
Q
Do projektowania ukadu stron uywa si tabel. Czsto si zdarza, e czytniki

ekranu przetwarzaj tabele w taki sposb, i zrozumienie treci stron staje si
trudne na przykad poszczeglne fragmenty strony s czytane w zej kolejnoci.
Z powodu zastosowania zej kombinacji kolorw czytanie tekstu staje si trudne.
Tekst wywietla si w czcionkach o staym rozmiarze, co powoduje brak moliwoci

zwikszenia rozmiaru czcionki w przypadku, gdy zachodzi taka potrzeba.
Problemy te podkrel to ponownie mona by rozwiza, gdyby reguy opisujce sposb

prezentacji strony zostay oddzielone od waciwej zawartoci dokumentu (oraz gdyby przestrzegano wskazwek dotyczcych dostpnoci). Na przykad uytkownicy posugujcy si
czytnikami ekranu mogliby usun wizualne formatowanie (poniewa i tak nie widz strony)
i skoncentrowa si na treci strony.
W przypadku dostpnoci, na sposb projektowania i tworzenia stron internetowych wpywa
szereg innych problemw, ktre wykraczaj poza problem oddzielenia stylu od zawartoci.
Dlatego wanie napisaem dwa rozdziay powicone tym problemom, ktre zamieciem za
rozdziaami powiconymi XHTML i CSS. Oto kilka problemw, przed jakimi staj uytkownicy, a ktre bd opisane w tych rozdziaach:
Q
Podczas obsugi formularzy nie zawsze jest jasne, jakie informacje naley wprowadzi
w elemencie sterujcym (kontrolce) formularza, na przykad polu tekstowym, albo jaki
przecznik naley zaznaczy. Z tego wzgldu wane jest, aby wszystkim elementom
sterujcym formularzy towarzyszyy etykiety.
Jeli strona zawiera duy nagwek (czsto z elementami nawigacyjnymi), uytkownik

posugujcy si czytnikiem ekranu bdzie musia wysucha wszystkich tych
informacji przed waciw zawartoci strony. Moe to by bardzo mudne
w przypadku, gdy informacje te powtarzaj si na kadej stronie. Byoby lepiej,
gdyby takie informacje mona byo pomin.
Jeli na stronie s wykorzystywane obrazy do reprezentowania tekstu, ktry jest

niezbdny do zrozumienia treci witryny, i jeli dla tych obrazw nie uywa si
atrybutu alt (w celu dostarczenia tekstowej alternatywy osobom niemogcym
odczyta treci obrazu), uytkownicy posugujcy si czytnikami ekranu nie bd
w stanie dowiedzie si, jak tre reprezentowa obraz.
Nauka tworzenia witryn z wykorzystaniem XHTML i CSS to pierwszy krok na drodze do tworzenia dostpnych witryn WWW, zatem trzeba nauczy si tych podstaw przed przystpieniem
do poznawania innych problemw projektowych, zwaszcza dotyczcych zagadnie dostpnoci (opisano je w rozdziaach 6. i 7.).
Jeli programista tworzy dostpne witryny WWW, uzyskuje przy okazji take inne korzyci
(oprcz speniania wymogw prawnych dotyczcych dostpnoci oraz pomagania osobom niepenosprawnym):
Q
Zwikszenie liczby potencjalnych odwiedzajcych witryn (a w zwizku z tym

potencjalne zwikszenie przychodw), ze wzgldu na udostpnienie witryny osobom,
dla ktrych nie bya ona dostpna wczeniej.
Rozdzia 1.
Udostpnienie treci strony osobom korzystajcym z niej w rnych sytuacjach.

Na przykad, jeli do strony mona uzyska dostp za pomoc czytnika ekranu,
istnieje rwnie prawdopodobiestwo, e bdzie wykorzystana na rozwijajcym
si rynku przegldarek gosowych, ktrych mona uywa w rnych sytuacjach,
na przykad podczas prowadzenia samochodu, uprawiania joggingu oraz wtedy,
gdy nie mona uywa rk do poruszania mysz.
Tworzenie kodu, ktry obok komputerw PC bdzie dostpny dla wielu innych
urzdze.
29
Oddzielenie stylu od treci

U rda wikszoci problemw, ktre przedstawiono do tej pory, lea fakt, i wikszo
tradycyjnych stron HTML zawieraa reguy zarzdzajce sposobem prezentowania informacji.
Istnieje zatem proste rozwizanie. Przekona autorw, aby zaprzestali mieszania znacznikw
prezentacyjnych (inaczej mwic, stylistycznych) z tymi, ktre opisuj struktur dokumentu.
Idea oddzielenia stylu od zawartoci oznaczaa powrt do korzeni jzyka HTML, kiedy zestaw
znacznikw opisywa jedynie struktur i semantyk dokumentu, a nie sposb jego prezentacji.
Pocztkowo moe si wydawa, e takie proste dokumenty HTML stanowi krok w ty w kierunku dni, kiedy internet by szarym, ponurym miejscem. W rzeczywistoci jednak dokumenty
tworzone w ten sposb mog by rwnie atrakcyjne wizualnie.
Zamiast umieszczania regu rzdzcych wygldem dokumentu w tym samym pliku, ktry zawiera
waciw zawarto, reguy te umieszcza si w oddzielnym dokumencie nazywanym arkuszem
stylw. Na przykad mona zapisa w arkuszu stylw regu, ktra informuje, e wszystkie
nagwki 1. poziomu powinny by pisane ciemnoniebiesk czcionk o rozmiarze 5 punktw
i kroju Arial.
Takie podejcie ma wiele innych zalet. Na przykad, z jednego arkusza stylw moe korzysta
kilka dokumentw. W zwizku z tym mona utworzy jeden zbir regu uywany do opisu stylu
wszystkich stron w witrynie Mona rwnie zastosowa odwrotne podejcie powiza kady
dokument z innym arkuszem stylw, tak by ta sama tre wywietlaa si w rny sposb.
Dla Czytelnikw, ktrzy w dalszym cigu nie s przekonani do oddzielenia regu stylu od zawartoci, poniej zestawiem list najwaniejszych zalet takiego podejcia do projektowania
witryn:
Q
Moliwo uwolnienia treci. Mona j prezentowa na rne sposoby dla rnych

uytkownikw.
Prostsze dokumenty rdowe, atwiejsze do pisania.
Jeli dokumenty rdowe s prostsze, istnieje mniejsze prawdopodobiestwo

popenienia bedw podczas edycji dokumentw.
Reguy stylu mona utworzy raz, a nastpnie wykorzystywa dla kadej strony
w witrynie. Nie trzeba ich powtarza na kadej stronie.
Utrzymanie stylu witryny jest atwiejsze nie tylko dlatego, e arkusz stylu spenia rol
szablonu dla wszystkich stron, ale take dlatego, e umoliwia on zmian czcionki lub
koloru dla caej witryny w wyniku zmodyfikowania zaledwie jednego arkusza stylw.
30

Q
Aby udostpni tre strony dla rnych urzdze, wystarczy zapisa nowy arkusz
stylw dla kadego nowego urzdzenia, nie trzeba pisa od podstaw caej witryny
dla kadego urzdzenia.
Po tym, jak przegldarka automatycznie pobierze arkusz stylw przy pierwszym

wejciu na stron korzystajc z arkusza, kolejne strony wykorzystujce ten sam
arkusz stylw aduj si szybciej, poniewa przegldarka zapisuje kopi arkusza
stylw. Poza tym wszystkie strony maj mniejsze rozmiary, poniewa nie
zawieraj regu stylu.
Jak mona zauway, oprcz rozwizania problemw wymienionych wczeniej, oddzielenie

stylu od zawartoci ma rwnie wiele innych zalet.
X w nazwie XHTML
W tym samym czasie, kiedy organizacja W3C zadecydowaa o usuniciu znacznikw zarzdzajcych stylem z jzyka HTML, zdecydowano rwnie pj o krok dalej i zastpi HTML
jzykiem, o ktrym z pewnoci syszaa wikszo Czytelnikw: XML. XML to jzyk uywany do pisania jzykw znacznikw (dlatego czasami okrela si go jako metajzyk znacznikw). Kiedy organizacja W3C wprowadzaa te zmiany, jzyk XML zyskiwa szerok akceptacj we wszystkich dziedzinach programowania. Z jzyka tego mona korzysta na
dowolnej platformie, poniewa (podobnie jak w przypadku jzyka HTML) do przechowywania
danych wykorzystuje on zwyky tekst. XML to jedna z najszerzej stosowanych technologii
w ostatniej dekadzie.
Przeksztacenie HTML w XML miao przygotowa jzyk na nastpn dekad i na dalsze lata.
Z tego wzgldu, w celu zaakcentowania zmian, zamiast opublikowa jzyk HTML 5.0,
organizacja W3C postanowia wyrni now rodzin dokumentw, nazywajc jzyk XHTML
(podobnie jak firma Microsoft opublikowaa Windows XP zamiast Windowsa 2003, a firma
Macromedia opublikowaa pakiet Dreamweaver MX zamiast Dreamweaver 6).
W jzyku XML napisano kilka jzykw, o ktrych z pewnoci syszeli niektrzy
Czytelnicy. Nale do nich jzyki SVG (Scalable Vector Graphics), MathML (jzyk
zaprojektowany do tworzenia rwna matematycznych), XSLT (Extensible Stylesheet
Language Transformations) oraz XML Schemas. W jzyku XML napisano rwnie
setki specjalistycznych jzykw znacznikw.
Utworzenie odmiany jzyka HTML zgodnej z reguami jzyka XML ma wiele zalet. Wicej
informacji na temat tych zalet zaprezentujemy w rozdziaach 2. i 8. W skrcie mona jednak
wymieni nastpujce:
Q
W jzyku XML, jak si przekonamy w rozdziale 2., obowizuj ostrzejsze reguy

skadni w porwnaniu z HTML. To z kolei ma kilka innych zalet:
Q
Producenci przegldarek mog pisa mniej zoone przegldarki zdolne do obsugi

stron XHTML. Takie przegldarki idealnie nadaj si do zastosowania w maych
urzdzeniach o mniejszej iloci pamici w porwnaniu z komputerami desktop.
Z danymi zapisanymi na stronie XHTML mona przeprowadza zoone operacje,

przetwarza je i przeksztaca. Oznacza to, e dane nie s, tak jak we wczeniejszych
wersjach HTML, wykorzystywane wycznie do wizualnej prezentacji.
Rozdzia 1.
Q
31
Dla jzyka XML napisano wiele narzdzi i jzykw. Wszystkie one s dzi
dostpne dla dokumentw XHTML. Dotyczy to rwnie takich narzdzi jak
XSLT oraz interfejsw SAX (Simple API for XML).
W padzierniku 1999 roku organizacja W3C opublikowaa XHTML 1.0 bya to nowa wersja
jzyka HTML zapisana zgodnie z zasadami skadni jzyka XML. Jak dowiemy si w rozdziale
2., istniej trzy wersje jzyka XHTML 1.0:
Q
Strict XHTML 1.0 z ktrej dodatkowo usunito wszystkie stare znaczniki

dotyczce stylu.
Transitional XHTML 1.0 ktra pozwala autorom stron WWW na uywanie

znacznikw opisu stylw z wersji HTML 4.1 z jednoczesnym zaadoptowaniem
skadni XML. Wersj t opracowano przede wszystkim do obsugi starszych
przegldarek znanych jako przegldarki klasyczne (ang. legacy browsers).
Frameset XHTML 1.0 uywana do tworzenia dokumentw z ramkami.
Nie naley si martwi, jeli brzmi to troch skomplikowanie. Wszystko wyjani si

w rozdziale 2. Wersja Strict XHTML 1.0 to po prostu podzbir wersji Transitional
XHTML 1.0, natomiast Frameset XHTML 1.0 zawiera jedynie kilka znacznikw
do obsugi ramek. Co najwaniejsze, kady z tych elementw i atrybutw powinien
by znany Czytelnikom znajcym HTML w kocu XHTML to nic innego, jak
najnowsze wcielenie jzyka HTML.
Historia technologii CSS

Poniewa w dokumentach napisanych w wersji Strict XHTML 1.0 nie byo znacznikw
opisujcych prezentacj, by dokumenty te stay si atrakcyjne, trzeba byo powiza je z arkuszem stylw zarzdzajcym sposobem prezentacji dokumentw.
Organizacja W3C na dugo przed opublikowaniem XHTML utworzya jzyk arkuszy stylw,
ktry idealnie nadawa si do zastosowania na stronach WWW. Wielu autorw stron HTML
korzystao z kaskadowych arkuszy stylw (Cascading Style Sheets CSS) do zarzdzania
podstawowymi aspektami stylu dokumentw, takimi jak czcionki lub kolory ta.
Specyfikacj CSS1 opublikowano w grudniu 1996 roku, natomiast CSS2, bdc rozszerzeniem
CSS1 w maju 1998 roku. Poniewa projektanci WWW juz wczeniej uywali CSS do
zarzdzania wygldem stron WWW oraz z powodu zalet tej technologii, by to oczywisty wybr
dla jzyka XHTML.
Jednym z elementw, ktre sprawiaj, e technologia CSS jest stosunkowo atwa do przyswojenia, jest fakt, e nazwy tzw. waciwoci zarzdzajcych sposobem wywietlania elementw s
bardzo podobne do nazw atrybutw uywanych w HTML. CSS jest jednak rwnie bardzo
rozbudowanym jzykiem, ktry pozwala na znacznie wicej ni to, co mona osign za pomoc zestawu znacznikw opisujcych styl jzyka HTML. Jzyk CSS oferuje, midzy innymi,
nastpujce wasnoci:
32

Q
bardzo szczegow kontrol nad sposobem prezentacji strony;
kontrol nad ukadem dokumentu bez uywania tabel (wicej informacji na ten temat
mona znale w rozdziale 5.);
waciwoci pozwalajce na prezentacj dokumentw strona po stronie (wikszo

osb uywa terminu strona do wydruku);
waciwoci dwikowej wersji dokumentw mog je wykorzysta uytkownicy

z wadami wzroku lub osoby bdce w ruchu, ktre nie mog patrze na ekran.
Sposoby tworzenia atrakcyjnych ukadw stron z wykorzystaniem CSS pokazano w rozdziaach 3., 4. i 5.
Korzystanie z arkuszy stylw

W celu rozwizania problemw zwizanych z przegldaniem witryny internetowej w rnych
przegldarkach oraz w rnych urzdzeniach, a take dlatego, by witryny stay si bardziej
dostpne, najlepszym rozwizaniem jest oddzielenie znacznikw definiujcych struktur dokumentu od regu opisujcych sposb jego wywietlania.
Z oddzielenia projektu od zawartoci pyn nastpujce wnioski:
Q
Trzeba zrewidowa swoje umiejtnoci pisania dokumentw HTML od podstaw

i zapomnie o znacznikach do definiowania stylw dodanych w pniejszych wersjach
HTML. Gwn tre strony mona teraz napisa w wersji Strict jzyka XHTML,
zawierajcej jedynie znaczniki suce do opisywania struktury i semantyki dokumentu.
Reguy rzdzce sposobem wywietlania strony naley zapisa w oddzielnym

dokumencie, do ktrego odwouje si strona XHTML. Jest to arkusz stylw
napisany w jzyku CSS.
Bez bardziej szczegowego omwienia wykorzystywanych jzykw trudno dokadnie przeanalizowa przykady. Pomimo tego w poniszym przykadzie zaprezentowano wersj dokumentu, ktr po raz pierwszy spotkalimy w pliku r01_list01.html, zapisan w XHTML. Dalej
zamieszczono arkusz stylw CSS zarzdzajcy prezentacj strony.
Jak mona zauway w tym przykadzie, z dokumentu usunito nawet tabel (uywan do zdefiniowania ukadu strony) i zastpiono j elementami <div> pozwalajcymi na grupowanie
elementw, do ktrych mona zastosowa style (r01_list03.html):
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="r01_list03.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
Rozdzia 1.
33
<div class="strona">
<div class="naglowek">
<h1>Wpyw internetu na teorie psychologiczne na temat jednostki</h1>
</div>
<div class="tresc">
<h2>Streszczenie</h2>
<p>W artykule omwiono cele, w jakich uytkownicy internetu przyjmuj
okrelon osobowo online oraz wpyw tych zachowa na teorie
psychoanalityczne dotyczce jednostki i tosamoci czowieka.</p>
<p>O ile psychologowie od dawna sugerowali, e nasze pojcie jednostki
powinno odzwierciedla pojedyncz, jednorodn i racjonaln osobowo,
wiele osb przyjmuje osobowo online, ktra znacznie si rni
od osobowoci w yciu codziennym.</p>
...
</div>
</div>
</body>
</html>
Poniej zamieszczono arkusz stylw towarszyszcy temu dokumentowi (r01_list03.css). Nie

naley si przejmowa, jeli ten dokument na pierwszy rzut oka wyglda na skomplikowany.
Kiedy w rozdziale 3. zaczniemy omawianie struktur jzyka, przekonamy si, e wiele konstrukcji
jzyka CSS odpowiada wasnociom, ktrych nauczylimy si przy okazji poznawania atrybutw HTML:
/* Arkusz CSS dla dokumentu r01_list03.html */
body {
background-color:#000;
font-family: arial, verdana, sans-serif;}
div.strona {
width:650px;
border-style:solid; border-width:1px; border-color:#666;}
div.naglowek {background-color:#999; padding:10px;}
div.tresc {background-color:#efefef; padding:10px;}
h1 {
font-size:22pt;
color:#006;}
h2 {
font-size:18pt;
color:#006;}
p {
font-size:14pt;
color:#000;}
Cho pisanie arkusza stylw podobnego do tego, ktry pokazano powyej, tylko dla jednego
dokumentu, moe si wydawa kopotliwe, w przypadku witryn zoonych z wielu stron o podobnym stylu taka technika moe przynie znaczne oszczdnoci czasu. W takim przypadku
nie trzeba bowiem dodawa regu prezentacji do kadego dokumentu, ktry z tych regu korzysta.
Liczne zalety oddzielenia stylu od zawartoci mona zaobserwowa dokadniej w dalszej czci
tej ksiki. W przypadku pojawienia si w przyszoci nowych urzdze, trzeba jedynie rozszerzy
rozwizanie nie trzeba tworzy nowego jzyka dla kadego nowego urzdzenia.
34

Co wicej, w przypadku tworzenia stron WWW zgodnie ze standardami jzykw XHTML
i CSS, do ich przegldania mona uy starszych przegldarek, napisanych jeszcze przed
pojawieniem si tych standardw.
Wprowadzenie do przykadowej witryny

Podczas lektury niniejszej ksiki Czytelnicy bd mieli do czynienia z jedn przykadow
witryn. Witryna naley do fikcyjnej firmy sprzedajcej towary promocyjne lub reklamowe,
takie jak dugopisy, torby, notatniki oraz zabawki antystresowe z nazwami firmy lub nadrukowanym jej logo. W nastpnym podrozdziale zaprezentowano t witryn, wcznie z opisem jej
organizacji i kodem. W kolejnych rozdziaach bdziemy zajmowali si aktualizowaniem tej
witryny.
Fikcyjna firma, dla ktrej bdziemy tworzyli serwis internetowy, nazywa si Fajna Promocja.
Gwn cz tego serwisu stanowi katalog produktw i cennik. Firma nie przyjmuje zamwie online, poniewa przed przyjciem zamwienia musi otrzyma logo klienta (obok tekstu,
ktry ma si pojawi na towarze). To czsto wymaga pracy z projektantami grafiki, ktrych
zadaniem jest dostarczenie efektw swojej pracy we waciwym formacie (poza tym dziki temu
dzia handlowy ma bezporedni kontakt z klientem). Po otrzymaniu projektu grafiki, klient
musi zatwierdzi projekt towaru przed przystpieniem do produkcji.
Pomimo tego, e witryn napisano w HTML, pokazany przykad jest przydatny take dla
osb posugujcych si jzykami programowania dziaajcymi po stronie serwera, takimi
jak ASP/JSP/PHP. Wszystkie te technologie przesyaj bowiem kod HTML do przegldarki,
zatem przykad ten uczy, w jaki sposb pisa kod, ktry ma by przesany do klienta.
Dla celw niniejszej ksiki wyobramy sobie, e witryn Fajna Promocja napisano pod koniec
lat dziewidziesitych. Pamitajmy, e tworzymy witryn, jak chcielibymy spotka dzi,
a witryna w postaci wyjciowej z ca pewnoci wykorzystuje techniki powszechnie uywane
w tamtym czasie. Przy okazji pracy nad stron, warto rwnie powici troch czasu na
dopracowanie stylu.
Aby przetestowa stron, naley pobra jej kompletny kod (zarwno wyjciowej, jak i kocowej
wersji serwisu) z serwera FTP wydawnictwa Helion. W tym samym miejscu jest rwnie
dostpny kod pozostaych przykadw uytych w tej ksice. Mona te pobra kompletny kod
zarwno wyjciowej, jak i kocowej wersji serwisu (a take kod pozostaych przykadw uytych
w tej ksice) z serwera FTP wydawnictwa Helion
Stron gwn serwisu Fajna Promocja pokazano na rysunku 1.4.
Na rysunku 1.4 mona zobaczy, e strona gwna zawiera nagwek oraz kilka elementw
nawigacyjnych umieszczonych poniej logo. Pozostaa cz strony jest podzielona na trzy
kolumny. Taki ukad strony jest bardzo czsto spotykany.
Rozdzia 1.
35
Rysunek 1.4
Jak wspomniaem wczeniej, gwnym celem witryny jest zaprezentowanie katalogu produktw
i cennika. Poszczeglne elementy katalogu znajduj si w lewej kolumnie taki sposb
poruszania si po katalogu mona okreli jako nawigacja wedug kategorii. Kade cze
z kolumny po lewej stronie prowadzi do strony zawierajcej list produktw. S na niej informacje sumaryczne dla wszystkich towarw w wybranej kategorii. Przykad strony z list
produktw pokazano na rysunku 1.5. Mona na nim zobaczy list produktw w kategorii
Torby.
Strona ta ma identyczny trjkolumnowy ukad, jak strona gwna. Strony z list towarw dla
poszczeglnych kategorii s rwnie identyczne pod kadym wzgldem, z wyjtkiem produktw, ktre zawieraj.
Kiedy uytkownik kliknie obraz lub tytu wybranej pozycji, przechodzi do indywidualnej
strony produktu. Przykad jednej ze stron produktu pokazano na rysunku 1.6. Jak mona zauway na podstawie tego zrzutu, strony z produktami maj ukad dwukolumnowy. Usunicie
trzeciej kolumny daje wicej miejsca do wywietlenia szczegowych informacji o produkcie.
U gry kadej strony oraz u dou gwnej kolumny mona zauway dodatkowe cza nawigacyjne do stron zawierajcych takie dane, jak sposb kontaktowania si z firm, skadania
zamwie, informacje o firmie itp. Wszystkie strony maj tak sam struktur, jak strona gwna
zastosowano dla nich ukad trjkolumnowy. Jedynym wyjtkiem jest strona z produktami,
ktre najlepiej si sprzedaj, dla ktrej wykorzystano t sam struktur, jak zastosowano
dla stron z listami produktw.
36
Rysunek 1.5
Rysunek 1.6
Rozdzia 1.
37
Podsumowujc, serwis zawiera trzy gwne typy stron:

Q
stron gwn;
strony z listami produktw;
strony ze szczegowymi danymi produktw.
Kada strona serwisu ma jeden spord wymienionych trzech ukadw, ktre opisano bardziej szczegowo w poniszych punktach. Czytelnicy nie musz dokadnie studiowa poszczeglnych wierszy kodu. Warto jednak przyjrze si oglnej budowie witryny, poniewa
bdziemy do niej czsto wraca podczas lektury dalszej czci ksiki. W tym rozdziale
zamieszczono rwnie kod wyjciowej wersji witryny, tak by mona si byo do niego odnie
podczas wprowadzania kolejnych aktualizacji.
Strona gwna
Podobnie jak w przypadku kadego serwisu, strona gwna jest pierwsz, jak widzi odwiedzajcy w momencie wejcia na stron. Jej zadaniem jest poinformowanie uytkownikw o tym, co
mona znale w witrynie. Jest to rwnie baza, od ktrej uytkownicy mog rozpocz
poruszanie si po serwisie.
Na rysunku 1.7 pokazano linie nakrelone na zrzucie ekranu strony gwnej, ktre pokazuj
lokalizacj tabel zarzdzajcych ukadem strony.
Rysunek 1.7
38

Caa strona jest zapisana wewntrz tabeli zawierajcej jeden wiersz. Tabela ustala szeroko
strony, a jej obramowanie tworzy ramk wok strony. Wewntrz tej tabeli s trzy inne tabele.
Na grze mona zobaczy pierwsz tabel zawierajc nagwek z logo firmy i celem serwisu.
Poniej znajduje si druga tabela zawierajca cza do indywidualnych stron z innymi informacjami, na przykad sposobami zamawiania towarw, danymi kontaktowymi oraz towarami,
ktre sprzedaj si najlepiej. Trzecia tabela zawiera gwn tre strony. W tej trzeciej tabeli
s trzy kolumny:
Q
kolumna 1. zawiera elementy nawigacyjne poszczeglnych sekcji (oraz grafik

stempla gwarancji dostawy);
kolumna 2. zawiera gwn tre strony informacje, po ktre uytkownik

wszed na stron;
kolumna 3. zawiera dodatkowe informacje, na przykad sposb skadania zamwie.
Poniej zamieszczono kod strony gwnej (index.html), ktry rozpoczyna si tak, jak mona
si spodziewa:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fajna Promocja - gadety reklamowe dla firm</title>
Poniszy skrypt zosta wygenerowany przez program Macromedia Dreamweaver po dodaniu obrazu zmieniajcego si po wskazaniu go mysz (ang. rollover image).
<script language="JavaScript" type="text/JavaScript">
<!-function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
Rozdzia 1.
39
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
Wewntrz elementu <body> jest kilka atrybutw definiujcych styl, takich jak bgcolor i link.
Atrybut onLoad zosta wygenerowany przez program Dreamweaver (podobnie jak skrypt) i suy
do adowania obrazw rollover:
<body bgcolor="#fff" alink="#00c" vlink="#036" link="#06c"
onLoad="MM_preloadImages('images/interface/nav_order_on.gif',
'images/interface/nav_bestSellers_on.gif','images/interface/nav_custom.gif',
'images/interface/nav_contactUs_on.gif','images/interface/nav_pens_on.gif',
'images/interface/nav_pads_on.gif','images/interface/nav_bags.gif',
'images/interface/nav_mugs_on.gif','images/interface/nav_stress_on.gif')">
Dalsza cz kodu jest odpowiedzialna za wywietlanie gwnej zawartoci strony. Umieszczono

j wewntrz elementu <center> po to, by znalaza si porodku strony. Caa strona mieci
si wewntrz jednego elementu <table> o szerokoci 800 pikseli. Dziki temu szeroko strony
jest staa. Strona jest otoczona ramk o szerokoci jednego piksela. Gwna tabela zawiera
zaledwie jedn komrk, w ktrej znajduje si pozostaa cz strony.
Wewntrz pojedynczej komrki zawierajcej stron s trzy inne tabele: jedna zawierajca
nagwek strony, druga z elementami nawigacyjnymi i trzecia zawierajca gwn tre strony.
Najpierw jest kod tabeli zawierajcej nagwek strony:
<center>
<table border="1" cellpadding="0" cellspacing="0" width="800"><tr><td>

<table border="0" cellpadding="5" cellspacing="0" width="800">
<tr>
<td bgcolor="#006"><font face="Arial, Helvetica, sans-serif" size="1"
color="#fff"><b> Gadety reklamowe, dugopisy, notatniki, torby, kubki,
zabawki, prezenty reklamowe i wiele innych...</b></font></td>
</tr>
<tr>
<td><img src="images/branding/logo_400x80.gif" alt="logo" border="0"></td>
</tr>
</table>
W drugiej tabeli s elementy nawigacji. Jak mona zauway, w tabeli z elementami nawigacji
jest kod do utworzenia obrazw rollover dla kadej pozycji w grnym pasku nawigacji:

<table border="0" cellpadding="0" cellspacing="1" width="800" bgcolor="#69f">
<tr>
<td width="150" bgcolor="#006"></td>
<td bgcolor="#006"><img src="images/interface/nav_home_on.gif" width="64"
height="17" border="0"></td>
<td bgcolor="#006"><a href="order.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('JakZamawiac','','images/interface/
nav_order_on.gif',1)"><img src="images/interface/nav_order.gif" alt="Jak
zamawia?" name="JakZamawiac" width="110" height="17" border="0"></a></td>
40

<td bgcolor="#006"><a href="bestSellers.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('HitySprzedazy','','images/interface/
nav_bestSellers_on.gif',1)"><img src="images/interface/nav_bestSellers.gif"
alt="Hity sprzeday" name="HitySprzedazy" width="104" height="17"
border="0"></a></td>
<td bgcolor="#006"><a href="custom.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('WgWlasnegoPomyslu','','images/interface/
nav_custom_on.gif',1)"><img src="images/interface/nav_custom.gif" alt="Gadety
wg wasnego pomysu" name="WgWlasnegoPomyslu" width="107" height="17"
<td bgcolor="#006"><a href="contact.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('KontaktZNami','','images/interface/
nav_contactUs_on.gif',1)"><img src="images/interface/nav_contactUs.gif"
alt="Skontaktuj si z nami" name="KontaktZNami" width="82" height="17"
<td width="180" bgcolor="#006"></td>
</tr>
</table>
W trzeciej i zarazem ostatniej tabeli znajduje si gwna tre strony. Tabela zawiera jeden wiersz
podzielony na trzy komrki kadej kolumnie strony odpowiada pojedyncza komrka.
W pierwszej kolumnie znajduj si menu poruszania si po produktach zawierajce obrazki
rollover, podobne do tych znajdujcych si w grnym pasku menu. Aby poprawi czytelno
kodu, dodaem odstp pomidzy poszczeglnymi elementami. Jednak w kodzie dostpnym do
pobrania nie ma spacji pomidzy czami nawigacyjnymi a obrazami wypeniaczami (ang. spacer
images) (w innym przypadku w przegldarce Internet Explorer byyby widoczne przerwy).

<tr>
<td width="150" bgcolor="#d9ecff" valign="top">
<img src="images/interface/1px.gif" height="15" width="150">
<a href="products/pens/index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Dlugopisy','',
'images/interface/nav_pens_on.gif',1)">
<img src="images/interface/nav_pens.gif" alt="Dugopisy"
name="Dlugopisy" width="150" height="19" border="0">
</a>
<a href="products/pads/index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Notatniki','',
'images/interface/nav_pads_on.gif',1)">
<img src="images/interface/nav_pads.gif" alt="Notatniki"
name="Notatniki" width="150" height="19" border="0">
</a>
<a href="products/bags/index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Torby','',
'images/interface/nav_bags_on.gif',1)">
<img src="images/interface/nav_bags.gif" alt="Torby" name="Torby"
width="150" height="19" border="0">
</a>
Rozdzia 1.
41

<a href="mugs.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Kubki','',
'images/interface/nav_mugs_on.gif',1)">
<img src="images/interface/nav_mugs.gif" alt="Kubki" name="Kubki"
width="150"
height="19" border="0">
</a>
<a href="products/keyrings/index.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Breloczki','',
'images/interface/nav_keyrings_on.gif',1)">
<img src="images/interface/nav_keyrings.gif" alt="Breloczki do kluczy"
name="Breloczki" width="150" height="19" border="0">
</a>
<a href="products/stressbusters/index.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('ZabawkiAntystresowe','',
'images/interface/nav_stress_on.gif',1)">
<img src="images/interface/nav_stress.gif" alt="Zabawki antystresowe"
name="ZabawkiAntystresowe" width="150" height="19" border="0">
</a>
<center>
<img src="images/interface/guarantee.jpg" height="126" width="127">
</center>
</td>
Druga kolumna zawiera gwny komunikat strony. Pierwszym elementem, ktry mona zobaczy
w tej kolumnie, jest wprowadzajcy akapit informujcy uytkownikw o tym, czym zajmuje si
firma. Akapit ten jest zapisany w osobnej tabeli, tak aby tekst wywietla si w oddzielnej ramce:
<td width="470" bgcolor="#fff" valign="top">
<center>
<table border="1" cellpadding="10" cellspacing="0"
bgcolor="#efefef" width="400">
<tr>
<td>
Witamy w serwisie firmy Fajna Promocja specjalizujcej si
w produkcji reklamowych i promocyjnych. Nasz obszerny zbir toreb
promocyjnych, kubkw, notatnikw i dugopisw uatwia klientom nazwy
Pastwa firmy.<br><br>
Wszystkie nasze gadety promocyjne mona spersonalizowa poprzez
umieszczenie logonazwy i adresu internetowego. Firma Fajna Promocja
moe nawetpomc w zaprojektowaniu gadetw promocyjnych.</font>
</td>
</tr>
</table>
</center>
<br>
42

Poniej wstpnych akapitw na stronie gwnej znajduje si prosta tabela prezentujca kilka
typowych towarw. Zwrmy uwag na wcicie napisu Typowe produkty, ktre uzyskano
za pomoc przezroczystego pliku GIF o szerokoci jednego piksela. Obrazki przedstawiajce
typowe towary zawieraj odnoniki do stron prezentujcych szczegowe informacje dotyczce
pozycji z katalogu.
<img src="images/interface/1px.gif" width="35" height="1">
<img src="images/interface/featuredItems.gif">
<center>
bgcolor="#d6d6d6" width="400">
<tr>
<td width="200" bgcolor="#fff" align="center">
<a href="products/mugs/mug2.html">
<img src="products/mugs/images/mugs2_thumb.gif" border="0">
</a>
</td>
<a href="products/pens/pen2.html">
<img src="products/pens/images/pens2_thumb.gif" border="0">
</a>
</td>
</tr>
<tr>
<td width="200" align="center">
<font face="Arial, Helvetica, sans-serif" size="2" color="69f">
<b>Kubki ju od 3 PLN</b>
</font>
</td>
<b>Dugopisy od 1 PLN</b>
</font>
</td>
</tr>
<tr>
<a href="products/bags/bag4.html">
<img src="products/bags/images/bags4_thumb.gif" border="0">
</a>
</td>
<a href="products/pads/pad3.html">
<img src="products/pads/images/pad3_thumb.gif" border="0">
</a>
</td>
</tr>
<tr>
<b>Plecaki od 9,99 PLN</b>
</font>
</td>
<b>Koonotatniki A4 od 3,50 PLN</b>
</font>
Rozdzia 1.
43
</td>
</tr>
</table>
U dou rodkowej kolumny znajduj si cza stopki:

<font face="Arial, Helvetica, sans-serif" size="1" color="#00c">
<br><br>
<a href="about.html">O nas</a> |
<a href="contact.html">Kontakt</a> |
<a href="terms.html">Warunki korzystania z usug</a> |
© 2004 Fajna Promocja
<br><br>
</font>
</center>
</td>
Trzecia i zarazem ostatnia kolumna zawiera informacje dotyczce skadania zamwie, ktre
mona znale w prawej czci strony gwnej. W tym fragmencie strony skorzystano z tabel
zagniedonych do utworzenia ramek wok tekstu:
<td width="180" bgcolor="#efefef" valign="top">
<center>
<img src="images/interface/orderHotline.gif" width="155" height="38"> <br>
width="155">
<tr>
<td>
<img src="images/interface/howToOrder.gif" width="153"
height="21">
</td>
</tr>
<tr>
<td bgcolor="#fff">
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<font face="Arial, sans-serif" size="2"
color="#904c2d">
1) Wybierz towar z naszego obszernego katalogu.<br><br>
2) Wylij swoje logo lub tekst, ktry ma si znale na
gadetach.<br><br>
3) Po opracowaniu projektu przelemy Ci zdjcie gadetu.
<br><br>
4) Potwierd zamwienie, a dostarczymy towar w cigu
21 dni.<br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br><br>
</center>
44

</td>
</tr>
</table>
</td> </tr> </table>
</center>
</body>
</html>
Jak mona zauway podczas przegldania witryny, strony dostpne za porednictwem grnych
i dolnych elementw nawigacyjnych maj bardzo podobn struktur gwna tre znajduje
si w centralnej czci, natomiast dalej ukad jest identyczny i skada si z trzech kolumn.
Wyjtkiem jest strona hitw sprzeday, ktrej struktura jest analogiczna do stron z list
produktw opisanych w dalszej czci tego rozdziau.
Strony z listami produktw

Kada z szeciu kategorii towarw ma wasny folder w strukturze katalogw witryny. W kadym
z tych folderw znajduje si plik index.html zawierajcy list wszystkich produktw z danej
kategorii, std nazwa strona z list produktw. Strona ma ukad trjkolumnowy, podobnie jak
strona gwna. W rzeczywistoci jedyn realn rnic pomidzy t stron a stron gwn jest
rodkowa kolumna tabeli tworzca zasadnicz cz strony.
Przyjrzyjmy si zawartoci strony umieszczonej wewntrz znacznikw <body>. Poniewa logo
i nagwek strony, a take grne menu nawigacyjne oraz cza nawigacyjne z lewej strony s
niemal identyczne jak te na stronie gwnej, nie bd ich szczegowo omawia. S tylko dwie
zasadnicze rnice:
Q
Polecenie menu wskazujce na to, e uytkownik wybra sekcj Torby, jest wyrnione.
Wszystkie adresy URL do obrazw oraz do innych stron poprzedza przedrostek ../../, co
wskazuje na uycie wzgldnych adresw URL powyej nadrzdnego folderu tego pliku.
<center>
<tr><td>

</table>
<table border="0" cellpadding="0" cellspacing="1" width="800" bgcolor="#69f">

</table>
<tr>

</td>
Rozdzia 1.
45
Rzeczywiste zmiany dotycz rodkowej kolumny w trzeciej tabeli (zawierajcej gwn tre
strony). Po pierwsze, znajduje si w niej kilka przezroczystych jednopikselowych plikw GIF,
ktre pozycjonuj nagwek w podanym miejscu. Nagwek wskazuje kategori, jak wybra
uytkownik w tym przypadku Torby.
<center>
<img src="../../images/interface/1px.gif" height="15" width="1">
</center><br>
<img src="../../images/interface/1px.gif" height="1" width="35">
<b>Torby</b>
</font><br>
Gwn czci strony z list produktw jest tabela, ktra wywietla rne produkty dostpne
w wybranej kategorii. Kady produkt zajmuje jeden wiersz. Zdjcie produktu jest w komrce po
lewej stronie, natomiast jego opis po prawej. Zarwno zdjcie, jak i tytu s odnonikami do
strony zawierajcej szczegowe informacje o produkcie:
<center>
bgcolor="#d6d6d6" width="400">
<tr>
<a href="bag1.html">
<img src="images/bags1_thumb.gif" border="0">
</a>
</td>
<b><a href="bag1.html">Torby konferencyjne typ #1</a></b><br>
Najlepiej sprzedajce si, niedrogie torby z dopinanym
paskiem i wewntrznymi kieszeniami.<br>
<b>Ju od 7,50 PLN </b> przy minimalnej iloci 150 sztuk.
</font>
</td>
</tr>
<tr>
</a>
</td>
Wzmocniona konstrukcja poprawiajca trwao i kiesze z przodu
zapinana na zamek byskawiczny.<br>
<b>Ju od 8,50 PLN </b> przy minimalnej iloci 50 sztuk
</font>
</td>
</tr>
<tr>
46

</a>
</td>
Wysokiej jakoci torby konferencyjne z poliesteru
z wieloma za doskona cen.<br>
</font>
</td>
</tr>
<tr>
</a>
</td>
<b><a href="bag4.html">Aktwki biznesowe</a></b><br>
Z polyesteru 600D. Dostpne w kolorach granatowym lub niebieskim.
Idealne dla menederw w podry subowej<br>
</font>
</td>
</tr>
</table>
Tak, jak w przypadku wikszoci stron, w stopce tej kolumny jest kilka czy:

</font>
</center>
</td>
Pozostaa cz strony, wcznie z kolumn po prawej stronie, ma dokadnie tak sam zawarto,
jak strona gwna. Z tego wzgldu nie bd jej powtarza w tym miejscu.

</td>
</tr>
</table>
</td> </tr> </table>
</center>
Jak pamitamy, produkty podzielono na sze kategorii dugopisy, torby, kubki, notatniki,
breloczki i zabawki antystresowe. Kada kategoria ma wasny folder w strukturze katalogw.
W folderze kadej kategorii jest plik index.html, zawierajcy list produktw dla wybranej
kategorii.
Rozdzia 1.
47
Strony ze szczegowymi danymi o produktach

Kiedy uytkownik kliknie dowoln pozycj na licie produktw (lub zdjcie typowego produktu na stronie gwnej), wywietli si indywidualna strona produktu zawierajca szczegowe informacje na jego temat, wcznie z cenami.
Poniewa na stronach tego typu trzeba zmieci wicej informacji ni na innych, gwna
cz strony zawiera tylko dwie kolumny. Na rysunku 1.8 pokazano stron szczegowych
informacji o aktwkach biznesowych z nakrelonymi liniami pokazujcymi komrki tabeli
uytej do zarzdzania ukadem strony.
Rysunek 1.8
Tak jak w przypadku stron omawianych wczeniej, caa strona jest zapisana wewntrz tabeli
wyznaczajcej szeroko strony. Ramka wok zewntrznej krawdzi tabeli wyznacza
obramowanie strony. Wewntrz tej tabeli s trzy inne tabele. Pierwsza zawiera tytu strony,
druga cza nawigacyjne, natomiast trzecia gwn tre strony. Trzecia tabela zawiera
tylko dwie komrki: jedn dla lewostronnych czy nawigacyjnych, drug dla szczegowych
informacji o produkcie.
Przyjrzyjmy si teraz kodowi strony (bag4.html). Pocztek jest taki sam jak strony gwnej
i stron z list produktw (poza tym, e adresy URL rozpoczynaj si od przedrostka ../../),
zatem omawianie rozpoczniemy od gwnej treci strony. Podobnie jak w przypadku pozostaych
stron, caa zawarto strony jest zapisana w tabeli skadajcej si z pojedynczej komrki.
Wewntrz tej komrki s tabele dla tytuu strony i czy nawigacyjnych.
<center>
<table border="1" cellpadding="0" cellspacing="0" width="800"><tr><td>
48


</table>
<table border="0" cellpadding="0" cellspacing="1" width="800" bgcolor="69F">

</table>
Dalej jest trzecia tabela. Jej zadaniem jest utworzenie kolumn w gwnej czci strony. Podobnie jak w przypadku pierwszej kolumny (zapisanej w pierwszej komrce tabeli), s w niej
cza nawigacyjne nie ma potrzeby, aby omawia je jeszcze raz.
Druga kolumna jest o wiele szersza ma 650 pikseli i zawiera znacznie wicej miejsca
pozwalajcego na wywietlanie szczegowych informacji na temat wybranego produktu:

<tr>

</td>
Dalsza cz to kod komrki reprezentujcej gwn cz strony z informacjami o produkcie.

W tej komrce s dwie tabele pierwsza zawiera tytu produktu, natomiast druga cza do
poszczeglnych typw toreb.
<br>
<center>
<tr>
<td>
<b>Aktwki biznesowe</b>
</font>
</td>
<td align="right" valign="top">
<a href="/products/bags/index.html">
<b>Przegldaj wszystkie torby</b>
</font>
</a>
</td>
</tr>
</table><br>
Cho na pierwszy rzut oka wydaje si, e tak nie jest, druga tabela zawiera zaledwie jedn
komrk. Wynika to z faktu, i jest to tabela-opakowanie, ktra wewntrz zawiera inn tabel.
Ta jednokomrkowa tabela suy do utworzenia ramki wok zapisanych w niej informacji
i skada si z dwch wierszy i dwch kolumn:
Q
Wiersz 1., kolumna 1. zawiera zdjcie torby.
Wiersz 1., kolumna 2. zawiera opis torby.
Wiersz 2., kolumna 1. zawiera ceny.
Wiersz 2., kolumna 2. zawiera informacje dotyczce wydruku.
Rozdzia 1.
49
Rozpocznijmy od pierwszego wiersza zawierajcego zdjcie i opis torby. Jego zawarto jest
do oczywista:
<table border="1" cellpadding="0"
cellspacing="0" width="550"><tr><td>
<table border="0" cellpadding="10" cellspacing="0" bgcolor="#fff"
width="550">
<tr>
<td width="350" bgcolor="#fff" align="center" valign="top">
<img src="images/bags4.jpg" border="0">
</td>
<b>Wyprodukowane z wysokiej jakoci polyesteru 600D. Dostpne
w kolorach granatowym lub niebieskim.
Zawieraj dwa okrge plastikowe zamknicia oraz dodatkowe
uchwyty na dugopisy
pod klap.</b>
<br><br><br>
<b>SPECYFIKACJA PRODUKTU</b><br>
<b>Wymiary:</b> 32 x 9 x 36 cm<br>
<b>Obszar do druku:</b> 200 x 120 mm<br>
<b>Dostpne kolory:</b> czarny, granatowy<br>
<b>Czas realizacji:</b> 3-4 tygodnie <br><br>
</font>
</td>
</tr>
Kod drugiego wiersza zamieszczono poniej. W pierwszej kolumnie drugiego wiersza znajduj
si zagniedone tabele zarzdzajce cenami produktu w zalenoci od wielkoci zamwienia.
W drugiej kolumnie wiersza s informacje dotyczce wydruku.
<tr>
<td bgcolor="#efefef" align="center" valign="top">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td bgcolor="#d6d6d6">
<font face="Arial, sans-serif" size="2"><b>Wielko
zamwienia</b></font>
</td>
<font face="Arial, sans-serif" size="2"><b>100</b></font>
</td>
</td>
</td>
</td>
</tr>
<tr>
50

<font face="Arial, sans-serif" size="2"><b>
Cena jednostkowa</b></font>
</td>
<td><font face="Arial, sans-serif" size="2">11,50 PLN</font></td>
<td>
<font face="Arial, Helvetica, sans-serif" size="2">9,00 PLN</font>
</td>
</tr>
<tr>
<font face="Arial, sans-serif" size="2">
<b>Dodatkowe kolory (dopata za sztuk)</b>
</font>
</td>
</tr>
</table>
</td>
<b>Cena obejmuje druk w jednym kolorze, w jednej pozycji.<br><br>
Cena wydruku matrycy wynosi 100 PLN za jeden kolor i pozycj.</b>
</font>
</td>
</tr>
</table>
</td></tr></table>
Jak pamitamy, ta strona zawiera tylko dwie kolumny, zatem d strony koczy si na kocu
komrki. Dodatkowo komrka zawiera cza wywietlajce si w stopce strony.

</font>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
</center>
Do tego momentu omwilimy struktur wszystkich stron w witrynie. Strony rni si tylko
treci. Warto jednak przyjrze si strukturze katalogw witryny.
Rozdzia 1.
51
Struktura witryny
Po przeanalizowaniu sposobu, w jaki zostay napisane poszczeglne strony witryny Fajna
Promocja, warto przyjrze si, jak wyglda struktura katalogw. Struktur t pokazano na
rysunku 1.9.
Rysunek 1.9
Strona gwna witryny jest zapisana w pliku index.html i umieszczona w katalogu gwnym.
S w nim rwnie foldery images, products oraz nastpujce strony:
Nazwa pliku
Przeznaczenie
aboutUs.html
Zawiera informacje o firmie.
bestSellers.html
Szczegowe informacje na temat produktw, ktre sprzedaj si najlepiej.
contact.html
Informacje umoliwiajce skontaktowanie si z firm.
custom.html
Sposb skadania zamwie na towary niestandardowe, ktrych nie ma w katalogu.
order.html
Sposb skadania zamwie na towary z katalogu.
terms.html
Warunki korzystania z serwisu.
Wewntrz folderu images s dwa dodatkowe foldery. Pierwszy z nich nosi nazw branding
i zawiera obrazy dotyczce marki, na przykad logo. Drugi ma nazw interface i zawiera obrazy
suce do tworzenia interfejsu uytkownika, na przykad przyciski nawigacyjne.
Wewntrz folderu products jest sze podfolderw po jednym dla kadej kategorii produktw znajdujcych si w ofercie firmy Fajna Promocja: dugopisy, torby, kubki, breloczki,
notatniki i zabawki antystresowe. Kady z folderw ma nastpujc zawarto:
Q
stron index.html zawierajc przegld wszystkich produktw w okrelonej kategorii;
folder images zawierajcy zdjcia produktw z danej kategorii (dla kadej pozycji
jest dostpna miniaturka i zdjcie w penych rozmiarach);
strony dla kadego produktu zawierajce wicej szczegw na temat produktu

i jego cen.
52

Przed kontynuowaniem lektury dalszych rozdziaw warto wyprbowa witryn w pierwotnej
postaci. W tym celu mona j pobra spod adresu ftp://ftp.helion.pl/przyklady/xcsdwi.zip razem
z pozostaymi kodami rdowymi wykorzystywanymi w tej ksice. Po pobraniu plikw, mona przetestowa je na wasnym komputerze. Dokadne przetestowanie witryny przyda si w dalszej czci ksiki, gdzie dokadniej przeanalizowano kolejne strony serwisu.
Aktualizacja witryny
W dalszych rozdziaach tej ksiki, w miar omawiania kolejnych tematw, bdziemy
wprowadzali zmiany w pierwotnej witrynie. Na kocu ksiki stworzymy now witryn
zgodn z reguami jzyka XHTML, w ktrej stylem i ukadem strony zarzdza CSS oraz ktra
spenia wskazwki dotyczce dostpnoci, zarwno te, ktre s zalecane przez organizacj
W3C, jak i te, ktre wymieniono w Sekcji 508. Projekt witryny rwnie bdzie bardziej nowoczesny. Na rysunku 1.10 pokazano zrzut ekranu strony w docelowej postaci uzyskamy j po
wprowadzeniu wszystkich zmian.
Rysunek 1.10
Aktualizacja witryny w niniejszej ksice bdzie przebiegaa wedug nastpujcego schematu:

1.
Przy okazji omawiania wasnoci jzyka XHTML (oraz rnic pomidzy HTML
i XHTML) bdziemy modyfikowali kolejne struktury HTML, z ktrymi wanie si
zapoznalimy, i zmieniali je zgodnie z zasadami jzyka XHTML. Na kocu rozdziau 2.
cay kod serwisu bdzie zapisany zgodnie ze skadni XHTML, a znaczniki suce do
prezentacji zostan z niego usunite. W rezultacie strona bdzie wygldaa znacznie
mniej estetycznie. Nie naley si jednak tym przejmowa stanie si na powrt
bardziej atrakcyjna w kolejnych rozdziaach, kiedy zastosujemy CSS. Strony XHTML
s rwnie atwiejsze w utrzymaniu, poniewa nie zamiecaj ich znaczniki prezentacyjne.
Rozdzia 1.
Kiedy nauczymy si pisa strony XHTML, poradzimy sobie rwnie z napisaniem

treci prezentowanej na urzdzeniach wykorzystujcych przegldarki XHTML, ktre
niekoniecznie obsuguj wszystkie wasnoci jzyka HTML. Co wicej, poniewa
jzyk XHTML napisano w XML, dla wszystkich tworzonych stron mona uywa
dostpnych narzdzi XML, takich jak XSLT, DOM oraz procesory SAX.
2. W rozdziaach 3. i 4. pokaemy, w jaki sposb mona wykorzysta jzyk CSS do
zarzdzania prezentacj witryny, a na koniec rozdziau 4. strona bdzie wyglda

podobnie do jej pierwotnej postaci z t rnic, e do zarzdzania wygldem bdzie
wykorzystywaa CSS zamiast znacznikw prezentacyjnych. W ten sposb uzyskamy
separacj stylu od treci, co spowoduje, e aktualizacja i pielgnacja stylu witryny
stanie si znacznie atwiejsza. Po wprowadzeniu tej modyfikacji zmiana koloru lub
czcionki w caym serwisie bdzie wymagaa wprowadzenia zmiany zaledwie w jednym
arkuszu stylw. Poniewa reguy prezentacji s zapisane w jednym arkuszu stylw
i nie s powtarzane na kadej stronie (oraz poniewa po pobraniu strony przegldarka
korzysta z lokalnej kopii arkusza stylw), rozmiar plikw serwisu po modyfikacji
jest mniejszy, zatem strona bdzie adowaa si szybciej. Wykorzystanie arkuszy
stylw do zarzdzania prezentacj oznacza rwnie moliwo doczania rnych
arkuszy stylw do tego samego dokumentu HTML w celu zaprezentowania go
w innym celu lub na innym urzdzeniu.
3. W rozdziale 5. opisano sposb zarzdzania ukadem stron z wykorzystaniem CSS.
Zamiast wykorzystywania tabel do tworzenia nagwka i czy nawigacyjnych u gry

strony oraz korzystania z komrek do tworzenia kolumn w gwnej treci strony,
te czci witryny zostan umieszczone wewntrz elementw <div>, a ich pozycja
zostanie okrelona za pomoc CSS. Wykorzystanie CSS do zarzdzania ukadem
strony oznacza, e tabele s wykorzystywane tylko do prezentowania danych
tabelarycznych, czyli do tego, do czego byy pierwotnie przeznaczone. Poza tym,
ukad caej witryny mona zmodyfikowa poprzez zmodyfikowanie zaledwie jednego
arkusza stylw. Dziki temu strony XHTML powinny sta si prostsze, a caa witryna
bardziej dostpna.
4. Zagadnieniami dostpnoci szerzej zajmiemy si w rozdziaach 6. i 7. Nauczymy
si z nich technik, ktre zapewniaj spenienie przez witryn zalece dostpnoci

organizacji W3C oraz zalece opisanych w Sekcji 508. Po utworzeniu wersji witryny
w XHTML i zastosowaniu arkusza CSS do zarzdzania prezentacj i ukadem strony,
bardzo zbliymy si do celu, jakim jest utworzenie dostpnej witryny. Trzeba jednak
pamita o wielu dodatkowych problemach, ktre zostan opisane w tych rozdziaach.
Przeanalizujemy w nich rne czci witryny oraz podamy wskazwki dotyczce
kadej z nich. Na przykad powiemy, w jaki sposb tworzy si tekstow alternatyw
dla elementw nietekstowych (np. grafiki, klipw wideo i plikw audio). Dziki temu
uytkownicy majcy problemy ze wzrokiem mog korzysta z formularzy i tabel.
Opiszemy rwnie niektre narzdzia, ktre mona wykorzysta po to, by zapewni
spenienie przez witryn wymaga dostpnoci.
5. Na koniec, w rozdziale 8., pokaemy planowane kierunki rozwoju jzyka XHTML.
Zastanowimy si, w jaki sposb jzyk bdzie ewoluowa w kierunku obsugi nowych
urzdze, ktre mona wykorzysta do uzyskania dostpu do internetu. W tym
rozdziale przekonamy si, e przejcie na jzyk XHTML tworzy solidne podstawy
do opracowywania stron dla wielu typw nowych urzdze. Pokaemy nawet
przykad tego, jak moe wyglda witryna przeznaczona do wywietlania
na telefonie komrkowym.
53
54

Kod ostatecznej wersji witryny jest dostpny do pobrania razem z pozostaym kodem rdowym
przykadw pokazanych w tej ksice. Witryn w oryginale mona rwnie zobaczy w internecie, pod adresem http://www.FirstPromotions.co.uk/.
Podsumowanie
W niniejszym rozdziale dowiedzielimy si, jak zmieni si internet z biegiem lat, oraz zrozumielimy, e autorzy stron WWW musz zaktualizowa swoje umiejtnoci tak, by uwzgldni te zmiany. Dowiedzielimy si, e w miar postpu techniki poprawiy si rozdzielczoci
monitorw uywanych do dostpu do internetu, a jednoczenie zmieniy si ich rozmiary. Jednoczenie zwikszy si asortyment urzdze zdolnych do przegldania stron internetowych. Oznacza to, e obecnie nie wystarczy ju utworzy jednego projektu strony WWW i oczekiwa, e
bdzie ona dziaaa na wszystkich urzdzeniach, ktre maj moliwo dostpu do internetu.
Chocia w kolejnych wersjach HTML wprowadzano rnorodne elementy i atrybuty pomagajce autorom stron WWW w zarzdzaniu wygldem stron, obecnie naley zaprzesta uywania
znacznikw prezentacyjnych w tych samych dokumentach, ktre zawieraj zasadnicz tre
witryny. Naley oddzieli znaczniki opisujce struktur dokumentu od regu stylu opisujcych
sposb, w jaki strona powinna by wywietlana. Reguy prezentacji naley umieci w osobnym arkuszu stylw napisanym w jzyku znanym jako CSS (ang. Cascading Style Sheets
kaskadowy arkusz stylw).
Jzyk HTML zastpiono wic nowym jzykiem, z ktrego usunito znaczniki opisujce styl.
Jzyk ten w pewnym stopniu rni si od HTML rwnie skadni, poniewa nastpc jzyka
HTML napisano w jzyku XML. Z tego powodu nazwa jzyka zmienia si na XHTML. Zapisanie jzyka HTML w XML pozwala zapewni, e najczciej uywany obecnie w internecie jzyk
nie straci na popularnoci w kolejnych latach, nawet jeli pojawi si nowe urzdzenia o cakowicie nowych moliwociach. Zagadnienie to bardziej szczegowo opisano w rozdziale 8.
Na koniec pokazalimy, e spenienie wymaga prawnych zapewnienia dostpnoci stron
WWW dla osb niepenosprawnych wymaga wprowadzenia wielu zmian do sposobu projektowania stron WWW. Nauczenie si pisania witryn WWW w XHTML i CSS to pierwszy
krok na drodze do budowania dostpnych witryn WWW, jednak tworzenie dostpnych witryn
WWW w penym tego sowa znaczeniu wymaga zastosowania si do wielu wskazwek i skorzystania z wielu technik. Zostan one opisane w rozdziaach 6. i 7.

XHTML I CSS. Dostępne Witryny Internetowe

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

XHTML I CSS. Dostępne Witryny Internetowe

Uploaded by

Copyright:

Available Formats

XHTML i CSS.

Rozdzia 2. Transformacja kodu HTML na XHTML ................................................................................. 55

XHTML i CSS. Dostpne witryny internetowe

Rozdzia 3. Zastosowanie CSS do definiowania stylu dokumentw ....................................................107

Rozdzia 4. Zaawansowane zastosowania jzyka CSS ........................................................................179

Rozdzia 5. Wykorzystanie CSS do zarzdzania ukadem dokumentu ................................................215

Popularne ukady .................................................................................................. 235

Rozdzia 6. Dostpno .........................................................................................................................263

Rozdzia 7. Tworzenie dostpnych tabel i formularzy oraz testowanie witryny .............................307

Rozdzia 8. Spojrzenie w przyszo ...................................................................................................349

Dodatek A Kocowy kod przykadu ......................................................................................................383

XHTML i CSS. Dostpne witryny internetowe

Dodatek D Sekwencje sterujce ..........................................................................................................463

Dodatek E Typy MIME ............................................................................................................................467

przeanalizujemy niektre problemy, jakie sprawia uywanie tradycyjnego jzyka

dowiemy si, dlaczego istotne znaczenie ma oddzielenie stylu od treci;

zapoznamy si z przykadow witryn Fajna Promocja; jest to witryna, ktr

dowiemy si, jakie s cele modyfikacji projektu witryny;

dowiemy si czego wicej na temat korzyci, jakie mona uzyska, tworzc

Po przeczytaniu niniejszego rozdziau Czytelnicy bd rozumieli powody, dla ktrych naley

XHTML i CSS. Dostpne witryny internetowe

Problemy z jzykiem HTML

Producenci rnych przegldarek opracowuj rne sposoby wykonywania tych

Rni uytkownicy stosuj ekrany rnych rozmiarw oraz rne rozdzielczoci,

Powstay nowe urzdzenia pozwalajce na dostp do internetu. Nie byy to ju

Uytkownicy z wadami wzroku mog mie trudnoci z przeczytaniem niektrych

Podsumowujc, posugiwanie si tradycyjnym jzykiem HTML stwarzao nastpujce problemy:

W miar rozwoju jzyka HTML wprowadzano do niego mnstwo regu definiowania

Poniewa internet jest tak rozbudowanym medium, powinien by dostpny

Rne technologie uywane do przegldania stron internetowych maj rne

Informacje dostpne online czsto s przydatne w rnych formatach, na przykad

XHTML i CSS. Dostpne witryny internetowe

Towarzyszy mu znacznik zamykajcy. Wszystko, co znajduje si pomidzy tymi znacznikami,

Element odnosi si zarwno do znacznika otwierajcego, jak i zamykajcego, plus wszystkiego,

Tre wystpujc pomidzy znacznikami otwierajcym i zamykajcym okrela si terminem

Powyszy atrybut wskazuje na to, e zawarto komrki tabeli powinna by wyrwnana do

Wprowadzenie do jzyka HTML

XHTML i CSS. Dostpne witryny internetowe

Chocia tego typu dokument by bardzo praktyczny i umoliwia pracownikom naukowym

XHTML i CSS. Dostpne witryny internetowe

Kiedy reguy zarzdzajce prezentacj strony WWW s pomieszane z waciw zawartoci

Problemy zwizane z przegldarkami

zwikszay si moliwoci procesorw i kart graficznych;

stay si dostpne ekrany o wyszej rozdzielczoci;

pojawiy si urzdzenia inne ni komputery desktop PC zdolne do korzystania

Kady z tych aspektw stwarza nowe wyzwania:

W miar poprawy jakoci procesorw i kart graficznych, coraz wicej osb

Ze wzgldu na powszechniejsze wykorzystanie wikszych ekranw, wicej osb

Witryny zaprojektowane dla rozdzielczoci 640480 w rozdzielczoci 1024768

Nowe urzdzenia zwykle miay mniejsze ekrany, nisze rozdzielczoci, mniejsz

XHTML i CSS. Dostpne witryny internetowe

Lekcje ze rodowiska telefonw komrkowych

tworzenie tytuw, nagwkw i tekstu;

definiowanie czy pomidzy stronami;

osadzenie prostych obrazw;

tworzenie prostych tabel;

pobieranie danych od uytkownikw za pomoc prostych formularzy.

W jzykach tych brakowao bardziej zaawansowanych wasnoci przegldarek WWW, na

XHTML i CSS. Dostpne witryny internetowe

Do projektowania ukadu stron uywa si tabel. Czsto si zdarza, e czytniki

Z powodu zastosowania zej kombinacji kolorw czytanie tekstu staje si trudne.

Tekst wywietla si w czcionkach o staym rozmiarze, co powoduje brak moliwoci

Problemy te podkrel to ponownie mona by rozwiza, gdyby reguy opisujce sposb