HTML. Kurs webmastera

Wydawnictwo Helionul. Chopina 644-100 Gliwicetel. (32)230-98-63e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIA

FRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TRE�CISPIS TRE�CI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

HTML. KurswebmasteraAutor: Donna L. BakerT³umaczenie: Tomasz ¯mijewskiISBN: 83-7361-511-3Tytu³ orygina³u: HTML Complete CourseFormat: B5, stron: 360

Ksi¹¿ka „HTML. Kurs webmastera” to podrêcznik pokazuj¹cy niemal wszystkieaspekty tworzenia witryny WWW. Kolejne rozdzia³y przedstawiaj¹ proces tworzenia profesjonalnej witryny WWW zgodnej z najnowszymi standardami rekomendowanymi przez konsorcjum W3C, wykorzystuj¹cej technologie XHTML i JavaScript.Ksi¹¿ka opisuje tak¿e sposoby do³¹czania do witryny elementów multimedialnych, konstruowania interaktywnych formularzy i testowania witryny.

• Projektowanie struktury witryny• Przygotowanie elementów graficznych• Formatowanie tabel za pomoc¹ stylów• Stosowanie tabel do wyrównywania po³o¿enia obrazków• Tworzenie mechanizmów nawigacji• Korzystanie z elementów stylów CSS — klas i identyfikatorów• Osadzanie na stronie elementów multimedialnych• U¿ywanie skryptów JavaScript• Konstruowanie formularzy• Testowanie witryny• Publikacja witryny na serwerze

http://helion.pl/view/2547w



http://helion.pl/add/2547w/htmlkw




mailto:[email protected]

http://helion.pl/view/2547w/htmlkw.htm

http://www.amazon.com/exec/obidos/ASIN/0764540920/eboinf-20

Spis treści

Wstęp 9

Na zachętę 13

» Wstęp 13

» Tworzenie szkieletu strony 14

» Tworzenie pierwszej strony witryny 16

» Tworzenie drugiej strony witryny 18

» Dodanie do stron tekstu i grafiki 20

» Wykańczanie witryny 23

Część I Przygotowanie do pracy

Podstawy HTML 27

» HTML 27

» Oddzielenie treści od formy prezentacji 29

» Użycie arkusza stylów 30

» Aktywna strona i interakcjaz użytkownikiem 31

» JavaScript na naszych stronach 32

Przegląd projektu 33

» Projekt na potrzeby kursu 33

» Witryna związana z książką 33

» Praca nad projektem 34

Ogólne wskazówki oraz instrukcjedo plików źródłowych 35

» Korzystanie z plików z kataloguTutorial Files 35

» Instrukcje w przewodnikach 37

» Wymagania systemowe 38

Część II Zaczynamy

Lekcja 1. Tworzenie zarysu witryny 40

» Od organizacji pomysłówdo organizacji witryny 42

» Tworzenie folderów witryny 44

» Tworzenie pierwszej strony 45

» Oglądanie i sprawdzaniepierwszej strony 47

» Tworzenie stron interfejsu głównego 49

» Tworzenie zestawu podobnych stron 52

» Tworzenie pokazu slajdów 55

» Podsumowanie lekcji 56

» Inne projekty 56

Lekcja 2. Użycie tabel do opisuukładu stron 58

» Tabele 60

» Tworzenie szablonu tabeli 61

» Użycie tabeli na stronie głównejwitryny 63

» Użycie tabel na stronach głównychposzczególnych ośrodków 66

» Szerokość kolumn tabeli 71

» Tabele na stronach nawigacyjnych 72

» Tabela na stronie pokazu slajdów 74


» Inne projekty 76

Część III Elementy graficzne

Lekcja 3. Przygotowanie elementówgraficznych 80

» Kolory 82

» Przygotowanie palety kolorówna potrzeby witryny 85

» Wybór ustawień i preferencji rysowania 87

» Rysowanie pasków 90

» Sprawdzanie obrazkado wypełniania tabel nawigacyjnych 92

» Tworzenie przycisku nawigacyjnego 93

» Wykańczanie przycisku nawigacyjnego 95

» Kopiowanie i modyfikacjeprzycisku nawigacyjnego 97


» Inne projekty 98

Spis treści

6 HTML. Kurs webmastera

Lekcja 4. Przygotowanie logo witryny 100

» Przygotowanie warstw na logo Sizzle 102

» Dodatkowe warstwy w pliku logo 104

» Manipulowanie warstwami logoi ich układanie 107

» Wykańczanie logo Sizzle 109

» Tworzenie logo stronypojedynczego ośrodka 112

» Tworzenie logo kolejnych ośrodków 114

» Eksport logo 116


» Inne projekty 119

Część IV Grafika i obrazkina stronach

Lekcja 5. Dostosowywanie tabelza pomocą stylów 122

» Tworzenie nowej strony z logo Sizzle 124

» Style i kaskadowe arkusze stylów 125

» Tworzenie kaskadowegoarkusza stylów witryny Sizzle 127

» Dodanie obramowań i logodo tabel na stronachposzczególnych ośrodków 129

» Sprawdzanie treści stronyi arkusza stylów 132

» Dodanie nowej stronyz informacjami o rezerwacjach 135

» Rozmieszczenie tabelna stronie o rezerwacjach 138

» Dołączanie stylów do stronyo rezerwacjach 140



Lekcja 6. Użycie obrazków 144

» Dzielenie obrazka na części 146

» Sprawdzanie jakości obrazka 149

» Zmiana wymiarów obrazka 151

» Dodanie zastrzeżeń 154

» Konfigurowanie obrazków muszli 156

» Style do pokazu slajdów 159

» Dodanie obrazków i tekstudo stron slajdów 161

» Wiązanie stron slajdów ze stylami 163



Część V Struktura witryny

Lekcja 7. Tworzenie ramek i łączy 168

» Korzystanie z ramek 170

» Tworzenie strony z ramkami 171

» Podział okna przeglądarki na ramki 172

» Ustalanie atrybutów rameki ich zawartości 174

» Nowe strony witryny Sizzle 175

» Nowe elementy w tabeli nawigacyjnej 177

» Wiązanie stron w ramkach 178

» Łącza do konkretnych miejscna stronie 181



Lekcja 8. Dodatkowe elementynawigacyjne na witrynie 184

» Projektowanie nawigacji po witrynie 186

» Dodanie hiperłączyze strony głównej 187

» Tworzenie łączy między stronami 189

» Przygotowanie mapy witryny 191

» Wiązanie hiperłączy mapy witryny 193

» Dostęp do mapy witryny z ramek 195

» Wykorzystanie obrazków jakohiperłączy 196

» Logo linii lotniczych jako hiperłącza 198



Spis treści

7

Część VI Uatrakcyjnianie witryny

Lekcja 9. Użycie stylów do tekstui do opisu położenia 202

» Zapis nagłówków i stylów tekstu 204

» Stosowanie stylów nagłówków 206

» Wykańczanie stylów nagłówków 208

» Użycie na stronach list 210

» Tworzenie specjalnego stylu akapitu 212

» Użycie stylów do rozmieszczaniatreści na stronie 215

» Pozycjonowanie obrazka na stronie 217



Lekcja 10. Dołączanie stylówi elementównawigacyjnych 222

» Pseudoklasy i pseudoelementy 224

» Tworzenie stylów hiperłączy witryny 227

» Stosowanie zwielokrotnionychobrazków w tabeli nawigacyjnej 229

» Style komórek tabeli nawigacyjnej 230

» Kolorowanie i pozycjonowaniekomórek w tabeli nawigacyjnej 231

» Tworzenie stylów hiperłączyramki nawigacyjnej 234

» Użycie stylu z inicjałem 236



Część VII Zaawansowane technikina naszej witrynie

Lekcja 11. Dodanie do witrynynowych stron i obiektów 242

» Dodanie do witryny pliku PDF 244

» Włączenie filmu w technologii Flash 247

» Tworzenie map obrazkowych 249

» Określanie współrzędnych na stroniena potrzeby mapy obrazkowej 250

» Użycie mapy obrazkowej do nawigacji 251

» Treści generowane dynamicznieza pomocą JavaScriptu 253

» Zmiana komunikatuw pasku stanu przeglądarki 255

» Automatyczne pokazywanie daty 257



Lekcja 12. Użycie JavaScriptu 262

» Dodanie ostatecznych wersji stylówdo strony logo 264

» Ostateczne poprawkiw zestawie ramek witryny Sizzle 267

» Tworzenie stylów do stronpokazu slajdów 268

» Stosowanie stylów i łączyna stronach pokazu slajdów 270

» Jeszcze o zmiennych i funkcjach 271

» Skrypty nawigacyjne i przyciskiz obrazkami 273

» Tworzenie pokazu slajdów Sizzle 276



Lekcja 13. Dołączanie do witrynyformularza 282

» Wyświetlanie użytkownikowikomunikatów 284

» Zarządzanie otwartymi oknamiw JavaScripcie 286

» Kontrolowanie wielkości oknaw JavaScripcie 288

» Definiowanie formularza 291

» Tworzenie najprostszego formularza 292

» Użycie atrybutów formularza 294

» Sprawdzanie poprawności danych 298



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 stronbez ramek 311

» Cała strona jako obiekt 313

» Poprawki na głównych stronachbezramkowych 314

» Kończymy pracę nad stronamibez ramek 316

» Przeglądamy strony witryny Sizzle 319

» Testowanie wyglądu stronprzy zmienionych ustawieniach 322



Lekcja 15. Sprawdzanienaszej witryny 328

» Rozdzielczość ekranu 330

» Testowanie witrynyprzy różnych ustawieniach ekranu 331

» Zaczynamy ostatnie testywitryny Sizzle 334

» Kończymy przegląd witryny 337

» Ostatnie poprawki w treści i układzie 340



Dodatki

Zawartość płyty CD-ROM 347

Skorowidz 353

AnalizaProjektowanie 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

187

PrzewodnikDodawanie hiperłączy ze strony głównej

Kiedy nasza witryna jest ładowana do przeglądarki Internet Explorer, w głównej ramce pokazywana jeststrona 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 stronymain.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śnieod 40. wiersza.

OSTRZEŻENIEW poszczególnych krokach przewodnika odwołujemysię do numerów wierszy. Numery wierszy u Czytelnikamogą być nieco inne niż pokazane na zrzutach ekranówczy podawane w opisie. Numerów tych należy używaćjako punktów odniesienia, ale trzeba też uważniesprawdzać zawartość danego wiersza, aby poprawiaćodpowiedni kod lub dopisywać go we właściwymmiejscu.

W wierszu 40. piszemy ��.

Po tabeli wstawiamy koniec wiersza, aby optycznietabele były od siebie oddzielone.

W wierszach od 41. do 48. piszemy:

�� !��"��#$%%&'�(#)*+,��#$%%&'�%-)*+,��#$%%&'��./0,1$'��

Na stronę wstawiana jest jednowierszowa,czterokolumnowa tabela. Używamy w niej tej samejklasy stylu, którą przygotowaliśmy do tabel ze stronybooking.html. Styl ten powoduje wyświetleniezielonego górnego obramowania tabeli. Pozostałeatrybuty są takie same, jak w przypadku pierwszejtabeli ze strony main.html.

Zapisujemy plik i oglądamy go w przeglądarceInternet Explorer.

Zwróćmy uwagę na efekt zastosowania stylu dotabeli oraz na to, jak kolorowe obramowanie jestoddzielone od większej tabeli. Ukrywamy oknoprzeglądarki.



Wiersze od 44. do 46. modyfikujemy następująco:

��2 ��3��4��5�� 5��#$%%&'�(#)*+,��2 ��3��4��5�� 5��#$%%&'�%-)*+,��2 ��3��6��4��5�� 5��#$%%&'��./0,1$'��

Do nazwy każdego ośrodka dodajemy hiperłącze.Wszystkie te łącza odwołują się do ramki głównejz 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ępnehiperłącze.

UWAGAKiedy przesuwamy kursor nad hiperłączem, jegokształt zmienia się na dłoń, a w pasku stanu pojawiasię adres wskazywany przez to hiperłącze.

Sprawdzamy wszystkie trzy łącza.

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


189

PrzewodnikTworzenie łą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ępujesię przy tworzeniu witryn: na poszczególnych stronach umieścimy hiperłącza i sprawdzimy je.

Otwieramy Notatnik, a w nim otwieramy pliksizzle_east.html.

Najpierw dodamy łącza do strony tego właśnieośrodka.

Przechodzimy do wiersza 36., wiersz tenmodyfikujemy następująco: ��%��57��2 ��4��5�� 8��.

Do wyrażenia pokaz slajdów dodaliśmy hiperłącze.Kiedy użytkownik kliknie to wyrażenie, w nowymoknie, poza ramkami, otworzy się pierwsza stronapokazu slajdów.

Przechodzimy do wiersza 38., po pierwszymzdaniu dopisujemy ��2 ��4��5�� 5��9�� :0:-;��.

Tym razem hiperłącze dodaliśmy do wyrażeniaRezerwacje TUTAJ — kiedy użytkownik je kliknie,strona o rezerwacjach otworzy się w ramce głównej.

Wybieramy z menu Plik/Zapisz, zapisując plikna dysku.

Otwieramy przeglądarkę Internet Explorer, otwieramyw 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.htmlwiersze 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ęsizzle_west.html.

Proszeni o zapisanie strony sizzle_east.htmlklikamy Tak.

Wybieramy tekst z wierszy od 35. do 37.

Tekst ten to dwa fragmenty tekstu i poziomeodkreślenie.

UWAGANa stronie sizzle_east.html wskazaliśmy, że stronabooking.html ma być otwierana w ramce głównejnaszego zestawu ramek. Jednak jako że stronęsizzle_east.html otworzyliśmy poza tym zestawem,strona ta nie była kontrolowana przez te ramkii dlatego otworzone zostało nowe okno. W dalszejczęści tego przewodnika przetestujemy nasze łączaw ramkach.



UWAGAZamiast kopiować i wklejać całe wiersze, można teżdodać hiperłącza ręcznie. Zastąpienie tekstu gotowymiłączami jest prostsze i chroni nas przed błędami.

Skopiowany wcześniej tekst wklejamy w miejscezaznaczonych wierszy.

Zaznaczone wiersze są usuwane, a w ich miejscepojawiają się wiersze z hiperłączami.

Kroki od 9. do 11. powtarzamy na stroniesizzle_south.html.

Zapisujemy plik sizzle_south.html.

Otwieramy przeglądarkę Internet Explorer, otwieramyw 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ÓWKAWszystkie hiperłącza powinny działać tak, jak to tuopisujemy. Jeśli tak nie jest, trzeba sprawdzić kodwstawiony w wiersze od 36. do 38.

Klikamy dwukrotnie przycisk Wstecz, aby wrócićna stronę main.html.

Kiedy przesuwamy wskaźnik myszy nad przyciskiemWstecz, tytuł strony pokazuje się w polu tekstowymobok tego przycisku.

UWAGAPrawidłowo zaprojektowana witryna nie powinnaopierać swojego działania na przyciskachnawigacyjnych przeglądarki, takich jak właśnieprzycisk Wstecz. W dalszym ciągu nauki stworzymymapę obrazkową witryny, która powiąże trzy stronyposzczególnych ośrodków.

Sprawdzamy pozostałe dwa łącza na stronachposzczególnych ośrodków.

Pokaz slajdów otwiera się we własnym oknie,informacja o rezerwacjach otwiera się w ramce.

Wyłączamy przeglądarkę Internet Explorer.


191

PrzewodnikPrzygotowanie mapy witryny

Jednym ze sposobów ułatwienia użytkownikom zorientowania się, gdzie są w danej chwili, jestudostę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 zbytskomplikowana, 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 godo schowka.

Tekstu tego użyjemy na stronie z mapą witryny.

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

Wybieramy z menu Plik/Otwórz, wybieramy plikbasic.html.

Plik ten także znajduje się w folderze Storage.

Przechodzimy do wiersza 11., zaznaczamy w nimtymczasowo 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 wklejanyna stronę. Upewniamy się, czy znacznik końcowy��7� znajduje się za wklejonym tekstem.

Przechodzimy do wiersza 6. i tymczasowy tytułstrony, między znacznikami ��, zastępujemynastępującym: <��7�7�#��.

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.

UWAGAZauważmy, że wiersze tekstu używane jako hiperłączanie są jeszcze identyfikowane. W dalszej części tegoprzewodnika dodamy do nich zakładki.

UWAGAJeśli przejrzymy tekst łączy ze strony sitemap.html,okaże się, że znajdują się tam trzy odniesienia dozawartości strony fine_print.html. Pierwsze z nich toubezpieczenia, które zaczynają się na górze strony,więc nie potrzebują zakładki.



Przechodzimy do wiersza 41., wciskamy Enter,dodając nowy wiersz.

Przed tytułem akapitu poświęconego szczepieniomznajduje się pusty wiersz. Dodajemy drugi pustywiersz, aby na stronie zachować optyczny podziałna części.

W wierszu 42. piszemy: ��5 �=�� =��.

W ten sposób dodaliśmy nazwaną zakładkę napoczątku informacji o szczepieniach. Zakładki tejużyjemy w odnośniku na stronie sitemap.html.

Przechodzimy do wiersza 50., wciskamy Enter,dodając kolejny pusty wiersz.

Tytuł informacji wizowych też zaczyna się od pustegowiersza; podobnie jak poprzednio dodajemy pustywiersz w celu zachowania optycznego odstępu.

W wierszu 51. piszemy: ��5 �=�� =��.

Dodaliśmy kolejną zakładkę, która wyznacza początekinformacji wizowych. Ta zakładka także zostanie użytajako łącze na stronie sitemap.html.

Zapisujemy plik fine_print.html.

Do strony tej dodaliśmy dwie zakładki. Zakładki tebędą użyte w utworzonym w tym przewodniku plikusitemap.html.


193

PrzewodnikWiązanie hiperłączy mapy witryny

W poprzednim przewodniku stworzyliśmy stronę z mapą witryny, dodaliśmy zakładki do innych stronwitryny. Teraz mamy już wszystkie łącza. W tym przewodniku przygotujemy zestaw hiperłączy stronysitemap.html. W przypadku każdego odwołania łącze jest tworzone na podstawie ważnego zdania z tekstulub wyrażenia. Teraz trzeba jeszcze uważnie dodać znaczniki. Wszystkie znaczniki mają między innymiatrybut ��. Gdybyśmy nie podali tego atrybutu, strony docelowe byłyby ładowane w miejsce stronysitemap.html. Tekst mapy jest podzielony na dwie części i analogicznie na dwie części podzielono krokitego 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ść pierwszejgrupy łączy mapy — są to informacje o ośrodkachSizzle.

Modyfikujemy pierwszą część tekstu zgodnietabelą 8.1.

Każdy wiersz wymaga znaczników początkowegoi końcowego �� oraz atrybutów.

UWAGAW tabeli podano numery wierszy, tekst oryginalnyi tekst, jaki powinien w pliku znaleźć się ostatecznie.Tekst trzech stron poszczególnych ośrodków jestzawinięty, aby poprawić czytelność kodu.

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

Wiersz Tekst pierwotny Ostateczna postać

14 ��$�2��5�� 8�� 2 �5��4��5�� $�2��5�� 8��

15 – 16 ��#��(��8��>��6�� 5�!��

��2 ��3��4��5�� #��(��8��>��6�� 5�!��

17 – 18 ��#��%��8��>��?��8��@6��7��

��2 ��3��4��5�� #��%��8��>��?��8��@�6��7��

19 – 20 ��#��A6��>��5�A�!��8��6��

��2 ��3��6��4��5�� #��A6��>��5�A�!��8��6��

21 ��.� ��7 ��2�5�� .� ��7 ��2 �=��4��5�� 2�5��

22 ��.��8�� .��2 ��4��5�� 8��

23 ��.��B�� .��B��2 ��4��5��

24 �� 8��7��!��8�� 2 ��4��5�� 8��7��!��8��




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 zgodniez tabelą 8.2.

Każdy wiersz wymaga znaczników początkowegoi końcowego �� oraz atrybutów.

Zapisujemy stronę sitemap.html.

Dodaliśmy do naszej mapy witryny hiperłącza dostron i do zakładek na stronach. Notatnik zostawiamyotwarty, gdyż będzie nam potrzebny w następnymprzewodniku.

Uruchamiamy przeglądarkę Internet Explorer.

Otwieramy stronę sitemap.html.

Sprawdzamy działanie hiperłączy.

Klikamy kolejne hiperłącza. Pierwsze z nich powodujeotwarcie nowego okna przeglądarki, wszystkiepozostałe otwierają strony już w tym oknie.

WSKAZÓWKATrzeba przetestować wszystkie hiperłącza.Konieczne jest sprawdzenie, czy wszystkie stronyładują się prawidłowo do drugiego oknaprzeglądarki. Sprawdzamy, czy łącza do zakładekpokazują odpowiedni fragment strony. Jeśli któreśłącza nie będą działały prawidłowo, sprawdzamykod 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 ��9�� 2 ��4��5�� 9��

28 ��&�� 2 ��4��5C�� &��

29 ��0�� 2 �2��3��4��5�� 0��

30 ��#�� 2 ��2��3��4��5C=�� #��

31 ��(��7�� 2 ��2��3��4��5C=�� (��7��


195

PrzewodnikDostę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 stosownehiperłącze do tabeli nawigacyjnej.

W Notatniku otwieramy stronę nav_left.html.

W ramce nawigacyjnej dodamy hiperłącze do mapywitryny.

Przechodzimy do wiersza 13., wartość atrybutu�� zmieniamy z D na ��.

Dodajemy do tabeli jeden wiersz, więc musimypowiększyć wysokość pierwszej kolumny.

Przechodzimy do wiersza 41., wciskamy Enter,dodając pusty wiersz.

Umieścimy tutaj kod opisujący dodatkowy wiersztabeli.

W wierszach od 41. do 43. piszemy:

��2 ��5��4��5�� <��7�7��

Jest to nowy wiersz tabeli. Napis Mapa witryny jestpowiązany ze stroną sitemap.html.

Zapisujemy stronę nav_left.html. ZostawiamyNotatnik otwarty, gdyż będzie nam potrzebnyw następnym przewodniku.

Utworzyliśmy zatem hiperłącze z zestawu ramekdo mapy witryny.

Uruchamiamy przeglądarkę Internet Explorer,otwieramy w niej stronę index.html.

Ładuje się zestaw ramek.

Klikamy łącze Mapa witryny znajdujące się na doletabeli nawigacyjnej.

UWAGAŁącza zewnętrzne z naszej witryny należy takzapisywać, aby powodowały otwieranie osobnychokien. Dzięki temu cudza witryna nie pojawi sięwewnątrz naszej. Jeśli nie zdefiniujemy atrybutu��, przeglądarka załaduje wskazywaną stronędo zestawu ramek Sizzle.

Różnica między mapą witrynya witryną łatwo dostępną

Stworzyliśmy i powiązaliśmy z witryną jej mapę.Wprawdzie mapa witryny pozwala użytkownikowiwyjść poza ramki, jest to co innego niż witrynabez ramek. Na mapie użytkownik może oglądaćdowolną stronę, ale musi używać dwóch okienprzeglądarki i w celu wybrania kolejnego hiperłączamusi wracać na stronę sitemap.html. W przypadkuwitryny bez ramek wszystkie elementy nawigacyjneznajdują się bezpośrednio na stronach, dzięki czemuużytkownik może oglądać witrynę w jednym oknieprzeglądarki. Strony sitemap.html używamy jakopodstawy do pewnej pracy w lekcji 14.; celemnaszym będzie wtedy zapewnienie możliwościporuszania się po witrynie bez ramek.



PrzewodnikWykorzystanie obrazków jako hiperłączy

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

Ścieżki dokumentów

Aż do tej chwili dokumenty naszej witrynywskazywaliśmy, korzystając ze względnych ścieżekdokumentów. W tym wypadku docelowy dokumentjest określony przez nazwę pliku i jego typ oraz, jeśliznajduje się w innym folderze, nazwę tego foldera.Aby powiązać dokument spoza witryny, trzeba użyćścieżki bezwzględnej. Ścieżka bezwzględna zawierapełny adres URL wskazywanego dokumentu wrazz protokołem, zwykle ��"��. Adresy witryn liniilotniczych podajemy jako ścieżki bezwzględne.

UWAGAHiperłącza można sprawdzać bezpośrednio naodpowiednich stronach, bez używania zestawu ramek.Wskazywane witryny nie są istotne w naszymprzewodniku, służą jedynie jako przykłady.

W Notatniku otwieramy plik booking.html.

Do strony tej dodamy hiperłącza.


W wierszach 41. i 42. znajdują się znaczniki obrazkalogo linii Global Airlines. Obrazek ten umieszczonyjest w tabeli.

Po znaczniku �� dopisujemy: ��2 ��"��4��E4��5�� .

Dodajemy znacznik otwierający hiperłącza,nakazujemy otwieranie wskazywanej witrynyw osobnym oknie. Musimy podać pełną, czylibezwzględną, ścieżkę do witryny.

Przechodzimy na koniec znacznika z logo liniilotniczych, przed znacznikiem ��, obecniew wierszu 43., dopisujemy ��.

Zakończyliśmy wpisywanie hiperłącza.

Zapisujemy stronę booking.html.

Uruchamiamy przeglądarkę Internet Explorer,otwieramy w niej stronę booking.html.

Klikamy logo Global Airlines. Dookoła obrazka logopojawia się kolorowa obwódka. Wskazana witrynaotwiera się w nowym oknie, ale widzimy komunikato niemożności znalezienia takiej strony — nic nieszkodzi, adres ten nie wskazuje żadnej istniejącejrzeczywiście witryny.

WSKAZÓWKAKiedy przesuwamy kursor myszy nad obrazkiem, jegokształt zmienia się w dłoń, pokazywany jest tekstzastępczy, a w pasku stanu przeglądarki pojawia sięadres docelowy hiperłącza.

Ukrywamy okno przeglądarki.

UWAGAKiedy dodawaliśmy łącza tekstowe, widzieliśmyniebieski, podkreślony tekst, który po kliknięciuzmieniał kolor na fiolet. Są to domyślne ustawieniaprzeglądarki. Innym ustawieniem domyślnymprzeglądarki jest dodawanie obramowania dookołahiperłącza w formie obrazka.


197

W Notatniku na końcu definicji obrazka,w wierszu 43., dopisujemy �� .

Zwróćmy uwagę, aby ten atrybut pojawił się przedznacznikiem końcowym obrazka.

Zapisujemy plik booking.html.

Do znacznika ��5�� dodaliśmy kolejny atrybut.

Ponownie uruchamiamy przeglądarkę, klikamyOdśwież, aby przeładować stronę.

Ładowana jest nowa wersja strony.

Klikamy obrazek logo, aby ponownie goprzetestować.

Witryna linii lotniczych otwiera się w innym oknieprzeglądarki, ale tym razem obrazek nie ma jużobramowania.

Zamykamy przeglądarkę.

Zamykamy oba okna przeglądarki. Dodaliśmyi przetestowaliśmy łącze do obrazka,zmodyfikowaliśmy też standardowy znacznik ��5��,aby usunąć pojawiające się domyślnie obramowanie.Zostawiamy Notatnik otwarty do następnegoprzewodnika.

Szybsze ładowanie witryny

Zamiast ładować nasz zestaw ramek poleceniemPlik/Otwórz, możemy ustawić tę stronę jako jednąz ulubionych. Uruchamiamy przeglądarkę InternetExplorer, ładujemy interesującą nas stronę index.htmli z menu wybieramy Ulubione/Dodaj do Ulubionych….Pojawia się okno dialogowe jak pokazane poniżej,zawierające tytuł naszej strony z ramkami.

Kiedy klikniemy OK, strona zostanie dodanado Ulubionych i teraz możemy wybierać ją z listyulubionych.

Adresy komputerów

Zestaw protokołów, czyli pewnych reguł, nazywanyTCP/IP (Transmission Control Protocol/InternetProtocol, Protokół sterowania transmisją/Protokółinternetowy) określa, jakie komunikaty są przesyłanemiędzy komputerami. TCP odnosi się do procesuprzenoszenia danych między komputerami, IP zaśdotyczy informacji przesyłanych w niewielkichporcjach nazywanych pakietami.

Każdy komputer ma niepowtarzalny adres IP.Spójrzmy na lewy dolny róg okna przeglądarki, kiedywejdziemy do Sieci. Często pojawiają się tam ciągicyfr, takie jak pokazany na rysunku. Są one wyświetlaneprzed załadowaniem strony. Jest to adres IP strony.

Każda witryna ma adres w takiej właśnie postaci,choć zwykle łatwiej jest zapamiętać odpowiedniktego adresu, taki jak google.com.



PrzewodnikLogo linii lotniczych jako hiperłącza

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

Zamykamy przeglądarkę.

Do obrazków logo ze strony booking.html dodaliśmyhiperłącza, przetestowaliśmy je na osobnej stronieoraz w ramkach.

WSKAZÓWKAUpewnijmy się, czy atrybut �� znajduje się przedzamknięciem obrazka, .

UWAGAW pliku booking.html znaczniki opisujące poszczególneobrazki zapisywane są w dwóch kolejnych wierszach.

Przechodzimy do wiersza 44. strony booking.html.

Znajdujemy komórkę zawierającą obrazek logo TD Air.

Po znaczniku początkowym �� dopisujemy:��2 ��"��4��E4��5�� .

Dodaliśmy znacznik początkowy hiperłącza,nakazaliśmy otwierać go w nowym oknie.

Przechodzimy na koniec znacznika ��5��. Po atrybucie�� dopisujemy �� , aby obramowanie obrazkabyło niewidoczne.

Przechodzimy na koniec znacznika obrazka i przedkońcowym znacznikiem ��, obecnie w wierszu 46.,dopisujemy ��, zamykając tym samym hiperłącze.

Zapisujemy plik booking.html.

Dodaliśmy kolejne hiperłącze w formie obrazka.


Wiersz ten zawiera znaczniki początkowe obrazkalogo BlueStar Air.

Powtarzamy kroki od 2. do 4., tym razem adresURL to ��"��4�6��E4��5.

Dodajemy łącze i ramkę docelową, usuwamyobramowanie obrazka.


Ten wiersz zawiera znaczniki początkowe obrazkaSeawinds Air.

Powtarzamy kroki od 2. do 4., tym razemz adresem URL ��"��4��E4��5.

Dodajemy łącze i ramkę docelową, usuwamyobramowanie obrazka.

Sprawdzamy w przeglądarce działanie nowychhiperłączy, ukrywamy okno przeglądarki.

Zapisujemy plik, zamykamy Notatnik.

Na stronie booking.html do obrazków logo liniilotniczych dodaliśmy hiperłącza.

Uruchamiamy przeglądarkę, otwieramy w niejstronę index.html.

Klikamy w ramce nawigacyjnej LINIE LOTNICZE.

W głównej ramce ładuje się strona booking.htmli ustawia się od razu na zakładce linii lotniczych.

Sprawdzamy działanie pozostałych hiperłączy.

Każda witryna Sieci powinna załadować się do tegosamego okna przeglądarki.


199

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ścikorzystania z menu nawigacyjnego. Obrazek na początku tej sesji pokazuje dolną część głównej stronywitryny. 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 towarzystwlotniczych, po kliknięciu powodują otwieranie witryn tych towarzystw. Są tak ustawione, aby otwierałysię w nowym oknie przeglądarki, poza naszą witryną.

Odpowiedzi na podane niżej pytania pomogą utrwalić sobie wiedzę z tej lekcji. Wszystkie znaleźć możnaw 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 łączymię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 stroniedocelowej, jeśli interesujące nas informacje znajdują się na górze strony? (Przewodnik.Przygotowanie mapy witryny)

Kiedy trzeba dodawać atrybut �� w przypadku korzystania ze znaczników ��? (Przewodnik.Wiązanie hiperłączy z mapy witryny)

Jak w atrybucie ��2 wskazuje się zakładkę? (Przewodnik. Wiązanie hiperłączy z mapy witryny)

Czy podczas dodawania do tabeli nowych wierszy trzeba zmieniać wartości atrybutu ��?(Przewodnik. Dostęp do mapy witryny z ramek)

Czy Internet Explorer używa do hiperłączy stylów domyślnych? (Przewodnik. Wykorzystanieobrazków jako hiperłączy)

Jak można usunąć obramowanie wstawiane domyślnie przez przeglądarkę wokół łącza w formieobrazka? (Przewodnik. Wykorzystanie obrazków jako hiperłączy)

Co to jest ścieżka bezwzględna? Jak się jej używa? (Przewodnik. Wykorzystanie obrazków jakohiperłączy)

Co jest wyświetlane przez przeglądarkę, kiedy przesuwamy wskaźnik myszy nad obrazkiem będącymlinkiem? (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.

HTML. Kurs webmastera

Technology

Transcript of HTML. Kurs webmastera