HTML. Kurs webmastera

IDZ DO
PRZYK£ADOWY ROZDZIA£

SPIS TRE CI HTML. Kurs
webmastera
KATALOG KSI¥¯EK
Autor: Donna L. Baker
KATALOG ONLINE T³umaczenie: Tomasz ¯mijewski
ISBN: 83-7361-511-3
ZAMÓW DRUKOWANY KATALOG Tytu³ orygina³u: HTML Complete Course
Format: B5, stron: 360

TWÓJ KOSZYK
DODAJ DO KOSZYKA Ksi¹¿ka „HTML. Kurs webmastera” to podrêcznik pokazuj¹cy niemal wszystkie
aspekty tworzenia witryny WWW. Kolejne rozdzia³y przedstawiaj¹ proces tworzenia
profesjonalnej witryny WWW zgodnej z najnowszymi standardami rekomendowanymi
CENNIK I INFORMACJE przez konsorcjum W3C, wykorzystuj¹cej technologie XHTML i JavaScript.
Ksi¹¿ka opisuje tak¿e sposoby do³¹czania do witryny elementów multimedialnych,
ZAMÓW INFORMACJE konstruowania interaktywnych formularzy i testowania witryny.
O NOWO CIACH • Projektowanie struktury witryny
• Przygotowanie elementów graficznych
ZAMÓW CENNIK • Formatowanie tabel za pomoc¹ stylów
• Stosowanie tabel do wyrównywania po³o¿enia obrazków
• Tworzenie mechanizmów nawigacji
CZYTELNIA • Korzystanie z elementów stylów CSS — klas i identyfikatorów
• Osadzanie na stronie elementów multimedialnych
FRAGMENTY KSI¥¯EK ONLINE • U¿ywanie skryptów JavaScript
• Konstruowanie formularzy
• Testowanie witryny
• Publikacja witryny na serwerze

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

Spis treści
Wstęp 9 » Tworzenie pierwszej strony 45
» Oglądanie i sprawdzanie
Na zachętę 13 pierwszej strony 47
» Wstęp 13 » Tworzenie stron interfejsu głównego 49
» Tworzenie szkieletu strony 14 » Tworzenie zestawu podobnych stron 52
» Tworzenie pierwszej strony witryny 16 » Tworzenie pokazu slajdów 55
» Tworzenie drugiej strony witryny 18 » Podsumowanie lekcji 56
» Dodanie do stron tekstu i grafiki 20 » Inne projekty 56
» Wykańczanie witryny 23
Lekcja 2. Użycie tabel do opisu
układu stron 58

Część I Przygotowanie do pracy » Tabele 60
» Tworzenie szablonu tabeli 61
Podstawy HTML 27 » Użycie tabeli na stronie głównej
witryny 63
» HTML 27
» Użycie tabel na stronach głównych
» Oddzielenie treści od formy prezentacji 29 poszczególnych ośrodków 66
» Użycie arkusza stylów 30 » Szerokość kolumn tabeli 71
» Aktywna strona i interakcja » Tabele na stronach nawigacyjnych 72
z użytkownikiem 31
» Tabela na stronie pokazu slajdów 74
» JavaScript na naszych stronach 32
» Podsumowanie lekcji 76
Przegląd projektu 33 » Inne projekty 76

» Projekt na potrzeby kursu 33
» Witryna związana z książką 33 Część III Elementy graficzne
» Praca nad projektem 34
Lekcja 3. Przygotowanie elementów
Ogólne wskazówki oraz instrukcje graficznych 80
do plików źródłowych 35
» Kolory 82
» Korzystanie z plików z katalogu » Przygotowanie palety kolorów
Tutorial Files 35 na potrzeby witryny 85
» Instrukcje w przewodnikach 37 » Wybór ustawień i preferencji rysowania 87
» Wymagania systemowe 38 » Rysowanie pasków 90
» Sprawdzanie obrazka
do wypełniania tabel nawigacyjnych 92
Część II Zaczynamy » Tworzenie przycisku nawigacyjnego 93
» Wykańczanie przycisku nawigacyjnego 95
Lekcja 1. Tworzenie zarysu witryny 40
» Kopiowanie i modyfikacje
przycisku nawigacyjnego 97
» Od organizacji pomysłów
do organizacji witryny 42 » Podsumowanie lekcji 98
» Tworzenie folderów witryny 44 » Inne projekty 98

Spis treści

Lekcja 4. Przygotowanie logo witryny 100 » Dodanie zastrzeżeń 154
» Konfigurowanie obrazków muszli 156
» Przygotowanie warstw na logo Sizzle 102
» Style do pokazu slajdów 159
» Dodatkowe warstwy w pliku logo 104
» Dodanie obrazków i tekstu
» Manipulowanie warstwami logo do stron slajdów 161
i ich układanie 107
» Wiązanie stron slajdów ze stylami 163
» Wykańczanie logo Sizzle 109
» Tworzenie logo strony
pojedynczego ośrodka 112 » Inne projekty 165
» Tworzenie logo kolejnych ośrodków 114
» Eksport logo 116
Część V Struktura witryny
» Inne projekty 119 Lekcja 7. Tworzenie ramek i łączy 168

» Korzystanie z ramek 170
Część IV Grafika i obrazki » Tworzenie strony z ramkami 171
na stronach » Podział okna przeglądarki na ramki 172
» Ustalanie atrybutów ramek
Lekcja 5. Dostosowywanie tabel i ich zawartości 174
za pomocą stylów 122 » Nowe strony witryny Sizzle 175
» Tworzenie nowej strony z logo Sizzle 124 » Nowe elementy w tabeli nawigacyjnej 177
» Style i kaskadowe arkusze stylów 125 » Wiązanie stron w ramkach 178
» Tworzenie kaskadowego » Łącza do konkretnych miejsc
arkusza stylów witryny Sizzle 127 na stronie 181
» Dodanie obramowań i logo » Podsumowanie lekcji 182
do tabel na stronach » Inne projekty 182
poszczególnych ośrodków 129
» Sprawdzanie treści strony Lekcja 8. Dodatkowe elementy
i arkusza stylów 132 nawigacyjne na witrynie 184
» Dodanie nowej strony
z informacjami o rezerwacjach 135 » Projektowanie nawigacji po witrynie 186
» Rozmieszczenie tabel » Dodanie hiperłączy
na stronie o rezerwacjach 138 ze strony głównej 187
» Dołączanie stylów do strony » Tworzenie łączy między stronami 189
o rezerwacjach 140 » Przygotowanie mapy witryny 191
» Podsumowanie lekcji 142 » Wiązanie hiperłączy mapy witryny 193
» Inne projekty 142 » Dostęp do mapy witryny z ramek 195
» Wykorzystanie obrazków jako
Lekcja 6. Użycie obrazków 144 hiperłączy 196
» Dzielenie obrazka na części 146 » Logo linii lotniczych jako hiperłącza 198
» Sprawdzanie jakości obrazka 149 » Podsumowanie lekcji 199
» Zmiana wymiarów obrazka 151 » Inne projekty 199

6 HTML. Kurs webmastera

Spis treści

Część VI Uatrakcyjnianie witryny » Określanie współrzędnych na stronie
na potrzeby mapy obrazkowej 250
Lekcja 9. Użycie stylów do tekstu » Użycie mapy obrazkowej do nawigacji 251
i do opisu położenia 202 » Treści generowane dynamicznie
za pomocą JavaScriptu 253
» Zapis nagłówków i stylów tekstu 204
» Zmiana komunikatu
» Stosowanie stylów nagłówków 206 w pasku stanu przeglądarki 255
» Wykańczanie stylów nagłówków 208 » Automatyczne pokazywanie daty 257
» Użycie na stronach list 210 » Podsumowanie lekcji 259
» Tworzenie specjalnego stylu akapitu 212 » Inne projekty 259
» Użycie stylów do rozmieszczania
treści na stronie 215 Lekcja 12. Użycie JavaScriptu 262
» Pozycjonowanie obrazka na stronie 217
» Dodanie ostatecznych wersji stylów
» Podsumowanie lekcji 219 do strony logo 264
» Inne projekty 219 » Ostateczne poprawki
w zestawie ramek witryny Sizzle 267
Lekcja 10. Dołączanie stylów » Tworzenie stylów do stron
i elementów pokazu slajdów 268
nawigacyjnych 222
» Stosowanie stylów i łączy
na stronach pokazu slajdów 270
» Pseudoklasy i pseudoelementy 224
» Tworzenie stylów hiperłączy witryny 227
» Jeszcze o zmiennych i funkcjach 271

» Stosowanie zwielokrotnionych » Skrypty nawigacyjne i przyciski
z obrazkami 273
obrazków w tabeli nawigacyjnej 229
» Style komórek tabeli nawigacyjnej 230
» Tworzenie pokazu slajdów Sizzle 276

» Kolorowanie i pozycjonowanie » Podsumowanie lekcji 280
komórek w tabeli nawigacyjnej 231 » Inne projekty 280
» Tworzenie stylów hiperłączy
ramki nawigacyjnej 234 Lekcja 13. Dołączanie do witryny
» Użycie stylu z inicjałem 236 formularza 282
» Podsumowanie lekcji 238 » Wyświetlanie użytkownikowi
» Inne projekty 238 komunikatów 284
» Zarządzanie otwartymi oknami
w JavaScripcie 286
Część VII Zaawansowane techniki » Kontrolowanie wielkości okna
w JavaScripcie 288
na naszej witrynie
» Definiowanie formularza 291
Lekcja 11. Dodanie do witryny » Tworzenie najprostszego formularza 292
nowych stron i obiektów 242 » Użycie atrybutów formularza 294

» Dodanie do witryny pliku PDF 244 » Sprawdzanie poprawności danych 298

» Włączenie filmu w technologii Flash 247 » Podsumowanie lekcji 301

» Tworzenie map obrazkowych 249 » Inne projekty 301

7

Spis treści

Część VIII Niech nas zobaczą
Lekcja 14. Dostępność
gwarantowana 304

» Dostępność: wytyczne i standardy 306
» Tworzenie stron bez ramek 308
» Tabele nawigacyjne do stron
bez ramek 311
» Cała strona jako obiekt 313
» Poprawki na głównych stronach
bezramkowych 314
» Kończymy pracę nad stronami
bez ramek 316
» Przeglądamy strony witryny Sizzle 319
» Testowanie wyglądu stron
przy zmienionych ustawieniach 322
» Inne projekty 325

Lekcja 15. Sprawdzanie
naszej witryny 328

» Rozdzielczość ekranu 330
» Testowanie witryny
przy różnych ustawieniach ekranu 331
» Zaczynamy ostatnie testy
witryny Sizzle 334
» Kończymy przegląd witryny 337
» Ostatnie poprawki w treści i układzie 340
» Inne projekty 343

Dodatki
Zawartość płyty CD-ROM 347
Skorowidz 353


Analiza
Projektowanie nawigacji po witrynie
Najlepszy sposób zapewnienia, że nasi goście zapoznają się ze wszystkim, co nasza witryna
ma do zaoferowania, to udostępnienie różnych metod nawigacji po stronach. Jak na razie
na witrynie umieściliśmy ramkę nawigacyjną — dogodną metodę nawigacji wykorzystującą
tekst lub hiperłącza obrazkowe. Ramka nawigacyjna zawiera zestawienie najważniejszych
elementów witryny i udostępnia je po kliknięciu odpowiedniego tekstu.

Hiperłącza są też intensywnie używane bezpośrednio na stronach witryny. Kiedy użytkownik
czyta strony naszej witryny, udostępnienie mu łączy do poszczególnych tematów jest dobrym
sposobem uprzyjemnienia i ułatwienia lektury.

Innym typowym elementem nawigacyjnym jest mapa witryny. Mapa taka to pewnego rodzaju
szkic witryny pokazujący jej strukturę oraz prezentujący hierarchię informacji tej witryny. Witryna
Sizzle jest prosta, gdyż ma tylko dwa poziomy gałęzi, ale często witryny mają bardzo dużo
takich poziomów. Ba, czasem zdaje się, że poziomom tym nie ma końca! Mapa witryny może
zawierać najbardziej elementarne informacje o stronach, może też być jedynie spisem łączy
tekstowych.

Witryny mogą zawierać menu kontrolowane przez programy
JavaScript otwierające podmenu i osobne okna lub ramki. Inne
przydatne elementy nawigacyjne to przyciski i menu. W lekcji 13.
do stron pokazu slajdów dodamy przyciski, które za pośrednictwem
JavaScriptu będą przesuwały slajdy lub zamykały pokaz. Inną
metodą nawigacji jest mapa obrazkowa: specjalnie zakodowany
obrazek, który pozwala realizować pewne funkcje podobnie jak
JavaScript bez konieczności programowania. Na rysunku pokazano
zestaw przycisków nawigacyjnych.

Przyciski mogą być używane jako samodzielne elementy
nawigacyjne; oprogramowuje się je w tym celu JavaScriptem.
Można je też włączać w obrazki i używać w połączeniu z mapami
obrazkowymi. Z punktu widzenia użytkownika zawsze zachowują
się one tak samo. Mapę obrazkową na potrzeby naszej witryny
stworzymy w następnej lekcji.

Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie

Przewodnik
Dodawanie hiperłączy ze strony głównej
Kiedy nasza witryna jest ładowana do przeglądarki Internet Explorer, w głównej ramce pokazywana jest
strona main.html stanowiąca krótkie wprowadzenie o ośrodkach Sizzle. Czytelnicy mogą przechodzić
do stron poszczególnych ośrodków bezpośrednio z tej strony. W tym przewodniku dodamy do strony
main.html tabelę i łącza tekstowe, które umożliwią takie przechodzenie.

Otwieramy Notatnik, a w nim plik main.html.
Przechodzimy do wiersza 40., wciskamy Enter,
dodając pusty wiersz.
Nowy kod będziemy dopisywać poczynając właśnie
od 40. wiersza.

OSTRZEŻENIE
W poszczególnych krokach przewodnika odwołujemy
się do numerów wierszy. Numery wierszy u Czytelnika
mogą być nieco inne niż pokazane na zrzutach ekranów
czy podawane w opisie. Numerów tych należy używać
jako punktów odniesienia, ale trzeba też uważnie
sprawdzać zawartość danego wiersza, aby poprawiać
odpowiedni kod lub dopisywać go we właściwym
miejscu.

W wierszu 40. piszemy DT .
Po tabeli wstawiamy koniec wiersza, aby optycznie
tabele były od siebie oddzielone.
W wierszach od 41. do 48. piszemy:
VCDNG ENCUU DQQMKPI YKFVJ DQTFGT
EGNNRCFFKPI
VT
VF 2QPCL PCUG Q TQFMKVF
VF 5+.' 95%*¦VF
VF 5+.' #%*¦VF
VF 5+.' 21 70+'VF
VT
VCDNG
Na stronę wstawiana jest jednowierszowa,
czterokolumnowa tabela. Używamy w niej tej samej
klasy stylu, którą przygotowaliśmy do tabel ze strony
booking.html. Styl ten powoduje wyświetlenie
zielonego górnego obramowania tabeli. Pozostałe
atrybuty są takie same, jak w przypadku pierwszej
tabeli ze strony main.html.
Zapisujemy plik i oglądamy go w przeglądarce
Internet Explorer.
Zwróćmy uwagę na efekt zastosowania stylu do
tabeli oraz na to, jak kolorowe obramowanie jest
oddzielone od większej tabeli. Ukrywamy okno
przeglądarki.

187


Wiersze od 44. do 46. modyfikujemy następująco:
VF C JTGH UKNGAYUEJQFJVON
VCTIGV OCKP 5+.' 95%*¦C VF
VF C JTGH UKNGAYGUVJVON
VCTIGV OCKP 5+.' #%*¦C VF
VF C JTGH UKNGAUQWVJJVON
VCTIGV OCKP 5+.' 21 70+'C VF
Do nazwy każdego ośrodka dodajemy hiperłącze.
Wszystkie te łącza odwołują się do ramki głównej
z naszego zestawu.
Wybieramy z menu Plik/Zapisz i zapisujemy plik.
Uruchamiamy przeglądarkę Internet Explorer,
otwieramy w niej plik index.html.
Ładowany jest zestaw ramek naszej witryny.
Na dole głównej ramki klikamy nowe łącza,
które przed chwilą dodaliśmy.
Ładowane są strony poszczególnych ośrodków.
Klikamy łącze O NAS w ramce nawigacyjnej,
aby wrócić na stronę main.html.
Przewijamy stronę w dół i sprawdzamy następne
hiperłącze.

UWAGA
Kiedy przesuwamy kursor nad hiperłączem, jego
kształt zmienia się na dłoń, a w pasku stanu pojawia
się adres wskazywany przez to hiperłącze.

Sprawdzamy wszystkie trzy łącza.
Jeśli któreś z nich nie działa tak, jak to opisano
w tym przewodniku, trzeba sprawdzić, czy w kod
dodany w kroku 6. nie wkradły się jakieś błędy.
Wyłączamy przeglądarkę. Do naszej strony dodaliśmy
niewielką tabelę z przypisanym stylem. Dodaliśmy
i sprawdziliśmy łącza wewnętrzne wskazujące strony
poszczególnych ośrodków.



Przewodnik
Tworzenie łączy między stronami
Kiedy początkowo tworzyliśmy strony trzech naszych ośrodków, na dole strony dodaliśmy tekst i poziomą
kreskę. W tym przewodniku, wykorzystując ten tekst, stworzymy hiperłącza do trzech stron. Po sprawdzeniu
łączy na pierwszej stronie zamiast sprawdzać strony jedną po drugiej, postąpimy tak, jak zwykle postępuje
się przy tworzeniu witryn: na poszczególnych stronach umieścimy hiperłącza i sprawdzimy je.

Otwieramy Notatnik, a w nim otwieramy plik
sizzle_east.html.
Najpierw dodamy łącza do strony tego właśnie
ośrodka.
Przechodzimy do wiersza 36., wiersz ten
modyfikujemy następująco: R CRTCUCO[ PCC
JTGH UUJVON VCTIGV DNCPM RQMC UNCLFÎY
C R .
Do wyrażenia pokaz slajdów dodaliśmy hiperłącze.
Kiedy użytkownik kliknie to wyrażenie, w nowym
oknie, poza ramkami, otworzy się pierwsza strona
pokazu slajdów.
Przechodzimy do wiersza 38., po pierwszym
zdaniu dopisujemy C JTGH DQQMKPIJVON VCTIGV
OCKP 4GGTYCELG 676#,C .
Tym razem hiperłącze dodaliśmy do wyrażenia
Rezerwacje TUTAJ — kiedy użytkownik je kliknie,
strona o rezerwacjach otworzy się w ramce głównej.
Wybieramy z menu Plik/Zapisz, zapisując plik
na dysku.
Otwieramy przeglądarkę Internet Explorer, otwieramy
w niej stronę sizzle_east.html.
Klikamy łącze pokazu slajdów 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. Jeśli któreś z tych łączy nie zadziała,
sprawdzamy kod dopisany w krokach 2. i 3.
Zamykamy okno Internet Explorera.
Sprawdziliśmy już łącza na naszej stronie.
W Notatniku kopiujemy ze strony sizzle_east.html
wiersze od 36. do 38. do schowka, czyli kopiujemy
łącza pokazu slajdów i strony z rezerwacjami.
Łącza te wkleimy do stron pozostałych ośrodków.
Z menu wybieramy Plik/Otwórz, wybieramy stronę UWAGA
sizzle_west.html. Na stronie sizzle_east.html wskazaliśmy, że strona
booking.html ma być otwierana w ramce głównej
Proszeni o zapisanie strony sizzle_east.html naszego zestawu ramek. Jednak jako że stronę
klikamy Tak. sizzle_east.html otworzyliśmy poza tym zestawem,
Wybieramy tekst z wierszy od 35. do 37. strona ta nie była kontrolowana przez te ramki
i dlatego otworzone zostało nowe okno. W dalszej
Tekst ten to dwa fragmenty tekstu i poziome części tego przewodnika przetestujemy nasze łącza
odkreślenie. w ramkach.

189


Skopiowany wcześniej tekst wklejamy w miejsce
zaznaczonych wierszy.
Zaznaczone wiersze są usuwane, a w ich miejsce
pojawiają się wiersze z hiperłączami.
Kroki od 9. do 11. powtarzamy na stronie
sizzle_south.html.
Zapisujemy plik sizzle_south.html.
Otwieramy przeglądarkę Internet Explorer, otwieramy
w niej plik index.html.
Otwiera się zestaw ramek naszej witryny i do ramek
ładowane są początkowe ramki.
Przewijamy stronę main.html w dół.
Na dole strony klikamy łącze ośrodka Sizzle Wschód.
Strona tego ośrodka ładowana jest do ramki głównej.
Korzystając z pasków przewijania, przesuwamy się
na dół strony, do łączy na samym dole.
Sprawdzamy teraz działanie łączy w ramkach.
Otwieramy hiperłącze pokazu slajdów.
Strona ss1.html otwiera się w nowym oknie;
zamykamy to okno.
Na dole strony klikamy hiperłącze Rezerwacje TUTAJ.
W ramce głównej otwiera się strona booking.html.

WSKAZÓWKA
Wszystkie hiperłącza powinny działać tak, jak to tu
opisujemy. Jeśli tak nie jest, trzeba sprawdzić kod
wstawiony w wiersze od 36. do 38.

Klikamy dwukrotnie przycisk Wstecz, aby wrócić
na stronę main.html.
Kiedy przesuwamy wskaźnik myszy nad przyciskiem
Wstecz, tytuł strony pokazuje się w polu tekstowym
obok tego przycisku.

UWAGA
Prawidłowo zaprojektowana witryna nie powinna
opierać swojego działania na przyciskach
nawigacyjnych przeglądarki, takich jak właśnie
przycisk Wstecz. W dalszym ciągu nauki stworzymy
mapę obrazkową witryny, która powiąże trzy strony
poszczególnych ośrodków.

Sprawdzamy pozostałe dwa łącza na stronach
UWAGA poszczególnych ośrodków.
Zamiast kopiować i wklejać całe wiersze, można też
dodać hiperłącza ręcznie. Zastąpienie tekstu gotowymi Pokaz slajdów otwiera się we własnym oknie,
łączami jest prostsze i chroni nas przed błędami. informacja o rezerwacjach otwiera się w ramce.
Wyłączamy przeglądarkę Internet Explorer.



Przewodnik
Przygotowanie mapy witryny
Jednym ze sposobów ułatwienia użytkownikom zorientowania się, gdzie są w danej chwili, jest
udostępnienie wizualnej struktury treści. Mapy witryn są jednym z najstarszych „wynalazków” w Sieci.
Zwykle są one używane na bardzo obszernych witrynach. Wprawdzie witryna Sizzle nie jest zbyt
skomplikowana, ale i tak mapa będzie bardzo przydatna. W tym przewodniku przygotujemy taką mapę
i wstawimy na nią tekst z dostarczonego pliku. Na dwóch innych stronach dodamy znaczniki zakładek,
aby możliwe było pełne używanie łą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 użyjemy na stronie z mapą witryny.

UWAGA
Do tekstu tego dodano puste wiersze, aby rozgraniczyć
grupy akapitów. Te puste wiersze ułatwiają podzielenie
strony na części.

Wybieramy z menu Plik/Otwórz, wybieramy plik
basic.html.
Plik ten także znajduje się w folderze Storage.
Przechodzimy do wiersza 11., zaznaczamy w nim
tymczasowo wstawiony tekst. Wciskamy Delete.
Tekst ten zastąpimy treścią pliku sitemap.txt.
Wybieramy z menu Edycja/Wstaw.
Tekst skopiowany z pliku sitemap.txt jest wklejany
na stronę. Upewniamy się, czy znacznik końcowy
DQF[ znajduje się za wklejonym tekstem.
Przechodzimy do wiersza 6. i tymczasowy tytuł
strony, między znacznikami VKVNG , zastępujemy
następującym: /CRC YKVT[P[ 5KNG.
Teraz nasza strona ma tytuł.
Zapisujemy plik w folderze Sizzle jako sitemap.html.
Mamy gotową następną stronę naszej witryny.
Otwieramy plik fine_print.html z foldera witryny Sizzle.
Na stronie tej dodamy dwie zakładki. UWAGA
Jeśli przejrzymy tekst łączy ze strony sitemap.html,
UWAGA okaże się, że znajdują się tam trzy odniesienia do
Zauważmy, że wiersze tekstu używane jako hiperłącza zawartości strony fine_print.html. Pierwsze z nich to
nie są jeszcze identyfikowane. W dalszej części tego ubezpieczenia, które zaczynają się na górze strony,
przewodnika dodamy do nich zakładki. więc nie potrzebują zakładki.

191


dodając nowy wiersz.
Przed tytułem akapitu poświęconego szczepieniom
znajduje się pusty wiersz. Dodajemy drugi pusty
wiersz, aby na stronie zachować optyczny podział
na części.
W wierszu 42. piszemy: C PCOG XCEEKPCVKQPU
KF XCEEKPCVKQPU C .
W ten sposób dodaliśmy nazwaną zakładkę na
początku informacji o szczepieniach. Zakładki tej
użyjemy w odnośniku na stronie sitemap.html.
dodając kolejny pusty wiersz.
Tytuł informacji wizowych też zaczyna się od pustego
wiersza; podobnie jak poprzednio dodajemy pusty
wiersz w celu zachowania optycznego odstępu.
W wierszu 51. piszemy: C PCOG XKUCU
KF XKUCU C .
Dodaliśmy kolejną zakładkę, która wyznacza początek
informacji wizowych. Ta zakładka także zostanie użyta
jako łącze na stronie sitemap.html.
Zapisujemy plik fine_print.html.
Do strony tej dodaliśmy dwie zakładki. Zakładki te
będą użyte w utworzonym w tym przewodniku pliku
sitemap.html.



Przewodnik
Wiązanie hiperłączy mapy witryny
W poprzednim przewodniku stworzyliśmy stronę z mapą witryny, dodaliśmy zakładki do innych stron
witryny. Teraz mamy już wszystkie łącza. W tym przewodniku przygotujemy zestaw hiperłączy strony
sitemap.html. W przypadku każdego odwołania łącze jest tworzone na podstawie ważnego zdania z tekstu
lub wyrażenia. Teraz trzeba jeszcze uważnie dodać znaczniki. Wszystkie znaczniki mają między innymi
atrybut VCTIGV. Gdybyśmy nie podali tego atrybutu, strony docelowe byłyby ładowane w miejsce strony
sitemap.html. Tekst mapy jest podzielony na dwie części i analogicznie na dwie części 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 ośrodkach
Sizzle.
Modyfikujemy pierwszą część tekstu zgodnie
tabelą 8.1.
Każdy wiersz wymaga znaczników początkowego
i końcowego C oraz atrybutów.

UWAGA
W tabeli podano numery wierszy, tekst oryginalny
i tekst, jaki powinien w pliku znaleźć się ostatecznie.
Tekst trzech stron poszczególnych ośrodków jest
zawinięty, aby poprawić czytelność kodu.

Tabela 8.1. Znaczniki hiperłączy w pierwszej części strony mapy witryny

Wiersz Tekst pierwotny Ostateczna postać
14 R +PHQTOCELG QIÎNPGR R C JTGH OCKPJVON VCTIGV DNCPM +PHQTOCELG
QIÎNPGC R

15 – 16 R 5KNG 9UEJÎF VWVCL CYTGU PQYG R C JTGH UKNGAGCUVJVON VCTIGV DNCPM 5KNG
PCLQOQ EKR 9UEJÎFC VWVCL CYTGU PQYG PCLQOQ EKR

17 – 18 R 5KNG CEJÎF FNC RCT MVÎTG EJEæ R C JTGH UKNGAYGUVJVON VCTIGV DNCPM 5KNG
WEKGE QF YU[UVMKGIQR CEJÎFC FNC RCT MVÎTG EJEæ WEKGE QF
YU[UVMKGIQR

19 – 20 R 5KNG 2Q WFPKG FNC OK Q PKMÎY R C JTGH UKNGAUQWVJJVON VCTIGV DNCPM 5KNG
URQTVWR 2Q WFPKGC FNC OK Q PKMÎY URQTVWR

21 R 1DGLT[L PCU HKNO R R 1DGLT[L PCU C JTGH XKFGQJVON
VCTIGV DNCPM HKNOC R

22 R 1 PCU Y UMTÎEKGR R 1 PCU C JTGH EQPVCEVJVON VCTIGV DNCPM
Y UMTÎEKGC R

23 R 1FYKGF PCU UMNGR R R 1FYKGF PCU C JTGH UVQTGJVON
VCTIGV DNCPM UMNGRC R

24 R 2QMC UNCLFÎY PCU[EJ Q TQFMÎY R R C JTGH UUJVON VCTIGV DNCPM 2QMC
UNCLFÎYC PCU[EJ Q TQFMÎY R

193


Wiersze od 26. do 32. zawierają drugą część
treści hiperłączy naszej mapy; te łącza dotyczą
przygotowania się do podróży.
Modyfikujemy drugą część tekstu zgodnie
z tabelą 8.2.
Każdy wiersz wymaga znaczników początkowego
i końcowego C oraz atrybutów.
Zapisujemy stronę sitemap.html.
Dodaliśmy do naszej mapy witryny hiperłącza do
stron i do zakładek na stronach. Notatnik zostawiamy
otwarty, gdyż będzie nam potrzebny w następnym
przewodniku.
Uruchamiamy przeglądarkę Internet Explorer.
Otwieramy stronę sitemap.html.
Sprawdzamy działanie hiperłączy.
Klikamy kolejne hiperłącza. Pierwsze z nich powoduje
otwarcie nowego okna przeglądarki, wszystkie
pozostałe otwierają strony już w tym oknie.

WSKAZÓWKA
Trzeba przetestować wszystkie hiperłącza.
Konieczne jest sprawdzenie, czy wszystkie strony
ładują się prawidłowo do drugiego okna
przeglądarki. Sprawdzamy, czy łącza do zakładek
pokazują odpowiedni fragment strony. Jeśli któreś
łącza nie będą działały prawidłowo, sprawdzamy
kod dodany w krokach 3. i 5.

Zamykamy oba okna przeglądarki.

Tabela 8.2. Znaczniki hiperłączy w pierwszej części strony mapy witryny

Wiersz Tekst pierwotny Ostateczna postać
27 R 4GGTYCELG R R C JTGH DQQMKPIJVON VCTIGV DNCPM 4GGTYCELG C R

28 R .KPKG NQVPKEG R R C JTGH DQQMKPIJVON CKTNKPGU VCTIGV DNCPM .KPKG NQVPKEG C R

29 R 7DGRKGEGPKC R R C JTGH HKPGARTKPVJVON VCTIGV DNCPM 7DGRKGEGPKC C R

30 R 5EGRKGPKC R R C JTGH HKPGARTKPVJVON XCEEKPCVKQPU VCTIGV DNCPM 5EGRKGPKC
C R

31 R 9K[ R R C JTGH HKPGARTKPVJVON XKUCU VCTIGV DNCPM 9K[ C R



Przewodnik
Dostęp do mapy witryny z ramek
Utworzyliśmy mapę witryny, przygotowaliśmy łącza między mapą a poszczególnymi stronami witryny.
Potrzebna jest nam metoda dostępu do mapy witryny z ramek. W tym przewodniku dodamy stosowne
hiperłącze do tabeli nawigacyjnej.

W Notatniku otwieramy stronę nav_left.html.
W ramce nawigacyjnej dodamy hiperłącze do mapy
witryny.
Przechodzimy do wiersza 13., wartość atrybutu
TQYURCP zmieniamy z na .
Dodajemy do tabeli jeden wiersz, więc musimy
powiększyć wysokość pierwszej kolumny.
dodając pusty wiersz.
Umieścimy tutaj kod opisujący dodatkowy wiersz
tabeli.
W wierszach od 41. do 43. piszemy:
VT
VF C JTGH UKVGOCRJVON VCTIGV DNCPM /CRC
YKVT[P[C VF
VT
Jest to nowy wiersz tabeli. Napis Mapa witryny jest
powiązany ze stroną sitemap.html.
Zapisujemy stronę nav_left.html. Zostawiamy
Notatnik otwarty, gdyż będzie nam potrzebny
w następnym przewodniku.
Utworzyliśmy zatem hiperłącze z zestawu ramek
do mapy witryny.
otwieramy w niej stronę index.html.
Ładuje się zestaw ramek.
Klikamy łącze Mapa witryny znajdujące się na dole
tabeli nawigacyjnej.
Różnica między mapą witryny
UWAGA a witryną łatwo dostępną
Łącza zewnętrzne z naszej witryny należy tak
zapisywać, aby powodowały otwieranie osobnych Stworzyliśmy i powiązaliśmy z witryną jej mapę.
okien. Dzięki temu cudza witryna nie pojawi się Wprawdzie mapa witryny pozwala użytkownikowi
wewnątrz naszej. Jeśli nie zdefiniujemy atrybutu wyjść poza ramki, jest to co innego niż witryna
VCTIGV, przeglądarka załaduje wskazywaną stronę bez ramek. Na mapie użytkownik może oglądać
do zestawu ramek Sizzle. dowolną stronę, ale musi używać dwóch okien
przeglądarki i w celu wybrania kolejnego hiperłącza
musi wracać na stronę sitemap.html. W przypadku
witryny bez ramek wszystkie elementy nawigacyjne
znajdują się bezpośrednio na stronach, dzięki czemu
użytkownik może oglądać witrynę w jednym oknie
przeglądarki. Strony sitemap.html używamy jako
podstawy do pewnej pracy w lekcji 14.; celem
naszym będzie wtedy zapewnienie możliwości
poruszania się po witrynie bez ramek.

195


Przewodnik
Wykorzystanie obrazków jako hiperłączy
Mapa naszej witryny jest gotowa i dostępna z ramki nawigacyjnej. Dodaliśmy do naszej strony mnóstwo
hiperłączy tekstowych. Strona booking.html zawiera obrazki z logo różnych linii lotniczych. W tym
przewodniku powiążemy łącza z tych logo z witrynami poszczególnych towarzystw lotniczych.
Nasze towarzystwa są fikcyjne, podobnie jak ich logo i adresy internetowe.

W Notatniku otwieramy plik booking.html.
Do strony tej dodamy hiperłącza.
W wierszach 41. i 42. znajdują się znaczniki obrazka
logo linii Global Airlines. Obrazek ten umieszczony
jest w tabeli.
Po znaczniku VF dopisujemy: C
JTGH JVVRYYYINQDCNCKTZEQO VCTIGV DNCPM .
Dodajemy znacznik otwierający hiperłącza,
nakazujemy otwieranie wskazywanej witryny
w osobnym oknie. Musimy podać pełną, czyli
bezwzględną, ścieżkę do witryny.
Przechodzimy na koniec znacznika z logo linii
lotniczych, przed znacznikiem VF , obecnie
w wierszu 43., dopisujemy C .
Zakończyliśmy wpisywanie hiperłącza.
Zapisujemy stronę booking.html.
otwieramy w niej stronę booking.html.
Klikamy logo Global Airlines. Dookoła obrazka logo
pojawia się kolorowa obwódka. Wskazana witryna
Ścieżki dokumentów
otwiera się w nowym oknie, ale widzimy komunikat
Aż do tej chwili dokumenty naszej witryny o niemożności znalezienia takiej strony — nic nie
wskazywaliśmy, korzystając ze względnych ścieżek szkodzi, adres ten nie wskazuje żadnej istniejącej
dokumentów. W tym wypadku docelowy dokument rzeczywiście witryny.
jest określony przez nazwę pliku i jego typ oraz, jeśli
znajduje się w innym folderze, nazwę tego foldera. WSKAZÓWKA
Aby powiązać dokument spoza witryny, trzeba użyć
Kiedy przesuwamy kursor myszy nad obrazkiem, jego
ścieżki bezwzględnej. Ścieżka bezwzględna zawiera
kształt zmienia się w dłoń, pokazywany jest tekst
pełny adres URL wskazywanego dokumentu wraz
zastępczy, a w pasku stanu przeglądarki pojawia się
z protokołem, zwykle JVVR. Adresy witryn linii
lotniczych podajemy jako ścieżki bezwzględne. adres docelowy hiperłącza.

Ukrywamy okno przeglądarki.

UWAGA
Kiedy dodawaliśmy łącza tekstowe, widzieliśmy
UWAGA niebieski, podkreślony tekst, który po kliknięciu
Hiperłącza można sprawdzać bezpośrednio na zmieniał kolor na fiolet. Są to domyślne ustawienia
odpowiednich stronach, bez używania zestawu ramek. przeglądarki. Innym ustawieniem domyślnym
Wskazywane witryny nie są istotne w naszym przeglądarki jest dodawanie obramowania dookoła
przewodniku, służą jedynie jako przykłady. hiperłącza w formie obrazka.



W Notatniku na końcu definicji obrazka,
w wierszu 43., dopisujemy DQTFGT .
Zwróćmy uwagę, aby ten atrybut pojawił się przed
znacznikiem końcowym obrazka.
Zapisujemy plik booking.html.
Do znacznika KOI dodaliśmy kolejny atrybut.
Ponownie uruchamiamy przeglądarkę, klikamy
Odśwież, aby przeładować stronę.
Ładowana jest nowa wersja strony.
Klikamy obrazek logo, aby ponownie go
przetestować.
Witryna linii lotniczych otwiera się w innym oknie
przeglądarki, ale tym razem obrazek nie ma już
obramowania.
Zamykamy przeglądarkę.
Zamykamy oba okna przeglądarki. Dodaliśmy
i przetestowaliśmy łącze do obrazka,
zmodyfikowaliśmy też standardowy znacznik KOI ,
aby usunąć pojawiające się domyślnie obramowanie.
Zostawiamy Notatnik otwarty do następnego
przewodnika.

Szybsze ładowanie witryny
Zamiast ładować nasz zestaw ramek poleceniem
Plik/Otwórz, możemy ustawić tę stronę jako jedną
z ulubionych. Uruchamiamy przeglądarkę Internet
Explorer, ładujemy interesującą nas stronę index.html
i z menu wybieramy Ulubione/Dodaj do Ulubionych….
Pojawia się okno dialogowe jak pokazane poniżej,
zawierające tytuł naszej strony z ramkami. Adresy komputerów
Zestaw protokołów, czyli pewnych reguł, nazywany
TCP/IP (Transmission Control Protocol/Internet
Protocol, Protokół sterowania transmisją/Protokół
internetowy) określa, jakie komunikaty są przesyłane
między komputerami. TCP odnosi się do procesu
przenoszenia danych między komputerami, IP zaś
dotyczy informacji przesyłanych w niewielkich
porcjach nazywanych pakietami.
Każdy komputer ma niepowtarzalny adres IP.
Spójrzmy na lewy dolny róg okna przeglądarki, kiedy
wejdziemy do Sieci. Często pojawiają się tam ciągi
cyfr, takie jak pokazany na rysunku. Są one wyświetlane
przed załadowaniem strony. Jest to adres IP strony.

Kiedy klikniemy OK, strona zostanie dodana Każda witryna ma adres w takiej właśnie postaci,
do Ulubionych i teraz możemy wybierać ją z listy choć zwykle łatwiej jest zapamiętać odpowiednik
ulubionych. tego adresu, taki jak google.com.

197


Przewodnik
Logo linii lotniczych jako hiperłącza
W poprzednim przewodniku dodaliśmy informacje o łączu do obrazka z logo fikcyjnych linii lotniczych
Global Airlines. W tym przewodniku utworzymy łącza dla pozostałych logo ze strony booking.html.

Przechodzimy do wiersza 44. strony booking.html.
Znajdujemy komórkę zawierającą obrazek logo TD Air.
Po znaczniku początkowym VF dopisujemy:
C JTGH JVVRYYYVFCKTZEQO VCTIGV DNCPM .
Dodaliśmy znacznik początkowy hiperłącza,
nakazaliśmy otwierać go w nowym oknie.
Przechodzimy na koniec znacznika KOI . Po atrybucie
CNV dopisujemy DQTFGT , aby obramowanie obrazka
było niewidoczne.
Przechodzimy na koniec znacznika obrazka i przed
końcowym znacznikiem VF , obecnie w wierszu 46.,
dopisujemy C , zamykając tym samym hiperłącze.
Zapisujemy plik booking.html.
Dodaliśmy kolejne hiperłącze w formie obrazka.
Wiersz ten zawiera znaczniki początkowe obrazka
logo BlueStar Air.
Powtarzamy kroki od 2. do 4., tym razem adres
URL to JVVRYYYDNWGUVCTKCTZEQO.
Dodajemy łącze i ramkę docelową, usuwamy
obramowanie obrazka.
Ten wiersz zawiera znaczniki początkowe obrazka
Seawinds Air.
Powtarzamy kroki od 2. do 4., tym razem
z adresem URL JVVRYYYUGCYKPFUCKTZEQO.
Dodajemy łącze i ramkę docelową, usuwamy
obramowanie obrazka.
Sprawdzamy w przeglądarce działanie nowych
hiperłączy, ukrywamy okno przeglądarki.
Zamykamy przeglądarkę. Zapisujemy plik, zamykamy Notatnik.
Do obrazków logo ze strony booking.html dodaliśmy Na stronie booking.html do obrazków logo linii
hiperłącza, przetestowaliśmy je na osobnej stronie lotniczych dodaliśmy hiperłącza.
oraz w ramkach. Uruchamiamy przeglądarkę, otwieramy w niej
stronę index.html.
WSKAZÓWKA Klikamy w ramce nawigacyjnej LINIE LOTNICZE.
Upewnijmy się, czy atrybut DQTFGT znajduje się przed
zamknięciem obrazka, . W głównej ramce ładuje się strona booking.html
i ustawia się od razu na zakładce linii lotniczych.
UWAGA Sprawdzamy działanie pozostałych hiperłączy.
W pliku booking.html znaczniki opisujące poszczególne Każda witryna Sieci powinna załadować się do tego
obrazki zapisywane są w dwóch kolejnych wierszach. samego okna przeglądarki.



Podsumowanie lekcji
W tej lekcji do naszej witryny dodaliśmy wiele hiperłączy. Dodaliśmy łącza wewnętrzne do stron,
umożliwiające użytkownikom przeglądanie witryny i pobieranie interesujących ich danych bez konieczności
korzystania z menu nawigacyjnego. Obrazek na początku tej sesji pokazuje dolną część głównej strony
witryny. Ostatni obrazek pokazuje tę samą stronę, ale już z nowymi hiperłączami wewnętrznymi.

Nauczyliśmy się tworzyć mapę witryny i wiązać ją ze stronami. Powiązaliśmy też obrazki ze stronami,
korzystając po raz pierwszy z adresów bezwzględnych. Łącza są powiązane z obrazkami logo towarzystw
lotniczych, po kliknięciu powodują otwieranie witryn tych towarzystw. Są tak ustawione, aby otwierały
się w nowym oknie przeglądarki, poza naszą witryną.

Odpowiedzi na podane niżej pytania pomogą utrwalić sobie wiedzę z tej lekcji. Wszystkie znaleźć można
w przewodnikach wskazanych w nawiasach.
Czy na witrynie warto stosować więcej 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 przeglądarki można zobaczyć, co się kryje „na drugim końcu” hiperłącza? (Przewodnik.
Dodajemy hiperłącza ze strony głównej)
Czy można oglądać strony poza ramkami witryny? Kiedy się to robi? (Przewodnik. Tworzenie łączy
między stronami)
Czy podczas nawigacji po witrynie można polegać na użyciu przycisku Wstecz przeglądarki?
(Przewodnik. Tworzenie łączy między stronami)
Do czego służy mapa witryny? Do czego może się przydać użytkownikowi? (Przewodnik.
Przygotowanie mapy witryny)
Jeśli powiążemy hiperłączem informacje na stronie, to czy trzeba dodawać zakładkę na stronie
docelowej, jeśli interesujące nas informacje znajdują się na górze strony? (Przewodnik.
Przygotowanie mapy witryny)
Kiedy trzeba dodawać atrybut VCTIGV w przypadku korzystania ze znaczników C ? (Przewodnik.
Wiązanie hiperłączy z mapy witryny)
Jak w atrybucie JTGH wskazuje się zakładkę? (Przewodnik. Wiązanie hiperłączy z mapy witryny)
Czy podczas dodawania do tabeli nowych wierszy trzeba zmieniać wartości atrybutu TQYURCP?
(Przewodnik. Dostęp do mapy witryny z ramek)
Czy Internet Explorer używa do hiperłączy stylów domyślnych? (Przewodnik. Wykorzystanie
obrazków jako hiperłączy)
Jak można usunąć obramowanie wstawiane domyślnie przez przeglądarkę wokół łącza w formie
obrazka? (Przewodnik. Wykorzystanie obrazków jako hiperłączy)
Co to jest ścieżka bezwzględna? Jak się jej używa? (Przewodnik. Wykorzystanie obrazków jako
hiperłączy)
Co jest wyświetlane przez przeglądarkę, kiedy przesuwamy wskaźnik myszy nad obrazkiem będącym
linkiem? (Przewodnik. Logo linii lotniczych jako hiperłącza)

Inne projekty
Użyj usługi W3C Validator do sprawdzenia stron booking.html oraz sitemap.html.
Upiększ zawartość strony sitemap.html, korzystając ze stylów przygotowanych we wcześniejszych
lekcjach. Oto kilka pomysłów: u yj obrazków muszli, umieść je w tekście za pomocą stylów. Dodaj
tabelę i sformatuj ją za pomocą stylów. Nie modyfikuj tła, gdy w następnej lekcji stworzymy styl
opisujący tło strony.

199

HTML. Kurs webmastera

More Related Content

Similar to HTML. Kurs webmastera (20)

More from Wydawnictwo Helion (20)

HTML. Kurs webmastera