IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

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

HTML 4. Biblia
Autorzy: Bryan Pfaffenberger, Bill Karow
Tumaczenie: Robert Riger, Krzysztof Sapkowski
ISBN: 83-7197-394-2
Tytu oryginau: HTML 4 Bible
Format: B5, stron: 732
oprawa twarda

W tym wydaniu tego jednotomowego, wszechstronnego przewodnika, autorzy Bryan

Pfaffenberger i Bill Karrow oferuj opisany, krok po kroku instrukta tworzenia
efektownych stron WWW napisanych w najnowszym wydaniu HTML-a (wersji 4.01).
Poczynajc od szybkiego startu z HTML-em po porady ekspertw na temat
kaskadowych arkuszy stylw, projektowania stron WWW, zawartoci multimedialnej,
interaktywnych baz danych, dynamicznego HTML-a i JavaScriptu. Wyjaniaj, jak
najpeniej wykorzysta moliwoci HTML-a i pokazuj, jak przeksztaci HTML
w aplikacje XHTML.
Wewntrz znajdziesz kompletny opis HTML-a 4:
Zrozumienie podstawowej struktury dokumentu HTML.
Umieszczanie elementw DHTML na swoich stronach WWW.
Opanowanie prawidowej skadni standardu HTML 4.01.
Wykorzystanie nowych, zaawansowanych moliwoci tworzenia kaskadowych
arkuszy stylw.
Oywianie stron za pomoc animacji.
Wykorzystywanie nowych opcji map obrazka.
Usprawnienie zarzdzania stronami WWW dziki radom ekspertw.
Tworzenie stron WWW dla Internetu i intranetu.

"
"
"
"
"
"
"
"

O Autorach ............................................................................................23
Wstp ...................................................................................................25
Wprowadzenie .......................................................................................29
Wprowadzenie do jzykw znakowania ............................................................................29
HTML hipertekstowy jzyk znakowania.........................................................................30
Zanik podziau na struktur i wygld .................................................................................30
HTML 4 i jego zasady ..............................................................................................................31
Wprowadzenie do kaskadowych arkuszy stylw ...............................................................32
Wykorzystanie potgi stylw .............................................................................................32
Co z podziaem na struktur i wygld?...............................................................................33
Powrt do czystej struktury w HTML-u 4 ................................................................................33
Zasady HTML-a 4.....................................................................................................................34

Cz I

Zaczynamy pisa w HTML-u 4 ............................................. 35

Rozdzia 1. Podstawy HTML-a 4.................................................................................37

Wprowadzenie do podstawowych blokw HTML-a elementw.................................................38
Elementy kontra znaczniki .................................................................................................38
Nawet elementy skadaj si z czci .................................................................................38
Atrybuty ....................................................................................................................................40
Tylko pary...........................................................................................................................40
Zawsze kupuj z listy ...........................................................................................................40
Prosz wybra numer..........................................................................................................40
Kolory wiata......................................................................................................................40
Liczy si kreatywno.........................................................................................................42
Polskie znaki .............................................................................................................................42
Skd si bior znaki? ..........................................................................................................42
ISO......................................................................................................................................43
Inne systemy kodowania.....................................................................................................43
Jaki system kodowania wybra?.........................................................................................43
ISO-8859-2 .........................................................................................................................43
Programy do konwersji.......................................................................................................44
Uywanie znakw specjalnych .................................................................................................44
Dodawanie komentarzy.............................................................................................................46
Poprawianie czytelnoci kodu HTML ......................................................................................47
Wystrzeganie si popularnych bdw skadni.........................................................................48
Zagniedanie ...........................................................................................................................48
Podstawowa struktura dokumentu HTML: HEAD i BODY ....................................................50
Co teraz? ...................................................................................................................................50

HTML 4. Biblia

Rozdzia 2. Zasady HTML-a 4 ....................................................................................53

Problemy zwizane z rozszerzeniami .......................................................................................54
Kompatybilno przegldarek ............................................................................................54
World Wide Web Consortium ............................................................................................55
Idea oddzielenie struktury dokumentu od jego wygldu ......................................................56
Zamiecony HTML (sytuacja przed HTML-em 4) ............................................................56
Zarzdzanie koszmarem .....................................................................................................57
HTML 4 definiuje struktur................................................................................................58
Wprowadzenie do kaskadowych arkuszy stylw......................................................................59
Zasady HTML-a 4.....................................................................................................................61
Przyszo XML.....................................................................................................................61
Idea kontra rzeczywisto ........................................................................................................62
Dokd to wszystko zmierza?.....................................................................................................62
Co powiniene teraz zrobi? .....................................................................................................63
Co dalej? ...................................................................................................................................63

Rozdzia 3. Tworzenie pierwszej strony WWW ............................................................65

Uruchamianie edytora ...............................................................................................................65
Nadawanie tytuu stronie ..........................................................................................................67
Na pocztku to, co ma by na pocztku .............................................................................67
Identyfikacja autora...................................................................................................................68
Definiowanie sw kluczowych w celu lepszego wyszukiwania .......................................68
Wstawianie elementu BODY....................................................................................................70
Dodawanie nagwkw.............................................................................................................70
Wpisywanie i edycja tekstu.......................................................................................................72
Akapity ...............................................................................................................................72
Bloki cytatw......................................................................................................................72
Podzia wierszy i zaczynanie nowego akapitu..........................................................................73
Zapobieganie podziaowi wierszy ......................................................................................73
Dodawanie linii poziomych................................................................................................73
Tworzenie list............................................................................................................................74
Listy wypunktowane...........................................................................................................75
Listy numerowane ..............................................................................................................75
Dodawanie cza .......................................................................................................................76
Dodawanie cza wewntrznego.........................................................................................76
Dodawanie cza zewntrznego..........................................................................................77
Podgld strony...........................................................................................................................78
Modyfikacje kocowe...............................................................................................................78
Kopiowanie arkuszy stylw................................................................................................78
czenie strony z arkuszem stylw ....................................................................................79
Zmiana stylw ....................................................................................................................80
Skrcony opis elementw HTML-a..........................................................................................80
Co dalej? ...................................................................................................................................81

Rozdzia 4. Publikujemy!..........................................................................................83
Przygotowanie...........................................................................................................................84
Osobiste serwery sieciowe ........................................................................................................85
Profesjonalne serwery sieciowe ................................................................................................86
Publikowanie na wasnym serwerze .........................................................................................87
Publikowanie na serwerze dostawcy internetowego.................................................................87
Zagadnienia zwizane z platform............................................................................................88
Publikowanie na serwerze Windows NT/2000.........................................................................89
Windows 98 ........................................................................................................................89
Windows NT/2000..............................................................................................................92
Mac .....................................................................................................................................93

Wprowadzenie

Wprowadzenie do FTP..............................................................................................................94
Wprowadzenie do klientw FTP: CuteFTP, WS_FTP i Fetch .................................................95
Planowanie struktury katalogw do przechowywania stron i grafiki .......................................97
Struktura katalogw dopasowana do zawartoci serwisu .......................................................97
Struktura katalogw utworzona na podstawie rodzajw plikw ........................................98
Wysyanie swoich stron oraz grafiki.........................................................................................99
DNS...........................................................................................................................................99
Uprawnienia ..............................................................................................................................99
Testowanie swojej pracy.........................................................................................................100
Co dalej? .................................................................................................................................102

Cz II

Czym jest HTML? ............................................................. 103

Rozdzia 5. Wprowadzenie do HTML-a ......................................................................105

Jaki jest Twj cel?...................................................................................................................106
Punkt przejciowy.............................................................................................................106
Punkt docelowy ................................................................................................................106
Edukacja ...........................................................................................................................107
Motywacja ........................................................................................................................107
Informacja.........................................................................................................................108
Perswazja ..........................................................................................................................108
Sprzeda............................................................................................................................109
Jakie s Twoje narzdzia?.......................................................................................................109
SGML ...............................................................................................................................110
HTML ...............................................................................................................................111
Proces standaryzacji HTML-a ................................................................................................111
Powstawanie standardu.....................................................................................................111
Komisje i wersje robocze..................................................................................................112
Gosowanie .......................................................................................................................112
HTML 1.0 .........................................................................................................................112
HTML 2.0 .........................................................................................................................113
HTML 3.2 .........................................................................................................................113
HTML 4.0 .........................................................................................................................113
Edytory HTML .................................................................................................................114
Pisanie w HTML-u..................................................................................................................115
Formatowanie tekstu.........................................................................................................115
Definiowanie struktury dokumentu ..................................................................................116
Dodawanie multimediw ........................................................................................................116
Elementy wewntrzne.......................................................................................................117
Obiekty .............................................................................................................................118
Standaryzacja ..........................................................................................................................118
Proces standaryzacji................................................................................................................118
Dziaalno .......................................................................................................................119
Grupy ................................................................................................................................119
Konsensus .........................................................................................................................119
Propozycja zalecenia ........................................................................................................120
Gosowanie .......................................................................................................................120
Zalecenia...........................................................................................................................120
Uczestnicy procesu standaryzacji ...........................................................................................121
Gra w rozszerzenia..................................................................................................................122

HTML 4. Biblia

Rozdzia 6. XML a XSL ............................................................................................123

Czym jest XML?.....................................................................................................................123
Definicja typu dokumentu ................................................................................................124
Przestrze nazw XML-a ...................................................................................................124
Czym jest XSL? ......................................................................................................................124
Transformacje ...................................................................................................................125
Formatowanie ...................................................................................................................125
Co dalej? .................................................................................................................................125

Rozdzia 7. Wprowadzenie do XHTML-a przyszoci HTML-a ..................................127

Czym jest XHTML?................................................................................................................127
Rozszerzalno .................................................................................................................127
Przenono ......................................................................................................................128
Rnice midzy HTML-em i XHTML-em.............................................................................128
Wymagane znaczniki........................................................................................................128
Znaczniki musz by prawidowo zagniedone .............................................................129
Znaczniki i nazwy atrybutw musz by pisane maymi literami....................................130
Puste elementy s niedozwolone ......................................................................................130
Niepuste elementy musz by zamknite .........................................................................130
Wartoci atrybutw musz by umieszczone w cudzysowie ..........................................131
Wartoci atrybutw musz by rozszerzone.....................................................................131
Co dalej? .................................................................................................................................131

Rozdzia 8. Wybieramy edytor HTML ......................................................................133

WYSIWYG a moe co innego? ............................................................................................134
Proste edytory WYSIWYG atwe w uyciu, ale nieporczne ......................................134
Programy oparte na znacznikach ......................................................................................135
Jaka to rnica?.................................................................................................................135
Przegld moliwoci edytorw HTML-a................................................................................137
Analiza ..............................................................................................................................137
Obsuga HTML-a 4...........................................................................................................138
Obsuga zaawansowanych znacznikw ............................................................................143
Przegld edytorw HTML-a ...................................................................................................147
TextPad 4.2.1 ....................................................................................................................147
HotDog Professional 6.0...................................................................................................148
HomeSite 4.5 ....................................................................................................................149
HoTMetaL PRO 6.0..........................................................................................................150
CoffeeCup 8.2...................................................................................................................151
Dreamweaver....................................................................................................................152
FrontPage 2000.................................................................................................................153
HTML-Kit 1.0...................................................................................................................153
PageMill 3.0......................................................................................................................154
NetObjects Fusion 5.0 ......................................................................................................154
Co dalej? .................................................................................................................................156

Rozdzia 9. Pisanie na potrzeby Sieci .....................................................................157

Szybkie przegldanie ..............................................................................................................157
Pisz zwile.............................................................................................................................159
Strona czynna....................................................................................................................159
Podporzdkowywanie.......................................................................................................160
Dugo zdania..................................................................................................................161
Pisz barwnie ............................................................................................................................161
Korekta tekstu .........................................................................................................................162
Co dalej? .................................................................................................................................162

Wprowadzenie

Rozdzia 10. Uwzgldnianie specjalnych potrzeb dostpno sieci WWW................163

Dostpno projektu................................................................................................................163
Wskazwki dotyczce dostpnoci.........................................................................................164
Co dalej? .................................................................................................................................166

Rozdzia 11. Opcje serwera......................................................................................167

Model klient-serwer ................................................................................................................167
Model klient-serwer..........................................................................................................169
Przetwarzanie sedno sprawy..........................................................................................169
Przetwarzanie po stronie klienta .............................................................................................169
Serwer WWW .........................................................................................................................171
Uprawnienia......................................................................................................................171
NT ukryte uprawnienia ..................................................................................................172
Przetwarzanie po stronie serwera............................................................................................172
Czego nie potrafi przetworzy serwer WWW? ................................................................173
Konwersja skryptw na HTML ........................................................................................173
Historia oprogramowania poredniczcego ............................................................................174
Wbudowane oprogramowanie poredniczce ..................................................................175
Samodzielne oprogramowanie poredniczce ..................................................................176
Szybkie tworzenie aplikacji ..............................................................................................177
Cookies....................................................................................................................................177
Bezpieczne serwery.................................................................................................................178
Serwery UNIX ........................................................................................................................180
Serwery Windows NT.............................................................................................................180
Co dalej? .................................................................................................................................181

Cz III Tworzenie struktury dokumentu w HTML-u ........................ 183

Rozdzia 12. Struktura dokumentu HTML .................................................................185
Co nowego w HTML-u 4........................................................................................................185
Ramki................................................................................................................................186
Formularze ........................................................................................................................186
Przypisy ............................................................................................................................186
Tabele ...............................................................................................................................187
Usprawnienia w CSS ........................................................................................................187
Co ubyo z HTML-a 4.0?..................................................................................................187
Komponenty HTML-a ............................................................................................................187
Elementy ...........................................................................................................................187
Atrybuty............................................................................................................................188
Kody znakw ....................................................................................................................188
Elementy blokowe kontra elementy liniowe...........................................................................188
Zagniedanie .........................................................................................................................189
Element HTML .......................................................................................................................190
Element HEAD .......................................................................................................................191
Dodatkowe elementy HEAD ..................................................................................................192
Element BODY .......................................................................................................................194
Struktura kontra wygld jeszcze raz ....................................................................................195
Pisanie czytelnego kodu HTML-a ..........................................................................................195
Co dalej? .................................................................................................................................195

Rozdzia 13. Okrelanie wersji HTML-a i tytuu dokumentu........................................197

Informacje o wersji .................................................................................................................197
Tytu dokumentu .....................................................................................................................198
Co dalej? .................................................................................................................................199

HTML 4. Biblia

Rozdzia 14. Metadane ............................................................................................201

Element META .......................................................................................................................201
Atrybuty nazwy.......................................................................................................................202
Atrybut http-equiv ............................................................................................................202
Robots.txt ................................................................................................................................204
Co dalej? .................................................................................................................................205

Rozdzia 15. Okrelanie struktury wierszy i akapitw

za pomoc8 elementw blokowych.........................................................207
Wprowadzenie do elementw blokowych ..............................................................................208
Okrelanie wygldu ..........................................................................................................208
Tworzenie akapitw element P ............................................................................................208
Kontrolowanie podziau wierszy i odstpw ..........................................................................209
Podzia wiersza .................................................................................................................209
Zapobieganie podziaowi wiersza.....................................................................................211
Dodawanie nagwkw...........................................................................................................211
Tworzenie wcitych blokw cytatw element BLOCKQUOTE.........................................212
Dodawanie preformatowanego tekstu.....................................................................................212
Grupowanie elementw blokowych element DIV...............................................................213
Co dalej? .................................................................................................................................214

Rozdzia 16. Tworzenie list ......................................................................................217

Wprowadzenie do list..............................................................................................................217
Tworzenie list wypunktowanych element UL ...............................................................217
Tworzenie list numerowanych element OL...................................................................219
Tworzenie list definicji element DL ..............................................................................220
Zagniedanie elementw blokowych ....................................................................................222
Co dalej? .................................................................................................................................223

Rozdzia 17. Elementy liniowe i znaki specjalne........................................................225

Wprowadzenie do elementw liniowych................................................................................225
Style logiczne kontra style fizyczne........................................................................................227
Sieciowy zestaw znakw ........................................................................................................228
Dodawanie znakw specjalnych .............................................................................................228
Znaki specjalne do specjalnych zastosowa ...........................................................................229
Obsuga tekstw pisanych w jzykach obcych .......................................................................231
Dodawanie cytatw element Q ............................................................................................232
Grupowanie elementw liniowych element SPAN .............................................................233
Co dalej? .................................................................................................................................234

Rozdzia 18. Dodawanie 8czy ..................................................................................235

cza .......................................................................................................................................235
Budowa adresu........................................................................................................................236
Lokalne czenie stron wzgldnymi nazwami plikw ............................................................237
Uzupenianie adresu..........................................................................................................237
Element A .........................................................................................................................237
czenie ze stronami znajdujcymi si w innych katalogach.................................................238
czenie ze stronami zewntrznymi .......................................................................................239
czenie z miejscami znajdujcymi si na tej samej stronie..........................................................240
cza graficzne .......................................................................................................................241
cza do danych niebdcych dokumentami HTML .............................................................241
Element BASE ........................................................................................................................242
Dodawanie cza mailto ..........................................................................................................242
Premia tworzenie cza, ktre nie powoduje opuszczenia strony........................................243
Co dalej? .................................................................................................................................243

Wprowadzenie

Rozdzia 19. Wstawianie grafiki i innych obiektw....................................................245

Krtkie wprowadzenie do formatw plikw graficznych.......................................................245
JPEG .................................................................................................................................245
GIF....................................................................................................................................246
PNG ..................................................................................................................................246
Tworzenie pliku graficznego ............................................................................................246
Dodawanie grafiki wewntrznej za pomoc elementu IMG...................................................246
Multimedia ..............................................................................................................................248
Dodawanie wewntrznych obiektw multimedialnych za pomoc elementu OBJECT.........248
Wskazwki na temat efektywnego wykorzystywania grafiki.................................................250
Alternatywne rozwizania dla przegldarek tekstowych........................................................251
Co dalej? .................................................................................................................................252

Rozdzia 20. Tabele .................................................................................................253

Wprowadzenie do modelu tabel w HTML-u............................................................................254
Definiowanie tabeli .................................................................................................................254
Definiowanie danych tabeli ....................................................................................................256
Grupowanie wierszy ...............................................................................................................260
Definiowanie kolumn..............................................................................................................263
Grupowanie kolumn................................................................................................................264
czenie wierszy i kolumn .....................................................................................................265
Modyfikacje kocowe.............................................................................................................266
Zagniedanie tabel.................................................................................................................266
Co dalej? .................................................................................................................................267

Rozdzia 21. Tworzenie formularzy i wstawianie skryptw .........................................269

Wprowadzenie do formularzy.................................................................................................270
Przetwarzanie formularza .......................................................................................................270
Zapisywanie danych w celu dalszego ich przetwarzania .................................................270
Zwracanie informacji osobie wypeniajcej formularz ....................................................271
Wykonywanie innych czynnoci ......................................................................................271
Wstawianie formularza ...........................................................................................................271
Action ...............................................................................................................................272
Method..............................................................................................................................273
Wstawianie kontrolek .............................................................................................................273
Element INPUT.......................................................................................................................275
Rodzaje atrybutw ............................................................................................................276
Element BUTTON ..................................................................................................................280
Elementy SELECT, OPTION i OPTGROUP.........................................................................281
Element SELECT .............................................................................................................282
Element OPTION .............................................................................................................283
Element TEXTAREA .............................................................................................................286
Element LABEL .....................................................................................................................286
Elementy FIELDSET i LEGEND...........................................................................................288
Moliwoci przetwarzania formularza....................................................................................289
Przetwarzanie danych formularza...........................................................................................289
mailto: .....................................................................................................................................290
Co dalej? .................................................................................................................................290

Rozdzia 22. Tworzenie ramek..................................................................................291

Wprowadzenie do ramek ........................................................................................................291
Tworzenie ukadu ramek.........................................................................................................292
Tylko rzdy (wiersze) .......................................................................................................292
Tylko kolumny..................................................................................................................293
Zarwno rzdy, jak i kolumny..........................................................................................293
Zagniedanie elementw FRAMESET...........................................................................294

HTML 4. Biblia
Miejsca docelowe....................................................................................................................295
Tworzenie ramek.....................................................................................................................296
Uatwianie nawigacji...............................................................................................................297
Serwisy bez ramek ..................................................................................................................298
Dodawanie ramek czonych (IFRAME) ...............................................................................299
Co dalej? .................................................................................................................................300

Rozdzia 23. Grupowanie elementw za pomoc8 elementw DIV i SPAN ....................301

Czym jest klasa?......................................................................................................................301
Wprowadzenie do DIV ...........................................................................................................302
Wprowadzenie do SPAN ........................................................................................................303
Co dalej? .................................................................................................................................304

Rozdzia 24. Testowanie i walidacja HTML-a.............................................................305

Uwaaj na najczciej popeniane bdy.................................................................................305
Testowanie kodu HTML-a......................................................................................................306
Dlaczego powiniene przeprowadza walidacj? ...................................................................307
Czym jest walidacja? ........................................................................................................307
Po co przeprowadza walidacj? ......................................................................................307
Walidacja kodu HTML-a ........................................................................................................307
Walidacja CSS ........................................................................................................................308
Rne poziomy walidacji CSS .........................................................................................309
Ocena dostpnoci...................................................................................................................310
Co dalej? .................................................................................................................................311

Cz IV

Kaskadowe arkusze stylw ..................................................................313

Rozdzia 25. Wprowadzenie do kaskadowych arkuszy stylw ....................................315

Dlaczego arkusze stylw s potrzebne?..................................................................................315
Co mona zrobi za pomoc arkuszy stylw? ........................................................................316
Grupowanie elementw ....................................................................................................316
Zmiana wygldu serwisu ..................................................................................................317
Przekazanie redagowania serwisu bez utraty kontroli nad jego wygldem .....................317
Model kaskadowy ...................................................................................................................318
Przykady arkuszy stylw .......................................................................................................318
Problemy z kompatybilnoci przegldarek ...........................................................................321
Co dalej? .................................................................................................................................321

Rozdzia 26. Skadnia CSS.......................................................................................323

Anatomia arkusza stylw ........................................................................................................324
Rnice midzy skadni CSS i HTML-a...............................................................................324
Definiowanie waciwoci ......................................................................................................325
Grupowanie waciwoci ........................................................................................................326
Skrcone definicje waciwoci ..............................................................................................327
Formatowanie pudeek model formatowania CSS...............................................................327
Wymiary pudeka..............................................................................................................327
Odstp ...............................................................................................................................328
Obwdka...........................................................................................................................329
Marginesy .........................................................................................................................329
Dziedziczenie ..........................................................................................................................330
Definiowanie klas ...................................................................................................................330
Pseudoklasy.............................................................................................................................330
Definiowanie identyfikatora ...................................................................................................331
Grupowanie elementw za pomoc DIV i SPAN...................................................................332
Komentarze w arkuszu stylw ................................................................................................332
Co dalej? .................................................................................................................................333

Wprowadzenie

Rozdzia 27. Dodawanie stylw do strony WWW ......................................................335

Uywanie zewntrznego arkusza stylw ................................................................................335
Uywanie elementu STYLE wewntrz elementu HEAD .......................................................336
Dodawanie stylw czonych..................................................................................................338
Korzystanie z gotowych arkuszy stylw.................................................................................338
Przykad mieszanej definicji stylw .......................................................................................341
Co dalej? .................................................................................................................................342

Rozdzia 28. Dodawanie kolorw i ta.......................................................................345

Jak powstaj kolory na monitorze?.........................................................................................345
Wprowadzenie do kodw kolorw .........................................................................................346
Uywaj angielskiego.........................................................................................................346
Rnice wystpujce midzy monitorami ........................................................................346
Palety kolorw ........................................................................................................................348
Dobieranie kolorw.................................................................................................................348
Definiowanie koloru ta ..........................................................................................................348
Zmiana domylnego koloru tekstu..........................................................................................349
Dodawanie grafiki ta..............................................................................................................349
Co dalej? .................................................................................................................................351

Rozdzia 29. Formatowanie akapitw .......................................................................353

Przypomnienie pudekowego modelu formatowania w CSS..................................................353
Podsumowanie odstpw........................................................................................................354
Marginesy podsumowanie .............................................................................................354
Jednostki dugoci.............................................................................................................354
Dodawanie wci ....................................................................................................................355
Kontrolowanie wyrwnywania ...............................................................................................355
Wybieranie interlinii ...............................................................................................................355
Kontrolowanie list za pomoc stylw.....................................................................................356
Rodzaje wypunktowania list.............................................................................................356
Grafika wypunktowania listy............................................................................................357
Pozycja wypunktowania listy ...........................................................................................357
Skrcona definicja listy ....................................................................................................357
Dodawanie obwdki ...............................................................................................................358
Szeroko obwdki...........................................................................................................358
Kolor obwdki ..................................................................................................................359
Styl obwdki.....................................................................................................................359
Zapis skrcony..................................................................................................................359
Co dalej? .................................................................................................................................360

Rozdzia 30. Formatowanie tabel .............................................................................361

Kontrolowanie wyrwnania tabeli ..........................................................................................361
Ustawianie poziomego wyrwnania komrek........................................................................362
Na poziomie komrki .......................................................................................................362
Na poziomie wiersza.........................................................................................................363
Na poziomie kolumny.......................................................................................................364
Na poziomie grupy wierszy lub grupy kolumn ................................................................364
Ustawianie pionowego wyrwnania komrek........................................................................365
Okrelanie tabel i szerokoci komrek ...................................................................................365
Wartoci bezwzgldne ......................................................................................................366
Wartoci wzgldne............................................................................................................366
Okrelanie szerokoci w arkuszu stylw ..........................................................................367
Dodawanie odstpw midzy komrkami..............................................................................367
Definiowanie odstpw w komrce........................................................................................369

10

HTML 4. Biblia
Stosowanie kolorw w tabelach..............................................................................................369
Definiowanie linii i obwdek..................................................................................................369
Co dalej? .................................................................................................................................370

Rozdzia 31. Definiowanie czcionek..........................................................................371

Wprowadzenie do czcionek ....................................................................................................371
Rodziny czcionek..............................................................................................................371
Tekst kontra grafika tekstu ...............................................................................................372
Wykorzystanie czcionek lokalnych ........................................................................................373
Wybr czcionki .......................................................................................................................373
Zagadnienia estetyczne .....................................................................................................373
Dostpno czcionek lokalnych........................................................................................374
Kontrola wyboru czcionki ................................................................................................374
Wybr wielkoci czcionki.......................................................................................................374
Uywanie tekstu cinitego i rozstrzelonego ........................................................................375
cienianie i rozszerzanie w poziomie .............................................................................375
cienianie i rozszerzanie w pionie ..................................................................................376
Dodawanie kapitalikw i innego formatowania znakw........................................................377
Modyfikacja pierwszego wiersza .....................................................................................377
Tworzenie inicjau ............................................................................................................377
Co dalej? .................................................................................................................................378

Cz V

Projektowanie wygldu strony........................................... 379

Rozdzia 32. Podstawy projektowania stron WWW ...................................................381

Co umieci na stronie? ..........................................................................................................382
Skoncentruj si na przekazie...................................................................................................382
Zmierzaj do sedna (pracuje lewa pkula)........................................................................383
Utrzymuj ten sam nastrj (pracuje prawa pkula)...........................................................383
Kiedy poprosi o pomoc...................................................................................................384
Nie wd mnie na pokuszenie ..........................................................................................384
Strony wzorcowe.....................................................................................................................385
Spjno ..................................................................................................................................386
Przewidywalno ....................................................................................................................386
atwa nawigacja .....................................................................................................................387
Paski nawigacyjne lub przyciski nawigacyjne .................................................................388
Spis treci..........................................................................................................................389
Mapa serwisu ....................................................................................................................391
Przeszukiwanie serwisu ....................................................................................................392
Rozwijana lista z zawartoci serwisu..............................................................................392
Wygld ....................................................................................................................................392
Interaktywno ........................................................................................................................393
Szybko .................................................................................................................................393
Wskazwki na temat projektowania .......................................................................................394
Efektywne wykorzystanie odstpw.......................................................................................398
Optymalna dugo strony ......................................................................................................398
Moliwoci rozbudowy...........................................................................................................398
Projektowanie efektownej strony powitalnej..........................................................................399
Strona startowa........................................................................................................................399
Testowanie ..............................................................................................................................399
Mit o kompletnoci .................................................................................................................400
Co dalej? .................................................................................................................................400

Wprowadzenie

11

Rozdzia 33. MoCliwoci pozycjonowania w CSS .......................................................401

Waciwo display.................................................................................................................401
Waciwo float .....................................................................................................................403
Waciwo clear.....................................................................................................................405
Waciwo position ...............................................................................................................407
Waciwo z-index ................................................................................................................408
Pozycjonowanie wzgldne......................................................................................................409
Pozycjonowanie bezwzgldne ................................................................................................409
czenie pozycjonowania wzgldnego i bezwzgldnego.......................................................410
Co dalej? .................................................................................................................................410

Rozdzia 34. Pozycjonowanie grafiki i tekstu ............................................................411

Okrelanie pooenia obrazka .................................................................................................411
Korzystanie z ramek .........................................................................................................411
Uywanie CSS i pozycjonowania bezwzgldnego...........................................................412
Uywanie CSS i pozycjonowania wzgldnego ................................................................413
Uywanie CSS do oblewania tekstu dookoa obrazka .....................................................414
Definiowanie pozycji tekstu....................................................................................................415
Modyfikacja elementu BODY ..........................................................................................415
Wzgldne pozycjonowanie tekstu ....................................................................................415
Umieszczanie obrazka obok tekstu...................................................................................417
Oblewanie tekstu i obrazka...............................................................................................417
Oblewanie dookoa tekstu.................................................................................................418
Kolejno kodu HTML-a ma znaczenie ...........................................................................419
Co dalej? .................................................................................................................................420

Rozdzia 35. Kruczki i sztuczki suC8ce do rozmieszczania elementw

za pomoc8 CSS....................................................................................421
Tworzenie kolumn tekstu........................................................................................................421
Nakadanie tekstu na grafik...................................................................................................423
Tworzenie wyrnionych cytatw ..........................................................................................424
Co dalej? .................................................................................................................................426

Rozdzia 36. Struktura serwisw wielostronicowych .................................................427

Moliwoci i problemy zwizane z serwisami wielostronicowymi........................................427
Zalety serwisw wielostronicowych z punktu widzenia odwiedzajcych .......................428
Wady serwisw wielostronicowych z punktu widzenia odwiedzajcych ........................428
Zalety tworzenia serwisu wielostronicowego...................................................................430
Wady tworzenia serwisu wielostronicowego ...................................................................430
Podzia serwisu .......................................................................................................................430
Wedug pochodzenia materiau ........................................................................................431
Wedug rodzaju zawartoci...............................................................................................432
Wedug zainteresowa odwiedzajcych ...........................................................................433
Podzia zawartoci...................................................................................................................434
Architektura serwisu ...............................................................................................................435
Architektura liniowa .........................................................................................................436
Architektura hierarchiczna................................................................................................437
Wystrzegaj si zbytniego przestrzegania hierarchii .........................................................438
Anarchia............................................................................................................................438
Jednolita sie WWW ........................................................................................................439
Udostpnianie pomocy w nawigacji .......................................................................................439
Utrzymywanie serwisu wielostronicowego................................................................................441
Dodatek: utrzymywanie naprawd duych serwisw.............................................................442
Co dalej? .................................................................................................................................443

12

HTML 4. Biblia

Cz VI Dodawanie elementw audiowizualnych i interaktywnych...... 445

Rozdzia 37. Tworzenie grafiki statycznej na potrzeby sieci WWW.............................447
Graficzne formaty plikw .......................................................................................................447
Po co stosuje si kompresj? ............................................................................................448
Opcje kompresji................................................................................................................450
Gbia kolorw........................................................................................................................452
Zwikszanie szybkoci adowania ..........................................................................................452
Wielko plikw graficznych ...........................................................................................453
Ilo grafiki.......................................................................................................................453
Wielokrotne wykorzystanie tych samych obrazw ..........................................................454
Stosuj ramki ......................................................................................................................454
Uywaj tekstu zamiast grafiki ..........................................................................................454
Tworzenie grafiki....................................................................................................................454
Najwaniejsze funkcje ......................................................................................................455
Alternatywne programy bezpatne....................................................................................456
Zdobywanie plikw graficznych.............................................................................................456
Progresywny JPEG i GIF z przeplotem ..................................................................................456
Stosowanie przeroczystych GIF-w......................................................................................457
Co dalej? .................................................................................................................................458

Rozdzia 38. Tworzenie grafiki animowanej na potrzeby sieci WWW ..........................459

Wprowadzenie do animowanych GIF-w ..............................................................................459
Planowanie animacji ...............................................................................................................460
Tworzenie animacji.................................................................................................................462
Korzystanie z edytora animowanych GIF-w ........................................................................462
Umieszczanie animowanych GIF-w na stronie ....................................................................463
Testowanie animacji ...............................................................................................................464
Inne moliwoci animacji .......................................................................................................464
Shockwave i Shockwave Flash.........................................................................................464
Filmy.................................................................................................................................464
Aplety Javy .......................................................................................................................465
Kontrolki ActiveX ............................................................................................................465
Co dalej? .................................................................................................................................465

Rozdzia 39. Projektowanie i wykorzystywanie map odsyaczy ..................................467

Wprowadzenie do map odsyaczy...........................................................................................467
Projektowanie mapy odsyaczy...............................................................................................468
Mapy odsyaczy po stronie serwera i po stronie klienta .........................................................469
Tworzenie grafiki dla map odsyaczy .....................................................................................469
Korzystanie z edytora map odsyaczy.....................................................................................470
Element MAP..........................................................................................................................471
Element AREA .......................................................................................................................471
Budowa mapy odsyaczy ........................................................................................................472
Dodawanie tekstu alternatywnego ..........................................................................................472
Co dalej? .................................................................................................................................473

Rozdzia 40. Dodawanie dDwikw ...........................................................................475

Czym jest dwik cyfrowy?....................................................................................................475
Sprzt do nagrywania .......................................................................................................476
Gbia bitowa nagrywania ................................................................................................476
Czstotliwo prbkowania ..............................................................................................477
Mono czy stereo................................................................................................................477
Sprzt do odtwarzania.......................................................................................................477

Wprowadzenie

13

Wprowadzenie do formatw plikw dwikowych................................................................477

Wprowadzenie do dwiku strumieniowego ..........................................................................478
Zdobywanie plikw dwikowych .........................................................................................479
Nagrywanie plikw dwikowych..........................................................................................479
Edycja plikw dwikowych i dodawanie filtrw..................................................................480
Dodawanie plikw dwikowych do strony ...............................................................................481
Dwik wewntrzny .........................................................................................................481
Dwik zewntrzny ..........................................................................................................482
Co dalej? .................................................................................................................................482

Rozdzia 41. Tworzenie i dodawanie plikw cyfrowej animacji ...................................483

Wprowadzenie do cyfrowej animacji .....................................................................................484
Oczekiwania .....................................................................................................................484
mieci na wejciu, mieci na wyjciu...............................................................................484
Budowa animacji cyfrowej .....................................................................................................485
Liczba klatek na sekund..................................................................................................485
Rozdzielczo klatki .........................................................................................................485
Wprowadzenie do formatw plikw animacji cyfrowej.........................................................486
Wprowadzenie do animacji strumieniowej.............................................................................486
Rodzaje kompresji wideo........................................................................................................487
Zdobywanie plikw analogowej animacji wideo....................................................................487
Edycja animacji cyfrowej........................................................................................................487
Dodawanie animacji do strony WWW ...................................................................................489
Animacja wewntrzna ......................................................................................................489
Animacja zewntrzna........................................................................................................489
Nieocenione rda .................................................................................................................490
Co dalej? .................................................................................................................................490

Rozdzia 42. Zastosowanie rozszerzeE i kontrolek ActiveX........................................491

Element OBJECT....................................................................................................................492
Jak dziaaj rozszerzenia? .......................................................................................................492
Wady i zalety stosowania rozszerze......................................................................................494
Stosowanie rozszerze ............................................................................................................494
3D i animacja 3D ..............................................................................................................494
Dwik i animacja ............................................................................................................496
Rozszerzenia specjalistyczne............................................................................................497
Rozszerzenia komercyjne .................................................................................................497
Testowanie rozszerze ............................................................................................................498
Konfiguracja serwera ..............................................................................................................499
Wprowadzenie do ActiveX.....................................................................................................499
Wady i zalety stosowania kontrolek ActiveX.........................................................................499
Model bezpieczestwa ActiveX..............................................................................................500
Wyszukiwanie kontrolek ActiveX ..........................................................................................501
Wykorzystywanie kontrolek ActiveX.....................................................................................501
Definiowanie opcji (parametrw) ...........................................................................................502
Rozwizywanie problemw wystpujcych na Macu ............................................................503
Testowanie kontrolki...............................................................................................................504
Co dalej? .................................................................................................................................504

Rozdzia 43. Dodawanie apletw Javy ......................................................................505

Wprowadzenie do Javy ...........................................................................................................505
Wady i zalety stosowania Javy ...............................................................................................506
Maszyna wirtualna Javy ...................................................................................................507
Szybsze kompilatory.........................................................................................................507

14

HTML 4. Biblia
Model bezpieczestwa Javy....................................................................................................507
Narzdzia do tworzenia Javy ..................................................................................................508
Wstawianie apletw Javy........................................................................................................509
Definiowanie opcji (parametrw) ...........................................................................................510
Testowanie apletu ...................................................................................................................510
Wprowadzenie do Javy po stronie serwera ................................................................................511
Co dalej? .................................................................................................................................511

Rozdzia 44. Tworzenie subskrypcji ..........................................................................513

Wprowadzenie do techniki push .............................................................................................513
Nic nowego.......................................................................................................................514
Kanay...............................................................................................................................514
Marketing prowadzony za pomoc techniki push...................................................................514
Wprowadzenie do formatu definicji kanau............................................................................515
Skadnia CDF (XML) .......................................................................................................515
Grafiki...............................................................................................................................516
Subskrypcja kanau .................................................................................................................518
Co dalej? .................................................................................................................................518

Rozdzia 45. Dostp do zewntrznych baz danych .....................................................521

Omwienie zagadnie zwizanych z bazami danych .............................................................521
Tabele ...............................................................................................................................522
Klucze ...............................................................................................................................522
Relacje ..............................................................................................................................522
Popularne bazy danych .....................................................................................................522
ODBC ...............................................................................................................................523
Interfejs sie WWW baza danych........................................................................................523
Komunikacja z baz danych .............................................................................................524
Zwracanie rezultatw........................................................................................................525
Wnioski wypywajce ze wsppracy pomidzy sieci WWW i baz danych.................525
Opcje dostpu do bazy danych................................................................................................525
Trzy komponenty..............................................................................................................526
Dwufunkcyjny serwer WWW i baza danych ...................................................................526
Serwer WWW i dwufunkcyjna baza danych....................................................................527
Dostp do zewntrznej bazy danych bez potrzeby programowania .......................................527
Dostp do zewntrznej bazy danych za pomoc SQL-a .........................................................527
Co dalej? .................................................................................................................................528

Rozdzia 46. Tworzenie spoecznoci umieszczanie grupy dyskusyjnej i czatu ........529

Wprowadzenie do grup dyskusyjnych i czatu.........................................................................530
Aplikacje dla grup dyskusyjnych......................................................................................530
Aplikacje czatu .................................................................................................................530
Dodawanie grupy dyskusyjnej do serwisu..............................................................................531
Dodawanie czatu do serwisu...................................................................................................531
Czat tekstowy....................................................................................................................531
Czat graficzny ...................................................................................................................532
Tworzenie spoecznoci ..........................................................................................................532
Co moesz zaoferowa? ...................................................................................................532
Znany felietonista .............................................................................................................533
Rozmowy z profesjonalistami ..........................................................................................533
Poza czatem i grupami dyskusyjnymi.....................................................................................533
Co dalej? .................................................................................................................................534

Wprowadzenie

15

Cze VII Dynamiczny HTML ............................................................ 535

Rozdzia 47. Wprowadzenie do dynamicznego HTML-a
i modelu obiektw dokumentu (DOM)...................................................537
Czym jest dynamiczny HTML?..............................................................................................538
Podstawa zmian model obiektw dokumentu......................................................................540
Jak zosta zaimplementowany DOM? ..............................................................................541
DOM i kompatybilno przegldarek...............................................................................542
Struktura DOM .................................................................................................................543
Co dalej? .................................................................................................................................545

Rozdzia 48. Podstawy JavaScriptu ..........................................................................547

JavaScript dynamika w DHTML-u......................................................................................547
Dodawanie skryptw za pomoc elementu SCRIPT........................................................549
Wykonywanie JavaScriptu ...............................................................................................550
Obsuga zdarze w JavaScripcie ......................................................................................552
Waciwoci, metody i funkcje.........................................................................................555
Wysyanie danych ze strony do skryptu ...........................................................................557
Testowanie i usuwanie bdw znajdujcych si w skrypcie .............................................558
Kompatybilny JavaScript........................................................................................................559
Badanie rodowiska przegldarki ...........................................................................................559
Wykrywanie obiektw w JavaScripcie.............................................................................561
Co dalej? .................................................................................................................................563

Rozdzia 49. Ramki, warstwy i gra shellowa .............................................................565

Definiowanie ukrytego tekstu .................................................................................................565
Wywietlanie ukrytego tekstu...........................................................................................566
Tworzenie interaktywnego spisu treci ............................................................................566
Dynamiczne modyfikowanie stylw ................................................................................569
Skrypt................................................................................................................................569
Przesuwanie warstw................................................................................................................570
Wykrywanie obiektu DOM ..............................................................................................573
Ustawianie pozycji pocztkowej ......................................................................................573
Przesuwanie obiektw ......................................................................................................574
Co dalej? .................................................................................................................................576

Rozdzia 50. Tworzenie okien w JavaScripcie............................................................579

Czym jest okno?......................................................................................................................579
Zasady dziaania okien............................................................................................................580
Otwieranie okien .....................................................................................................................581
Okna specjalnego przeznaczenia ............................................................................................582
Okna na odlego.............................................................................................................583
Zamykanie okien ..............................................................................................................584

Dodatki ............................................................................ 587

Dodatek A Typy danych ........................................................................................589
Dodatek B Opis elementw HTML-a 4....................................................................591
Dodatek C Opis atrybutw ....................................................................................657
Dodatek D Opis kodw znakw w HTML-u 4...........................................................667
Dodatek E

Opis kaskadowych arkuszy stylw ........................................................671

16

Dodatek F

HTML 4. Biblia

Kody jzykw.......................................................................................707

Dodatek G Kolory..................................................................................................713
Dodatek H O CD-ROM-ie........................................................................................717
Skorowidz............................................................................................719

Rozdzia 3.

W tym rozdziale:
Uruchamianie edytora.
Nadawanie tytuu stronie.
Identyfikacja autora.
Wstawianie elementu BODY.
Dodawanie nagwkw.
Wpisywanie i edycja tekstu.
Podzia wierszy i zaczynanie nowego akapitu.
Tworzenie list.
Dodawanie cz.
Podgld strony.
Modyfikacje kocowe.
Skrcony opis elementw HTML-a.

Teraz, gdy zdobye ju podstawowe informacje na temat HTML-a 4 i wiesz, jak wane
jest oddzielenie zawartoci od znacznikw formatujcych, nadszed czas zakasa rkawy
i wzi si do roboty. Zanim skoczysz czyta ten rozdzia, bdziesz mia dziaajc stron
WWW. Nie bdzie to moe zbyt wyszukana strona, ale znajd si na niej wszystkie
podstawowe elementy. Pniej dodamy fontann i wodotryski.

Uruchamianie edytora
Na potrzeby pierwszej strony WWW skorzystasz z najprostszego edytora tekstowego,
doczonego do Twojego systemu operacyjnego. Jeeli pracujesz na pececie z systemem
Windows 95/98/2000 lub NT, to z menu Start wybierz Programy (Programs), a nastpnie

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

65

Cz I Zaczynamy pisa w HTML-u 4

66

zaznacz Akcesoria (Accessories) i wybierz Notatnik (Notepad). Zobaczysz okno podobne

do pokazanego na rysunku 3.1. Jeeli pracujesz na Macu, otwrz SimpleText. Pojawi
si okno podobne do pokazanego na rysunku 3.2. Jeeli pracujesz w rodowisku UNIX,
otwrz, wedug wasnego uznania, jeden z edytorw tekstowych (vi, pico, jove lub emacs).
Rysunek 3.1.
Notatnik jest edytorem
tekstowym doczanym
do systemu Windows

Rysunek 3.2.
SimpleText jest
doczany do systemu
operacyjnego Maca

Nawet jeeli posiadasz bardziej zaawansowane narzdzia do tworzenia serwisw WWW,

ktre zostay doczone do Twojego komputera lub ktre cigne z sieci WWW, albo
ktre sam kupie na razie ich nie uywaj. Pniej przyjdzie czas na programy zwikszajce wydajno. Najpierw musisz nauczy si kilku podstaw HTML-a, a w zalenoci od
tego, jaki program do edycji HTML-a posiadasz, moe on Ci w tym troch przeszkadza.

66

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

67

Nadawanie tytuu stronie

Czy kiedykolwiek prbowae doda jak stron do swoich ulubionych (opcja w przegldarce internetowej) tylko po to, aby przekona si, e ma ona jak nic nieznaczc
nazw? Ten problem by szczeglnie uciliwy we wczeniejszych wersjach przegldarek,
ktre nie umoliwiay edycji nazw ulubionych stron. Dlaczego jaka rozsdna nazwa (lub
czasami jakakolwiek nazwa) nie pokazywaa si na licie ulubionych stron? Dziao
si tak, gdy twrca strony nie umieci w niej tytuu.
Element TITLE jest jednym z najprostszych. Nie posiada adnych atrybutw. We wczeniejszych wersjach HTML-a tytu nie by wymagany. W HTML-u 4 brak tytuu jest bdem
skadni. Wymagany jest zarwno znacznik otwierajcy, jak i zamykajcy.
Dobrym pomysem jest nadawanie stronie moliwie najbardziej opisowego tytuu. Poza
tym, e pojawia si on na licie ulubionych stron, tytu jest rwnie wywietlany na belce tytuowej okna przegldarki. Niektrzy twrcy serwisw WWW maj zwyczaj nazywania wszystkich swoich stron tak samo zwykle wstawiaj tam nazw firmy. Nie jest to zbyt
dobra praktyka, poniewa tytu powinien zawiera uyteczne informacje. W przeciwiestwie do tytuw ksiek, w ktrych wydawcy mog mie narzucone pewne ograniczenia,
w tytule strony WWW moesz umieci tyle sw, ile potrzebujesz, aby przekaza
swoj wiadomo w rozsdnych granicach oczywicie. Dwie najpopularniejsze przegldarki obsuguj tytuy dugoci do 96 lub 100 znakw. Poniewa wyszukiwarki internetowe czsto wykorzystuj tytu strony WWW jako nagwek jej zawartoci, masz co
najmniej trzy powody, aby by on jak najlepszy.

Na pocztku to, co ma by na pocztku

Jak si dowiedziae z poprzedniego rozdziau, element TITLE znajduje si w elemencie
HEAD. A gdzie znajduje si element HEAD? Oczywicie w elemencie HTML. Tak wic
zanim bdziesz mg nada tytu swojej stronie, do pustego dokumentu bdziesz musia
wpisa nastpujce rzeczy:
informacj o wersji,
znacznik otwierajcy elementu HTML,
znacznik otwierajcy elementu HEAD.

Sprbuj wykona swoje pierwsze zadanie. Poniej pokazujemy, jak powinna wyglda
informacja o wersji, aby nie musia si cofa o kilka stron. Ale musisz wiedzie jak
wygldaj znaczniki otwierajce dla HTML i HEAD. Wpisz wic:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4-01 Strict//EN"
"http://www.w3.org/TR/html40/Strict.dtd">

Teraz dodaj znacznik otwierajcy elementu HTML i znacznik otwierajcy elementu HEAD.
Umie kady z nich w oddzielnym wierszu. Jeeli chcesz, moesz rwnie wstawi pusty
wiersz pomidzy nimi.

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

67

Cz I Zaczynamy pisa w HTML-u 4

68

Teraz dodamy tytu, co wymaga znacznika otwierajcego elementu TITLE, czyli <TITLE>.
Zawartoci elementu TITLE powinien by tytu Twojej strony, tak wic wpisz go obok.
Na kocu umie znacznik zamykajcy elementu TITLE, czyli: </TITLE>.

Identyfikacja autora
Jak pewnie pamitasz, powiedzielimy ju o jednej rzeczy podczas omawiania czowki
dokumentu HTML, czyli o metadanych. Metadane s to informacje o informacjach znajdujcych si na stronie. Zalicza si do nich imi i nazwisko autora, oprogramowanie uyte
do napisania strony, nazwa firmy (jeeli taka istnieje), informacje kontaktowe itd.
Nie bdziemy si teraz zajmowali skadni elementu META. Chcesz tylko zaznaczy, e
to Ty jeste autorem strony, a element META idealnie si do tego nadaje:
<META name="Author" content="tutaj wstaw swoje imi i nazwisko">

Jak widzisz, element META posiada przynajmniej dwa atrybuty. Jednak wyjtkowo elementu META polega na tym, e zamiast zawartoci wstawianej pomidzy znacznikiem
otwierajcym i zamykajcym posiada on atrybut content. Nie ma rwnie znacznika
zamykajcego. Poznasz jeszcze wiele innych zastosowa elementu META.
Podczas wywietlania zawartoci strony WWW nie zobaczysz w przegldarce adnych
elementw META. W3C pozostawio implementacj elementu META producentom przegldarek. Jednak rozwaa si moliwo wywietlania w przyszoci niektrych z tych
danych w przegldarce jest to wic jeszcze jeden powd na to, aby je umieszcza.

Definiowanie sw kluczowych
w celu lepszego wyszukiwania
Zdajemy sobie spraw, e prawdopodobnie nie bdziesz prbowa rejestrowa swojej
pierwszej strony WWW w wyszukiwarkach chocia oczywicie moesz jednak dobrze
by byo, aby wyrobi sobie dobre nawyki. Dobrym nawykiem jest dodanie podczas tworzenia strony WWW elementu META ze sowami kluczowymi.
Dodaj do swojego dokumentu nastpujcy znacznik:
<META name="keywords" content="lista sw kluczowych">

gdzie lista sw kluczowych jest list rozdzielon przecinkami, np.: zarzdzanie listami,
wiadomo pocztowa, zarzdzanie midzywydziaowe, ksiga goci, strona rejestracyjna.
W niektrych wyszukiwarkach wielko liter ma znaczenie, z tego wzgldu w Twoim
interesie jest wpisanie: ksiga goci, Ksiga goci i Ksiga Goci jako trzech oddzielnych
sw kluczowych. Niestety, niektre wyszukiwarki mog to potraktowa jako spam
czyli prb oszukania ich, aby umieci stron wyej na licie odnalezionych stron.

68

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

69

Kilka uwag na temat wyszukiwarek

Wikszo wyszukiwarek korzysta przy indeksowaniu zawartoci strony z pomocy
metadanych, ktre oznaczye jako sowa kluczowe (name="keywords"). Istniej w zwizku z tym pewne reguy, ale zmieniaj si one w zalenoci od
wyszukiwarki. W Internecie znajduje si wiele informacji na temat sposobw
umieszczenia strony wyej na licie odnalezionych stron. Na przykad jedna
z wyszukiwarek automatycznie ignoruje kade sowo wystpujce wicej ni
siedem razy w acuchu sw kluczowych nawet jeeli zostao ono napisane
w rny sposb. Znajomo zasad obowizujcych podczas rejestrowania strony w wyszukiwarce jest bardzo wana. Jednak coraz trudniej jest je oszuka.
Interesujcym narzdziem, ktre moe Ci pomc w sprawdzeniu rankingu
strony w rnych wyszukiwarkach, jest WebPosition Gold. W chwili publikacji tej
ksiki byo to jedyne komercyjne oprogramowanie, sprawdzajce pozycj
strony w rnych wyszukiwarkach na podstawie sw kluczowych, ktrych si
uyo. Istnieje wiele serwisw, ktre mog to zrobi za Ciebie, ale WebPosition
Gold umoliwia Ci wykonanie tego samodzielnie, w okrelonych odstpach
czasu i jeeli tego chcesz ze swojego wasnego pulpitu. Czasowa wersja
WebPosition Gold jest dostpna bezpatnie na stronie www.webposition.com/
download.htm. Na rysunku poniej wida okno programu WebPosition Gold.

WebPosition Gold znajduje wybran stron we wszystkich wyszukiwarkach

i informuje Ci o osignitych rezultatach.
Wiele gazet internetowych zawiera kruczki i sztuczki pomagajce w umieszczeniu
strony wyej na licie. WebPosition Analyzer publikuje swoj wasn gazetk. Inn
wspania gazetk tego typu jest Search Engine Report Danny'ego Sullivana. Moesz si wpisa na list subskrybentw na stronie www.searchenginewatch.com.

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

69

Cz I Zaczynamy pisa w HTML-u 4

70

Wstawianie elementu BODY

Co musisz zrobi zanim bdziesz mg doda element BODY? Zamkn element HEAD.
Dodaj wic znacznik zamykajcy elementu HEAD. Nastpnie wpisz znacznik otwierajcy
elementu BODY.
Element BODY posiada wiele atrybutw, ktrych moesz uy, aby zmieni wygld dokumentu. W poprzednich wersjach HTML-a tutaj wanie definiowae grafik ta, jeeli
tak miae. Moga by ona powtarzana w caym obszarze okna przegldarki, co mogo
wyglda adnie lub okropnie. Tutaj rwnie ustawiao si kolor ta, kolor tekstu, kolor
czy, kolor odwiedzonych czy i kolor aktywnych czy. Zgodnie z zasadami HTML-a 4
wszystkie te dane zwizane z wygldem dokumentu zostay przeniesione do arkusza
stylw. Dziki temu zmniejszono liczb znacznikw w tekcie, co poprawio jego czytelno podczas edycji. W3C uznaa te atrybuty elementu Body za niezalecane (deprecated).
Niezalecany element lub atrybut to taki, ktrego wedug W3C nie powiniene uywa.
W przyszych wersjach HTML-a moe one nie dziaa w przegldarkach lub powodowa
niezamierzony efekt. Na razie wszystkie najbardziej popularne przegldarki obsuguj niezalecane elementy. Oznacza to, e nie bdziesz mia z nimi adnych problemw, jednak
lepiej ich unika podczas tworzenia nowych serwisw WWW.

Dodawanie nagwkw
Dalsze wykonywanie naszych instrukcji i wpisywanie wszystkiego, co kaemy Ci wpisa,
byoby zbyt proste. Zamiast tego zatrzymaj si na chwil. Pomyl, co chcesz umieci
na swojej stronie. Wreszcie doszlimy do tego punktu, w ktorym to, co wpiszesz, pojawi
si w oknie przegldarki.
Jak nazw nadae stronie, korzystajc z elementu TITLE? Czy faktycznie tak j chciae
nazwa? Jeeli nie, cofnij si i zmie tytu. W dalszej czci ksiki szczegowo omwimy
tworzenie zawartoci strony, ale nie oznacza to, e do tego czasu moesz publikowa bezsensowne informacje.
Aby doda nagwek do swojej strony, uyjesz elementw nagwkw. Zgodnie z zasadami
HTML-a 4 bdziesz musia poinformowa przegldark tylko o tym, e jest to nagwek,
oraz okreli jego wano (numer 1 bdzie oznacza najwaniejszy, a numer 6 najmniej
wany). Gdy nadejdzie czas okrelania ich wygldu, to albo moemy pozostawi t
kwesti przegldarce, albo uy do tego arkuszy stylw.
Elementami nagwka s: H1, H2, H3, H4, H5 i H6. Nie prbuj zmienia ich wygldu.
Zrobimy to pniej za pomoc arkuszy stylw. Na razie wystarczy, e bdziesz przypisywa
odpowiednie elementy nagwka do zawartoci, ktr zechcesz wyrni w nagwku.
Jeeli miae zwyczaj dodawa tutaj rwnie atrybut okrelajcy wyrwnanie, dobrze
by byo, gdyby przesta to robi. W3C nie zaleca wykorzystywania atrybutw wyrwnywania w elementach nagwkw (uyjemy do tego arkuszy stylw).
Na rysunku 3.3 pokazano, jak moesz wykorzysta elementy H1, H2 i H3 do okrelenia
rnego rodzaju stopnia wanoci tekstu na stronie.

70

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

71

Rysunek 3.3.
Przykad
wykorzystania
elementw
nagwka
na stronie

Jest to rwnie dobry moment na sprawdzenie swojego HTML-a. Jeeli ponisze znaczniki nie bd si zgadzay z Twoimi, to powiniene jeszcze raz przejrze kod i sprawdzi,
czego brakuje. Oczywicie zawarto nie bdzie si zgadzaa.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http:/www.w3.org/TR/html40/Strict.dtd">
<HTML>
<HEAD>
<TITLE>Magazyn 3D</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=iso-8859-2">
</HEAD>
<BODY >
<H1>Magazyn 3D</H1>
<H2>Czasopismo powicone projektowaniu i grafice</H2>
<P>Wydawane w formacie A4 o objtoci 116 penokolorowych stron. Do
kadego numeru jest bezpatnie doczany CD-ROM.</P>
<P>amy &quot;3D&quot; s przeznaczone:</P>
<H3>Dla grafikw</H3>
<P>Przegld oprogramowania i sprztu, jak poprawi jako projektw, jak
je umieci na kasecie wideo i w internecie, jak usprawni
postprodukcj, jak...</P>
<H3>Dla architektw</H3>
<P>Jak dobrze zrobi wizualizacj, najlepsze projekty, opisy
programw.</P>
<H3>Dla inynierw</H3>
<P>Mechanikw i konstruktorw (prezentacja projektw, opisy
specjalizowanych nakadek).
</P>
</BODY>
</HTML>

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

71

Cz I Zaczynamy pisa w HTML-u 4

72

Wpisywanie i edycja tekstu

Teraz przyszed czas na wpisywanie tekstu waciwej zawartoci strony. Moesz korzysta
z dwch rodzajw tekstu: akapitw i blokw cytatw.

Akapity
Wikszo tekstu jest podzielona na akapity. Do oznaczenia akapitw suy w HTML-u
element P. Element P ma znacznik otwierajcy i znacznik zamykajcy. Pomidzy nimi
umieszczasz swoj zawarto. Na potrzeby tego podrozdziau nie bdziemy stosowali
adnych atrybutw. Jednym z atrybutw, z ktrym moge si wczeniej spotka lub go
uywa, by atrybut align, ale, jak ju wspomnielimy, jego stosowanie nie jest zalecane
przez W3C.

Bloki cytatw
Innym rodzajem tekstu, ktry moesz umieci na swojej stronie, jest przytoczenie wypowiedzi kogo innego. Jeeli w cytat zajmuje wicej ni jeden lub dwa wiersze, moesz
go umieci w oddzielnym bloku. W ten sposb zazwyczaj umieszcza si na stronach recenzje programw. Na rysunku 3.4 pokazano blok cytatu z recenzji zamieszczonej w czasopimie Chip.
Rysunek 3.4.
Bloki cytatw

72

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

73

Podzia wierszy
i zaczynanie nowego akapitu
Czasami chciaby wywietli cz tekstu w nowym wierszu. W poprzednim przykadzie,
w nowym wierszu, pod numerem czasopisma znajduje si tytu ksiki. Aby uzyska
taki efekt, wystarczy w miejscu podziau wiersza wstawi element BR. Nie chcielimy,
aby tytu ksiki by w oddzielnym akapicie po czci dlatego, e strukturalnie wcale nim
nie jest. Gdybymy oznaczyli tytu ksiki jako oddzielny akapit, to przed nim zostaby
wstawiony odstp. Czy nie wygldaoby to dziwnie?
Element BR nie posiada atrybutw ma tylko znacznik otwierajcy. Nie posiada zawartoci
ani znacznika zamykajcego. Jest to najprostszy element, jaki mona sobie wyobrazi.
<P align="right">Chip, 11/2000, (rj)<BR>
"JavaScript. Ksiga eksperta"</P>

Zapobieganie podziaowi wierszy

Przeciwiestwem wstawienia znacznika podziau wiersza jest zapobieganie podziaowi
wiersza. Czasami masz acuch sw, ktre chciaby umieci w jednym wierszu. Na
przykad: Marzec 1788. Z wielu wzgldw moesz chcie, aby Marzec i 1788 pojawiay
si zawsze w tym samym wierszu. Moesz zapobiec automatycznemu podziaowi wiersza,
ktrego rezultatem byoby swko Marzec na kocu wiersza i 1788 na pocztku wiersza
nastpnego, wstawiajc tward spacj pomidzy Marzec i 1788. Twarda spacja jest znakiem
specjalnym (pamitasz, w przypadku znakw specjalnych w przeciwiestwie do reszty
HTML-a wielko liter ma znaczenie), ktry nie pojawia si na ekranie ani na wydruku.
Aby wstawi tward spacj, moesz uy albo jej znakowej reprezentacji: &nbsp;
(nonbreaking space), albo kodu dziesitnego &#160;. Tak wic zapis Marzec 1788 wygldaby nastpujco:
Marzec&nbsp;1788

Dodawanie linii poziomych

Na swojej stronie moesz umieci linie poziomie. Na przykad czsto spotyka si poziome
linie pomidzy stron i stopk. Stopka zawiera tekst pojawiajcy si na kadej stronie,
ktry nie jest zwizany bezporednio z treci tej strony. Na przykad prawie zawsze
moesz zobaczy stopki na stronach czasopism, zawierajce numer strony.
Na stronach WWW stopka zawiera zwykle informacje o prawach autorskich, czasami
dat utworzenia strony, czy sposb, w jaki mona skontaktowa si z autorem. Wiele
stron zawiera liczniki odwiedzin, ktre tak naprawd w aden sposb nie informuj o liczbie
odwiedzajcych stron, nawet jeeli napisano, e to wanie pokazuj.
Na rysunku 3.5 znajduje si przykad strony, na ktrej efektywnie wykorzystano linie poziome.

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

73

Cz I Zaczynamy pisa w HTML-u 4

74
Rysunek 3.5.
Pozioma linia znajduje
si dokadnie tam,
gdzie powinna

Element linii poziomej HR jest prawie tak prosty, jak element BR. Wymaga znacznika
otwierajcego, natomiast niedozwolony jest znacznik zamykajcy. Element ten nie posiada zawartoci. Jeeli wiesz co na temat atrybutw elementw HR, to zapomnij o nich.
W3C uznaje wszystkie atrybuty formatujce za niezalecane.

Tworzenie list
Istnieje wiele powodw, dla ktrych moesz umieci list na swojej stronie:
Mylisz w kategoriach list.
Prbujesz kogo o czym przekona i chcesz, eby Twoje argumenty byy jasno

wypunktowane.
Chcesz opisa kolejno wykonywane czynnoci.
Wiesz, e atwiej zapamituje si jaki materia, jeeli jest on wydzielony z reszty

tekstu.
Bez wzgldu na powody, HTML zaspokoi Twoje potrzeby w tym zakresie. W HTML-u
istniej trzy rodzaje list:
listy wypunktowane (zwane listami nieuporzdkowanymi),
listy numerowane (zwane listami uporzdkowanymi),
listy definicji.

Omwimy je wszystkie szczegowo w dalszej czci ksiki, na razie zatrzymamy si na

chwil tylko przy listach wypunktowanych i numerowanych.

74

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

75

Listy wypunktowane
Moesz je nazywa listami wypunktowanymi, ale w HTML-u nazywaj si listami nieuporzdkowanymi unordered lists (UL). Listy nieuporzdkowane s tworzone za pomoc
elementu UL. Natomiast dla kadej pozycji listy potrzebujesz elementu LI (list item).
Element UL wymaga znacznika otwierajcego i znacznika zamykajcego. Pomidzy nimi
znajduj si pozycje listy. Moesz oczywicie pomidzy tymi znacznikami umieci inny
tekst, ale dopki nie bdzie on czci elementu LI, nie pojawi si ze znakiem wypunktowania z przodu.
Element LI wymaga znacznika otwierajcego. Znacznik zamykajcy jest opcjonalny. Po
znaczniku otwierajcym wpisujesz dowolny tekst, ktry chcesz umieci w licie. Kada
nowa pozycja listy wymaga nowego elementu LI. Oto dowd:
<H2>Specjalna oferta prenumeraty Magazynu 3D</H2>
<P>Czasopisma dla:</P>
<UL>
<LI><B> grafikw</B> (przegld oprogramowania i sprztu, jak
poprawi jako projektw, jak je umieci na kasecie
wideo i w internecie, jak usprawni postprodukcj, jak...)
</LI>
<LI><B> architektw</B> (jak dobrze zrobi wizualizacj, najlepsze
projekty, opisy programw) </LI>
<LI><B> inynierw</B> mechanikw i konstruktorw (prezentacja
projektw, opisy specjalizowanych nakadek). </LI>
</UL>

Moesz wykona kilka interesujcych sztuczek z listami wypunktowanymi, na przykad zagnieda je, ale poczekajmy z tym do rozdziau 16.,
w ktrym szczegowo omwimy listy.

Listy numerowane
Listy numerowane tworzy si za pomoc elementu OL (lista uporzdkowana ordered
list). Element OL wymaga znacznika otwierajcego i znacznika zamykajcego. Kada
pozycja listy jest czci oddzielnego elementu LI. Uywasz tutaj dokadnie tego samego
elementu LI, jak w przypadku list wypunktowanych. Spjrz na poniszy kod:
<P>Wystarczy, e wykupisz prenumerat na sze kolejnych numerw
Magazynu 3D,a&nbsp;dodatkowo otrzymasz:</P>
<OL>
<LI><B>Koszulk 3D</B></LI>
<LI>
W okresie wanoci prenumeraty<B> 11% zniki</B> na zakup
wszystkich ksiek Wydawnictwa Helion</LI>
<LI><B>Gwarancj jakoci</B> - jeeli uznasz, e 3D nie jest
pismem dla Ciebie, moesz w&nbsp;dowolnej chwili przerwa
prenumerat, otrzymujc zwrot pienidzy za niedostarczone
numery. </LI>
</OL>

Na rysunku 3.6 pokazano, co z Twoimi listami zrobia przegldarka.

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

75

Cz I Zaczynamy pisa w HTML-u 4

76
Rysunek 3.6.
Dwa rodzaje list

Dodawanie $cza
Jak mgby utworzy stron hipertekstow bez cza przynajmniej jednego cza? Skadnia cza jest cakiem prosta. Do jego utworzenia uywasz elementu A (kotwica lub zakotwiczenie anchor). Tak dla zabawy umiecimy jedno cze do innego miejsca w Twoim
dokumencie. Drugie cze, jakie wstawimy, bdzie wskazywao na stron Wydawnictwa
Helion. Za chwil napiszesz kod, dziki ktremu poczysz swoj stron ze stron Wydawnictwa Helion, ale zanim to zrobisz, wykorzystasz grafik znajdujc si na CD-ROM-ie
doczonym do ksiki. Pewnie ju si zastanawiae, co si na nim znajduje, prawda?
Najpierw skadnia elementu A. Wymagany jest zarwno znacznik otwierajcy, jak i zamykajcy. Konieczne jest take wpisanie aktywnego tekstu (tekstu, ktry mona klikn,
aby przenie si w inne miejsce). W przypadku odnonika, na ktre wskazuje cze,
zawarto jest opcjonalna, ale zalecamy aby j wstawi, poniewa niektre przegldarki
nie znajd odnonika, ktry nie posiada zawartoci.

Dodawanie cza wewn#trznego

Interesujc czci elementu A s jego atrybuty. Aby zdefiniowa cze wewntrzne,
uywasz elementu A zarwno do utworzenia cza, jak i okrelenia miejsca docelowego (odnonika). Najpierw okrelimy miejsce docelowe, na ktre bdzie wskazywao
cze. Aby to zrobi, naley uy atrybutu name elementu A, czyli:
<A name="Moliwoci">Program oferuje nastpujce moliwoci:</A>

76

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

77

Skd wemiemy warto atrybutu name? Po prostu wymylimy j. Co uzyskamy, tworzc

miejsce docelowe cza na naszej stronie? Na razie nic, ale moemy je wykorzysta
w poczeniu z aktywnym tekstem wpisanym w innym miejscu strony.
Tak dla przypomnienia, przeanalizujmy powyszy element A:
Znacznik otwierajcy:

<A name="Moliwoci">

Para atrybut-warto:

name= "Moliwoci"

Atrybut:

name

Warto:

Moliwoci

Zawarto:

Program oferuje nastpujce moliwoci:

Znacznik zamykajcy:

</A>

Utwrzmy teraz cze do odnonika, ktry przed chwil zdefiniowalimy. Aby to zrobi,
uyjemy atrybutu href. Podobnie jak wszystkie inne atrybuty, atrybut href musi mie
warto. Jak warto bdzie mia Twoim zdaniem atrybut href w naszym przykadzie?
Jeeli pomylae o Moliwoci, to si nie pomylie. Musimy tylko wprowadzi jedn ma
modyfikacj. Wewntrz znakw cudzysowu, z przodu wartoci, dodamy # (znak krzyyka).
W tym programie znajdziesz<A href="#Moliwoci"> moliwoci</A> ktrych
nie posiadaj inne programy.

Gdy spojrzysz na ten kod w przegldarce, nie zobaczysz odnonika, ale jeeli klikniesz
podwietlone swko moliwoci, zostaniesz przeniesiony do listy moliwoci. Przegldarka wie, gdzie s odnoniki, ale Tobie ich nie pokae.
Utworzye trudniejsz wersj cza, teraz przejdziemy do wersji atwiejszej.

Dodawanie cza zewn#trznego

Gdy tworzysz cze do miejsca znajdujcego si na innej stronie, bez wzgldu na to, czy
jest ona czci Twojego serwisu internetowego, czy znajduje si na jakim odlegym
serwerze, uywasz elementu A z atrybutem href dokadnie tak, jak w poprzednim
przykadzie. Wskazanie strony znajdujcej si gdzie indziej wymaga jednak troch wicej informacji, ni w przypadku, gdy wskazujesz miejsce wewntrz tego samego dokumentu. Warto atrybutu href bdzie wic troch dusza.
W tym przykadzie chcesz wskaza stron Wydawnictwa Helion. Zdecydowae rwnie,
e chcesz na swojej stronie wspomnie, i zostaa ona utworzona zgodnie z zasadami
HTML-a 4. Wiersz kodu powinien wyglda znajomo, z jednym wyjtkiem: warto atrybutu href jest w tym przypadku adresem URL strony gwnej Wydawnictwa Helion.
<a href="http://helion.pl">Ta strona zostaa utworzona zgodnie
z zasadami HTML 4</A>

Nie jest to zbyt atrakcyjny tekst, ale pniej i tak zastpimy go grafik. Na razie masz
aktywne cze do odlegego serwera. Czy nie taki jest podstawowy cel hipertekstu?

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

77

Cz I Zaczynamy pisa w HTML-u 4

78

STOP! Teraz zapisz swj plik! Jeeli nie pracujesz w Windows 3.11,
nazwij go Mojpierwszy.html, w przeciwnym razie musisz go nazwa
Mojpierwszy.htm. Jeeli pracujesz w Windows 3.1, bdziesz musia
zapamita, e za kadym razem, gdy kaemy Ci nazwa plik nazwa.html,
Twoje pliki powinny mie nazw nazwa.htm, dobrze? Wicej nie bdziemy
Ci o tym przypomina.

Podgl$d strony
Teraz, gdy ju zapisae swoj stron, moesz j otworzy w przegldarce. Jeeli co
wyglda inaczej ni zamierzae, jeszcze raz przejrzyj znajdujc si na kocu rozdziau 1.
list rzeczy, ktre powiniene sprawdzi, aby zapobiec bdom w skadni. Sprawd znaczniki zamykajce (i te irytujce prawe ukoniki). Upewnij si rwnie, e wstawie znaki
cudzysowu dla wszystkich atrybutw.
Prawdopodobnie jeste ju przyzwyczajony do otwierania stron w Twojej przegldarce
w ten sposb, e klikasz lini adresu i wpisujesz URL. Jednak strona, ktr utworzye,
nie znajduje si jeszcze na serwerze sieciowym, nie posiada wic adresu URL. Nie oznacza
to jednak, e nie moesz zobaczy swojej strony w przegldarce. Jak to zrobi?
W menu Plik (File) Twojej przegldarki zobaczysz polecenie Otwrz stron (Open Page)
lub Otwrz (Open), w zalenoci od producenta i wersji przegldarki. Zaznacz opcj, ktr
posiadasz. Wcinij Wybierz Plik (Choose File) lub Przegl#daj (Browse), w zalenoci od tego,
co masz na ekranie. Korzystajc ze standardowego okna otwierania plikw, znajd swj
plik HTML nazwany Mojpierwszy.html. Zaznacz go, a nastpnie kliknij Otwrz (Open).
Gdy wprowadzisz zmiany w pliku HTML, to aby je zobaczy, wystarczy klikn przycisk
Od&wie' (Reload lub Refresh), ktry znajduje si u gry okna przegldarki.

Modyfikacje ko&cowe
Wyjmij CD-ROM doczony do ksiki!
Poniewa dobrze si spisae i postpowae zgodnie z zasadami HTML-a 4, zostaniesz
teraz nagrodzony. Utworzylimy cztery rne arkusze stylw, aby Twoja strona wygldaa
naprawd wspaniale! W kolejnym podrozdziale dowiesz si, gdzie znale pliki arkuszy
stylw, gdzie je skopiowa i jak je poczy ze stron.

Kopiowanie arkuszy stylw

Mgby oczywicie utworzy cze do arkuszy stylw znajdujcych si na CD-ROM-ie bez
potrzeby ich kopiowania, poniewa jednak zakadamy, e pewnego dnia moesz zechcie
uy swojego napdu CD-ROM do czego innego, powiniene je skopiowa do swojego
komputera.

78

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

79

Skopiuj cztery pliki znajdujce si na CD-ROM-ie w folderze Rozdz03

do tego samego katalogu, w ktrym przechowujesz Twj plik HTML,
nazwany Mojpierwszy.html.
Pliki maj nastpujce nazwy:
prof.css
wild.css
retro.css
earthy.css

Jeeli chcesz, moesz je otworzy w edytorze tekstowym i si im przyjrze. Pniej

dowiesz si, co to wszystko znaczy. Jednak na razie ich nie modyfikuj. Jeszcze przyjdzie
na to czas.

czenie strony z arkuszem stylw

Poczenie strony z arkuszem stylw wymaga uycia elementu LINK. Jest to zupenie
inny rodzaj cza od tego, ktrego uywasz do definiowania poczenia z innymi stronami.
Element LINK posiada znacznik otwierajcy, nie ma znacznika zamykajcego ani zawartoci oraz posiada trzy atrybuty (ktrych uyjemy do poczenia strony z zewntrznym
arkuszem stylw).
Pierwszym atrybutem jest atrybut href. Powiniene pamita atrybut href z elementu A.
Tutaj wykonuje on dokadnie to samo. W tym przypadku wartoci atrybutu href jest
nazwa arkusza stylw. Poniewa wszystkie cztery arkusze stylw znajduj si w tym
samym miejscu, co plik HTML, nie musisz ju umieszcza adnych dodatkowych informacji na temat katalogu, w ktrym si znajduj Pniej omwimy sytuacj, w ktrej
arkusz stylw bdzie si znajdowa gdzie indziej.
Nastpnym atrybutem jest atrybut rel (zwizek relationship). Ten atrybut okrela
zwizek tego cza z Twoj stron. Dwa najpopularniejsze atrybuty zwizku to stylesheet,
ktry oznacza, e jest to domylny arkusz stylw dla strony oraz alternate stylesheet,
ktry oznacza, e jest to alternatywny arkusz stylw dla strony. Poniewa ta strona ma tylko
jeden arkusz stylw (cierpliwoci pniej zajmiemy si ciekawszymi rzeczami), uyjesz
stylesheet jako wartoci atrybutu rel.
Na podstawie ostatniego atrybutu powiniene si zorientowa, e element LINK ma wicej
ni jedno zastosowanie. W tym przypadku uyjemy elementu LINK do poczenia arkusza
stylw, dlatego wartoci atrybutu type jest text/css (oznacza to, e jest to plik tekstowy
z rozszerzeniem css).
W ten sposb otrzymujemy kompletny znacznik:
<LINK href="prof.css" rel="stylesheet" type="text/css">

Musisz umieci ten znacznik wewntrz elementu HEAD. Moesz go umieci gdziekolwiek wewntrz HEAD, ale zalecamy, aby go wstawi za elementami META.

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

79

Cz I Zaczynamy pisa w HTML-u 4

80

Teraz zapisz swj plik i zobacz efekt wprowadzonych zmian w przegldarce. Nie oznacza
to, e musisz zamkn swj edytor tekstu, aby zobaczy zmiany, czy zamkn przegldark,
aby edytowa plik. To tylko wyduy czas pracy.
Jeeli nie jeste przyzwyczajony do korzystania z wicej ni jednego
programu naraz, mog Ci si przyda nastpujce informacje. Po
pierwsze, moesz mie kilka otwartych programw, i po drugie, moesz si w prosty sposb przecza pomidzy nimi. Jeeli korzystasz
z dowolnej wersji systemu Windows, moesz przecza si pomidzy
uruchomionymi programami, przytrzymujc wcinity klawisz Alt i wciskajc Tab. Gdy zobaczysz ikon programu, ktrego chcesz uy, pu
klawisz Alt. Program, ktry opucie, w dalszym cigu jest uruchomiony, tyle e teraz pracuje w tle.
W przypadku Maca kliknij ikon w prawym grnym rogu ekranu. Zobaczysz ikony wszystkich otwartych programw. Kliknij jedn z nich.

Zmiana stylw
Teraz wr do edytora tekstowego i zmie warto atrybutu href. Uyj nazwy jednego
z pozostaych arkuszy stylw. Zapisz plik i zobacz efekty. Wyprbuj wszystkie arkusze
i zobacz, ktry Ci si najbardziej spodoba.
Pamitaj najpierw musisz zapisa swj plik HTML, a nastpnie odwiey lub przeadowa stron w przegldarce. Dopiero wtedy zobaczysz rezultaty wprowadzonych zmian.
Kolejno postpowania jest nastpujca:
1. Wprowad zmiany w edytorze tekstowym, zapisz plik.
2. Odwie lub przeaduj swoj stron w przegldarce.
3. Zobacz stron po wprowadzonych zmianach.

Skrcony opis elementw HTML-a

Celem tego rozdziau byo jak najszybsze zapoznanie Ci z podstawami zasadami formatowania tekstu za pomoc elementw HTML. Gdyby wszystkie elementy i ich atrybuty
omawiane w tej ksice zostay tak szczegowo opisane, to ksika ta musiaaby by
trzy razy grubsza, ni jest teraz. Dlatego pozostae elementy opisalimy w sposb skrtowy.
Z takiego opisu dowiesz si, czy element posiada znacznik otwierajcy, czy ma jak
zawarto, czy jest znacznik zamykajcy i czy ktry z elementw jest zakazany lub
opcjonalny. Znajdziesz tam rwnie list atrybutw razem z informacj, czy ktrykolwiek
z nich jest wymagany, opcjonalny, niezalecany lub przestarzay. Nowe atrybuty omwimy
bardziej szczegowo. Natomiast atrybuty, z ktrymi si ju spotkae, nie bd ju omawiane.

80

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

Rozdzia 3. Tworzenie pierwszej strony WWW

81

Oto dwa przykady:

Element listy

<LI>

Znacznik otwieraj/cy:

Atrybuty:

wymagany
opcjonalna
opcjonalny
brak

Blok cytatu

<BLOCKQUOTE>

Znacznik otwieraj/cy:

wymagany
wymagana
wymagany
cite: URL

Zawarto:
Znacznik zamykaj/cy:

Zawarto:
Znacznik zamykaj/cy:
Atrybuty:

id,class: identyfikatory dokumentu

lang: informacje o jzyku
dir: kierunek tekstu
title: tytu elementu
style: definicje stylu

Co dalej?
Przejd@ do rozdziau 4. Przeczytasz tam, jak opublikowa swoj stron.
Dopki nie umiecisz swojego dziea na serwerze sieciowym, nikt nie
bdzie mg jej zobaczy.
Jeste ju zmczony wpisywaniem tych wszystkich znacznikw? Przejd@
do rozdziau 8. i znajd@ program do tworzenia HTML-a, ktry bdzie Ci
najbardziej odpowiada.

Podsumowanie
Gdy tylko zrozumiesz struktur HTML-a, utworzenie wasnej strony potrwa tylko chwil.
Bdziesz chcia wpisa tytu i doda kilka metadanych na temat zawartoci strony
umiecisz te informacje w czowce dokumentu. Wikszo stron ma kilka nagwkw
wpisanych w sekcji BODY. Dodaj jaki tekst, by moe blok cytatu, jakie listy i oczywicie kilka czy, a Twoja strona bdzie miaa solidne podstawy.
Naprawd ciekawe rzeczy pojawi si po dodaniu arkusza stylw. W jednym wierszu
kodu moesz zupenie zmieni wygld stron. Pniej nauczysz si, jak samodzielnie pisa
arkusze stylw, ale na razie zawsze moesz znale co ciekawego w sieci WWW i to
wykorzysta (dlaczego nie?).

C:\Andrzej\PDF\HTML 4. Biblia\03.doc

81

82

82

Cz I Zaczynamy pisa w HTML-u 4

C:\Andrzej\PDF\HTML 4. Biblia\03.doc