Tworzenie stron WWW. Kurs. Wydanie III

Tworzenie stron WWW. Kurs. Wydanie III

Autorzy: Radosław Sokół

Wydawnictwo: Helion

Kategorie: Informatyka

Typ: e-book

Formaty: PDF

Ilość stron: 240

cena od: 39.00 zł



Śmiało wkrocz w świat technologii internetowych







  • Poznaj podstawy tworzenia stron WWW


  • Naucz się praktycznego stosowania języka HTML


  • Dowiedz się, jak udostępnić swoją stronę w sieci






Internet wdarł się przebojem w nasze codzienne życie. Trudno dziś znaleźć poważną firmę, która nie dysponowałaby choć prostą stroną WWW. Rzadko też można spotkać osobę, która nie korzystałaby z poczty elektronicznej lub któregoś z popularnych serwisów społecznościowych. Większość użytkowników ogranicza się jednak do konsumpcji treści internetowych, a tylko nieliczni dzielą się nimi z innymi ludźmi. Przeszkodą okazuje się tu zwykle brak znajomości odpowiednich technologii, a przede wszystkim najbardziej podstawowego budulca stron WWW, którym jest język HTML.





Jeśli chcesz dołączyć do osób aktywnie korzystających z sieci i stać się jednym z twórców atrakcyjnych treści internetowych, powinieneś zacząć od sięgnięcia po odpowiednią lekturę. Doskonałym wyborem będzie książka "Tworzenie stron WWW. Kurs. Wydanie III" . To podręcznik, z którego dowiesz się, jak stawiać pierwsze kroki w języku HTML, czego potrzebujesz, aby tworzyć własne strony WWW, a także jak opublikować stronę w internecie. Krok po kroku poznasz strukturę dokumentów HTML, sposoby tworzenia treści tekstowych, odnośników, tabel i ramek, metody zamieszczania grafiki i kodu JavaScript. Odkryjesz również tajniki posługiwania się arkuszami stylów oraz podstawy technologii AJAX.







  • Struktura stron WWW i podstawy ich tworzenia


  • Przegląd niezbędnych narzędzi pracy


  • Kodowanie tekstu w języku HTML


  • Definiowanie odnośników i osadzanie grafiki


  • Zastosowanie tabel i ramek


  • Korzystanie z języka JavaScript i technologii AJAX


  • Używanie kaskadowych arkuszy stylów


  • Publikowanie stron w internecie






Spraw, aby tworzenie stron WWW nie miało przed Tobą tajemnic!



Tworzenie stron WWW.

Idź do

Kurs. Wydanie III

• Spis treści

• Przykładowy rozdział

Autor: Radosław Sokół

ISBN: 978-83-246-2618-2

Katalog książek

Format: 168×237, stron: 300

• Katalog online

• Zamów drukowany

katalog

Śmiało wkrocz w świat technologii internetowych

Twój koszyk

• Poznaj podstawy tworzenia stron WWW

• Naucz się praktycznego stosowania języka HTML

• Dowiedz się, jak udostępnić swoją stronę w sieci

• Dodaj do koszyka

Internet wdarł się przebojem w nasze codzienne życie. Trudno dziś znaleźć poważną firmę, która nie dysponowałaby choć prostą stroną WWW. Rzadko też można spotkać osobę, która nie Cennik i informacje

korzystałaby z poczty elektronicznej lub któregoś z popularnych serwisów społecznościowych.

Większość użytkowników ogranicza się jednak do konsumpcji treści internetowych, a tylko nieliczni dzielą się nimi z innymi ludźmi. Przeszkodą okazuje się tu zwykle brak znajomości odpowiednich

• Zamów informacje

technologii, a przede wszystkim najbardziej podstawowego budulca stron WWW, którym jest

o nowościach

język HTML.

• Zamów cennik

Jeśli chcesz dołączyć do osób aktywnie korzystających z sieci i stać się jednym z twórców atrakcyjnych treści internetowych, powinieneś zacząć od sięgnięcia po odpowiednią lekturę. Doskonałym Czytelnia

wyborem będzie książka „Tworzenie stron WWW. Kurs. Wydanie III” . To podręcznik, z którego dowiesz się, jak stawiać pierwsze kroki w języku HTML, czego potrzebujesz, aby tworzyć własne strony WWW, a także jak opublikować stronę w internecie. Krok po kroku poznasz strukturę

• Fragmenty książek

dokumentów HTML, sposoby tworzenia treści tekstowych, odnośników, tabel i ramek, metody

online

zamieszczania grafiki i kodu JavaScript. Odkryjesz również tajniki posługiwania się arkuszami stylów oraz podstawy technologii AJAX.

• Struktura stron WWW i podstawy ich tworzenia

• Przegląd niezbędnych narzędzi pracy

• Kodowanie tekstu w języku HTML

• Definiowanie odnośników i osadzanie grafiki

• Zastosowanie tabel i ramek

• Korzystanie z języka JavaScript i technologii AJAX

• Używanie kaskadowych arkuszy stylów

• Publikowanie stron w internecie

Spraw, aby tworzenie stron WWW nie miało przed Tobą tajemnic!

Kontakt

Helion SA

ul. Kościuszki 1c

44-100 Gliwice

tel. 32 230 98 63

e-mail: helion@helion.pl

© Helion 1991–2011

Spis treści

Wstęp ..............................................................................................7

Czym są HTML i XHTML? ...................................................................................8

Jak wygląda znacznik HTML .............................................................................. 10

Wymagane oprogramowanie i sprzęt ............................................................... 11

Przykłady ............................................................................................................... 11

Rozdział 1. Nowa strona WWW .......................................................................13

Uruchomienie programu Notatnik .................................................................... 14

Wprowadzanie podstawowego kodu strony ..................................................... 15

Ustalanie tytułu strony WWW ........................................................................... 17

Zapisywanie kodu strony na dysku twardym ................................................... 18

Otwieranie zapisanej wcześniej strony WWW ................................................ 20

Wyświetlanie strony w przeglądarce .................................................................. 21

Aktualizowanie strony w przeglądarce .............................................................. 22

Kopiowanie fragmentu kodu HTML ................................................................. 22

Wklejanie uprzednio skopiowanego fragmentu kodu HTML ....................... 23

Wycinanie fragmentu kodu HTML ................................................................... 24

Podsumowanie ...................................................................................................... 24

Rozdział 2. Treść strony WWW i jej struktura logiczna ....................................25

Wprowadzanie tekstu ........................................................................................... 26

Deklarowanie sposobu kodowania polskich znaków diakrytycznych .......... 27

Zapisanie fragmentu tekstu czcionką pogrubioną ........................................... 28

Zapisanie fragmentu tekstu kursywą ................................................................. 30

Podkreślenie fragmentu tekstu ........................................................................... 31

Twarde spacje ........................................................................................................ 32

Indeksy górne i dolne........................................................................................... 34

Zapisywanie fragmentu tekstu czcionką nieproporcjonalną .......................... 35

Zapisywanie większego fragmentu tekstu czcionką nieproporcjonalną ....... 36

Nadawanie znaczenia fragmentom treści strony ............................................. 38

Łamanie tekstu wewnątrz akapitu ...................................................................... 39

Zmiana rozmiaru czcionki .................................................................................. 40

Nagłówki rozdziałów i sekcji tekstu ................................................................... 41

Wstawianie poziomej linii................................................................................... 43

Lista wypunktowana ............................................................................................ 44

Zagnieżdżanie listy ............................................................................................... 45

Lista numerowana ................................................................................................ 46

Wstawianie znaków specjalnych ........................................................................ 47

Podział dokumentu na sekcje ............................................................................. 49

Podsumowanie ...................................................................................................... 51

Rozdział 3. Odnośniki .....................................................................................53

Tworzenie odnośnika ........................................................................................... 54

Tworzenie odnośnika pocztowego ..................................................................... 56

Definiowanie domyślnego tematu wiadomości pocztowej ............................. 57

Definiowanie etykiety .......................................................................................... 58

Tworzenie odnośnika prowadzącego do etykiety ............................................ 59

Tworzenie odnośnika prowadzącego do etykiety

zadeklarowanej na innej stronie WWW ........................................................... 60

Tworzenie obszaru nawigacyjnego .................................................................... 62

Podsumowanie ...................................................................................................... 63

Rozdział 4. Obrazy ..........................................................................................65

Format GIF ............................................................................................................ 66

Format JPEG ......................................................................................................... 67

Pobieranie i instalowanie programu IrfanView ............................................... 68

Umieszczanie obrazu na stronie WWW ........................................................... 80

Przekształcanie obrazu w odnośnik ................................................................... 84

Zamieszczanie miniatur zdjęć ............................................................................ 85

Obrazy w HTML5 ................................................................................................ 92

Mapy odnośników ................................................................................................ 93

Usuwanie obrazu .................................................................................................. 97

Podsumowanie ...................................................................................................... 98

Rozdział 5. Tabele .........................................................................................101

Jak w języku HTML opisuje się tabelę? ........................................................... 102

Tworzenie tabeli ................................................................................................. 102

Zmiana treści komórki tabeli ............................................................................ 106

Wstawianie nowego wiersza tabeli ................................................................... 107

Wstawianie nowej kolumny tabeli ................................................................... 108

Scalanie komórek tabeli ..................................................................................... 110

Dzielenie scalonej komórki tabeli .................................................................... 114

Określanie struktury logicznej tabeli ............................................................... 116

Podsumowanie .................................................................................................... 118

Rozdział 6. Kaskadowe arkusze stylu ...........................................................119

Atrybuty stylu ..................................................................................................... 120

Styl wpisany ......................................................................................................... 121

Styl osadzony ...................................................................................................... 122

Styl dołączony ..................................................................................................... 122

Dlaczego „kaskadowe”? ..................................................................................... 122

Jednostki CSS ...................................................................................................... 123

Kolory w CSS ...................................................................................................... 124

Wstawianie definicji stylu wpisanego .............................................................. 125

Atrybuty tekstu ................................................................................................... 126

Model pudełkowy CSS ....................................................................................... 129

Kolor treści i tło elementu ................................................................................. 129

Obramowanie elementu .................................................................................... 131

Marginesy ............................................................................................................ 134

Wyrównywanie tekstu w akapicie .................................................................... 136

Elementy wpisane i blokowe ............................................................................. 137

Pozycjonowanie elementów strony .................................................................. 141

Definiowanie wyglądu elementu języka HTML ............................................. 150

Definiowanie klas wyglądu elementu języka HTML ..................................... 153

Definiowanie niezależnych klas stylu .............................................................. 155

Zmiana wyglądu odnośników .......................................................................... 157

Indywidualne definiowanie stylu elementu .................................................... 159

Uzależnianie stylu elementu od miejsca jego występowania ........................ 160

Tworzenie zewnętrznego arkusza stylu ........................................................... 162

Podsumowanie .................................................................................................... 165

Rozdział 7. JavaScript ...................................................................................167

Quiz internetowy ................................................................................................ 168

Dynamiczne menu ............................................................................................. 176

Podsumowanie .................................................................................................... 181

Rozdział 8. Serwis internetowy ......................................................................183

Strona główna serwisu ....................................................................................... 184

Dynamiczne tworzenie stron WWW .............................................................. 184

Informacje o stronie WWW ............................................................................. 203

Weryfikowanie poprawności kodu .................................................................. 205

Podsumowanie .................................................................................................... 209

Zakończenie ...............................................................................210

Dodatek A Elementy języków HTML i XHTML ..............................................211

• Tworzenie odnośnika • Tworzenie odnośnika

pocztowego • Definiowanie domyślnego tematu

wiadomości pocztowej • Definiowanie etykiety •

Tworzenie odnośnika prowadzącego do etykiety

• Tworzenie odnośnika prowadzącego do etykiety

zadeklarowanej na innej stronie WWW • Tworzenie

obszaru nawigacyjnego • Podsumowanie

3

Odnośniki

Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Dzisiaj możliwość deklarowania w prawie każdym ty-pie dokumentu odnośników do dowolnych innych materiałów — niezależnie od ich umiejscowienia w globalnej sieci — zrewolucjonizowała świat informacji. Czy klika-jąc odnośnik przenoszący Cię z jednego artykułu do drugiego, możesz sobie wyobra-zić, że kiedyś korzystano z globalnej sieci komputerowej bez ich pomocy?

Odnośniki, nazywane czasem połączeniami (lub „linkami” — od angielskiego słowa link), są niesamowicie użytecznym i wygodnym narzędziem. Co ciekawe, tworzy się je wyjątkowo łatwo.

Adresy internetowe dzielą się na:

• bezwzględne (np. http://www.helion.pl/) — podany adres od początku do końca (bezwzględnie) definiuje położenie strony WWW i może być stosowany w takiej samej postaci, niezależnie od strony WWW, na której go użyjemy,

• względne (np. ../teksty/opis.html lub też nowy.html) — podany adres definiuje położenie strony WWW wyłącznie względem aktualnej strony; użycie go na innej stronie WWW (umieszczonej w innym katalogu tego samego serwera lub na innym serwerze) uniemożliwi odszukanie wskazywanego przez odnośnik dokumentu.

54

Tworzenie odnośnika

Adresów bezwzględnych należy używać wyłącznie w przypadku odwoływania się do innego serwisu WWW, niepowiązanego z tworzoną stroną. W ramach jednego serwisu zawsze należy używać adresów względnych. Dzięki temu adresy są krót-sze, łatwiej jest dokonywać reorganizacji serwisu (np. przenoszenia poszczególnych jego części do folderów podrzędnych), a przede wszystkim unika się zależności strony WWW od konkretnego serwera, zaś w razie zmiany firmy obsługującej serwer (lub tylko nazwy serwera) — konieczności dokonywania zmian w kodzie.

i Adresy internetowe często nazywane są też adresami URL lub URI — od angielskich nazw Uniform Resource Locator oraz Uniform Resource Identifier (jednolity lokalizator zasobu).

Tworzenie odnośnika

Odnośnik reprezentuje obiekt o nazwie <a>. Będzie się on pojawiał we wszystkich przykładach w tym rozdziale.

1. Umieść kursor w tym miejscu kodu, w którym ma się pojawić odnośnik.

Najczęściej odnośniki umieszcza się wewnątrz akapitu tekstu, czyli wewnątrz elementu <p>. Mogą pojawiać się jednak i w innych elementach tekstowych

— byle nie bezpośrednio na poziomie dokumentu.

2. Wprowadź kod elementu <a>.

3. Rozbuduj element <a> o atrybut href zawierający zapisany w cudzysłowie docelowy adres URL odnośnika:

<a href=” adres-docelowy”>

Wprowadzając bezwzględny adres strony WWW, nie zapominaj o jego poprawnym zapisa-

i niu. Adres bezwzględny musi zaczynać się od nazwy protokołu internetowego (w przypadku stron WWW: http://). Jeżeli adres zawiera tylko nazwę serwera, musi kończyć się znakiem /.

Pominięcie tych elementów — a w szczególności prefiksu określającego protokół dostępu do danych — uniemożliwi funkcjonowanie odnośników w niektórych przeglądarkach WWW.

4. Wprowadź tekst, który ma być wyświetlany jako odnośnik.

Tworzenie odnośnika

55

i Staraj się unikać defi niowania jako odnośników sformułowań typu „kliknij tutaj” — nie na-leży to do dobrego stylu.

5. Zamknij element,

6

wpisując </a>.

6. Zapisz wprowadzone

5

1

2

zmiany.

3

4

7. Uaktywnij okno przeglądarki.

8. Zaktualizuj wyświetlaną stronę.

8

7

9. Umieść wskaźnik myszy

na utworzonym odnośniku

i kliknij go.

9

10. Jeżeli odnośnik został

poprawnie utworzony,

w oknie przeglądarki po-

jawi się po chwili docelo-

wa strona WWW.

10

56

Tworzenie odnośnika pocztowego

Tworzenie odnośnika pocztowego

Najprawdopodobniej na stronach WWW nieraz widziałeś odnośniki, których kliknięcie natychmiast otwierało okno Twojego programu pocztowego z nową, automatycznie zaadresowaną wiadomością. Wbrew pozorom przygotowanie takiego odnośnika jest równie łatwe jak zbudowanie zwykłego odnośnika prowadzącego do strony internetowej.

Umieszczenie na stronie odnośnika prowadzącego do Twojej skrzynki pocztowej zdecydowanie podniesie jakość tworzonej strony, gdyż umożliwi jej czytelnikom zgłaszanie pod Twoim adresem uwag jej dotyczących. Nie zapominaj zatem o tym szczególe — najlepiej zaś przygotuj sobie szablon pustej strony (na podstawie którego będziesz tworzył kolejne strony podrzędne serwisu) z utworzonym w jej stopce odnośnikiem pocztowym.

Użytkownicy Internetu coraz rzadziej korzystają z programów-klientów poczty elektro-

i nicznej zainstalowanych na komputerze i uruchamianych w momencie kliknięcia odnoś-

nika pocztowego. Dla użytkownika systemu pocztowego dostępnego za pośrednictwem strony WWW odnośnik pocztowy nie ma prawie żadnej wartości: co najwyżej może go skopiować do schowka i wkleić w pole adresu docelowego.

1. Umieść kursor w miejscu kodu, w którym ma się pojawić odnośnik pocztowy.

2. Wprowadź kod elementu <a>.

3. Rozbuduj element <a> o atrybut href zawierający zapisane w cudzysłowie wyrażenie mailto: oraz docelowy adres pocztowy:

<a href=”mailto: adres-pocztowy”>

4. Wprowadź tekst, który ma być wyświetlany jako odnośnik. Może to być np. Twoje imię i nazwisko.

5. Zamknij element,

6

wpisując </a>.

6. Zapisz wprowadzo-

1

3

ne zmiany.

2

4

5

Definiowanie domyślnego tematu wiadomości pocztowej

57

7. Uaktywnij okno przeglądarki.

8. Zaktualizuj wyświetlaną stronę.

8

7

9. Kliknij utworzony odnośnik,

aby przetestować jego działanie

i sprawdzić, czy program pocz-

towy otworzy do edycji prawid-

9

łowo zaadresowaną wiadomość

pocztową.

Pamiętaj, że zamieszczenie adresu pocztowego na stronie WWW dostępnej w Internecie

i jest równoznaczne z ujawnieniem go wszystkim osobom rozsyłającym hurtowo nie-chciane wiadomości elektroniczne (tzw. spam). Jeśli zdecydujesz się dać czytelnikom Twojej strony możliwość kontaktowania się z Tobą, zadbaj o zabezpieczenie swojej skrzynki pocztowej przed napływem spamu.

i To, w jaki sposób zachowa się system operacyjny po kliknięciu odnośnika, zależy od zain-stalowanego programu pocztowego. Jeżeli na danym komputerze nie został skonfi guro-wany (lub wręcz zainstalowany) program pocztowy, użytkownik ujrzy po kliknięciu jedy-nie okno dialogowe z komunikatem błędu.

Definiowanie domyślnego tematu

wiadomości pocztowej

Jeśli chcesz jeszcze bardziej zautomatyzować proces wysyłania wiadomości pocztowej, możesz bezpośrednio w kodzie odnośnika podać domyślny temat tworzonej wiadomości.

1. Umieść kursor wewnątrz wartości atrybutu href znacznika <a>, zaraz za wprowadzonym docelowym adresem pocztowym.

2. Wprowadź tekst ?Subject= oraz domyślną treść tematu wiadomości pocztowej:

<a href=”mailto: adres-pocztowy?Subject= temat wiadomosci pocztowej”> 3. Zapisz wprowadzone

3

zmiany.

3

2

58

Definiowanie etykiety

i Staraj się zapisywać domyślne tematy wiadomości pocztowych wyłącznie z wykorzystaniem znaków alfabetu łacińskiego, bez stosowania polskich znaków diakrytycznych. Pozwoli Ci to uniknąć problemów związanych z różnorodnością standardów kodowania znaków.

Definiowanie etykiety

Nie zawsze informacja, do której należy zapewnić szybki dostęp za pomocą odnoś-

nika, znajduje się na innej stronie WWW. Często przydaje się możliwość zdefi niowania odnośnika przenoszącego czytelnika do innego miejsca tej samej strony WWW.

Pierwszym krokiem przy tworzeniu takiego odnośnika jest zdefi niowanie etykiety (zwanej też czasem zakotwiczeniem — od jej angielskiej nazwy anchor), czyli punktu docelowego dla odnośników.

Najczęstszym zastosowaniem etykiet i prowadzących do nich odnośników są odnoś-

niki umożliwiające czytelnikowi powrót na początek strony. Stosuje się również czasem spisy treści, umożliwiające przejście z początku strony od razu do właściwej sekcji dłuższego dokumentu. Najbardziej logicznym i przydatnym zastosowaniem zakotwiczeń jest przenoszenie czytelnika od razu do właściwego fragmentu długiego artykułu, wyjaśniającego kwestię, do której odnośnik został kliknięty.

1. Umieść kursor we-

wnątrz kodu znacznika

otwierającego element,

1

do którego ma prowa-

dzić etykieta.

2. Dodaj do znacznika

2

atrybut id i jako jego

wartość wprowadź

unikatową nazwę

etykiety:

id=” nazwa-etykiety”

i Nazwa etykiety powinna składać się wyłącznie z liter alfabetu łacińskiego i nie może zawierać znaków spacji. Zastosowanie innych znaków może spowodować, że odnośniki prowadzące do etykiety nie będą funkcjonować.

Tworzenie odnośnika prowadzącego do etykiety

59

Tworzenie odnośnika

prowadzącego do etykiety

1. Umieść kursor w tym miejscu kodu, w którym ma się pojawić odnośnik.

2. Wprowadź kod elementu <a>.

3. Rozbuduj element <a> o atrybut href zawierający znak # oraz zapisaną w cudzysłowie nazwę utworzonej wcześniej docelowej etykiety:

<a href=”# etykieta-docelowa”>

4. Wprowadź tekst, który

6

ma być wyświetlany

jako odnośnik.

1

2

4

5

5. Zamknij element,

wpisując </a>.

6. Zapisz wprowadzone

zmiany.

7. Uaktywnij okno przeglądarki.

8. Zaktualizuj wyświetlaną stronę.

8

7

9. Kliknij utworzony odnośnik,

by przetestować jego działanie.

9

60

Tworzenie odnośnika prowadzącego do etykiety zadeklarowanej na innej stronie WWW

10. Do adresu strony dopisana

została nazwa etykiety…

10

11. …a zawartość okna prze-

glądarki przesunęła się

tak, by widoczny stał się

fragment strony oznaczo-

ny w kodzie etykietą.

11

Pamiętaj, że odnośniki prowadzące do etykiet będą działać tylko wtedy, gdy etykieta, do

i której prowadzi odnośnik, umieszczona jest w miejscu strony niewidocznym w danym momencie w oknie przeglądarki. Nie zdziw się więc, jeśli po utworzeniu bardzo krótkiej strony testowej, zawierającej etykietę i prowadzący do niej odnośnik, skorzystanie z odnośnika nie da żadnego efektu — mechanizm ten został przystosowany do nawigowania po wyjątkowo obszernych stronach WWW.

Tworzenie odnośnika

prowadzącego do etykiety

zadeklarowanej na innej stronie WWW

Etykiety i prowadzące do nich odnośniki najłatwiej wykorzystać do uproszczenia nawigacji w ramach jednej strony WWW. Jednak odnośnik może również prowadzić do etykiety znajdującej się na zupełnie innej stronie! Wykorzystując tę możliwość języka HTML, umożliwisz czytelnikowi Twojego serwisu WWW przechodzenie do określo-nego fragmentu dowolnej strony za pomocą jednego tylko kliknięcia odnośnika.

1. Umieść kursor w tym miejscu kodu, w którym na stronie WWW ma się pojawić odnośnik.

i Pamiętaj — odnośnik musi znajdować się w innym pliku niż etykieta. Krótko mówiąc, mu-sisz przygotować dwie strony WWW (dwa pliki .html): jedną z etykietą (jak w poprzednim ćwiczeniu), a drugą z odnośnikiem (przygotowywana tutaj).

Tworzenie odnośnika prowadzącego do etykiety zadeklarowanej na innej stronie WWW

61

2. Wprowadź kod elementu <a>.

3. Rozbuduj element <a> o atrybut href.

4. Wprowadź wewnątrz wartości atrybutu adres strony WWW, do której ma prowadzić odnośnik.

i Adresem docelowym może być po prostu nazwa drugiego pliku . html — oba pliki muszą się w takim przypadku znajdować w tym samym folderze na dysku. To najprostsza postać odnośnika o adresie względnym.

5. Wpisz znak #, oddzielający adres strony od nazwy etykiety, i wprowadź nazwę etykiety docelowej.

6. Wprowadź tekst, który

8

ma być wyświetlany

jako odnośnik.

1

2

7. Zamknij element,

wpisując </a>.

8. Zapisz wprowadzone

3

4

5

6

7

zmiany.

9. Uaktywnij okno przeglądarki.

10. Zaktualizuj wyświetlaną stronę lub otwórz plik strony WWW zawierającej utworzony przed chwilą odnośnik.

11. Kliknij utworzony

odnośnik, by przete-

10

9

stować jego działanie.

11

62

Tworzenie obszaru nawigacyjnego

12. W polu adresu pojawi

się adres docelowej

12

strony wraz z nazwą

wybranej etykiety…

13. …a zawartość okna

przeglądarki zostanie

przesunięta tak, by

13

widoczny stał się frag-

ment strony oznaczo-

ny w kodzie etykietą.

Tworzenie obszaru nawigacyjnego

Język HTML5 wprowadza nowy element nawigacyjny, służący grupowaniu odnoś-

ników o podobnej funkcjonalności. Jeżeli masz zamiar stworzyć na swojej stronie WWW blok odnośników służących nawigacji między kolejnymi stronami serwisu lub działami portalu albo prowadzących do polecanych przez Ciebie innych stron WWW, warto zawrzeć go w bloku nawigacyjnym.

1. Umieść kursor w miejscu kodu, w którym ma się pojawić na stronie blok nawigacyjny łączący odnośniki o podobnym celu.

2. Otwórz element bloku nawigacyjnego, wpisując znacznik <nav>.

3. Wprowadź kolejne odnośniki należące do tego bloku.

4. Zamknij element

5

bloku nawigacyjne-

go, wpisując znacz-

1

nik </nav>.

2

5. Zapisz wprowadzo-

3

ne zmiany.

4

Podsumowanie

63

6. Uaktywnij okno przeglądarki.

7. Zaktualizuj wyświetlaną stronę.

7

6

8. Blok nawigacyjny prezentuje

stworzone odnośniki. Nie przej-

muj się zbytnio mało estetyczną

formą grafi czną bloku nawiga-

8

cyjnego: w momencie opano-

wania mechanizmu kaskado-

wych arkuszy stylu nadanie mu

dowolnej formy będzie zdecydo-

wanie łatwiejsze niż bez wyko-

rzystania elementu <nav>.

Podsumowanie

Prawidłowo skonstruowany system odnośników może znacznie poprawić jakość Twojego serwisu internetowego. Jeśli dłuższe strony WWW wyposażysz w pro-sty spis treści utworzony z odnośników prowadzących do fragmentów tekstu, a na końcu każdego fragmentu umieścisz dyskretny odnośnik umożliwiający powrót do początku strony oraz do głównej strony serwisu, nawigacja będzie znacznie przy-jemniejsza i efektywniejsza. Nie zapominaj przy tym o korzystaniu z bloków nawi-gacyjnych <nav>, wprowadzonych w języku HTML5, gdyż ich obecność zauważalnie uprości późniejsze formatowanie dokumentu z wykorzystaniem kaskadowych arkuszy stylu.

Postaraj się przećwiczyć najważniejsze zagadnienia dotyczące odnośników:

• Utwórz długą stronę WWW (możesz ją wypełnić bezsensownym zbiorem znaków), podziel ją na fragmenty opatrzone tytułami, a następnie — wykorzy-stując etykiety i odnośniki — opracuj na początku strony menu prowadzące do poszczególnych części tekstu.

• Przygotuj stronę zawierającą odnośniki prowadzące do serwisów internetowych najczęściej przez Ciebie odwiedzanych. Jeśli dobrze ją przygotujesz, możesz nawet pokusić się o wykorzystanie jej jako Twojej strony domowej i rozpoczynanie surfowania po Sieci właśnie od niej.

Document Outline

Spis i R03.pdf r03-04_twwku

KSIĄŻKI TEGO AUTORA

Tablice informatyczne. C Tablice informatyczne. HTML 5. Wydanie II Testowanie aplikacji Java za pomocą JUnit XHTML, CSS i JavaScript. Pierwsza pomoc Tworzenie serwisów WWW. Pierwsza pomoc Microsoft Visual Studio 2012. Programowanie w C i C++