Po prostu HTML, XHTML

i CSS. Wydanie VI
Autor: Elizabeth Castro
Tumaczenie: Piotr Rajca
ISBN: 978-83-246-0840-9
Tytu oryginau: HTML, XHTML, and CSS, Sixth
Edition: Visual QuickStart Guide (6th Edition)
Format: B5, stron: okoo 500
Stwrz wasn witryn WWW
Poznaj znaczniki jzyka HTML
Zdefiniuj kaskadowe arkusze stylw
Przetestuj witryn i opublikuj j na serwerze

Jzyk HTML i jego najnowsze wcielenie, okrelane nazw XHTML, to podstawowy

budulec witryn WWW. Stosujc odpowiednie znaczniki, moemy umieszcza
na stronach tekst i grafik, tworzy hipercza oraz osadza elementy multimedialne
i interaktywne. Technologia CSS (kaskadowych arkuszy stylw) pozwala na przypisanie
do znacznikw jzyka HTML definicji formatowania, dziki czemu zmiana kolorystyki
witryny bd kroju czcionki wymaga jedynie modyfikacji pliku ze stylami. Poznanie tego
jzyka i zasad korzystania z kaskadowych arkuszy stylw jest niezbdne do tworzenia
wasnych witryn WWW, poniewa nawet tak bardzo popularne dzi wizualne narzdzia
generuj kod, ktry czsto wymaga rcznych poprawek.
Ksika Po prostu HTML, XHTML i CSS. Wydanie VI to kolejna edycja bestsellerowego
poradnika, dziki ktremu tajniki tworzenia witryn WWW poznay tysice czytelnikw
na caym wiecie. W wydaniu VI autorka uwzgldnia najnowsze specyfikacje jzyka
HTML oraz technologii CSS. Czytajc t ksik, dowiesz si, w jaki sposb
wykorzystywa znaczniki do tworzenia elementw stron internetowych oraz osadzania
na nich grafiki i obiektw interaktywnych. Nauczysz si definiowa hipercza
oraz wykorzystywa kaskadowe arkusze stylw do formatowania tekstu i tabel
oraz okrelania kolorystyki stron. Przeczytasz take o testowaniu witryn, publikowaniu
ich na serwerach oraz optymalizowaniu pod ktem wyszukiwarek internetowych.

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

Struktura dokumentw HTML i witryn WWW

Wprowadzanie i formatowanie tekstu
Przygotowywanie grafiki na strony WWW
Umieszczanie elementw graficznych w dokumentach HTML
Tworzenie hiperczy
Definiowanie stylw CSS
Formatowanie z wykorzystaniem stylw
Tworzenie list i tabel
Elementy formularzy HTML
Osadzanie na stronie elementw multimedialnych
Sprawdzanie poprawnoci kodu HTML
Publikacja strony

Docz do grona webmasterw, ktrzy poznali jzyk HTML dziki tej ksice

Spis treci

Wstp

15

Internet, WWW oraz HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Otwarty, jednak nie identyczny . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wojny przegldarek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Denie do wprowadzania standardw . . . . . . . . . . . . . . . . . . . . . . . .
CSS a moliwoci przegldarek . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XHTML czy HTML: czego naley uywa? . . . . . . . . . . . . . . . . . . . . . .
Kilka sw o niniejszej ksice . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Co si zmienio w szstym wydaniu? . . . . . . . . . . . . . . . . . . . . . . . . .
Witryna WWW autorki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 1. Elementy tworzce strony WWW

16
17
18
19
23
24
26
27
29

31

Rozdzia 2. Praca z dokumentami (X)HTML

49

Projektowanie witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie nowej strony WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zapisywanie stron WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kilka sw o programie Microsoft Word i stronach WWW . . . . . . . . . . . . . .
Okrelanie strony domylnej (domowej) . . . . . . . . . . . . . . . . . . . . . . .
Edycja stron WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Organizowanie plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wywietlanie stron w przegldarce . . . . . . . . . . . . . . . . . . . . . . . . . .
Czerpanie inspiracji od innych . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 3. Podstawowa struktura dokumentw (X)HTML

Rozpoczynanie strony . . . . . . . . . . .
Tworzenie podstawowej struktury kodu .
Okrelanie sposobu kodowania . . . . . .
Nadawanie tytuu . . . . . . . . . . . . .
Tworzenie nagwkw sekcji . . . . . . .

Spis treci

Znaczniki: elementy, atrybuty oraz wartoci . . . . . . . . . . . . . . . . . . . . . . 32

Tekstowa zawarto stron WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
cza, obrazki oraz inna zawarto nie bdca tekstem . . . . . . . . . . . . . . . . 37
Nazwy plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Adresy URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
HTML a XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Wersje, rodzaje oraz DOCTYPE . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Domylny sposb wywietlania (X)HTML . . . . . . . . . . . . . . . . . . . . . . 48

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

50
51
52
54
55
56
57
58
59

61
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

62
64
65
66
67

Spis treci
Rozpoczynanie nowego akapitu . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nazywanie elementw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Podzia strony na dziay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie obszarw wewntrzwierszowych . . . . . . . . . . . . . . . . . . . . . .
Tworzenie nowych wierszy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dodawanie komentarzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nadawanie nazw elementom stron . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 4. Podstawy formatowania tekstu

Spis treci

Tworzenie tekstu pogrubionego oraz kursywy . . . . . . . . . . . . . . . . . . . . .

Zmiana wielkoci tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stosowanie czcionki o staej szerokoci znakw . . . . . . . . . . . . . . . . . . . .
Stosowanie tekstu preformatowanego . . . . . . . . . . . . . . . . . . . . . . . . .
Cytaty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie indeksw dolnych i grnych . . . . . . . . . . . . . . . . . . . . . . . .
Oznaczanie zmodyfikowanego tekstu . . . . . . . . . . . . . . . . . . . . . . . . .
Wyjanianie skrtw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wyrodkowywanie zawartoci strony . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 5. Obrazy

68
69
70
71
72
73
74

75
76
77
78
80
81
83
84
85
86

87

O obrazach tworzonych na potrzeby stron WWW . . . . . . . . . . . . . . . . . . 88

Zdobywanie obrazw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Wybr programu do edycji grafiki . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Polecenie Zapisz dla Weba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Wstawianie ilustracji na stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Tekst zastpczy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Okrelanie wymiarw obrazu w celu jego szybszego wywietlenia . . . . . . . . . . 99
Skalowanie ilustracji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Zmniejszanie wymiarw obrazu . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Otaczanie obrazw tekstem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Zakoczenie otaczania tekstem . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Zwikszanie odstpu wok obrazw . . . . . . . . . . . . . . . . . . . . . . . . . 108
Wyrwnywanie obrazkw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Poziome linie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Dodawanie ikony witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Rozdzia 6. cza
Tworzenie czy do innych stron . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie odnonikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
cza wykorzystujce odnoniki . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie cza do wybranego okna . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelenie domylnego okna . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie innych rodzajw czy . . . . . . . . . . . . . . . . . . . . . . . . . . .

113
114
116
117
118
119
120

Spis treci
Definiowanie klawiszy skrtw dla czy . . . . . . . . . . . . . . . . . . . . . . .
Okrelenie kolejnoci czy dla klawisza TAB . . . . . . . . . . . . . . . . . . . .
Zastosowanie obrazw do tworzenia czy . . . . . . . . . . . . . . . . . . . . . .
czenie miniatur z obrazami . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Podzia obrazka na obszary przypisane do rnych czy . . . . . . . . . . . . . .
Tworzenie map odnonikw obsugiwanych po stronie klienta . . . . . . . . . . .

Rozdzia 7. Elementy arkuszy stylw

Tworzenie reguy stylu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dodawanie komentarzy do arkuszy stylw . . . . . . . . . . . . . . . . . . . . . .
Kaskada: gdy reguy koliduj ze sob . . . . . . . . . . . . . . . . . . . . . . . . .
Wartoci waciwoci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 8. Stosowanie plikw arkuszy stylw

Rozdzia 9. Definiowanie selektorw

Tworzenie selektorw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wybr elementw na podstawie nazwy . . . . . . . . . . . . . . . . . . . . . . .
Wybieranie elementu na podstawie klasy lub identyfikatora . . . . . . . . . . . .
Wybieranie elementw na podstawie kontekstu . . . . . . . . . . . . . . . . . . .
Wybieranie fragmentw elementu . . . . . . . . . . . . . . . . . . . . . . . . . .
Wybieranie czy na podstawie ich stanu . . . . . . . . . . . . . . . . . . . . . . .
Wybieranie elementw na podstawie atrybutw . . . . . . . . . . . . . . . . . . .
Definiowanie grup elementw . . . . . . . . . . . . . . . . . . . . . . . . . . . .
czenie selektorw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 10. Formatowanie przy wykorzystaniu stylw

Wybr czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie czcionek alternatywnych . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie czcionki pochyej (kursywy) . . . . . . . . . . . . . . . . . . . . . . . .
Pogrubianie czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie wielkoci czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie wysokoci linii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Jednoczesne okrelanie wszystkich parametrw czcionki . . . . . . . . . . . . . .

129
130
131
132
135

139
140
141
142
144
145
147
148
150
152

Spis treci

Tworzenie zewntrznego arkusza stylw . . . . . . . . . . . . . . . . . . . . . . .

Doczanie zewntrznego arkusza stylw . . . . . . . . . . . . . . . . . . . . . .
Udostpnianie alternatywnych arkuszy stylw . . . . . . . . . . . . . . . . . . . .
Tworzenie wewntrznego arkusza stylw . . . . . . . . . . . . . . . . . . . . . . .
Importowanie zewntrznych arkuszy stylw . . . . . . . . . . . . . . . . . . . . .
Stosowanie arkuszy stylw dla rnych mediw . . . . . . . . . . . . . . . . . . .
Lokalne stosowanie stylw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Znaczenie pooenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Czerpanie inspiracji od innych . . . . . . . . . . . . . . . . . . . . . . . . . . . .

122
123
124
125
126
127

153
154
155
156
157
160
162
163
164
165

167
168
169
170
171
172
175
176

Spis treci
Definiowanie koloru tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zmiana koloru ta tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kontrola odstpw pomidzy wyrazami i literami . . . . . . . . . . . . . . . . . .
Dodawanie wci akapitowych . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Parametry odstpw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wyrwnywanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zmiana wielkoci liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wykorzystanie kapitalikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dekorowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 11. Okrelanie ukadu strony za pomoc stylw

187

Spis treci

Okrelanie struktury strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Model pudekowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modyfikowanie ta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie wysokoci i szerokoci elementu . . . . . . . . . . . . . . . . . . . . .
Okrelanie marginesw wok elementu . . . . . . . . . . . . . . . . . . . . . . .
Dodawanie wypenienia wok elementu . . . . . . . . . . . . . . . . . . . . . .
Przesuwanie elementw wzgldem ich naturalnego pooenia . . . . . . . . . . .
Bezwzgldne rozmieszczanie elementw . . . . . . . . . . . . . . . . . . . . . .
Okrelanie staego pooenia elementu w oknie przegldarki . . . . . . . . . . . .
Otaczanie elementw tekstem . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kontrola sposobu otaczania elementw . . . . . . . . . . . . . . . . . . . . . . .
Pozycjonowanie elementw w trzecim wymiarze . . . . . . . . . . . . . . . . . .
Tworzenie obramowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modyfikacja wskanika myszy . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie sposobu wywietlania zawartoci elementu . . . . . . . . . . . . . . .
Wyrwnywanie elementw w pionie . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 12. Tworzenie dynamicznych efektw przy uyciu stylw

Wywietlanie i ukrywanie elementw .
Tworzenie podmienianych przyciskw .
Tworzenie wyskakujcych elementw .
Tworzenie rozwijalnych menu . . . . .
Zastpowanie nagwkw obrazami . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

188
189
190
192
195
197
199
200
202
204
205
206
207
210
211
212

213
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

Rozdzia 13. Style dla urzdze kieszonkowych

Mobilizacja kontra miniaturyzacja . . . . . . . . . . . . . . . . . . . . . . . . . .
Rzut oka na wasn witryn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
XHTML i CSS dla komputerw kieszonkowych . . . . . . . . . . . . . . . . . . .
Tworzenie arkuszy stylw dla komputerw przenonych . . . . . . . . . . . . . .

177
178
179
180
181
182
183
184
185

214
216
217
218
220

223
224
225
226
228

Spis treci
Ukrywanie niepotrzebnych elementw . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie i stosowanie nagwka graficznego . . . . . . . . . . . . . . . . . . . .
Dodawanie czy prowadzcych na pocztek strony . . . . . . . . . . . . . . . . .
Poprawa sposobu prezentacji strony . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 14. Arkusze stylw przeznaczone do drukowania stron

Stosowanie arkuszy stylw przeznaczonych dla konkretnych rodzajw mediw . .
Czym rni si style przeznaczone do drukowania . . . . . . . . . . . . . . . . .
Kontrola dzielenia dokumentw na strony . . . . . . . . . . . . . . . . . . . . . .
Drukowanie adresw URL czy . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kontrola wdw i sierot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 15. Listy

Rozdzia 16. Tabele

Projektowanie ukadu strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie prostej tabeli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dodawanie krawdzi tabeli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie szerokoci tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wyrwnywanie tabeli do rodka strony . . . . . . . . . . . . . . . . . . . . . . . .
Otaczanie tabeli tekstem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
czenie tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wyrwnywanie zawartoci komrek . . . . . . . . . . . . . . . . . . . . . . . . .
Zmiana koloru ta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kontrola odstpw pomidzy komrkami i wewntrz nich . . . . . . . . . . . . .
czenie komrek lecych w ssiednich kolumnach . . . . . . . . . . . . . . . .
czenie komrek w ssiednich wierszach . . . . . . . . . . . . . . . . . . . . . .
Podzia tabeli na grupy kolumn . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Podzia tabeli na poziome sekcje . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wybr linii do wywietlania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kontrola amania wierszy w komrce . . . . . . . . . . . . . . . . . . . . . . . . .
Przyspieszenie wywietlania tabeli . . . . . . . . . . . . . . . . . . . . . . . . . .

233
234
235
237
238
239

241
242
244
245
246
248
249
250
251

253
254
255
256
259
262
263
264
266
269
271
274
275
276
278
279
281
282

Spis treci

Tworzenie list wypunktowanych i uporzdkowanych . . . . . . . . . . . . . . . .

Okrelanie ksztatu znacznikw (punktw) . . . . . . . . . . . . . . . . . . . . . .
Okrelanie pocztkowej wartoci numeracji punktw . . . . . . . . . . . . . . . .
Stosowanie niestandardowych znacznikw . . . . . . . . . . . . . . . . . . . . . .
Okrelanie miejsca wywietlania znacznikw . . . . . . . . . . . . . . . . . . . .
Okrelanie wszystkich waciwoci listy w jednym miejscu . . . . . . . . . . . . .
Tworzenie list definicji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie wygldu list zagniedonych . . . . . . . . . . . . . . . . . . . . . . .

229
230
231
232

Spis treci

Spis treci

Rozdzia 17. Formularze

Tworzenie formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Przetwarzanie formularzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Przesyanie danych poczt elektroniczn . . . . . . . . . . . . . . . . . . . . . . .
Organizacja elementw formularzy . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie pl tekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie pl hasa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Formalne nadanie etykiet elementom formularzy . . . . . . . . . . . . . . . . . .
Tworzenie przyciskw opcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rozwijalne listy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie pl wyboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Obszary tekstowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Umoliwienie uytkownikom przesyania plikw . . . . . . . . . . . . . . . . . .
Dodawanie pl ukrytych do formularzy . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie przycisku przesyajcego . . . . . . . . . . . . . . . . . . . . . . . . .
Czyszczenie zawartoci formularza . . . . . . . . . . . . . . . . . . . . . . . . . .
Stosowanie obrazw do przesyania danych . . . . . . . . . . . . . . . . . . . . .
Okrelenie kolejnoci klawisza TAB w formularzach . . . . . . . . . . . . . . . . .
Definiowanie klawiszy skrtw . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dezaktywacja elementw formularza . . . . . . . . . . . . . . . . . . . . . . . . .
Uniemoliwienie modyfikacji elementw . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 18. Multimedia

Kilka sw o pluginach i odtwarzaczach . . . . . . . . . . . . . . . . . . . . . . .
Zdobywanie odtwarzaczy dla uytkownikw . . . . . . . . . . . . . . . . . . . . .
Pobieranie plikw multimedialnych . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie czy do plikw multimedialnych . . . . . . . . . . . . . . . . . . . . .
Osadzanie w stronach filmw QuickTime . . . . . . . . . . . . . . . . . . . . . .
Osadzanie filmw QuickTime dla wszystkich przegldarek oprcz IE . . . . . . .
Osadzanie filmw QuickTime tak, by dziaay we wszystkich przegldarkach . . .
Zastosowania JavaScriptu do odtwarzania filmw . . . . . . . . . . . . . . . . . .
Skalowanie filmw QuickTime . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zmiana koloru ta filmw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Odtwarzanie filmw QuickTime w ptli . . . . . . . . . . . . . . . . . . . . . . .
Udostpnianie zwiastuna filmu . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dodawanie atrybutw do kolejnych filmw . . . . . . . . . . . . . . . . . . . . .
Udostpnianie kolejnych filmw . . . . . . . . . . . . . . . . . . . . . . . . . . .
Umieszczanie plikw MP3 na stronach WWW . . . . . . . . . . . . . . . . . . .
Osadzanie plikw Windows Media, cz I . . . . . . . . . . . . . . . . . . . . .
Osadzanie plikw Windows Media, cz II . . . . . . . . . . . . . . . . . . . . .
Osadzanie plikw Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

283
284
286
288
290
292
293
294
295
296
298
299
300
301
302
304
306
308
309
310
311

313
314
315
316
317
319
322
324
326
328
329
330
331
332
333
334
336
338
339

Spis treci
Wywietlanie klipw wideo z witryn Google i YouTube . .
Doczanie apletw . . . . . . . . . . . . . . . . . . . . .
Osadzanie innych plikw multimedialnych . . . . . . . .
Tworzenie automatycznego pokazu slajdw . . . . . . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

Rozdzia 19. Skrypty

Wstawianie automatycznego skryptu . . . . . . . . . . . . . . . . . . . . . . . .
Wywoanie zewntrznego skryptu automatycznego . . . . . . . . . . . . . . . . .
Wyzwalanie skryptu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie przycisku, ktry wykonuje skrypt . . . . . . . . . . . . . . . . . . . . .
Dodawanie informacji zastpczych . . . . . . . . . . . . . . . . . . . . . . . . . .
Ukrywanie skryptu przed starszymi przegldarkami . . . . . . . . . . . . . . . . .
Ukrywanie skryptw przed analizatorami skadni XML . . . . . . . . . . . . . . .
Definiowanie domylnego jzyka skryptowego . . . . . . . . . . . . . . . . . . .

Rozdzia 20. Podstawy JavaScriptu

Dodawanie aktualnej daty i godziny . . . . . . . . . . . . . . . . . . . . . . . . .
Okrelanie wielkoci nowego okna przegldarki . . . . . . . . . . . . . . . . . . .
Podmienianie obrazkw po wskazaniu ich myszk . . . . . . . . . . . . . . . . . .
adowanie obrazkw do pamici podrcznej . . . . . . . . . . . . . . . . . . . .
Kilka sw o sposobach kodowania . . . . . . . . . . . . . . . . . . . . . . . . . .
Deklarowanie sposobu kodowania strony . . . . . . . . . . . . . . . . . . . . . .
Deklarowanie sposobu kodowania arkusza stylw . . . . . . . . . . . . . . . . . .
Zapisywanie strony przy wykorzystaniu odpowiedniego sposobu kodowania . . .
Edytowanie stron przy wykorzystaniu poprawnego sposobu kodowania . . . . . .
Dodawanie znakw nie nalecych do danego sposobu kodowania . . . . . . . . .
Okrelanie jzyka strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 22. Testowanie i uruchamianiestron WWW

Kilka technik testowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Najpierw rozwi najprostsze problemy . . . . . . . . . . . . . . . . . . . . . . .
Sprawdzanie prostych bdw: HTML . . . . . . . . . . . . . . . . . . . . . . . .
Sprawdzanie prostych bdw: XHTML . . . . . . . . . . . . . . . . . . . . . . .
Sprawdzanie prostych bdw: CSS . . . . . . . . . . . . . . . . . . . . . . . . .
Walidacja kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Testowanie stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gdy przegldarka wywietla kod . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kiedy obrazki nie s wywietlane . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rnice pomidzy poszczeglnymi przegldarkami . . . . . . . . . . . . . . . . .
Wci nie dziaa? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

345
346
347
348
350
351
352
353
354

355
356
357
359
361

363
364
367
369
370
371
372
375

377
378
379
380
381
382
384
385
387
388
389
391

11

Spis treci

Rozdzia 21. Symbole oraz inne znaki nie nalece do alfabetu angielskiego

340
342
343
344

Spis treci
Rozdzia 23. Publikowanie stron w sieci WWW

393

Jak znale serwer dla swoich stron . . . . . . . . . . . . . . . . . . . . . . . . .

Gdzie w Polsce opublikowa strony WWW? . . . . . . . . . . . . . . . . . . . . .
Onet.pl Republika WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rejestracja nazwy domeny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Przesyanie plikw na serwer . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Spis treci

Rozdzia 24. Zdobywanie uytkownikw

409

O sowach kluczowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Jawne podawanie sw kluczowych . . . . . . . . . . . . . . . . . . . . . . . . . .
Opis strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zarzdzanie innymi informacjami o stronie . . . . . . . . . . . . . . . . . . . . .
Jak unikn odwiedzin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zapobieganie archiwizacji strony . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie strony z adresami . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zastosowanie narzdzia Google Sitemaps . . . . . . . . . . . . . . . . . . . . . .
Dodawanie witryny do wyszukiwarki . . . . . . . . . . . . . . . . . . . . . . . . .
Jak zapewni wysok pozycj strony w wynikach wyszukiwania . . . . . . . . . .
Pisanie stron atwych do indeksowania . . . . . . . . . . . . . . . . . . . . . . . .
Inne sposoby reklamowania witryny . . . . . . . . . . . . . . . . . . . . . . . . .

Rozdzia 25. Kanay informacyjne i podcasting

Jak wyglda kana informacyjny . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Przygotowania do tworzenia kanau RSS . . . . . . . . . . . . . . . . . . . . . . .
Rozpoczynanie tworzenia kanau RSS . . . . . . . . . . . . . . . . . . . . . . . .
Zamieszczanie opisu witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dodawanie wpisw do kanau . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dodawanie zacznikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tworzenie podcastw obsugiwanych przez program iTunes . . . . . . . . . . . .
Weryfikacja poprawnoci kanau . . . . . . . . . . . . . . . . . . . . . . . . . . .
Przesyanie podcastu na serwer iTunes . . . . . . . . . . . . . . . . . . . . . . . .
Publikowanie kanau RSS na wasnej witrynie WWW . . . . . . . . . . . . . . .
Subskrybowanie kanau RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Subskrybowanie podcastw w programie iTunes . . . . . . . . . . . . . . . . . .

12

394
395
395
404
405
410
411
412
413
414
415
416
417
418
419
420
422

423
424
426
427
429
431
433
435
441
442
443
445
446

Spis treci
Dodatek A

Elementy i atrybuty (X)HTML

447

Elementy i atrybuty (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448

Dodatek B

Waciwoci i wartoci CSS

457

Waciwoci i wartoci CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458

Dodatek C

Zdarzenia wbudowane

465

Zdarzenia wbudowane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466

Dodatek D Symbole i znaki (X)HTML

467

Dodatek E

479

Wartoci szesnastkowe

Szesnastkowe odpowiedniki liczb w systemie dziesitnym . . . . . . . . . . . . . 480

Dodatek F

Narzdzia (X)HTML

481

Edytory (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482

Obrazy i grafika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Programy graficzne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485

Spis treci
13

Podstawowa struktura
dokumentw (X)HTML

W tym rozdziale przedstawione zostay najprostsze elementy dokumentw (X)HTML, konieczne

do stworzenia podstawowej struktury dokumentu.
Zawarto w nim te porady dotyczce tworzenia akapitw, nagwkw, nowych wierszy, wpisywania komentarzy i tworzenia kilku innych elementw stron.
Utworzenie przejrzystej i spjnej struktury znacznie
uatwia pniejsze okrelanie wygldu stron za pomoc kaskadowych arkuszy stylw.

Podstawowa struktura dokumentw (X)HTML

61

Rozdzia 3.

Rozpoczynanie strony
Kod strony naley rozpocz od deklaracji DOCTYPE
(patrz strona 53), okrelajcej typ uywanego jzyka HTML lub XHTML. Deklaracja ta informuje
przegldarki, czego mog si spodziewa na stronie,
i umoliwia poprawne dziaanie narzdzi sprawdzajcych poprawno kodu. Po wstawieniu tej deklaracji naley rozpocz waciwy kod dokumentu,
wpisujc otwierajcy znacznik html.

Aby stworzy stron

w przejciowej wersji jzyka HTML 4:

Rysunek 3.1. Oto deklaracja DOCTYPE dokumentu pisanego w przejciowej wersji jzyka HTML,
wraz z otwierajcym i zamykajcym znacznikiem html. To straszny, niezrozumiay fragment
tekstu. Sugeruj, aby przy tworzeniu nowych stron
nie wpisywa go samodzielnie, lecz skopiowa
z wczeniej napisanego dokument

1. Wpisz <!DOCTYPE HTML PUBLIC -//W3C//DTD

HTML 4.01 Transitional//EN http://www.

w3.org/ TR/html4/loose.dtd>, aby zadekla-

rowa, e uywana bdzie przejciowa wersja

jzyka HTML 4.01.

2. Wpisz <html>, aby rozpocz faktyczny kod

HTML strony.

3. Zostaw kilka wolnych wierszy na tre dokumentu.

4. Wpisz zamykajcy znacznik </html>.

Aby stworzy stron

w przejciowej wersji jzyka XHTML:

Rozpoczynanie strony

1. Wpisz <!DOCTYPE html PUBLIC -//W3C//DTD

XHTML 1.0 Transitional//EN http://www.

w3. org/TR/xhtml1/DTD/xhtml1-transitional.
dtd>, aby zadeklarowa, e uywana bdzie

przejciowa wersja jzyka XHTML.

2. Wpisz <html xmlns=http://www.w3.org/1999/

xhtml>, aby rozpocz faktyczny kod XHTML

strony.

3. Zostaw kilka wolnych wierszy na tre dokumentu.

4. Wpisz zamykajcy znacznik </html>.

Wskazwki
Utwrz szablony zawierajce odpowiednie de-

klaracje DOCTYPE i znaczniki html oraz uywaj

ich jako punktu wyjcia do tworzenia wszystkich stron

62

HTML czy XHTML

Bardziej wyczerpujce informacje o tym,
czy powiniene uywa jzyka HTML,
czy XHTML, moesz znale na stronie 32, XHTML czy HTML: Czego
powiniene uywa, oraz 50, HTML
a XHTML. Na razie, najprociej rzecz
ujmujc, mona powiedzie, e o ile tylko
zachowasz spjno i niczego nie pomylisz, wybr uywanego jzyka nie ma
wikszego znaczenia. Jeli uywasz jzyka
HTML, to uywaj go dalej, a jeli zdecydowae si na zastosowanie XHTML-a,
stosuj si do jego regu. Przykady prezentowane w niniejszej ksice zostay
napisane w jzyku XHTML, gdy sprzyja
on stosowaniu standardw i zachowywaniu spjnoci, a to z kolei gwarantuje
wiksze prawdopodobiestwo, e strony
bd wywietlane w jednolity, podobny
sposb w wielu rnych przegldarkach
dziaajcych w wielu rnych platformach
systemowych. Jzyk HTML jest mniej
rygorystyczny, dziki czemu uatwia nieco
ycie autorom stron. Jednak ta nieco wiksza prostota tworzenia kodu niesie ze sob
pewne zagroenie, mianowicie moe doprowadzi do niespjnego i nieoczekiwanego wygldu strony ogldanej na rnych
przegldarkach, dziaajcych w rnych
systemach operacyjnych.

Podstawowa struktura dokumentw (X)HTML

W jzyku HTML zarwno deklaracja DOCTYPE,

Rysunek 3.2. Oto deklaracja DOCTYPE

dla dokumentu tworzonego w przejciowej wersji
jzyka XHTML, znacznik html wraz z wymagan
deklaracj przestrzeni nazw oraz zamykajcy
znacznik html

jak i element html s opcjonalne (dotyczy to nawet cisej wersji jzyka HTML).
XHTML wymaga natomiast podania i deklaracji DOCTYPE, i elementu html (w ktrym
dodatkowo naley poda deklaracj przestrzeni nazw). Warto zwrci uwag, e nie istnieje
aden element xhtml.

W przedstawionych przykadach pokazaam, jak

tworzy dokumenty pisane w przejciowej wersji jzyka HTML i XHTML. List wszystkich najczciej
wykorzystywanych deklaracji DOCTYPE mona znale na WWW, na mojej witrynie (patrz strona 37)
oraz na witrynie http://www.w3.org/. Informacje,
ktre mog pomc w wyborze odpowiedniej deklaracji DOCTYPE, mona znale na stronie 53.

Umieszczenie na pocztku stron deklaracji

DOCTYPE, zawierajcej adres URL, zazwyczaj po-

woduje przejcie przegldarek do pracy w trybie

standardw. Dziki temu mona wykorzysta
kod zgodny ze standardami w celu uzyskania
wikszej kontroli nad wygldem tworzonych
stron (patrz strona 54).
Jeli uywasz niestandardowych znacznikw

Zastosowanie deklaracji DOCTYPE informuje

narzdzia sprawdzajce poprawno kodu (tak

zwane walidatory), z jak specyfikacj naley
je porwnywa (patrz strona 392).

Wart zauway, e samo sowo DOCTYPE (po-

chodzce z jeszcze innego jzyka, okrelanego

mianem SGML) musi by zapisywane w caoci
duymi literami zarwno w dokumentach
HTML, jak i XHTML.

strona 54). Bez wtpienia jest to bardzo

powany bd. Na szczcie jednak dokumenty XHTML nie s udostpniane ani
traktowane jako dokumenty XML, dziki
czemu deklaracj t mona, a nawet naley
pomin (deklarowanie sposobu kodowania
zamieciam na stronie 73).

Strony XHTML s tak naprawd pisane w jzy-

ku XML, zatem, z technicznego punktu widzenia, powinny zaczyna si od deklaracji XML

w nastpujcej postaci: <?xml version=1.0
encoding=ISO-8859-2?>. Jednak zastosowanie
takiej deklaracji sprawi, e przegldarka Internet
Explorer bdzie dziaa w trybie sztuczek (patrz

63

Rozpoczynanie strony

XHTML, to stosowanie deklaracji DOCTYPE nie ma

wikszego sensu. W takim przypadku, umie
zawarto strony pomidzy znacznikami html.
Nowoczesne przegldarki wywietlaj takie strony,
dziaajc w trybie sztuczek (ang. quirks mode).

Rozdzia 3.

Tworzenie podstawowej
struktury kodu
Wikszo stron WWW mona podzieli na dwie
czci: nagwek oraz tre. W nagwku okrelany
jest tytu strony, informacje o stronie (wykorzystywane przez wyszukiwarki, takie jak Google), sposb
kodowania. Definiowane s te style i umieszczane
skrypty. Za wyjtkiem tytuu (patrz rozdzia 3.) pozostaa zawarto nagwka strony nie jest bezporednio widoczna.

Aby utworzy nagwek strony:

1. Bezporednio za otwierajcym znacznikiem
html (patrz rozdzia 3.) wpisz <head>.

2. Zostaw kilka wolnych wierszy, w ktrych, w przyszoci, zostanie zapisana zawarto nagwka.

3. Wpisz zamykajcy znacznik </head>.

Tworzenie podstawowej struktury kodu

Tre dokumentu (X)HTML zawiera t cz kodu

strony, ktra bdzie wywietlany w przegldarce,
wcznie z tekstem i rysunkami.

Aby utworzy cz treci dokumentu:

1. Po zamykajcym znaczniku </head> wpisz <body>.
2. Zostaw kilka wolnych wierszy z przeznaczeniem
na tre strony (ktr stworzysz, wykorzystujc
informacje zamieszczone w dalszej czci niniejszej ksiki).

3. Wpisz </body>.

Wskazwki
W XHTML-u elementy head i body s wyma-

gane. W HTML-u s one opcjonalne, jednak

nawet jeli zostan pominite, to przegldarki
bd dziaa tak, jak gdyby elementy te zostay
zdefiniowane i pozwol nam nawet na okrelanie
ich wygldu za pomoc stylw.

Inn przyczyn, z jakiej warto stosowa znaczni-

ki head oraz body, jest okrelanie, kiedy maj by

wykonywane skrypty (patrz strona 354).

64

Rysunek 3.3. Elementy head oraz body pozwalaj nada odpowiedni struktur dokumentom
(X)HTML

Podstawowa struktura dokumentw (X)HTML

Okrelanie sposobu kodowania

Rysunek 3.4. Tworzone pliki zapisywaam,

wykorzystujc sposb kodowania o nazwie UTF-8
(wicej informacji na temat sposobw kodowania
mona znale w rozdziale 21., Symbole oraz inne
znaki nie nalece do alfabetu angielskiego)

Wszystkie dokumenty tekstowe, nie wyczajc dokumentw (X)HTML, s zapisywane przy wykorzystaniu jakiego sposobu kodowania. Poniewa na wiecie
jest wykorzystywanych aktualnie wiele rnych
sposobw kodowania, bezporednio w kodzie dokumentu warto okreli, ktry z nich zosta wykorzystany przy jego zapisywaniu. W ten sposb przegldarki
dziaajce w systemach komputerowych o innym
domylnym systemie kodowania bd miay mniej
problemw z poprawnym wywietleniem strony.

Aby okreli uywany sposb kodowania:

W nagwku dokumentu wpisz: <meta http-equiv=
content-type content=text/html; charset=
kodowanie />, gdzie kodowanie to nazwa sposobu

kodowania, w jakim zosta zapisany dany dokument.

Wskazwki
Chocia z technicznego punktu widzenia spe-

cyfikacja jzyka nie wymaga okrelania sposobu

kodowania, to jednak warto to robi.

Jeli podczas zapisywania pliku zosta wybrany okre-

lony sposb kodowania, to naley go take poda

w dokumencie (X)HTML, w znaczniku meta.

List zbiorw znakw, okrelajcych dostp-

ne sposoby kodowania, mona znale pod adresem http://www.w3.org/International/

O-charset-lang.html.

XHTML wymaga, aby w dokumentach by

okrelany sposb kodowania, jeli jest on rny

od UTF-8 lub UTF-16.

Wicej informacji na temat kodowania mona

znale w rozdziale 21., Symbole oraz inne

znaki nie nalece do alfabetu angielskiego.

65

Okrelanie sposobu kodowania

Rysunek 3.5. Gdy przegldarka uytkownika

odnajdzie ten znacznik meta, bdzie wiedzie,
e strona zostaa zapisana przy uyciu kodowania
UTF-8 i wywietli j w odpowiedni sposb. Najwaniejsze jest to, aby okrelenie kodowania podane
w dokumencie odpowiadao sposobowi kodowania,
wykorzystanemu podczas zapisywania pliku

Sposb kodowania strony WWW zaley od sposobu,

w jaki strona ta bya zapisywana. Jeli zostaa ona zapisana w formie tekstowej, czyli bez jawnego okrelania
sposobu kodowania, to z du doz prawdopodobiestwa mona przyj, e zosta wykorzystany sposb
kodowania domylnie uywany dla danego jzyka.
Na przykad dla jzyka polskiego w systemie Windows
domylnie uywany jest sposb kodowania windows1250, dla jzyka angielskiego windows-1252.

Rozdzia 3.

Nadawanie tytuu
Kady dokument (X)HTML musi zawiera element
title. Element ten okrela tytu dokumentu, ktry
powinien by krtki i opisowy. Wikszo przegldarek wywietla tytu strony na pasku tytuu swojego
okna (rysunek 3.7). Znacznie waniejszy jest jednak
fakt, i tytuu uywaj wyszukiwarki, takie jak
Google oraz Yahoo. Co wicej, jest on take wywietlany w przegldarkach uytkownikw na licie
odwiedzonych stron oraz w menu Ulubione.

Aby stworzy tytu:

1. Ustaw kursor pomidzy otwierajcym a zamyka-

Rysunek 3.6. Element title powinien by umieszczony w sekcji nagwka. Element ten jest wymagany

Rysunek 3.7. Tytu strony jest wywietlany na pasku tytuu okna przegldarki

jcym znacznikiem head (patrz strona 72).

2. Wpisz <title>.
3. Wpisz tytu strony.
4. Wpisz </title>.

Wskazwki
Element title jest obowizkowy.
Tytu nie moe zawiera adnych znacznikw

formatujcych, obrazkw ani czy do innych

stron WWW.

Nadawanie tytuu

Tytu strony w bezporedni sposb odpowiada

Rysunek 3.8. Prawdopodobnie najwaniejsze

jest to, e tytu jest uywany do opisywania stron
w wyszukiwarkach, takich jak Google. Co wicej,
stanowi on jeden z najwaniejszych czynnikw
podczas okrelania zgodnoci strony z zadanymi
kryteriami oraz jej ostatecznego wyniku na licie
wyszukiwania

za ocen wyszukiwania, podawan przez wikszo wyszukiwarek. Im dokadniej odpowiada

on sowom podanym przez uytkownika bez
jakichkolwiek dodatkowych sw tym bliej
pocztku listy wynikw strona si pojawi. Poza
tym tytu strony jest wywietlany na licie wynikw (rysunek 3.8).

Tytuy s take wywietlane na listach hi-

storii, ulubionych stron oraz zakadek (ang.:

bookmarks) rysunek 3.9.

Jeli w tytule znajduj si znaki specjalne, takie

jak akcenty i litery narodowe, to musz one

nalee do uywanego sposobu kodowania (patrz
strona 73) bd te naley je wpisa, wykorzystujc symbole (patrz strona 380).

66

Rysunek 3.9. Tytu jest take wywietlany w przegldarkach na listach historii (pokazanej tutaj),
ulubionych i zakadek

Podstawowa struktura dokumentw (X)HTML

Tworzenie nagwkw sekcji

(X)HTML daje moliwo stosowania a szeciu
rnych poziomw nagwkw, sucych do dzielenia
strony na fragmenty, ktrymi mona atwiej zarzdza.

Aby podzieli stron

przy wykorzystaniu nagwkw:
1. Wewntrz treci dokumentu (X)HTML (poRysunek 3.10. Nagwki mona stosowa w celu
okrelenia struktury zawartoci dokumentu

midzy znacznikami body) wpisz <hn>, gdzie n

jest liczb z zakresu od 1 do 6, okrelajc
poziom tworzonego nagwka.

2. Wpisz tre nagwka.

3. Wpisz </hn>, gdzie n jest t sam liczb, ktra zostaa uyta w kroku 1.

Wskazwki
Traktuj nagwki jak tytuy rozdziaw

tworz one struktur hierarchiczn.

Uywaj ich konsekwentnie.

Jedyna oficjalna regua odnoszca si do nagwkw

Rysunek 3.11. Nagwki pierwszego stopnia s najczciej wywietlane 24-punktow, pogrubion

czcionk Times New Roman

Moesz skorzysta ze stylw, aby przypisa nagw-

kom konkretn czcionk, rozmiar, kolor itd. Wicej

informacji na ten temat znajdziesz w rozdziale 10.,
Formatowanie przy wykorzystaniu stylw.

Dodawaj do nagwkw nazwane odnoniki

lub identyfikatory, aby mc tworzy cza, umoliwiajce przejcie bezporednio do danego nagwka (patrz strona 124.).

W razie potrzeby mona wyrwna tekst nagwka,

dodajc do znacznika <hx> atrybut align= kierunek, gdzie kierunek okrela sposb wyrwnania i moe przybiera nastpujce wartoci: left
(do lewej), right (do prawej) lub center (wyrodkuj). Naley pamita, e atrybut align zosta odrzucony, a zamiast niego zaleca si stosowanie arkuszy
stylw (patrz strona 190.).

67

Tworzenie nagwkw sekcji

nakazuje, aby nagwek by tym wyraniej wywietlany na stronie, im wyszy jest jego poziom (czyli im
nisza cyfra podana w znaczniku). Niemniej jednak
wszystkie obecnie dostpne przegldarki wywietlaj nagwki tak samo za pomoc pogrubionej
czcionki Times New Roman o rozmiarach odpowiednio: 24, 18, 14, 12, 10 i 8 pikseli.

Rozdzia 3.

Rozpoczynanie nowego akapitu

Jzyk (X)HTML nie rozpoznaje znakw koca wiersza (Return lub Enter) ani dodatkowych odstpw,
wprowadzonych w edytorze tekstu (patrz strona 44).
Aby rozpocz nowy akapit na stronie WWW, naley
zatem wykorzysta znacznik p.

Aby rozpocz nowy akapit:

1. Wpisz <p>.
2. Wprowad tre akapitu.
3. Wpisz </p>, aby zakoczy akapit.

Wskazwki

Rysunek 3.12. Tekst poszczeglnych akapitw

naley zapisywa pomidzy otwierajcym i zamykajcym znacznikiem p. Jeli element p nie zostanie
zamknity (co jest cakowicie poprawne w HTML,
ale bdne w XHTML), przegldarka moe niewaciwie zastosowa style

Zamykajcy znacznik </p> jest konieczny zarw-

no w jzyku XHTML, jak i w przypadku okrelania wygldu strony przy uyciu arkuszy stylw.
Dlatego radz, aby zawsze go uywa. W jzyku
HMTL znacznik ten jest opcjonalny.

Rozpoczynanie nowego akapitu

Posta akapitw mona okrela, wykorzystu-

jc arkusze stylw. W szczeglnoci dotyczy

to okrelania kroju czcionki, jej wielkoci, koloru
(oraz wielu innych atrybutw). Informacje na ten
temat mona znale w rozdziale 10., Formatowanie przy wykorzystaniu stylw.

Informacje na temat okrelania odstpw po-

midzy wierszami mona znale na stronie 183,

Okrelanie wysokoci linii. Informacje na temat okrelania wielkoci obszaru poniej akapitu
mona znale na stronie 203, Dodawanie wypenienia wok elementu lub 205, Okrelanie
marginesw wok elementu.

Jednym z szybkich i prostych (oraz zgodnych

Rysunek 3.13. Wielkoci odstpw pomidzy akapitami zale od wielkoci uywanej czcionki

ze standardami) sposobw powikszenia odstpw pomidzy akapitami jest wpisywanie &nbsp;

pomidzy kolejnymi, dodatkowymi znacznikami p.
Lepszym rozwizaniem jest jednak wykorzystanie
arkuszy stylw (patrz strony 203 205).

W razie potrzeby mona wyrwna tekst

akapitu, dodajc do znacznika <p> atrybut

align=kierunek, gdzie kierunek okrela sposb
wyrwnania i moe przybiera nastpujce
wartoci: left (do lewej), right (do prawej) lub

68

center (wyrodkuj) lub justify (do lewej

i prawej). Naley pamita, e atrybut align

zosta odrzucony, a zamiast niego zaleca si

stosowanie arkuszy stylw (patrz strona 190).

Podstawowa struktura dokumentw (X)HTML

Nazywanie elementw
Elementom HTML mona nadawa unikalne nazwy
bd te przypisywa je pewnym klasom. Nastpnie
mona okrela wygld elementw danej klasy przy
uyciu stylw.

Aby okreli unikaln nazw elementu:

Rysunek 3.14. Dodaj atrybut id do unikalnego elementu strony, aby potem mc okrela jego wygld
przy uyciu stylw. Dodaj atrybut class, jeli chcesz
zgrupowa elementy i za jednym razem okreli
wygld caej grupy

Wewntrz otwierajcego znacznika elementu wpisz

id=nazwa, gdzie nazwa okrela w unikalny sposb
dany element.

Aby okreli nazw grupy elementw:

Wewntrz otwierajcego znacznika elementu wpisz
class=nazwa, gdzie nazwa okrela nazw grupy
elementw.

Wskazwki
Kady atrybut id w dokumencie (X)HTML

musi mie unikaln warto. Innymi sowy,

adne dwa elementy nie mog mie tego samego
identyfikatora.

Do danej klasy moe nalee dowolna ilo

elementw wartoci atrybutu class rnych

elementw mog mie te same wartoci.

Wicej informacji na temat przypisywania

Rysunek 3.15. Sam fakt dodania do elementu

atrybutw id lub class nie zmienia w aden sposb
wygldu tych elementw. Pene moliwoci, jakie
zapewniaj te atrybuty, uwidaczniaj si dopiero
po poczeniu ich ze stylami CSS (informacje na ten
temat mona znale w rozdziaach 10. i 11.)

Atrybutw id oraz class mona uywa w wik-

szoci elementw (X)HTML, jednak s one

szczeglnie przydatne w elementach div oraz
span (patrz strony 70 71).

Atrybut id automatycznie zamienia element

w odnonik, do ktrego mona tworzy poczenia. Wicej informacji na ten temat mona
znale na stronie 116, Tworzenie odnonikw.

Wreszcie, atrybut id moe take suy do wska-

zywania elementu, na ktrym maj operowa

skrypty pisane, na przykad, w jzyku JavaScript.

69

Nazywanie elementw

elementom stylw przy uyciu identyfikatora

lub nazwy klasy, mona znale na stronie 156,
Wybieranie elementu na podstawie klasy lub
identyfikatora.

Rozdzia 3.

Podzia strony na dziay

Dzielenie strony na dziay pozwala na definiowanie
stylw, ktre bd okrela wygld caego, wybranego
fragmentu strony. Rozwizanie to jest szczeglnie przydatne w przypadku okrelania ukadu strony za pomoc
kaskadowych arkuszy stylw (patrz strona 195).

Aby podzieli stron na dziay:

1. Na pocztku dziau wpisz <div.
2. W razie potrzeby wpisz id=nazwa, gdzie nazwa
to unikalny identyfikator danego elementu div.

3. W razie potrzeby wpisz class=nazwa,

gdzie nazwa okrela klas, do ktrej bdzie nalee dany element.

4. Wpisz >, aby zakoczy otwierajcy znacznik div.

5. Stwrz zawarto danego dziau strony.
6. Aby zakoczy dzia, wpisz </div>.

Rysunek 3.16. Na tej stronie zdefiniowany jest jeden duy, zewntrzny dzia (rozpoczynajcy si
przed nagwkiem pierwszego poziomu i koczcy
bezporednio przed kocem treci dokumentu) oraz
dwa dziay wewntrzne (zawierajce odpowiednie
nagwki drugiego poziomu oraz towarzyszce im
akapity tekstu)

Wskazwki
Dzia (element div) jest elementem blokowym,

co oznacza, e jego zawarto jest automatycznie

rozpoczynana w nowym wierszu.

Podzia strony na dziay

W istocie jedynymi znacznikami formatujcymi,

jakie powinny by wykorzystywane w elementach div, s znaczniki podziau wiersza. Wszelkie

dodatkowe sposoby formatowania naley definiowa
za porednictwem arkuszy stylw, skojarzonych
z klas lub identyfikatorem danego dziau, zgodnie
z informacjami podanymi w rozdziaach od 7. do 14.

Okrelanie nazwy klasy lub identyfikatora w ele-

mencie div nie jest wymagane. Niemniej jednak

zastosowanie tych atrybutw znacznie zwiksza
moliwoci dziaw.

W jednym elemencie div mona zdefiniowa

zarwno nazw klasy, jak i unikalny identyfikator

elementu, cho zapewne najczciej stosowanym rozwizaniem jest okrelenie tylko jednego
z tych atrybutw. Podstawowa rnica pomidzy
nimi polega na tym, e atrybut class jest uywany do grup, natomiast id do identyfikowania
pojedynczych, unikalnych elementw.

70

Rysunek 3.17. Zazwyczaj rezultaty zdefiniowania

dziaw bd widoczne dopiero po wykorzystaniu
stylw (patrz strona 147). Dopiero wtedy daj
one naprawd wspaniae efekty. T sam stron
ze stylami mona zobaczy w mojej witrynie WWW
(patrz strona 37)

Podstawowa struktura dokumentw (X)HTML

Tworzenie obszarw
wewntrzwierszowych
Gwne fragmenty strony mona organizowa przy
wykorzystaniu sekcji nagwka i treci, a take przy
uyciu dziaw, a nawet nagwkw (elementw h1,
h2, itd.). Mona take tworzy obszary wewntrzwierszowe, zawierajce tekst lub inne elementy wewntrzwierszowe, suce do ich grupowania, identyfikowania
i okrelania wygldu za pomoc stylw.

Aby utworzy obszar wewntrzwierszowy:

1. Na samym pocztku, w miejscu, w ktrym ma
Rysunek 3.18. Znaczniki span su zazwyczaj
do oznaczania wybranego fragmentu zawartoci
wewntrzwierszowej, cho nie musi to by tekst.
Zawarto tak mona potem sformatowa przy
wykorzystaniu stylw (patrz rozdziay 10. i 11.)

si rozpocz tworzony obszar wewntrzwierszowy, wpisz <span.

2. W razie potrzeby wpisz id=nazwa, gdzie nazwa

to unikalny identyfikator danego elementu div.

3. W razie potrzeby wpisz class=nazwa,

gdzie nazwa okrela klas, do ktrej bdzie nalee dany element.

4. Wpisz >, aby zakoczy otwierajcy znacznik span.

wewntrzwierszowego.

6. Aby zakoczy obszar, wpisz </span>.

Wskazwki
Wicej informacji na temat rnic pomidzy ele-

mentami blokowymi oraz zawartoci wewntrzwierszow mona znale na stronie 42, w sekcji
Elementy blokowe oraz wewntrzwierszowe.

Obszary wewntrzwierszowe nie maj adnego

Rysunek 3.19. Element span umoliwia take okrelanie wewntrznej struktury dokumentu. Efekty
wykorzystania tych elementw bd widoczne
dopiero po przypisaniu im styli (patrz strona 147.).
T sam stron ze stylami mona zobaczy na mojej
witrynie WWW (patrz strona 37.)

charakterystycznego dla nich sposobu formatowania.

Staj si one przydatne dopiero w przypadku wykorzystania ich wraz ze stylami (przy uyciu klas lub
unikalnych identyfikatorw, zgodnie z informacjami
podanymi w rozdziaach od 7. do 14.).

W jednym elemencie span mona zdefiniowa

zarwno nazw klasy, jak i unikalny identyfikator

elementu, cho zapewne znacznie czciej stosowanym rozwizaniem jest podawanie tylko jednego z tych atrybutw. Podstawowa rnica
pomidzy nimi polega na tym, e atrybut class
jest uywany do grup, natomiast id do identyfikowania pojedynczych, unikalnych elementw.

71

Tworzenie obszarw wewntrzwierszowych

5. Wpisz zawarto tworzonego obszaru

Rozdzia 3.

Tworzenie nowych wierszy

Przegldarki automatycznie przenosz tekst do kolejnych wierszy, w zalenoci od szerokoci elementu blokowego lub okna przegldarki. Nowe akapity
mona tworzy, wykorzystujc znacznik p (patrz
strona 76.), niemniej jednak istnie take moliwo
amania wierszy w dowolnym miejscu.
Znacznik br doskonale nadaje si do przedstawiania
poezji lub innych krtkich fragmentw tekstu, ktre
powinny by wywietlane bezporednio jeden poniej
drugiego, bez wikszych odstpw pomidzy nimi.

Rysunek 3.20. Na pocztku strony utworzyam

nowy element div, ktry moe posuy do umieszczenia w nim spisu treci. Wewntrz niego znajduj
si trzy wiersze tekstu (utworzone przy wykorzystaniu znacznikw br) o minimalnych odlegociach
pomidzy nimi

Aby wstawi znacznik podziau wiersza:

Wpisz <br /> w miejscu, w jakim tekst ma zosta przeamany. W przypadku tego znacznika nie jest stosowany aden niezaleny znacznik zamykajcy.

Wskazwki
Zamykajcy znak ukonika (/) jest wymagany

Tworzenie nowych wierszy

wycznie w XHTML, w celu spenienia reguy

wymuszajcej prawidowe zamykanie wszystkich
elementw umieszczanych w dokumencie (patrz
strona 50.). Naley si upewni, e pomidzy
literami br oraz znakiem ukonika jest odstp. W dokumentach HTML znak ukonika mona pomin,
cho jego wstawienie w niczym nie przeszkadza.

Rysunek 3.21. Naley pamita, e znaki nowego

wiersza umieszczane w kodzie rdowym dokumentu s cakowicie ignorowane przez przegldark. Ten kod jest rwnowany temu z rysunku 3.20
(cho jest atwiejszy do zrozumienia)

Mona wstawia kilka znacznikw br jeden

za drugim, aby stworzy dodatkowy odstp pomidzy wierszami tekstu lub akapitami.

Odlegoci pomidzy kolejnymi wierszami

tekstu wewntrz akapitu oraz pomidzy samymi

akapitami mona okrela przy wykorzystaniu
arkuszy stylw (patrz strona 183. oraz strony
203. i 205.).

Znacznik br by czsto stosowany wraz z od-

rzuconym atrybutem clear do tworzenia tekstu

otaczajcego obrazek (patrz strona 115.). Rozwizanie to zostao zastpione atrybutem CSS clear
(patrz strona 213.).

Waciwo CSS white-space jest wspaniaym

narzdziem, umoliwiajcym zachowanie oryginalnego sposobu zapisania dokumentu (patrz

strona 189.).

72

Rysunek 3.22. Jeli uyjemy znacznika br, kolejne

elementy bd wywietlane w nowym wierszu

Podstawowa struktura dokumentw (X)HTML

Dodawanie komentarzy

Rysunek 3.23. Komentarze to wietny sposb

na wprowadzenie do swojego tekstu przypomnie.
Moesz je rwnie wykorzysta do zachowania informacji o modyfikacjach wprowadzanych w treci
dokumentu

W kodzie dokumentw (X)HTML mona umieszcza komentarze, ktre bd przypominay Tobie

(lub nastpnemu projektantowi), co chciae osign, wykorzystujc konkretne znaczniki. Komentarze wywietlane s jedynie w dokumencie HTML,
gdy dokument taki zostanie wczytany do edytora
tekstu lub edytora HTML. S one zupenie niewidoczne dla uytkownika.

Wpisanie komentarza na stron WWW

1. Do swojego dokumentu HTML w miejscu,

w ktrym chcesz wstawi komentarz, wpisz <!--.

2. Napisz tre komentarza.

3. Wpisz -->, by zakoczy komentarz.

Wskazwki
Komentarze s szczeglnie przydatne do opisy-

wania, w jakim celu jest uywany dany znacznik

i jaki efekt chcemy dziki niemu uzyska.

Innym przypadkiem, w ktrym warto stosowa

komentarze, to przypominanie sobie (i ewentualnym nastpcom) o dodaniu, usuniciu lub

uaktualnieniu poszczeglnych sekcji strony.

Rysunek 3.24. Komentarze s niewidoczne (dopki

nie wywietli si kodu rdowego strony patrz
strona 67.)

mentarzami, zanim go opublikujesz, aby unikn

upublicznienia swych by moe osobistych
komentarzy.

Miej si na bacznoci przed zbyt osobistymi

komentarzami. Co prawda s one niewidoczne w przegldarce, ale radonie pojawi si,

gdy uytkownik zachowa Twoj stron w postaci
rdowej jako plik HTML. Wicej informacji
na temat zapisywania kodu przegldanych stron
znajdziesz w sekcji Czerpanie inspiracji od innych na stronie 67.

Komentarzy nie mona zagnieda czyli

umieszcza wewntrz innych komentarzy.

73

Dodawanie komentarzy

Obejrzyj w przegldarce swj dokument z ko-

Rozdzia 3.

Nadawanie nazw elementom stron

Za pomoc atrybutu title mona tworzy etykiety
ekranowe niemal we wszystkich czciach witryny
WWW. Etykiety te szczeglnie przydaj si przy
wywietlaniu podpowiedzi z informacj, jakie dane
maj by wpisywane w poszczeglnych polach formularzy, jednak mona ich uywa take w dowolnych innych elementach.

Aby doda etykiet do elementu strony:

Wewntrz znacznika (X)HTML, do ktrego chcesz
doda etykiet, wpisz: title=etykieta, gdzie etykieta to tekst, jaki ma zosta wywietlony w etykiecie
ekranowej, gdy uytkownik umieci wskanik myszy
w obszarze danego elementu.

Rysunek 3.25. Nazw mona nada dowolnemu

elementowi strony

Wskazwki
Internet Explorer, przeznaczony do uycia

Nadawanie nazw elementom stron

w systemie Windows, wywietla take etykiety ekranowe tworzone na podstawie atrybutu

alt, definiowanego w znacznikach img (patrz
strona 105.). W przypadku, gdy w elemencie
zostan zdefiniowane wartoci obu atrybutw
title oraz alt etykieta zostanie utworzona przy uyciu pierwszego z nich. A zatem jeli
nie chcesz, aby Internet Explorer wywietla
zawarto atrybutu alt w etykiecie ekranowej,
dodaj do elementu pusty atrybut title
title=.

74

Rysunek 3.26. Gdy uytkownik umieci wskanik

myszy w obszarze takiego elementu, pojawi si
etykieta ekranowa