Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodÄ…
kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym,
magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądz

towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte
w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej
odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie
praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również
żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Redaktor prowadzÄ…cy: Ewelina Burska
Projekt okładki: Maciej Pasek
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. [phone]
e-mail: [e-mail]
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie?cwtww3
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
ISBN: 978-83-246-3395-1
Copyright © Helion 2012
Printed in Poland.
" Kup książkę " Księgarnia internetowa
" Poleć książkę " Lubię to! Nasza społeczność
" Oceń książkę
Spis tre ci
Wst p 5
Rozdzia 1. Informacje podstawowe 9
Co to jest internet? 9
Co to jest WWW? 10
Jak komputery komunikuj si w internecie? 11
Surfowanie i przegl darka 12
Jeszcze kilka s ów o adresach URL 13
Co to jest odno nik? 15
Strona WWW, serwis WWW, serwer WWW 16
Co to jest HTML? 17
Elementy strony 20
Rozdzia 2. Projektowanie serwisu WWW 23
Projektowanie serwisu 23
Projektowanie serwisu  uwagi praktyczne 25
Rozdzia 3. Tworzenie strony WWW 27
Tworzenie podstawowego szkieletu strony WWW 27
Definiowanie tytu u 31
Nag ówek 32
Dodajemy tekst 35
Linia pozioma 39
Dodajemy list 42
Lista zagnie d ona 44
Obrazy na stronie WWW 46
Tekst alternatywny 51
Podpis 52
wiczenie do samodzielnego wykonania 55
Poleć książkę
Kup książkę
4 Tworzenie stron WWW" wiczenia praktyczne
Rozdzia 4. Odno niki 57
Tworzenie odno nika do strony sk adowej serwisu 60
Tworzenie odno ników prowadz cych do punktów
nawigacyjnych w obr bie strony 64
Powrót do strony g ównej i komunikacja mi dzy
stronami  ikony nawigacji 68
Obrazy aktywne 70
Udost pnianie plików ze strony WWW 75
Galeria obrazów na stronie WWW 76
Rozdzia 5. Tabele 79
Elementy konstrukcyjne tabeli 79
Procedura tworzenia tabeli 81
Tabela troch bardziej z o ona 84
Komórki rozpi te na kilku wierszach lub kolumnach 87
Tabela w ró nych przegl darkach 91
Rozdzia 6. Kaskadowe arkusze stylów 93
Kaskadowe arkusze stylów 93
Klasy 95
Definicja CSS 96
Czcionka 97
T o 99
Arkusze stylów  zasady ogólne 100
CSS a rozszerzenia HTML 102
Troch wi cej wolnej przestrzeni 110
Formatowanie kilku znaków 117
Tabelaryczny uk ad strony bez tabeli 118
Przy czanie arkuszy stylu do dokumentu HTML 135
Rozdzia 7. Testowanie stron WWW 139
Dodatek A Elementy j zyka HTML 145
Poleć książkę
Kup książkę
2
Projektowanie serwisu WWW
Projektowanie serwisu
Naszym zadaniem jest przygotowanie serwisu internetowego. Jedn
z najistotniejszych spraw jest zadbanie o jego poprawn organizacj .
W I C Z E N I E
2.1
Projektowanie serwisu internetowego
Rozpocznij od przygotowania scenopisu. Okre l w nim cel tworzo-
nego serwisu i sformu uj g ówne tematy, które chcia by poruszy . Za-
pisz je na kartce papieru lub w edytorze tekstu. Cel b dzie okre la
tematyk strony, a tematy przekszta cimy pó niej w odno niki prowa-
dz ce do odpowiednich fragmentów strony (lub do kolejnych stron).
1. Zdefiniuj cel. W tym przyk adzie zaplanujemy zwyk stron
reklamuj c Twoj firm lub b d c Twoj prywatn wizytówk
w sieci WWW.
2. Okre l podstawow zawarto serwisu. B d to:
informacje teleadresowe,
przydatne informacje, np. dotycz ce profilu Twojej firmy
lub bezpo rednio Ciebie,
Poleć książkę
Kup książkę
24 Tworzenie stron WWW " wiczenia praktyczne
zasobnik plików do pobrania przez odwiedzaj cych Twoje
strony; mo esz tu umie ci np. folder reklamowy w formacie
.pdf,
informator o wydarzeniach.
3. Podejmij decyzj dotycz c struktury serwisu. W tym przyk adzie
zastosujemy struktur równoleg , najcz ciej stosowan
w obecnie tworzonych serwisach WWW. Równie dobrze
mo esz si jednak ograniczy do budowy hierarchicznej
lub hierarchiczno-liniowej. Co znacz te terminy, wyja niam
w tek cie uwagi.
4. Przydziel okre lone tematy konkretnym stronom (rysunek 2.1).
Rysunek 2.1. Oto struktura przygotowywanego serwisu WWW;
nosi ona nazw równoleg ej
Naj atwiejsz i najbardziej logiczn jest struktura hierarchiczna. W tym
przypadku przegl danie rozpoczyna si od strony g ównej, na której
umieszczone jest menu lub lista tematów. Wybranie tematu prowadzi
do podtematów lub konkretnej tre ci.
Struktura liniowo-hierarchiczna to kombinacja struktury liniowej
(w niej strony s po czone kolejno ze sob  tak jak wagony poci gu)
i hierarchicznej.
Mo liwe s tak e inne struktury: np. liniowa z alternatyw (innymi s owy
 z odga zieniami) lub sieciowa, która jest form bardzo lu n .
Obecnie najcz ciej stosowan struktur jest struktura równoleg a,
w której wszystkie strony serwisu zawieraj nag ówek i wszystkie panele
s u ce do nawigacji w ramach serwisu  ró ni si tylko w a ciw
tre ci . Tego typu struktura jest efektem spowszednienia wyszukiwarek
internetowych, które mog skierowa czytelnika bezpo rednio na jedn
Poleć książkę
Kup książkę
Rozdzia 2. " Projektowanie serwisu WWW 25
ze stron sk adowych serwisu, a nie na stron g ówn . W takim przypadku
równoprawno wszystkich stron serwisu u atwia przej cie do innego
tematu lub odszukanie strony g ównej.
Wybór struktury zale y przede wszystkim od tematyki strony, która mo e
narzuca pewien logiczny kierunek nawigacji.
Projektowanie serwisu
 uwagi praktyczne
Przygotowanie porz dnego projektu jest równie wa ne dla stron
WWW, jak i wszelkich innych konstrukcji. Fakt, e informacje pre-
zentowane s na ekranie, a nie na papierze, nie zwalnia z obowi zku
uczynienia wszystkiego, aby przekaz by przyjemny dla oka i atwy
w odbiorze. Projektowanie stron WWW jest tym trudniejszym zada-
niem, e konieczne jest tak e zapewnienie elastyczno ci stron w tym
sensie, e powinny one równie prawid owo dzia a na ró nych
platformach, przy ró nych rozmiarach okna przegl darki oraz przy ró -
nej wielko ci czcionkach. Oto kilka rad, które pomog Ci w poprawie-
niu czytelno ci stron.
Stosuj zasad : jeden temat  jedna strona. Je li to niemo liwe,
umieszczaj na jednej stronie tematy, które wi si ze sob .
Nie przesad jednak z prze adowaniem strony. Pami taj, e kilka
niezbyt prze adowanych stron b dzie si adowa szybciej ni
jedna ogromna strona.
Rozwa bardzo pieczo owicie kwesti odno ników mi dzy
stronami. Musisz przemy le dok adnie wszystkie aspekty
przemieszczania si mi dzy stronami (lub w ich obr bie),
aby czytelnik nie zagubi si w niefortunnie zaprojektowanym
 labiryncie .
Zastanów si , jakie informacje umie ci na stronie g ównej
 opis tego, co znajduje si dalej, czy te odno niki.
Wiersze tekstu nie powinny by zbyt d ugie, aby u atwi
czytelno . Jest to szczególnie wa ne, gdy odst p mi dzy
liniami jest za ma y  przy ma ych odst pach czytelnik
b dzie bezwiednie przeskakiwa wzrokiem co drugi wiersz.
Poleć książkę
Kup książkę
26 Tworzenie stron WWW " wiczenia praktyczne
Zachowaj umiar w korzystaniu z pogrubienia i kursywy.
Szczególnie tej ostatniej nale y raczej unika . Czcionka
o ma ym rozmiarze, pisana kursyw , jest ca kowicie nieczytelna.
Unikaj tak e korzystania z czcionki podkre lonej, poniewa
tekst podkre lony wygl da jak odno nik.
Nie wyró niaj zwyk ego tekstu za pomoc znacznika nag ówka.
Zachowuj podobny uk ad stron (np. umieszczaj cza do
pozosta ych stron w tym samym miejscu).
Definiuj c odno nik, unikaj okre lenia  tutaj .
Nie twórz niepotrzebnego t oku, nadmiar obrazów i kolorów
jest niekorzystny.
Wielu projektantów umieszcza w nag ówku obrazy  mo na je
samodzielnie przygotowa , korzystaj c np. z programu
PhotoShop i zapisa w formacie GIF. Nadaj one stronom
indywidualny charakter. Pami taj jednak, e strona b dzie si
wówczas adowa a d u ej i aby nie zniech ca u ytkownika,
powiniene umie ci w kodzie tekst alternatywny, korzystaj c
z atrybutu alt znacznika . Oto przyk adowa definicja:
.
Pami taj, e u ytkownicy nie tylko mog korzysta z ró nych
rozdzielczo ci, lecz tak e maj do dyspozycji opcj pozwalaj c
na zwi kszanie lub zmniejszanie rozmiaru czcionki. Tak
wi c wzgl dne relacje mi dzy tekstem a obrazem mog by
u u ytkowników najró niejsze. Projektuj c stron , powiniene
wzi te kwestie pod rozwag i uwzgl dni je przy testowaniu.
Kreatywne operowanie woln przestrzeni ekranu jest zawsze
najbezpieczniejsze i daje bardzo ciekawe efekty.
Nie dowierzaj wygl dowi strony WWW w Twojej przegl darce
i testuj swoje strony w ró nych przegl darkach.
Sprawd ortografi ! Nawet ortograficzne or y robi b dy.
Pami taj o podpisaniu swojej strony WWW. Odno nik
umo liwiaj cy bezpo rednie wys anie wiadomo ci e-mail do
autora kodu HTML umo liwia u ytkownikom serwisu szybkie
i atwe zg aszanie zauwa onych b dów.
Poleć książkę
Kup książkę