IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

Tworzenie szkolnych
stron WWW
Autor: Maria Sok
ISBN: 83-246-0122-8
Format: B5, stron: 120

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

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

Strony i serwisy WWW to dzi jedno z podstawowych rde informacji. W Internecie

moemy znale najnowsze wiadomoci, przewodniki po krajach i miastach, materiay
do nauki i wiele innych ciekawych rzeczy. Szkolny serwis WWW to doskonaa
wizytwka nowoczesnej placwki owiatowej. Na jego amach mona przedstawi
wychowankw szkoy, sukcesy i osignicia, informacje o rekrutacji i gronie
pedagogicznym.
Tworzenie stron WWW odbywa si z wykorzystaniem jzyka HTML. Jest to zestaw
znacznikw sucych do formatowania tekstu, umieszczania na stronie elementw
graficznych i tworzenia czy do innych stron. Znajomo jzyka HTML jest niezbdna
do samodzielnego stworzenia strony WWW. Na szczcie jednak HTML nie jest tak
straszny, jak moe to wyglda przy pierwszym kontakcie.
Tworzenie szkolnych stron WWW to przystpny i prosty kurs jzyka HTML
przeznaczony dla tych, ktrzy chc wykona pierwsze kroki w projektowaniu witryn
internetowych. Zawiera podstawowe informacje dotyczce jzyka HTML, omwienie
jego znacznikw i sposobw korzystania z nich. Przedstawia metody tworzenia
szablonw stron, formatowania i rozmieszczania tekstu na stronach WWW, wstawiania
obrazw i elementw nawigacyjnych. Opisuje te jeden z najistotniejszych elementw
jzyka HTML kaskadowe arkusze stylw. Jest to nowoczesne i niezwykle przydatne
narzdzie, bez ktrego tworzenie wydajnych i uniwersalnych stron WWW jest dzi
praktycznie niemoliwe.
Podstawowe informacje o jzyku HTML i sieci WWW
Projektowanie struktury serwisu
Tworzenie szablonu strony
Wstawianie tekstu i grafiki
Elementy nawigacyjne
Stosowanie tabel
Technologia CSS kaskadowe arkusze stylw
Rozpocznij przygod z projektowaniem witryn WWW

Spis treci
Wstp ................................................................................................................................................................5
Rozdzia 1.

Informacje podstawowe .........................................................................................................................7

Co to jest HTML? ..................................................................................................................... 7
Surfowanie i przegldarka ......................................................................................................... 7
Strona WWW, serwis WWW, serwer WWW ........................................................................... 8
Strona WWW ............................................................................................................................ 8
Znaczniki ................................................................................................................................. 10
Elementy strony ...................................................................................................................... 10

Rozdzia 2. Projektowanie serwisu WWW ..........................................................................................................13

Projektowanie serwisu ............................................................................................................. 13
Projektowanie serwisu uwagi praktyczne ........................................................................... 14
wiczenie do samodzielnego wykonania ................................................................................ 15

Rozdzia 3. Tworzenie strony WWW ........................................................................................................................17

Tworzenie podstawowego szkieletu strony WWW ................................................................. 17
Definiowanie tytuu ................................................................................................................. 19
Nagwek ................................................................................................................................ 20
Dodawanie tekstu .................................................................................................................... 22
Linia pozioma .......................................................................................................................... 23
Dodawanie listy ....................................................................................................................... 26
Lista zagniedona .................................................................................................................. 28
Obrazy na stronie WWW ........................................................................................................ 29
Tekst alternatywny .................................................................................................................. 33
Podpis ...................................................................................................................................... 33
wiczenia do samodzielnego wykonania ................................................................................ 35

Rozdzia 4. Odnoniki .....................................................................................................................................................37

Tworzenie odnonika do strony skadowej serwisu ................................................................. 39
Tworzenie odnonikw prowadzcych do punktw nawigacyjnych w obrbie strony ........... 41
Powrt do strony gwnej i komunikacja midzy stronami ikony nawigacji .................... 42
Mapy odsyaczy ...................................................................................................................... 45
wiczenia do samodzielnego wykonania ................................................................................ 50

Tworzenie szkolnych stron WWW

Rozdzia 5. Tabele ............................................................................................................................................................53

Elementy konstrukcyjne tabeli ................................................................................................ 53
Procedura tworzenia tabeli ...................................................................................................... 54
Tabela troch bardziej zoona ................................................................................................ 56
Komrki rozpite na kilku wierszach lub kolumnach ............................................................. 58
wiczenia do samodzielnego wykonania ................................................................................ 61

Rozdzia 6. Kaskadowe arkusze stylw ...............................................................................................................63

Kaskadowe arkusze stylw ...................................................................................................... 63
Klasy ....................................................................................................................................... 64
Definicja CSS .......................................................................................................................... 66
Czcionka .................................................................................................................................. 66
To ........................................................................................................................................... 68
Arkusze stylw zasady oglne ........................................................................................... 68
CSS a rozszerzenia HTML ...................................................................................................... 69
Troch wicej wolnej przestrzeni ............................................................................................ 81
Formatowanie kilku znakw ................................................................................................... 84
Przyczanie arkuszy stylu do dokumentu HTML ................................................................... 85
wiczenia do samodzielnego wykonania ................................................................................ 86

Rozdzia 7.

Testowanie stron WWW ......................................................................................................................89

wiczenia do samodzielnego wykonania ................................................................................ 91

Dodatek A

Elementy jzyka HTML ...........................................................................................................................93

Skorowidz ....................................................................................................................................................111

2.
Projektowanie
serwisu WWW
Rozdzia

Projektowanie serwisu
Naszym zadaniem jest przygotowanie szkolnego serwisu internetowego. Jedn z najistotniejszych spraw jest zadbanie o jego poprawn organizacj.
wiczenie 2.1.

Rozpocznij od przygotowania scenopisu. Okrel w nim cel tworzonego serwisu i sformuuj

gwne tematy, ktre chciaby poruszy. Zapisz je na kartce papieru lub w edytorze tekstu. Cel bdzie okrela tematyk strony, a tematy przeksztacimy pniej w hipercza
prowadzce do odpowiednich fragmentw strony (lub do kolejnych stron).
1. Zdefiniuj cel. W tym przykadzie zaplanujemy zwyk stron reklamujc szko

podstawow.
2. Okrel podstawowe tematy. Na przykad:

informacje teleadresowe,
informacje przydatne kandydatom,
zasobnik plikw do pobrania przez uczniw,
informator o zebraniach i wydarzeniach.
3. Podejmij decyzj co do struktury serwisu. W tym przykadzie zastosujemy struktur

rwnoleg, najczciej stosowan w obecnie tworzonych serwisach WWW.

Rwnie dobrze moesz si jednak ograniczy do budowy hierarchicznej lub
hierarchiczno-liniowej. Co znacz te terminy? patrz tekst Uwagi.

14

Tworzenie szkolnych stron WWW

Najatwiejsza i najbardziej logiczna jest struktura hierarchiczna. Przegldanie rozpoczyna

si w tym przypadku od strony gwnej, na ktrej umieszczone s menu lub lista tematw.
Wybranie tematu prowadzi do podtematw lub konkretnej treci.
Struktura liniowo-hierarchiczna to kombinacja struktury liniowej (tu strony s poczone
kolejno ze sob tak jak wagony pocigu) i hierarchicznej.
Moliwe s take inne struktury: na przykad liniowa z alternatyw (innymi sowy
z odgazieniami) lub sieciowa, ktra jest form bardzo lun.
Najczciej stosowan obecnie struktur jest struktura rwnolega, w ktrej wszystkie
strony serwisu zawieraj nagwek i wszelkie panele suce do nawigacji w ramach serwisu
rnic si tylko waciw treci. Tego typu struktura jest efektem spowszednienia
wyszukiwarek internetowych, ktre mog skierowa czytelnika bezporednio na jedn
ze stron skadowych serwisu, a nie na stron gwn. Rwnoprawno wszystkich stron
serwisu uatwia w takim przypadku przejcie do innego tematu lub odszukanie strony gwnej.
Wybr struktury zaley przede wszystkim od tematyki strony, ktra sama z siebie moe
narzuca pewien logiczny kierunek nawigacji.
4. Przydziel okrelone tematy konkretnym stronom (patrz rysunek 2.1).
Rysunek 2.1.
Oto struktura
przygotowywanego
serwisu WWW;
nosi ona nazw
rwnolegej

Projektowanie serwisu uwagi praktyczne

Przygotowanie porzdnego projektu jest rwnie wane w przypadku stron WWW, jak
i wszelkich innych konstrukcji. Fakt, e informacje s prezentowane na ekranie, a nie na
papierze, nie zwalnia z obowizku uczynienia wszystkiego, aby przekaz by przyjemny
dla oka i atwy w odbiorze. Projektowanie stron WWW okazuje si tym trudniejszym zadaniem, e konieczne jest take zapewnienie ich elastycznoci powinny rwnie prawidowo dziaa na rnych platformach, przy rnych rozmiarach okna przegldarki oraz
przy rnej wielkoci czcionkach. Oto kilka rad, ktre pomog Ci w poprawieniu czytelnoci stron:
Stosuj zasad jeden temat jedna strona. Jeli jest to niemoliwe, umieszczaj na
jednej stronie tematy, ktre wi si ze sob. Nie przesad jednak z przeadowaniem
strony. Pamitaj, e kilka niezbyt przeadowanych stron bdzie si otwiera szybciej
ni jedna ogromna strona.
Rozwa pieczoowicie kwesti hiperczy midzy stronami. Musisz przemyle
dokadnie wszystkie aspekty przemieszczania si midzy stronami (lub w ich
obrbie), aby czytelnik nie zagubi si w niefortunnie zaprojektowanym labiryncie.

Rozdzia 2. Projektowanie serwisu WWW

15

Zastanw si, jakie informacje umieci na stronie gwnej opis tego, co znajduje
si dalej, czy te hipercza.
Wiersze tekstu nie powinny by zbyt dugie; s one trudne w odbiorze, szczeglnie
gdy odstp midzy nimi jest bardzo may moe to spowodowa, e czytelnik
bdzie bezwiednie przeskakiwa wzrokiem co drugi wiersz.
Zachowaj umiar w korzystaniu z pogrubienia i kursywy. Szczeglnie tej ostatniej
naley raczej unika. Czcionka o maym rozmiarze, pisana kursyw, jest cakowicie
nieczytelna.
Unikaj take korzystania z czcionki podkrelonej, poniewa tekst podkrelony
wyglda jak hipercze.
Nie wyrniaj zwykego tekstu za pomoc znacznika nagwka.
Zachowuj podobny ukad stron (na przykad umieszczaj cza do pozostaych stron
w tym samym miejscu).
Definiujc cze, unikaj okrelenia tutaj.
Nie twrz niepotrzebnego toku nadmiarem obrazw i kolorw.
Wielu projektantw umieszcza w nagwku obrazy mona je samodzielnie
przygotowa, z wykorzystaniem, na przykad, programu PhotoShop, i zapisa
w formacie GIF. Nadaj one stronom indywidualny charakter. Pamitaj jednak,
e strona bdzie si wwczas adowaa duej i aby nie zniechca uytkownika,
powiniene umieci w kodzie tekst alternatywny, korzystajc z atrybutu ALT
znacznika <img>. Oto przykadowa definicja: <img src="kot.gif" alt="[obraz
kota]">.
Pamitaj, e uytkownicy nie tylko mog korzysta z rnych rozdzielczoci,
lecz take maj do dyspozycji opcj pozwalajc na zwikszanie lub zmniejszanie
rozmiaru czcionki. Tak wic wzgldne relacje midzy tekstem a obrazem mog by
u uytkownikw najrniejsze. Projektujc stron, powiniene wzi te kwestie
pod uwag i przetestowa j z ich uwzgldnieniem. Kreatywne operowanie woln
przestrzeni ekranu jest zawsze najbezpieczniejsze i daje bardzo ciekawe efekty.
Nie dowierzaj wygldowi strony WWW w swojej przegldarce testuj strony
w rnych przegldarkach.
Sprawd ortografi! Nawet ortograficzne ory robi bdy.
Pamitaj o podpisaniu swojej strony WWW. Odnonik, dziki ktremu mona
bezporednio wysa wiadomo pocztow do autora kodu HTML, umoliwia
uytkownikom serwisu szybkie i atwe zgaszanie zauwaonych bdw.

wiczenie do samodzielnego wykonania

Okrel zakres tematyki serwisu WWW dotyczcego Twojej szkoy. Zaprojektuj nastpnie kilka dokumentw HTML, o rnych strukturach, starajc si jak najlepiej wyrazi
istot serwisu. Umie rysunki przed sob na stole i zastanw si dobrze nad wyborem.
Odpowiedz sobie na takie pytania:

16

Tworzenie szkolnych stron WWW

Czy struktura jest naturalna dla wybranego zestawu zagadnie?

Czy podzia tematw podrzdnych na odrbne strony jest oczywisty?
Czy strony nie wydaj si zbyt dugie?
Czy czytelnik nie zgubi si midzy stronami?
Czy zawarto stron nie bdzie zbyt obfita (jeli umiecisz 100 obrazw na stronie,
bdzie si ona adowa przez miesic lub tylko troch krcej :-) )?
Wymyl jeszcze par takich pyta wyraajcych wtpliwoci. Im wicej wtpliwoci na
etapie projektowania, tym wiksza szansa na sukces.