IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

HTML4

Vademecum profesjonalisty
Wydanie II

Autorzy: Laura Lemay, Denise Tyler

Tumaczenie: Piotr Rajca, ukasz Orzechowski,
Tomasz Jarzbowicz
ISBN: 83-7197-478-7
Tytu oryginau: Sams Teach Yourself Web Publishing
with HTML 4 in 21 Days Professional Reference
Edition, Second Edition
Format: B5, stron: 1144, oprawa twarda
Zawiera CD-ROM
Szczegowo poprawione i zaktualizowane wydanie tego atwego do zrozumienia
i wyczerpujcego podrcznika zawiera omwienie wszystkich najnowszych technologii
wykorzystywanych do publikowania informacji na WWW. W ksice tej znajdziesz
wszystkie zagadnienia zwizane z publikowaniem informacji na WWW, poczynajc do
podstaw jzyka HTML, a skoczywszy na bardziej zaawansowanych zagadnieniach,
takich jak:
zastosowanie tabel,
ramek,
pisanie skryptw w jzyku JavaScript oraz skryptw CGI,
wykorzystanie kaskadowych arkuszy stylw.
Dziki tej ksice zdobdziesz wszystkie umiejtnoci i wiedz konieczn do
zaprojektowania, stworzenia i utrzymania profesjonalnie wygldajcej witryny WWW.
Jest to w peni poprawione wydanie obejmujce zagadnienia wykorzystania
najnowszych technologii stosowanych podczas tworzenia WWW -- w tym take XHTML.
Odkryj, w jaki sposb tabele i ramki mona wykorzysta do poprawienia ukadu stron
WWW. Naucz si okrela wygld i pooenie elementw stron dziki zastosowaniu
kaskadowych arkuszy stylw. Poznaj zasady wykorzystania obrazw, kolorw, animacji
oraz dwikw. Zapewnij interaktywno tworzonych witryn dziki zastosowaniu:
skryptw JavaScript, apletw pisanych w jzyku Java, formularzy oraz skryptw CGI.
Zawiera wyczerpujce, 200-stronicowe omwienie jzyka HTML 4, wszystkich jego
znacznikw i atrybutw, ze szczeglnym uwzgldnieniem moliwoci ich wykorzystania
w poszczeglnych przegldarkach.
Laura Lemay jest jedn z najbardziej popularnych na wiecie autorek ksiek
dotyczcych zagadnie publikowania informacji na stronach WWW. Oprcz ksiek
z serii Vademecum profesjonalisty, ktre stay si wiatowymi bestsellerami, jest take
wspautork ksiki o Java 1.1 oraz autork ksiki Perl dla kadego.

"
"
"
"




O Autorach.........................................................................................................29
Wstp .................................................................................................................31
Kto powinien przeczyta t ksik .......................................................................................31
Co zawiera niniejsza ksika.................................................................................................32
Czego potrzebujesz na pocztku.............................................................................................34
Konwencje przyjte w ksice...............................................................................................34
Elementy graficzne.............................................................................................................. 34
Przykady kodu rdowego i wynikw................................................................................. 35
Inna czcionka ..................................................................................................................... 35
CD-ROM........................................................................................................................... 35

Strona internetowa oryginalnego wydania ksiki .................................................................35

Polskie litery..........................................................................................................................36


   
Rozdzia 1. wiat WWW ....................................................................................39
Czym jest World Wide Web? ................................................................................................39
Sie WWW jest hipertekstowym systemem informacyjnym.................................................... 40
WWW jest systemem graficznym i atwym w nawigacji ......................................................... 41
WWW jest sieci wieloplatformow ..................................................................................... 42
WWW jest sieci rozproszon.............................................................................................. 43
WWW jest sieci dynamiczn .............................................................................................. 43
Przegldarki sieciowe umoliwiaj dostp do wielu rodzajw informacji w Internecie................ 45
Sie WWW jest interakcyjna ............................................................................................... 46

Przegldarki sieciowe ...........................................................................................................47

Co robi przegldarka?.......................................................................................................... 48
Przegld dwch najpopularniejszych przegldarek ................................................................. 48

Serwery WWW......................................................................................................................50
URL .......................................................................................................................................51
Podsumowanie.......................................................................................................................52
Warsztat.................................................................................................................................52
Pytania i odpowiedzi ........................................................................................................... 52
Quiz .................................................................................................................................. 53
Odpowiedzi ........................................................................................................................ 54
wiczenia .......................................................................................................................... 54

Rozdzia 2. Grunt to organizacja.........................................................................55

Anatomia witryn WWW.........................................................................................................56


  

Do czego waciwie chcesz wykorzysta WWW?.................................................................57
Wyznacz swj cel ..................................................................................................................59
Podziel tre na gwne tematy..............................................................................................60
Pomysy na organizacj i nawigacj ......................................................................................61
Struktura hierarchiczna........................................................................................................ 61
Struktura liniowa................................................................................................................. 64
Struktura liniowa z alternatyw ............................................................................................ 64
Struktura mieszana (liniowo-hierarchiczna)............................................................................ 65
Struktura sieciowa (pajczyna)............................................................................................. 67

Scenopis witryny WWW........................................................................................................69

Co to jest scenopis i do czego moe si przyda?................................................................... 69
Kilka wskazwek dotyczcych scenopisw ........................................................................... 70

Podsumowanie.......................................................................................................................71
Warsztat.................................................................................................................................72
Pytania i odpowiedzi ........................................................................................................... 72
Quiz .................................................................................................................................. 72
Odpowiedzi ........................................................................................................................ 73
wiczenia .......................................................................................................................... 73

Rozdzia 3. Wprowadzenie do HTML.................................................................75

Czym jest, a czym nie jest HTML?.........................................................................................75
HTML opisuje struktur strony............................................................................................ 75
HTML nie opisuje ukadu strony.......................................................................................... 76
Dlaczego akurat tak? ........................................................................................................... 77
HTML jest jzykiem znacznikw......................................................................................... 78
Krtka historia znacznikw HTML ...................................................................................... 78

Przyszo z XHTML 1.0.......................................................................................................80

Jak wyglda plik HTML ........................................................................................................80
Krtka uwaga na temat formatowania................................................................................... 84

Programy pomocne w tworzeniu plikw HTML....................................................................85

Podsumowanie.......................................................................................................................86
Warsztat.................................................................................................................................86
Pytania i odpowiedzi ........................................................................................................... 87
Quiz .................................................................................................................................. 87
Odpowiedzi ........................................................................................................................ 87
wiczenia .......................................................................................................................... 88




 
Rozdzia 4. Zaczynamy od podstaw.....................................................................93
Struktura HTML-a..................................................................................................................93
Znacznik <html>................................................................................................................. 94
Znacznik <head> ................................................................................................................ 94
Znacznik <body>................................................................................................................95

Tytu.......................................................................................................................................95
Nagwki ...............................................................................................................................97
Akapity ..................................................................................................................................98
Listy, listy i jeszcze raz listy................................................................................................100



Znaczniki list .................................................................................................................... 100

Listy numerowane ............................................................................................................ 101
Formatowanie list numerowanych w HTML 3.2.................................................................. 102
Listy wypunktowane ......................................................................................................... 105
Formatowanie list wypunktowanych w HTML-u 3.2 ........................................................... 105
Listy definicji.................................................................................................................... 106
Listy zagniedone............................................................................................................ 108

Komentarze..........................................................................................................................109
Podsumowanie.....................................................................................................................111
Warsztat...............................................................................................................................111
Pytania i odpowiedzi ......................................................................................................... 111
Quiz ................................................................................................................................ 113
Odpowiedzi ...................................................................................................................... 114
wiczenia ........................................................................................................................ 114

Rozdzia 5. Wszystko o poczeniach ................................................................ 115

Tworzenie hiperpocze.....................................................................................................115
Znacznik <a> ................................................................................................................... 115

czenie stron lokalnych przy uyciu cieek wzgldnych i bezwzgldnych .......................120

cieki bezwzgldne.......................................................................................................... 122
Z ktrego rodzaju cieek powiniene korzysta?................................................................. 122

Poczenia do dokumentw w sieci WWW .........................................................................123

Poczenia do okrelonych miejsc w dokumencie ...............................................................127
Tworzenie pocze i odnonikw ...................................................................................... 128
Poczenia wewntrz tego samego dokumentu..................................................................... 134

Anatomia adresu URL..........................................................................................................134

Z czego skada si URL..................................................................................................... 135
Znaki specjalne w adresach URL ....................................................................................... 136

Rodzaje adresw URL.........................................................................................................137

HTTP.............................................................................................................................. 137
Anonimowe FTP .............................................................................................................. 137
FTP o ograniczonym dostpie............................................................................................ 138
Mailto .............................................................................................................................. 139
Gopher ............................................................................................................................ 139
Usenet ............................................................................................................................. 139
File .................................................................................................................................. 140

Podsumowanie.....................................................................................................................141
Warsztat...............................................................................................................................142
Pytania i odpowiedzi ......................................................................................................... 142
Quiz ................................................................................................................................ 144
Odpowiedzi ...................................................................................................................... 145
wiczenia ........................................................................................................................ 145

Rozdzia 6. Wicej o formatowaniu tekstu w HTML-u ..................................... 147

Style znakw........................................................................................................................148
Style logiczne ................................................................................................................... 148
Style fizyczne ................................................................................................................... 151


  

Tekst preformatowany .........................................................................................................152
Linie poziome ......................................................................................................................155
Atrybuty znacznika <hr> ................................................................................................... 156

amanie linii........................................................................................................................159
Adresy .................................................................................................................................160
Cytaty...................................................................................................................................160
Znaki specjalne....................................................................................................................161
Kody znakw specjalnych ................................................................................................. 162
Kody znakw zarezerwowanych ........................................................................................ 163

Pooenie tekstu na stronie...................................................................................................164

Kontrola pooenia pojedynczych elementw ...................................................................... 164
Kontrola pooenia grup elementw .................................................................................... 164

Czcionki i ich rozmiar..........................................................................................................166

Zmiana rozmiaru czcionki.................................................................................................. 166
Zmiana rodzaju czcionki.................................................................................................... 167

Migajcy <blink>.................................................................................................................168
<nobr> i <wbr> ...................................................................................................................168
Podsumowanie.....................................................................................................................178
Warsztaty .............................................................................................................................182
Pytania i odpowiedzi ......................................................................................................... 182
Quiz ................................................................................................................................ 183
Odpowiedzi ...................................................................................................................... 183
wiczenia ........................................................................................................................ 184

     !

Rozdzia 7. Wykorzystywanie obrazw, koloru i ta .......................................... 187
Grafika w sieci WWW ........................................................................................................187
Obrazy wewntrzne na stronach WWW: znacznik <img> ....................................................189
Dodawanie tekstu alternatywnego....................................................................................... 189

Obrazy i tekst.......................................................................................................................193
Wzajemne pooenie tekstu i obrazu ................................................................................... 194
Obraz otoczony tekstem .................................................................................................... 196
Okrelanie odlegoci obrazu od tekstu ................................................................................ 199

Grafika i poczenia.............................................................................................................200
Obrazy zewntrzne...............................................................................................................203
Inne sztuczki z wykorzystaniem obrazw.............................................................................207
Wymiary i skalowanie obrazw.......................................................................................... 207
Kilka sw na temat ramek wok obrazw ......................................................................... 208
Podgld obrazu................................................................................................................. 208

Kolory..................................................................................................................................209
Nazwy kolorw ................................................................................................................ 209
Zmiana koloru ta.............................................................................................................. 210
Zmiana koloru tekstu......................................................................................................... 211
Kolor pojedynczego znaku................................................................................................. 212

Grafika w tle........................................................................................................................213
Kilka poytecznych wskazwek...........................................................................................214



Czy ten rysunek jest niezbdny? ........................................................................................ 214

Obrazy nie powinny by due ............................................................................................ 215
Staraj si wielokrotnie wykorzystywa te same obrazy ......................................................... 215
Zamiast grafiki ................................................................................................................. 216

Podsumowanie.....................................................................................................................216
Warsztat...............................................................................................................................217
Pytania i odpowiedzi ......................................................................................................... 218
Quiz ................................................................................................................................ 219
Odpowiedzi ...................................................................................................................... 219
wiczenia ........................................................................................................................ 220

Rozdzia 8. Tworzenie obrazw na potrzeby sieci.............................................. 221

Formaty obrazw.................................................................................................................221
GIF ................................................................................................................................. 221
JPEG............................................................................................................................... 222

Kolor ...................................................................................................................................223
System barwny HSB......................................................................................................... 223
System barwny RGB ........................................................................................................ 225
Formaty map bitowych i palety kolorw ............................................................................. 226
Wywietlanie kolorw ....................................................................................................... 230
Bezpieczne palety kolorw ................................................................................................ 231

Kompresja obrazw.............................................................................................................232
Podstawowe wiadomoci o kompresji................................................................................. 233
Algorytmy kompresji formatu GIF i JPEG .......................................................................... 234
Wywietlanie skompresowanych plikw.............................................................................. 235

Przeplot obrazu i przezroczysto ta...................................................................................238

Przezroczysto................................................................................................................ 238
Przeplot w formacie GIF ................................................................................................... 239
Wywietlanie progresywne w formacie JPEG ...................................................................... 242
Tworzenie obrazw o przejrzystym tle oraz obrazw z przeplotem ....................................... 242

Animowane pliki GIF ..........................................................................................................243

Tworzenie i wykorzystanie obrazw ...................................................................................243
Wasne projekty................................................................................................................ 244
Gotowe zestawy obrazw.................................................................................................. 245
Kliparty otrzymywane za porednictwem sieci..................................................................... 246
Obrazy z innych stron sieci ................................................................................................ 246

Format przyszoci: PNG.....................................................................................................247

rda informacji.................................................................................................................248
Podsumowanie.....................................................................................................................249
Warsztat...............................................................................................................................249
Pytania i odpowiedzi ......................................................................................................... 250
Quiz ................................................................................................................................ 251
Odpowiedzi ...................................................................................................................... 251
wiczenia ........................................................................................................................ 251

Rozdzia 9. Tworzenie animowanych obrazw .................................................. 253

Czym jest animacja? ............................................................................................................253
Kiedy i gdzie uywa animacji ............................................................................................254
Tworzenie przezroczystych obrazw GIF............................................................................256


  

Wybr przezroczystego koloru........................................................................................... 257

Programy umoliwiajce kompilacj animowanych GIF-w...............................................258

GIF Construction Set (dla systemw Windows)................................................................... 258
GifBuilder (dla systemu Macintosh).................................................................................... 259

Ograniczanie wielkoci animacji.........................................................................................261

Narzdzia pomocne przy tworzeniu obrazw ......................................................................264
Przydatne moliwoci programw ...................................................................................... 266

Podsumowanie.....................................................................................................................272
Warsztat...............................................................................................................................272
Pytania i odpowiedzi ......................................................................................................... 273
Quiz ................................................................................................................................ 273
Odpowiedzi ...................................................................................................................... 273
wiczenia ........................................................................................................................ 274

"#$%&' (%  )!

Rozdzia 10. XHTML i arkusze stylw.............................................................. 277
Czym jest XHTML i dlaczego naley go uywa? ...............................................................277
Identyfikator <DOCTYPE>............................................................................................... 278
Skadnia XHTML ............................................................................................................. 279

Idea arkuszy stylw..............................................................................................................280

Dodatkowe informacje o arkuszach stylw..........................................................................282
Ksigarnia Bookworm.........................................................................................................283
Sposoby tworzenia arkuszy stylw ......................................................................................286
Zewntrzne arkusze stylw................................................................................................ 286
Osadzone arkusze stylw................................................................................................... 290

Kilka sw o kaskadzie stylw ............................................................................................293

Najczciej stosowane waciwoci stylw oraz ich wartoci ...........................................293
Kontrola ukadu strony przy uyciu waciwoci CSS........................................................... 294
To, kolory i obrazy .......................................................................................................... 296
Okrelanie wygldu obramowa ......................................................................................... 300
Okrelanie czcionek i stylw .............................................................................................. 303
Waciwoci CSS okrelajce wyrwnanie tekstu................................................................. 305
Style lokalne..................................................................................................................... 306
rda informacji o kaskadowych arkuszach stylw ............................................................. 314

Warsztat...............................................................................................................................314
Pytania i odpowiedzi ......................................................................................................... 314
Quiz ................................................................................................................................ 315
Odpowiedzi ...................................................................................................................... 315
wiczenia ........................................................................................................................ 316

Rozdzia 11. Tabele........................................................................................... 317

Definicja tabeli ....................................................................................................................318
Tworzenie tabel ...................................................................................................................318
Czci tabeli ........................................................................................................................318
Znacznik <table> .............................................................................................................. 319


Wiersze i komrki............................................................................................................. 320
Puste komrki .................................................................................................................. 322
Podpisy............................................................................................................................ 323

Okrelanie wielkoci tabel, obramowa oraz komrek .......................................................326

Okrelanie szerokoci tabeli ............................................................................................... 326
Zmiana obramowa tabeli.................................................................................................. 327
Odstpy midzy zawartoci komrki a jej obramowaniem................................................... 329
Odstpy midzy komrkami .............................................................................................. 329
Szeroko kolumn............................................................................................................. 330
Wprowadzanie zama wiersza........................................................................................... 331

Kolor i wyrwnanie tabeli oraz komrek ............................................................................333

Modyfikacja koloru ta tabel i komrek ............................................................................... 333
Zmiana koloru obramowa tabeli........................................................................................ 335

Okrelanie wyrwnania zawartoci tabel ............................................................................336

Wyrwnywanie tabeli........................................................................................................ 336
Wyrwnanie zawartoci komrki........................................................................................ 337
Wyrwnywanie tytuu ....................................................................................................... 340

Komrki rozpite na kilku wierszach lub kolumnach...........................................................340

Bardziej zaawansowane moliwoci ulepszania tabel.........................................................348
Grupowanie i okrelanie wyrwnania kolumn ...................................................................... 349
Grupowanie i okrelanie wyrwnania wierszy...................................................................... 352
Atrybuty FRAME oraz RULES.......................................................................................... 354

Inne elementy i atrybuty tabel...............................................................................................356

Podsumowanie.....................................................................................................................356
Warsztat...............................................................................................................................360
Pytania i odpowiedzi ......................................................................................................... 360
Quiz ................................................................................................................................ 361
Odpowiedzi ...................................................................................................................... 361
wiczenia ........................................................................................................................ 361

Rozdzia 12. Ramki i poczenia do nich ........................................................... 363

Czym s ramki i gdzie s obsugiwane.................................................................................363
Poczenia do ramek............................................................................................................364
Znacznik <base>............................................................................................................... 368

Posugiwanie si ramkami ...................................................................................................369

Znacznik <frameset>......................................................................................................... 370
Znacznik <frame>............................................................................................................. 372
Znacznik <noframes>........................................................................................................ 373

Zmiana obramowa ramek...................................................................................................374

Atrybuty dodatkowe.......................................................................................................... 375

Tworzenie zoonych ukadw ramek..................................................................................375

Magiczne nazwy target ...................................................................................................... 386

Ramki lokalne......................................................................................................................387
Podsumowanie.....................................................................................................................389
Warsztat...............................................................................................................................392
Pytania i odpowiedzi ......................................................................................................... 392
Quiz ................................................................................................................................ 392
Odpowiedzi ...................................................................................................................... 392

"


  

wiczenia ........................................................................................................................ 393

"*$%+  %, -!

Rozdzia 13. Multimedia: dodawanie dwikw, obrazw wideo
i innych elementw multimedialnych ................................................................ 397
Przedstawienie sposobw prezentacji dwikw oraz obrazw wideo..............................398
Stare, lecz uyteczne rozwizanie doczanie.................................................................399
Osadzanie dwikw i obrazw wideo...............................................................................407
Wykorzystanie elementu embed ......................................................................................... 408
Uycie elementu object ..................................................................................................... 410
czenie elementw embed i object.................................................................................... 412
Osadzanie animacji Flash................................................................................................... 412
Osadzanie animacji Shockwave.......................................................................................... 413
Osadzanie RealAudio oraz RealVideo ................................................................................. 415
Techniki multimedialne wykorzystywane w Microsoft Internet Explorerze ............................. 416

Typy plikw dwikowych i wideo.....................................................................................419

O dodatkach i odtwarzaczach ..............................................................................................424
Windows Media Player ..................................................................................................... 425
Flash firmy Macromedia.................................................................................................... 426
Shockwave firmy Macromedia........................................................................................... 426
QuickTime firmy Apple..................................................................................................... 426
Produkty RealNetworks .................................................................................................... 427
Inne dodatki ..................................................................................................................... 428

Podsumowanie.....................................................................................................................429
Warsztat...............................................................................................................................429
Pytania i odpowiedzi ......................................................................................................... 430
Quiz ................................................................................................................................ 431
Odpowiedzi ...................................................................................................................... 431
wiczenia ........................................................................................................................ 431

Rozdzia 14. Dwik i obraz wideo.................................................................... 433

Dwik wiadomoci podstawowe..................................................................................433
Fale dwikowe ................................................................................................................ 434
Konwersja fali dwikowej do postaci cyfrowej................................................................... 434
Odtwarzanie dwiku cyfrowego w postaci analogowej ........................................................ 437

Popularne formaty zapisu dwiku.......................................................................................437

Format
law (Mu-law), AU.............................................................................................. 438
Format AIFF/AIFC ........................................................................................................... 438
Format SND systemu Macintosh........................................................................................ 439
Format WAVE systemu Windows ...................................................................................... 439
Format MPEG Audio ........................................................................................................ 439
Format RealAudio............................................................................................................. 440
Windows Media................................................................................................................ 440

Skd bra pliki dwikowe?................................................................................................440

Prbkowanie dwiku..........................................................................................................441
Prbkowanie na PC .......................................................................................................... 441
Prbkowanie na Macintoshach........................................................................................... 443



Prbkowanie w systemach uniksowych .............................................................................. 444

Konwersja plikw dwikowych ........................................................................................444

Dwik w sieci ....................................................................................................................444
Cyfrowy obraz wideo ..........................................................................................................445
Analogowy i cyfrowy obraz wideo...................................................................................... 446
Kompresja i dekompresja obrazu wideo (Codec) ................................................................. 447

Formaty plikw....................................................................................................................448
Format QuickTime............................................................................................................ 448
Format Video for Windows (AVI) ...................................................................................... 448
Format MPEG Video ........................................................................................................ 449
RealVideo ........................................................................................................................ 449
Windows Media................................................................................................................ 450

Kompresja obrazu wideo.....................................................................................................450

Kodowanie symetryczne i asymetryczne ............................................................................. 450
Porwnywanie uj........................................................................................................... 451
Ujcia kluczowe ............................................................................................................... 452
Wspomaganie sprztowe ................................................................................................... 453

Systemy kodowania .............................................................................................................453

Algorytm CinePak............................................................................................................. 453
Algorytm Indeo................................................................................................................. 454
Algorytm JPEG ................................................................................................................ 454
Algorytm MPEG............................................................................................................... 455

Digitalizacja obrazu wideo..................................................................................................455

Analogowy sygna wideo ................................................................................................... 455
Obraz wideo na PC........................................................................................................... 456
Obraz wideo na Mac-ach................................................................................................... 458
Obraz wideo w systemach uniksowych ............................................................................... 458

Uzyskiwanie i konwersja plikw wideo..............................................................................458

Pliki wideo w sieci..............................................................................................................459
rda informacji.................................................................................................................461
Podsumowanie.....................................................................................................................461
Warsztat...............................................................................................................................462
Pytania i odpowiedzi ......................................................................................................... 462
Quiz ................................................................................................................................ 463
Odpowiedzi ...................................................................................................................... 463
wiczenia ........................................................................................................................ 463

Rozdzia 15. Wykorzystywanie Javy.................................................................. 465

Czym jest Java? ...................................................................................................................465
Jzyk Java........................................................................................................................ 466
Aplety pisane w Javie ........................................................................................................ 466
Do czego mona uy Javy? .............................................................................................. 467

Programowanie w Javie ......................................................................................................469

Java Development Kit (JDK) ............................................................................................. 469

Doczanie apletw do stron WWW....................................................................................478

Znacznik <applet> ............................................................................................................ 478
Znacznik <param> ............................................................................................................ 479
Zastpowanie apletw kodem HTML ................................................................................. 480


  

Rozbudowywanie przykadu Ticker.................................................................................... 480
Stosowanie gotowych apletw............................................................................................ 480

Podsumowanie.....................................................................................................................481
Warsztat...............................................................................................................................482
Pytania i odpowiedzi ......................................................................................................... 482
Quiz ................................................................................................................................ 482
Odpowiedzi ...................................................................................................................... 483
wiczenia ........................................................................................................................ 483

"* 
+. 
$% / !
Rozdzia 16. Tworzenie i stosowanie map odsyaczy ......................................... 487
Czym s mapy odsyaczy......................................................................................................487
Mapy odsyaczy dziaajce po stronie serwera ..................................................................... 488
Mapy odsyaczy dziaajce po stronie klienta ....................................................................... 489
Mapy odsyaczy a przegldarki tekstowe............................................................................. 489

Tworzenie map odsyaczy dziaajcych po stronie serwera ................................................490

Wybr obrazu .................................................................................................................. 490
Definiowanie koordynat..................................................................................................... 490
Tworzenie i zapisywanie pliku mapy odsyaczy ................................................................... 495
Instalowanie programu obsugi map odsyaczy ..................................................................... 496
czenie wszystkiego razem .............................................................................................. 496

Tworzenie map odsyaczy obsugiwanych po stronie przegldarki .....................................502

Znaczniki <map> i <area> ................................................................................................. 502
Atrybut usemap ................................................................................................................ 503

Tworzenie stron WWW obsugujcych oba typy map odsyaczy .........................................505

Podsumowanie.....................................................................................................................506
Warsztat...............................................................................................................................507
Pytania i odpowiedzi ......................................................................................................... 507
Quiz ................................................................................................................................ 508
Odpowiedzi ...................................................................................................................... 508
wiczenia ........................................................................................................................ 509

Rozdzia 17. Projektowanie formularzy............................................................. 511

Forma i funkcja formularzy..................................................................................................512
Podstawowe elementy formularzy .......................................................................................518
Zastosowanie znacznika <form> do tworzenia formularzy .................................................... 518
Tworzenie elementw kontrolnych przy wykorzystaniu elementu input ................................. 520
Zastosowanie innych elementw kontrolnych ...................................................................... 533

Dodatkowe elementy............................................................................................................537
Wywietlanie etykiet ......................................................................................................... 537
Grupowanie elementw przy wykorzystaniu znacznikw <fieldset> oraz <legend> ................. 538
Modyfikacja domylnej kolejnoci poruszania si pomidzy elementami ................................ 539
Stosowanie klawiszy dostpu ............................................................................................. 540
Tworzenie elementw wyczonych i przeznaczonych tylko do odczytu ................................ 540



Planowanie formularzy ........................................................................................................545

Podsumowanie.....................................................................................................................545
Warsztat...............................................................................................................................547
Pytania i odpowiedzi ......................................................................................................... 547
Quiz ................................................................................................................................ 548
Odpowiedzi ...................................................................................................................... 548
wiczenia ........................................................................................................................ 549

Rozdzia 18. Skrypty CGI dla pocztkujcych .................................................. 551

Co to jest skrypt CGI?..........................................................................................................552
Jak dziaaj skrypty? ......................................................................................................... 552
Prosty przykad ................................................................................................................ 553

Czy mog uywa skryptw CGI?........................................................................................555

Czy Twj serwer jest skonfigurowany w sposb pozwalajcy na wykonanie skryptw CGI? .. 555
Czy umiesz programowa? ................................................................................................ 556
Jakich jzykw programowania naley uywa? .................................................................. 556
Czy Twj serwer jest skonfigurowany prawidowo?............................................................. 556
A jeli nie korzystasz z systemu Unix? ................................................................................ 557

Anatomia skryptu CGI..........................................................................................................558

Nagwki odpowiedzi ........................................................................................................ 558
Dane zwracane w odpowiedzi ............................................................................................ 559
Skrypty z parametrami ...................................................................................................... 562
Przesyanie innych informacji do skryptu ............................................................................ 563

Generowanie specjalnych odpowiedzi ................................................................................564

Odpowied polegajca na odesaniu innego dokumentu ........................................................ 564
Brak odpowiedzi............................................................................................................... 565

Skrypty przetwarzajce formularze......................................................................................565

Formularze i skrypty je przetwarzajce ............................................................................... 566
GET i POST .................................................................................................................... 566
Kodowanie URL............................................................................................................... 567

Najczstsze problemy ..........................................................................................................570

Zmienne CGI........................................................................................................................571
Programy dekodujce dane z formularzy..............................................................................571
uncgi................................................................................................................................ 571
CGI.pm ........................................................................................................................... 573
Samodzielne dekodowanie danych z formularzy .................................................................. 574

Skrypty bez przetwarzania nagwkw................................................................................575

Skrypty isindex ....................................................................................................................576
Podsumowanie.....................................................................................................................578
Warsztat...............................................................................................................................578
Pytania i odpowiedzi ......................................................................................................... 578
Quiz ................................................................................................................................ 580
Odpowiedzi ...................................................................................................................... 580
wiczenia ........................................................................................................................ 580

", - 01 2*3! 

Rozdzia 19. Tworzenie skryptw w jzyku JavaScript ..................................... 583


  

Przedstawienie jzyka JavaScript........................................................................................584
Dlaczego miaby uywa jzyka JavaScript? ...................................................................... 585

Znacznik <script> ................................................................................................................587

Struktura skryptw pisanych w jzyku JavaScript................................................................ 587
Atrybut SRC .................................................................................................................... 588

Podstawowe polecenia i struktura jzyka ............................................................................588

Waciwoci i metody........................................................................................................ 589
Zdarzenia i JavaScript ....................................................................................................... 591
Zmienne........................................................................................................................... 593
Operatory i wyraenia ....................................................................................................... 594

Podstawy programowania w jzyku JavaScript...................................................................595

Czym jest program? .......................................................................................................... 595
Dowiedz si wicej o programowaniu w JavaScript.............................................................. 598

Podsumowanie.....................................................................................................................598
Warsztat...............................................................................................................................599
Pytania i odpowiedzi ......................................................................................................... 599
Quiz ................................................................................................................................ 600
Odpowiedzi ...................................................................................................................... 600
wiczenia ........................................................................................................................ 601

Rozdzia 20. Praca z JavaScript........................................................................ 603

Tworzenie generatora losowych pocze...........................................................................603
Weryfikacja danych w formularzach....................................................................................612
Tworzenie podmienianych obrazkw ..................................................................................618
Podsumowanie.....................................................................................................................622
Warsztat...............................................................................................................................622
Pytania i odpowiedzi ......................................................................................................... 622
Quiz ................................................................................................................................ 623
Odpowiedzi ...................................................................................................................... 623
wiczenia ........................................................................................................................ 623

Rozdzia 21. Uycie Dynamicznego HTMLa.................................................... 625

Czym w zasadzie jest DHTML?...........................................................................................626
Prezentacja jzyka JavaScript ............................................................................................ 629
Wykorzystanie modelu obiektw dokumentu....................................................................... 638
Obsuga zdarze ............................................................................................................... 642

Walka z rzeczywistoci: techniki DHTML dziaajce w wielu przegldarkach ................643

Okrelanie przegldarki...................................................................................................... 644
Tworzenie odwoa DOM dziaajcych w wielu przegldarkach............................................ 646

Dalsze poznawanie DHTML................................................................................................681

Podsumowanie.....................................................................................................................681
Warsztat...............................................................................................................................682
Pytania i odpowiedzi ......................................................................................................... 682
Quiz ................................................................................................................................ 683
Odpowiedzi ...................................................................................................................... 683
wiczenia ........................................................................................................................ 684



"4

  5
 6 !
Rozdzia 22. Tworzenie i projektowanie stron WWW:
zalecenia i przeciwwskazania............................................................................ 687
Stosowanie rozszerze HTML .............................................................................................688
Publikowanie w sieci ..........................................................................................................691
Pisz jasno i zwile ........................................................................................................... 691
Organizuj strony w sposb przejrzysty................................................................................ 692
Twrz strony, bdce samodzielnymi caociami ................................................................. 693
Ostronie stosuj wyrnienia.............................................................................................. 694
Nie stosuj terminologii typowej dla danego typu przegldarek ............................................... 694
Sprawdzaj ortografi i skadni........................................................................................... 695

Projektowanie i ukad strony ...............................................................................................695

Stosuj nagwki jako nagwki ........................................................................................... 696
Grupuj informacje wice si ze sob................................................................................ 696
Stosuj spjny ukad........................................................................................................... 697

Stosowanie pocze ...........................................................................................................698

Dbaj o to, by tekst prezentacyjny pocze zawartych w menu by opisowy........................... 698
Umieszczaj poczenia w tekcie ........................................................................................ 699
Unikaj uywania sowa tutaj ........................................................................................... 700
Poczenia tworzy czy nie tworzy............................................................................... 701

Obrazy .................................................................................................................................703
Nie przesad z liczb obrazw ........................................................................................... 704
Stosuj tekst alternatywny................................................................................................... 705
Stosuj mae obrazy............................................................................................................ 705
Ostronie z zaoeniami ..................................................................................................... 706
Nie przesadzaj z kolorami ta i pocze .............................................................................. 707

Inne dobre zwyczaje i podpowiedzi ....................................................................................708

Umieszczaj poczenie do strony gwnej............................................................................ 708
Nie rozdzielaj tematu midzy strony ................................................................................... 708
Wywa waciwie liczb stron ............................................................................................ 709
Podpisuj swoje strony ....................................................................................................... 710
Udostpniaj wersje stron HTML nie korzystajce z hipertekstu ............................................ 711

Podsumowanie.....................................................................................................................712
Warsztat...............................................................................................................................713
Pytania i odpowiedzi ......................................................................................................... 713
Quiz ................................................................................................................................ 714
Odpowiedzi ...................................................................................................................... 714
wiczenia ........................................................................................................................ 715

Rozdzia 23. Przykady dobrych i zych stron WWW ........................................ 717

Przykad 1. Witryna firmowa...............................................................................................717
Co nowego w firmie? ........................................................................................................ 718
Informacje techniczne ....................................................................................................... 719
Informacje o firmie ........................................................................................................... 721
Produkty.......................................................................................................................... 721
Wsparcie dla produktw .................................................................................................... 722


  

Moliwoci pracy.............................................................................................................. 722
Cechy zaprezentowanej witryny i szczegy projektowe ....................................................... 724

Przykad 2. Encyklopedia multimedialna.............................................................................724

Strona przegldowa........................................................................................................... 725
Pozycja Norton ................................................................................................................ 725
Indeks marek.................................................................................................................... 728
Cechy zaprezentowanej witryny i szczegy projektowe ....................................................... 728

Przykad 3. Katalog wysykowy...........................................................................................730

Przegldanie katalogu ........................................................................................................ 731
Zamawianie...................................................................................................................... 734
Cechy zaprezentowanej witryny i szczegy projektowe ....................................................... 739

Podsumowanie.....................................................................................................................741
Warsztat...............................................................................................................................741
Pytania i odpowiedzi ......................................................................................................... 741
Quiz ................................................................................................................................ 742
Odpowiedzi ...................................................................................................................... 742
wiczenia ........................................................................................................................ 743

Rozdzia 24. Projektowanie witryn do praktycznych zastosowa ...................... 745

Czym s zastosowania praktyczne....................................................................................745
Uwzgldnienie poziomu dowiadczenia uytkownika..........................................................747
Podaj list stron zawierajcych opis witryny........................................................................ 748
Opisz system nawigacyjny ................................................................................................. 748
Dodaj informacje o zalecanych przegldarkach.................................................................... 751
Lista innych niezbdnych plikw ........................................................................................ 752

Okrelanie preferencji uytkownikw .................................................................................752

Podejmowanie decyzji o uyciu jzyka HTML 4.0 bd XHTML 1.0.................................754
HTML 4.0 oraz XHTML 1.0 Transitional (poredni)........................................................... 754
HTML 4.0 i XHTML 1.0 Frameset (ukad ramek) .............................................................. 757
HTML 4.0 i XHTML 1.0 Strict (cisy) .............................................................................. 759

Podsumowanie.....................................................................................................................763
Warsztat...............................................................................................................................763
Pytania i odpowiedzi ......................................................................................................... 763
Quiz ................................................................................................................................ 764
Odpowiedzi ...................................................................................................................... 764
wiczenia ........................................................................................................................ 765

74$(%
   6
Rozdzia 25. Publikowanie witryny ................................................................... 769
Jak dziaa serwer WWW? ...................................................................................................769
Co jeszcze robi serwery? ................................................................................................. 770

Znajdowanie serwera WWW...............................................................................................772

Korzystanie z serwera WWW w szkole lub w pracy ............................................................ 772



Korzystanie z usug komercyjnych ..................................................................................... 772

Zakadanie wasnego serwera ............................................................................................. 773

Organizowanie i instalowanie plikw HTML .....................................................................774

Pytania do Webmastera..................................................................................................... 774
Domylny plik indeksu i poprawne nazwy plikw ................................................................ 775
Instalowanie plikw........................................................................................................... 776
Przemieszczanie plikw pomidzy systemami...................................................................... 777
Narzdzia zdalnego zarzdzania plikami .............................................................................. 778

Jaki jest mj adres URL?.....................................................................................................779

Testuj, testuj i jeszcze raz testuj!..........................................................................................780
Usuwanie bdw ................................................................................................................780
Nie mam dostpu do serwera ............................................................................................. 780
Nie mam dostpu do plikw............................................................................................... 781
Nie mam dostpu do obrazw............................................................................................ 781
Poczenia nie dziaaj poprawnie....................................................................................... 781
Pliki nie s wywietlane poprawnie ..................................................................................... 782

Podsumowanie.....................................................................................................................782
Warsztat...............................................................................................................................782
Pytania i odpowiedzi ......................................................................................................... 783
Quiz ................................................................................................................................ 784
Odpowiedzi ...................................................................................................................... 784
wiczenia ........................................................................................................................ 784

Rozdzia 26. Rejestrowanie i reklamowanie stron WWW ................................. 785

Rejestracja i reklamowanie stron WWW.............................................................................785
Listy witryn WWW........................................................................................................... 786
Yahoo! ............................................................................................................................ 786
W3 Virtual Library............................................................................................................ 788
te Strony (Yellow Pages) .............................................................................................. 790
Prywatne serwisy katalogowe ............................................................................................ 791

Serwisy indeksujce i wyszukujce.....................................................................................791

AltaVista .......................................................................................................................... 791
Excite .............................................................................................................................. 792
Hotbot ............................................................................................................................. 793
Lycos .............................................................................................................................. 793
Go.com............................................................................................................................ 794
Narzdzia automatycznej rejestracji.................................................................................... 795

Reklamowanie witryny za porednictwem sieci Usenet ......................................................796

Piercienie Internetowe (Ringi)...........................................................................................797
Wizytwki, papeteria firmowa i broszury............................................................................798
Informacje o czytelnikach ....................................................................................................799
Raporty............................................................................................................................ 799
Liczniki wizyt na stronie .................................................................................................... 800

Podsumowanie.....................................................................................................................801
Warsztat...............................................................................................................................801
Pytania i odpowiedzi ......................................................................................................... 801
Quiz ................................................................................................................................ 802

"!


  

Odpowiedzi ...................................................................................................................... 802
wiczenia ........................................................................................................................ 802

Rozdzia 27. Testowanie, poprawianie i aktualizowanie stron WWW............... 803

Test poprawnoci ................................................................................................................804
Korekta kodu HTML ........................................................................................................ 804
Testowanie w przegldarkach ............................................................................................ 814
Sprawdzanie pocze ....................................................................................................... 815

Testowanie uytecznoci strony...........................................................................................816

Studiowanie raportw........................................................................................................ 817

Uaktualnianie prezentacji i dodawanie nowych stron ..........................................................817

Dodawanie nowej zawartoci ............................................................................................. 817
Rewidowanie struktury...................................................................................................... 818

Podsumowanie.....................................................................................................................819
Warsztat...............................................................................................................................820
Pytania i odpowiedzi ......................................................................................................... 820
Quiz ................................................................................................................................ 820
Odpowiedzi ...................................................................................................................... 821
wiczenia ........................................................................................................................ 822

78
 9$   +    )
Rozdzia 28. Konfiguracja wasnego serwera WWW........................................ 825
Zalety i wady posiadania wasnego serwera WWW ...........................................................826
Okrelenie odpowiedniego komputera.................................................................................826
Okrelenie odpowiedniego poczenia z Internetem............................................................827
Wsppraca z dostawc usug internetowych ....................................................................... 828
Wykorzystanie istniejcego poczenia ................................................................................ 828

Oprogramowanie .................................................................................................................829
Serwery przeznaczone dla systemw Unix ..........................................................................830
NCSA HTTPD................................................................................................................. 830
Apache ............................................................................................................................ 830
W3 (CERN) HTTPD........................................................................................................ 831
Web Server firmy Netscape ............................................................................................... 832

Serwery przeznaczone dla systemu Windows......................................................................833

Microsoft Internet Information Server................................................................................. 833
Microsoft Personal Web Server.......................................................................................... 835
WebSite firmy OReilly ..................................................................................................... 835
Serwery firmy Netscape przeznaczone dla systemu Windows ............................................... 837
Apache for Windows......................................................................................................... 837

Serwery dziaajce na komputerach Macintosh ...................................................................838

Personal Web Sharing firmy Apple ..................................................................................... 838

Podpowiedzi zwizane z poprawnym zarzdzaniem serwerem ...........................................839

Skojarz adres komputera z nazw witryny www.twoja_witryna.com ................................ 839
Stwrz adres poczty elektronicznej administratora ............................................................... 839
Stwrz stron gwn serwera............................................................................................ 840
Okrel wytyczne dotyczce zarzdzania i projektu witryny ................................................... 840



"

Podsumowanie.....................................................................................................................840
Warsztat...............................................................................................................................840
Pytania i odpowiedzi ......................................................................................................... 841
Quiz ................................................................................................................................ 843
Odpowiedzi ...................................................................................................................... 843

Rozdzia 29. Porady i wskazwki na temat serwera WWW .............................. 845

Mechanizm NCSA SSI.........................................................................................................845
Konfiguracja serwera ........................................................................................................ 846
Tworzenie plikw z poleceniami SSI .................................................................................. 848
Konfiguracja SSI .............................................................................................................. 848
Wczanie innych plikw do stron WWW ........................................................................... 849
Doczanie wartoci zmiennych.......................................................................................... 850
Doczanie informacji o pliku ............................................................................................. 852
Wyniki dziaania polece i skryptw jako cz stron WWW................................................ 853

Przekierowanie pliku...........................................................................................................856
Logi serwera WWW ............................................................................................................858
Logi serwera oraz standardowy format logu ........................................................................ 858
Kilka uwag na temat buforowania....................................................................................... 859
Tworzenie statystyk na podstawie logw............................................................................. 861
User-agent i odnoniki ....................................................................................................... 862

Wasne dokumenty obsugi bdw......................................................................................863

Programy CGI jako dokumenty obsugi bdw ................................................................... 864

Podsumowanie.....................................................................................................................864
Warsztat...............................................................................................................................865
Pytania i odpowiedzi ......................................................................................................... 865
Quiz ................................................................................................................................ 866
Odpowiedzi ...................................................................................................................... 866
wiczenia ........................................................................................................................ 867

Rozdzia 30. Bezpieczestwo serwera WWW i kontrola dostpu ...................... 869

Jak lepiej zabezpieczy serwer WWW?..............................................................................870
Uruchom serwer jako uytkownik nobody .......................................................................... 871
Ogranicz dostp do skryptw CGI...................................................................................... 871
Ogranicz zastosowanie pocze symbolicznych .................................................................. 872
Wycz SSI ...................................................................................................................... 872
Wycz wywietlanie zawartoci katalogw ......................................................................... 873
Odetnij robotom sieciowym dostp do swojego serwera ....................................................... 873

Jak pisa bezpieczne skrypty CGI........................................................................................874

Kontrola dostpu do serwera WWW i autoryzacja wprowadzenie ................................876

Co oznacza kontrola dostpu i autoryzacja? ........................................................................ 877
Rodzaje kontroli dostpu ................................................................................................... 878
Na ile bezpieczny jest serwer WWW? ................................................................................ 879

Kontrola dostpu i autoryzacja na serwerze NCSA HTTPD ...............................................880

Globalna i lokalna kontrola dostpu .................................................................................... 880
Kontrola dostpu ze wzgldu na nazw komputera .............................................................. 882
Ustawianie pliku hase ....................................................................................................... 883

""


  

Kontrola dostpu na poziomie uytkownika......................................................................... 884
Ustawienia pliku grupy ...................................................................................................... 886
Ograniczanie dostpu dla grupy .......................................................................................... 886

Opcje NCSA........................................................................................................................887
Uniewanianie ustawie opcji i kontroli dostpu ................................................................888
Kontrola dostpu w serwerze Microsoft Internet Information Server..................................889
Bezpieczne poczenia i SSL ...............................................................................................890
Jak dziaa SSL .................................................................................................................. 890
Jak powstaj poczenia SSL ............................................................................................. 893
Ustawienia SSL na serwerze .............................................................................................. 893
Wicej informacji o SSL.................................................................................................... 894

Podsumowanie.....................................................................................................................894
Warsztat...............................................................................................................................895
Pytania i odpowiedzi ......................................................................................................... 895
Quiz ................................................................................................................................ 896
Odpowiedzi ...................................................................................................................... 896
wiczenia ........................................................................................................................ 897

1
+   
Dodatek A Inne rda informacji .................................................................... 901
Analizatory skadni plikw Log...........................................................................................902
Dostawcy usug sieciowych.................................................................................................902
Dwik i obraz wideo..........................................................................................................903
Edytory i konwertery HTML................................................................................................903
Formularze i mapy odsyaczy...............................................................................................904
Indeksy i wyszukiwarki sieci WWW ...................................................................................905
Interfejs Common Gateway (CGI) oraz skrypty CGI............................................................906
Java, JavaScript i obiekty osadzone ....................................................................................906
Liczniki dostpu...................................................................................................................907
Narzdzia i informacje dotyczce obrazw .........................................................................907
Narzdzia sprawdzajce HTML (walidatory), narzdzia sprawdzajce cza
i proste pajki (roboty) sieciowe.........................................................................................908
Pozostae..............................................................................................................................909
Przegldarki.........................................................................................................................909
Przyszo HTML i sieci WWW..........................................................................................910
Serwery i administrowanie sieci .......................................................................................910
Specyfikacje dla HTML, HTTP i URL ................................................................................911
Zbiory informacji na temat tworzenia dokumentw HTML i WWW ...................................912

Dodatek B Krtki opis jzyka HTML 4.0......................................................... 915

Najczciej uywane atrybuty i zdarzenia............................................................................916
%coreattrs........................................................................................................................ 916
%i18n .............................................................................................................................. 917
%events ........................................................................................................................... 917

Struktura...............................................................................................................................917
<bdo></bdo>................................................................................................................ 917
<body>...</body>............................................................................................................. 918



"#

Komentarze <!-- --> ..................................................................................................... 918

<div></div>.................................................................................................................. 919
<!DOCTYPE> ............................................................................................................. 919
<h1></h1> do <h6></h6> .......................................................................................... 919
<head></head> ............................................................................................................. 920
<hr> ................................................................................................................................ 920
<html></html>.............................................................................................................. 921
<meta></meta>............................................................................................................. 921
<span></span> ............................................................................................................. 921
<title></title> ................................................................................................................ 922

Wyraenia tekstowe i akapity ..............................................................................................922

<acronym></acronym> ................................................................................................. 922
<address></address> ..................................................................................................... 922
<blockquote></blockquote> ........................................................................................... 923
<br> ................................................................................................................................ 923
<cite></cite>................................................................................................................. 923
<code></code> ............................................................................................................. 924
<del></del> .................................................................................................................. 924
<dfn></dfn> ................................................................................................................. 924
<em></em>.................................................................................................................. 925
<ins></ins>................................................................................................................... 925
<kbd><kbd>................................................................................................................. 925
<p></p> ....................................................................................................................... 925
<pre></pre> ................................................................................................................. 926
<q></q> ....................................................................................................................... 926
<samp></samp> ........................................................................................................... 926
<strong></strong> ......................................................................................................... 927
................................................................................................................. 927
................................................................................................................. 927
<var></var> ................................................................................................................. 927

Elementy formatujce tekst ..................................................................................................928

<b></b> ....................................................................................................................... 928
<basefont> ....................................................................................................................... 928
<big></big> .................................................................................................................. 928
<font></font> ............................................................................................................... 929
<i></i> ......................................................................................................................... 929
<s></s>........................................................................................................................ 929
<small></small>............................................................................................................ 929
<strike></strike> ........................................................................................................... 930
<tt></tt>....................................................................................................................... 930
<u></u> ....................................................................................................................... 930

Listy.....................................................................................................................................930
<dd></dd> ................................................................................................................... 931
<dir></ dir > ................................................................................................................. 931
<dl></dl> ..................................................................................................................... 931
<dt></dt> ..................................................................................................................... 932
<li></li> ....................................................................................................................... 932

"


  

<menu></menu>........................................................................................................... 932
<ol></ol> ..................................................................................................................... 933
<ul></ul> ..................................................................................................................... 933

Poczenia............................................................................................................................933
<a></a> ....................................................................................................................... 933
<base>............................................................................................................................. 934
<link> .............................................................................................................................. 935

Tabele..................................................................................................................................935
<caption></caption>...................................................................................................... 935
<col> ............................................................................................................................... 936
<colgroup></colgroup>.................................................................................................. 936
<table></table> ............................................................................................................. 937
<tbody></tbody> .......................................................................................................... 937
<td></td> ..................................................................................................................... 938
<tfoot></tfoot> ............................................................................................................. 938
<th></th> ..................................................................................................................... 939
<thead></thead> ........................................................................................................... 939
<tr></tr> ...................................................................................................................... 940

Ramki...................................................................................................................................940
<frame>........................................................................................................................... 941
<frameset></frameset>.................................................................................................. 941
<iframe></iframe> ........................................................................................................ 942
<noframes></noframes>................................................................................................ 942

Obiekty osadzone.................................................................................................................942
<applet></applet> ......................................................................................................... 943
<area></area>............................................................................................................... 943
<img></img> ................................................................................................................ 944
<map></map> .............................................................................................................. 944
<object></object> ......................................................................................................... 945
<param></param>......................................................................................................... 946

Style.....................................................................................................................................946
<style></style> ............................................................................................................. 946

Formularze...........................................................................................................................947
<button></button> ........................................................................................................ 947
<fieldset></fieldset> ...................................................................................................... 947
<form></form>............................................................................................................. 947
<input> ............................................................................................................................ 948
<isindex> ......................................................................................................................... 949
<label></label> ............................................................................................................. 950
<legend></legend> ........................................................................................................ 950
<option></option>......................................................................................................... 950
<select></select>........................................................................................................... 951
<textarea></textarea> .................................................................................................... 951

Skrypty.................................................................................................................................952
<script></script> ........................................................................................................... 952
<noscript></noscript>.................................................................................................... 953

Znaki ....................................................................................................................................953



"$

Dodatek C Porwnanie moliwoci przegldarek ............................................. 959

Tabela moliwoci przegldarek.........................................................................................959
Zdarzenia wbudowane.......................................................................................................1008

Dodatek D Krtki przewodnik po kaskadowych arkuszach stylw (CSS) ....... 1011

Jak korzysta z tego dodatku ..............................................................................................1012
Waciwoci bloku ............................................................................................................1013
bottom, left, right, top ..................................................................................................... 1013
direction......................................................................................................................... 1014
display ........................................................................................................................... 1014
float............................................................................................................................... 1014
position .......................................................................................................................... 1015
unicode-bidi.................................................................................................................... 1015
z-index........................................................................................................................... 1015

Waciwoci ta i koloru....................................................................................................1016
background .................................................................................................................... 1016
background-attachment ................................................................................................... 1016
background-color ............................................................................................................ 1016
background-image........................................................................................................... 1017
background-position ........................................................................................................ 1017
background-repeat .......................................................................................................... 1017
color .............................................................................................................................. 1018

Waciwoci modelu blokowego.......................................................................................1018

border............................................................................................................................ 1018
border-bottom, border-left, border-right, border-top ........................................................... 1019
border-color ................................................................................................................... 1019
border-bottom-color, border-left-color, border-right-color, border-top-color ......................... 1020
border-style .................................................................................................................... 1020
border-bottom-style, border-left-style, border-right-style, border-top-style............................ 1020
border-width................................................................................................................... 1021
border-bottom-width, border-left-width, border-right-width, border-top-width ...................... 1021
clear .............................................................................................................................. 1021
height, width................................................................................................................... 1022
margin ........................................................................................................................... 1022
margin-bottom, margin-left, margin-right, margin-top ......................................................... 1022
max-height, max-width .................................................................................................... 1023
min-height, min-width ..................................................................................................... 1023
padding .......................................................................................................................... 1023
padding-top, padding-left, padding-bottom, padding-right.................................................... 1024

Waciwoci czcionek .......................................................................................................1024

font ............................................................................................................................... 1024
font-family ..................................................................................................................... 1025
font-size......................................................................................................................... 1025
font-size-adjust ............................................................................................................... 1026
font-stretch..................................................................................................................... 1026
font-style........................................................................................................................ 1026
font-variant .................................................................................................................... 1027
font-weight..................................................................................................................... 1027

Waciwoci list................................................................................................................1027

"


  

list-style ......................................................................................................................... 1028
list-style-image................................................................................................................ 1028
list-style-position ............................................................................................................. 1028
list-style-type .................................................................................................................. 1029

Waciwoci tekstu............................................................................................................1029
letter-spacing .................................................................................................................. 1029
line-height ...................................................................................................................... 1029
text-align ........................................................................................................................ 1030
text-decoration................................................................................................................ 1030
text-indent ...................................................................................................................... 1030
text-shadow.................................................................................................................... 1031
text-transform................................................................................................................. 1031
vertical-align ................................................................................................................... 1031
white-space .................................................................................................................... 1032
word-spacing .................................................................................................................. 1032

Waciwoci efektw wizualnych......................................................................................1032

clip ................................................................................................................................ 1032
overflow ........................................................................................................................ 1033
visibility ......................................................................................................................... 1033

Gosowe waciwoci arkuszy stylw...............................................................................1033

azimuth.......................................................................................................................... 1033
cue ................................................................................................................................ 1034
cue-after, cue-before ....................................................................................................... 1034
elevation ........................................................................................................................ 1034
pause ............................................................................................................................. 1035
pause-after, pause-before................................................................................................. 1035
pitch .............................................................................................................................. 1035
pitch-range ..................................................................................................................... 1035
play-during ..................................................................................................................... 1036
richness.......................................................................................................................... 1036
speak ............................................................................................................................. 1036
speak-header .................................................................................................................. 1037
speak-numeral ................................................................................................................ 1037
speak-punctuation ........................................................................................................... 1037
speech-rate..................................................................................................................... 1037
stress ............................................................................................................................. 1038
voice-family ................................................................................................................... 1038
volume........................................................................................................................... 1038

Waciwoci zawartoci wygenerowanej/automatycznego numerowania..........................1039

content........................................................................................................................... 1039
counter-increment ........................................................................................................... 1039
counter-reset .................................................................................................................. 1040
marker-offset.................................................................................................................. 1040
quotes............................................................................................................................ 1040

Waciwoci mediw stronicowanych ..............................................................................1040

marks ............................................................................................................................ 1041
orphans.......................................................................................................................... 1041
page............................................................................................................................... 1041
page-break-after, page-break-before ................................................................................. 1042
page-break-inside ............................................................................................................ 1042
size................................................................................................................................ 1042



"

widows .......................................................................................................................... 1042

Waciwoci tabel .............................................................................................................1043

border-collapse ............................................................................................................... 1043
border-spacing ................................................................................................................ 1043
caption-side .................................................................................................................... 1043
column-span, row-span ................................................................................................... 1044
empty-cells..................................................................................................................... 1044
table-layout .................................................................................................................... 1044

Waciwoci interfejsu uytkownika..................................................................................1045

cursor ............................................................................................................................ 1045
outline............................................................................................................................ 1045
outline-color ................................................................................................................... 1045
outline-style.................................................................................................................... 1046
outline-width .................................................................................................................. 1046

Jednostki stosowane w kaskadowych arkuszach stylw ....................................................1046

<border-style> ................................................................................................................ 1046
<border-width>............................................................................................................... 1047
<czas> ........................................................................................................................... 1047
<czstotliwo> .............................................................................................................. 1048
<dugo> ...................................................................................................................... 1048
<gos-oglny>................................................................................................................. 1048
<kt>............................................................................................................................. 1049
<kolor>.......................................................................................................................... 1049
<konkretny-gos>............................................................................................................ 1049
<ksztat> ........................................................................................................................ 1049
<liczba> ......................................................................................................................... 1050
<liczba_cakowita>.......................................................................................................... 1050
<nazwa-rodziny> ............................................................................................................ 1050
<rodzina-oglna> ............................................................................................................ 1050
<uri> ............................................................................................................................. 1050
<warto_procentowa> ................................................................................................... 1051
<wielko_bezwzgldna>................................................................................................. 1051
<wielko_wzgldna>...................................................................................................... 1051

Dodatek E Informacje o jzyku JavaScript .................................................... 1053

Sw kilka o jzyku JavaScript 1.2....................................................................................1053
Obiekt anchor [C|2|3|4|I] .................................................................................................. 1054
Obiekt applet [C|3].......................................................................................................... 1054
Obiekt area [C|3] ............................................................................................................ 1054
Obiekt Array [C|3|I] ........................................................................................................ 1055
Obiekt boolean [C|3|I] ..................................................................................................... 1056
Obiekt button [C|2|3|I] ..................................................................................................... 1056
Obiekt checkbox [C|2|3|I]................................................................................................. 1057
Obiekt date [C|2|3|I] ........................................................................................................ 1058
Obiekt document [C|2|3|I] ................................................................................................ 1059
Objekt event [C]............................................................................................................. 1062
Obiekt fileUpload [C|3].................................................................................................... 1062
Obiekt form [C|2|3|I] ....................................................................................................... 1063
Obiekt frame [C|2|3|I]...................................................................................................... 1064

"


  

Obiekt Fuction [C|3]........................................................................................................ 1066
Obiekt hidden [C|2|3|I]..................................................................................................... 1067
Obiekt history [C|2|3|I] .................................................................................................... 1067
Obiekt image [C|3] .......................................................................................................... 1068
Obiekt layer [4] Tylko w Navigatorze 4.x.......................................................................... 1069
Obiekt link [C|2|3|I] ......................................................................................................... 1071
Obiekt location [C|2|3|I] ................................................................................................... 1072
Obiekt math [C|2|3|I] ....................................................................................................... 1073
Obiekt mimeType [C|3]................................................................................................... 1074
Obiekt navigator [C|2|3|I] ................................................................................................. 1075
Obiekt number [C|3|I]...................................................................................................... 1076
Obiekt object [C|2|3|I] ..................................................................................................... 1077
Obiekt option [C|3] ......................................................................................................... 1077
Obiekt password [C|2|3|I]................................................................................................. 1078
Obiekt plugin .................................................................................................................. 1078
Obiekt radio [C|2|3|I] ....................................................................................................... 1079
Obiekt regExp................................................................................................................. 1080
Obiekt reset [C|2|3|I] ....................................................................................................... 1081
Obiekt screen (Nowy w jzyku JavaScript 1.2).................................................................. 1082
Obiekt select [C|2|3] ........................................................................................................ 1082
Obiekt string [C|2|3|I] ...................................................................................................... 1083
Obiekt submit [C|2|3|I]..................................................................................................... 1086
Obiekt text [C|2|3|I] ......................................................................................................... 1086
Obiekt textarea [C|2|3|I] ................................................................................................... 1087
Obiekt window [C|2|3|I]................................................................................................... 1088

Funkcje niezalene, operatory, zmienne i literay ..............................................................1094

Funkcje.......................................................................................................................... 1094
Instrukcje....................................................................................................................... 1095
Operatory....................................................................................................................... 1096
Hierarchia operatorw ..................................................................................................... 1099

Dodatek F Znaki ............................................................................................ 1101

Dodatek G Nazwy kolorw i ich odpowiedniki w systemie szesnastkowym..... 1107
Dodatek H Typy MIME i rozszerzenia plikw ................................................ 1111
Skorowidz....................................................................................................... 1115




 
W trzech ostatnich rozdziaach moge zauway odwoania do znacznikw HTML,
ktre czsto okrelaam jako przestarzae w HTML-u 4.0 i zastpowane arkuszami stylw.
Nadszed czas, aby rozwia t tajemnic i pokaza, jakie s tendencje rozwoju HTML-a.
W tym rozdziale poznasz sposb na formatowanie i projektowanie stron opracowany
przez World Wide Web Consortium. W rozdziale 3. Wprowadzenie do HTML
dowiedziae si, e HTML jest jzykiem znacznikowym, ktrego zadaniem jest opis
struktury strony, a nie jej wygldu. HTML nigdy nie zosta zaprojektowany w celu
okrelania wygldu strony (wyboru czcionek, kolorw czy te odlegoci pomidzy wyrazami bd literami), zosta on stworzony w celu opisu elementw tworzcych stron
(nagwkw, teksu, obrazw, itp.). Rozszerzenia standardowych znacznikw HTML
(<
>, <>, < 
>, itd.) udostpniy autorom stron WWW moliwoci wykraczajce poza pocztkowe zamierzenia twrcw jzyka HTML.
W celu przywrcenia pocztkowej struktury jzyka HTML i zapewnienia autorom stron
WWW tak poszukiwanej moliwoci kontroli ich ukadu i wygldu World Wide Web
Consortium wprowadzio kaskadowe arkusze stylw (ang: Cascading Style Sheets,
w skrcie: CSS) oraz XHTML (Extensible HyperText Markup Language).
W tym rozdziale poznasz:

rnice pomidzy jzykami HTML i XHTML,

podstawowe informacje o kaskadowych arkuszach stylw,

krtk histori kaskadowych arkuszy stylw,

sposoby tworzenia i implementacji zewntrznych, osadzonych oraz lokalnych

arkuszy stylw,

najczciej wykorzystywane waciwoci stylw oraz ich wartoci,

sposoby kontroli wygldu strony, czcionek i kolorw przy wykorzystaniu

waciwoci kaskadowych arkuszy stylw.

 
 
World Wide Web Consortium (W3C) okrela XHTML jako sposb wyraenia HTML 4.0
w postaci aplikacji XML. Uwaam, e to dobra wiadomo dla wszystkich autorw





 K      
stron WWW. Wraz z rozwojem Internetu coraz wicej firm bdzie wchodzio na rynek,
prezentujc nowe przegldarki dokumentw (na przykad, przegldarki internetowe
oraz inne programy). Jest cakiem prawdopodobne, e w niedalekiej przyszoci dzisiejsze przegldarki zostan zastpione jakimi zupenie nowymi programami. Niewtpliwie chciaby mie pewno, e Twoje strony WWW bdzie mona oglda w tych
nowych programach. Wanie w tym celu zosta opracowany XHTML. Jest to moliwe
dziki wprowadzaniu wymogu, aby dokumenty speniay pewne cile okrelone rygory.


 
Pamitasz zapewne, e wszystkie dokumenty HTML musz zawiera pewne elementy:
 ,   ,  oraz odpowiednie znaczniki zamykajce; elementy te przedstawiam w poniszym przykadzie:



 


  


 

 
  
 
!

 



XHTML dodaje jeszcze jeden wymagany element identyfikator . Znacznik

ten okrela typ tworzonego dokumenty HTML, ktry moe by:    (poredni), cisy  (cisy) lub   (ukad ramek).

Uyj znacznika  definiujcego typ dokumentu jako poredni (transitional),

jeli dokument jest w wikszoci przypadkw formatowany przy uyciu arkuszy

stylw, jednak zawiera take formatujce znaczniki HTML (okrelajce,
na przykad, kolory i czcionki), dziki ktrym dokument moe by ogldany
w starszych przegldarkach.

"#$%&'()*%+, %##-./0
 '+
+1/ / 234.##
+

///


Uyj znacznika  definiujcego typ dokumentu jako cisy (strict), jeli

dokument jest formatowany wycznie za pomoc arkuszy stylw. Dokumenty

tego typu bdzie mona oglda tylko w przegldarkach obsugujcych kaskadowe
arkusze stylw (CSS), takich jak Internet Explorer 4 lub Netscape Navigator 4.

"#$%&'()*%+, %##-./0 '+
+1/ / 234.## 
+

///


Uyj znacznika  definiujcego typ dokumentu jako ukad ramek, jeli

dokument zawiera ukad ramek. Ukady ramek nauczysz si tworzy w rozdziale 12.

"#$%&'()*%+, %##-./0'+
+1/ / 234.##
+

///


Przykady przedstawione w tej ksice s zgodne ze standardem XHTML Transitional.

 !" K #$%&'    

(

 


HTML to jzyk znacznikowy, w ktrym mona sobie pozwoli na popenianie pewnych
bdw bez adnych konsekwencji, na przykad, HTML wie, e rozpoczynajc kolejny
znacznik  (element listy) wewntrz znacznika  (listy numerowanej), chcesz
jednoczenie zamkn poprzedni znacznik , cho nie podae odpowiedniego
znacznika zamykajcego. Z punktu widzenia jzyka HTML poniszy przykad (wykorzystujcy poprawn skadni):




5637+ + 8




 
9///



 

nie rni si niczym od poniszego fragmentu kodu:

$

*7+ + 8

* 
9///
*

$

ani do kodu o nastpujcej postaci:




7+ + 8



* 
9///
*

$

Z punktu widzenia jzyka XHTML wszystkie te przykady s odmienne. W dalszej czci tego podrozdziau dowiesz si dlaczego:

nazwy znacznikw i atrybutw zapisuj maymi literami, z punktu widzenia jzyka
XHTML ,  oraz  to rne znaczniki, ktre naley traktowa

w cakowicie odmienny sposb, aby uatwi przegldarkom analiz i przetwarzanie

kodu dokumentw, wszystkie znaczniki i atrybuty HTML bdziemy zapisywali
maymi literami,

wartoci atrybutw zapisuj wewntrz cudzysoww, upewnij si, e wartoci

wszystkich atrybutw s zapisywane wewntrz znakw cudzysowu, w ten sposb

uatwisz przegldarce okrelenie, e dany tekst jest wartoci, a nie poleceniem,

zakaczaj wszystkie znaczniki posiadajce jak zawarto, jak ju wspominaam

wczeniej, w jzyku HTML mona pomin znacznik zamykajcy, a przegldarka,

pomimo to bdzie w stanie poprawnie wywietli dokument; XHTML wymaga,
aby wszystkie znaczniki byy poprawnie zamykane, ale jak naley zakacza
znaczniki, takie jak  przejcie do nowego wiersza lub   poziom lini,
ktre nie maj adnych znacznikw zamykajcych? Wystarczy umieci na kocu
znacznika zmykajcy znak ukonika ( ), jak pokazaam w poniszym przykadzie:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


 

 





 

 


!


 K      


",, 

!
!,,




",, 

!
!,,
#:2




",, 

!
!,,

 



poprawnie zagniedaj znaczniki i nie dopuszczaj, aby zachodziy na siebie,

w jzyku HTML oba przedstawione poniej fragmenty kodu byy identyczne;

jednak w XHTML-u fragmenty te rni si od siebie; pierwszy przedstawiony
przykad jest poprawny, a drugi nie.

! 2:
/

 2:
!:/




!;
 
!:/



! 2:
/

 2:
!:/
!;
 
!:/



 
Teraz, kiedy ju wiesz, jak naley pisa dokumenty HTML, uywajc poprawnej skadni jzyka XHTML oraz, jak okrela typ dokumentw przy uyciu znacznika ,
zrozumienie idei arkuszy stylw nie powinno przysporzy Ci adnych problemw.
W pierwszej kolejnoci autor tworzy standardow stron WWW, wykorzystujc przy
tym standardowe znaczniki HTML (te same, ktre byy uywane do tej pory). Tak
utworzona, standardowa strona WWW jest cakowicie niezalena, to znaczy, zostaa
zaprojektowana w taki sposb, aby mona j byo poprawnie wywietli w przegldarkach, ktre nie obsuguj arkuszy stylw. Poniej podaam prosty przykad takiej strony:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


<  
!:=


 

 

.<  
!:=
.

 !> 
82>=! 
;
 


! 8!!
:9 

>

!9/


 



Powysza strona WWW nie zawiera adnych atrybutw okrelajcych jej wygld.
Zgodnie z jej treci autor chce, aby nagwek by niebieski, a do wywietlenia tekstu
akapitu uyje innej czcionki. Aby zrealizowa te zamierzenia, tworzy arkusz stylw,
ktry umoliwia sformatowanie zawartoci strony w sposb okrelony przez jej autora.
Reguy stylw mog formatowa wszystkie znaczniki HTML, czc wybrane znaczniki (na przykad, !) z waciwociami (takimi jak: : "). W arkuszach stylw
znaczniki HTML uywane s jako selektory. Reguy stylw mog okrela ukad
znacznika oraz wszelkie inne waciwoci zwizane z typografi oraz jego wygldem.
Poniej podaam kilka przykadw regu stylw.
.?  1:@
?A ,A
16
8B
8,
AC  1!@

 !" K #$%&'    



Reguy stylw, uywane w kaskadowych arkuszach stylw, skadaj si z dwch

czci: selektora, ktrym moe by znacznik HTML, na przykad,  lub .
oraz z deklaracji definiujcej waciwoci i wartoci selektora, na przykad,
  1: (gdzie    jest waciwoci, :, wartoci).

Regua zapisana w pierwszym wierszu powyszego przykadu okrela, e nagwek !

na stronie bdzie wywietlany w kolorze niebieskim. Natomiast druga regua okrela, e
tekst wszystkich akapitw (znacznikw ) na stronie zostanie wywietlony na czarno,
czcionkami Arial, Helvetica lub dowoln inn czcionk bezszeryfow.
Teraz, gdy autor stworzy ju zawarto strony (standardow stron WWW) oraz okreli reguy rzdzce jej wygldem, czas na kolejny etap, ktrym bdzie doczenie regu
stylw do standardowego dokumentu HTML. Mona to zrobi na trzy sposoby: wykorzystujc zewntrzny arkusz stylw, osadzajc arkusz stylw (jak pokazaam w kolejnym przykadzie) lub wpisujc styl wewntrz znacznika. W dalszej czci rozdziau pt.:
Sposoby tworzenia arkuszy stylw, dowiesz si wicej na temat sposobw tworzenia
arkuszy stylw.
Poniszy przykad pokazuje, jak nasza prosta strona WWW moe zosta sformatowana
za pomoc osadzonego arkusza stylw:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


<  
!:=



7+4+

",,
.?  1:@
?A ,A
16
8B
8,
AC  1!@
,,



 

 

.<  
!:=
.

 !> 
82>=! 
;
 


! 8!!
:9 

>

!9/


 



W powyszym przykadzie, demonstrujcym wykorzystanie osadzonego arkusza stylw, autor strony oddzieli style od standardowego dokumentu HTML. Kod okrelajcy
wygld strony zosta umieszczony pomidzy otwierajcym znacznikiem  oraz
odpowiednim znacznikiem zamykajcym  . Przegldarki, ktre nie s w stanie
obsugiwa arkuszy stylw, wci bd w stanie wywietli dokument, tak jakby by on
standardowym dokumentem HTML, natomiast nowsze przegldarki, obsugujce arkusze stylw, wywietl go zgodnie z podanymi reguami.





 K      

 !" 

Pierwsza implementacja kaskadowych arkuszy stylw, znana jako CSS1, umoliwia
okrelanie wielu aspektw wygldu strony i znacznikw, takich jak czcionki uywane
do prezentacji rnych elementw HTML, kolory czcionek, kolory oraz obrazy ta,
marginesy, odstpy pomidzy literami i wyrazami i wiele, wiele innych. Przegldarki
obsugujce arkusze stylw tego typu Netscape Navigator 4 oraz Internet Explorer 4
oraz wersje pniejsze obu tych przegldarek okrelaj ostateczn posta dokumentu
na podstawie definicji stylw.
Kolejna generacja arkuszy stylw CSS2 staa si oficjalnym zaleceniem w maju 1998
roku. Wiele znacznikw CSS2 jest obsugiwanych przez najnowsze wersje przegldarek
Internet Explorer oraz Netscape Navigator. W bardzo niedalekiej przyszoci arkusze
stylw umoliwi wykonywanie jeszcze bardziej niesamowitych zada. Dziki wykorzystaniu CSS2, XHTML oraz odpowiednich przegldarek bdzie mona tworzy strony WWW wykorzystujce rne typy mediw. Na przykad, bdzie mona zaprojektowa gosowy arkusz stylw, dwikowo odtwarzajcy elementy strony WWW, wykorzystujc przy tym waciwoci przestrzenne oraz stereo. Bdzie take mona podzieli
stron WWW na wiele stron, podobnie jak to si robi w edytorach tekstw oraz programach poligraficznych, kontrolowa miejsca podziau stron, okna, itp. Moliwoci s
naprawd fascynujce!
To zapowiada jeszcze jedn ogromn zalet technologii arkuszy stylw. Ot bd one
umoliwiay przegldanie dokumentw HTML w niestandardowy sposb, na przykad,
przy wykorzystaniu odtwarzaczy audio, z czego bd mogy korzysta osoby majce
problemy ze wzrokiem lub na jeszcze inne sposoby, gdzie wykorzystanie standardowej
technologii przegldarek nie bdzie moliwe. Standardowy dokument HTML wci
moe by wywietlany w normalny sposb, przy czym nie trzeba w nim stosowa adnych dodatkowych, rozszerzajcych znacznikw HTML, przeznaczonych do udostpnienia niestandardowych moliwoci i bardzo czsto wprowadzajcych niepotrzebne
zamieszanie w kodzie strony.
Rne przegldarki odmiennie obsuguj jzyk HTML, dotyczy to take kaskadowych
arkuszy stylw. Firma Netscape stworzya wasn, alternatywn wersj arkuszy stylw.
Netscape Navigator dysponuje take ramkami, alternatywnym rozwizaniem sucym
do umiejscawiania elementw stron WWW, przy czym obsuguje take pojawiajce si
standardowe rozwizania. Przegldarka ta obsuguje take arkusze stylw JavaScript,
a jednoczenie mona w niej stosowa take kaskadowe arkusze stylw.
Ta sytuacja moe si wydawa (i jest) nieco trudna, zwaszcza wziwszy pod uwag, i
jest to nowa technologia. Jak to jednak bywa ze wszystkimi nowymi technologiami,
sytuacja si w kocu wyjani i pojawi standard VHS dla arkuszy stylw, natomiast
standard Betamax odejdzie w zapomnienie. Jak na razie naley jednak pamita, e
przegldarki obsugujce technologi CSS robi to w odmienny sposb.
W pozostaej czci tego rozdziau poznasz podstawowe moliwoci arkuszy stylw.
Pamitaj, e waciwoci przedstawione w tym rozdziale to tylko niewielka, wybrana

 !" K #$%&'    

)

czstka wszystkich moliwoci dostpnych w CSS1 oraz CSS2. Szczegowe i precyzyjne omwienie tych zagadnie znacznie wykracza poza ramy niniejszej ksiki i bez
wtpienia mogoby podwoi jej objto. Niemniej jednak, przedstawione pojcia i informacje pomog Ci zrozumie i oceni ogromne moliwoci arkuszy stylw, ich waciwoci i wartoci. Dodatkowe rda informacji dotyczce omawianych tu zagadnie,
mona znale na kocu tego rozdziau.

#$%
Zamiast przytacza Ci sam teori, przedstawi teraz kilka waciwoci CSS i poka
Ci, jak je wykorzysta na stronach WWW. W rozdziale 6. poznae rne polecenia suce do formatowania tekstu i okrelania czcionek, ktre przedstawiam w opisie strony
Ksigarni Bookworm. Teraz, na przykadzie nowej wersji tej strony, dowiesz si, w jaki
sposb mona zastpi te polecenia kaskadowymi arkuszami stylw.
Poniej przedstawiam now wersj tej strony (bez adnych wymylnych dodatkw
umieszczonych na niej pod koniec rozdziau 6). Otwrz t stron lub stwrz j od pocztku, gdy w wiczeniach przedstawionych w dalszej czci rozdziau bdziemy konwertowali j w taki sposb, aby korzystaa z kaskadowych arkuszy stylw. Stron zapisz w pliku o nazwie bookwrm.html. Pocztkowa jej cz zostaa przedstawiona na rysunku 10.1,
mona na nim zobaczy wszystkie typy elementw wystpujcych na caoci strony.

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 



 

 

7+ +
.) ! 1D
92
!
E!
.


 !F: 
+!
E!
G9!8
 


 
"+

,%(8

5
!




 !F: 

D
92
) ! 

. HI6 #

5
2A
 8%6JH KI

LH.IMIII,00 H



7+ +
K< ;N
K


:



A7+O :+$!
92







A7+O+ :>






A7+O: 
2+< 
  





:



7+ :+
K$!
92
) ! 
K


$ .J  !:!
92
) !  A::> !

:  98
2
!=/D
92
) !  A:1



*


 K      

:


8! 
: >:29




D9
 !
 !
=




P
982 
 E ! 
 N!
E!9 !:




%! !
1' 98D98#:9 )



:

< 


 2 .0 K.
 28! 

 2  >: 
 .Q
 2/



A7+O +# 
:;

R
A7+O +
 !





7+O+
K :>
K


:


5 )8
A7+ /+


) 







P 
8
A7+K0
/+


K0,
:  
>!
  







4):28
A7+2
/+


2
S :







6
 %
8
A7+F: /+


#:)F:






:


A7+O +# 
:;

R
A7+O +
 !



7+: 
2+
K< 
  

K


:



T 2 D
E!
8
 !

 !:!
/<  U
 
A 8!
9>N 2:  9 
 


2 
:/





S 
 #

!=
8  !
!E   9 . 8 N8
 ;2N:
9 
N / =
E! 


!/





!.V;
!
92
9 
 

% W
8 N
A22 
:


!
 

/





D
92
9 


.X 

!  :  !

 

 8!=:
> 
2
 ! 
E/:
  8
>28!= 
///



:


A7+O +# 
:;

R
A7+O +
 !



 
$
!:
1....JJ

1:Y ! / 

ZO.VJC 
2.JJJD
92
) ! 


 

 



Na rysunku 10.1 przedstawiona zostaa strona WWW, jak, bez adnych problemw,
mona wywietli w przegldarce, ktra nie obsuguje kaskadowych arkuszy stylw.
Widzimy, e strona nie jest szczeglnie wymylna. Zapewne moemy uatrakcyjni j
nieco przy uyciu kolorw, rnych czcionek, marginesw, itp. Do tych celw, doskonale nadaj si arkusze stylw.

 !" K #$%&'    


 
Ksigarnia Bookworm
jako niezalena
strona WWW

+


,


 K      

&'(  

Zatem, w jaki sposb mona wykorzysta technologi CSS na takiej standardowej stronie WWW? Istniej trzy podstawowe sposoby zastosowania CSS do formatowania znacznikw HTML. Najwspanialsz cech arkuszy stylw jest ich ogromna elastyczno.
Wykorzystanie znacznikw HTML oraz atrybutw w celu okrelenia postaci dokumentw HTML sprawia, e autorzy stron oraz twrcy przegldarek nie musz stosowa arkuszy stylw jednego typu.
World Wide Web Consortium zdefiniowao zbir znacznikw oraz atrybutw, ktre
mona wykorzysta do stworzenia definicji stylw (powiem o nich w dalszej czci rozdziau). Z kolei definicji tych mona uy do okrelenia postaci dowolnego dokumentu
lub znacznika HTML. Istniejce znaczniki daj moliwo tworzenia trzech rodzajw
arkuszy stylw: zewntrznych arkuszy stylw, osadzonych arkuszy stylw oraz stylw
lokalnych. Pierwsze dwa typy zostan przedstawione w dwch kolejnych podrozdziaach. W dalszej czci rozdziau przyjrzymy si bliej stylom lokalnym.

 
 !"  "#$
Stosujc zewntrzne arkusze stylw, reguy stylw przechowane s w osobnych plikach, poza dokumentami HTML. Zaleta arkuszy stylw tego typu polega na tym, i reguy stylw mona wykorzystywa w wielu dokumentach HTML wchodzcych w skad
witryny. Dziki temu mona tworzy strony WWW o spjnym, jednolitym wygldzie.
Dodatkow zalet zewntrznych arkuszy stylw jest umoliwienie szybkiej modyfikacji
wygldu witryny. Dziki umieszczeniu regu stylw w jednym dokumencie i poczeniu
go z wieloma stronami WWW, zmiana sposobu ich prezentacji polega na zmianie tylko
jednego pliku.
Podobnie jak dokument HTML, take i dokument zawierajcy arkusz stylw, to zwyczajne pliki tekstowe zapisane w kodzie ASCII i posiadajce specjalne rozszerzenia.
Strony WWW s zapisywane z rozszerzeniami .html lub .htm, natomiast arkusze stylw,
z rozszerzeniem .css. Dokument ten definiuje wsplne reguy stylw stosowane we
wszystkich stronach WWW. Zewntrzny arkusz stylw docza si do dokumentw
HTML za pomoc znacznika #.
Wszelkie szczegy zwizane z tworzeniem dokumentw zawierajcych arkusze stylw
przedstawi w kolejnym wiczeniu. Jak na razie zamy, e stworzye arkusz stylw
i zapisae go w pliku o nazwie mystyle.css, w tym samym folderze, w ktrym znajduje
si strona Ksigarni Bookworm. Przedstawiony poniej fragment kodu pokazuje, w jaki
sposb naley doczy ten arkusz stylw do nagwka strony Ksigarni Bookworm:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 




!7++A7+/+

 

 

 !" K #$%&'    



Znacznik # kojarzy zewntrzny arkusz stylw (mystyle.css) z aktualnym dokumentem HTML. Dziki wstawieniu tego samego fragmentu kodu na kadej stronie witryny, jej administrator moe nada jednolity styl dokumentom tworzonym przez
wszystkich pracownikw firmy.
Istotn rol peni atrybut  znacznika # (omawiany w rozdziale 5. Wszystko
o poczeniach). Aby efektywnie uywa znacznika #, bdziesz musia pozna
i zrozumie rnice pomidzy stylami trwaymi, domylnymi oraz zamiennymi. Oto
podstawowe informacje na ich temat:

style trwae s stosowane zawsze, niezalenie od lokalnych ustawie uytkownika,

style domylne s stosowane po pobraniu strony, jednak mona je zastpi stylami

zamiennymi, wybieranymi przez uytkownika,

style zamienne s tworzone, aby da uytkownikom moliwo wyboru

(w odrnieniu od stylw domylnych).

Atrybut  kontroluje fragment tego procesu. Podanie atrybutu $% %, jak
w podanym przykadzie, wymusza zastosowanie stylw trwaych i wykorzystuje style
podane w arkuszu, niezalenie od lokalnych ustawie uytkownika.
Dodajc atrybut  do znacznika #, mona okreli styl domylny. Oto przykad:


!7++
7+
+A7+/+

Zmieniajc atrybut $% % na $%  & %, definiujemy styl
alternatywny o innym tytule.
W taki sposb mona stworzy stay styl zawierajcy definicje, ktre musz by uyte
niezalenie od ustawie uytkownika, jak rwnie wybra styl domylny oraz jeden lub
kilka stylw zamiennych, stanowicych alternatyw dla stylu trwaego.


  

Jeli jeszcze tego nie zrobie, to otwrz stron Ksigarni Bookworm i zapisz j w pliku
o nazwie bookwrm.html. Oryginalny kod tej strony zosta przedstawiony w poprzednim
podrozdziale, pt.: Ksigarnia Bookworm. Aby doczy do tej strony zewntrzny arkusz stylw (ktry za chwil utworzymy), umie w nagwku dokumentu nastpujcy
fragment kodu HTML, bezporednio po tytule strony:


!7++A7+/+

Cay nagwek strony ma teraz nastpujc posta:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 




!7++A7+/+

 





 K      
Zapisz stron zawierajc zmieniony nagwek. A zatem poczye ju arkusz stylw
ze stron WWW, teraz naley stworzy ten arkusz. Jeli nie umiecisz w arkuszu stylw
kilku stylw, nie bdziesz w stanie okreli, czy po podczeniu arkusz stylw dziaa
poprawnie. Dlatego, w dalszej czci wiczenia, stworzysz nowy dokument zawierajcy
kilka prostych stylw.
Jak na razie moe Ci si wydawa, e przedstawiony poniej przykad nie ma wikszego sensu; jednak w dalsze czci rozdziau zrozumiesz jego przeznaczenie. Poniej pokrtce opisaam dziaanie poniszego fragmentu kodu:

tworzy arkusz stylw nadajcy tu strony kolor jasnoniebieski,

zapewnia, e tekst umieszczony wewntrz strony zostanie wywietlony czcionk

Arial, Helvetica lub inn czcionk bezszeryfow, zalenie od czcionek dostpnych

w systemie uytkownika ogldajcego stron,

zapewnia, e tekst strony zostanie wywietlony kolorem ciemnoniebieskim.

Dodatkowo arkusz stylw zmienia kolory pocze w nastpujcy sposb:

nieodwiedzone poczenia bd fioletowe,

odwiedzone poczenia bd ciemnobrzowe,

aktywne poczenie bdzie czerwone,

gdy umiecisz wskanik myszy na poczeniu, zostanie ono wywietlone

w kolorze zotym.
Utwrz nowy dokument tekstowy i wpisz w nim fragment kodu podany poniej. Wpisujc poniszy kod, powiniene zwrci uwag na jedn rzecz, ot arkusze stylw s
zapisywane wewntrz nawiasw klamrowych ('(), a nie zwyczajnych nawiasw pokrgych. Poza tym, pomidzy reguami stylw oraz otwierajcym i zamykajcym nawiasem klamrowych, s zazwyczaj umieszczane pojedyncze znaki odstpu, na przykad: )!& '& *& "& (. Po wpisaniu podanego poniej kodu, zapisz plik w tym
samym folderze, w ktrym umiecie stron Ksigarni Bookworm i nadaj mu nazw
mystyle.css. Zwr uwag, i jest to ta sama nazwa, ktr podae w nagwku strony
Ksigarni Bookworm. Oto kod, ktry powiniene wpisa w pliku mystyle.css:
 ?!2 : ,  1OAAAACA ,A
16
8B
8,
AC
  1 00VV@
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@

Pierwsza regua stylu podana w powyszym przykadzie definiuje kolor ta strony

(w naszym przypadku jest on jasnoniebieski +



). Tekst umieszczony na stronie
zostanie wywietlony czcionk Arial, Helvetica lub inn czcionk bezszeryfow, jak
bdzie mona znale na dysku osoby ogldajcej stron. Tekst strony bdzie ciemnoniebieski (+,,--..).
 ?!2 : ,  1OAAAACA ,A
16
8B
8,
AC
  1 00VV@

 !" K #$%&'    

(

Kolejne cztery linie kodu definiuj cztery pseudoklasy okrelajce kolor pocze.
Poczenia, ktre nie zostay jeszcze odwiedzone s formatowane przy uyciu pseudoklasy *# (odpowiada jej atrybut HTML #). Posta pocze odwiedzonych jest
okrelana przy uyciu pseudoklasy */ (odpowiada jej atrybut /#). Poczenie
aktywne jest definiowane za pomoc pseudoklasy * / (odpowiada jej atrybut
HTML #). Ostatnia pseudoklasa * / definiuje posta poczenia, na ktrym zosta umieszczony wskanik myszy (w HTML-u nie istnieje atrybut odpowiadajcy tej
pseudoklasie):
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@

Ju za chwil zobaczysz, e przy uyciu zewntrznego arkusza stylw zawierajcego

pi linijek kodu, mona stworzy stron WWW o cakowicie odmiennym wygldzie.
Otwrz stron bookwrm.html w przegldarce WWW obsugujcej kaskadowe arkusze
stylw, na przykad, w programie Internet Explorer 4 lub w Netscape Navigator 4. Strona, ktr zobaczysz powinna przypomina t, przedstawion (czciowo) na rysunku 10.2.



Strona Ksigarni
Bookworm
po doczeniu
zewntrznego
arkusza stylw


(!


 K      

"
 
 !"  "#$
Osadzone arkusze stylw to standardowe dokumenty HTML, wewntrz ktrych zostay
umieszczone reguy stylw. Zamy, e chcesz, aby Twoja strona domowa miaa czarne to, umieszczony na niej tekst by wywietlony czcionk o duej wielkoci w jasnym
kolorze, a poczenia na stronie miay ywe kolory. Pozostae strony witryny s bardziej
stonowane (aby nie mczyy tak bardzo oczu ogldajcych je osb) i maj janiejszy
kolor ta. Tworzenie nowego zewntrznego arkusza stylw tylko na potrzeby strony
domowej nie ma wikszego sensu. (No bo po co tworzy dwie strony, kiedy mona
stworzy tylko jedn?) A zatem, w takim przypadku moesz uy osadzonego arkusza
stylw, aby okreli posta strony domowej oraz zewntrznego arkusza stylw definiujcego wygld pozostaych stron witryny.
By moe pomylisz sobie: Zaraz, zaraz. Ale czy idea arkuszy stylw nie polega wanie na tym, aby oddzieli style od zawartoci strony?. W rzeczywistoci style bd
oddzielone od zawartoci strony. Definiuje si je bowiem w nagwku, umieszczanym
przed pocztkiem treci dokumentu HTML. A zatem style pozostaj odseparowane od
zawartoci strony. W poniszym przykadzie pokazaam, jak mgby wyglda nagwek strony Ksigarni Bookworm zawierajcy osadzony arkusz stylw. W tym przypadku zdefiniowaam w nim kolor ta strony oraz kolory tekstu i pocze.
Aby umieci na stronie WWW osadzony arkusz stylw, naley rozpocz j od standardowego nagwka:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 



Teraz naley otworzy obszar, w ktrym zostan umieszczone reguy stylw. S one
zapisywane wewntrz znacznikw . Atrybut  znacznika  okrela, e
strona wykorzystuje osadzone arkusze stylw i ma nastpujc posta:

7+4+

Po otwierajcym znaczniku  mona poda reguy stylw. Przykad podany poniej jest bardzo podobny do przykadu zewntrznego arkusza stylw, przedstawionego
we wczeniejszej czci rozdziau.
Zwr uwag, i w przypadku osadzonych arkuszy stylw reguy stylw s zapisywane
pomidzy znacznikami komentarzy HTML (011 oraz 11). Jeli nie zapiszesz regu
stylw wewntrz komentarzy, to starsze typy przegldarek, ktre nie obsuguj kaskadowych arkuszy stylw, mog je wywietli jako cz strony WWW.

",,
 ?  1O000000C!2 : ,  1OAAAAAA@
1
B?  1OVVVVJJ@
1 B?  1O VVAA@
1
!?  1O00VVAA@
1B

 ?  1OJJVV@
,,

 !" K #$%&'    

(

Teraz mona zakoczy nagwek strony zamykajcymi znacznikami  oraz   :



 


 
Ponownie otwrz stron Ksigarni Bookworm, zapisan w pliku bookwrm.html. Zanim
zaczniesz modyfikacj, stwrz jej kopi, zapisujc stron pod inn nazw, na przykad
bookwrm-kopia.html. W tym wiczeniu zamienisz dokument bookwrm.html w stron WWW
wykorzystujc osadzony arkusz stylw.
Chcesz oznaczy dokument jako stron uywajc osadzonych arkuszy stylw. W tym
celu konieczne bdzie wprowadzenie niewielkich modyfikacji w nagwku strony. Pamitasz zapewne, e kod osadzonych arkuszy stylw jest umieszczany wewntrz znacznikw , a same definicje stylw zapisywane w nawiasach klamrowych. W pierwszej kolejnoci usu ze strony znacznik # odwoujcy si do zewntrznego arkusza
stylw.


!7++A7+/+

Nastpnie, w nagwku strony umie kod, ktry okreli j, jako stron uywajc osadzonego arkusza stylw. Nowy nagwek strony powinien mie nastpujc posta:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 



7+4+

",,
,,



 

Aby zaprezentowa style, ktre zdefiniujesz w osadzonym arkuszu stylw, w niewielkim stopniu zmodyfikujemy style przedstawione w poprzednim wiczeniu. Zmienimy
kolor ta strony z jasnoniebieskiego na jasnozielone (o wartoci +

). Waciwoci
tekstu oraz pocze pozostan takie same. Tym razem jednak, reguy stylw zostan
zapisane wewntrz strony Ksigarni Bookworm, pomidzy znacznikami komentarza:
011 oraz 11.
Poniszy fragment kodu wpisz pomidzy znacznikami komentarza HTML, umieszczonymi w nagwku strony:
 ?!2 : ,  1OAACA ,A
16
8B
8,
AC
  1 00VV@
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@


(


 K      
A zatem, cay nagwek strony powinien mie teraz nastpujc posta:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 



7+4+

",,
 ?!2 : ,  1OAACA ,A
16
8B
8,
AC
  1 00VV@
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@
,,



 

Ponownie zapisz stron bookwrm.html, a nastpnie otwrz j w przegldarce obsugujcej kaskadowe arkusze stylw. Teraz strona ma jasnozielone to. Poza tym, nowa wersja
strony wyglda bardzo podobnie do strony wykorzystujcej zewntrzny arkusz stylw,
przedstawionej na rysunku 10.2.
Dla celw porwnawczych mona otworzy t sam stron w przegldarce, ktra nie jest
w stanie obsugiwa kaskadowych arkuszy stylw, na przykad, w programie NCSA Mosaic 3.0. Na rysunku 10.3 wida pocztkowy fragment strony z oryginalnego wydania niniejszej ksiki, wywietlonej w przegldarce NSCA Mosaic 3.0. Jak wida, wszystkie informacje umieszczone na stronie wci s na niej widoczne; wynika to z faktu, i kod
HTML definiujcy zawarto strony nie jest zaleny od kodu formatujcego stron. Niemniej jednak, czcionki oraz kolory zdefiniowane w osadzonym arkuszu stylw nie zostay
w tej przegldarce wywietlone.


 
Oryginalna strona
Ksigarni Bookworm
wy!wietlona
w przegldarce,
ktra nie obsuguje
kaskadowych
arkuszy stylw

 !" K #$%&'    

()

#) 
Ale dlaczego ten rodzaj arkuszy stylw zosta okrelony jako kaskadowe? Bez wtpienia nie chodzi tu o adne wodospady.
Kaskad stylw okrela si moliwo czenia informacji o stylach pochodzcych
z kilku rde. Ju wiesz, e arkusze stylw mona okrela w rny sposb. Zewntrzne arkusze stylw mona docza do wielu stron, a umieszczone w nich reguy stylw
posu do okrelenia postaci kadej z nich. Osadzone arkusze stylw s uywane do
okrelenia postaci tylko jednej strony. Style lokalne pozwalaj na zdefiniowanie regu
stylw, odnoszcych si do elementw strony. Jeli chcesz, to na jednej stronie mona
wykorzysta wszystkie trzy typy arkuszy stylw.
O kaskadzie stylw mwimy dlatego, e istnieje cile okrelony porzdek, w jakim s
wykorzystywane reguy zdefiniowane w poszczeglnych arkuszach stylw; ot reguy
zdefiniowane w arkuszu pniejszym maj wyszy priorytet, ni reguy zdefiniowane
w arkuszach wczeniejszych. Poniej, w najprostszy moliwy sposb, opisaam, co si
dzieje, gdy na jednej stronie WWW zostan zastosowane wszystkie trzy typy arkuszy
stylw: zewntrzne, osadzone oraz lokalne.

W pierwszej kolejnoci wygld strony jest modyfikowany zgodnie z reguami

podanymi w zewntrznych arkuszach stylw.

W drugiej kolejnoci zostaj zastosowane definicje stylw zapisane w osadzonych

arkuszach stylw, ktre, w razie koniecznoci, zastpuj definicje stylw opisane

w zewntrznych arkuszach stylw.

Na kocu s stosowane style lokalne, ktre w razie koniecznoci zastpuj definicje

stylw podane w dwch poprzednich rodzajach arkuszy stylw.

*$+ )++ 

" +
W tej czci rozdziau poznasz najwaniejsze waciwoci stylw i dowiesz si, jak mona
ich uywa. Jest ich jednak zbyt duo, jak na jeden rozdzia. Jeli bdziesz potrzebowa
dodatkowych informacji, to pen specyfikacj kaskadowych arkuszy stylw poziomu 1
(CSS1) mona znale na WWW, pod adresem http://www.w3.org/ TR/REC-CSS1.
Na WWW, pod adresem http://www.w3.org/TR/REC-CSS2/, mona take znale zalecenie CSS2. Najnowsza wersja tego dokumentu pochodzi z 12 maja 1998 roku. Oba te
dokumenty, cho maj raczej techniczny charakter, dokadnie opisuj znaczenie kadej
z waciwoci, zawieraj informacje o tym, jakie zastosowania waciwoci s poprawne, a ktre nie, jak rwnie podaj kilka przykadw, ktre uatwi Ci tworzenie stron
zgodnych ze starszymi oraz nowszymi przegldarkami.
W kilku przedstawionych do tej pory przykadach zobaczye jedynie niewielk prbk
moliwoci, jakie daj style. CSS1 oraz CSS2 udostpniaj bardzo wiele znacznikw,


(*


 K      
ktre umoliwiaj kontrol niemal wszystkich aspektw wygldu strony WWW. CSS
jest jednak technologi, ktra wci si rozwija. Z tego wzgldu niektre waciwoci
CSS s obsugiwane w przegldarkach lepiej i bardziej niezawodnie od innych. Tak to
ju jest z WWW.
Cho przedstawiam tu niektre waciwoci CSS, musisz mie wiadomo, i przegldarki, obsugujce kaskadowe arkusze stylw, mog wywietla te same przykady
w niespodziewany i zaskakujcy sposb. Nie pozostaje Ci zatem nic innego, jak tylko
prbowa, prbowa i jeszcze raz prbowa, a w kocu otrzymasz zadowalajce rezultaty.

%#
! 
! " &  !'(! 
)()( 
W wiczeniach 10.1 oraz 10.2 dodae do strony kilka prostych regu okrelajcych
czcionki i kolory jej wybranych elementw. W tym celu wykorzystae waciwoci
 #
"1,
1
 oraz , ktrych uye do sformatowania zawartoci strony (znacznika ). Kolory pocze zostay okrelone dziki wykorzystaniu
czterech pseudoklas znacznika  : *# (uytej do okrelenia koloru pocze),
*/ (uytej do okrelenia koloru odwiedzonych pocze), * / (uytej do
okrelenia koloru poczenia, na ktrym zosta umieszczony wskanik myszy) oraz
a:active (uytej do okrelenia koloru aktywnego poczenia).
Jednak istniej znacznie wicej moliwoci modyfikowania wygldu tekstu wywietlanego na stronie. Arkusze stylw, podobnie jak edytory tekstw oraz programy poligraficzne, pozwalaj na okrelanie wielkoci marginesw oraz wypenienia. Kilka najczciej uywanych waciwoci zebraam w tabeli 10.1.
Marginesy oraz wypenienia s definiowane jako dugo wyraona wartoci liczbow wraz z towarzyszc jej jednostk dugoci, jako warto procentowa lub jako
warto ".
Jednostki dugo!ci s wyraane w wartociach wzgldnych lub bezwzgldnych.
Do wzgldnych jednostek dugoci zaliczane s  (wielko okrelonej czcionki),
4 (wysoko okrelonej czcionki) oraz 4 (piksele, zalene od urzdzenia, na ktrym
strona bdzie wywietlana). Jednostki bezwzgldne to:  (punkty),  (centymetry),
 (milimetry) oraz  (pica).

Wartoci procentowe s zawsze okrelane wzgldem innej, wybranej wartoci, takiej

jak dugo. Wartoci procentowe mog si rozpoczyna od opcjonalnego znaku 2 lub
bezporednio po nim naley poda liczb i znak procentu (3).
By moe zwrcie uwag na okrelenie waciwo skrtowa uyte w tabeli 10.1.
Ot wygld niektrych waciwoci opisywany jest przy uyciu kilku atrybutw. Waciwo skrtowa umoliwia poczenie i jednoczesne podanie kilku wartoci, na przykad, uywajc jednej waciwoci skrtowej margin, mona okreli posta wszystkich
czterech marginesw: grnego, prawego, dolnego oraz lewego. To samo dotyczy waciwoci padding, przy uyciu ktrej mona okrela wszystkie cztery wypeniania
(grne, prawe, itd.).

 !" K #$%&'    

(+


 
Przydatne wa!ciwo!ci okre!lajce posta strony
Waciwo

Opis

2
, 

Konfiguruje obszar pomidzy elementem a jego ssiadami (grny margines

elementu). Mona go definiowa w jednostkach absolutnych, w procentach
wzgldem szerokoci tekstu lub automatycznie (warto : ).

2
,
2

Konfiguruje obszar pomidzy elementem a jego ssiadami (prawy margines

elementu). Mona go definiowa w jednostkach absolutnych, w procentach
wzgldem szerokoci tekstu lub automatycznie (warto : ).

2
,  

Konfiguruje obszar pomidzy elementem a jego ssiadami (dolny margines

elementu). Mona go definiowa w jednostkach absolutnych, w procentach
wzgldem szerokoci tekstu lub automatycznie (warto : ).

2
,A

Konfiguruje obszar pomidzy elementem a jego ssiadami (lewy margines

elementu). Mona go definiowa w jednostkach absolutnych, w procentach
wzgldem szerokoci tekstu lub automatycznie (warto auto).

2


Waciwo skrtowa dajca moliwo atwiejszego okrelenia waciwoci

2
, , 2
,
2, 2
,   oraz 2
,A. Akceptowane wartoci
tej waciwoci to dugoci wyraone liczbowo, wartoci procentowe lub warto : .


2, 

Okrela odlego pomidzy grn granic obszaru a elementami zawartymi w tym

obszarze. Odlego moe by podawana w dowolnych stosowanych jednostkach
miary, w procentach lub automatycznie (warto : ).


2,
2

Okrela odlego pomidzy granic obszaru z prawej strony a elementami

zawartymi w tym obszarze. Odlego moe by podawana w dowolnych
stosowanych jednostkach miary, w procentach lub automatycznie (warto : ).


2,  

Okrela odlego pomidzy doln granic obszaru a elementami zawartymi w tym

obszarze. Odlego moe by podawana w dowolnych stosowanych jednostkach
miary, w procentach lub automatycznie (warto : ).


2,A

Okrela odlego pomidzy granic obszaru z lewej strony a elementami zawartymi

w tym obszarze. Odlego moe by podawana w dowolnych stosowanych
jednostkach miary, w procentach lub automatycznie (warto : ).


2

Okrela odlegoci pomidzy granic obszaru a elementami zawartymi w tym

obszarze. Odlego moe by podawana w dowolnych stosowanych jednostkach
miary, w procentach lub automatycznie (warto : ).

We waciwociach margin oraz padding mona poda od jednej a do czterech wartoci, ktre bd interpretowane w nastpujcy sposb:

jedna warto bdzie dotyczya wszystkich czterech marginesw lub wypenie,

dwie wartoci pierwsza z nich bdzie dotyczya grnego i dolnego wypenienia

lub marginesu, natomiast druga prawego i lewego,

trzy wartoci pierwsza warto dotyczy grnego marginesu lub wypenienia,

druga prawego i lewego, natomiast trzecia warto dotyczy dolnego

marginesu lub wypenienia.


(,


 K      


 !"#
W tym przykadzie okrelisz marginesy oraz wypenienie na stronie Ksigarni Bookworm. Do arkusza stylw dodasz nastpujce definicje:

u gry oraz u dou strony zdefiniujesz margines o wysokoci 50 pikseli, natomiast

prawy oraz lewy margines bdzie mia szeroko 70 pikseli,

kady z nagwkw bdzie mia wypenienie grne oraz dolne o wysokoci 15 pikseli.

W celu okrelenia marginesw oraz wypenienia bdziesz musia doda odpowiedni

kod do zewntrznego arkusza stylw (mystyle.css) lub umieci go bezporednio na
stronie bookwrm.html zawierajcej osadzony arkusz stylw. Jeli wczeniej nie stworzye kopii strony zawierajcej odwoanie do zewntrznego arkusza stylw, to jedynym
wyjcie z sytuacji bdzie wykorzystanie strony zawierajcej osadzony arkusz stylw.
Z tego wzgldu w dalszych przykadach zastosuj to rozwizanie.
Aby okreli marginesy i wypenienia, moesz posuy si skrtow waciwoci
 
 z dwiema wartociami okrelajcymi grny i dolny oraz lewy i prawy margines
znacznika  oraz waciwociami  
1 oraz  
1 przypisanymi
do znacznikw  ! oraz  4 i okrelajcymi odpowiednio grne i dolne wypenienie.
(W poniszym przykadzie zmieniam sposb zapisu definicji stylu dla znacznika ,

aby uatwi analiz poszczeglnych regu stylw.)

",,
 ?!2 : ,  1OAAC
A ,A
16
8B
8,
AC
  1 00VVC
2
1I04Q04@
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@
.?
2, 1.I4C

2,  1.I4@
K?
2, 1.I4C

2,  1.I4@
,,

Kiedy ju zapiszesz now wersj arkusza stylw, otwrz przegldark obsugujc kaskadowe arkusze stylw i sprawd rezultaty wprowadzonych modyfikacji. Na rysunku 10.4
przedstawiam now wersj strony, na ktrej wyranie wida marginesy oraz wypenienia.

* #  +

Zgodnie z tym, czego si dowiedziae w rozdziale 7. Wykorzystywanie obrazw,
koloru i ta, dostpne s narzdzia zapewniajce podstawow kontrol nad wygldem
ta dokumentw HTML. Mona uy atrybutu 
, aby okreli kolor ta dokumentu lub atrybutu  #
", aby okreli obraz ta. Dziki tabelom niektre przegldarki rozszerzaj dostpne moliwoci i pozwalaj autorom stron WWW na okrelanie
ta poszczeglnych komrek tabeli.

 !" K #$%&'    

(



Strona Ksigarni
Bookworm
po okre!leniu
marginesw
oraz wypenie(

Moliwoci kontroli, jakie daje CSS s jeszcze wiksze. Istnieje sze waciwoci sucych do kontrolowania ta. Co wicej, dziki temu, i style s stosowane do okrelania postaci poszczeglnych elementw strony, istnieje moliwo okrelenia rnego ta
dla rnych elementw. Wszystkie waciwoci kontrolujce wygld ta zostay przestawione w tabeli 10.2.


(


 K      



Wa!ciwo!ci CSS okre!lajce posta ta
Waciwo

Opis

!2 : ,  

Okrela kolor ta dla elementu. Moliwymi wartociami s nazwy kolorw

(lub odpowiadajcy im heksadecymalny tryplet 2) lub sowo
.

!2 : ,
2

Definiuje obraz jako to elementu. Wartoci powinien by adres URL

pliku obrazu lub sowo  .

!2 : ,

Jeli konieczne jest zoenie ta z identycznych obrazw, ten atrybut

umoliwi okrelenie sposobu wywietlania ta. Wartoci atrybutu to ,
,4 i ,. Warto  wskazuje, e obraz powinien by
powielany w sposb normalny. Zastosowanie wartoci ,4 spowoduje
powtrzenie obrazu w pojedynczej linii poziomej, a zastosowanie wartoci
, w linii pionowej.

  

Okrela kolor elementu (w wikszoci przypadkw dotyczy to koloru tekstu

wywietlanego wewntrz elementu strony WWW). Kolor mona okreli,
podajc jedn z 16 nazw lub uywajc kilku rnych sposobw zapisu
wartoci RGB.

!2 : ,

Okrela czy obraz ta jest stay (doczony do dokumentu), czy te bdzie

przewijany wraz z nim. Dostpne wartoci tej waciwoci to:  
oraz A
4 .

!2 : , 



Okrela pocztkowe pooenie obrazu ta. Dostpne wartoci zostay opisane

poniej w tabeli.

!2 :

Waciwo skrtowa umoliwiajca okrelenie jednej lub kilku

powyszych waciwoci w jednym miejscu arkusza stylw.

Wedug zalece W3C, definiujc obraz ta strony WWW, naley jednoczenie okreli
kolor ta. Dziki temu, jeli obraz ta nie bdzie dostpny, to strona przynajmniej bdzie
miaa kolorowe to.
W dodatku D pt.: Krtki przewodnik po kaskadowych arkuszach stylw (CSS)
znajdziesz nazwy kolorw oraz opis sposobw zapisu wartoci RGB.

Waciwo  #
"1 jest dosy zoona i dlatego wymaga krtkiego wyjanienia. Wymaga ona podania dwch wartoci oddzielonych od siebie znakiem odstpu.
Wartoci te okrelane s na jeden z poniszych sposobw:

jako sowo kluczowe. Sowa kluczowe: ,  oraz  okrelaj pionowe
pooenie ta strony, natomiast sowa kluczowe: 
,  oraz 
 okrelaj

pooenie poziome ta. A zatem, aby umieci obraz ta po rodku strony, zarwno
w pionie jak i poziomie, naley poda nastpujc kombinacj wartoci:  ;

jako dugo. W tym przypadku podane wartoci to wsprzdne x i y, przy czym

x to wsprzdna pozioma (odlego obrazu ta od lewej krawdzi strony)

a y to wsprzdna pionowa (czyli odlego obrazu ta od grnej krawdzi strony).
A zatem, podanie wartoci 20 25 spowoduje umieszczenie lewego, grnego
wierzchoka obrazu ta w odlegoci 20 pikseli od lewej krawdzi strony i 25 pikseli
od jej grnej krawdzi;

 !" K #$%&'    

((

jako warto procentow. Domylne pooenie obrazu ta (czyli domylna warto

waciwoci  #
"1) to -3 -35 Odpowiada ona lewemu, grnemu
wierzchokowi strony WWW. Zastosowanie wartoci !--3 !--3 spowodowaoby

umieszczenie obrazu ta w prawym, dolnym wierzchoku strony.


$%&'(()!
"
W poprzednich przykadach okrelie ju kolory niektrych elementw strony Ksigarni Bookworm. W tym przykadzie dodatkowo rozbudujesz te ustawienia. Przedstawiony poniej kod CSS spowoduje wywietlenie na stronie obrazu ta. Stosujc waciwo  #
"1
, okrelisz URL obrazu ta i zadasz od przegldarki, aby by
on powtarzany, jak pokazaam na rysunku 10.5.



Strona
Ksigarni Bookworm
z okre!lonym obrazem
ta oraz kolorami

)!!


 K      
Plik zawierajcy obraz ta background.gif wykorzystany w tym przykadzie
mona znale7 w witrynie niniejszej ksiki, pod adresem http://www.tywebpub.com/.

Caa strona WWW nie jest jedynym elementem, dla ktrego mona okrela to i kolory. Rne to i kolory moesz okrela niezalenie dla kadego elementu strony. Dla
zapewnienia ciekawego efektu, przedstawiony poniej kod CSS definiuje take kolory
nagwkw, na przykad, nagwki poziomu 1 oraz 2 bd wywietlane na brzowo.
Nagwki poziomu 1 bd wywietlane na jasnotym tle (okrelonym wartoci
+



), natomiast nagwki poziomu 2 na tle jasnozielonym (okrelonym wartoci
+

).
Aby uatwi Ci analiz regu stylw podanych w kilku kolejnych przykadach, wszystkie wprowadzane w nich modyfikacje bd wywietlane na szarym tle. Zmodyfikuj arkusz stylw na stronie bookwrm.html i dopisz do niego linie kodu wywietlone w poniszym przykadzie na szarym tle:

",,
 ?!2 : ,  1OAAC
A ,A
16
8B
8,
AC
  1 00VVC
2
1I04Q04C
   

 
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@
   !""##$$

2, 1.I4C

2,  1.I4C
!2 : ,  1OAAAA@
%   !""##$$

2, 1.I4C

2,  1.I4C
   !  
,,

 )#
 ,#-! +
.
/
Kaskadowe arkusze stylw udostpniaj wiele waciwoci sucych do kontroli postaci obramowa poszczeglnych elementw strony. W HTML-u jedynie kilka elementw,
takich jak komrki tabel oraz obrazy, mogo mie obramowania. W CSS obramowanie
moe teoretycznie mie kady element strony.
Waciwoci CSS okrelajce posta obramowa elementw stron WWW przedstawiam w tabeli 10.3.

 !" K #$%&'    

)!


 
Wa!ciwo!ci CSS okre!lajce posta obramowa(
Waciwo

Opis

  ,

Okrela styl wszystkich czterech obramowa elementu. Wartoci tej waciwoci

s identyczne jak wartoci waciwoci   ,  ,. Styl poszczeglnych
obramowa mona take okrela niezalenie, posugujc si waciwociami
  ,  ,,   ,A,,   , , oraz   ,
2,
,. Dostpne wartoci, ktre mona przypisa tej waciwoci to: ,  ,
 ,  
, :, 2 B, 
2,
 oraz :.

  ,  

Okrela kolor wszystkich czterech obramowa elementu. Kolor poszczeglnych

obramowa mona take okrela niezalenie, posugujc si waciwociami
  ,  ,  ,   ,A,  ,   , ,   oraz   ,
2,
,  . Wartoci tych waciwoci moe by jedna z 16 nazw kolorw, warto
RGB zapisana w jednej z kilku dostpnych postaci lub te warto .

  ,


Okrela grubo wszystkich czterech obramowa elementu. Grubo

p szczeglnych obramowa mona take okrela niezalenie, posugujc si
waciwociami   ,  ,
,   ,A,
,   , ,

oraz   ,
2,
. Dostpne wartoci to: 
, 
:, 
! lub te warto
okrelajca dugo.

  

Waciwo skrtowa umoliwiajca jednoczesne okrelenie gruboci, stylu

oraz koloru wszystkich czterech obramowa elementu. Wygld poszczeglnych
obramowa elementu (jego grubo, kolor oraz styl) mona take okrela
niezalenie, przy uyciu waciwoci   ,  ,   ,A,   , 
oraz   ,
2.


*+'((!,"Przedstawiony poniej przykad demonstruje sposb zdefiniowania obramowa dla nagwkw wywietlanych na stronie WWW. Dziki obramowaniom mog one nieco
przypomina paski z reklamami. Wygld kadego z nagwkw zosta zmodyfikowany
dziki zastosowaniu waciwoci 1, 1 oraz 16 . Grne
oraz lewe obramowania nagwkw obu typw bd miay inny kolor ni obramowania
prawe i dolne. Taki efekt mona osign dziki przypisaniu waciwoci 1
dwch wartoci. Nagwki poziomu 1 bd sprawiay wraenie, jak gdyby byy wypuke, natomiast nagwki poziomu 2, jak gdyby byy wklse. Ten efekt mona z kolei
uzyska, przypisujc waciwoci 1 wartoci " oraz  i wykorzystujc t waciwo do okrelenia postaci wybranych znacznikw.
Aby zdefiniowa obramowania oraz kolory nagwkw, dodaj do arkusza stylw osadzonego w stronie Ksigarni Bookworm, kod wywietlony w poniszym przykadzie na
szarym tle:

",,
 ?!2 : ,  1OAAC
A ,A
16
8B
8,
AC
  1 00VVC
2
1I04Q04C
!2 : ,
21:L!2 : /2
AMC
!2 : ,1@
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@

)!


 K      
1
B?  1OAA0000@
.?  1OJJVV C

2, 1.I4C

2,  1.I4C
!2 : ,  1OAAAAC
  ! $$! ""$$
& 
'
K?  1OJJVV C

2, 1.I4C

2,  1.I4C
!2 : ,  1OAAC
  !" $$!""##$$
& 
'
,,

Po wywietleniu strony w przegldarce obsugujcej kaskadowe arkusze stylw, powinna ona przypomina stron przedstawion na rysunku 10.6 (widoczna na nim strona
zostaa wywietlona w Internet Explorerze). Netscape Navigator wywietla obramowania i to w nieco inny sposb. Obramowania wywietlane w przegldarce Internet
Explorer s nieco grubsze, natomiast w przegldarce Netscape, ciesze i nieco przesunite wzgldem kolorowego ta elementu.



Strona wykorzystujca
wa!ciwo!ci
obramowa(
wy!wietlona w Internet
Explorerze

 !" K #$%&'    

)!)

 )#
 ( (  "#$
Kaskadowe arkusze stylw dysponuj obszern grup waciwoci sucych do okrelania postaci czcionek. W rzeczywistoci kaskadowe arkusze stylw daj autorom
strony WWW znacznie wiksz kontrol nad wygldem uywanych czcionek ni ta,
ktr zapewnia bardzo prosty znacznik 
.
Podstawowe waciwoci suce do okrelania postaci czcionek zostay przedstawione
w tabeli 10.4.


Wa!ciwo!ci CSS okre!lajce posta czcionek
Waciwo

Opis

A ,A


Okrela krj czcionki. Pozwala na podanie nazwy czcionki (na przykad: Arail, Times
lub Palatino),bd jednej z piciu oglnych nazw czcionek: 
A, ,
A, :
B,
A lub   .

A ,


Okrela wielko czcionki, wyraon w wielkociach bezwzgldnych, wzgldnych lub jako

warto procentow.

A ,

Okrela styl czcionki, moe to by jedna z wartoci: 

F:,

 lub  .

A ,
2

Okrela grubo (wag) czcionki, mona j ustali przy uyciu wartoci  ,   ,
  , lub 
2.

A ,B


Okrela modyfikacj czcionki, moe to by warto , lub  .

A 

Waciwo skrtowa umoliwiajca okrelenie wartoci waciwoci A ,

2,
A ,
, A ,, A ,A
 oraz 
,
2 w jednym miejscu arkusza stylw.
Waciwo 
,
2 zostaa szczegowo opisana w nastpnym podrozdziale,
pt.: Waciwoci CSS okrelajce wyrwnanie tekstu.

A oto jeszcze kilka dodatkowych informacji dotyczcych powyszych waciwoci

o ktrych warto wiedzie:

definiujc rodzin czcionek za pomoc waciwoci
1
, moesz poda

kilka nazw, oddzielajc je przecinkami i wymieniajc w porzdku preferencji.

Jeli wybrana przez Ciebie czcionka nie jest dostpna, system signie po nastpn
nazw na licie. W3C radzi, aby nazwa oglna bya umieszczana na ostatnim
miejscu. Wynika to z faktu, i kada przegldarka dysponuje czcionk domyln
dla danej rodziny oglnej;

uywajc nazw oglnych rodzin czcionek, naley uwaa podczas stosowania
rodzin "/ oraz
 . Wygld tych czcionek jest w gwnej mierze zaleny
od czcionek zainstalowanych na dysku osoby przegldajcej stron. Czcionki 
,
 1
oraz   s zazwyczaj instalowane wraz z systemem operacyjnym
bd przegldark, nie zawsze dotyczy to czcionek "/ oraz
 ;

w przypadku okrelania bezwzgldnej wielkoci czcionki za pomoc waciwoci

17 stosowane s sowa kluczowe, takie jak 881,&81 ,  ,
",  
, 81 
 oraz 881 
. Wartoci te odpowiadaj konkretnym

wielkociom czcionek w przegldarce. Wielkoci wzgldne wyraane s w stosunku

do wielkoci czcionki elementu nadrzdnego i mog by zdefiniowane jako wiksze
lub mniejsze;

)!*


 K      

gruboci czcionek okrelane s wartociami liczbowymi: !--, 4--, ,--, 9--, :--, .--,
;--, <-- oraz =--. Waciwoci
16
 mona przypisa jedn z tych liczb
lub jedn z wartoci  , ,  lub 
. Warto   odpowiada
wartoci 9--, natomiast  wartoci ;-- na skali liczbowej. Wartoci 
oraz 
 okrelaj grubo czcionki w zalenoci od elementu nadrzdnego.

Przedstawiony poniej fragment kodu demonstruje wykorzystanie kilku waciwoci okrelajcych posta czcionek. Wygld tej strony WWW zosta przedstawiony na rysunku 10.7.

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


>;
 ;
%55 :
!



7+4+

",,
)$#&?!2 : ,  1OAAAAAA@
,,



 

 


7+A ,A
16
+A ,A
16




7+A ,A
1A+A ,A
1A





7+A ,
1+A ,
1


7+A ,
1
:+A ,
1
:


7+A ,
144,2+A ,
144,2




7+A ,1

+A ,1






7+A ,
21.00+A ,
21.00




7+A ,
21I00+A ,
21I00




7+A ,
21J00+A ,
21J00




7+A ,B
1 +A ,B
1 




7+A ,B
1,+A ,B
1,


 





Rne wa!ciwo!ci
okre!lajce
posta czcionek

 !" K #$%&'    

)!+

0
)()(   )#
1-( $
  "!
Oprcz waciwoci okrelajcych posta czcionek, kaskadowe arkusze stylw posiadaj
take wiele cech pozwalajcych autorom stron WWW na kontrolowanie wyrwnania tekstu.
Waciwoci te daj moliwo uzyskania dokadnej typograficznej kontroli nad tekstem,
jak posiadaj edytory tekstu oraz programy poligraficzne. Taki stopie kontroli, przed
opracowaniem CSS, nie by dostpny dla twrcw stron WWW. Podstawowe waciwoci
suce do okrelania wyrwnania tekstu zostay przedstawione w tabeli 10.5.


Wa!ciwo!ci CSS okre!lajce wyrwnanie tekstu
Waciwo

Opis

  ,
2

Umoliwia zwikszenie domylnych odstpw pomidzy wyrazami. Odstpy

s podawane w jednostkach absolutnych. Warto domylna to  .

,
2

Umoliwia zwikszenie domylnych odstpw pomidzy literami. Odstpy

s podawane w jednostkach absolutnych. Warto domylna to  .


,
2

Okrela odlego pomidzy liniami bazowymi dwch kolejnych linii. Warto

liczbowa okrela, e wysoko linii bdzie wielkoci czcionki pomnoon
przez podan liczb, na przykad, 
,
21K tworzy lini o wysokoci rwnej
dwukrotnej wielkoci czcionki. Waciwoci 
,
2 mona take przypisa
warto bezwzgldn. Na przykad, 
,
21.I4 oznacza, e wysoko linii
bdzie wynosia 15 pikseli. W przypadku podania wartoci procentowej, wysoko
linii jest obliczana na podstawie wysokoci elementu. Na przykad, 
,
21
K00[ jest rwnowane podaniu wartoci liczbowej: 
,
21K. Mona take uy
wartoci  , ktra sprawi, e linia bdzie miaa domyln wysoko. Aktualnie
waciwo ta jest obsugiwana przez przegldark Netscape Navigator 4.0.

B
,
2

Okrela absolutn pozycj tekstu w pionie lub jego pozycj wzgldem elementu
nadrzdnego. Oto lista jego wartoci: 
, 
, :, :, 4,  i 4,
,   (okrelaj pozycj wzgldem elementu nadrzdnego) oraz   i   
(okrelaj pozycj wzgldem wiersza). Stosujc procentowe wartoci ujemne lub
dodatnie, obniamy lub podnosimy element ponad lini bazow elementu nadrzdnego.

4,
2

Umoliwia nie tylko to, co standardowe wyrwnanie HTML (wartoci A, 

2,
), ale take wyrwnanie do obu marginesw (:
A). Warto :
A
tej waciwoci jest aktualnie obsugiwana przez przegldark Netscape Navigator
4.0, Internet Explorer 4.0 jej nie obsuguje.

4,  


Umoliwia wprowadzanie dodatkowych ozdobnikw, takich jak podkrelenie,

przekrelenie i miganie. Moe przyjmowa cztery wartoci:  , B
, 
,
, :2 i 
!.

4,
 

Okrela wcicie pierwszej linii sformatowanego tekstu w elemencie. Warto ta moe

by wartoci bezwzgldn lub wartoci procentow, bazujc na szerokoci
elementu. Wartoci procentowe okrelane s na podstawie szerokoci elementu
i w przewaajcej wikszoci przypadkw dziaaj najlepiej. Aktualnie waciwo ta
jest obsugiwana w Netscape Navigatorze 4.0, Internet Explorer 4.0 nie obsuguje jej.


,

Atrybut okrela odstpy i zamania wiersza w obrbie elementu. Wartoci

s nastpujce:   w tym przypadku dodatkowe odstpy s ignorowane,
tak jak w przypadku zwykego HTML,  jak w formatowanym wstpnie
za pomoc znacznika
 tekcie HTML lub   wiersze s amane tylko
za pomoc znacznika
.

)!,


 K      
Jak wida, przedstawione tu waciwoci CSS s obsugiwane inaczej w programie Internet Explorer 4.0 oraz Netscape Navigatorze 4.0. Niektre waciwoci s odczytywane tylko w jednej z tych przegldarek, natomiast inne, w obu. A zatem, jeli w pewnym
momencie stracisz rozeznanie co si dzieje, to wiedz, e wina niekoniecznie bdzie leaa po Twojej stronie.
Fragment kodu przedstawiony poniej demonstruje wiele waciwoci sucych do
okrelania postaci tekstu i wykorzystuje je do sformatowania rnych elementw tekstowych. Zwr uwag, w jak odmienny sposb ten sam kod jest wywietlany w dwch
najpopularniejszych przegldarkach. Wanie na tym przykadzie moesz si przekona,
dlaczego warto sprawdza strony w wielu rnych przegldarkach. Rysunki 10.8 oraz 10.9
ukazuj, w jaki sposb ponisza strona wyglda w przegldarkach Internet Exolorer 4
oraz w Netscape Navigator 4.



Rne wa!ciwo!ci
tekstu wy!wietlone
w przegldarce
Internet Explorer 4

# #
#
Zanim wykorzystasz waciwoci okrelajce posta tekstu i czcionek do zmodyfikowania wygldu strony Ksigarni Bookworm, chciaam przedstawi ostatni typ arkuszy
stylw style lokalne. Metoda ta pozwala okreli styl nie dla caej strony, lecz dla jej
konkretnego elementu. Jeli na stronie znajduje si nagwek lub akapit, na ktry
chcesz zwrci uwag czytelnika poprzez wykorzystanie odmiennego koloru lub wyrwnania tekstu i jeli chcesz wykorzysta ten szczeglny sposb formatowania tylko
na jednej stronie witryny, to moesz do tego celu uy stylu lokalnego.

 !" K #$%&'    

)!



Rne wa!ciwo!ci
tekstu wy!wietlone
w przegldarce
Netscape 4

HTML zawiera kilka atrybutw, ktre pozwalaj docza reguy stylw do znacznikw
HTML. Podstawowymi atrybutami wykorzystywanymi w tym celu s atrybuty 
oraz  . Dostpny jest take znacznik  , take wykorzystywany wraz z arkuszami stylw. Wszystkie te elementy zostan opisane w dalszej czci podrozdziau.

.,( /01
We wczeniejszej czci rozdziau, a konkretnie w podrozdziale pt.: Osadzone arkusze
stylw poznae znacznik , ktry pozwala na doczenie do standardowej strony WWW zewntrznego arkusza stylw. Atrybut  pozwala na doczenie reguy
stylu do konkretnego elementu strony.
Zewntrzne oraz osadzone arkusze stylw umoliwiaj rozdzielenie definicji stylw od
zawartoci dokumentu HTML. W odrnieniu od nich, atrybut  jest umieszczany
wewntrz kodu treci dokumentu.
Atrybut  mona przypisa kademu znacznikowi HTML z wyjtkiem znacznikw:

,
A ,
 ,
,
,
,

,
 oraz

/

Zamy, e chciaby zmieni kolor wybranego akapitu strony, posugujc si w tym

celu regu stylu. Zazwyczaj tekst jest wywietlany na stronie w kolorze czarnym i nie
jest w aden sposb wyrniany. Ty chcesz, aby jeden akapit tekstu zosta pogrubiony
i wywietlony na czerwono.

)!


 K      
Warto przypisywana atrybutowi  (kolor  oraz grubo czcionki ) zostaj
zapisane w cudzysowach. Reguy stylw definiujce te atrybuty (*&  oraz
1
6
*&) zostaj zapisane wewntrz cudzysoww i oddzielone od siebie rednikiem.
Przedstawiony poniej fragment kodu demonstruje zastosowanie atrybutu  do okrelenia wygldu akapitu:

7+  1 CA ,
21  +%98!
>>: 

;
   /


.,'0.((
Klasa jest zdefiniowanym stylem o szerokim zasigu, okrelajcym waciwoci dla
niektrych lub wszystkich elementw tworzcych dokument. Klasy s definiowane
w zewntrznych arkuszach stylw lub w nagwku standardowego dokumentu HTML,
wykorzystujcego osadzony arkusz stylw. Nastpnie specjalny atrybut   przypisuje okrelon klas jednemu lub kilku elementom strony WWW. Zalet atrybutu  
w porwnaniu z atrybutem  jest moliwo wykorzystania tej samej reguy stylu
do okrelenia postaci wikszej iloci elementw strony, bez koniecznoci jej wielokrotnego wpisywania.
Atrybut  mona przypisa kademu znacznikowi HTML z wyjtkiem znacznikw:

,
A ,
 ,
,
,
,

,
 oraz

.

Przedstawiony poniej fragment kodu CSS demonstruje dwie reguy okrelajce wygld
akapitw. Pierwsza z nich okrela wygld normalnego akapitu strony, natomiast druga definiuje specjaln klas, ktra zostanie uyta do okrelenia wygldu wybranych
akapitw. Ta specjalna klasa nosi nazw 5

, gdzie  rozpoczyna definicj znacznika akapitu, a 

 oznacza nazw klasy.

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


5  
!



7+4+

",,
?A ,A
6
8B
8,
AC  1!@
/
22?A ,A
6
8B
8,
ACA ,
12@
,,



 

Teraz, gdy ju zdefiniowae specjaln klas o nazwie 

, naley doczy j do

wybranego akapitu strony, ktrego wygld chcesz zmodyfikowa. Aby uy klasy 


do okrelenia postaci akapitu, naley wykorzysta fragment kodu o nastpujcej skadni:

7+
22+

Aby dokadniej zademonstrowa sposb wykorzystania klasy, poniszy przykad przedstawia kod prostej strony WWW. Strona ta skada si z dwch akapitw: pierwszy jest
normalny, natomiast drugi zosta sformatowany przy uyciu stylu 

.

 !" K #$%&'    

)!(

 

%:  ;
 
!:;
 2  
\
P;
 

 >;:
 :8:  ;

 
2 !
:8 
9 
;
= 

!  9  !:
/


7+
22+ E %
  !:=\


 






Zastosowanie
atrybutu CLASS
do okre!lenia
wygldu akapitu

+2#3
Przykady przedstawione w tym podrozdziale wykorzystuj znacznik  . Umoliwia on sformatowanie wybranego fragmentu tekstu przy uyciu stylw a jednoczenie,
w aden sposb nie okrela jego struktury (co oznacza, e tekst nie jest zapisywany
w adnym konkretnym, strukturalnym znaczniku HTML). Znacznika   mona
nawet uy do okrelenia postaci pierwszej litery lub pierwszego sowa strony. Nie wywiera on adnego wpywu na wygld tekstu, co oznacza, i jego posta bdzie okrela
wycznie styl.


4+!!'((
!&#5
W ostatnim wiczeniu przedstawionym w tym rozdziale zmodyfikujesz kod poprzednich przykadw, dodajc do niego waciwoci okrelajce posta czcionek. Zwr
uwag, i w przykadzie wykorzystana zostaa oglna rodzina czcionek o nazwie
 .
Zazwyczaj czcionki tego rodzaju s instalowane wraz z programami graficznymi lub
poligraficznymi. Jeli na swoim komputerze nie masz zainstalowanej adnej czcionki
tego typu, zamie wszystkie wystpienia sowa
  sowem
8. Pierwsza cz
strony bookwrm.html zostaa przedstawiona poniej:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 



7+4+

",,
 ?!2 : ,  1OAAC
A ,A
16
8B
8,
AC
  1 00VVC
2
1I04Q04C

) !


 K      
!2 : ,
21:L!2 : /2
AMC
!2 : ,1@
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@
.?  1OJJVV C

2, 1.I4C

2,  1.I4C
!2 : ,  1OAAAAC
  ,  1O OJJ C
  ,1 :C
  ,
1


Teraz powiniene doda regu stylu zmieniajc czcionk, jak bd wywietlane nagwki H1, na fantasy (lub fixed, jeli nie masz zainstalowanych adnych czcionek typu

 ) oraz wyrodkowa tre nagwka na stronie przy uyciu waciwoci 81

. Moesz to zrobi, dopisujc do arkusza stylu nastpujcy kod:
 &(&(
)  

Oto dalsza cz istniejcego kodu strony:

K?  1OJJVV C

2, 1.I4C

2,  1.I4C
!2 : ,  1OAAC
  ,  1OJ OJJVV
  ,1
C
  ,
1


Zawarto nagwkw H2 take chcesz wywietli czcionk typu fantasy i wyrodkowa na stronie:
 &(&(
)  

Kod stylu na stronie bookwrm.html koczy si definicj reguy stylu dla znacznika
#>" o nastpujcej postaci:
 !F: ?A ,A
1+) !6
F:+C

,
21.KC
A ,
21 C
A ,B
1 C
  1OJJVV C
  ,
21KC
4,
21@

Poniej sekcji stylu dla znacznika #>", dodaj klas o nazwie
  (lub
8,
jeli na Twoim komputerze nie zostay zainstalowane adne czcionki typu
 ). Klasy tej uyjesz do wywietlenia zawartoci niektrych elementw strony czcionk
 
(lub
8). Aby zdefiniowa klas, wpisz do arkusza stylw poniszy fragment kodu,
zastpujc w razie koniecznoci sowo
  sowem
8:
/& )  
 &(&(
*#
  !""##++

 !" K #$%&'    

Osadzony arkusz stylw koczy si w standardowy sposb:

,,



 

Ale to jeszcze nie wszystko! Wci pozostaje Ci wykorzystanie stylu lokalnego do

okrelenia postaci fragmentu strony. Istniej dwa fragmenty strony, ktrych posta
chcesz okreli w taki sposb. Nazwa ksigarni pojawia si w kilku miejscach na stronie i to wanie te fragmenty chcesz sformatowa stylem
  (lub
8). Ponisze
dwa odcinki kodu pokazuj, gdzie i jakich zmian naley dokona. Oto pierwszy fragment:


7+A+D
92
) ! 


. HI6 #

5
2A
 8%6JH KI

LH.IMIII,00 H



I drugi fragment:

$ .J  !:
7+A+D
92
) ! 
 A::>
 !

:  98
2
!=/D
92
) !  A:1


Poniej przedstawiam peny listing ostatecznej wersji kodu strony Ksigarni Bookworm, jej pocztkowa cz, wywietlona w przegldarce Internet Explorer, zostaa
take przedstawiona na rysunku 10.11:

"#$%&'()*%+, %##-./05
'+
+1/ / 234.##
/  +



 


D
92
) ! 



7+4+

",,
 ?!2 : ,  1OAAC
A ,A
16
8B
8,
AC
  1 00VVC
2
1I04Q04C
!2 : ,
21:L!2 : /2
AMC
!2 : ,1@
1
!?  1OAA00AA@
1B

 ?  1OVV0000@
1 B?  1OAA00@
1
B?  1OAA0000@
.?  1OJJVV C

2, 1.I4C

2,  1.I4C
!2 : ,  1OAAAAC
  ,  1O OJJ C
  ,1 :C
  ,
1
C
A ,A
1+A+C
4,
21@
K?  1OJJVV C

2, 1.I4C

2,  1.I4C
!2 : ,  1OAAC
  ,  1OJ OJJVV C

)


 K      
  ,1
C
  ,
1
C
A ,A
1+A+C
4,
21@
 !F: ?A ,A
1+) !6
F:+C

,
21.KC
A ,
21 C
A ,B
1 C
  1OJJVV C
  ,
21KC
4,
21@
/A?4,
21AC
A ,A
1+A+C
A ,
1.VC
  1OJJVV00@
,,



 

 

7+ +
.) ! 1D
92
!
E!
.


 !F: 
+!
E!
G9!8
 


 
"+

,%(8

5
!




 !F: 


7+A+D
92
) ! 


. HI6 #

5
2A
 8%6JH KI

LH.IMIII,00 H



7+ +
K< ;N
K


:



A7+O :+$!
92







A7+O+ :>






A7+O: 
2+< 
  





:



7+ :+
K$!
92
) ! 
K


$ .J  !:
7+A+!
92
) ! 
 A::>
 !

:  98 2
!=/D
92
) ! 
A:1


:


8! 
: >:29




D9
 !
 !
=




P
982 
 E ! 
 N!
E!9 !:




%! !
1' 98D98#:9 )



:

< 


 2 .0 K.
 28! 

 2  >: 
 .Q
 2/



A7+O +# 
:;

R
A7+O +
 !





7+O+
K :>
K


:


5 )8
A7+ /+


) 







P 
8
A7+K0
/+


K0,
:  
>!
  







4):28
A7+2
/+


2
S :







6
 %
8
A7+F: /+


#:)F:






:

 !" K #$%&'    

) )


A7+O +# 

:;

R
A7+O +
 !



7+: 
2+
K< 
  

K


:



T 2 D
E!
8
 !

 !:!
/<  U
 
A 8!
9>N 2:  9 
 


2 
:/





S 
 #

!=
8  !
!E   9 . 8 N8
 ;2N:
9 
N / =
E! 


!/





!.V;
!
92
9 
 

% W
8 N
A22 
:


!
 

/





D
92
9 


.X 

!  :  !

 

 8!=:
> 
2
 ! 
E/:
  8
>28!= 
///



:


A7+O +# 
:;

R
A7+O +
 !



 
$
!:
1....JJ

1:Y ! / 

ZO.VJC 
2.JJJD
92
) ! 


 

 




 
Strona
Ksigarni Bookworm
po dodaniu stylw
okre!lajcych posta
czcionek i tekstu

) *


 K      
Jeli wywietlisz t stron w Netscape Navigatorze, to najprawdopodobniej zauwaysz,
e znacznik
 jest traktowany tak samo, jak znacznik
; czyli sprawia, e tekst
umieszczony za znacznikiem zostanie wywietlony w nowej linii. Wiedzc o tym,
zapewne nie bdziesz chcia umieszcza znacznikw
 wewntrz akapitu,
tak jak zostay zapisane w powyszym przykadzie.

2$
.
(1 
"
(3
 !"
(3 "#$
W tym rozdziale bardzo pobienie przedstawiam kaskadowe arkusze stylw. Wynika to
z faktu, i CSS jest bardzo rozlegym zagadnieniem, a adna przegldarka nie implementuje stylw na tyle dobrze, aby mona byo szczegowo opisywa ich moliwoci.
Jeli pragniesz zdoby dodatkowe informacje dotyczce kaskadowych arkuszy stylw,
moesz je znale na witrynie W3C, gdzie przechowywane s specyfikacje CSS. Strona
powicona CSS dostpna jest pod adresem http://www.w3.org/Style/CSS/.
Poniej podaam list innych witryn, na ktrych mona znale informacje o kaskadowych arkuszach stylw.

Webreview.com. Na tej witrynie mona znale przewodnik po CSS. Najbardziej

przydatna cz tego przewodnika zawiera informacje dotyczce znacznikw CSS

zaimplementowanych w poszczeglnych przegldarkach.

Cascading Style Sheets. Ten dokadny opis opracowany przez Web Design Group

zawiera informacje o waciwociach arkuszy stylw wprowadzonych w CSS1.

Mona go znale pod adresem http://www.htmlhelp.com/reference/css/.

W3C CSS Home Page. Na tej stronie moesz znale obszern list pocze

do wszelkiego typu przykadw, historii oraz najnowszych trendw rozwoju

arkuszy stylw oraz innych technologii zwizanych z WWW.

, 
To ju koniec tego dugiego rozdziau wypenionego przernymi informacjami. Jeli
chcesz utrwali omawiane w nim zagadnienia, to skorzystaj z pyta i wicze podanych
w tej czci rozdziau. Dziki nim atwiej zapamitasz najistotniejsze informacje dotyczce kaskadowych arkuszy stylw, podane w tym rozdziale.



 & 
P. W jaki sposb mam okreli, ktrego typu arkuszy stylw naley uy? Dokonanie tego wyboru przysparza mi wielu problemw.
O. Nie przejmuj si, nie jeste jedyn osob, ktra ma z tym problemy. Oglnie rzecz
biorc, istnieje kilka metod okrelania typu arkuszy stylw, jakie naley zastosowa.
Jeli masz zamiar wprowadzi jaki unikalny efekt, ktry nie ma krytycznego znaczenia dla caej prezentacji, to moesz wybra ten rodzaj arkusza stylw, ktry Ci
najbardziej odpowiada. Jeli chcesz, aby Twoje strony mogo oglda jak najwicej

 !" K #$%&'    

) +

osb, to najlepszym rozwizaniem bdzie wykorzystanie kaskadowych arkuszy

stylw, gdy s one najlepiej obsugiwane w przegldarkach.
P. Mam problemy ze zrozumieniem waciwoci zwizanych z kolorem i obrazem
ta. Czy nie lepiej by byo zamiast nich zastosowa tabel i okrela kolor lub obraz ta w poszczeglnych komrkach?
O. Masz cakowit racj, przy uyciu tabel mona osign podobny efekt. Jednak jest
pewien problem zwizany ze znacznikami tabel. Po pierwsze, nie s to w peni
strukturalne znaczniki, a co za tym idzie, niektre przegldarki nie s w stanie ich
poprawnie wywietla. Chodzi tu o przegldarki, takie jak Lynx lub prezentujce
zawarto strony w formie dwikowej. Oznacza to, e tekst umieszczony w tabeli
moe zosta wywietlony w nieodpowiedniej kolejnoci i wyglda inaczej, ni zaplanowa twrca strony. Uzyskujc bardzo podobne wyniki przy zastosowaniu arkuszy stylw, mona si skoncentrowa na zapewnieniu strukturalnej postaci dokumentu. Dziki temu, nawet w przegldarkach, ktre nie obsuguj arkuszy stylw,
strona moe by bardziej czytelna i przydatna.

4!
1. Jaka jest rnica pomidzy dokumentami HTML typu cisego ()
oraz poredniego (  )?
2. Czym jest regua stylu CSS?
3. Jakie s trzy podstawowe sposoby tworzenia kaskadowych arkuszy stylw?
4. Jakiej metody naley uy, aby stworzy arkusz stylw i przy jego uyciu okreli
posta wielu stron WWW? Jakie rozszerzenie pliku powiniene zastosowa?
5. Prawda czy fasz: Na tej samej stronie WWW mona uy zewntrznych
arkuszy stylw, osadzonych arkuszy stylw oraz stylw lokalnych.

& 
1. W dokumentach HTML typu cisego () formatowanie strony jest okrelane
tylko i wycznie przy uyciu arkuszy stylw; dotyczy to take kolorw
oraz wyrniania tekstw. Dokumenty HTML typu poredniego wykorzystuj
arkusze stylw oraz znaczniki i atrybuty HTML umoliwiajce okrelanie sposobu
formatowania dokumentu w starszych typach przegldarek.
2. Regua stylu CSS definiuje styl, ktry ma okrela wygld elementu HTML. Regua
skada si z selektora (jakim moe by znacznik HTML), po ktrym podawana jest
deklaracja okrelajca waciwoci i wartoci tego selektora.
3. Kaskadowe arkusze stylw mona tworzy jako zewntrzne arkusze stylw,
osadzone arkusze stylw oraz jako lokalne arkusze stylw.
4. W przypadku, gdy chcesz uy arkusza stylw do okrelenia postaci wielu stron
WWW, najlepszym rozwizaniem jest stworzenie go jako arkusza zewntrznego.
Zewntrzne arkusze stylw s zapisywane w plikach z rozszerzeniem .css.

) ,


 K      
5. To prawda. Waciwoci zdefiniowane w osadzonych arkuszach stylw maj
wyszy priorytet, ni waciwoci zdefiniowane w arkuszach zewntrznych.
Podobnie, waciwoci zapisane w arkuszach lokalnych maj wyszy priorytet,
ni waciwoci zdefiniowane w osadzonych arkuszach stylw.

5( 

1. Stwrz wasn stron WWW i okrel jej posta przy uyciu wasnych regu stylw.
Style zapisz pocztkowo w zewntrznym arkuszu stylw, ktry bdziesz mg
wykorzysta do okrelenia wygldu wikszej iloci stron.
2. Zmodyfikuj stron stworzon w poprzednim wiczeniu w taki sposb, aby
wykorzystywaa osadzony arkusz stylw. Jeli lubisz przygody, to docz do tej
strony take zewntrzny arkusz stylw. Do osadzonego arkusza stylw dodaj style
przesaniajce style zdefiniowane w arkuszu zewntrznym i zobacz, jakie bd
wyniki tych eksperymentw.