Wodzimierz Gajda

Autor: Wodzimierz Gajda

ISBN: 83-246-0885-0
Format: B5, stron: okoo 500
Zawiera CD-ROM

i
Poznaj w praktyce zasady projektowania witryn WWW
Z jakich elementw skada si jzyk HTML?
Jak osadza na stronie WWW elementy graficzne?
Jak rozbudowa witryn WWW?

PRAKTYCZNE PROJEKTY

HTML, XHTML i CSS.

Praktyczne projekty

Poznaj w praktyce zasady projektowania witryn WWW

Z jakich elementw skada si jzyk HTML?
Jak osadza na stronie WWW elementy graficzne?
Jak rozbudowa witryn WWW?

Internet rozwija si w niesamowitym tempie. Kadego dnia pojawiaj si nowe strony

WWW. Wasne miejsce w sieci dawno ju przestao by ekstrawagancj. Dzi serwis
internetowy jest wyznacznikiem nowoczesnego przedsibiorstwa i organizacji,
miejscem, gdzie prezentuje si swoj ofert, zdjcia, dzieli opiniami dotyczcymi
otaczajcego nas wiata, uczestniczy w dyskusjach i robi zakupy. Stworzenie wasnej
witryny WWW wbrew pozorom nie jest spraw bardzo skomplikowan. Gotowe kreatory
i szablony dostpne u dostawcw usug internetowych znacznie to uatwiaj, jednak
prawdziw kontrol nad wygldem i funkcjonalnoci strony internetowej uzyskamy
tylko dziki wasnorcznemu jej utworzeniu. W tym celu niezbdne jest jednak
opanowanie podstawowego budulca witryn WWW jzyka HTML i technologii CSS.
Czytajc ksik HTML, XHTML oraz CSS. Praktyczne projekty, opanujesz
zagadnienia zwizane z projektowaniem witryny WWW od strony praktycznej. Dowiesz
si, z jakich elementw skada si jzyk HTML i czym rni si od niego jzyk XHTML.
Poznasz techniki formatowania tekstu i elementw graficznych za pomoc stylw CSS,
nauczysz si umieszcza na stronie tabele, cza, ramki i proste efekty specjalne.
Przeczytasz take o planowaniu struktury witryny, korzystaniu z szablonw
i projektowaniu stron WWW tak, aby mogy korzysta z nich osoby niepenosprawne.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Skadnia jzyka XHTML

Kaskadowe arkusze stylw
Definiowanie krojw czcionek dla tekstw
Elementy blokowe i tekstowe
Tabele i listy
Tworzenie czy pomidzy stronami
Definiowanie ta dokumentu
Efekty specjalne
Projektowanie struktury witryny

Poka si w sieci. Stwrz wasn witryn WWW!

Spis treci
Rozdzia 1. Wprowadzenie ................................................................................ 13
Dla kogo jest ta ksika? ................................................................................................. 13
Jak czyta t ksik? ...................................................................................................... 14
Testowanie stron WWW ................................................................................................. 14
Edycja kodu XHTML ...................................................................................................... 15

Cz I

Elementarz ................................................................... 17

Rozdzia 2. Skadnia jzyka XHTML .................................................................. 19

Znaczniki i elementy ....................................................................................................... 19
Wszystkie elementy jzyka XHTML .............................................................................. 20
Elementy puste i niepuste ................................................................................................ 20
Znaczniki wymagane, opcjonalne oraz elementy puste .................................................. 22
Wielko liter w nazwach znacznikw ............................................................................ 23
Biae znaki wewntrz znacznikw .................................................................................. 23
Biae znaki w treci elementw ....................................................................................... 24
Zagniedanie elementw ............................................................................................... 24
Znaki specjalne ................................................................................................................ 25
Atrybuty znacznikw ....................................................................................................... 27
Atrybuty logiczne, wyliczeniowe i inne .......................................................................... 30
Komentarze w XHTML ................................................................................................... 32
Struktura dokumentu HTML ........................................................................................... 32
Pierwsza strona WWW .................................................................................................... 33

Rozdzia 3. Znaki diakrytyczne i oznaczanie jzyka dokumentu .......................... 37

Polskie znaki diakrytyczne .............................................................................................. 37
Metody kodowania polskich znakw diakrytycznych ..................................................... 38
Fizyczne kodowanie pliku ............................................................................................... 38
Element meta ustalajcy kodowanie dokumentu XHTML ............................................. 40
Pangramy ......................................................................................................................... 41
Atrybut lang ..................................................................................................................... 42
Szablony pustych polskich stron WWW ......................................................................... 43
Znaki diakrytyczne w postaci encji ................................................................................. 44
Kodowanie stron zawierajcych teksty w kilku jzykach ............................................... 44
Jakiego kodowania uywa? ........................................................................................... 45
Bdne wywietlanie polskich znakw diakrytycznych .................................................. 49
wiczenia ........................................................................................................................ 49

HTML, XHTML oraz CSS. Praktyczne projekty

Rozdzia 4. XHTML poprawny skadniowo ......................................................... 55

Czy poprawno skadniowa jest wana? ........................................................................ 55
Obecny stan internetu ...................................................................................................... 56
Metody sprawdzania poprawnoci skadniowej .............................................................. 56

Rozdzia 5. Tryb standardw ............................................................................. 59

Quirks mode, standard mode dwa tryby pracy przegldarek internetowych ............. 59
Problemy z trybami pracy ................................................................................................ 60
Ktre przegldarki maj tryb standardw? ...................................................................... 61
Jak stwierdzi tryb pracy przegldarki? .......................................................................... 61
W jaki sposb przegldarka wybiera tryb pracy? ............................................................ 63
Stosuj DOCTYPE jzyka XHTML 1.0 strict .................................................................. 64

Rozdzia 6. Podstawowe elementy XHTML ........................................................ 67

Akapit .............................................................................................................................. 68
Dzielenie wyrazw .......................................................................................................... 73
Zakaz zamania wiersza ................................................................................................... 74
Zamanie wiersza ............................................................................................................. 76
Znaki interpunkcyjne ....................................................................................................... 78
Nagwki ......................................................................................................................... 78
Wyrnianie tekstu .......................................................................................................... 81
Tekst preformatowany ..................................................................................................... 83
Indeksy dolny i grny ...................................................................................................... 85
Linia pozioma .................................................................................................................. 86
Popularne znaki specjalne ............................................................................................... 87
Zestawienie ...................................................................................................................... 88

Rozdzia 7. Kaskadowe arkusze stylw ............................................................. 89

Struktura a wygld dokumentw HTML ......................................................................... 89
Doczanie stylw do dokumentu .................................................................................... 90
Style zewntrzne ....................................................................................................... 90
Style wewntrzne ...................................................................................................... 91
Atrybut style .............................................................................................................. 92
Domylny jzyk stylw ................................................................................................... 94
Ujmowanie stylw wewntrznych w komentarz HTML ................................................ 94

Rozdzia 8. Skadnia kaskadowych arkuszy stylw ............................................ 97

Terminologia ................................................................................................................... 97
Wielko liter w selektorach ............................................................................................ 98
Wielko liter w nazwach i wartociach waciwoci ..................................................... 99
Biae znaki ....................................................................................................................... 99
Komentarze .................................................................................................................... 100

Rozdzia 9. Przykadowe waciwoci CSS ...................................................... 101

Czcionki ......................................................................................................................... 101
Wysoko wiersza tekstu ............................................................................................... 103
Wyrwnanie poziome tekstu ......................................................................................... 103
Marginesy ...................................................................................................................... 104
Kolory ............................................................................................................................ 105
Obramowanie ................................................................................................................. 107
XHTML struktura, CSS wygld .......................................................................... 108
Zestawienie sumaryczne ................................................................................................ 108

Rozdzia 10. Klasy i identyfikatory .................................................................... 111

Atrybut class .................................................................................................................. 111
Selektory dotyczce klas ............................................................................................... 112

Spis treci

5
Stosowanie klas ............................................................................................................. 112
Atrybut id ....................................................................................................................... 114
Selektory dotyczce identyfikatorw ............................................................................ 114
Stosowanie identyfikatorw .......................................................................................... 115
Walka z classitis selektory potomne ......................................................................... 116

Rozdzia 11. Projekty ....................................................................................... 119

Projekt 11.1. Zadania dla czwartoklasistw .................................................................. 120
Projekt 11.2. Zadania tekstowe z odpowiedziami ......................................................... 120
Projekt 11.3. Kolokwium z PHP ................................................................................... 121
Projekt 11.4. Adam Mickiewicz: Oda do modoci ....................................................... 122
Projekt 11.5. Cyprian Kamil Norwid: Moja piosnka ..................................................... 123
Projekt 11.6. Charles Dickens: A Christmas Carol ....................................................... 124
Projekt 11.7. Jack London: The Call of The Wild ......................................................... 125
Projekt 11.8. Ignacy Krasicki: Bajki ............................................................................. 127
Projekt 11.9. Adam Mickiewicz: Wiersze ..................................................................... 128

Cz II

Czcionki na stronach WWW ........................................ 131

Rozdzia 12. Rodzaje czcionek ......................................................................... 133

Czcionki szeryfowe i bezszeryfowe .............................................................................. 133
Czcionki proporcjonalne i nieproporcjonalne ............................................................... 134
Inne podziay czcionek .................................................................................................. 135
Testowanie czcionek ...................................................................................................... 137

Rozdzia 13. Czcionki dla webmastera .............................................................. 139

Ogrd Zen CSS .............................................................................................................. 139
Core fonts for the Web .................................................................................................. 141
Czcionki dostpne na rnych platformach ................................................................... 141

Rozdzia 14. Krj i rozmiar czcionki w CSS ....................................................... 143

Krj czcionki ................................................................................................................. 143
Wielko czcionki w CSS .............................................................................................. 146

Rozdzia 15. Wszystkie atrybuty CSS 2.1 dotyczce czcionek i tekstu .............. 149
font ................................................................................................................................. 150
font-family ..................................................................................................................... 151
font-size ......................................................................................................................... 151
font-style ........................................................................................................................ 153
font-weight ..................................................................................................................... 153
font-variant .................................................................................................................... 153
text-align ........................................................................................................................ 153
text-decoration ............................................................................................................... 154
text-indent ...................................................................................................................... 154
text-transform ................................................................................................................ 154
word-spacing ................................................................................................................. 155
letter-spacing ................................................................................................................. 155
white-space .................................................................................................................... 155
line-height ...................................................................................................................... 156

Rozdzia 16. Projekty ....................................................................................... 157

Projekt 16.1. CSS waciwoci dotyczce czcionek i tekstu .................................... 157
Projekt 16.2. Specyfikacja aparatu fotograficznego Nikon D200 ................................. 159
Projekt 16.3. Jan Kochanowski: Treny .......................................................................... 160
Projekt 16.4. Adam Mickiewicz: Pan Tadeusz .............................................................. 161

HTML, XHTML oraz CSS. Praktyczne projekty

Cz III Elementy blokowe, tekstowe i ich pudeka .................. 163

Rozdzia 17. Elementy blokowe i liniowe ........................................................... 165
Elementy oglne div i span ........................................................................................... 165
Uycie elementw div i span w poczeniu z klasami i identyfikatorami ..................... 166
Typowy przykad uycia elementw div ....................................................................... 167

Rozdzia 18. Pudeka ....................................................................................... 169

Obszar, jaki zajmie pudeko .......................................................................................... 171
Wyrodkowanie elementu blokowego ........................................................................... 173
Pudeka pywajce (float) .............................................................................................. 174
Czyszczenie elementw pywajcych ........................................................................... 176

Rozdzia 19. Proste ukady staej szerokoci ..................................................... 177

Ukad nr 1
Ukad nr 2
Ukad nr 3
Ukad nr 4
Ukad nr 5
Ukad nr 6
Ukad nr 7
Ukad nr 8

...................................................................................................................... 178
...................................................................................................................... 179
...................................................................................................................... 180
...................................................................................................................... 182
...................................................................................................................... 183
...................................................................................................................... 185
...................................................................................................................... 186
...................................................................................................................... 188

Rozdzia 20. Proste ukady zmiennej szerokoci ................................................ 191

Ukad nr 9 ...................................................................................................................... 191
Ukad nr 10 .................................................................................................................... 191
Ukad nr 11 .................................................................................................................... 192
Ukad nr 12 .................................................................................................................... 193
Ukad nr 13 .................................................................................................................... 193
Ukad nr 14 .................................................................................................................... 194
Ukad nr 15 .................................................................................................................... 195
Ukad nr 16 .................................................................................................................... 195

Rozdzia 21. Projekty ....................................................................................... 197

Projekt 21.1. Maria Konopnicka: Miosierdzie gminy .................................................. 197
Projekt 21.2. Leopold Staff: Pierwsza przechadzka ...................................................... 199
Projekt 21.3. Sawomir Mroek: So ........................................................................... 200
Projekt 21.4. Stefan eromski: Rozdzibi nas kruki, wrony ....................................... 201
Projekt 21.5. Bolesaw Prus: Katarynka .......................................................................... 203
Projekt 21.6. Planety ukadu sonecznego ..................................................................... 205
Projekt 21.7. Funkcje file, count, explode oraz trim,
czyli krojenie plikw tekstowych w PHP ..................................................................... 206

Cz IV Elementy XHTML ........................................................ 209

Rozdzia 22. Tekst ........................................................................................... 211
Elementy frazowe .......................................................................................................... 211
Trudne wybory .............................................................................................................. 214
Cytaty ............................................................................................................................. 214
Tekst na stronach WWW podsumowanie ................................................................ 217

Rozdzia 23. Listy ............................................................................................ 219

Wypunktowanie ............................................................................................................. 219
Numerowanie ................................................................................................................. 220
Lista definicji ................................................................................................................. 221
Zagniedanie list .......................................................................................................... 222

Spis treci

7
Waciwoci CSS list ..................................................................................................... 224
Waciwo list-style-type ....................................................................................... 224
Waciwo list-style-image .................................................................................... 225
Waciwo list-style-position ................................................................................. 228
Waciwo list-style ............................................................................................... 228

Rozdzia 24. Obrazy ......................................................................................... 229

Element img ................................................................................................................... 230
Wymiary obrazw ......................................................................................................... 232
Obrazy nieprostoktne ................................................................................................... 234
Style CSS elementu img ................................................................................................ 234
Opywanie ...................................................................................................................... 236
Dlaczego elementy pywajce nie generuj wysokoci? ............................................... 238
Osadzanie obrazw w kodzie XHTML ......................................................................... 240

Rozdzia 25. Tabele ......................................................................................... 243

Obramowanie i czenie obramowania .......................................................................... 244
Podstawowe formatowanie komrek i caej tabeli ........................................................ 246
Nagwki kolumn i nagwki wierszy ........................................................................... 248
Podpis i opis tabeli ......................................................................................................... 250
Tabele regularne i nieregularne ..................................................................................... 252
Nagwek, stopka i tre tabeli ...................................................................................... 254
Kolumny tabeli .............................................................................................................. 257
Tabele XHTML podsumowanie ............................................................................... 261

Rozdzia 26. Odsyacze .................................................................................... 263

Spis treci w postaci listy numerowanej bd wypunktowanej ........................................ 265
Style CSS witryny z hiperczami ................................................................................. 266
Atrybut title .................................................................................................................... 267
Odsyacze do rnych typw plikw ............................................................................. 267
Odsyacze wskazujce strony w internecie ................................................................... 268
Odsyacze wewntrzne .................................................................................................. 269
Obrazy jako odsyacze ................................................................................................... 271
Style CSS odsyaczy ...................................................................................................... 272
Otwieranie nowych okien .............................................................................................. 274

Rozdzia 27. Projekty ....................................................................................... 277

Projekt 27.1. Obrazy tworzone przy uyciu elementu pre ............................................ 277
Projekt 27.2. ASCII Art ................................................................................................. 278
Projekt 27.3. Emotikony ................................................................................................ 279
Projekt 27.4. Cytaty ze specyfikacji HTML i XHTML ................................................ 280
Projekt 27.5. Bibliografia .............................................................................................. 283
Projekt 27.6. Ksika The Wonderful Wizard of Oz .................................................... 284
Projekt 27.7. Instrukcja wykonywania zrzutw ekranu ................................................ 285
Projekt 27.8. Jak pisa na klawiaturze w jzyku rosyjskim? ......................................... 286
Projekt 27.9. Metody definiowania miejsc geometrycznych punktw ......................... 286
Projekt 27.10. Artyku HTML czy XHTML? ............................................................ 288
Projekt 27.11. Zabytki Lublina ...................................................................................... 291
Projekt 27.12. Literackie Nagrody Nobla ...................................................................... 293
Projekt 27.13. Tabela Orange Ekstraklasy w sezonie 2006/2007 ................................. 295
Projekt 27.14. Kod paskowy rezystorw ....................................................................... 296
Projekt 27.15. Tatry ....................................................................................................... 297
Projekt 27.16. LaTeX przykady .............................................................................. 298
Projekt 27.17. Janko Muzykant ..................................................................................... 299
Projekt 27.18. Favelety .................................................................................................. 300

Cz V

HTML, XHTML oraz CSS. Praktyczne projekty

Ta ............................................................................. 301

Rozdzia 28. Waciwoci CSS dotyczce ta .................................................... 303

Rozdzia 29. FIR zamiana obrazw na teksty ................................................ 315
Rozdzia 30. Udawane kolumny ........................................................................ 321
Rozdzia 31. Przyciski rollover w CSS ............................................................... 331
Wymiana obrazu ta ....................................................................................................... 331
Przycisk z etykiet tekstow .......................................................................................... 332
Pozycjonowanie wzgldnie bezwzgldne ..................................................................... 334

Rozdzia 32. Kafelkowanie ............................................................................... 343

Rozdzia 33. Projekty ....................................................................................... 349
Projekt 33.1. Wisawa Szymborska: Mio szczliwa ................................................ 349
Projekt 33.2. Wiersze Marii Pawlikowskiej-Jasnorzewskiej ......................................... 350
Projekt 33.3. Ogoszenie ................................................................................................ 350
Projekt 33.4. Jack London: The Call of the Wild .......................................................... 351
Projekt 33.5. Fraszki ...................................................................................................... 352

Cz VI Zagadnienia dalsze ...................................................... 355

Rozdzia 34. Struktura funkcjonalna witryny ..................................................... 357
Rozdzia 35. Uzupenienie wiadomoci na temat CSS ........................................ 361
Selektory ........................................................................................................................ 361
Importowanie stylw ..................................................................................................... 366
Dziedziczenie ................................................................................................................. 367
Style do druku ................................................................................................................ 368
Projekt 35.1 .................................................................................................................... 370

Rozdzia 36. Kolejno elementw w kodzie XHTML ......................................... 371

Zmiana kolejnoci kolumn pionowych .......................................................................... 372
Zmiana kolejnoci poziomych pasw ............................................................................ 376

Rozdzia 37. Atrybuty XHTML ........................................................................... 379

Atrybuty zasadnicze ...................................................................................................... 379
Atrybuty jzykowe ........................................................................................................ 380
Zdarzenia ....................................................................................................................... 380
Atrybuty oglne ............................................................................................................. 381
Atrybuty dotyczce aktywnego punktu ......................................................................... 382

Rozdzia 38. Formularze ................................................................................... 385

Atrybuty formularza ...................................................................................................... 386
Kontrolki formularza ..................................................................................................... 388
Atrybuty oglne kontrolek formularza .......................................................................... 389
Zdarzenia dotyczce kontrolek ...................................................................................... 390
Elementy input ............................................................................................................... 391
Przyciski zatwierdzajce i resetujce formularz ............................................................ 391
Wiersz wprowadzania danych ....................................................................................... 393
Pole hasa ....................................................................................................................... 393
Pola wyboru ................................................................................................................... 394
Wykluczajce pola wyboru ........................................................................................... 395
Kontrolki ukryte ............................................................................................................ 396
Przyciski ........................................................................................................................ 396

Spis treci

9
Kontrolka wyboru pliku ................................................................................................. 397
Obraz ............................................................................................................................. 397
Element button ............................................................................................................... 398
Listy ............................................................................................................................... 399
Pole tekstowe ................................................................................................................. 401
Grupowanie i podpisywanie kontrolek formularza ....................................................... 402
Podsumowanie ............................................................................................................... 404

Rozdzia 39. Powizania dokumentw .............................................................. 405

Ikona strony WWW ....................................................................................................... 405
Nastpny, poprzedni oraz spis treci ............................................................................. 408
Alternatywne wersje dokumentu ................................................................................... 408
Projekt 39.1 .................................................................................................................... 409

Rozdzia 40. Element meta dodatkowe informacje na temat strony WWW ..... 413
Skadnia elementu meta ................................................................................................. 414
Znaczenie elementu meta .............................................................................................. 414
Dwa rodzaje elementw meta ........................................................................................ 415
Jakie metainformacje umieszcza w witrynach? ........................................................... 415
Kodowanie znakw ................................................................................................. 416
Jzyk, w ktrym przygotowano dokument ............................................................. 416
Autor, prawa autorskie i firma ................................................................................ 417
Sowa kluczowe i opis ............................................................................................. 417
Roboty ..................................................................................................................... 418
Data powstania i wanoci dokumentu ................................................................... 419
Przechowywanie stron WWW przez porednikw ................................................. 419
Skrypty i style domylny jzyk .......................................................................... 420
Metainformacje w kilku jzykach ........................................................................... 420
Przekierowania ........................................................................................................ 421
Rnoci .................................................................................................................. 421

Rozdzia 41. Dostpno strony WWW ............................................................. 423

Kilka prostych zasad ...................................................................................................... 423
Stosuj atrybut lang ................................................................................................... 424
Definiuj skrty i skrtowce ..................................................................................... 424
Okrelaj powizania midzy poszczeglnymi podstronami witryny ...................... 424
Tre umieszczaj jako pierwsz .............................................................................. 424
Pamitaj o atrybutach alt ......................................................................................... 425
Okrelaj tytuy hiperczy ....................................................................................... 425
Twrz czytelne tabele .............................................................................................. 425
Stosuj skalowalne czcionki ..................................................................................... 426
Etykietuj kontrolki formularzy ................................................................................ 426
Nie otwieraj nowych okien ..................................................................................... 426
Nie uywaj przekierowa meta refresh ................................................................... 426

Rozdzia 42. HTML czy XHTML? ....................................................................... 427

XHTML zgodny z HTML ............................................................................................. 427
Wielko liter .......................................................................................................... 427
Elementy puste i niepuste ........................................................................................ 429
Znaczniki opcjonalne .............................................................................................. 429
Cudzysw obejmujcy wartoci atrybutw ........................................................... 430
Minimalizacja atrybutw logicznych ...................................................................... 431
Identyfikator fragmentu ........................................................................................... 431
Style i skrypty .......................................................................................................... 431
Encje ........................................................................................................................ 432

10

HTML, XHTML oraz CSS. Praktyczne projekty

Dokumenty HTML/XHTML w sieci WWW ................................................................ 432
Content-type ............................................................................................................ 433
Czy to HTML, czy XHTML? ................................................................................. 435
Jak przegldarka traktuje dokument HTML, a jak XHTML? ................................. 435
Po czym przegldarka rozpoznaje jzyk dokumentu? ............................................ 437
Nagwek Content-type dokumentu HTML oraz XHTML .................................... 437
Problemy z Internet Explorerem ............................................................................. 437
Strona XHTML wysyana jako application/xhtml+xml ................................................ 438
Zmiana nagwkw wysyanych przez serwer Apache .......................................... 438
Wysyanie nagwka HTTP w PHP ........................................................................ 438
Cztery proste zasady ...................................................................................................... 438
HTML czy XHTML? .................................................................................................... 439

Rozdzia 43. Semantyczny XHTML .................................................................... 441

Witryna WWW widziana oczami czowieka i robota ................................................... 441
Semantyczny Web ......................................................................................................... 442
Semantyka kodu XHTML ............................................................................................. 442
Problemy semantyczne XHTML i CSS ......................................................................... 444

Dodatki ..................................................................................... 449

Dodatek A Instalacja oprogramowania ........................................................... 451
Skorowidz ................................................................................... 465

Rozdzia 7.

Kaskadowe
arkusze stylw
Struktura a wygld dokumentw HTML
Wygld witryn WWW zaley od dwch czynnikw: kodu strony napisanego w jzyku
XHTML oraz formatu nadawanego przez przegldark rnym elementom XHTML.
Struktur i zawarto dokumentu opisujemy, korzystajc z elementw XHTML, m.in.
akapitw (p) i nagwkw (h1, h2), a format elementw definiujemy w jzyku CSS
(ang. Cascading Style Sheets kaskadowe arkusze stylw).
Tworzc witryn WWW, musimy wic opisa:
struktur i zawarto strony (jzyk XHTML),
format elementw (jzyk CSS).

W przypadku braku stylw przegldarka zastosuje style domylne, ktre zazwyczaj s

do ubogie.
Oddzielajc definicj formatu elementw od samej zawartoci strony otrzymamy dokument, ktrego format bdzie niezaleny od zawartoci. Gwn korzyci takiego
rozwizania jest to, e wygld dokumentu moemy modyfikowa, nie zmieniajc jego
treci (czyli kodu XHTML).

Cz I Elementarz

90

Doczanie stylw do dokumentu

Style CSS moemy doczy do dokumentu XHTML na trzy sposoby:
jako style zewntrzne,
jako style wewntrzne,
stosujc atrybut style.

W pierwszym przypadku style s zapisane w osobnym pliku. W drugim style znajduj sie w nagwku strony WWW, a wic pomidzy znacznikami <head> oraz </head>.
W trzecim style pojawiaj si przy konkretnych elementach XHTML w treci strony,
czyli pomidzy znacznikami <body> oraz </body>.

Style zewntrzne
Style zewntrzne zapisujemy w osobnym pliku. Plik ze stylami ma zazwyczaj rozszerzenie .css. Tak zdefiniowane style doczamy do dokumentu XHTML, stosujc element link:
<link rel="stylesheet" href="style.css" type="text/css" />

Style zewntrzne <link ... /> Ctrl+B+Z, Ctrl+B+S

Podany element docza do strony WWW style zapisane w pliku style.css.

Witryna skada si wic z dwch plikw: index.html oraz style.css. Listing 7.1 przedstawia przykadowy plik index.html, a 7.2 zawarto pliku style.css. W kodzie XHTML
pojawia si element link z atrybutem href. Wartoci atrybutu href jest nazwa pliku
ze stylami (w przykadzie: style.css).
Listing 7.1. Kod XHTML strony WWW stosujcej style zewntrzne (plik index.html)
<!DOCTYPE ...>
<html ...>
<head>
<title>Style zewntrzne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>WITAJ</h1>
</body>
</html>

Rozdzia 7. Kaskadowe arkusze stylw

91

Listing 7.2. Style CSS (plik style.css)

h1 {
margin: 20px;
background: blue;
color: white;
border: 4px solid black;
text-align: center;
}

Zalet takiego rozwizania jest to, e w jednym miejscu moesz modyfikowa wygld wszystkich podstron witryny. Co wicej, tak wykonana witryna bdzie zajmowaa mniej miejsca i szybciej si wczyta. Style zostan pobrane z serwera jeden jedyny raz. Kosztem doczenia stylw do witryny jest jedynie element link dodany na
kadej podstronie.
Ponadto style zawarte w zewntrznym pliku mog zawiera dowolne znaki, take <, >
czy &., nie powodujc adnych komplikacji1.
To jest najlepsza metoda formatowania wygldu witryny. Naley j stosowa w odniesieniu do wikszoci witryn przeznaczonych do publikacji w internecie.

Style wewntrzne
Definicja stylw wewntrznych wykorzystuje element style:
<style type="text/css">
...
tutaj definicja stylw
...
</style>

Element ten umieszczamy w nagwku witryny WWW.

Style wewntrzne <style ...>...</style> Ctrl+B+W

Listing 7.3 przedstawia kod przykadowej strony WWW, ktra stosuje style wewntrzne. W nagwku witryny pojawia si element style, zawierajcy definicj stylu nagwka h1. W treci witryny, pomidzy znacznikami <body> oraz </body>, wystpuje
element h1, ktrego wygld zostanie zmieniony zgodnie ze stylami podanymi wewntrz
elementu style.

Specyfikacja XHTML 1.0, punkt C.4.

Cz I Elementarz

92
Listing 7.3. Style wewntrzne

<!DOCTYPE ...>
<html ...>
<head>
<title>Style wewntrzne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 {
margin: 20px;
background: blue;
color: white;
border: 4px solid black;
text-align: center;
}
</style>
</head>
<body>
<h1>WITAJ</h1>
</body>
</html>

Przykad ten skada si z jednego pliku: index.html.

Zalet tego pliku jest to, e w jednym miejscu pojawiaj si style i kod XHTML. Jeli
wykonasz na takiej witrynie operacj podgldu rda2, to ujrzysz i kod XHTML, i style
CSS3. Ponadto tak wykonana witryna bdzie poprawnie wygldaa (tj. bdzie ozdobiona stylami), gdy zostanie otworzona wewntrz aplikacji. Na przykad, jeli spakujesz
kilka tak wykonanych stron, po czym otworzysz spakowane archiwum programem
archiwizujcym, witryna bdzie poprawnie wygldaa po otworzeniu z wntrza archiwum (bez wypakowywania).
Wad tego rozwizania jest rozmiar witryny: kada podstrona projektu bdzie zawieraa
komplet stylw. Ponadto, jeli zechcesz wprowadzi zmian, ktra obejmie wszystkie
podstrony witryny, bdziesz musia zmieni style w kadym pliku z osobna.
W praktyce style wewntrzne stosuj w odniesieniu do dokumentw, ktre s pojedynczymi plikami (np. opisy programw umieszczane w spakowanych archiwach).

Atrybut style
Trzecia metoda definiowania stylw wykorzystuje atrybut style. Atrybut ten moe
towarzyszy niemal kademu elementowi XHTML. Zmiana formatu akapitu ma posta:
<p style="width: 300px; margin: 20px; background: blue;">Witaj</p>
2

Opcja Widok/rdo w przegldarce.

Usprawnia to m.in. prowadzenie wicze z jzykw XHTML oraz CSS. Nauczyciel przygotowuje
przykad i umieszcza go w sieci. Uczniowie po wykonaniu operacji podgldu rda ujrz kompletny
kod XHTML oraz CSS.

Rozdzia 7. Kaskadowe arkusze stylw

93

Element style moe by przydatny w specyficznych okolicznociach. Na przykad

wtedy, gdy nie masz uprawnie do modyfikowania plikw CSS na serwerze, a moesz
modyfikowa fragment pliku XHTML. Sytuacja taka moe pojawi si na przykad
w systemie CMS. Uytkownik nie ma prawa modyfikowa adnych plikw (ani XHTML,
ani CSS), ale moe wprowadza do bazy danych wpisy zawierajce oprcz kodu
XHTML atrybut style.
W przypadku witryny, w ktrej masz dostp do pliku CSS, rozwizanie takie nie ma
sensu. Niektrzy twierdz nawet, e atrybut style jest porwnywalny z dawno wycofanym elementem font4.
Uycie stylw wewntrznych w odniesieniu do elementu h1 pokazuje listing 7.4.
Listing 7.4. Atrybut style
<!DOCTYPE ...>
<html ...>
<head>
<title>Atrybut style</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 style="margin: 20px; background: blue; color: white;
border: 4px solid black; text-align: center;">WITAJ</h1>
</body>
</html>

Rysunek 7.1 przedstawia wygld opisanej witryny. Trzy podane przykady: pierwszy ze
stylami zewntrznymi, drugi stosujcy style wewntrzne i trzeci wykorzystujcy atrybut
style, maj identyczny wygld.
Rysunek 7.1.
Witryna
stosujca style

Henri Sivonen: HTML Syntax Checker in PHP, http://hsivonen.iki.fi/html-syntax-checker/.

Cz I Elementarz

94

Domylny jzyk stylw

Obecnie style dokumentw XHTML s opisywane wycznie w jzyku CSS. Jest to
jzyk domylny stosowany przez wszystkie przegldarki.
O jzyku stylw mwi atrybut type="text/css" zawarty w elementach link (style
zewntrzne):
<link rel="stylesheet" href="style.css" type="text/css" />

oraz style (style wewntrzne):

<style type="text/css">
...
</style>

Warto text/css ustala, e style s zapisane w jzyku CSS.

Korzystajc z atrybutu style, nie wskazujemy w aden sposb, w jakim jzyku opisano style:
<p style="...">Witaj</p>

Domylnym jzykiem i w tym przypadku jest CSS. Jeli jednak chcesz by dokadny,
to jzyk stylw moesz wskaza, umieszczajc w nagwku witryny element meta:
<meta http-equiv="Content-Style-Type" content="text/css" />

Ujmowanie stylw wewntrznych

w komentarz HTML
W okresie gdy implementacja stylw CSS zaczynaa si pojawia w przegldarkach,
tj. w latach 1995 2000, element style sprawia pewien kopot. Jeli przegldarka go
nie rozumiaa, to moga podan w nim zawarto wywietli na stronie wraz z tekstem.
Zabezpieczeniem przed takim niepodanym dziaaniem byo stosowanie komentarzy
w kodzie HTML. Ca zawarto elementu style umieszczano w komentarzu:

PRZYKAD NIEPOPRAWNY
<style type="text/css">
<!-p {
font-family: Georgia, serif;
}
-->
</style>

Rozdzia 7. Kaskadowe arkusze stylw

95

Obecnie takie postpowanie nie tylko nie przynosi adnej korzyci, ale moe powodowa, e style nie bd dziaay5. Powyszy przykad naley zapisywa jako:
<style type="text/css">
p {
font-family: Georgia, serif;
}
</style>

wiczenie 7.1
Wykonaj witryn WWW z tekstem Lorem ipsum. Stosujc style zewntrzne, sformatuj
akapity tak, by miay duy margines oraz niebiesk, wytuszczon czcionk Georgia
podwjnej wielkoci. Wykorzystaj style z listingu 7.5.
Listing 7.5. Style do wiczenia 7.1
p {
margin: 100px;
font-family: Georgia, serif;
font-size: 200%;
font-weight: bold;
color: blue;
}

wiczenie 7.2
Wykonaj witryn WWW z tekstem Lorem ipsum. Zdefiniuj style identyczne jak w wiczeniu 7.1. Przygotuj rozwizanie zawarte w jednym pliku (style wewntrzne stosujce
element style).

wiczenie 7.3
Wykonaj witryn WWW z tekstem Lorem ipsum. Style podane na listingu 7.5 przypisz
do elementu p, wykorzystujc atrybut style.

Specyfikacja XHTML 1.0, rozdzia C.4.