IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

HTML. Kurs
webmastera
Autor: Donna L. Baker
Tumaczenie: Tomasz mijewski
ISBN: 83-7361-511-3
Tytu oryginau: HTML Complete Course
Format: B5, stron: 360

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

Ksika HTML. Kurs webmastera to podrcznik pokazujcy niemal wszystkie

aspekty tworzenia witryny WWW. Kolejne rozdziay przedstawiaj proces tworzenia
profesjonalnej witryny WWW zgodnej z najnowszymi standardami rekomendowanymi
przez konsorcjum W3C, wykorzystujcej technologie XHTML i JavaScript.
Ksika opisuje take sposoby doczania do witryny elementw multimedialnych,
konstruowania interaktywnych formularzy i testowania witryny.
Projektowanie struktury witryny
Przygotowanie elementw graficznych
Formatowanie tabel za pomoc stylw
Stosowanie tabel do wyrwnywania pooenia obrazkw
Tworzenie mechanizmw nawigacji
Korzystanie z elementw stylw CSS klas i identyfikatorw
Osadzanie na stronie elementw multimedialnych
Uywanie skryptw JavaScript
Konstruowanie formularzy
Testowanie witryny
Publikacja witryny na serwerze

Spis treci
Wstp
Na zacht

9
13

Wstp

13

Tworzenie szkieletu strony

14

Tworzenie pierwszej strony witryny

16

Tworzenie drugiej strony witryny

18

Dodanie do stron tekstu i grafiki

20

Wykaczanie witryny

23

Cz I Przygotowanie do pracy
Podstawy HTML

HTML

27
27

Oddzielenie treci od formy prezentacji 29

Uycie arkusza stylw

30

Aktywna strona i interakcja

z uytkownikiem

31

JavaScript na naszych stronach

Przegld projektu
Projekt na potrzeby kursu
Witryna zwizana z ksik
Praca nad projektem
Oglne wskazwki oraz instrukcje
do plikw rdowych

32

33

Tutorial Files

34

35
35
37
38

40

Tworzenie folderw witryny

47

Tworzenie stron interfejsu gwnego

49

Tworzenie zestawu podobnych stron

52

Tworzenie pokazu slajdw

55

Podsumowanie lekcji

56

Inne projekty

56

Lekcja 2. Uycie tabel do opisu

ukadu stron
Tabele
Tworzenie szablonu tabeli
Uycie tabeli na stronie gwnej
witryny

58
60
61
63

Uycie tabel na stronach gwnych

poszczeglnych orodkw

66

Szeroko kolumn tabeli

71

Tabele na stronach nawigacyjnych

72

Tabela na stronie pokazu slajdw

74

Podsumowanie lekcji

76

Inne projekty

76

Cz III Elementy graficzne

Lekcja 3. Przygotowanie elementw
graficznych
Kolory
Przygotowanie palety kolorw
na potrzeby witryny

42
44

80
82
85

Wybr ustawie i preferencji rysowania 87

Rysowanie paskw
90
Sprawdzanie obrazka
92

Tworzenie przycisku nawigacyjnego

93
Wykaczanie przycisku nawigacyjnego 95
Kopiowanie i modyfikacje
przycisku nawigacyjnego

Od organizacji pomysw
do organizacji witryny

pierwszej strony

do wypeniania tabel nawigacyjnych

Cz II Zaczynamy
Lekcja 1. Tworzenie zarysu witryny

45

33
33

Korzystanie z plikw z katalogu

Instrukcje w przewodnikach
Wymagania systemowe

Tworzenie pierwszej strony

Ogldanie i sprawdzanie

Podsumowanie lekcji
Inne projekty

97
98
98

Spis treci

Lekcja 4. Przygotowanie logo witryny 100

Przygotowanie warstw na logo Sizzle
Dodatkowe warstwy w pliku logo
Manipulowanie warstwami logo
i ich ukadanie

Wykaczanie logo Sizzle

Tworzenie logo strony

102
104
107
109

pojedynczego orodka

112

Tworzenie logo kolejnych orodkw

114

Eksport logo

116

Podsumowanie lekcji

119

Inne projekty

119

122

Tworzenie nowej strony z logo Sizzle 124

Style i kaskadowe arkusze stylw
125
Tworzenie kaskadowego
arkusza stylw witryny Sizzle
do tabel na stronach
poszczeglnych orodkw

129

Sprawdzanie treci strony

i arkusza stylw

132

Dodanie nowej strony

z informacjami o rezerwacjach

135

Rozmieszczenie tabel
na stronie o rezerwacjach
o rezerwacjach

Podsumowanie lekcji
Inne projekty
Lekcja 6. Uycie obrazkw
Dzielenie obrazka na czci
Sprawdzanie jakoci obrazka
Zmiana wymiarw obrazka

HTML. Kurs webmastera

140
142
142

144
146
149
151

Konfigurowanie obrazkw muszli

156

Style do pokazu slajdw

159

Dodanie obrazkw i tekstu

do stron slajdw

161

Lekcja 7. Tworzenie ramek i czy

163
165
165

170

Tworzenie strony z ramkami

171

Podzia okna przegldarki na ramki

172

Ustalanie atrybutw ramek

i ich zawartoci

174

Nowe strony witryny Sizzle

175

Nowe elementy w tabeli nawigacyjnej

177

Wizanie stron w ramkach

178

cza do konkretnych miejsc

na stronie

181

Lekcja 8. Dodatkowe elementy

nawigacyjne na witrynie
Projektowanie nawigacji po witrynie
Dodanie hiperczy

168

Korzystanie z ramek

Podsumowanie lekcji
Inne projekty

138

Doczanie stylw do strony

154

Cz V Struktura witryny

127

Dodanie obramowa i logo

Dodanie zastrzee

Wizanie stron slajdw ze stylami

Podsumowanie lekcji
Inne projekty

Cz IV Grafika i obrazki
na stronach
Lekcja 5. Dostosowywanie tabel
za pomoc stylw

182
182

184
186

ze strony gwnej

187

Tworzenie czy midzy stronami

189

Przygotowanie mapy witryny

191

Wizanie hiperczy mapy witryny

193

Dostp do mapy witryny z ramek

195

Wykorzystanie obrazkw jako

hiperczy

196

Logo linii lotniczych jako hipercza

Podsumowanie lekcji
Inne projekty

198
199
199

Spis treci

Cz VI Uatrakcyjnianie witryny

Okrelanie wsprzdnych na stronie

Lekcja 9. Uycie stylw do tekstu

i do opisu pooenia

Uycie mapy obrazkowej do nawigacji 251

Treci generowane dynamicznie

202

na potrzeby mapy obrazkowej

za pomoc JavaScriptu
Zapis nagwkw i stylw tekstu

204

Stosowanie stylw nagwkw

206

Wykaczanie stylw nagwkw

208

Uycie na stronach list

210

Tworzenie specjalnego stylu akapitu

212

Uycie stylw do rozmieszczania

treci na stronie

215

Pozycjonowanie obrazka na stronie

Podsumowanie lekcji
Inne projekty
Lekcja 10. Doczanie stylw
i elementw
nawigacyjnych

217
219
219

Zmiana komunikatu
w pasku stanu przegldarki

Automatyczne pokazywanie daty

Podsumowanie lekcji
Inne projekty
Lekcja 12. Uycie JavaScriptu

222

obrazkw w tabeli nawigacyjnej

229

Style komrek tabeli nawigacyjnej

Kolorowanie i pozycjonowanie

230

komrek w tabeli nawigacyjnej

231

227

Tworzenie stylw hiperczy

234
236

257
259
259

262

do strony logo

264

Ostateczne poprawki
267

238

pokazu slajdw

268

Stosowanie stylw i czy

na stronach pokazu slajdw

Jeszcze o zmiennych i funkcjach

Skrypty nawigacyjne i przyciski
z obrazkami

Tworzenie pokazu slajdw Sizzle

Podsumowanie lekcji
Inne projekty
Lekcja 13. Doczanie do witryny
formularza

270
271
273
276
280
280

282

Wywietlanie uytkownikowi
komunikatw

238

284

Zarzdzanie otwartymi oknami

w JavaScripcie

Cz VII Zaawansowane techniki

na naszej witrynie
Lekcja 11. Dodanie do witryny
nowych stron i obiektw 242
Dodanie do witryny pliku PDF
Wczenie filmu w technologii Flash
Tworzenie map obrazkowych

255

Dodanie ostatecznych wersji stylw

w zestawie ramek witryny Sizzle

224

Uycie stylu z inicjaem

Podsumowanie lekcji
Inne projekty

253

Tworzenie stylw do stron

Pseudoklasy i pseudoelementy
Tworzenie stylw hiperczy witryny
Stosowanie zwielokrotnionych

ramki nawigacyjnej

250

244
247
249

286

Kontrolowanie wielkoci okna

w JavaScripcie

288

Definiowanie formularza

291

Tworzenie najprostszego formularza

292

Uycie atrybutw formularza

294

Sprawdzanie poprawnoci danych

298

Podsumowanie lekcji

301

Inne projekty

301

Spis treci

Cz VIII Niech nas zobacz

Lekcja 14. Dostpno
gwarantowana
Dostpno: wytyczne i standardy
Tworzenie stron bez ramek
Tabele nawigacyjne do stron
bez ramek

Caa strona jako obiekt

Poprawki na gwnych stronach
bezramkowych

304
306
308
311
313
314

Koczymy prac nad stronami

bez ramek

316

Przegldamy strony witryny Sizzle

Testowanie wygldu stron

319

przy zmienionych ustawieniach

322

Podsumowanie lekcji
Inne projekty

325

Lekcja 15. Sprawdzanie

naszej witryny

328

Rozdzielczo ekranu
Testowanie witryny
przy rnych ustawieniach ekranu

325

330
331

Zaczynamy ostatnie testy

witryny Sizzle

334

Koczymy przegld witryny

337

Ostatnie poprawki w treci i ukadzie

340

Podsumowanie lekcji

343

Inne projekty

343

Dodatki
Zawarto pyty CD-ROM

347

Skorowidz

353

HTML. Kurs webmastera

Analiza

Projektowanie nawigacji po witrynie

Najlepszy sposb zapewnienia, e nasi gocie zapoznaj si ze wszystkim, co nasza witryna
ma do zaoferowania, to udostpnienie rnych metod nawigacji po stronach. Jak na razie
na witrynie umiecilimy ramk nawigacyjn dogodn metod nawigacji wykorzystujc
tekst lub hipercza obrazkowe. Ramka nawigacyjna zawiera zestawienie najwaniejszych
elementw witryny i udostpnia je po klikniciu odpowiedniego tekstu.
Hipercza s te intensywnie uywane bezporednio na stronach witryny. Kiedy uytkownik
czyta strony naszej witryny, udostpnienie mu czy do poszczeglnych tematw jest dobrym
sposobem uprzyjemnienia i uatwienia lektury.
Innym typowym elementem nawigacyjnym jest mapa witryny. Mapa taka to pewnego rodzaju
szkic witryny pokazujcy jej struktur oraz prezentujcy hierarchi informacji tej witryny. Witryna
Sizzle jest prosta, gdy ma tylko dwa poziomy gazi, ale czsto witryny maj bardzo duo
takich poziomw. Ba, czasem zdaje si, e poziomom tym nie ma koca! Mapa witryny moe
zawiera najbardziej elementarne informacje o stronach, moe te by jedynie spisem czy
tekstowych.
Witryny mog zawiera menu kontrolowane przez programy
JavaScript otwierajce podmenu i osobne okna lub ramki. Inne
przydatne elementy nawigacyjne to przyciski i menu. W lekcji 13.
do stron pokazu slajdw dodamy przyciski, ktre za porednictwem
JavaScriptu bd przesuway slajdy lub zamykay pokaz. Inn
metod nawigacji jest mapa obrazkowa: specjalnie zakodowany
obrazek, ktry pozwala realizowa pewne funkcje podobnie jak
JavaScript bez koniecznoci programowania. Na rysunku pokazano
zestaw przyciskw nawigacyjnych.
Przyciski mog by uywane jako samodzielne elementy
nawigacyjne; oprogramowuje si je w tym celu JavaScriptem.
Mona je te wcza w obrazki i uywa w poczeniu z mapami
obrazkowymi. Z punktu widzenia uytkownika zawsze zachowuj
si one tak samo. Map obrazkow na potrzeby naszej witryny
stworzymy w nastpnej lekcji.

Lekcja 8.

Dodatkowe elementy nawigacyjne na witrynie

Przewodnik

Dodawanie hiperczy ze strony gwnej

Kiedy nasza witryna jest adowana do przegldarki Internet Explorer, w gwnej ramce pokazywana jest
strona main.html stanowica krtkie wprowadzenie o orodkach Sizzle. Czytelnicy mog przechodzi
do stron poszczeglnych orodkw bezporednio z tej strony. W tym przewodniku dodamy do strony
main.html tabel i cza tekstowe, ktre umoliwi takie przechodzenie.

Otwieramy Notatnik, a w nim plik main.html.

Przechodzimy do wiersza 40., wciskamy Enter,
dodajc pusty wiersz.
Nowy kod bdziemy dopisywa poczynajc wanie
od 40. wiersza.

OSTRZEENIE
W poszczeglnych krokach przewodnika odwoujemy
si do numerw wierszy. Numery wierszy u Czytelnika
mog by nieco inne ni pokazane na zrzutach ekranw
czy podawane w opisie. Numerw tych naley uywa
jako punktw odniesienia, ale trzeba te uwanie
sprawdza zawarto danego wiersza, aby poprawia
odpowiedni kod lub dopisywa go we waciwym
miejscu.
W wierszu 40. piszemy
.
Po tabeli wstawiamy koniec wiersza, aby optycznie
tabele byy od siebie oddzielone.
W wierszach od 41. do 48. piszemy:


   
 

 



 
!"


#$%%&'(#)*+,


#$%%&'%-)*+,


#$%%&'./0,1$'







Na stron wstawiana jest jednowierszowa,

czterokolumnowa tabela. Uywamy w niej tej samej
klasy stylu, ktr przygotowalimy do tabel ze strony
booking.html. Styl ten powoduje wywietlenie
zielonego grnego obramowania tabeli. Pozostae
atrybuty s takie same, jak w przypadku pierwszej
tabeli ze strony main.html.
Zapisujemy plik i ogldamy go w przegldarce
Internet Explorer.
Zwrmy uwag na efekt zastosowania stylu do
tabeli oraz na to, jak kolorowe obramowanie jest
oddzielone od wikszej tabeli. Ukrywamy okno
przegldarki.

187

Cz V

Struktura witryny

Wiersze od 44. do 46. modyfikujemy nastpujco:



2 
345 

 5#$%%&'(#)*+,





2 
3
45 

 5#$%%&'%-)*+,





2 
3645 

 5#$%%&'./0,1$'



Do nazwy kadego orodka dodajemy hipercze.

Wszystkie te cza odwouj si do ramki gwnej
z naszego zestawu.
Wybieramy z menu Plik/Zapisz i zapisujemy plik.
Uruchamiamy przegldark Internet Explorer,
otwieramy w niej plik index.html.
adowany jest zestaw ramek naszej witryny.
Na dole gwnej ramki klikamy nowe cza,
ktre przed chwil dodalimy.
adowane s strony poszczeglnych orodkw.
Klikamy cze O NAS w ramce nawigacyjnej,
aby wrci na stron main.html.
Przewijamy stron w d i sprawdzamy nastpne
hipercze.

UWAGA
Kiedy przesuwamy kursor nad hiperczem, jego
ksztat zmienia si na do, a w pasku stanu pojawia
si adres wskazywany przez to hipercze.
Sprawdzamy wszystkie trzy cza.
Jeli ktre z nich nie dziaa tak, jak to opisano
w tym przewodniku, trzeba sprawdzi, czy w kod
dodany w kroku 6. nie wkrady si jakie bdy.
Wyczamy przegldark. Do naszej strony dodalimy
niewielk tabel z przypisanym stylem. Dodalimy
i sprawdzilimy cza wewntrzne wskazujce strony
poszczeglnych orodkw.

188

HTML. Kurs webmastera

Lekcja 8.

Dodatkowe elementy nawigacyjne na witrynie

Przewodnik

Tworzenie czy midzy stronami

Kiedy pocztkowo tworzylimy strony trzech naszych orodkw, na dole strony dodalimy tekst i poziom
kresk. W tym przewodniku, wykorzystujc ten tekst, stworzymy hipercza do trzech stron. Po sprawdzeniu
czy na pierwszej stronie zamiast sprawdza strony jedn po drugiej, postpimy tak, jak zwykle postpuje
si przy tworzeniu witryn: na poszczeglnych stronach umiecimy hipercza i sprawdzimy je.

Otwieramy Notatnik, a w nim otwieramy plik

sizzle_east.html.
Najpierw dodamy cza do strony tego wanie
orodka.
Przechodzimy do wiersza 36., wiersz ten
modyfikujemy nastpujco:
%57



2 45 
    8


.

Do wyraenia pokaz slajdw dodalimy hipercze.

Kiedy uytkownik kliknie to wyraenie, w nowym
oknie, poza ramkami, otworzy si pierwsza strona
pokazu slajdw.
Przechodzimy do wiersza 38., po pierwszym
zdaniu dopisujemy

2 45 

59


:0:-;
.
Tym razem hipercze dodalimy do wyraenia
Rezerwacje TUTAJ kiedy uytkownik je kliknie,
strona o rezerwacjach otworzy si w ramce gwnej.
Wybieramy z menu Plik/Zapisz, zapisujc plik
na dysku.
Otwieramy przegldark Internet Explorer, otwieramy
w niej stron sizzle_east.html.
Klikamy cze pokazu slajdw na dole strony.
Otwiera si nowe okno ze stron ss1.html.
Zamykamy to okno.
Klikamy cze rezerwacji na dole strony.
Plik booking.html otwiera si w nowym oknie
zamykamy je. Jeli ktre z tych czy nie zadziaa,
sprawdzamy kod dopisany w krokach 2. i 3.
Zamykamy okno Internet Explorera.
Sprawdzilimy ju cza na naszej stronie.
W Notatniku kopiujemy ze strony sizzle_east.html
wiersze od 36. do 38. do schowka, czyli kopiujemy
cza pokazu slajdw i strony z rezerwacjami.
cza te wkleimy do stron pozostaych orodkw.
Z menu wybieramy Plik/Otwrz, wybieramy stron
sizzle_west.html.
Proszeni o zapisanie strony sizzle_east.html
klikamy Tak.
Wybieramy tekst z wierszy od 35. do 37.
Tekst ten to dwa fragmenty tekstu i poziome
odkrelenie.

UWAGA

Na stronie sizzle_east.html wskazalimy, e strona

booking.html ma by otwierana w ramce gwnej
naszego zestawu ramek. Jednak jako e stron
sizzle_east.html otworzylimy poza tym zestawem,
strona ta nie bya kontrolowana przez te ramki
i dlatego otworzone zostao nowe okno. W dalszej
czci tego przewodnika przetestujemy nasze cza
w ramkach.

189

Cz V

Struktura witryny

Skopiowany wczeniej tekst wklejamy w miejsce

zaznaczonych wierszy.
Zaznaczone wiersze s usuwane, a w ich miejsce
pojawiaj si wiersze z hiperczami.
Kroki od 9. do 11. powtarzamy na stronie
sizzle_south.html.
Zapisujemy plik sizzle_south.html.
Otwieramy przegldark Internet Explorer, otwieramy
w niej plik index.html.
Otwiera si zestaw ramek naszej witryny i do ramek
adowane s pocztkowe ramki.
Przewijamy stron main.html w d.
Na dole strony klikamy cze orodka Sizzle Wschd.
Strona tego orodka adowana jest do ramki gwnej.
Korzystajc z paskw przewijania, przesuwamy si
na d strony, do czy na samym dole.
Sprawdzamy teraz dziaanie czy w ramkach.
Otwieramy hipercze pokazu slajdw.
Strona ss1.html otwiera si w nowym oknie;
zamykamy to okno.
Na dole strony klikamy hipercze Rezerwacje TUTAJ.
W ramce gwnej otwiera si strona booking.html.

WSKAZWKA
Wszystkie hipercza powinny dziaa tak, jak to tu
opisujemy. Jeli tak nie jest, trzeba sprawdzi kod
wstawiony w wiersze od 36. do 38.
Klikamy dwukrotnie przycisk Wstecz, aby wrci
na stron main.html.
Kiedy przesuwamy wskanik myszy nad przyciskiem
Wstecz, tytu strony pokazuje si w polu tekstowym
obok tego przycisku.

UWAGA
Prawidowo zaprojektowana witryna nie powinna
opiera swojego dziaania na przyciskach
nawigacyjnych przegldarki, takich jak wanie
przycisk Wstecz. W dalszym cigu nauki stworzymy
map obrazkow witryny, ktra powie trzy strony
poszczeglnych orodkw.

UWAGA

Sprawdzamy pozostae dwa cza na stronach

poszczeglnych orodkw.

Zamiast kopiowa i wkleja cae wiersze, mona te

doda hipercza rcznie. Zastpienie tekstu gotowymi
czami jest prostsze i chroni nas przed bdami.

Pokaz slajdw otwiera si we wasnym oknie,

informacja o rezerwacjach otwiera si w ramce.
Wyczamy przegldark Internet Explorer.

190

HTML. Kurs webmastera

Lekcja 8.

Dodatkowe elementy nawigacyjne na witrynie

Przewodnik

Przygotowanie mapy witryny

Jednym ze sposobw uatwienia uytkownikom zorientowania si, gdzie s w danej chwili, jest
udostpnienie wizualnej struktury treci. Mapy witryn s jednym z najstarszych wynalazkw w Sieci.
Zwykle s one uywane na bardzo obszernych witrynach. Wprawdzie witryna Sizzle nie jest zbyt
skomplikowana, ale i tak mapa bdzie bardzo przydatna. W tym przewodniku przygotujemy tak map
i wstawimy na ni tekst z dostarczonego pliku. Na dwch innych stronach dodamy znaczniki zakadek,
aby moliwe byo pene uywanie czy naszej mapy.

W Notatniku otwieramy plik sitemap.txt.

Plik ten znajduje si w folderze Storage.
Wybieramy tekst z tego pliku i kopiujemy go
do schowka.
Tekstu tego uyjemy na stronie z map witryny.

UWAGA
Do tekstu tego dodano puste wiersze, aby rozgraniczy
grupy akapitw. Te puste wiersze uatwiaj podzielenie
strony na czci.
Wybieramy z menu Plik/Otwrz, wybieramy plik
basic.html.
Plik ten take znajduje si w folderze Storage.
Przechodzimy do wiersza 11., zaznaczamy w nim
tymczasowo wstawiony tekst. Wciskamy Delete.
Tekst ten zastpimy treci pliku sitemap.txt.
Wybieramy z menu Edycja/Wstaw.
Tekst skopiowany z pliku sitemap.txt jest wklejany
na stron. Upewniamy si, czy znacznik kocowy

7 znajduje si za wklejonym tekstem.
Przechodzimy do wiersza 6. i tymczasowy tytu
strony, midzy znacznikami

, zastpujemy
nastpujcym: <77#
.
Teraz nasza strona ma tytu.
Zapisujemy plik w folderze Sizzle jako sitemap.html.
Mamy gotow nastpn stron naszej witryny.
Otwieramy plik fine_print.html z foldera witryny Sizzle.
Na stronie tej dodamy dwie zakadki.

UWAGA
Zauwamy, e wiersze tekstu uywane jako hipercza
nie s jeszcze identyfikowane. W dalszej czci tego
przewodnika dodamy do nich zakadki.

UWAGA

Jeli przejrzymy tekst czy ze strony sitemap.html,

okae si, e znajduj si tam trzy odniesienia do
zawartoci strony fine_print.html. Pierwsze z nich to
ubezpieczenia, ktre zaczynaj si na grze strony,
wic nie potrzebuj zakadki.

191

Cz V

Struktura witryny

Przechodzimy do wiersza 41., wciskamy Enter,

dodajc nowy wiersz.
Przed tytuem akapitu powiconego szczepieniom
znajduje si pusty wiersz. Dodajemy drugi pusty
wiersz, aby na stronie zachowa optyczny podzia
na czci.
W wierszu 42. piszemy:
5
=
 =
.

W ten sposb dodalimy nazwan zakadk na

pocztku informacji o szczepieniach. Zakadki tej
uyjemy w odnoniku na stronie sitemap.html.
Przechodzimy do wiersza 50., wciskamy Enter,
dodajc kolejny pusty wiersz.
Tytu informacji wizowych te zaczyna si od pustego
wiersza; podobnie jak poprzednio dodajemy pusty
wiersz w celu zachowania optycznego odstpu.
W wierszu 51. piszemy:
5
=
 =
.

Dodalimy kolejn zakadk, ktra wyznacza pocztek

informacji wizowych. Ta zakadka take zostanie uyta
jako cze na stronie sitemap.html.
Zapisujemy plik fine_print.html.
Do strony tej dodalimy dwie zakadki. Zakadki te
bd uyte w utworzonym w tym przewodniku pliku
sitemap.html.

192

HTML. Kurs webmastera

Lekcja 8.

Dodatkowe elementy nawigacyjne na witrynie

Przewodnik

Wizanie hiperczy mapy witryny

W poprzednim przewodniku stworzylimy stron z map witryny, dodalimy zakadki do innych stron
witryny. Teraz mamy ju wszystkie cza. W tym przewodniku przygotujemy zestaw hiperczy strony
sitemap.html. W przypadku kadego odwoania cze jest tworzone na podstawie wanego zdania z tekstu
lub wyraenia. Teraz trzeba jeszcze uwanie doda znaczniki. Wszystkie znaczniki maj midzy innymi
atrybut 
. Gdybymy nie podali tego atrybutu, strony docelowe byyby adowane w miejsce strony
sitemap.html. Tekst mapy jest podzielony na dwie czci i analogicznie na dwie czci podzielono kroki
tego przewodnika.

W Notatniku otwieramy plik sitemap.html.

Plik ten znajduje si w folderze witryny Sizzle.
Przechodzimy do wiersza 14.
Wiersze od 14. do 24. zawieraj tre pierwszej
grupy czy mapy s to informacje o orodkach
Sizzle.
Modyfikujemy pierwsz cz tekstu zgodnie
tabel 8.1.
Kady wiersz wymaga znacznikw pocztkowego
i kocowego
 oraz atrybutw.

UWAGA
W tabeli podano numery wierszy, tekst oryginalny
i tekst, jaki powinien w pliku znale si ostatecznie.
Tekst trzech stron poszczeglnych orodkw jest
zawinity, aby poprawi czytelno kodu.

Tabela 8.1. Znaczniki hiperczy w pierwszej czci strony mapy witryny

Wiersz

Tekst pierwotny

Ostateczna posta

14

$25
8 





2 545 
  $25

8 




15 16

#
(8>6 


 5!




2 
3
45 
  #

(8
>6 

 5!


17 18

#
%8> ?8
@
6
7





2 
3
45 
  #

%8
> ?8
@6

7



19 20

#
A6
> 5A!8
6




2 
3645 
  #

A6

> 5A!86


21

.
7 2 5


.
7 

2 =
45 

  2 5



22

.8



.

2 45 
  
8




23

.
B



.
B

2 
45 

  




24

  87!8




2 45 
  
  8
7!8


193

Cz V

Struktura witryny

Przechodzimy do wiersza 26.

Wiersze od 26. do 32. zawieraj drug cz
treci hiperczy naszej mapy; te cza dotycz
przygotowania si do podry.
Modyfikujemy drug cz tekstu zgodnie
z tabel 8.2.
Kady wiersz wymaga znacznikw pocztkowego
i kocowego
 oraz atrybutw.
Zapisujemy stron sitemap.html.
Dodalimy do naszej mapy witryny hipercza do
stron i do zakadek na stronach. Notatnik zostawiamy
otwarty, gdy bdzie nam potrzebny w nastpnym
przewodniku.
Uruchamiamy przegldark Internet Explorer.
Otwieramy stron sitemap.html.
Sprawdzamy dziaanie hiperczy.
Klikamy kolejne hipercza. Pierwsze z nich powoduje
otwarcie nowego okna przegldarki, wszystkie
pozostae otwieraj strony ju w tym oknie.

WSKAZWKA
Trzeba przetestowa wszystkie hipercza.
Konieczne jest sprawdzenie, czy wszystkie strony
aduj si prawidowo do drugiego okna
przegldarki. Sprawdzamy, czy cza do zakadek
pokazuj odpowiedni fragment strony. Jeli ktre
cza nie bd dziaay prawidowo, sprawdzamy
kod dodany w krokach 3. i 5.
Zamykamy oba okna przegldarki.

Tabela 8.2. Znaczniki hiperczy w pierwszej czci strony mapy witryny

Wiersz

Tekst pierwotny

Ostateczna posta

27

9







2 45 
  9






28

&
 





2 45 C 

  &
 




29

0







2 2
345 
  0






30

#






2 2
345 C=
  #






31

(7




2 2
345 C=
  (7



194

HTML. Kurs webmastera

Lekcja 8.

Dodatkowe elementy nawigacyjne na witrynie

Przewodnik

Dostp do mapy witryny z ramek

Utworzylimy map witryny, przygotowalimy cza midzy map a poszczeglnymi stronami witryny.
Potrzebna jest nam metoda dostpu do mapy witryny z ramek. W tym przewodniku dodamy stosowne
hipercze do tabeli nawigacyjnej.

W Notatniku otwieramy stron nav_left.html.

W ramce nawigacyjnej dodamy hipercze do mapy
witryny.
Przechodzimy do wiersza 13., warto atrybutu
 zmieniamy z D na .
Dodajemy do tabeli jeden wiersz, wic musimy
powikszy wysoko pierwszej kolumny.
Przechodzimy do wiersza 41., wciskamy Enter,
dodajc pusty wiersz.
Umiecimy tutaj kod opisujcy dodatkowy wiersz
tabeli.
W wierszach od 41. do 43. piszemy:





2 
545 
  <
77





Jest to nowy wiersz tabeli. Napis Mapa witryny jest

powizany ze stron sitemap.html.
Zapisujemy stron nav_left.html. Zostawiamy
Notatnik otwarty, gdy bdzie nam potrzebny
w nastpnym przewodniku.
Utworzylimy zatem hipercze z zestawu ramek
do mapy witryny.
Uruchamiamy przegldark Internet Explorer,
otwieramy w niej stron index.html.
aduje si zestaw ramek.
Klikamy cze Mapa witryny znajdujce si na dole
tabeli nawigacyjnej.

UWAGA
cza zewntrzne z naszej witryny naley tak
zapisywa, aby powodoway otwieranie osobnych
okien. Dziki temu cudza witryna nie pojawi si
wewntrz naszej. Jeli nie zdefiniujemy atrybutu


, przegldarka zaaduje wskazywan stron
do zestawu ramek Sizzle.

Rnica midzy map witryny

a witryn atwo dostpn
Stworzylimy i powizalimy z witryn jej map.
Wprawdzie mapa witryny pozwala uytkownikowi
wyj poza ramki, jest to co innego ni witryna
bez ramek. Na mapie uytkownik moe oglda
dowoln stron, ale musi uywa dwch okien
przegldarki i w celu wybrania kolejnego hipercza
musi wraca na stron sitemap.html. W przypadku
witryny bez ramek wszystkie elementy nawigacyjne
znajduj si bezporednio na stronach, dziki czemu
uytkownik moe oglda witryn w jednym oknie
przegldarki. Strony sitemap.html uywamy jako
podstawy do pewnej pracy w lekcji 14.; celem
naszym bdzie wtedy zapewnienie moliwoci
poruszania si po witrynie bez ramek.

195

Cz V

Struktura witryny

Przewodnik

Wykorzystanie obrazkw jako hiperczy

Mapa naszej witryny jest gotowa i dostpna z ramki nawigacyjnej. Dodalimy do naszej strony mnstwo
hiperczy tekstowych. Strona booking.html zawiera obrazki z logo rnych linii lotniczych. W tym
przewodniku powiemy cza z tych logo z witrynami poszczeglnych towarzystw lotniczych.
Nasze towarzystwa s fikcyjne, podobnie jak ich logo i adresy internetowe.
W Notatniku otwieramy plik booking.html.
Do strony tej dodamy hipercza.
Przechodzimy do wiersza 41.
W wierszach 41. i 42. znajduj si znaczniki obrazka
logo linii Global Airlines. Obrazek ten umieszczony
jest w tabeli.
Po znaczniku
 dopisujemy:


2 "4  E45
  .

Dodajemy znacznik otwierajcy hipercza,

nakazujemy otwieranie wskazywanej witryny
w osobnym oknie. Musimy poda pen, czyli
bezwzgldn, ciek do witryny.
Przechodzimy na koniec znacznika z logo linii
lotniczych, przed znacznikiem
, obecnie
w wierszu 43., dopisujemy
.
Zakoczylimy wpisywanie hipercza.
Zapisujemy stron booking.html.
Uruchamiamy przegldark Internet Explorer,
otwieramy w niej stron booking.html.
cieki dokumentw
A do tej chwili dokumenty naszej witryny
wskazywalimy, korzystajc ze wzgldnych cieek
dokumentw. W tym wypadku docelowy dokument
jest okrelony przez nazw pliku i jego typ oraz, jeli
znajduje si w innym folderze, nazw tego foldera.
Aby powiza dokument spoza witryny, trzeba uy
cieki bezwzgldnej. cieka bezwzgldna zawiera
peny adres URL wskazywanego dokumentu wraz
z protokoem, zwykle ". Adresy witryn linii
lotniczych podajemy jako cieki bezwzgldne.

Klikamy logo Global Airlines. Dookoa obrazka logo

pojawia si kolorowa obwdka. Wskazana witryna
otwiera si w nowym oknie, ale widzimy komunikat
o niemonoci znalezienia takiej strony nic nie
szkodzi, adres ten nie wskazuje adnej istniejcej
rzeczywicie witryny.

WSKAZWKA
Kiedy przesuwamy kursor myszy nad obrazkiem, jego
ksztat zmienia si w do, pokazywany jest tekst
zastpczy, a w pasku stanu przegldarki pojawia si
adres docelowy hipercza.
Ukrywamy okno przegldarki.

UWAGA
UWAGA
Hipercza mona sprawdza bezporednio na
odpowiednich stronach, bez uywania zestawu ramek.
Wskazywane witryny nie s istotne w naszym
przewodniku, su jedynie jako przykady.

196

HTML. Kurs webmastera

Kiedy dodawalimy cza tekstowe, widzielimy

niebieski, podkrelony tekst, ktry po klikniciu
zmienia kolor na fiolet. S to domylne ustawienia
przegldarki. Innym ustawieniem domylnym
przegldarki jest dodawanie obramowania dookoa
hipercza w formie obrazka.

Lekcja 8.

Dodatkowe elementy nawigacyjne na witrynie

W Notatniku na kocu definicji obrazka,

w wierszu 43., dopisujemy 
 .
Zwrmy uwag, aby ten atrybut pojawi si przed
znacznikiem kocowym obrazka.
Zapisujemy plik booking.html.
Do znacznika
5 dodalimy kolejny atrybut.
Ponownie uruchamiamy przegldark, klikamy
Odwie, aby przeadowa stron.
adowana jest nowa wersja strony.
Klikamy obrazek logo, aby ponownie go
przetestowa.
Witryna linii lotniczych otwiera si w innym oknie
przegldarki, ale tym razem obrazek nie ma ju
obramowania.
Zamykamy przegldark.
Zamykamy oba okna przegldarki. Dodalimy
i przetestowalimy cze do obrazka,
zmodyfikowalimy te standardowy znacznik
5,
aby usun pojawiajce si domylnie obramowanie.
Zostawiamy Notatnik otwarty do nastpnego
przewodnika.

Szybsze adowanie witryny

Zamiast adowa nasz zestaw ramek poleceniem
Plik/Otwrz, moemy ustawi t stron jako jedn
z ulubionych. Uruchamiamy przegldark Internet
Explorer, adujemy interesujc nas stron index.html
i z menu wybieramy Ulubione/Dodaj do Ulubionych.
Pojawia si okno dialogowe jak pokazane poniej,
zawierajce tytu naszej strony z ramkami.

Adresy komputerw
Zestaw protokow, czyli pewnych regu, nazywany
TCP/IP (Transmission Control Protocol/Internet
Protocol, Protok sterowania transmisj/Protok
internetowy) okrela, jakie komunikaty s przesyane
midzy komputerami. TCP odnosi si do procesu
przenoszenia danych midzy komputerami, IP za
dotyczy informacji przesyanych w niewielkich
porcjach nazywanych pakietami.
Kady komputer ma niepowtarzalny adres IP.
Spjrzmy na lewy dolny rg okna przegldarki, kiedy
wejdziemy do Sieci. Czsto pojawiaj si tam cigi
cyfr, takie jak pokazany na rysunku. S one wywietlane
przed zaadowaniem strony. Jest to adres IP strony.

Kiedy klikniemy OK, strona zostanie dodana

do Ulubionych i teraz moemy wybiera j z listy
ulubionych.

Kada witryna ma adres w takiej wanie postaci,

cho zwykle atwiej jest zapamita odpowiednik
tego adresu, taki jak google.com.

197

Cz V

Struktura witryny

Przewodnik

Logo linii lotniczych jako hipercza

W poprzednim przewodniku dodalimy informacje o czu do obrazka z logo fikcyjnych linii lotniczych
Global Airlines. W tym przewodniku utworzymy cza dla pozostaych logo ze strony booking.html.
Przechodzimy do wiersza 44. strony booking.html.
Znajdujemy komrk zawierajc obrazek logo TD Air.
Po znaczniku pocztkowym
 dopisujemy:


2 "4E45
  .

Dodalimy znacznik pocztkowy hipercza,

nakazalimy otwiera go w nowym oknie.
Przechodzimy na koniec znacznika
5. Po atrybucie
  dopisujemy 
 , aby obramowanie obrazka
byo niewidoczne.
Przechodzimy na koniec znacznika obrazka i przed
kocowym znacznikiem
, obecnie w wierszu 46.,
dopisujemy
, zamykajc tym samym hipercze.
Zapisujemy plik booking.html.
Dodalimy kolejne hipercze w formie obrazka.
Przechodzimy do wiersza 52.
Wiersz ten zawiera znaczniki pocztkowe obrazka
logo BlueStar Air.
Powtarzamy kroki od 2. do 4., tym razem adres
URL to "4 6
E45.
Dodajemy cze i ramk docelow, usuwamy
obramowanie obrazka.
Przechodzimy do wiersza 55.
Ten wiersz zawiera znaczniki pocztkowe obrazka
Seawinds Air.
Powtarzamy kroki od 2. do 4., tym razem
z adresem URL "4
E45.
Dodajemy cze i ramk docelow, usuwamy
obramowanie obrazka.
Sprawdzamy w przegldarce dziaanie nowych
hiperczy, ukrywamy okno przegldarki.
Zamykamy przegldark.

Zapisujemy plik, zamykamy Notatnik.

Do obrazkw logo ze strony booking.html dodalimy

hipercza, przetestowalimy je na osobnej stronie
oraz w ramkach.

Na stronie booking.html do obrazkw logo linii

lotniczych dodalimy hipercza.

WSKAZWKA

Upewnijmy si, czy atrybut  znajduje si przed

zamkniciem obrazka,
.

UWAGA

W pliku booking.html znaczniki opisujce poszczeglne

obrazki zapisywane s w dwch kolejnych wierszach.

198

HTML. Kurs webmastera

Uruchamiamy przegldark, otwieramy w niej

stron index.html.
Klikamy w ramce nawigacyjnej LINIE LOTNICZE.
W gwnej ramce aduje si strona booking.html
i ustawia si od razu na zakadce linii lotniczych.
Sprawdzamy dziaanie pozostaych hiperczy.
Kada witryna Sieci powinna zaadowa si do tego
samego okna przegldarki.

Lekcja 8.

Dodatkowe elementy nawigacyjne na witrynie

Podsumowanie lekcji
W tej lekcji do naszej witryny dodalimy wiele hiperczy. Dodalimy cza wewntrzne do stron,
umoliwiajce uytkownikom przegldanie witryny i pobieranie interesujcych ich danych bez koniecznoci
korzystania z menu nawigacyjnego. Obrazek na pocztku tej sesji pokazuje doln cz gwnej strony
witryny. Ostatni obrazek pokazuje t sam stron, ale ju z nowymi hiperczami wewntrznymi.
Nauczylimy si tworzy map witryny i wiza j ze stronami. Powizalimy te obrazki ze stronami,
korzystajc po raz pierwszy z adresw bezwzgldnych. cza s powizane z obrazkami logo towarzystw
lotniczych, po klikniciu powoduj otwieranie witryn tych towarzystw. S tak ustawione, aby otwieray
si w nowym oknie przegldarki, poza nasz witryn.
Odpowiedzi na podane niej pytania pomog utrwali sobie wiedz z tej lekcji. Wszystkie znale mona
w przewodnikach wskazanych w nawiasach.
Czy na witrynie warto stosowa wicej ni jedn metod nawigacji? Uzasadnij odpowied. (Analiza.
Projektowanie nawigacji po witrynie)
Do czego przydaje si mapa witryny? (Analiza. Projektowanie nawigacji po witrynie)
Gdzie w oknie przegldarki mona zobaczy, co si kryje na drugim kocu hipercza? (Przewodnik.
Dodajemy hipercza ze strony gwnej)
Czy mona oglda strony poza ramkami witryny? Kiedy si to robi? (Przewodnik. Tworzenie czy
midzy stronami)
Czy podczas nawigacji po witrynie mona polega na uyciu przycisku Wstecz przegldarki?
(Przewodnik. Tworzenie czy midzy stronami)
Do czego suy mapa witryny? Do czego moe si przyda uytkownikowi? (Przewodnik.
Przygotowanie mapy witryny)
Jeli powiemy hiperczem informacje na stronie, to czy trzeba dodawa zakadk na stronie
docelowej, jeli interesujce nas informacje znajduj si na grze strony? (Przewodnik.
Przygotowanie mapy witryny)
Kiedy trzeba dodawa atrybut 
 w przypadku korzystania ze znacznikw
? (Przewodnik.
Wizanie hiperczy z mapy witryny)
Jak w atrybucie 
2 wskazuje si zakadk? (Przewodnik. Wizanie hiperczy z mapy witryny)
Czy podczas dodawania do tabeli nowych wierszy trzeba zmienia wartoci atrybutu ?
(Przewodnik. Dostp do mapy witryny z ramek)
Czy Internet Explorer uywa do hiperczy stylw domylnych? (Przewodnik. Wykorzystanie
obrazkw jako hiperczy)
Jak mona usun obramowanie wstawiane domylnie przez przegldark wok cza w formie
obrazka? (Przewodnik. Wykorzystanie obrazkw jako hiperczy)
Co to jest cieka bezwzgldna? Jak si jej uywa? (Przewodnik. Wykorzystanie obrazkw jako
hiperczy)
Co jest wywietlane przez przegldark, kiedy przesuwamy wskanik myszy nad obrazkiem bdcym
linkiem? (Przewodnik. Logo linii lotniczych jako hipercza)

Inne projekty
Uyj usugi W3C Validator do sprawdzenia stron booking.html oraz sitemap.html.

Upiksz zawarto strony sitemap.html, korzystajc ze stylw przygotowanych we wczeniejszych

lekcjach. Oto kilka pomysw: uyj obrazkw muszli, umie je w tekcie za pomoc stylw. Dodaj
tabel i sformatuj j za pomoc stylw. Nie modyfikuj ta, gdy w nastpnej lekcji stworzymy styl
opisujcy to strony.

199