You are on page 1of 377

Bartosz

Danows ki

tl\

H e lio n

Spis treci
W s t p ................................................................................................................. 9
Uwagi techniczne ...........................................................................................11
Rozdzia 1.

Podstawowe informacje................................................................................ 13
Czym jest internet? .................................................................................................................. 13
Czym jest strona WWW, a czym witryna?............................................................................14
Dlaczego warto prowadzi wasn stron WWW? .............................................................. 15
Oprogramowanie potrzebne przy tworzeniu stron WWW a doczona pyta CD ............17
Edytory tekstu ....................................................................................................................18
Edytory grafiki ...................................................................................................................19
Programy do przygotowywania grafiki sieciowej..........................................................19
Etykieta i prawo autorskie ...................................................................................................... 20
Wybr usugodawcy, u ktrego zamiecimy stron W W W ................................................21
Wasna domena........................................................................................................................ 23

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania ................................25


Znacznik i jego konstrukcja.................................................................................................... 28
Podstawowe rnice pomidzy HTML i XHTML...............................................................29
Zasada 1. Nigdy nie krzyuj znacznikw....................................................................... 29
Zasada 2. Zawsze zamykaj wszystkie znaczniki............................................................30
Zasada 3. Wpisujc znaczniki i atrybuty, zawsze uywaj maych liter ......................30
Zasada 4. Uywaj cudzysoww dla wszystkich atrybutw ........................................ 30
Zasada 5. Przypisuj wartoci dla pustych atrybutw ....................................................31
Zasada 6. Uwaaj ze znakami specjalnymi w skryptach ............................................. 31
Struktura dokumentu ...............................................................................................................31
Okrelamy zgodno ze specyfikacj..............................................................................31
Ramy dokumentu XHTML ..............................................................................................32
Nagwek strony ...............................................................................................................33
Ciao dokumentu ...............................................................................................................39
Komentarze ....................................................................................................................... 40
Tworzenie szkieletu strony za pomoc edytora kED ....................................................40
Tekst ......................................................................................................................................... 42
Nagwki ............................................................................................................................42
Akapity...............................................................................................................................43
Cytaty .................................................................................................................................44
Indeks grny i dolny......................................................................................................... 46
amanie wierszy ...............................................................................................................46
Wyrnianie tekstu...............................................
47

Tworzenie stron WWW w praktyce

Twarda spacja...................................................................................................................47
Znacznik D IV ...................................................................................................................48
Formatowanie tekstu za pomoc edytora kE D ............................................................. 48
L isty ......................................................................................................................................... 50
Lista wypunktowana .......................................................................................................50
Lista numerowana ........................................................................................................... 50
Lista definicji....................................................................................................................51
Listy zagniedone.......................................................................................................... 51
Tworzenie list za pomoc edytora kED ........................................................................52
Grafika na stronie WWW ......................................................................................................53
Osadzanie grafiki za pomoc edytora kED ...................................................................56
Hipercza................................................................................................................................58
Hipercza tekstowe ........................................................................................................59
Hipercza graficzne........................................................................................................ 61
Mapy odsyaczy................................................................................................................62
Kotwice ............................................................................................................................ 65
Adresy wzgldne i bezwzgldne ....................................................................................66
Tworzenie hiperczy za pomoc edytora kED ............................................................ 67
Tabele ...................................................................................................................................... 69
Proste tabele ..................................................................................................................... 72
Wymiarowanie tabel ....................................................................................................... 73
Tabele niesymetryczne.................................................................................................... 76
Zagniedanie tabel......................................................................................................... 77
Dodatkowe elementy tabeli ............................................................................................ 78
Tworzenie tabel za pomoc edytora kED ..................................................................... 79
Formularze...............................................................................................................................84
Pola typu input .................................................................................................................84
Pole typu select.................................................................................................................86
Pole typu textarea .............................................................................................................87
Przesyanie treci formularza ......................................................................................... 87
Ramki....................................................................................................................................... 88

Rozdzia 3.

Grafika sieciowa ........................................................................................... 93


Format...................................................................................................................................... 95
GIF .................................................................................................................................... 95
JPG ...................................................................................................................................110
P N G ..................................................................................................................................113
Inne metody redukcji rozmiaru zdj i grafiki ............................................................113
Pozostae formaty publikacji grafiki na stronie WWW ........................................... 116
Wygadzanie krawdzi antyaliasing........................................................................117
Tworzenie gotowych rozwiza na potrzeby stron W W W .............................................. 120
Prostoktne i owalne przyciski......................................................................................120
Przyciski o nieregularnych ksztatach ..........................................................................126
Cicie grafiki na mniejsze elementy ............................................................................129
Mapa odsyaczy.............................................................................. :.............................. 132

Rozdzia 4.

Kaskadowe arkusze stylw .......................................................................133


Wprowadzenie .......................................................................................................................134
Rnice pomidzy formatowaniem za pomoc XHTML, HTML i C S S ................. 134
Umieszczanie stylw w dokumencie ...........................................................................135
Jednostki miar i nazewnictwo kolorw stosowane w CSS ........................................137
Budowa stylu .................................................................................................................. 142
Dziedziczenie i kaskadowo to klucz do potgi C S S ............................................... 157

Spis treci

Formatowanie wygldu tekstu.............................................................................................. 160


Wyrwnanie tekstu..........................................................................................................160
Pionowe wyrwnanie ......................................................................................................161
Wcicie pierwszego wiersza akapitu............................................................................. 162
Odstpy wiersze, wyrazy, litery ............................................................................. 162
Dekoracja tekstu .............................................................................................................. 163
Przeksztacanie mae i due litery ............................................................................164
Kontrola pustej przestrzeni............................................................................................. 165
Wnioski ............................................................................................................................ 166
Formatowanie wygldu czcionki..........................................................................................166
Rodzaj czcionki ............................................................................................................... 167
Rozmiar ............................................................................................................................ 168
Waga czcionki ................................................................................................................. 170
Styl czcionki.....................................................................................................................171
Wariant czcionki ............................................................................................................. 172
Wnioski ............................................................................................................................ 172
Formatowanie wygldu list .................................................................................................. 173
Typ listy ............................................................................................................................ 173
Wasny punktor graficzny .............................................................................................. 175
Pozycjonowanie listy wzgldem punktora.......................................:........................... 175
Wnioski ............................................................................................................................ 176
Kolor i to poszczeglnych elementw ............................................................................... 176
Kolor................................................................................................................................. 177
To .....................................................................................................................................178
Powielanie i zatrzymanie ta .......................................................................................... 179
Pozycjonowanie graficznego ta .....................................................................................181
Wnioski .......................................................................................................................... 183
Marginesy i dopenienie ........................................................................................................184
Marginesy zewntrzne.....................................................................................................184
Marginesy wewntrzne dopenienie.......................................................................186
Wnioski ............................................................................................................................ 187
Obramowanie elementw ......................................................................................................189
Styl obramowania............................................................................................................ 190
Szeroko obramowania................................................................................................. 192
Kolor obramowania.........................................................................................................193
Wnioski ............................................................................................................................ 194
Pozycjonowanie elementw ................................................................................................. 196
Okrelanie pozycji...........................................................................................................198
Wymiarowanie elementw............................................................................................. 198
Pywanie i tamowanie elementw.................................................................................200
Kolejno nakadanych elementw...............................................................................202
Wnioski ............................................................................................................................203
Tworzenie arkusza stylw za pomoc edytora k E D .......................................................... 203

Rozdzia 5.

Praktyczny projekt. Moja strona domowa .............................................. 207


Dlaczego jest mi potrzebna strona WWW?........................................................................ 207
Gromadz materiay ..............................................................................................................209
Struktura witryny...................................................................................................................210
Przygotowuj poszczeglne elementy witryny ..................................................................212
Strona gwna..................................................................................................................213
Sekcja Ksiki .............................................................................................................228
Sekcja Artykuy .......................................................................................................... 235
Sekcja O mnie ..............................................................................................................236

Tworzenie stron WWW w praktyce

Sekcja Przyjazne strony ............................................................................................ 236


Sekcja Sklep ................................................................................................................238
Sekcja Kontakt ............................................................................................................240
Nazwy plikw ....................................................................................................................... 242
Testowanie gotowego projektu........................................................................................... 243
Testy w rnych przegldarkach..................................................................................243
Testy rozdzielczoci ...................................................................................................... 244
Testy zgodnoci kodu ze specyfikacj ........................................................................ 247
Wnioski.................................................................................................................................. 253

Rozdzia 6.

Praktyczny projekt. Strona firm ow a........................................................ 255


Po co i dla kogo ta strona?................................................................................................... 255
Zbieramy materiay...............................................................................................................256
Struktura strony .................................................................................................................... 257
Tworzymy poszczeglne podstrony ...................................................................................257
Szablon strony................................................................................................................ 258
Strona gw na.................................................................................................................266
Strona pojedynczego w pisu.......................................................................................... 269
Strona artykuu lub testu ...............................................................................................269
Strona FAQ .................................................................................................................... 271
Strona redakcja ...........................................................................................................271
Strona kontakt .............................................................................................................274
Testowanie gotowego projektu............................................................................................274
Wnioski.................................................................................................................................. 274

Rozdzia 7.

Praca z szablonami..................................................................................... 275


Czym s szablony? ............................................................................................................... 275
Zalety pracy z szablonami ................................................................................................... 276
Jak to dziaa? .........................................................................................................................276
Skd mona pobra gotowe szablony?...............................................................................281
W nioski.................................................................................................................................. 282

Rozdzia 8.

Darmowe usugi dostpne w sieci ...........................................................283


Statystyki ............................................................................................................................... 283
Instalacja darmowej wersji statystyk............................................................................285
Dostpne informacje ..................................................................................................... 288
Licznik................................................................................................................................... 295
Status usug Gadu-Gadu oraz Tlen na stronie W W W ...................................................... 296
Sonda ..................................................................................................................................... 298
Biuletyn informacyjny..........................................................................................................298
Wnioski.................................................................................................................................. 305

Rozdzia 9.

Przydatne skrypty, ktrych mona uy na stronie WWW .................. 307


Nowe okno.............................................................................................................................307 .
Zamykanie otwartego okna ................................................................................................. 308
Rollover ................................................................................................................................. 308
Drukowanie zawartoci strony ............................................................................................308
Zmiana zawartoci paska statusu........................................................................................ 309
Dodawanie strony do Ulubionych ................................................................................... 309
Strona startowa ..................................................................................................................... 309
Zmiana ta caej komrki tabeli ...........................................................................................310
Wczytywanie arkusza w zalenoci od uywanej przegldarki ...................................... 311

Spis treci

Rozdzia 10. Publikacja i utrzymanie strony ..................................................................313


Wybr serwera hosting.................................................................................................... 313
Zakadanie konta.................................................................................................................... 316
Publikacja strony ................................................................................................................... 319
Rejestracja domeny................................................................................................................ 322

Rozdzia 11. Promocja serwisu ........................................................................................ 327


Popularne sposoby promocji strony .................................................................................... 327
Podpis poczty elektronicznej......................................................................................... 327
Grupy dyskusyjne............................................................................................................328
Listy mailingowe.............................................................................................................328
Inne formy promocji....................................................................................................... 328
Pozycjonowanie stron w wyszukiwarkach......................................................................... 329
Podstawy ..........................................................................................................................329
Prawidowa indeksacja strony....................................................................................... 331
Zdobywanie pozycji ....................................................................................................... 336
Wnioski................................................................................................................................... 341

Dodatek A ...........................................................................................................................343
Podsumowanie ......................................................................

367

Skorowidz ..................................................................................................... 369

Wstp
Internet na dobre zagoci w domach wielu Polakw. Dzisiaj nie jest niczym nadzwy
czajnym robienie zakupw za jego porednictwem, rezerwacja biletw, korzystanie
z usug bankowych, ogldanie telewizji i suchanie radia czy te nawizywanie po
cze gosowych i wideo. Globalna sie staa si czym tak oczywistym i niezbdnym
jak prawo jazdy czy telefon komrkowy.
Kady wiadomy czonek spoeczestwa moe, a w niektrych przypadkach powinien
mie wasn stron WWW. Osoby prywatne dziki intemetowi m og dzieli si swoimi
zainteresowaniami, natomiast firmy powinny traktowa globaln sie jako miejsce, w kt
rym obowizkowo powinny si profesjonalnie prezentowa i wiadczy za jej pomoc
przynajmniej cz swoich usug.
Projektowanie stron WWW w cigu ostatnich lat bardzo si zmienio i cigle ewoluuje.
Kiedy strony tworzyli naukowcy w celu prezentacji wasnych osigni pracowni
kom innych uczelni. Ze wzgldu na spore ograniczenia intemetu oraz ubogie moli
woci jzyka HTML publikacje te byy mao interesujce od strony wizualnej. Charak
teryzoway si do prost konstrukcj bloki tekstu rozdzielano za pomoc poziomych
linii. Strony mogy zawiera listy wypunktowane lub numerowane oraz nagwki.
W miar pojawiania si kolejnych wersji jzyka HTML i XHTML oraz rozwoju sieci
strony wyglday coraz lepiej. Obecnie witryny to w bardzo wielu przypadkach praw
dziwe dziea sztuki internetowej, tworzone z wykorzystaniem najnowszych rozwiza,
takich jak Ajax, Adobe Flash czy te bazy danych i jzyki skryptowe dziaajce po
stronie serwera.
Przygotowanie strony WWW nie jest rzecz skomplikowan. miem twierdzi, e stron
WWW moe zrobi kady, kto bdzie mia odrobin chci. Niestety, strona stronie
nierwna. Wielu pocztkujcych adeptw popenia koszmarne bdy i raczy wiat mniej
szymi lub wikszymi potworkami. Dlatego zdecydowaem si odwiey niniejsz
ksik i przygotowa jej drugie wydanie.
Ksika pozwoli Ci zdoby solidne podstawy, dziki ktrym bdziesz mg tworzy
wasne witryny internetowe. Czytajc kolejne rozdziay, poznasz najnowsz odson
jzyka XHTML 1 oraz CSS 2, ktre s niezbdne do tworzenia stron WWW.

10

Tworzenie stron WWW w praktyce

W kolejnych rozdziaach przedstawiam proces tworzenia dwch kompletnych stron


WWW prywatnej i firmowej. Dowiesz si, jakimi kryteriami naley si kierowa
przy doborze konta wirtualnego serwera, niezbdnego do publikacji gotowego pro
jektu. Poznasz tajniki przygotowania grafiki na potrzeby intemetu i nauczysz si pra
cowa z gotowymi, darmowymi szablonami dostpnymi w sieci. Nie naucz Ci jednak,
jak pisa wasne skrypty, poniewa wiedz t znajdziesz w innych ksikach uwaam,
e do przygotowania dobrze wygldajcej strony nie jest potrzebna znajomo PHP,
gdy wszystko, co jest konieczne, moemy znale w sieci. Nauczysz si zatem, w jaki
sposb korzysta z dobrodziejstw intemetu. Wydaje mi si, e dziki temu ksika
bdzie bardziej przydatna dla szerszego grona Czytelnikw. Jeeli po jej przeczytaniu
wykonasz dobre strony i uznasz, e zawarte tutaj informacje to zbyt mao, by sprosta
Twoim ju sprecyzowanym wymaganiom, bdziesz mg wiadomie sign po inne,
bardziej szczegowe opracowania dostpne na polskim rynku. Moim zaoeniem byo
praktyczne przedstawienie tworzenia stron WWW, dlatego w ksice nie ma opisw
o charakterze czysto teoretycznym ich miejsce zajy konkretne porady i rozwizana.
Uzupenieniem caoci jest pyta CD, na ktrej umieciem niezbdne narzdzia wy
korzystywane przy tworzeniu stron WWW. Dobierajc programy, staraem si wybiera
narzdzia, ktre s bezpatne i mona legalnie uywa ich w domu. Wiele z progra
mw znajdujcych si na pycie zostao wykorzystanych i omwionych w niniejszej
ksice.
Jeeli podczas lektury lub po jej zakoczeniu bdziesz mia jakie pytania albo po
prostu postanowisz podzieli si uwagami na temat ksiki, moesz to zrobi za po
rednictwem mojej strony WWW lub poczty e-mail. Odpowiednie adresy znajduj
si poniej.

Bartosz Danowski
bartek@danowski.pl
http://danowski.pl

Uwagi techniczne
Zwarto pyty CD-ROM
Pyta doczona do tej ksiki zawiera komplet oprogramowania przydatnego do two
rzenia stron WWW. Aplikacje w wikszoci s wersjami darmowymi (freeware), cho
znajduj si tam rwnie narzdzia komercyjne (wersje trial). Pamitaj, e w przypadku
kadego programu autor sprecyzowa warunki jego uywania. Moe to by zgoda na
uywanie programu w celach edukacyjnych lub zupeny brak ogranicze. Zapoznaj si
z warunkami i uywaj programu zgodnie z licencj! Pragn nadmieni, e internet jest
peny przernych darmowych programw, ktre s odpowiednikami patnych aplika
cji, dlatego tworzc strony WWW, nie musisz pracowa na piratach .

Uwaga

W ksice Darmowe oprogramowanie. Leksykon (http://helion.pl/ksiazki/daropl.htm )


znajdziesz opis kilkuset darmowych programw. Wszystkie aplikacje zostay podzie
lone na grupy tematyczne i uzupenione o opis moliwoci oraz informacje o tym,
ktre z komercyjnych programw mog zastpi.

Pyt CD podzieliem na nastpujce dziay:


Oprogramowanie zbir przydatnych programw (edytory XHTML,
narzdzia graficzne, przegldarki, serwery WWW i PHP)
Specyfikacje zbir specyfikacji XHTML (1.0, 1.1), HTML (4.01)
oraz CSS (1,2.1)
Szablony przykadowe szablony stron WWW
Przykady kilka przykadw do zagadnie omawianych w ksice

Tworzenie stron WWW w praktyce

12

Oznaczenia stosowane w ksice


Informacje zawarte w ksice s odpowiednio sformatowane, dziki czemu czytanie
caoci jest znacznie wygodniejsze. Oczywicie, na pocztku warto w skrcie przed
stawi, jakie formy zapisu przyjem na nastpnych stronach.
Jeeli odwouj si do nazwy pliku, to tekst bdzie mia nastpujc posta: plik.html.
W sytuacji, gdy pragn zwrci uwag na pewne elementy, stosuj pogrubienie. Kolej
n form zapisu uyw an w tej ksice jest tekst wyrniony. Bd go uywa wtedy,
gdy uznam pewne elementy za szczeglnie wane lub bd odwoywa si do menu
programw.
W szystkie odnoniki do stron internetowych bd miay nastpujc posta: http://
www.helion.pl. W ksice znajdziesz sporo listingw, przernych przykadw kodu
XHTML i HTML i taki tekst bdzie wyglda podobnie do nastpujcego przykadu:
<html>
<head>
</head>
<body
</body>
</html>

Ponadto w tekcie m og si pojawi uwagi, w ktrych bd sukcesywnie zamieszcza*


porady o kluczowym znaczeniu dla omawianego zagadnienia:

Uwaga

Tworzenie stron WWW moe by prawdziw przyjemnoci, jeeli wemiesz sobie


do serca wszystkie porady i uwagi zam ieszczone na nastpnych stronach.

Znaczniki XHTML wystpujce w tekcie zostay dodatkowo wyrnione, np.: <div>


</di v>. Dziki temu nie bd zlewa si z reszt tekstu.

Rozdzia 1.

Podstawowe informacje
Czym jest internet?
Ocena i jakakolwiek charakterystyka intemetu jest do trudna. Dlatego sprbuj opi
sa, czym jest internet w moim odczuciu. Ot kilka lat temu, gdy stawiaem swoje
pierwsze kroki na cybernetycznej drodze, uwaaem, e to kolejna chwilowa moda
i kwesti czasu jest, by pomys umar i znikn z naszego globu. Dzisiaj, gdy pomy
l, jaki byby wiat bez dostpu do sieci i oferowanych przez ni moliwoci, nie
potrafi w nim znale miejsca dla siebie. Dziki internetowi mog na bieco ledzi
notowania giedowe, czyta poranne gazety, zarzdza swoimi pienidzmi, a w kocu
pracowa i pisa ksiki. Nie wyobraam sobie chwili, w ktrej kto wyjmie wtyczk
i sie zganie stracibym prac, byskawiczny dostp do informacji, a nawet wielu
przyjaci. Czasem zastanawiam si, czy ju nie jestem uzaleniony i nie powinienem
si leczy w specjalistycznych poradniach, ale mam nadziej, e tak nie jest bo prze
cie stracibym wtedy dostp do sieci.
W moim odczuciu internet to jedno z najwikszych osigni wspczesnej cywiliza
cji. Potrafi sobie wyobrazi wiat bez ciepej wody, restauracji czy samochodu, ale nie
widz moliwoci jego istnienia bez sieci.
Oczywicie opisane zalety nie wyczerpuj zagadnienia i zupenie pomijaj drugi aspekt
sprawy. Mam tutaj na myli fakt, e internet pozwala nam rwnie aktywnie w nim
zaistnie i pozostawi czstk siebie. Jeeli poznamy jzyk HTML i XHTML i przy
swoimy sobie podstawy korzystania z sieci, to m oemy bra aktywny udzia w jej
tworzeniu, rozrastaniu si nasza praca bdzie jak tlen niezbdny do ycia.

Biblioteka
Pol. Wroc.

Tworzenie stron WWW w praktyce

14

atwo dostpu do sieci i prostota korzystania z niej umoliwiaj kademu prowa


dzenie wasnej strony domowej zawierajcej informacje o jego zainteresowaniach
czy rodzinie, a nawet stworzenie prawdziwej elektronicznej gazety. W sieci nie mamy
adnych ogranicze i jeeli tylko chcem y, to moemy zrobi wszystko. Prowadze
nie poczytnego portalu czy strony o hodowli rybek akwariowych to tylko dwie z wielu
moliwoci. Wszystko ogranicza si do jzyka HTML i XHTML, a bardzo czsto pro
wadzi do spenienia marze. Wielu autorw doskonaych serwisw zarobio dziki nim
spore pienidze lub otrzymao ciekawe propozycje pracy.
Musisz pamita o jednej podstawowej zasadzie anonimowo w sieci jest tylko
pozorna. Do chwili, gdy nie naruszysz obowizujcych norm, moesz by anonimowy.
W przypadku zamania prawa lub dobrych obyczajw prdzej czy pniej spodziewaj
si odkrycia Twojej prawdziwej tosamoci dlatego zanim popenisz gupstwo, za
stanw si dwa razy.
Moim zdaniem internet to pikne osignicie i nie pozwlmy go zniszczy przez brak
ogady. Zwr uwag, e to dziki byskawicznemu rozwojowi sieci powstay idee
tworzenia darmowego oprogramowania, a nawet caych systemw operacyjnych. To wa
nie sie pozwala walczy z uprzedzeniami oraz przedstawia prawd.
Oczywicie, usysz gosy, e sie jest rdem wszelakiego za (pornografia, treci
o charakterze nazistowskim czy te piractwo). Nie sposb nie zgodzi si z takimi ar
gumentami, ale we pod uwag, e wina za taki stan rzeczy ley po naszej stronie.
Gdyby nie byo zainteresowania pornografi, to nie powstawayby nowe strony jej
powicone, a ludzie nie zarabialiby na tym procederze. Dlatego pamitaj, e nikt nie
zmusza Ci do korzystania z ciemnej strony sieci.

Czym jest strona WWW,


a czym witryna?
Znasz ju moje zdanie na temat sieci. Zakadam, e skoro kupie t ksik, to miae
bd masz styczno z internetem i zainteresowao Ci tworzenie wasnych, dobrze wy
gldajcych i dziaajcych stron WWW.
Zanim zajmiemy si konkretami, niezbdne jest wyjanienie do czsto spotykanych
poj strona WWW oraz witryna. Ot pierwsze z nich okrela pojedynczy plik tek
stowy zawierajcy odpowiednie polecenia jzyka HTML (XHTML). Utaro si, eby
nazw t stosowa w odniesieniu do caego zbioru stron, jakim bez wtpienia jest wi
tryna. N a pewno spotkae si z pytaniem: Czy masz stron WWW?. Taka forma jest
z pewnoci bardzo wygodna, chocia nie do koca zgodna z prawd. Nie bd jednak
zmienia Twojego sposobu nazewnictwa.

Rozdzia 1. Podstawowe informacje

15

Dlaczego warto prowadzi


wasn stron WWW?
Odpowied na to z pozoru proste pytanie nie jest taka oczywista. Zastanwmy si,
dlaczego zdecydowaem si wykona swoj stron WWW. Ot pomys narodzi si
ju do dawno, a pierwsze wydanie tej ksiki pozwolio go zrealizowa. Pisanie ksi
ek oraz inne prace pochaniay mnie na tyle, e nie miaem czasu, by zaprojektowa
ciekawie w ygldajc stron, a nastpnie j opublikowa. N a szczcie pojawia si
propozycja napisania ksiki o praktycznym tworzeniu stron WWW. Przyznam si,
e od razu zgodziem si pisa, gdy na jednym ogniu mogem upiec dwie pieczenie.
Po pierwsze, dorobiem si swojej wasnej strony WWW; po drugie, napisaem mam
nadziej ciekaw ksik. Pora przytoczy powane argumenty, ktre skoniy mnie
do utworzenia strony domowej.
Byo mi potrzebne miejsce, gdzie mgbym rozwija myli i przykady zaprezentowane
w ksikach lub artykuach. Ksika czy te gazeta m aj to do siebie, e po ich wy
drukowaniu nie mamy ju wpywu na zawarto, a bardzo czsto wraz z pojawieniem si
nowej przegldarki czy programu pojawiaj si nowe moliwoci. Dziki stronie, ktrej
adres znajdzie si w ksice, Czytelnik bdzie mg na bieco uzupenia wiedz.
Strona WWW daje mi moliwo pisania o rnych innych ciekawych sprawach, ktre
niekoniecznie nadaj si na temat ksiki czy te artykuu do gazety. Jeeli pewnego
dia obudz si po cikiej nocy spdzonej na przymuszaniu przegldarki do tego, by
mnie suchaa, i bd chcia si komu wyali, to strona mnie wysucha i pozwoli udo
stpni moje wnioski innym.
Posiadanie strony moe zaowocowa ciekawymi propozycjami udziau w rnych pro
jektach. Moje pierwsze kroki i przygotowanie strony WWW zostay uwieczone kilka
lat temu artykuem w miesiczniku o nazwie Cyber (pewnie starsze pokolenie pa
mita takie czasopismo). Od tamtego czasu zmieniy si moje zainteresowania i pogldy
na wiele spraw dorosem, jednak to doskonay przykad, jaki wpyw na nasze ycie
moe mie strona domowa. Dzisiaj rwnie nie mog narzeka na brak ofert wsppra
cy. Zaledwie kilka dni temu dostaem propozycj napisania kilku ksiek wraz z innym
autorem, nie tak dawno temu oferowano mi napisanie ksiki na zamwienie pewnej
znanej firmy dziaajcej na rynku open source, nie wspominam tutaj o dziesitkach pro
pozycji pisania artykuw do mniej lub bardziej znanych gazet.
Patrzc na powysze argumenty z perspektywy czasu i pracy nad drugim wydaniem
ksiki, nasuwa mi si kilka dodatkowych myli, ktrymi chc si z Tob podzieli.
Przez te wszystkie lata moja strona staa si podstawow platform kontaktu z Czytelni
kiem. To wanie na stronie domowej Czytelnik sprawdza, jakie ksiki napisaem,
szuka odpowiedzi na swoje pytania, nawizuje kontakt ze mn, a take korzysta z do
datkowych materiaw. Druga wersja strony, ktra jest widoczna na rysunku 1.1, bya
efektowna i budzia zainteresowanie, jednak dopiero obecna forma i rozwizania spo
wodoway, e mam nieskrpowane moliwoci realizacji gwnych celw, ktre sta
wiaem sobie kilka lat temu. To wszystko zasuga m inimalistycznego szablonu oraz
wygodnego systemu CMS do zarzdzania treci. M ona powiedzie, e staem si

Tworzenie stron WWW w praktyce

16

Rysunek 1.1.
D ruga wersja
w itryny danowski.pl

minimalist w kwestii wygldu i arliwym zwolennikiem maksymalnej przejrzystoci


i funkcjonalnoci. W dalszej czci niniejszej ksiki z ca pewnoci zobaczysz efekty
zmiany mojego nastawienia do strony WWW. Mam nadziej, e spodoba Ci si nowe
podejcie do tego zagadnienia. Pamitaj, e m inimalistyczny wygld wcale nie idzie
z parze unikaniem stosowania ciekawych rozwiza kodu strony.
Nieco inaczej wyglda sprawa internetowej wizytwki firmy. Instytucja taka moe mie
charakter handlowy, usugowy, produkcyjny, etc. Rwnie i strona WWW spenia
rne funkcje. W przypadku firmy handlowej na stronie moemy zamieci informa
cje o firmie, jej dziaalnoci, ofercie, promocjach oraz sklep internetowy. Taka witry
na moe przy dobrym prowadzeniu i odpowiednim podejciu waciciela zaowocowa
w stosunkowo bliskiej przyszoci zyskami ze sprzeday. Doskonaym przykadem
takiej strony jest najwiksza na wiecie ksigarnia internetowa http://www.amazon.com
lub strona wydawnictwa Helion http://helion.pl, na ktrej moesz kupi wszystkie
ksiki, jakie znajduj si w ofercie. Warto podkreli, e odpowiednie podejcie sze
fostwa firmy pozwolio stworzy naprawd doskonale dziaajc stron, ktrej mona
pozazdroci. Pragn podkreli, e strony firmy handlowej powinny cigle ewoluowa
y, kusi promocjami i now ofert. Decydujc si na stron dla takiej firmy, mu
sisz pamita, e prowadzenie serwisu jest bardzo pracochonne i na og wymaga za
trudnienia pracownika, ktry bdzie si tylko tym zajmowa. Nie moesz pozwoli, by
strona zwolnia tempo, poniewa ludzie przestan przychodzi i kupowa. Stare ceny,
nieaktualna oferta oraz nieciekawe promocje zniechc internautw do odwiedzin.

Rozdzia 1. Podstawowe informacje

17

Inn rol moe spenia strona firmy usugowej, np. szewca. Zakad szewski wiad
czy jedynie usugi dla ludnoci, a jego strona powinna zawiera informacje o firmie,
adres i godziny pracy, mapk jeeli trudno do niej trafi, informacje o wiadczo
nych usugach oraz cennik. Strona taka nie wymaga czstych aktualizacji, poniewa ma
ona jedynie charakter informacyjny. Jeeli zrobisz tak witryn dla firmy, pamitaj
o tym, e dane w niej zawarte powinny by zawsze aktualne. Nie moesz sobie po
zwoli na to, by numer telefonu by nieaktualny lub poczta elektroniczna kierowana
do zakadu pozostawaa bez odpowiedzi to le wiadczy o firmie.
Moim zdaniem ciekaw funkcj ma do spenienia strona firmy produkcyjnej. Zasta
nwmy si, co powinna zawiera strona producenta gumowych uszczelek. Produkt
mao interesujcy, ale jake potrzebny na rynku. Moim zdaniem na stronie takiej firmy
szukabym informacji o asortymencie wytwarzanych uszczelek (informacje o typach,
rozmiarach), moliwoci nabycia, lokalnych przedstawicielach lub sklepach wsppra
cujcych z producentem. Bardzo w an rzecz jest to, by na stronie znalazy si in
formacje na temat warunkw wsppracy i zakupu. W tym przypadku producent raczej
nie bdzie si zajmowa sprzeda detaliczn, dlatego zakadam, e moemy pomin
tworzenie sklepu. Podobnie jak w poprzednich przykadach, rwnie i tym razem strona
powinna by zawsze aktualna, a na listy elektroniczne odpowiada naley przynajm
niej raz dziennie.
Podsumowujc, z ca pew noci mog pow iedzie, e strony firm bez wzgldu na
bran i prow adzon dziaalno m aj kilka wsplnych elementw, ktre w ym ieni
em dalej:
dane powinny by zawsze aktualne,
poczta odwiedzajcego nie moe pozosta bez odpowiedzi,
obowizkowymi elementami s dane teleadresowe.

Uwaga

Nieaktualna lub bdnie wykonana strona to antyreklama firmy. W zasadzie takiej


strony nie powinno by w sieci.

Oprogramowanie potrzebne
przy tworzeniu stron WWW
a doczona pyta CD
Dokument XHTML (HTML) jest zwykym plikiem tekstowym, czyli do wykonania
strony nie jest nam potrzebny aden specjalny program ani rodowisko programi
styczne wystarczy zwyky edytor tekstu, np. N otatnik, bdcy czci skadow
kadego systemu MS Windows.

18

Tworzenie stron WWW w praktyce

Niestety, Notatnik jest niezwykle prostym edytorem tekstowym i nie obsuguje XHTML
(HTML), wic wymaga szczeglnej dbaoci o wpisywany kod. Przy tworzeniu stro
ny w Notatniku nietrudno o liczne bdy oraz przeoczenia, dlatego podczas regularnej
pracy nad stron WWW warto sign po wyspecjalizowane narzdzia. Do dyspozy
cji mamy dwa rodzaje edytorw.

Edytory tekstu
Wspominaem o tym, e pliki zawierajce kod strony WWW to dokumenty tekstowe,
a co za tym idzie, do ich edycji moemy wykorzysta dowolny tekstowy edytor, np.
systemowy Notatnik. Niestety, takie rozwizanie nie naley do zbyt wygodnych, gdy
wymaga kadorazowo rcznego wklepywania wszystkich niezbdnych znacznikw
oraz pamitania o ich domykaniu. W zwizku z tym na rynku stosunkowo szybko po
jawiy si wyspecjalizowane edytory programistyczne wyposaone w szereg dodatko
wych funkcji, znacznie uatwiajcych prac webmasterowi.
Najwaniejsze cechy, jakimi powinien charakteryzowa si dobry edytor tekstowy, to:
domykanie znacznikw,
kolorowanie skadni,
kodowanie polskich znakw w standardzie ISO i UTF,
kreatory uatwiajce generowanie czci kodu,
sprawdzanie poprawnoci wygenerowanego kodu.
Na rynku moemy znale wiele bardzo dobrych i godnych polecenia edytorw tek
stowych. Dlatego ostatecznie zdecydowaem si nie proponowa konkretnego, a jedynie
przedstawi wykaz kilku ciekawych rozwiza, ktre, moim zdaniem, zasuguj na
uwag. Pragn nadmieni, e wszystkie wybrane edytory s aplikacjami darmowymi.
kED bardzo wygodny polski edytor XHTML (HTML) i CSS. W tej chwili
nie bd zachwala moliwoci edytora, poniewa opisaem go w dalszej czci
ksiki przy okazji omawiania jzyka XHTML (HTML) i CSS. Program znajduje
si rwnie na doczonej pycie CD.
1st Page 2006 bardzo rozbudowany edytor stron WWW, ktry pozwala
na prac nad stron w trybie tekstowym oraz graficznym. Warto zwrci
uwag na to, e posiada on mechanizm domykania znacznikw, kolorowania
skadni oraz wygodne podpowiedzi. Duy plus naley si autorowi za dodanie
dziesitek kreatorw, uatwiajcych utworzenie bardziej skomplikowanego
elementu na stronie, np. uzyskanie popularnego efektu rollover albo dodanie
tabeli czy galerii ze zdjciami. Prezentowane narzdzie wspiera prac z kodem
XHTM L i HTML. Strona domowa edytora to http://www.evrsoft.com.
Minusem jest brak polskiej wersji jzykowej.

Rozdzia 1. Podstawowe informacje

19

P SP ad zaawansowany edytor programistyczny, obsugujcy wiele jzykw


programowania, w tym HTML, XHTML i CSS. Posiada on wszystkie niezbdne
udogodnienia uatwiajce prac, zosta te wyposaony przez autora w modu
sprawdzania pisowni rwnie polskiej. Z aletjest polskojzyczny interfejs
i wygoda obsugi. Warto rwnie wspomnie o integracji z darmowym edytorem
kaskadowych arkuszy stylw (TopStyle Lite) oraz sprawdzaniu poprawnoci
kodu i obsudze wielu dodatkw, ktre mona pobra ze strony domowej
http://www.pspad.com/en.
TopStyle Lite jest wysoce wyspecjalizowanym edytorem CSS. Program
stosuje kolorowanie skadni, domykanie znacznikw oraz uywa wygodnego
mechanizmu podpowiedzi. Dziki kreatorom i przejrzystemu interfejsowi
stworzenie wasnego, nawet najbardziej rozbudowanego, arkusza stylw jest
rzecz banalnie atw. Na uwag zasuguj: podgld dziaania budowanego
arkusza, walidator sprawdzajcy poprawno kodu arkusza oraz moliwo
integracji edytora z PSPadem.

Edytory grafiki
Tego rodzaju edytory s z reguy duo bardziej wymagajce (aspekt sprztowy), a praca
z nimi przypomina tworzenie dokumentu, np. w program ie MS Word. Programy te
oferuj wiele kreatorw i gotowych szablonw, majcych pomc w pracy nad stron.
Do istotn wad edytorw graficznych jest ograniczona kontrola kodu strony, ktry
niestety w przypadku takich programw czsto pozostawia wiele do yczenia.
Przykadem edytorw graficznych s m.in. MS FrontPage, jednak bezapelacyjnie naj
lepszy w tej kategorii jest Dreamweaver firmy Adobe (wczeniej Macromedia). Program
ten ma potne moliwoci, a przy tym jego obsuga nie jest zbyt skomplikowana.
Na temat wspomnianych programw moesz przeczyta wicej na stronach:
Dreamweaver http://www.adobe.com/products/dreamweaver
MS Front Page http://www.microsoft.com/frontpage

Programy do przygotowywania grafiki sieciowej


Nowoczesna strona nie moe obej si ju dzisiaj bez elementw graficznych. Dla
tego mylc powanie o przygotowaniu swojej pierwszej strony, powiniene zaopa
trzy si w odpowiednie narzdzie (lub narzdzia) graficzne. Musisz wiedzie, e na
rynku istnieje wiele bardzo dobrych i profesjonalnych programw do obrbki grafiki,
np. Adobe Photoshop czy Corel PHOTO-PAINT, ale niestety wszystkie m aj jedn
podstawow wad w ysok cen. N a szczcie m ona znale darmowe lub tanie
zamienniki wymienionych powyej aplikacji. Tak si skada, e w swojej codziennej
pracy uywam programu Paint Shop Pro w wersji 7. Program ten pozwala pracowa na
warstwach, obsuguje formaty plikw g i f p ng oraz jp eg, uywane na stronach WWW.
Poniej natomiast wymieniem kilka darmowych rozwiza, ktre powinny Ci zain
teresowa ze wzgldu na oferowane moliwoci.

20

Tworzenie stron WWW w praktyce

P aint.N E T jest bardzo rozbudowanym edytorem grafiki rastrowej. Program


jest rozwijany przez studentw Uniwersytetu Washingtona, a dodatkowo
wspierany przez firm Microsoft. Pozwala on na obrabianie rnego rodzaju
grafiki rastrowej. Wspiera korzystanie z warstw, wielopoziomow opcj
cofania zmian oraz efekty specjalne. Do wymienionych zalet naley doliczy
przejrzysty interfejs oraz moliwo instalacji innych wersji jzykowych.
Niestety, polska wersja programu nie jest jeszcze dostpna. Strona domowa
programu to http://www.eecs.wsu.edu/paint.net.
GIMP jest darmowym narzdziem do obrbki grafiki rastrowej. Za pomoc
tego programu moesz edytowa zdjcia lub tworzy wasne grafiki, na przykad
na potrzeby projektowanej strony WWW. GIMP oferuje wiele zaawansowanych
funkcji, a do najwaniejszych mona zaliczy: obsug warstw, wykorzystanie
ogromnej iloci wtyczek, moliwo tworzenia wasnych makr oraz wiele
innych. Warto rwnie wspomnie o rozbudowanej selekcji, pracy z kanaami
alfa, obsudze antyaliasingu, skalowaniu i przeksztacaniu obrazw, wsparciu
dla animowanych GIF-w, tworzeniu map odnonikw czy czeniu tekstu
z grafik. W rd obsugiwanych formatw graficznych znajduj si m.in.
jp eg , bmp, png, xpm , tiff.\ tga, mpeg, ps, pdf, pcx, gif. Program dostpny jest
m.in. w polskiej wersji jzykow ej, a w poczeniu z nakadk GIMPShop
(http://plasticbugs.com/?page_id=294) obsuga aplikacji jest zbliona
do Adobe Photoshop, poniewa ukad menu i skrty klawiszowe s identyczne.
Warto rwnie wspomnie o tym, e GIMP dostpny jest w wersjach dla rnych
systemw operacyjnych. M ona go pobra ze strony http://gimp.eu.org.
DrawPlus 4 to bardzo funkcjonalne narzdzie do tworzenia grafiki
wektorowej. Program posiada wiele rozwiza niezbdnych podczas pracy
z tego typu grafik, a do tego ma bardzo przyjazny interfejs. Naley wspomnie
o tym, e aplikacja pozwala na prac z wykorzystaniem warstw, grupowanie
elementw oraz zamian tekstu na krzywe. Ciekawostkjest rwnie, e dziki
niej moemy przygotowa animacje, a wyniki pracy wyeksportowa do kilku
popularnych formatw rastrowych. Program mona pobra ze strony http://
www.freeserifsoftware.com. Niestety, polska wersja jzykowa nie jest dostpna.

Etykieta i prawo autorskie


Etykieta i respektowanie praw autorskich to zagadnienia o zasadniczym znaczeniu przy
tworzeniu stron WWW. Nie moemy od tak po prostu zabra komu jego strony, de
likatnie przerobi i opublikowa jako wasn. To samo tyczy si przycisku czy innego
elementu graficznego znajdujcego si na stronie. Prawem autorskim jest chroniony
rwnie opublikowany na stronie tekst, dlatego jego take nie moemy wykorzysta
do swoich celw. Pamitaj, e istnieje co takiego jak moliwo cytowania innego
autora, ale wymaga to podania rda i ograniczenia si jedynie do fragmentu tekstu.
W dobrym tonie jest zapytanie autora, czy nie ma nic przeciw takiemu dziaaniu.

Rozdzia 1. Podstawowe informacje

Uwaga

21

W ostatnich latach rozpowszechni si zwyczaj oznaczania tekstw za pomoc licen


cji Creative Commons http://creativecom m ons.pl. Dziki temu wiadomo, czy dany
tekst moemy wykorzysta do swoich potrzeb i w jakim zakresie moemy to zrobi.

Z pewnoci zdziwisz si, ale zbierajc materia na pyt CD doczon do tej ksiki,
pytaem kadego autora, czy mog jego program opublikowa na pycie. Nie zwraca
em tutaj uwagi na to, e narzdzie jest zupenie darmowe czy te e mona je testo
wa przez okres 30 dni. Jeeli zachodzia taka potrzeba, wysyaem stosowne umowy
lub dokumenty wymagane przez autorw. Wszystko po to, by nikt nie mg mi zarzuci,
e zamaem prawo chronice jego interesy.
Wbrew pozorom zagadnienia te s oczywiste, a jednak niemal codziennie na forach
i grupach dyskusyjnych spotykam informacje o kolejnych plagiatach lub permanent
nych inspiracjach innymi projektami. Niestety, zjawisko to jest i bdzie nadal obecne
w polskiej sieci, ale mam nadziej, e Twoje podejcie bdzie odpowiednie do rangi
problemu.
Pamitaj, e uywajc pracy innych, amiesz prawo, ale prdzej czy pniej tego sa
mego moesz dowiadczy. Kto inny uyje Twoich tekstw lub szaty graficznej czy
te ukadu strony bez Twojej wiedzy i zgody.
Z pewnoci autorytetem w zakresie etyki webmasterskiej jest Pawe Wimmer, ktry
ju kilka lat tem u spisa najw aniejsze zaoenia i um ieci je w swoim kursie. N ie
bd tutaj cytowa Pawa, tylko podam odnonik do odpowiedniej strony http://
webmaster.helion.pl/kurshtml/porady/porady.htm.
Zapoznaj si z etykiet i staraj si do niej stosowa. Na pewno niczego nie stracisz,
a moim zadaniem moesz zyska szacunek i uznanie innych.

Wybr usugodawcy,
u ktrego zamiecimy stron WWW
Wybr odpowiedniego dostawcy usug internetowych nie jest prosty, gdy na rynku
dziaaj setki, o ile nie tysice firm. Podobnie jak w yciu codziennym, tak i tutaj mo
emy spotka firmy porzdne oraz nacigaczy. Dla mnie zasady panujce na rynku
usug internetowych nie zawsze s zrozumiae. Nie rozumiem i nie darz zaufaniem
firm, ktre oferuj usugi za V5 ceny proponowanej przez kilka innych, dziaajcych
znacznie duej na rynku. Zawsze mam wraenie, e to, co tanie, jest drogie, i osobicie
nie polecabym korzystania z usug bardzo tanich firm bez bazy klientw. Moim zda
niem przed podjciem decyzji o wyborze dostawcy warto go sprawdzi. Naley kon
trolowa przez jaki czas, czyjego serwery dziaaj poprawnie i stabilnie. Doskonaym
rdem wiadomoci o jakoci usug firmy moe okaza si baza klientw. Warto zwr
ci uwag na to, jacy klienci korzystaj z usug dostawcy. Duym minusem jest fakt
obsugi przez firm stron o tematyce erotycznej, gdy s one powodem ogromnego

22

Tworzenie stron WWW w praktyce

obcienia serwerw i zapychania czy. Na dzie dzisiejszy coraz wicej firm oferuje
moliwo przetestowania swoich usug, zanim za nie zapacimy, dlatego warto z takiej
moliwoci skorzysta.
Oferowane usugi s bardzo zrnicowane, tote warto dokadnie czyta dostpne mate
riay reklamowe, by unikn rozczarowania.
Jeeli szukasz patnego usugodawcy na potrzeby publikacji swojej strony utworzonej
z wykorzystaniem materiaw zawartych w tej ksice, to niemal kada oferta bdzie
odpowiednia. Zakadam jednak, e na tym etapie nie zakoczysz swojej przygody,
dlatego powiniene szuka wirtualnego serwera speniajcego nastpujce warunki:
moliwo rejestracji wasnej domeny,
pojemno serwera uzaleniona od wymogw serwisu (z pewnoci
pierwsze projekty bd zajmoway po kilkaset kilobajtw, ale sugerowabym,
by pojemno przeznaczona na stron wynosia przynajmniej 100 MB
z m oliwoci poszerzenia nigdy nie wiadomo, co przyniesie przyszo),
konto e-mail o duej pojemnoci,
brak limitu na generowany przez nasz serwer ruch w sieci lub limit na tyle duy,
e nie bdzie koniecznoci dokupywania dodatkowego transferu.
moliwo rozszerzenia usugi o uruchamianie skryptw PHP i dostp
do bazy danych.
Oczywicie, nie bez znaczenia pozostaje odpowiednie wsparcie techniczne oraz do
datkowe usugi wiadczone przez operatora, np. obsuga poczty przez WWW, pakiet
pomocnych skryptw, etc.
Jeeli tworzysz stron dla firmy, bezwzgldnie powiniene skorzysta z oferty patnej,
gdy tylko ona zapewni Ci odpowiednie poczucie bezpieczestwa oraz wiarygodno.
W przypadku gdy tworzysz strony czysto hobbystycznie, miao moesz skorzysta
z oferty darmowej. Pamitaj jednak, e usugi takie m og by pozbawione wsparcia
technicznego, co w przypadku awarii lub kopotw staje si duym problemem. Umiesz
czajc projekt na darmowym serwerze, akceptujesz regulamin tam obowizujcy i jeste
zobowizany do wykonania pewnych zalece waciciela. Dlatego zanim opublikujesz
stron, przeczytaj dokadnie, jakie masz prawa i obowizki.
Dalej zamieszczam kilka odnonikw do dobrych serwerw patnych oraz ich darmo
wych odpowiednikw. Mam nadziej, e dziki temu pomog Ci podj decyzj o wy
borze lokalizacji dla Twojej strony WWW.
Serwery patne:
http://www.progreso.pl
http://www.home.pl

Rozdzia 1. Podstawowe informacje

23

Serwery darmowe:
http://pages.google. com
http://republika.pl
http://www.prv.pl

V
Uwaga

Pamitaj, e moliwoci serwera mog znacznie pomc w tworzeniu strony WWW.


Jeeli serwer oferuje dostp do PHP, to Twoja strona moe zawiera wiele ciekawych
skryptw rozszerzajcych jej moliwoci (formularz, licznik, ksika goci, grupa
dyskusyjna czy wyszukiwarka). Poza tym m oesz korzysta z wygodnych rozwiza
typu CMS, ktre uatwiaj aktualizacj i prowadzenie strony.

Wasna domena
Na pocztku wyjani, czym jest domena i do czego jest ona nam potrzebna. Jak za
pewne si domylasz, dziaaniem tak rozbudowanej sieci, jak jest internet, musz rz
dzi pewne prawa i zasady. Jedno z nich dotyczy adresowania poszczeglnych miejsc.
Ma ono nastpujc posta: 213.180.130.200. Numer ten nosi nazw adresu IP. Za
pamitanie takiego adresu dla wielu z nas bywa czsto kopotliwe, w zwizku z czym
powstaa usuga pozwalajca dokona zamiany adresu IP na nazw zrozum ia dla
czowieka domen. Konwersja odbywa si automatycznie dziki specjalnym ser
werom DNS. Serwery te zaw ieraj spis numerw IP oraz przypisanych im domen.
W naszym przypadku odpowiednikiem podanego adresu IP jest http://onet.pl.
Do wyboru mamy kilkaset domen gwnych, w ktrych moemy rejestrowa swoje
adresy. W Polsce najpopularniejsze z nich to p l domena krajowa, com.pl, net.pl do
meny funkcjonalne oraz domeny regionalne skadajce si z nazwy miasta i przyrostka
kraju, np. katowice.pl.
List wszystkich domen funkcjonalnych i regionalnych obsugiwanych przez NASK
(i nie tylko) mona znale pod adresem http://www.dns.pl/dns-funk.html oraz http://
www.dns.pl/dns-regiony.html.
Nazwa domeny moe zawiera jedynie znaki alfabetu aciskiego, cyfry i znak m i
nus (-). Od niedawna jest moliwe stosowanie polskich znakw narodowych, ale
rozwizanie to jeszcze nie zyskao popularnoci i sprawia problemy w niektrych
przegldarkach. Niestety, nie mona uywa przerw w wieloczonowych nazwach,
a maksymalna liczba znakw to 63.
Posiadanie domeny wie si z dodatkowymi kosztami, ale w zamian daje adres, kt
ry jest niezaleny od usugodawcy. Zamy, e zdecydowaem si na konto w firmie
http://www.xyz.pl i korzystam z adresu, ktry firma daa mi w cenie wykupionej usu
gi; ma on posta http://www.danowski.xyz.pl. Jeeli zrezygnuj z usug firmy XYZ na
rzecz innej, np. ZYX, to niestety strac poprzedni adres. Jedynym sposobem na unik
nicie takiej sytuacji jest wasny adres domena.

Tworzenie stron WWW w praktyce

24

Przy obecnej konkurencji niemal kada firma poredniczy w naszym imieniu w pro
cesie rejestracji domeny, dlatego nie bd tutaj omawia dokadnie wszystkich proce
dur z tym zwizanych. Proponuj aby zapozna si z ofert swojego dostawcy lub
zerkn do dodatku znajdujcego si na kocu niniejszej ksiki.

%
Uwaga

W asna dom ena daje Ci w olno. W kadej chwili m oesz zmieni usugodawc
i delegacj domeny. Wszystkie dokumenty i wizytwki zawsze bd aktualne, a Ty
moesz zmienia usugodawc nawet co rok.

Rozdzia 2.

Jzyk XHTML i HTML


sprawc caego
zamieszania
Strony, ktre ogldasz niemal kadego dnia podczas godzin spdzonych w sieci, s wy
nikiem dziaania jzyka HTML lub jego odmian. Suy on do prezentowania tekstu
i grafiki w postaci niezalenej od platform y sprztowej i systemowej. Dlatego prac
nad stron WWW musimy rozpocz od zdobycia kilku podstawowych wiadomoci.
Strona WWW, ktr ogldasz, jest wynikiem odpowiedniej interpretacji zestawu po
lece np. jzyka HTML przez przegldark. Prace na jzykiem HTML rozpo
czto kilkanacie lat temu, a kontrol nad ich postpem sprawowao konsorcjum W3C
http://www.w3.org. Pierwsza oficjalna specyfikacja jzyka zostaa ostatecznie za
twierdzona w 1994 roku. Oferowaa ona jednak zaledwie namiastk tego, co znajduje
si w stosowanym obecnie jzyku HTM L 4.01 lub jego bezporednim nastpcy
XHTML 1.0. Dlatego te prace trway nadal i w 1996 roku ukazaa si kolejna ofi
cjalna specyfikacja, oznaczona numerem 3.2. W tej formie jzyk zosta wzbogacony
0 wiele nowych moliwoci, a jed n z najwaniejszych byy tabele, ktre zrewolucjo
nizoway stron WWW. Nastpne lata przyniosy kolejn specyfikacj i w 1998 roku
zostaa zatwierdzona wersja oznaczona numerem 4.0, a w 1999 roku pojawia si wersja
poprawiona 4.01.
Prac nad jzykiem HTML zostay przerwane na wersji 4.01 i rozpoczto tworzenie
kolejnego jzyka opisu strony, lepiej dopasowanego do obecnych realiw. W ten spo
sb powsta XHTML 1.0 oraz 1.1. Najwaniejsze rnice pomidzy jzykiem HTML
1 XHTML dotycz oddzielenia formatowania od struktury strony. Struktura jest two
rzona za pomoc polece jzyka XHTML, a formatowaniem zajmuj si wycznie ka
skadowe arkusze stylw.
W tym opracowaniu bd wykorzystywa specyfikacj XHTML 1.0, w ktrej wpro
wadzono wiele zmian, a jed n z najwaniejszych jest oddzielenie elementw forma
tujcych od znacznikw grupujcych tekst w bloki, listy czy te tabele. Oczywicie,

26

Tworzenie stron WWW w praktyce

osoby chcce budowa swoje strony przy wykorzystaniu samego jzyka HTML rw
nie znajd tu co dla siebie, poniewa XHTML i HTML s do siebie bardzo podobne.
Poniej zamieciem wykaz odnonikw do specyfikacji najnowszych wersji jzykw
XHTML, HTML i narzdzia sucego do sprawdzania poprawnoci kodu walidatora.
http://www.w3.org/TR/html4 specyfikacja HTML 4.01
http://www.w3.org/TRJxhtmll 1 specyfikacja XHTML 1.1
http://validator.w3.org walidator
Pliki zawierajce odpowiednie polecenia jzyka XHTML (HTML) znaczniki s
plikami tekstowymi i m og korzysta z rozszerze przedstawionych w tabeli 2.1.
Tabela 2.1. Podstawowe rozszerzenia plikw strony WWW
.htm

p lik te ksto w y zawierajcy kod HTML, czasami te kod JavaScript

.html

plik tekstowy zawierajcy kod HTML, czasami te kod JavaScript

.shtml

plik tekstowy zawierajcy kod HTML oraz instrukcje SSI pliki takie s przetwarzane
przez serwer przed wysaniem do przegldarki

php

pliki tekstowe zawierajce kod HTML poczony ze skryptami PHP4

,php3

pliki tekstowe zawierajce kod HTML poczony ze skryptami PHP3

.cgi

pliki tekstowe zawierajce skrypty napisane w Perlu bd Shellu czsto poczone


z kodem HTML

pl

pliki tekstowe zawierajce skrypty napisane w Perlu czsto poczone z kodem HTML

.CSS

pliki tekstowe zawierajce zewntrzne arkusze stylw CSS

pliki tekstowe zawierajce skrypty napisane w jzyku JavaScript

Jeeli otworzysz za pom oc przegldarki dowoln stron WWW, a nastpnie skorzy


stasz z opcji podgldu rda dokumentu (w przegldarce MS Internet Explorer wy
starczy, e klikniesz prawym przyciskiem myszy kod strony i z podrcznego menuwybierzesz opcj Poka rdo), to zobaczysz zawarto dokumentu. Na rysunku 2.1
przedstawiam fragment kodu rdowego przykadowej strony.
Z tego prostego przykadu wynika jeden wany wniosek do tworzenia stron WWW
nie jest potrzebny aden wymylny program i wystarczy zwyczajny tekstowy edytor
(np. systemowy Notatnik). Oczywicie, takie narzdzie jest mao funkcjonalne i wymaga
doskonaej znajom oci polece jzyka XHTM L oraz jego konstrukcji. W zwizku
z tym na samym pocztku odrzucamy prac w Notatniku.
Przy tworzeniu stron bd stara si zachci Ci do tego, by uywa CSS (kaskado
wych arkuszy stylw) do kontrolowania wygldu strony. Style od dawna s dobrze
znane uytkownikom edytorw tekstu i zostay z duym entuzjazmem przyjte w wiat
ku webmasterw. Dziki CSS projektanci dostali do rk potne narzdzie, pozwalajce
okrela wygld niemal kadego elementu strony. Obecny XHTML (HTML) zawiera
jedynie zestaw znacznikw odpowiedzialnych za grupowanie tekstu w bloki, tworzenie
tabel, list, ramek, osadzanie grafiki, natomiast cay proces formatowania i pozycjono
wania wszystkich elementw zosta przejty przez CSS kaskadowe arkusze stylw.
Rozwizanie takie jest bardzo wygodne i daje ogromne moliwoci.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

27

<' O C T Y P E html P U B L I C " - / / S 3 C / / B T D X H T M L 1 . 0 S t r i c t / Z E N "


"ht t p : / / v v v .v3. o r g / T R / x h fcro11 / D T D / x h t m l l - s t r i c t . d t d " >
Chtml

x m l n s = " h t t p :/ / w w w . w 3 .o r g / 1 9 ' 9 9 / x h t m l w

x m l :l a n g = " p l

lang="pl">

<head>
<tite>8artosz
<meta

<meta

n a m e * "keywords

informatyka,

DanowsJci</title>

http-equiv="Content-Type"

ksika,

content="Bartosz
helion,

cdrinfo,"

cmeta

na m e * " author"

cme t a

n a m e = p u b l i s h e r "

<meta

name*"distribution"

cmeta

name=" g e n e r a t o r "

name="robots"

cmeta

name="revisit-after"

<link

rel="styles!ieet"

<link

rel="alternate"

content="pl"

informatyczna,

ksiki,

all"

/>

/>

/>
2.0.3"

/>

leave

< !

t his

for stats

>

/>

/>

content="5

days"

/>

/>

href="/wydruk.css"

type="text/css"

type="application/rss+xml"

rel="pingback"

/>

h r e f = " h t t p : / / d a n o w s k i .p i / w p - c o n t e n t / t h e m e s / d a n o w s k i / s t y l e . c s s "

href*"ht t p : / / d a n o wski.pl/feed/ "


d i n k

Danowski"

content*"global"

content*"follow,

media="screen"

literatura

B a r c z e n t e w i c z

content*"WordPress

name*"language"

rel="Stylesheet"

ch a rset=UTF-8"

/>

c o n t e n t * "Bartosz

<meta

type="text/c33"

Danowski,

content="Mikolaj

<meta

<link

content*"text/html;

m edi a * " p r i n t "

t i t l e * "Bartosz

/>

Danowski

RSS

Feed"

/>

href="htt p : / / d a n o w s ki.pl / x m l r p c . p h p "

/>

<script

src="http: / /danowski .pi/js/prototype. js"

t y p e = " t e x t / j a vascript " x / s o r i p t >

<script

s r c = " h t t p :/ / d a n o w s k i . p i / j s / s c r i p t a c u l o u s . j s ? l o a d = e f f e c t s "

type** text/javascript " x / scrip t>


<script

s r c = " h t t p : / / d a n o w s k i . p i / j 9 / g e n e r a l .j s "

t y p e = " t e x t / j a v a s c r i p t " x / s c r i p t >

Rysunek 2.1. Fragment przykadowego kodu XHTM L

Podobnie jak jzyk XHTM L (HTML), rwnie kaskadowe arkusze stylw s stan
daryzowane przez konsorcjum W 3C, a odpow iednie specyfikacje znajduj si na
stronie WWW:
http://www.w3.org/TR/REC-CSSl specyfikacja CSS1
http://www.w3.org/TR/REC-CSS2 specyfikacja CSS2
http://www.w3.org/TR/CSS21 specyfikacja CSS2.1
http://jigsaw. w3. org/css-validator walidator
Ksika wykorzystuje informacje zawarte w specyfikacjach CSS1, CSS2 oraz CSS2.1
i z oczywistych wzgldw nie zawiera opisu wszystkich moliwoci (byoby to
po prostu niemoliwe). Postanowiem skupi si jedynie na elementach uywanych
w codziennej pracy.

V
Uwaga

Pamitaj, e tworzenie stron WWW zgodnych ze standardami konsorcjum W3C po


zwoli Ci unikn licznych problemw zwizanych z niepoprawnym dziaaniem strony
w rnych przegldarkach. Oczywicie, nie bdziesz mia stu procent gwarancji, e
strona poprawnie zadziaa, ale bdzie atwiej i prociej szuka i poprawia ewentu
alne rnice w interpretacji poszczeglnych polece przez rne przegldarki.

28

Tworzenie stron WWW w praktyce

Znacznik i jego konstrukcja


Jzyk XHTM L skada si z szeregu znacznikw, ktrych forma jest cile okrelona
przez wspomnian wczeniej specyfikacj. Kady znacznik ma tak zwany znacznik otwie
rajcy, ktry wystpuje w parze ze znacznikiem zamykajcym. Oto schemat zapisu
znacznika:
<znacznik_otwierajacy atrybut> </znacznik_zawykajcy>

W praktyce wyglda to mniej wicej tak:


<p> </p>

Znacznik otwierajcy moe zawiera atrybut, ktry umieszczony jest wewntrz na


w iasu ktowego. A trybut niem al zawsze je st opcjonalny. Przykad znacznika wraz
z atrybutem zamieciem poniej.
<p id="identyfika to r"> </p>

Uwaga

W przypadku jzyka HTML znaczniki i atrybuty moemy wpisywa, uywajc zarw


no duych, jak i maych liter. Wyjtkiem s te elementy, ktre zawieraj odwoania
do innych plikw; tu nazwa pliku musi by pisana dokadnie tak samo, jak wyglda
w rzeczywistoci.
Jeeli jednak zdecydujesz si na korzystanie z jzyka XHTML, m usisz pamita,
e w tym przypadku nazwy znacznikw oraz atrybuty wpisujemy, uywajc zawsze
maych liter.
W przypadku atrybutw wartoci wystpujce po znaku rwnoci naley zawsze
zapisywa, uywajc cudzysowu. Dla dokumentw korzystajcych z jzyka HTML
cudzysw mona pomin.

Znaczniki zamykajce nigdy nie zawieraj dodatkowych parametrw. Wspomniaem ju


o tym, e znaczniki prawie zawsze wystpuj w parach znacznik otwierajcy i za
mykajcy, czyli, jak atwo si domyli, od tej zasady istniej wyjtki. Jest ich nie.wiele, ale s. Poniej w tabeli 2.2 wypisaem najwaniejsze pojedyncze znaczniki wraz
z odpowiedni form zapisu dla jzyka HTML i XHTML.
Tabela 2.2. Pojedyncze znaczniki zapis zgodny z HTML i XHTM L
HTML

XHTML

<br>

<br />

<hr>

<hr />

<img>

<img />

<meta>

<meta />

<1 i nk>

< lin k />

<base>

<base />

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

29

Jeeli tworzysz stron zgodn ze specyfikacj HTML, to wymienione powyej znacz


niki nie musz by zamykane. Natomiast w przypadku witryny zgodnej z XHTML
konieczne jest zamknicie znacznikw zgodnie z przykadem. Zamknicie wszystkich
znacznikw je st warunkiem niezbdnym do uzyskania strony WWW o poprawnym
kodzie XHTML.
Bardzo wan spraw jest umieszczenie spacji wewntrz znacznika. Nie wstawiaj jed
nak zbdnych spacji, gdy tylko niepotrzebnie zwikszysz rozmiar pliku. Poniej przed
stawiam przykad poprawnie zapisanego znacznika.
* <znacznik_otwierajacy at rybut="warto_atrybutu"></znacznik_zamykajcy>

Zwr uwag, e spacja znajduje si jedynie midzy nazw znacznika i atrybutem. Nie
ma spacji po nawiasie otwierajcym i przed zamykajcym nawiasem ktowym.

Podstawowe rnice
pomidzy HTML i XHTML
Jzyk HTML pojawi si jako pierwszy i doczeka si kilku specyfikacji oraz prze
szed wiele zmian od chwili pojawienia si. Natomiast XHTML jest nowym wciele
niem HTML, ktrego rozwijanie zakoczono na wersji 4.01.
XHTML przej wikszo elementw ze swojego starszego brata jzyka HTML.
Dlatego znajc HTML, bez wikszych problemw poradzisz sobie z przygotowaniem
dokumentu zgodnego ze specyfikacj XHTML. Naley tylko pamita o kilku kluczo
wych zmianach w skadni jzyka oraz usuniciu niektrych znacznikw i atrybutw.

V
Uwaga

Zapamitaj, e stosujc si do wikszoci zalece specyfikacji, moesz tworzy stro


ny w czystym jzyku HTML i bd one poprawnie obsugiwane przez wikszo prze
gldarek. W dalszej czci ksiki bd stosowa si do wymogw jzyka XHTML.

Zasada 1. Nigdy nie krzyuj znacznikw


Pierwsz i jed n z najwaniejszych zasad obowizujcych podczas tworzenia stron
WWW jest odpowiednie zagniedanie znacznikw. Innymi sowy, chodzi o to, aby
unika krzyowania znacznikw w kodzie strony. Przyjrzyj si poniszemu przykado
wi, ktry prezentuje skrzyowane znaczniki.
<p>Przyk?ad bloku tekstu ze <em>skrzyowanymi znaczni kami</p></em>

Teraz przykad, w ktrym znaczniki zostay prawidowo zagniedone.


<p>Przykad bloku tekstu ze <em>skrzyowanymi znacznikami</em></p>

30

Tworzenie stron WWW w praktyce

Zasada 2. Zawsze zamykaj wszystkie znaczniki


N astpn bardzo w an regu, o ktrej naley pamita, budujc stron WWW na
podstawie jzyka XHTML, jest bezwzgldne zamykanie kadego znacznika. Sprawa
jest prosta i oczywista w przypadku wikszoci znacznikw, gdy znaczniki zawsze
wystpuj w parze: znacznik otwierajcy i znacznik zamykajcy.
<p>Przykad bloku tekstu</p>

Problemy m og si zacz w przypadku tych elementw, ktre w specyfikacji jzyka


HTML nie miay przewidzianych znacznikw zamykajcych. Mam tutaj na myli na
stpujce znaczniki:
<br>,

<hr>,
<meta>,
<img>.

Na szczcie w specyfikacji XHTML znajdziemy rozwizanie tego problemu. Wystar


czy, e na kocu znacznika przez znakiem > dodamy /. Oto przykad:
<br />,
<hr />,

<meta />,
<img />.

Wane jest, aby bezporednio przed znakiem / doda spacj. Brak spacji moe powo
dowa nieprawidowe dziaanie strony WWW w niektrych przegldarkach, ktre sa
biej sobie radz z obsug jzyka XHTML.

Zasada 3. Wpisujc znaczniki i atrybuty,


zawsze uywaj maych liter
Tworzc kod strony, naley pamita o tym, e wszystkie znaczniki oraz ich atrybuty
m usz by pisane od maej litery.
<p Oass-'gl<Mny">Przykadowy blok tekstu z wasn klas<!p>

Zasada 4. Uywaj cudzysoww


dla wszystkich atrybutw
Podczas okrelania atrybutw dla znacznikw zawsze uywaj cudzysoww. Odpo
wiedni przykad znajduje si poniej.
<table border=T">

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

------------------------------------------------------------------------------

31

Zasada 5. Przypisuj wartoci dla pustych atrybutw


Niektre znaczniki w jzyku HTML m aj puste atrybuty. Dokadniej mwic, chodzi
o takie rozwizanie, gdy atrybut sam w sobie wymusza jakie dziaanie i nie wymaga
okrelania dodatkowych wartoci. Przykadem poczenia znacznika i pustego atrybutu
moe by <hr noshade>. Prawidowy (zgodny ze specyfikacj XHTML) zapis tego
znacznika wida poniej.
<hr noshade="noshade" />

Jak widzisz, nazwa pustego atrybutu zostaa powtrzona w cudzysowie.

Zasada 6. Uwaaj ze znakami specjalnymi


wskryptach
Tworzc kod zgodny z XHTML, zam iast znakw specjalnych, np. < czy &, uywaj
encji, np. &11; i &amp;.

Struktura dokumentu
Niezalenie od tego, czy korzystamy z HTML, czy XHTML, kady dokument posia
da cile okrelony szkielet, ktry nie zmienia si w zalenoci od zawartoci strony.
Oczywicie, szkielet dla strony zbudowanej w HTML rni si od szkieletu wykorzy
stywanego w stronach tworzonych w XHTML.

Okrelamy zgodno ze specyfikacj


W przypadku strony wykorzystujcej jzyk XHTML pierwszym wpisem jest:
<?xml version="1.0" encoding="iso-8859-2"?>

Element ten popularnie jest nazywany prologiem i odpowiada za okrelenie wersji j


zyka XML oraz sposobu kodowania znakw. Prawidowa forma wpisu musi wyglda
tak, jak na powyszym przykadzie, i jest niezmienna. Oczywicie, w przypadku ko
rzystania z jzyka HTML prolog jest zbdny i nie stosuje si go.
Pierwszym wsplnym i obowizkowym dla HTML i XHTML elementem szkie
letu strony jest wpis okrelajcy rodzaj wykorzystywanego do jej stworzenia jzyka.
W przypadku strony wykorzystujcej jzyk HTML pierwszy wpis moe przyjmowa
nastpujc posta:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
''h ttp : //www.w3. org/TR/html 4 /s tri c t . dtd">

Tworzenie stron WWW w praktyce

32

Wiersz ten okrela, i nasza strona zostaa zakodowana przy uyciu jzyka HTML w wer
sji 4.01 i nie zawiera adnych elem entw z wersji poprzednich. Informuje on rwnie
o tym, e strona nie jest oparta na ramkach.
Kolejny moliwy wpis jest widoczny poniej i informuje, e uylimy jzyka HTML 4.01
w wersji przejciowej, czyli takiej, ktra zawiera rwnie znaczniki z poprzednich
wersji jzyka HTML, np. 3.2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/1oose.dtd">
Dla stron opartych na ramkach i HTML w wersji 4.01 przewidziano nastpujcy wpis:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http:/ /www.w3.org/TR/html4/frameset.dtd">
W przypadku kodu strony wykorzystujcej jzyk XHTML deklaracja DOCTYPE w ygl
da nieco inaczej.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-stri c t .dtd">
Pierwszy m oliw y wpis dotyczy sytuacji, w ktrej przygotowalimy stron w ykorzy
stujc w ycznie jzyk XHTM L i cile trzymamy si zalece specyfikacji. Innymi
sowy, tego typu deklaracji uywamy w stronach o najczystszym kodzie. Naley pa
mita, e gdy korzystamy z powyszej deklaracji, w kodzie strony nie moemy stoso
wa ramek.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional,dtd">
Druga wersja deklaracji DOCTYPE dotyczy sytuacji, w ktrej wykorzystujemy jzyk
XHTML, ale nie trzymamy si cile zalece specyfikacji. Dokadniej mwic, kod za
wiera elementy jzyka XHTML oraz HTML. Korzystanie z tej formy nie jest najlepszym
rozwizaniem, cho w praktyce okazuje si, e dziki agodniejszemu spojrzeniu na za
lecenia specyfikacji znacznie prociej zbudowa dziaajc stron zgodn z XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http:/ /www.w3.org/TR/xhtmll/DTD/xhtml1-frameset.dtd">
Ostatni wariant nagwka DOCTYPE dopuszcza stosowanie ramek. W pozostaych zale
ceniach niczym nie rni si od deklaracji DOCTYPE w wersji Tran sitio n a l.

Ramy dokumentu XHTML


Pierw szym o b o w i z k o w y m elem entem jzyka HTML jest znacznik <html></html>,
ktry okrela ramy naszego dokumentu. N aley w ic ucili, e to, co znajduje si
pomidzy wspomnianymi ramami, jest naszym dokumentem HTML.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

33

W przypadku strony budowanej w jzyku HTML znacznik <html></html> nigdy nie za


wiera dodatkowych atrybutw. Natomiast strona tworzona przy wykorzystaniu XHTML
wymaga, aby otwierajcy znacznik <html> obowizkowo zapisa w postaci widocz
nej poniej.
<html xmlns="http://www.w3.org/1999/xhtml" xml: Tang="pl" 1ang="pl">

Dodatkowe atrybuty su do okrelania znaczenia poszczeglnych znacznikw wy


korzystywanych w kodzie strony.

Nagwek strony
Bezporednio po otw ierajcym znaczniku <html> pow inien si znale znacznik
<head></head>. Element ten rwnie nie zaw iera adnych atrybutw i w ystpuje
w parze ze znacznikiem zamykajcym.
<?xml version="1.0" encoding="iso-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"h ttp ://www.w3.org/TR/xhtmll/DTD/xhtml1-stri c t .dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml: 1ang="pl" 1ang="pl">
<head>
</head>

</html>

Pomidzy znacznikami <head></head> znajduje si kilka wanych dla konstrukcji caej


strony elementw. Poszczeglne wpisy, ktre m og znale si w nagwku strony
opisaem w kilku kolejnych podrozdziaach.

Strona kodowa
Zaczn od najwaniejszego elementu, ktry jest odpowiedzialny za stron kodow
tworzonego dokumentu. Jzyk HTML i XHTM L jako ponadsystemowy nonik in
formacji musi mie moliwo obsugi rnych jzykw, a co za tym idzie, rnych
znakw narodowych. W zwizku z tym zostay okrelone rne strony kodowe dla da
nych jzykw i czci wiata. Dla naszego kraju odpowiednim standardem jest strona
kodowa ISO 8859-2. Jest to strona kodowa dziaajca na wszystkich platformach
systemowych: MS Windows, Unix, Linux, Mac OS i wielu innych, dlatego jako wia
domy projektant stron musisz stosowa si do tej normy. Kto moe zauway, e prze
cie wystarczy wpisa polskie znaki w Notatniku, a i tak wszystko zadziaa. Oczywicie,
nie mona odrzuci takiego pomysu, ale naley zwrci uwag, e tak zakodowane
polskie znaki narodowe m og sprawia problem y podczas wywietlania na bardziej
oryginalnych platformach, np. w telefonach komrkowych.
By uzyska popraw n stron kodow, mamy kilka moliw oci. Pierwsza to edytor
z wbudowanym odpowiednim moduem do konwersji znakw w locie, np. uywany
przez nas kED. Druga moliwo to wstawianie polskich znakw w sposb tradycyjny,
czyli w formacie W indows 1250, a nastpnie konwertowanie za pom oc specjalnych
programw konwerterw, np. Gegka XP (znajduje si na pycie CD).

34

Tworzenie stron WWW w praktyce

Uwaga

Konwersja strony kodowej za pom oc programu Gegka XP zostaa dokadnie


opisana w dodatku do niniejszej ksiki.

W zalenoci od tego, z jakiej strony kodowej korzystamy, w nagwku dokumentu


naley wstawi odpowiedni znacznik. Dla strony kodowej ISO 8859-2 odpowiedni
wpis ma posta:
<meta http-equiv="Content-Type" content="text/htm l: charset=iso-8859-2" />

Natomiast dla strony kodowej Windows 1250 odpowiedni wpis wyglda tak:
<meta http-equiv="Content-Type" content="text/htm l; charset=windows-1250" />

W tej ksice bd uywa strony kodowej zgodnej z norm ISO 8859-2 i Tobie rw
nie radz skorzysta z tego sposobu kodowania polskich znakw.
Poza opisanymi powyej standardami kodowania polskich znakw istnieje jeszcze jedno
rozwizanie, dziki ktremu moemy tworzy dokumenty uniwersalne. cilej rzecz
biorc, chodzi o to, e podczas tworzenia strony, na ktrej zamieszczono dwa lub wicej
jzykw, nie ma moliwoci jednoczesnego poprawnego wywietlenia znakw waci
wych dla danego kraju. Rozwizaniem takiego problemu jest stosowanie Unikodu (ory
ginalna nazwa to Unicode http://www.unicode.org).
Doskonao tego rozwizania polega na przypisaniu unikatowego numeru wszystkim
znakom charakterystycznym dla rnych alfabetw, np. aciskiego czy cyrylicy. Poza
tym w Unikodzie uwzgldniono rne symbole, np. , O.
Obsuga Unikodu zostaa wprowadzona w gwnych przegldarkach, poczynajc od
numeru 4; dzi jest uwzgldniana przez wszystkie liczce si przegldarki.
Moemy wyrni trzy odmiany Unikodu: UTF-7, UTF-8 oraz UTF-16. Zrnicowa
nie zostao wprowadzone w celu umoliwienia obsugi tego standardu na rnych plat
formach i w rnych programach. Rnice pomidzy tymi typami Unikodu sprowa
dzaj si do odmiennego zapisu znakw (format 7-bitowy, 8-bitowy oraz 16-bitowy).
Uzyskanie polskich znakw zgodnych z kodowaniem UTF-8 jest moliwe dziki edyto
rowi kED lub za pom oc konwertera Gegka XP.
Odpowiednie polecenie, ktre wstawisz w znaczniku <head></head>, ma nastpuj
c posta:
<meta http-equiv="Corvtent-Type" content="text/htm l; charset=utf-8">

Struktura dokum entu XHTM L (HTM L) po dodaniu znacznika odpowiedzialnego za


definicj strony kodowej wyglda nastpujco:
<?xml version="1.0' encoding="iso-8859-2'?>
< !00CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"h ttp : / /www.w3.org/TR/xhtml1/DTD/xhtml 1- s tr i c t .dtd">
<html xmlns-"http://www.w3.org/1999/xhtml" xml: lang="pl" lang="pl">

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

35

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

</head>

Tytu dokumentu
Nastpnym znacznikiem, ktry zalicza si do grona staych elementw strony WWW,
jest < title > < /title > . Odpowiada on za ustawienie tytuu strony widocznego na pasku
tytuu okna przegldarki (rysunek 2.2). Znacznik ten powinien znajdowa si pomidzy
<head></head>.
<?xm1 version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC ."-//W3C//DTD XHTML 1.0 S trict//E N "
"http://www.w3.org/TR/xhtmll/DTD/xhtni1 l- s tr ic t.d td " >
<html,xmlns="http://www.w3.org/1999/xhtml" xml : 1ang="pl" 1ang="pl">
<head>
<meta http-equiv="Content-Type" content="text/htm l: charset=iso-8859-2" />
<title>Bartosz Danowski</title>

</head>
</html>
Rysunek 2.2.
Tytu strony

Bartosz Danowskr - MoziSla H refox

Tytu jest jedynym elementem strony, ktry znajduje si w nagwku dokumentu i jest
widoczny bez koniecznoci analizy zawartoci kodu strony.

Sowa kluczowe i opis strony


We wstpie zaoyem, e korzystasz ju z sieci, dlatego oczywisty jest fakt, e kiedy
wyszukiwae interesujce Ci strony za pom oc specjalnych wyszukiwarek lub ka
talogw internetowych. W zwizku z tym, e nie mam pewnoci, czy wiesz, skd
w uywanej przez Ciebie wyszukiwarce znalazy si strony, postaram si wprowadzi
Ci w to ciekawe zagadnienie. Oczywicie, pod koniec ksiki wrcimy do tego tematu,
gdy bdziemy dodawa stron do wyszukiwarek i promowa j w sieci.
Ot strony trafiaj do serwisw indeksujcych w do prosty sposb; autor zgasza
stron bd jest ona odnajdywana na podstawie odnonikw z innych popularnych wi
tryn, a nastpnie wyszukiwarka wysya specjalnego robota, ktry sprawdza stron i dodaje
j do ogromnej bazy danych. To bardzo skrcona i uproszczona metoda dziaania.
Robot sprawdza w kodzie strony kilka elementw i na tej podstawie dodaje j do bazy.
Pierwszym elementem jest znacznik < title > < /title > , o ktrym ju wspominaem nieco
wczeniej. Nastpnym elementem s sowa kluczowe (ang. keywords) witryny oraz opis
(ang. description) strony. Poniej zamieszczam odpowiednie znaczniki zawierajce sowa
kluczowe oraz opis strony.

36

Tworzenie stron WWW w praktyce

Konstrukcja znacznika jest stosunkowo prosta, pomimo e skada si on z kilku ele


mentw.
<meta name= keywords content= sowa, kluczowe, rozdzielone, przecinkami" />
<meta name="description" content="krtki opis strony" />

V
Uwaga

Znacznik <meta> moe przybiera przerne formy, o ktrych wspomn na nastp


nych stronach. W przypadku jzyka XHTML znacznik wymaga zamknicia w nastpu
jcy sposb: <meta />.

Zwr uwag na fakt, e sowa kluczowe zostay oddzielone od siebie za pom oc


przecinkw i m og skada si z kilku wyrazw. W przypadku opisu strony zawiera
on jedno, dwa zdania na temat zawartoci strony, ktre pojawi si jako wynik szuka
nia. Na podstawie tych zda internauta najczciej podejmuje decyzj o odwiedzeniu
strony, ktr znalaz za pomoc wyszukiwarki.
Odpowiednie przygotowanie tytuu, sw kluczowych oraz opisu ma szczeglne zna
czenie dla odpowiedniej indeksacji strony przez wyszukiwarki oraz tego, jak pozycj
zajmie ona w bazie danych. W zwizku z tym na kocu ksiki zamieciem specjal
ny rozdzia, w ktrym znajd si wszystkie niezbdne informacje zwizane z odpo
wiednim przygotowaniem strony do indeksacji w bazach sieciowych wyszukiwarek.
Na razie jednak wystarcz Ci dane na temat skadni tych elementw.
Przyjrzyjmy si teraz strukturze kodu strony uzupenionej o sowa kluczowe i opis.
<?xml version="1.0" encoding="iso-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"http://www.w3.org/TR/xhtm ll/DTD/xhtm ll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: la n g -"p l" lang pl">
<head>
<meta http-equiv="Content-Type" content="text/htm l; charset-iso-8859-2" />
<meta name="keywords" content "literatura informatyczna. Bartosz Danowski, ksiki" />
<meta name="descriptio' content"Bartosz Danowski - strona autora licznych poradnikw
informatycznych. Informacje o ksikach, opinie czytelnikw, dodatkowe materiay
i przykady." />

<title>Bartosz Danowski</title>
</head>
</html>

Inne elementy skadowe nagwka strony


Nagwek <head></head> moe zawiera jeszcze kilka innych znacznikw zwizanych
z okreleniem waciwoci strony lub speniajcych funkcj informacyjn. Tak si
skada, e elementy te s zwizane ze znacznikiem <meta />.
<meta name="author" content="Bartosz Danowski" />

Podany wpis ma charakter informacyjny i dziki niemu moemy w kodzie zamieci


informacje o autorze strony. Dane te nie s widoczne na zewntrz.
<meta name="copyright" content="Bartosz Danowski" />

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

37

Nastpny element mogcy wchodzi w skad nagwka <head></head> zawiera infor


macje o prawach autorskich. Rwnie w tym przypadku wpisy te nie s widoczne na
zewntrz i m aj charakter typowo informacyjny.
<meta name="generator" content="kED" />

Wewntrz strony moemy rwnie zamieci informacje na temat narzdzia, za pomoc


ktrego zosta wykonany dany dokument. Z tego znacznika bardzo chtnie korzystaj
autorzy edytorw i w ten sposb reklam uj swj produkt. Podobnie jak elementy opi
sane poprzednio, rwnie i tym razem wpis ma charakter informacyjny i nie jest widocz
ny na stronie.
<meta name"language" content="pl'' />

Kolejny wpis informuje o jzyku, w jakim zostaa wykonana strona.


Opisany powyej rodzaj znacznika <meta name=" " content" " /> ma charakter ty
powo informacyjny i specyfikacja dopuszcza, by autor strony sam tworzy dodatkowe
wpisy informacyjne. W zwizku z tym moemy uy takiej konstrukcji:
<meta name="konwerter" content=''Gegka XP" />

Oczywicie, to tylko przykad i jeeli uznasz, e jest Ci potrzebna jeszcze jaka in


formacja, to moesz wymyli odpowiednie sowo i wstawi je do odpowiedniego znacz
nika. Pamitaj jednak, e bardzo wane jest, by zachowa ogln konstrukcj znacznika.
Nazwa powinna zosta wpisana do atrybutu name=" ", natom iast warto musi by
umieszczona w atrybucie content" ".
Znacznik <meta /> moe wystpowa z jeszcze jednym atrybutem, h ttp -e qu iv, ktry
zawiera informacje bdce nagwkiem HTTP:
<meta http-equiv=" " content" " />

Dla atrybutu http -e qu iv przewidziano kilka wartoci, i tak:


<meta http-equiv="refresh" content="x" />

spowoduje automatyczne odwieanie dokumentu co x sekund. Polecenie to jest szcze


glnie przydatne na stronach, ktre s bardzo czsto aktualizowane i autorowi zaley, by
odwiedzajcy zawsze widzia aktualne dane, a nie zawarto przechowywan w plikach
tymczasowych przegldarki na dysku. Polecenie to moe rwnie przybra form:
<meta http-equiv="refresh" content="x; u rl^ h ttp :/ /www.adres.pl" />

Spowoduje ono automatyczne przeniesienie odwiedzajcego po upywie x sekund pod


nowy adres zadeklarowany w sekcji URL.
O przydatnoci tego polecenia nie musz chyba nikogo przekonywa. Wiersz ten roz
wizuje problem ze zm ian adresu i utrat odwiedzajcych wystarczy pod starym
adresem umieci plik index.html z deklaracj http-equiv="refresh" i okrelonym no
wym adresem, pod ktrym umiecilimy nasz stron. Kady, kto wejdzie pod stary
adres, zostanie automatycznie przekierowany pod jego aktualn wersj.

38

Tworzenie stron WWW w praktyce

Polecenie <meta http-equiv=" " /> moe jeszcze przybra nastpujce formy:
<meta http-equiv="reply-to" content="adres autora" />

definiuje adres autora witryny,


<meta http-equiv="creation-date" content="data wykonania" />

okrela, kiedy nasza strona zostaa wykonana,


<meta http-equiv="content-type" content="text/htm l: charset=iso-8859-2" />

wskazuje stron kodow; zostao to ju omwione.


Warto wiedzie, e cz serwisw indeksujcych korzysta z <meta name="robots"
content="" />, ktry okrela, czy dana strona powinna by indeksowana oraz czy linki
na niej zawarte rwnie m aj by dodane do bazy serwisu katalogujcego. Przy zasto
sowaniu polecenia robots atrybut content zawiera nastpujce dyrektywy informujce
o dopuszczonych operacjach dla naszej strony:
i ndex strona powinna by zaindeksowana,
noi ndex strona nie powinna by zaindeksowana,
f o l i ow linki z tej strony powinny by zaindeksowane,
nofol Iow linki z tej strony nie powinny by zaindeksowane,

al 1 rwna si i ndex. fo l 1ow warto domylna,


none rwna si noi ndex, nofol 1ow.

Dalej przedstawiam przykad zastosowania omawianego polecenia dla strony, ktra


ma by indeksowana, natomiast odnoniki zawarte na niej maj zosta pominite:
<meta name="robots" content="index.nofolIow" />

Kolejnym znacznikiem wystpujcym w nagwku strony jest polecenie <base />,


okrelajce bazowy adres dla dokumentu i wszystkich odnonikw znajdujcych si
w jego treci.
<base bref="h t t p : / I www.adres.pl" />

Przydatno <base /> doskonale wida przy przenoszeniu dokumentw do innych ka


talogw. Jak si pniej dowiemy, odsyacze m aj rne formy, dlatego przy takiej
operacji nietrudno o zerwanie odnonikw, a pamitanie przy przenoszeniu o zmianie
kadego z nich jest kopotliwe.
Ostatnim poleceniem wchodzcym w skad znacznika <head> jest < lin k />, ktry
w naszym przypadku bdzie odpowiedzialny za doczanie zewntrznego arkusza
stylw. Element <1 i nk /> ma nastpujc konstrukcj:
<1 ink rel="sty1esheet" href=glowny.css" type="text/css" />

Za pom oc <1 i nk /> moemy rwnie podczy zewntrzny plik zawierajcy Java
Script. O przydatnoci tego rozwizania nie musz chyba nikomu mwi. Wyobra sobie
tak sytuacj. Zbudowalimy witryn zawierajc na kadej ze stron menu napisane

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

39

w JavaScript. Normalnie kady z plikw musiaby zawiera to samo menu i za kadym


razem jego zawarto byaby na nowo pobierana. Zastpienie tego skryptu wewntrz
pliku XHTML (HTM L) znacznikiem < link /> oraz umieszczenie samego skryptu
w oddzielnym pliku z rozszerzeniem skrypt.js pozwala nam raz zaadowa wspomniany
skrypt bezporednio z sieci, a nastpnie w kadej z nastpnych stron pobiera go lo
kalnie z katalogu plikw tymczasowych, znajdujcego si w kadym z systemw i sta
nowicego integraln cz kadej przegldarki.
Poniej znajduje si przykad rozbudowanego nagwka strony WWW. Moim zdaniem
wpisane elementy to optymalny wybr dla wikszoci stron.
<?xml version="1.0" encoding*"iso-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S tr ic t//EN"
"h ttp :7/ www.w3.org/TR/xhtml1/DTD/xhtml 1- s t r i c t .dtd">
<html xmlns=http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/htm l; charset=iso-8859-2" />
<meta name="keywords" content*"lite ra tu ra informatyczna. Bartosz Danowski, ksiki" />
<meta name="description" content="Bartosz Danowski - strona autora licznych
poradnikw informatycznych. Informacje o ksikach, opinie czytelnikw, dodatkowe
materiay i przykady." />
<meta name="copyright" content="Bartosz Danowski" />
<meta name="author" content="Bartosz Danowski" />
<meta name="robots" content="index,follow" />

<title>Bartosz Danowski</title>
<1 ink rel="stylesheet" href="glowny.css" type="text/css" />

</head>
</html>

Ciao dokumentu
Wiesz ju, e dokument XHTML (HTML) ma swoje okrelone ramy oraz nagwek.
Elementy te maj znaczenie czysto konfiguracyjne lub informacyjne i poza tytuem nie
s widoczne na zewntrz. Teraz przysza pora, by pozna kolejny element strony WWW,
jakim jest jej ciao <body></body>. Wszystkie informacje, ktre znajd si pomidzy
tymi znacznikami, s traktowane jako zawarto strony i zostaj wywietlone w oknie
przegldarki. Dalej przedstawiam pooenie tego elementu w stosunku do pozostaych
znacznikw.
<?xml version='T.O encoding="iso-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/htm l: charset=iso-8859-2" />
<meta name="keywords" content*"lite ra tu ra informatyczna. Bartosz Danowski. ksiki" />
<meta name="description" content="Bartosz Danowski - strona autora licznych
poradnikw informatycznych. Informacje o ksikach, opinie czytelnikw, dodatkowe
materiay i przykady." />
<meta name="copyright" content="Bartosz Danowski" />
<meta name="author" content="Bartosz Danowski" />
<meta name= robots" content* index.fo l low" />

Tworzenie stron WWW w praktyce

40

<title>Bartosz Danowski</title>
<link rel="stylesheet" href='glowny.css" type=text/css" />
</head>

<body>
Ta tre bdzie widoczna podczas przegldania strony WWW.
</body>
</html>

Komentarze
Tworzc dokument XHTM L (HTML), moemy wewntrz kodu umieszcza komenta
rze, dziki czemu pniejsza edycja strony bdzie znacznie prostsza. Rozwizanie to
ma szczeglne znaczenie podczas pracy grupowej nad stron lub przy tworzeniu du
ych projektw. Oczywicie m ija si z celem komentowanie wszystkich elementw
i warto przy duej liczbie komentarzy przed publikacj przynajmniej cz z nich
usun z kodu strony.
Komentarz ma nastpujc posta:
< !- -T u znajduje si kom entarz do naszej strony

- - >

Tworzenie szkieletu strony za pomoc edytora kED


Skoro wiesz, jak ma wyglda struktura dokumentu XHTML (HTML), to teraz przy
sza pora, aby pozna moliwoci edytora kED i za jego pomoc przygotowa odpo
wiedni zbir znacznikw. Zdanie, jakie przed Tob stoi, nie jest skomplikowane i prak
tycznie ogranicza si do dwch klikni lewym przyciskiem myszy oraz drobnych
modyfikacji kodu.
Na pasku narzdzi odszukaj przycisk Utwrz nowy plik i kliknij m a strzak znaj
dujc si z prawej strony (rysunek 2.3). Nastpnie z listy, ktra pojawi si na ekranie
monitora, wybierz rodzaj tworzonego dokumentu np. XHTML 1.0 Strict. Oczywicie,
nic nie stoi na przeszkodzie, aby skorzysta z innego szablonu zawierajcego odpo
wiedni struktur dokumentu. Moesz rwnie zdefiniowa wasny szablon struktury
pliku odpowiadajcy Twoim indywidualnym potrzebom.
Rysunek 2.3.
Tworzenie struktury
dokumentu za pom oc
edytora kED
etap pierw szy

Ti

H TM L 4.01 Transitional

J.B 53SSSS SM B

em

| * ' A*

X*

*J

I HI

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

41

W tej chwili w gwnej czci okna edytora pojawi si pena i obowizkowa struktura
kodu strony (rysunek 2.4). Oczywicie, niektre z wpisw wym agaj ingerencji.
kED 2.1.4.0 bez_n*zwy
PI*

Edyt).

Siukjj

XHTML

PHP

Ijv.Sc.ipt

r s

m U 6*3 ia M \ b i | A- a

. l a

Notatki

Opq

3 | < k <41

? & :

il J

i 28 ti B 3 * - o .3 :3

ai

di ! m m m m m

alt

!= >

i [^g] 0 bez_nazwy (ISO) Q I


<^x1 v e r s i o n - i . 0 en co cH n g - -s o - 5 $ -2 ?>
< ; OOC TYPE h tm l PUBLIC " -//W 3 C //O T D XHTML 1 . 0 S t r i c t / / E N "
" D T D /x h tm l1 - s t r i e t . d t d 'V
< h tm l x m ln s -''h t t p : //w w w . w3. o r g /1 9 9 9 /x h t m l" xml : l a n g - " p l " la n g " p l" a
<head>
<m eta h t t p - e q u i v - " c o n t e n t - t y p e " c o n t e n t - ''a p p lic a t io n /x h t m l+ x m l;
c h a r s e t = is o - 8 8 5 9 - 2 " / >
<m eta name- o e s c r ip t io n " c o n t e n t - " [w staw t u o p is s t r o n y ]
<m eta name- K eywords" c o n t e n t - " [w staw t u so w a k lu c z o w e ]
c m eta name- A u th o r" c o n t e n t - " [d a n e a u t o r a ] " / >
<m eta nam e-" G e n e ra to r" c o n t e n t-" k E D " / >

; Asi

W
[Vista)
ffi <*0 i DA[System)
($LiEA [Media]
IJ
FA[Dokumenty]
ti
Ga [Pis
it
HA [Roboczy]

* ! B B H B B

Drzewo dokumentu
Elementy

Pomot

S i

/>
/>

< title >

[ t y t u s tro n y ] < / t i t l e >

< lin k r e l-" s ty le s h e e t"


< /h e a d >
<body>
--

h re f'

tutaj wstaw tresc strony

[n a z w a _ a r k u s z a _ s ty lo w .c s s ]

t y p e - " t e x t /c s s "

/>

-->

i < /b o d y >
< /h tm l>

.J

INS

NUM Rozmiar 716 B (0.70 KB)

Rysunek 2.4. Tworzenie struktury dokumentu za pom oc edytora k E D etap drugi

Przyjrzyj si uzyskanej strukturze strony WWW i zwr uwag, e w niektrych


znacznikach wpisano wartoci zamknite w kwadratowe nawiasy. Poniej zamieci
em stosowny przykad.
<meta name="Description" content=" [wstaw tu opis strony] " />
< title > [ t y tu strony] < /title >

Musisz usun cay cig znakw raz z nawiasem kwadratowym i w jego miejsce w pi
sa odpow iedni warto. Powyszy przykad po m odyfikacji pow inien wyglda
w ten sposb:
<meta name="description" content=" Bartosz Danowskl - strona autora licznych
poradnikw informatycznych. Informacje o ksikach, opinie czytelnikw, dodatkowe
materiay i przykady." />
<title>Bartosz Danowski</title

Tworzenie stron WWW w praktyce

42

Jeeli zechcesz rcznie wprowadza poszczeglne znaczniki, to kED Ci w tym pomoe.


Dokadniej mwic, edytor po wprowadzeniu penego znacznika otwierajcego auto
matycznie doda element zamykajcy. Poza tym podczas wpisywania znacznika otwie
rajcego bdzie widoczne okno z podpowiedziami dotyczcymi dostpnych atrybutw
(rysunek 2.5). Dodatkowo po wpisaniu nazwy atrybutu kED wstawi automatycznie
cudzysw.
Rysunek 2.5.
Okno podpowiedzi
z list atrybutw
przewidzianych
dla danego znacznika

bez_nazwy (ISO) Q |
1
2
3
4
5

<a
0 < a h r e f = " " t i t 1 e = " t a r g e t ^ ' " id = > 1

Tekst
Do elementw odpowiedzialnych za prezentacj tekstu w jzyku XHTML i HTML mo
emy zaliczy nagwki, akapity, cytaty, indeksy grne i dolne, znaczniki amania
wiersza, poziome linie oraz znacznik <div></div>. Dalej przyjrzymy si konstrukcji
kadego z tych elementw. Pamitaj, e wszystkie one musz si znajdowa wewntrz
znacznika <body></body>.

Uwaga

Zgodnie ze specyfikacj XHTML oraz HTML 4.01 znaczniki opisane poniej su je


dynie do nadania poszczeglnym elementom okrelonej formy. Natomiast dokadne
okrelenie struktury takiego elementu, np. koloru, wyrwnania czy czcionki, zostao
oddzielone od jzyka XHTML (HTML) i weszo w skad kaskadowych arkuszy stylw.

Nagwki
Specyfikacja jzyka XHTM L i HTML przewiduje moliwo utworzenia nagwkw
o szeciu zrnicowanych rozmiarach. Oto oglny przepis na nagwek:
<hx>Nagwek stopnia X</hx>

Za pomoc litery x oznaczyem stopie nagwka. W praktyce w to miejsce wstawiamy


cyfry z przedziau od 1 do 6. W brew pozorom, znacznik <hl></hl> jest najwik
szym nagwkiem, a <h6></h6> najmniejszym. Konkretny przykad nagwka znajduje
si poniej.
<body>
<hl>Nagwek
<h2>Nagwek
<h3>Nagwek
<h4>Nagwek
<h5>Nagwek
<h6>Nagwek
</body>

stopnia
stopnia
stopnia
stopnia
stopnia
stopnia

pierwszego</hl>
drugiego</h2>
trzeciego</h3>
czwartego</h4>
pitego</h5>
szstego</h6>

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

43

Natomiast na rysunku 2.6 wida wszystkie sze stopni nagwkw.


Rysunek 2.6.
Widok zalenoci
pomidzy wszystkimi
dostpnymi
nagwkami

Akapity
Kolejnym sposobem prezentacji tekstu jest jego grupowanie w akapity. Tekst znaj
dujcy si w akapicie automatycznie dopasowuje si do szerokoci okna przegldarki
lub jak kto woli do rozdzielczoci. Dlatego na jednym komputerze akapit moe
mie trzy wiersze tekstu, a na innym wiersze m og by zaledwie dwa. Jest to rzecz
jak najzupeniej normalna i, niestety, bardzo czsto przy le zaprojektowanej stronie
moe prowadzi do powstawania problemu popularnego rozjedania si zawarto
ci okna przegldarki.
Za definicj akapitu odpowiada znacznik <p></p>, ktry zawsze wystpuje z elementem
zamykajcym.
<body>
<p>Przykad prostego akapitu.</p>

</body>

Strona moe zawiera dowoln liczb akapitw, a kady z nich jest oddzielony od po
zostaych pustym wierszem. Przerwa ta jest domylnie wstawiana przez przegldarki,
a do jej kontroli musisz uy kaskadowych arkuszy stylw.
Akapit w jzyku XHTML (HTML) domylnie nie ma wcicia pierwszego wiersza, cha
rakterystycznego dla niektrych dokumentw drukowanych, co nie oznacza, e takiego
efektu nie da si wprowadzi na stronie WWW. W ymaga to jednak uycia kaskado
wych arkuszy stylw, o ktrych napisaem w rozdziale czwartym.
Na rysunku 2.7 ukazano przykad strony, na ktrej umieciem trzy bloki tekstu oraz
dwa nagwki stopnia pierwszego. Pamitaj, e wszystkie znaczniki mona ze sob
czy w celu uzyskania ciekawie wygldajcego dokumentu.
We pod uwag, e teoretyczna moliwo stworzenia nieograniczonej liczby akapi
tw na stronie WWW nie moe by naduywana. W praktyce osoba czytajca zawar
to strony WWW przeglda jedynie zawarto pierwszych dwch ekranw monitora.
Dlatego w przypadku publikacji sporej iloci tekstu najlepiej podzieli go na kilka czci,
dziki temu bdzie on znacznie atwiej przyswajalny przez czytelnika. Przykad takiego
dziaania zamieciem na rysunku 2.8.

44

Tworzenie stron WWW w praktyce

Rysunek 2.7.

Przykad prostej strony,

N agwek stopnia pierwszego

W ktrej poczono
nagwki oraz akapity

Lorem ipsum dolor sit amet, consectetur adipisicing et, sed do eiusmod tempor inddidunt ut labore et dolore
magna aliqua Ut eram ad nanim veniam, quis nostrud exercitation uDamco laboris nisi ut akquip ex ea commodo
consequat. Dms aute irure dolor in reprehenderit m vohiptate veht esse cfflum dolore eu fugiat nulla panatur
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit amm id est laborum

Nagwek stopnia pierwszego


Lorem ipsum dolor sit amet, consectetur adipisictng et, sed do eiusmod tempor mcididunt ut labore et dolore
magna ahqua. Ut enim ad mmim veniam, quis nostrud exercitation uflamco laboris nisi ut abquip ex ea commodo
consequat. Dms aute irure dolor in reprehenderit in vohiptate veht esse ciQum dolore eu fugiat nulla panatur
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit amm id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing et, sed do eiusmod tempor mcididunt ut labore et dolore
magna aliqua Ut enim ad minim veniam, quis nostrud exercitation uamco laboris nisi ut abquip ex ea commodo
consequat Dms aute irure dolor in reprehenderit in vohiptate veht esse ciDum dolore eu fugiat nulla panatur
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit amm id est laborum

Rysunek 2.8.
D ue iloci tekstu
warto podzieli
na kilka
mniejszych stron

Anonimowa lekarka z przychodni Jele: - Kwestia zatrucia psin nie wchodzi w gr


Co najwyej mona sobie podwyszy poziom cholesterolu.
Nieche sobie m ama uywa
- To mwi Pawe, e psina? A na ble w krzyu dziaa? - nie dowierza Staruszka.
- Psina je st dobra na wszystko. Wemie sobie kieliszek, wicej nie potrzeba Wypije i
pooy si pod pierzyn. Rano wstanie saba, bo psina tak rozgrzewa, e czowiek a
mokry je st z potw, ale kaszel przechodzi od zaraz.
Moja mama cierpi na chroniczny kaszel. Kasa, odkd pamitam. adne leczenie nie
skutkuje.
- Moe powinna sprbowa psiny? - szukam rady w przychodni Byczyna
d

l X M V K K W e rs !a do druku

l 2 | 3 | nastpna strona

9 ^ W ylij znajom ym

P o dysku tuj na fo rum

Cytaty
Jeeli chcesz zacytowa wikszy fragment tekstu w kodzie strony, musisz skorzysta
ze znacznika <blockquote></blockquote>. Konstrukcja tego elementu jest nastpujca:
<blockquote>
Ilestibulum ante ipsum prim is in faucibus o rci luctus et u ltric e s posuere c u b ilia
Curae: Morbi b la n d it. Etiam m attis pede at lacus. Aliquam tincidunt. Nullam
fa c ilis is . Etiam quis nulla. Donee s o llic itu d in . Fusce n is i nulla. vestibulum non,
pellentesque eget. ullamcorper v e l, odio. Aliquam egestas rutrum libero. Donec
placerat. n is i eget egestas tin cid u nt, e l i t augue rhoncus e lit . sed feugiat e l i t
enim at libero. Proin egestas sapien sed n ulla. Sed a erat s i t amet arcu semper
aliquam.

</blockquote>

Jak zapewne wiesz, cytowa moemy rwnie wewntrz bloku tekstu, a w celu sko
rzystania z tej moliwoci na stronie WWW musimy sign po znacznik <q></q>.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

45

<p>
Autor ksiki napisa: <q>Specyfikacja HTML 4.01 oddziela formatowanie elementu
od struktury jzyka, oddajc go w rce kaskadowych arkuszy stylw</q>. ale nie mia
do koca r a c ji, gdy uwaam, e...
</p>

Na rysunku 2.9 przedstawiem efekt dziaania znacznikw odpowiedzialnych za cyto


wanie. Aby dodatkowo wyrni cytowany tekst, zastosowaem pochylon i pogrubion
czcionk. Formatowanie to jest nadane przeze mnie rcznie za pom oc kaskado
wych arkuszy stylw i domylnie nie wystpuje w przypadku zastosowania samych
znacznikw.
Lorcm tpsum dolor sit amet: consectetuer adiptscmg elit. Nunc in quam In quam lorcm, convaflis convaflis, fermcntum et, scelerisque interdum,
diam Proin lobortis mi porta Hbero AHquam erat vohitpat. Vrvamus aHquam, sem in moflis feugiat, nisi Hgula moDis erat, sed lobortis Hgula lectus
sagittis pede PhaseDus id nibh eget magna egcstas lobortis. In interdum, turpis eget sagittis eleifend. erat nisi varius quam, ut uhricies nunc sem id
lacus Fusee uitricies, Hgula sit amet pharetra e gestas, quam Hgula nonummy pede, ac viverra Hbero Hgula sit amet uma Praesent sed turpis non
massa tmperdiet placerat Etiam tincidunt, sapien non aHquet pellentesque, odio leo vohitpat erat, sed faciHsis nisi lorem id Hbero. Donee ac
nunc Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Prom dictum Curabitur sem. Sed at feHs. Ut
eu lacus. Maecenas nisi mauris, tempus iacuHs, posuere qias, tristique eget, erat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultricesposuere cubilia Curae; Morbi blandit. Etiam maids
pede at lacus. Aliquam tincidunt. S u lla m facilisis. Etiam quis nulla. Donee sollicitudin. Fusee nisi nulla, vestibulum
non, pellentesque eget, ullamcorper vel, odio. Aliquam egestas rutrum libero. Donee placerat, nisi eget egestas
tincidunt, elit augue rhoncus elit, sed feugiat elit enim at libero. Proin egestas sapien sed nulla. Sed a erat sit amet
arcu semper aliquam.
Autor ksiki napisa: Specyfikacja HTML 4.01 oddziela form atowanie elementu od struktury jzy ka,oddajc go w rce
kaskadowych arkuszy stylw'', ale nie mia do koca racji, gdy uwaam, e . ..

Rysunek 2.9. Przykad wykorzystania cytatw na stronie

Tekst cytowany za pom oc znacznika <blockquote></blockquote> jest nieznacznie


wcity wzgldem pozostaych akapitw na stronie. Natomiast element cytowany we
wntrzu bloku tekstu za pom oc znacznikw <q></q> zosta ujty w cudzysw.
Dla obu znacznikw odpowiadajcych z cytowanie moemy doda atrybut o nazwie
c ite , ktry pozwala na okrelenie adresu strony z ktrej pochodzi cytowany tekst.
<blockquote cite="http://danowski.pl">
Vestibulum ante ipsum primis in faucibus orci luctus et u ltric e s posuere c u b ilia
Curae; Morbi blandit. Etiam mattis pede at lacus. Aliquam tincidunt. Nul 1am fa c ilis is .
Etiam quis nulla. Donee s o llic itu d in . Fusee n isi nulla, vestibulum non, pellentesque
eget. ullamcorper vel. odio. Aliquam egestas rutrum lib e ro . Donee placerat, n is i
eget egestas tin cid u n t. e l i t augue rhoncus e l i t , sed feugiat e l i t enim at lib e ro .
Proin egestas sapien sed nulla. Sed a erat s i t amet arcu semper aliquam.
</blockquote>
<p>
Autor ksiki napisa: <q cite="http://danowski.p l>Specyfikacja HTML 4.01 oddziela
formatowanie elementu od struktury jzyka, oddajc go w rce kaskadowych arkuszy
stylw</q>, ale nie mia do koca ra c ji, gdy uwaam, e...
</p>

46

Tworzenie stron WWW w praktyce

Indeks grny i dolny


Korzystajc z kolejnych znacznikw jzyka XHTML i HTML, moemy wymusi pre
zentacj fragmentu tekstu jako indeksu grnego lub dolnego. Niezbdne znaczniki to
<sub></sub> oraz <sup></sup>.
Indeks grny
<p>E=mc<sup>2</sup></p>

Indeks dolny
<p>E=mc<sub>2</sub></p>

Rysunek 2.10 przedstawia efekt dziaania powyszego przykadu.


Rysunek 2.10.
Przykad dziaania
indeksu grnego
i dolnego

Indeks grny
E =m c2

Indeks dolny
E=mc2

amanie wierszy
Przy okazji prezentacji znacznika odpowiedzialnego za definiowanie akapitw wspo
mniaem, e ich zawarto jest automatycznie dopasowywana do rozdzielczoci ekranu.
Innymi sowy, przegldarka sama decyduje, kiedy zama dan lini. Dziaanie takie
jest przydatne, ale czasami moe utrudni prac twrcy witryny zawierajcej wiksz
ilo tekstu. Na szczcie w specyfikacji jzyka XHTML i HTML znajdziemy przy
datny znacznik, ktrego celem jest bezwzgldne wymuszenie zamania linii. Mam tutaj
na myli znacznik <br />.
<P>
Lorem ipsum dolor s it amet. consectetuer adipiscing e l it . Nunc in quam. In quam
lorem, conval lis conval lis . fermentum e t. scelerisque interdum. diam. Proin lobortis
mi porta lib e ro . Aliquam erat volutpat. Vivamus aliquam. sem in m ollis feugiat.
nisi l i gul a m ollis erat, sed lo b o rtis lig u la lectus s a g ittis pede.<br />Phasellus
id nibh eget magna egestas lo b o rtis . In interdum. tu rp is eget s a g ittis eleifend.
erat n isl varius quam, ut u ltric ie s nunc sem id lacus. Fusce u ltric ie s , lig u la s it
amet pharetra egestas, quam lig u la nonummy pede, ac viverra lib e ro lig u la s it amet
urna. Praesent sed turpis non massa imperdiet placerat.<br />Etiam tincidunt. sapien
non aliquet pellentesque. odio leo volutpat erat. sed f c il i sis nisl lorem id libero.
Donee ac nunc. Pellentesque habitant morbi tris tiq u e senectus et netus et malesuada
fames ac tu rp is egestas. Proin dictum. Curabitur sem. Sed at fe lis . Ut eu lacus.
Maecenas n isl mauris, tempus ia c u lis . posuere quis, tris tiq u e eget. erat.
</p>

Na rysunku 2.11 wida przykad akapitu, w ktrym w dwch miejscach wymusiem


przeamanie wiersza. Strzaki wskazuj miejsca wstawienia znacznika <br />.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

Rysunek 2.11.
Przykad
amania wierszy

47

Lorem ipsum dolor sit amet, consectetuer adipiscing eft. Nunc in quam. In quam lorem, con\-aBis convaBis,
fermentum et, scelerisque interdum, cam. Proin lobortis mi porta Hbero. AHquam erat\ohrtpat. Vivamus aquam,
sem in moBis feugiat, nisi Hgula moflis erat, sed lobortis Egula lectus sagittis pede.
PhaseBus id nibh eget magna egestas lobortis. In interdum, turpis eget sagittis eleifend, erat nisl varius quam, ut
uhricies nunc sem id lacus. Fusce ultrieies, Hgula sit amet pharetra egestas, quam Hgula nonummy pede, ac viverra
Hbero Hgula sit amet uma. Praesent sed turpis non massa imperdiet placera!
Etiam tincidunt, sapien non aKquet peBentesque, odio leo vokitpat erat, sed faciEsisnisl lorem id Hbero Donec ac
nunc. PeBentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dictum.
Curabitur sem. Sed at feHs. Ut eu lacus Maecenas nisl mauris, tempus iacuHs, posuere quis, tristique eget, erat.

Wyrnianie tekstu
Specyfikacja jzyka XTHML i HTML przewiduje kilka znacznikw, za pom oc kt
rych moemy wyrni fragment tekstu lub pojedyncze sowo czy liter.
Aby pogrubi tekst, musisz skorzysta ze znacznika <strong></strong>.
<p>Wydawnictwo <strong>Helion</strong></p>

Aby skorzysta z tekstu pochyego kursywy, musisz uy znacznika <em></em>.


<p>Wydawni ctwo <em>Heli on</em></p>

Aby przedstawi fragment tekstu np. listing kodu programu za pomoc czcionki
o staej szerokoci, uyj znacznika <code></code>.
<p>Wydawnictwo <code>Helion</code></p>

Na rysunku 2.12 przedstawiem przykad wyrniania fragmentu tekstu. Za kadym


razem obiektem dziaania byo sowo Helion.
Rysunek 2.12.
Przykad
wyrniania tekstu
pogrubienie,
pochylenie i kod

Wydawnictwo H elion
Wydawnictwo Helion
Wydawnictwo H e l i o n

Warto w tym miejscu wspomnie jeszcze o znaczniku <span></span>, ktry sam w sobie
nie wpywa na wygld tekstu. Jednak w poczeniu z kaskadowymi arkuszami stylw
moe czyni cuda.

Twarda spacja
Jeeli w bloku tekstu lub nagwku umiecisz dodatkowe znaki spacji za pomoc kla
wiatury i klawisza spacji, to przegldarka automatycznie je zignoruje i wywietli tylko
jeden znak przerwy.
<hl>Nagwek stopnia

pierwszego</hl>

48

Tworzenie stron WWW w praktyce

Zgodnie z tym, co napisaem, podany przykad, pomimo e zawiera kilka dodatko


wych spacji, bdzie wyglda dokadnie tak samo, jak nagwek widoczny dalej.
<hl>Nagwek stopnia pierwszego</hl>

Jeeli chcesz wymusi kilka dodatkowych spacji w tekcie, musisz do kodu wstawi
znak twardej spacji. W praktyce oznacza to skorzystanie z nastpujcego cigu zna
kw &nbsp;, popularnie zwanego encj.
<hl>Nag?wek stopnia &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pierwszego</hl>

Pamitaj jednak o tym, e jedna spacja widoczna na ekranie to kilka literek wpisanych
w kod strony, co przy naduywaniu tego elementu moe znacznie zwikszy rozmiar
pliku strony. Dlatego znacznie lepszym rozwizaniem jest skorzystanie z moliwoci,
jakie oferuj kaskadowe arkusze stylw.

Znacznik DIV
Element <div></div> jest odpowiedzialny za grupowanie znacznikw. Dziki temu
elementowi moesz tworzy warstwy w dokumencie XHTML (HTML) i pracowa
na nich oraz rozciga dziaanie zdefiniowanego za pom oc CSS stylu na wiksz
liczb znacznikw. Wprowadzone tutaj pojcia zostay dokadnie opisane w nastp
nym rozdziale.
<div>
<p>Pierwszy blok tekstu.</p>
<p>Drugi blok tekstu.</p>
<hl>Nagwek stopnia pierwszego</hl>

</div>
Oczywicie, omawiany znacznik moe by wykorzystywany rwnie z innymi elemen
tami, np. tabelami czy listami.

Formatowanie tekstu za pomoc edytora kED


W prowadzanie tekstu oraz jego formatowanie za pomoc edytora kED nie jest skom
plikowane. W ystarczy, e wprowadzisz nazw znacznika (na przykad <p) i naciniesz
spacj, a edytor podpowie Ci, jaki atrybut powinien by nastpny. Dziki tem u bez
problemu bdziesz mg przepisa nastpne elementy. Po wprowadzeniu kompletnego
znacznika otwierajcego edytor doda automatycznie znacznik zamykajcy. Zwr uwag
na to, e kursor pozostanie pomidzy znacznikiem otwierajcym i zamykajcym, dziki
czemu bez wykonywania dodatkowych czynnoci bdziesz mg rozpocz wprowa
dzanie tekstu.
Moesz rwnie w inny sposb nada odpowiedni struktur tekstu. Wystarczy, e wpro
wadzisz tekst, zaznaczysz go, a nastpnie na pasku narzdzi odszukasz i klikniesz
przycisk odpowiadajcy potrzebnemu znacznikowi, np. akapitowi (rysunek 2.13).

49

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

* kED 2.14.0 - bez.nazw y *

Plik

Edycja

Szukaj

XHTML

JavaScript

Opcje

<
11 fol

Pomoc

- # | dt| aa| u -f t a i ta * g
i ? I
<
jb
itl i
! a j y j n o H
y *w4 4 H

ra M M j

: . 53- . - TI * ' ~~| aa - o I "a a ' a is e > j


% b ez.n a zw y (IS O )Q O bez_nazwy (BO ) Q I

<-?xm1 v e r s i o n - i . 6

e n c o d i n g - 1s o -S 8 $ 9 -2 ?>

i D O C T Y P E h tm l P U B LIC " - / / W 3 C / / D T D XHTML 1 . 0 S t r iC T //E N


h t t p : //w w w . w3. o r g / T R / x h t m l l / D T D / x h t m l l - s T n 'c t . d td " >
< h tm i xm ln s " h t t p : //w w w .w 3 .o r g /1 9 9 9 /x h t r o l" x m l: la n g - " p l " la n g " p l" >
<head>
<m eta h t t p - e q u i v - " c o n te n t-T y p e " c o n t e n t " te x t, h tm l; c h a r s e t = is o - 8 8 5 9 - 2 " / >
cm eta nam e*"keyw ords" c o n t e n t " ! i t e r a t u r a in fo r m a ty c z n a , B a r to s z D a n o w s k i,
k s i k i" / >
:
<roeta name " d e s c r ip tio n " c o n t e r r t= " 8 a r t o s z Danowski - s t r o n a a u t o r a lic z n y c h
p o ra d n ik w in fo r m a ty c z n y c h , in f o r m a c je o k s i k a c h , o p in ie c z y t e ln ik w ,
dodatkow e m a t e r i a y i p r z y k a d y ." / >
-cmeta name'"c o p y r ig h t" c o n t e n t " B a r to s z D anow ski" / >
<m eta n a m e -'a u tn o r
c o n t e n t - "B a rto s z D anow ski" *
-cmeta nam e- r o b o ts " c o n te n t " in d e x , f o l l o w " / >
< t i t l e B a r t o s z D a n o w s k i< /t it le >
clink r e l - " s t y l e s h e e t " h r e f - " g lo w n y . c s s " t y p e - " t e x t / c s s " / >
< /h e a d >

/>

<body>

quam fo retn , c o n v a l l i s c o n v a m s , ferm en tu m e t , s e e l r is q u e in te r d u m , d i


P r o in lo b o r t i s mi p o r t a l i b e r o . A liq o a m e r a t v o l u t p a t . Vivam us a iiq u a m ,
i n m o l l i s f e t i g f a t , n i s i l g u l a m o l l i s e r a t , sed l o b o r t i s l g u l a T e c tu s |
s a g i t t i s pede. P h a s e ilu s i d n ib h e g e t magna e g e s tas l o b o r t i s . I n i n t e r d
t u r o i s e g e t s a g i t t i s e l e i f e n d , e r a t n i s i v a r us quam, u r u l t r i c i e s nunc
.
acu s . Fusee u l t r i c i e s , l g u l a s i t amet p h a r e t r a g e s t a s , quam l i g u l
rtj ummy p e d e , ac v i v e r r a l i b e r o l g u l a s i t amet u r n a . P ra e s e n t sed t u r p i
massa im p e r d ie t p la c .e r a t . t t i a m t i n c i d u n t , s a p ie n non a l i q u e t p e U e n t e s c
o d io l e o v o lu tp a t. e r a t , sed f c i l i s i s r r s l lo re ro d l i b e r o , onec ac nur
P e l l e n t esq u e h a b it a n t mor b i t r i s t iq u e s e n e c io s e t n e to s e t m ale s u a d a fa n
t u r p i s g e s ta s , p r o in d ic tu m , c u r a b i t u r sem. sed a t f e l i s , tit u la c a s ,
decenas n i s l m a u r is , tempos i a c u l i s , p o s u e re q u is , t r i s r i q u e e q e t . e r a t

KM ;

- . H K
IN S

: - NUM

R o zm ia r;

1846 B (1.80 KB)

K : 974, W

:17

Rysunek 2.13. Nadawanie struktury tekstu za pom oc edytora kED

W sposb opisany powyej moesz wprowadzi do tekstu najwaniejsze znaczniki (aka


pity, cytaty, nagwki, pogrubienie, kursywy, kod programu, indeksy grny i dolny,
a take znaczniki <di v>< /d i v>). Rozwizanie to w znacznym stopniu uatw i prac
nad tekstem, ktry kopiujemy na przykad z innego rda.
Dodawanie twardej spacji odbywa si poprzez nacinicie kombinacji klawiszy Ctrl+
spacja. Pojedyncze nacinicie wspomnianej kombinacji skutkuje dodaniem jednej twar
dej spacji &nbsp;.
Jeeli potrzebnego znacznika nie ma na pasku narzdzi, warto pamita o jeszcze jed
nej ciekawej moliwoci. Po wprowadzeniu i oznaczeniu formatowanego tekstu kliknij
zakadk ciga, ktra jest umieszczona w lewej kolumnie. Nastpnie na licie odszukaj
potrzebny znacznik, zaznacz go (wystarczy pojedyncze kliknicie lewym przyciskiem
myszy), a nastpnie kliknij przycisk Wstaw cao.

50

Tworzenie stron WWW w praktyce

Listy
Nastpnym elementem, z jakim moesz spotka si przy tworzeniu stron WWW, s
listy. Specyfikacja okrela trzy rodzaje list. S to: listy punktowane, numerowane oraz
definicji. Mona si jeszcze spotka z podziaem na listy uporzdkowane (numerowane)
oraz nieuporzdkowane (wypunktowane), ale to ju kwestia interpretacji.

Lista wypunktowana
Do utworzenia listy wypunktowanej bdziemy potrzebowali kombinacji dwch znacz
nikw: <ul></ul > oraz <11 ></1 i >. Znacznik <ul ></ul> okrela ramy listy, natomiast
<1 i ></1 i > to kady jej podpunkt. W praktyce wyglda to mniej wicej tak:
<ul>
<1i>Pierwsza pozycja lis t y wypunktowanej</li>
< l i >Druga pozycja lis t y wypunktowanej</M>
<M>Trzecia pozycja lis t y wypunktowanej</M>
</ul>

Rysunek 2.14 prezentuje przykad listy wypunktowanej.


Rysunek 2.14.
Przykad listy
wypunktowanej

Pierwsza pozycja listy- wypunktowanej


Druga pozycja Msty wypunktowanej
Trzecia pozycja Msty wypunktowanej

Lista numerowana
Drugim typem listy jest lista numerowana, ktrej konstrukcja skada si ze znaczni
kw <ol ></ol > oraz < li> < /li> . Zasada jest dokadnie taka sama jak w przypadku list
wypunktowanych.
<ol>
<M>Pierwsza pozycja lis t y numerowanej</li>
< l i >Druga pozycja lis t y numerowanej</li>
<M>Trzecia pozycja lis t y numerowanej</M>
</ol>

Rysunek 2.15 prezentuje przykad listy numerowanej.


Rysunek 2.15.
Przykad listy
numerowanej

1. Pierwsza pozycja listy numerowanej


2 . Druga pozycja listy' numerowanej
3. Trzecia pozycja Msty numerowanej

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

51

Lista definicji
Trzecim i ostatnim typem list jest lista definicji. Posiada ona bardzo podobn budow do
dwch wczeniej omawianych. Na list definicyjn skada si konstrukcja znacznikw
<dl> < /d l> , <dt></dt> oraz <dd></dd>.
<dl>
<dt>5?owo definiowane</dt>
<dd>op1s sowa definiowanego</dd>
<dt>Kolejne sowo definiowane</dt>
<dd>opis kolejnego sowa definiowanego</dd>
<dt>Jeszcze jedno sowo definiowane</dt>
<dd>op1s nowego sowa definiowanego</dd>
<dt>Ostatnie sowo defin1owane</dt>
<dd>opis ostatniego sowa definiowanego</dd>
</dl>

Przykad wszystkich trzech list znajduje si na rysunku 2.16.


Rysunek 2.16.
Przykad
listy definicji

Sowo definiowane
opis sowa definiowanego
Kolejne sowo definiowane
opis kolejnego sowa definiowanego
Jeszcze jedno sowo definiowane
opis nowego sowa definiowanego
Ostatnie sowo definiowane
opis ostatniego sowa definiowanego

Listy zagniedone
Na koniec zosta do omwienia jeszcze jeden ciekawy przypadek. Mam tutaj na myli
list, ktra zawiera podpunkty. Takie rozwizanie bardzo czsto spotykamy w yciu co
dziennym i na pewno ju si zastanawiae, czy nie da si w jaki sposb przenie go
na stron WWW. Ot odpowied jest bardzo prosta jest to moliwe; a taka kon
strukcja wymaga zastosowania list zagniedonych. Zagniedanie polega na umiesz
czeniu wewntrz jednego elementu innego znacznika, np. w licie umieszczamy jeszcze
jedn list.
Podczas zagniedania moemy czy rne typy list, np. numerowan z wypunkto
wan. Odpowiedni przykad zamieszczam poniej, a efekt jego dziaania przedstawia
rysunek 2.17.
<ol>
<li>Produkty mleczne
<ul>
<li>mleko 3 ,2 < /li>
< li> jo g u rt malinowy</li>
<li>mietanka do kawy</li>
</ul>

52

Tworzenie stron WWW w praktyce

Rysunek 2.17.
Przykad list
zagniedonych

1. Produkt)'mleczne
o mleko 3.2
o jogurt malinowy
o mietanka do kawy
2. Owoce
o jabka
o cytrusy
pomaracze
mandarynki
o brzoskiwnie
3. Pieczywo
o chieb
o bulki
o rogaliki

</H >

<li>0woce
<ul>
<1i> ja b k a < /li>
<li>cytrusy
<ul>
<li>pomaraficze</li>
<li>mandarynki</1i>

</ul>
</1 i >
<1

i >brzoski wnie</1 i >

</ul >
< /l i >
<li>Pieczywo
<ul>
<li> ch leb < /li>
< li> b u k i< /li>
<li>rogalik1</1i>
</ul>
</ 11>

</ol>

Tworzenie list za pomoc edytora kED


Edytor kED posiada rwnie wygodne narzdzie do tworzenia list. W przypadki nor
malnych list wypunktowanych lub numerowanych wystarczy wprowadzi wszystkie po
zycje listy, zaznaczy je i klikn odpowiedni przycisk na pasku narzdzi (rysunek 2.18).
W przypadku list zagniedanych lub definicji naley wprowadzi struktur listy rcz
nie. Caa operacja nie jest skomplikowana i wymaga tylko wpisywania odpowiednich
znacznikw otw ierajcych (zam ykajce dodawane s automatycznie) i pam itania
o zasadach obowizujcych podczas zagniedania. Formatowanie pojedynczych po
zycji listy mona usprawni, zaznaczajc odpowiedni fragment tekstu i klikajc przy
cisk oznaczony na rysunku 2.19.
Oczywicie, nic nie stoi na przeszkodzie, aby kompletne listy bdce elementem ska
dowym wikszej struktury formatowa w sposb opisany na pocztku niniejszego
podrozdziau.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

53

kD 2.1.4.0 - bez.nazwy
Szukaj

XHTML

PHP

JavaScript

l i . ' 01 sil a>

Opcje

Pomoc

x . * ttnam kl t
|a* a* *iIM 82 83 8 S5H
" T * j i 0 * 'Q i a

'J -u J -a
a | s i=|>

b e z .r.nazwy ( tS 0 )O be z .n a zw y (BO ) Q

f? 8?9

----------------

t x m l v e r s t o r t - " i . O w encocfi n g - " i


3< ! OOCTYPE htrnl PUBLIC - / / W 3 C / / DD TTl I\ XXHTML
H1 . 0 S t r i C t //E N "
" h t t p : //w w w . w3. o r g / T R / x b t m l l / D T >/xnxml.
O / x n t m l l - s t r l c t . d td " >
ch tm 1 xm ln s - " h t t p : //w w w .w 3 .o r g /1 9 9 9 /x h t m T ' x m l: l a n g - " p l " la n g - " p V >
<head>
< m eta h t t p - e q u iv " c o n t e n t - T y p e " c o n t e n t = " t e x t / h t m l ; c h a r s e t - is o - 8 8 5 9 - 2 "
< m eta n am e-"keyw o rd s" c o n t e n t " l i t e r a t u r a in f o r m a ty c z n a , B a r to s z D an o w ski,
k s i k i" / >
<m eta n a m e - 'd e s c r ip t io n " c o n t e n t - 'B a r t o s z oanow ski - s t r o n a a u t o r a lic z n y c h
p o ra d n ik w in fo rm a ty c z n y c h , in f o r m a c je o k s i k a c h , o p in ie c z y t e ln ik w ,
dodatkow e m a t e r i a y i p r z y k a d y ." / >
< m eta n am e-"c o p y r ig h t" c o n te n t " B a r to s z D anow ski / >
emeta n a m e -" au th o r
c o n t e n t - 'B a r t o s z D anow ski" / >
< m eta n am e-" r o b o ts " c o n t e n t - in d e x ,f o llo w " / >
< t i t l e > B a r t o s z D a n o w s k i< /t it le >
< l i n k r e l - " s t y l e s h e e t " h r e f - " g lo w n y .c s s " t y p e - " t e x t / c s s " / >
</'head>
<body>

/>

INS

VP

NUM Rozmiar. 939 B (0,92 KB)

1C 1, W: 17

Rysunek 2.18. Formatowanie listy wypunktowanej lub numerowanej

Grafika na stronie WWW


Wprowadzenie moliwoci publikacji na stronie WWW elementw graficznych (zdj,
wykresw, przyciskw oraz innych) byo momentem przeomowym w dziaaniu sieci.
Stao si tak z dwch powodw.
Pierwszym by dynamiczny rozwj stron. Stay si one znacznie ciekawsze pod wzgl
dem wizualnym. Dotychczas bowiem publikowano jedynie tekst oraz uywano list czy
te kilku innych bardzo prostych efektw.
Oczywicie, nie ma ry bez kolcw i z chwil wprowadzenia grafiki na strony WWW
ruch w sieci drastycznie wzrs, groc cakowitym jej zablokowaniem. Na szczcie
szybko sobie z tym poradzono, modyfikujc szkielety sieci, dziki czemu internet znowu
sta si wydajnym i szybkim nonikiem informacji.

54

Tworzenie stron WWW w praktyce

lwa!

> kED 2.1.4.0 - bez.nazwy *


Plik

Edycja

Szukaj

XHTML

PHP

1 l i B (5-=) ra i f I B !!!

JavaScript

Opcje

Pomoc

<j jC a* x *i | H H H H B S

iS i i B : S3 &

d bcz.nazwy (IS0)O O

>2 .3

! rJ ffl ( J S - i f? fr ffl
3 a

*>z_nazwy (ISO) O |

B E .:

---

^xraT v e r s i o n - " ! . O'1 e n c o d 1 n g -''is o -8 5 9 - 2 ''


< ' DOCTYPE htm l P U B LIC " - / / W 3 C / / D T D XHTML 1 . 0 S t r i c t '
1 " h tt
ttp
p : //w w w .w 3 . o rg ,/T R /x h tm ll./D T D , x h t m l l - s t r i c t . d td " >
<h
tm il xm
htm
x mlns'
ln s - " h t t p : / / www.w3. o r g . / l 9 9 9 /x h tm l " x m l: l a n g - " p V l a n g - 'p l "
<head>
<m eta h t t p - e q u iv - " c o n t e n t - T y p e " c o n t e n t = " t e x t h t m l; c h a r s e t - is o - 8 8 5 9 - 2 " / >
<m eta n am e-"keyw ords" c o r r te n t - ' l i t e r a t u r a in f o r m a ty c z n a , B a rto s z D anow ski,
k s i k i" / >
< m eta n am e-"d e s e r i p t io n " c o n t e n t - " B a rto s z Danowski - s tr o n a a u to r a lic z n y c h
p o ra d n ik w in fo r m a ty c z n y c h , in f o r m a c je o k s i k a c h , o p in ie c z y te ln ik w ,
dodatkow e m a t e r i a y i p r z y k a d y ." / >
< m eta n a m e -" c o p y riq h t" c o n te n t = " B a r to s z D anow ski" / >
< m eta n am e"au tn o r
c o n te n t- " B a r t o s z Danow ski" / >
< m eta n am e-r o b o t s ' c o n t e n t - " i n d e x ,f o l lew " / >
< t i t l e > B a r t o s z D a n o w s k i< /t it le >
< l i n k r e l - " s t y l e s h e e t " h r e f - " g lo w n y . cs s " t y p e * '' t e x t / c s s " / >
< /h e a d >
<body>

'EN"

Znaczniki I atrybuty XHTML

<a>
ffl <abbr>
ffl <acronym>
ffl <address>
ffl<b>
ffl <big>
ffi <blockquoce>
<body>
< b r />

< o l>
< l i> P r o d u k t y m le c zn e
<ul>
< li> m le k o 3 , 2 < / l 1 >
<1i > j o g u r t mai in o w y < /l1 >
< li> s m f e ta n k a do k a w y < /li>

ffl <buttoxi>
ffi <caption>
',*)< cl te>
ffl <code>

ffl <col>
ffl-<colgroup>
ffl-<dd>
ffl <del>
ffl <dfn>
ffl-<div>
ffl <dl>
<dt>

< /b o d y >
< /h t m l>

ffl <em>

ffl-<field3ec>

ffl <form>
ffl <frame>
ffl <frameset>
ffl-<hl>
ffl <h2>
ffl <h 3>

..iii kod

i *
INS

. NUM Rozmiar: 1024 B (1,00 KB)

K.-6,W:25

Rysunek 2.19 . Tworzenie bardziej skomplikowanych list

Dzisiaj na stronie moesz umieci obrazki w nastpujcych formatach: jp g , g i f oraz


png. W rozdziale 3. opisaem szczegowo wszystkie dostpne formaty graficzne, uy
wane na stronach WWW. Znajdziesz tam informacje o sposobach kompresji elemen
tw graficznych, przygotowania ich do umieszczenia na stronie oraz poznasz alter
natywne metody publikacji elementw graficznych na stronie WWW, takie jak Adobe
Flash czy SVG.
Zaoyem, e posiadasz dowolny obrazek, ktry sam przygotowae lub pobrae z ja
kie strony w intemecie. Pamitaj jednak o prawach autorskich poyczonego zdj
cia moesz uywa do testw i nauki, ale wyniki Twojej pracy nie powinny wyj poza
Twj komputer. Moim zdaniem wasnorczne przygotowanie elementw graficznych
strony daje duo wicej satysfakcji ni ich poyczanie od innych twrcw. W roz
dziale 3. nauczysz si tworzy kilka prostych elementw, ktre z powodzeniem moesz
wykorzysta na swojej stronie WWW.
W spominaem, e grafika na stronie moe by jej uzupenieniem, ale moe take sta
nowi podstawowy skadnik strony. Zobacz zatem, jak publikowa i stosowa elementy
graficzne.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

55

Do umieszczenia elementu graficznego na stronie suy znacznik <img />, ktry po


siada atrybuty src oraz alt. Src okrela rdo, czyli obrazek, jaki chcemy wstawi, a l t
natomiast definiuje alternatywny tekst dla przegldarek nieobsugujcych grafiki, m.in.
przegldarek tekstowych, np. LYNX, bd dla przegldarek, w ktrych uytkownik
wyczy wywietlanie grafiki. Przykad uycia znacznika <img /> podaj poniej.
<img src="obrazek.gif" a lt - 't o je s t nasz obrazek" />

W tym miejscu pojawia si bardzo wana kwestia, zwizana z wielkoci liter uywa
nych przy wpisywaniu znacznikw oraz atrybutw. Na pocztku napisaem, e w przy
padku stron korzystajcych z jzyka HTML wielko liter w znacznikach oraz atry
butach nie ma znaczenia, natomiast kod XHTML wymaga stosowania wycznie maych
liter. To oczywicie prawda, jednak od tej zasady istnieje pewne odstpstwo. Mam tutaj
na myli sytuacj, w ktrej znacznik zawiera odwoanie do oddzielnego pliku. W moim
przykadzie atrybut SRC zawiera informacje o pliku obrazka i w takim przypadku
spraw kluczow jest wpisanie nazwy obrazka dokadnie tak samo, jak nazwano plik.
Chodzi o to, e systemy rodziny MS Windows nie rozrniaj wielkoci liter i dla nich
p lik.g if oraz P lik.gif to jeden i ten sam plik. Natomiast systemy uniksowe s czue na
wielko liter i przykadowe pliki to dwa zupenie rne pliki. Majc na uwadze fakt,
e niemal 95% serwerw internetowych to maszyny uniksowe, musisz wpisywa nazwy
dokadnie, z uwzgldnieniem wielkoci liter.
Warto, by pamita rwnie o tym, e nazwy plikw (kady typ uywany na stronie)
nie powinny zawiera polskich liter oraz znakw spacji. Jeeli plik ma skada si z na
zwy dwuczonowej, to zamiast przerwy uyj znaku podkrelenia _.
W przypadku jzyka HTML za pomoc kolejnych atrybutw moemy okreli w iel
ko naszego obrazka. Odpowiadaj za to atrybuty width i height. Ich uywanie przy
powikszaniu naszego obrazka powoduje znaczne pogorszenie jego jakoci, lepiej wic
od razu przygotowa obrazek w zamierzonej wielkoci, ni potem dokonywa korekty
wielkoci za pomoc width i height. Przykad wywoania obrazka z podaniem wielkoci
zamieciem poniej.
<img src="hei on.gi f " alt="Obrazek oryginalny" height="64" width="94" />
<img src= "helion.gif" alt="Obrazek dwa razy wikszy" height="128" width="188 />

Natomiast w sytuacji, gdy strona ma by zgodna z wymogami specyfikacji jzyka


XHTML, do okrelenia rozmiaru zaleca si stosowanie kaskadowych arkuszy stylw,
o ktrych bdzie mowa w jednym z nastpnych rozdziaw.

Uwaga

Skalowanie obrazka za pomoc atrybutw jzyka HTML powoduje pogorszenie jego


jakoci, a dodatkowo w przypadku zmniejszania oryginau nie zmniejsza wielkoci
samego pliku.

Kady element graficzny moe by tem Twojej strony. Zalecanym sposobem definicji
takiego ta s kaskadowe arkusze stylw; w zwizku z tym, jeeli szukasz informacji
na temat dodawania ta do strony, musisz sign do jednego z nastpnych rozdziaw.

56

Tworzenie stron WWW w praktyce

Osadzanie grafiki za pomoc edytora kED


W stawianie grafiki za pom oc edytora kED jest szalenie proste. Wystarczy, e umie
cisz kursor w odpowiednim miejscu dokumentu XHTML (HTML) (czyli tam, gdzie
ma znale si obrazek) i klikniesz ikon oznaczon na rysunku 2.20.
Rysunek 2.20.
D odawanie obrazka
etap pierw szy

4 > k E D 2 .1 A 0 -b e z_ n a zw y#
Pk

Edycja

Szukaj

XHTML

PHP

Ja^Script

* .* * M R
Opcje

#4.

* .......

Pomoc

j - o - uJ l 0*1 | \ j | a M t m i? j R
\ ? <>
| a a [g] M j i u / a^ * * m i i h b i b
|| aa i a an s
j

i~ a i a & g - 1% - T * is J n ; ) * - <> 1n a a a j i= t=~>


Piki

j ~ Elementy
ciga

|~ Wstawki
Notatki

Znaczniki i atrybuty XHTML

[*S|
|

&
^

O bez_nazwy (1S0)Q bez_nazwy (ISO) Q j


2
E ]< *D O C T Y P E h t m l P UB LIC - //W 3 C . DTD XHTMI
3
" h ttp ://w w w .w 3 .o r g /T R /x h tm ll/D T D /x h tm ll4--------- < h t m l x m l n s ~ " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x h t m
--------5------ ; . ^ h e a r h ------------------------------------ .
_
..

W nowym oknie (rysunek 2.21) kliknij przycisk Przegldaj.


Rysunek 2.21.
D odawanie obrazka
etap drugi

> Wstaw grafik

[ o s lH B E J

W kolejnym oknie (rysunek 2.22) odszukaj i wska obrazek, ktry ma trafi na stron
WWW. Nastpnie kliknij przycisk Otwrz. Uwaga w zalenoci od systemu operacyj
nego okno z rysunku 2.22 moe by inne. Przykad z rysunku 2.22 pochodzi z systemu
MS Windows Vista Ultimate.
Po wybraniu obrazka odpowiednie odwoanie pojawi si w polu Nazwa pliku. Teraz
przysza pora na to, aby uzupeni kolejne pola widoczne w oknie na rysunku 2.23.
Opis (alt) obowizkowe pole zawierajce alternatywny tekst wywietlany
zamiast obrazka. W ypisanie tego pola jest niezbdne do tego, aby strona by
zgodna z wszystkimi wymogami specyfikacji XHTML.
Opis (title) pole zawierajce opis pojawiajcy si w postaci chmurki
widocznej po najechaniu kursorem myszy na obrazek.
Szeroko i Wysoko pola pozwalaj na okrelenie rozmiaru obrazka.
Domylnie w obu polach pojawia si oryginalny rozmiar obrazka.

57

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

Otwieranie
Szukaj w:

Pulpit

Typ

Nazwa

o i

cm-

(461x614)

Data modyfikacji

&
Ostatnio
uywane miej,

Zdjcie dziaka
Folder plikw

Pulpit

! 1

Autelion - system informacji


dla autorw_1182343519712.,..
Obraz podrcznej grafiki sie...
bartek_danowski.jpg
Plik JPG
74,0 KB

B a rte k

A s'
Komputer

d l.
.

Download
Skrt
370 bajtw
Leksykon oprogramowania
DVD skrt
Cl, i *

Nazwa pliku:

PUki typu

bartek_danowskijpg

i Wszystkie obrazy f jpg * jpeg. bmp.* png.* ico

Rysunek 2.22. Dodawanie obrazka etap trzeci


Rysunek 2.23.
Dodawanie obrazka

etap czwarty

B E T **

. ) Wstaw grafik
Nazwa pHku (src)
C:\Users\Bartek\Desktop\bartek_danowski.jpg
Przegldaj..
Op (alt)
Bartosz Danowski
Ofiis (title)
Bartosz Danowskj
Szeroko

461

W ysoko

614

Ustawienia stylu
class
id

Q Zamie znaki \ na /

Po wprowadzeniu niezbdnych wartoci kliknij przycisk Wstaw. W tej chwili w miej


scu kursora pojawi si kompletny kod odpowiedzialny za wywietlanie obrazka na
stronie WWW (rysunek 2.24). Zwr uwag na to, czy kED nie wstawi bezporedniego
odwoania do pliku. Moe si tak sta w nastpujcych sytuacjach:
plik zawierajcy kod nie zosta zapisany na dysku przed wstawieniem obrazka,
obrazek znajduje si w innym katalogu lub na innym dysku ni plik
z kodem strony.
Aby unikn problemw z odwoaniami do obrazkw, warto utworzy sobie katalog,
w ktrym bdziemy przechowywa pliki tworzonej strony oraz obrazki.

58

Tworzenie stron WWW w praktyce

joi@

kED2.1A0-C:\Users\Bartek\DeslctopVtesLhtml
Plik

Edycja

Szukaj

XHTML

PHP

JavaScript

Opcje

Pomoc

j * u ' d * s ' d t | y *l % 1 B I
f

(.') M i; I ! / ;

&

tg

* m * i T 0

i x* x, j

i)

<> I

i i .1
I e

s il i?

test html (ISO) Q I


<^xmf v e r s T r t - l [ 0

e c d T g - T o - 8 ^ 9 -2

< !d o c ty p e htm l
" - //w 3 c //d to
.
s tr1 c r//E N "
?~ h
t t p : / ,www. wB. o r g /T R /x h tm ll/D T D /x h tm l l - s t r 1c t . d t d >
p u b l ic

xhtm l

< h tm l xml n s - " h ttp :/,/w w w . w 3 .o r g /1 9 9 9 /x h r m l" xro l: la n g - " p l " l a n g - p l" >
<head>
<m eta h ttp -e q u iv " C o r r te m > T y p e " c o n t e n t - 't e x t h tm l; c h a r s e t - 1 s o - 8 8 5 9 - 2 / >
<m eta nam e="keyw ords" c o n t e n t = " l i t e r a t u r a in f o r m a t y c z n a , B a rto s z D anow ski,
k s i k i" / >
<tneta n a m e -d e s c r ip t io n " c o n te n t= B a r to s z Danowski - s tr o n a a u t o r a lic z n y c h
p o ra d n ik w in fo rm a ty c z n y c h , in fo r m a c je o k s i k a c h , o p in ie c z y t e ln ik w ,
dodatkow e m a t e r i a y i p r z y k a d y ." / >
<m eta nam e- c o p y r ig h t " c o n t e n t - B a rto s z D anow ski" / >
<m eta n a m e -a u tn o r
c o n t e n t - 'B a r t o s z Danow ski" / >
<m eta n a m e -r o b o ts " c o n t e n t - in d e x ,f o llo w " / >
< t i t l e > B a r t o s z D a n o w s k i< /t it le >
< l i n k r e l - s t y le s h e e t " h r e f= " g lo w n y . cs s " t y p e - ' t e x t / c s s " / >
< /h e a d >
<body>
<imq s r c - " C : /u s e r s /B a r t e k /D e s k t o p /b a r t e k _ d a n o w s k i.jp g " a l t - " B a r t o s z D anow ski
t i t l e - " B a r t o s z D anow ski" w id th = " 4 6 1 " h e ig h t - " 6 1 4 " / >
< /b o d v >
; < /h t m l>

*> . f
NUM Rozmiar. 1003 B (0,96 KB)

K: 1, W: 22

Rysunek 2.24 . Dodawanie o brazka etap pity

Hiperlcza
Internet nie mgby istnie w obecnej formie bez hiperczy, czyli odnonikw. Wy
obra sobie, e wchodzisz na stron, na ktrej nie ma odnonikw musiaby ww
czas zna nazwy wszystkich podstron, by mc je rcznie wczyta w celu dalszego
przegldania. Jest to niewykonalne, poniewa nie ma moliwoci zmuszenia autora
strony, by przyj z gry narzucone nazewnictwo poszczeglnych jej czci. Poza tym,
w jaki sposb sporzdzi list takich nazw?
Innym rozwizaniem problemu braku hiperczy mogoby by tworzenie dugich poje
dynczych stron. Wyobra sobie jednak, jak przy takim rozwizaniu musiaby wyglda
portal internetowy, ktry z zaoenia jest zbiorem odnonikw.
Na szczcie twrcy XHTML (HTML) przewidzieli moliwo umieszczania hiper
czy, dziki czemu nie ma najm niejszego problemu z tym, by przeglda kad ze
stron, bez wzgldu na to, czym jest i kto j tworzy.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

59

Jak zapewne zauwaye podczas swoich sieciowych wdrwek, hipercza prowadz


na inne podstrony danego serwisu czy te przenosz Ci jednym klikniciem myszy
w zupenie inne miejsce, czsto lece na drugiej pkuli. Jest to naprawd niesamowita
sprawa, ale to nie wszystkie moliwoci odnonikw. Ot moesz jeszcze stworzy
odnoniki do poczty, grup dyskusyjnych, plikw, a take programw.
Hipercze z zaoenia jest odnonikiem prowadzcym w inne miejsce na inn stro
n. Zanim wprowadzono moliwo publikacji grafiki na stronie, hipercza wystpo
way jedynie w formie tekstowej i domylnie byy oznaczone za pom oc niebieskiego
podkrelonego tekstu. Odnoniki ju odwiedzone miay kolor fioletowy, dziki czemu
atwo byo odrni to, co ju widzielimy, od tego, co nam jeszcze zostao do obejrze
nia. Wraz z wprowadzeniem grafiki, a pniej kaskadowych arkuszy stylw, odnoniki
zmieniy swj wygld.

Hipercza tekstowe
Budowa hipercza tekstowego jest stosunkowo prosta i wyglda tak:
<a href="strona.htm l"> K liknij tu. by dowiedzie si czego wicej o mnie.</a>

Jak atwo wywnioskowa, znacznikiem odpowiedzialnym za odsyacze jest <a></a>,


wzbogacony o pewne atrybuty. I tak dla odsyacza takim obowizkowym atrybutem
jest href="adres lub nazwa pl i ku", okrelajcy, do jakiego dokumentu bd miejsca
ma prowadzi odnonik. Nasz odnonik ma wic posta:
<a href="nazwa_pliku.html">0pis</a>
<a href="h ttp ://www.hel i on.pl">0pi s</a>
<a href="h ttp ://www.hel i on.p l/ nazwa_pli ku.html">0pi s</a>

To tylko pierwsza cz odsyacza, informujca o tym, gdzie mamy si przenie. Teraz


naley opisa odsyacz tak, by by widoczny i dostpny na stronie:
<a href="http://www.helion.pl">Strona Wydawnictwa HELI0N</a>

Oczywicie, musisz pamita o znaczniku zam ykajcym </a>, gdy bez niego opis
naszego odsyacza bdzie nieskoczenie dugi.
Znacznik <a></a> naley do tych elementw, w przypadku ktrych brak zamknicia ma
niszczcy wpyw na stron, dlatego bezwzgldnie musisz pamita o jego zamkniciu.
Na rysunku 2.25 przedstawiem przykad strony, na ktrej nie zamknem odnonika
zobacz, co si stao.
Jak widzisz, na rysunku 2.25 dla pierwszego elementu strony odnonik obejmuje jedy
nie sowa CAD Magazyn, drugi element przedstawia sytuacj, gdy nie zamknem
znacznika <a></a>, w efekcie czego odsyaczem jest cay tekst wystpujcy po znaczni
ku otwierajcym.
Tabela 2.3 przedstawia konstrukcj odsyaczy do rnych miejsc lub elementw w i
tryny. Pierwszy to odwoanie do pliku strony, drugi jest odsyaczem do konkretnego
obrazka, kolejny to hipercze do innej witryny dostpnej w sieci, a ostatni to cze
z serwerem FTP, na ktrym moesz przechowywa swoje programy lub inne pliki.

Tworzenie stron WWW w praktyce

60

Rysunek 2.25.
Przykad hipercza
drugi z przykadw
pokazuje, co si dzieje,
gdy zapomnimy
zamkn znacznik <a>

C A P Magazyn. Czasopism o pow icone zagadnieniom C A D /C A M /C A E,


przeznaczone dla inynierw, m echanikw i konstruktorw , pow iecone take
architektom i budow lacom czyli brany A EC. M ona w nim znale artykuy
opisujce konkretne program y, porady dowiadczonych uytkownikw i opisy
w droe w polskich realiach.

C A P Magazyn. Czasopism o pow iecone zagadnieniom CAD /C A M /C A E;


przeznaczone dla inynierw, mechanikw i konstruktorw , pow iecone take
architektom i budow lacom czyli.brany AEC. M ona w rum znale artykuy
opisujce konkretne program y, porady dow iadczonych uytkownikw i opisy
w droe w polskich realiach.

Tabela 2.3. Przykady odsyaczy


dokum enty htm l, t x t etc.

<a h re f= "p lik.h tm l"> O p is< /a >

obrazek

<a href="obrazek.gif">Opis</a>

adresy URL

<a href="h ttp : / I vum.h e lio n .com.pi">0pis</a>

adresy FTP

<a href="f t p : 11 f t p .he 1ion.com.pl">0pis</a>

adres gupy dyskusyjnej

<a href ="news:p i .comp.mw">0pis</a>

Nieco inaczej wyglda sprawa odsyacza do adresu e-mail, ktry umoliwia otwarcie
odpowiedniego okna program u pocztowego w celu wysania poczty. M usisz jednak
pamita, e jeeli ogldajcy Twoj stron nie posiada konta e-mail, to w ten sposb
nie bdzie mg do Ciebie napisa. Dokadniej mwic, by taki odsyacz zadziaa,
osoba, ktra go klika, musi mie na swoim komputerze skonfigurowane oprogramowa
nie do obsugi poczty e-mail, np. MS Outlook Express.
Pocztowe hipercze ma nastpujc posta:
<a href="mailto:bartek@danowski.pl">Wylij do mnie wiadomo</a>

Jak widzisz, w cudzysowie atrybutu h re f znajduje si przed adresem e-mail sowo


mai 1t o : oraz dwukropek, ktry oddziela t deklaracj od adresu e-mail.
Odsyacz pocztowy moesz nieznacznie rozbudowa, dziki czemu istnieje moliwo
narzucenia tematu wiadomoci. Odpowiednia konstrukcja znajduje si poniej.
<a href="mailto:bartek@danowski,pl?subject=Ocena ksiki">0ce moj ksik</a>

Zmiana pojawia si rwnie w cudzysowie atrybutu href, jednak tym razem wyst
puje po adresie e-mail i ma posta ?subject=temat wiadomoci. Po klikniciu tak skon
struowanego odsyacza zostanie otwarte okno nowej wiadomoci, a w polu tematu
znajdzie si tekst: Ocena ksiki.
Rozbudowana posta hipercza jest bardzo wygodna w sytuacji, gdy chcesz narzuci
stay temat korespondencji na przykad na stronie masz dzia i odnonik do Twojej
poczty, zatytuowany Uwagi o serwisie WWW. Jeeli ustawisz temat, atwo bdziesz
mg w przyszoci sprawdzi, skd przysza poczta. Oczywicie, zmiana takiego na
rzuconego tematu wiadomoci jest moliwa, jednak zapewniam Ci, e nie jest to czsta

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

61

sytuacja, gdy wikszo internautw jest bardzo leniwa i nie chce si im wpisywa
nowego tematu wiadomoci lub go modyfikowa. Sam dostaj codziennie dziesitki
listw i spora ich liczba jest pozbawiona tematu lub ma on posta szcztkow.
Kady odsyacz (rwnie graficzny) moe zawiera dodatkowe i czsto przydatne
atrybuty. Mam tutaj na myli target oraz title. Pierwszy z atrybutw pozwala okreli
sposb otwierania odnonika. Dokadniej mwic, po klikniciu odnonika z atrybu
tem target moe on zosta otwarty na cztery sposoby.
Atrybut ta rg e t zawiera dodatkowo cztery zdefiniowane wartoci. S to:
target="_blank",
ta rg e t= ''_ se lf",
target="_parent",
ta rg e t-'_ to p ".

Pierwsza warto spowoduje otwarcie nowego okna przegldarki i wywietlenie w nim


danego dokumentu. Kolejna warto _ s e lf jest domylna i spowoduje, e dokument
zostanie wywietlony w tym samym oknie przegldarki. Warto trzecia dokona zamia
ny dokumentu nadrzdnego dla biecego dokumentu. Ostatnia warto spowoduje
ponowne wczytanie zawartoci okna i wywietlenie nowego dokumentu, czyli dokona
zmiany na miejscu dokumentu pierwszego w hierarchii skokw.
W codziennej pracy stosujemy ta rg e t z wartoci blank i dziki niej otwieramy dany

odnonik w nowym oknie przegldarki. Pozostae wartoci przydaj si w przypadku


stron zbudowanych z wykorzystaniem ramek.
Drugi z atrybutw nosi nazw t i t l e i pozwala na doczenie do odnonika dodatkowego
opisu, ktry bdzie widoczny po umieszczeniu kursora myszy nad opisem hipercza.
Poniej zamieciem przykad odsyacza wraz z dodatkowym opisem, otwierajcego si
w nowym oknie przegldarki.
<a href=''http://danowski .p l" target=_blank title=Oficjalna strona Bartosza
Danowski ego>Ba rtosz Danowski </a>

Hipercza graficzne
Skoro ju wiesz, w jaki sposb przygotowa odsyacz tekstowy oraz umieci grafik
na stronie WWW, pora zastanowi si nad sposobem tworzenia hiperczy graficznych.
W celu utworzenia odsyacza graficznego musisz odwoa si do dotychczas uzyska
nej wiedzy. Przypomnij sobie znacznik odpowiedzialny za wstawianie obrazka oraz
tworzenie hipercza. Poniej zamieciem prosty przykad odpowiedniego poczenia
wspomnianych elementw jzyka XHTML (HTML).
<a href="h ttp ://danowski,pl ">
<img src= /img/banner.gif" alt="Bartosz Danowski" width="94'' height= 19" />
</a>

62

Tworzenie stron WWW w praktyce

Jak w idzisz, dodanie graficznego hipercza nie jest niczym skomplikowanym i bez
wikszego problemu sobie z tym poradzisz.

Mapy odsyaczy
Kady obrazek moe by hiperczem do jakiego pliku lub innej strony. Zwr uwa
g, e dotyczy to caego obrazka. Z chwil umoliwienia publikacji grafiki na stronie,
w erze stron opartych na grafice, zaistniaa potrzeba definiowana mapy odsyaczy
inaczej mwic, obrazka, ktrego rne czci s odsyaczami do innych miejsc.
Pierwszym rozwizaniem, jakie si nasuwa, jest pocicie naszego obrazka na mniejsze
czci i zadeklarowanie dla kadej z nich innego odsyacza. Jest to rozwizanie dobre
i czsto stosowane, ale nie zawsze spenia ono oczekiwania projektantw bo wie
si z koniecznoci wstawienia pocitych kawakw obrazka do odpowiednio zbudo
wanej tabeli.
K olejn m etod jest budowa mapy odsyaczy. Na serwerze http://www.tucows.com/
Windows moesz znale kilka dobrych programw, ktre uatwi Ci budow takiej
mapy. Poniej wym ieniem jedne z ciekawszych narzdzi dostpnych na serwerze
TUCOWS.
CoffeeCup Image Mapper,
CuteMAP,
M apEdit Imagemap Editing Software,
HTML Map Designer Pro.
Za deklaracj mapy odsyaczy odpowiada znacznik <map></map>. Zawiera on obowiz
kowy atrybut name="", ktry pniej jest wykorzystywany przy osadzaniu obrazka za
pom oc znacznika <img />. W ewntrz <map></map> znajduje si znacznik <area />,
ktry definiuje aktywny obszar danego hipercza. Jak widzisz na poniszym przyka
dzie, znacznik <area /> zawiera nastpujce atrybuty:
h ref= "" atrybut znany z definicji hiperczy,
coords=" definiuje wsprzdne kracowych punktw aktywnego obszaru,
shape="" okrela, czy aktywny obszar jest: koem, kwadratem,
obszarem dowolnym, przyjmuje nastpujce wartoci:
c ir c le koo,
re c t - kwadrat,
poi ygon wielokt.
title = " " odpowiednik atrybutu a l t , omawianego przy okazji wstawiania
obrazkw na stron.
W praktyce musisz otworzy obrazek w programie graficznym i odczyta wsprzdne
obszarw aktywnych. Na rysunkach 2.26 oraz 2.27 skorzystaem z darmowego progra
mu graficznego Paint.Net i zaznaczyem pewne obszary przyjrzyj si im.

63

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

|g

_ I=. i a t e a n J

3 .1 3 . (100%) - Pam tNET v3.08

File

Edit

View

Image

Layers

4 (& m
Tool: ^

Quality: Smooth

Adjustments

<

Effects

....... l-'i'ofe.... 1......... 16....... '.........li 6b'.....

9 *
O Q.
% &
\
J
2
1
A
o

Window

Window * <

|iiu
i i'1 i i i300
zAW'
2Qu

*----

[j|

J -------------- ------ 1---------

_________________

U
2
J
.*
Mi
o

Rysunek 2 .2 6 . Odczytywanie wsprzdnych obszaru majcego sta si hiperlczem


lewy grny naronik

Jak widzisz, na rysunku 2.26 umieciem kursor myszy w lewym grnym naroniku.
Zwr te uwag na lewy dolny rg caego rysunku 2.26 zaznaczyem w nim dwie
liczby: 253 oraz 136. S to wsprzdne pierwszego punktu, ktre s potrzebne do
stworzenia mapy odsyaczy. Sytuacja wyglda podobnie na rysunku 2.27, z tym e tym
razem zajem si prawym dolnym naronikiem obszaru.
Masz ju wsprzdne punktw oraz wiesz, e aktywne obszary obrazka s prostok
tami. Czas stworzy odpowiedni kod, definiujcy map odsyaczy na stronie WWW.
Poniej zamieciem przykadowy listing odpowiedzialny za sporzdzanie mapy odsy
aczy dla przykadowego rysunku.
<body>
<map name="test''>
<area href="http://danow ski,pl" shape="rect" coords="253.136.332.223" />
</map>
<img src="obrazek.gif" border= 0 height="346" width=324 usemap="#test" />
</body>

64

Tworzenie stron WWW w praktyce

1c=>l a beiaJ'

3.13.tif (100%) - Paint.NET v3.08


File

tdrt

View

t> S 3 i d v i
Tool:

Image

b U

Layers
4

Adjustments

-1

Effects
Window

Window
- at,

Help

i f I F ] Units: Pixels

Quality. Smooth

-Z

M i

; Move Selected Pixels: Drag the selection to move. Drag the nubs to scale. Drag with nght n jj j 346 x 324

| t j 332,223

Rysunek 2 .2 7 . Odczytywanie wsprzdnych obszaru majcego sta si hiperczem


praw y dolny naronik

Przeanalizujemy po kolei cay kod. W pierwszym wierszu znajduje si znacznik <map>


wraz z atrybutem name. Jest to cz obowizkowa dla kadej mapy. Uycie atrybutu
name pozwala na zdefiniowane kilku lub kilkunastu map odsyaczy na jednej stronie.
Nastpne wiersze listingu to okrelenie aktywnego obszaru oraz adresu, do ktrego ma
on prowadzi.
<area href="http://danow ski.pl" shape="rect'' coords="253,136.332,223" />

Pogrubiona cz listingu odpowiada za definicj obszaru mapy.


<area href="http://danow ski,pl" shape="rect" coords="253,136.332,223 />

N astpny wyrniony elem ent to adres, do ktrego ma prowadzi obszar na mapie


odsyaczy.
<area href="http ://d a n o w ski.p l" shape="rect" coords=''253.136,332,223" />

Atrybut SHAPE okrela ksztat aktywnego obszaru.


<area href="http://danow ski,pl" shape="rect coords="253,136,332,223" />

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

65

Ostatnia cz okrela wsprzdne aktywnego obszaru. Przypomn, e dla przyka


dowego prostokta chodzi o lewy grny i prawy dolny wierzchoek.
Po znaczniku zamykajcym </map> znajduje si wywoanie obrazka na stronie WWW.
Jednak bardzo wanym elementem tego fragmentu kodu jest atrybut name. Odpowiada
on za poczenia obrazka z map zdefiniowan w kodzie strony. Warto name w znacz
niku <img /> powinna by taka sama jak nazwa nadana mapie odsyaczy, a do tego
bezporednio przed ni musisz umieci znak #.
Oczywicie, nie ma takiej koniecznoci, by wywoanie obrazka znajdowao si bez
porednio pod kodem definiujcym map odsyaczy. Spokojnie moesz umieci de
finicj mapy tu po otwierajcym znaczniku <body>, a obrazek wstawi do dokumentu,
np. na jego kocu. Wane jest tylko, by poprawnie nada nazw mapie i pniej t sam
nazw wywoa w znaczniku obrazka.
Tworzc map odsyaczy z obszarami aktywnym i w ksztacie koa, musisz okreli
dwa punkty: rodek koa oraz jego promie. W przypadku wieloktw natomiast dla
kadego z wierzchokw musisz zdefiniowa dwie wsprzdne. Przy tworzeniu wieloktnych obszarw aktywnych zdecydowanie polecam uywanie specjalnych narzdzi,
o ktrych ju wczeniej wspominaem.
Ciekawy sposb uycia map odsyaczy jest wykorzystany na stronie http://www.bryce.pl.

Kotwice
Przedstawione odsyacze odnosz si do konkretnego pliku, ale w poczeniu z kotwic
pozwalaj odwoa si do konkretnego miejsca w danym dokumencie. Oznacza to, e
odniesienie si do konkretnego pliku i do zadeklarowanej kotwicy spowoduje otwar
cie przez przegldark wskazanego pliku oraz przewinicie dokumentu tak, by linia
zawierajca kotwic bya moliwie najbliej grnej krawdzi przegldarki. Jest to roz
wizanie przydatne w przypadku tworzenia dokumentw duszych ni jedna lub dwie
dugoci ekranu monitora, gdy uatwia nawigacj.
Deklaracja kotwicy moe wyglda nastpujco:
<a id=" nazwa_kotwicy">Fragment</a> tekstu dokumentu ...
<a \d="nazwa_kotwicy"></a>

Poniej przedstawiam efekt odniesienia si do tej kotwicy za pomoc polecenia umiesz


czonego wewntrz kodu strony:
<p>Jeli chcesz odwoa si do kotwicy znajdujcej si na te j stronie, k lik n ij
<a href="nazwa_pliku.html#nazwa_kotwicy">tutaj</a>. Strona zostanie przewinita
do odpowiedniego miejsca, w ktrym wstawie kotwic.</p>

Jeeli chcesz odwoa si do kotwicy zamieszczonej na tej samej stronie co odnonik,


wystarczy nastpujca deklaracja:
<a href="#etykieta">Do gry</a>

66

Tworzenie stron WWW w praktyce

gdzie #riazwa_kotwicy to nazwa kotwicy znajdujcej si w grnej czci strony. Dzia


anie takiego odsyacza jest bardzo proste i ogranicza si do przewinicia strony oraz
ustawienia linii zawierajcej kotwic o nazwie #nazwa_kotwicy rwno z grnym brze
giem okna przegldarki.
Stosowanie kotwic oraz odsyaczy wykorzystujcych moliwo odwoania si do kon
kretnego miejsca ma sens zwaszcza przy bardzo dugich stronach. W takim przypadku
odsyacz i kotwica m og uproci nawigacj po stronie.
Idealnym zastosowaniem dla kotwic jest strona uywana do publikacji dugich arty
kuw czy te aktw prawnych lub dokumentw, w ktrych w grnej czci znajduje
si spis treci.

Adresy wzgldne i bezwzgldne


Warto napisa jeszcze kilka sw na temat odsyaczy, poniewa istniej dwa ich ro
dzaje, w zg l d n e i b e zw zg l d n e . Odsyacz bezwzgldny zawiera dokadny adres URL
do danego pliku i wyglda tak:
<a href="http://danowski.pl/nazwa_pliku.html">To je s t odnonik do pliku na stronie
Bartosza Danowskiego</a>

Odnonik taki ma jed n istotn wad: w przypadku zmiany serwera, na ktrym publi
kujemy witryn, a co za tym idzie jego adresu, bdziemy musieli poprawi wszystkie
odnoniki zapisane w ten sposb. Odnonikw bezwzgldnych powinno si uywa
do czenia zewntrznych stron, a przy dokumentach wewntrz jednego serwisu naley
stosowa odnoniki wzgldne.
Odnonik wzgldny ma nastpujc posta:
<a href="nazwa_pliku.htmT'>To je s t odnonik wzgldny</a>

Przykadowe hipercze odnosi si do pliku umieszczonego w tym samym katalogu.


Rozpatrzmy teraz przypadek, gdy nasz serwis zawiera kilka dziaw, a kady z nich
ma zadeklarowany oddzielny katalog. Struktura folderw zostaa oglnie przedstawiona
na rysunku 2.28.
Nasze pliki znajduj si wewntrz katalogw. Zaczniemy od zadeklarowania hipote
tycznego cza pomidzy plikami in d e x .h tm l a p lik.h tm l:
<a href="plik.html">0dnonik do pliku.html</a>

Teraz p lik .h tm l poczymy z plikiem oferta.htm l, znajdujcym si w podkatalogu O ferta :


<a href="oferta/oferta.html">0dnonik do p lik u oferta.html</a>

W nastpujcy sposb poczymy plik in fo rm a c je .h tm l z plikiem in d e x .h tm l :


<a href= ../in d e x .h tm l">0dnonik do index.html</a>

Natomiast czenie pliku in fo rm a c je .h tm l z plikiem o ferta .h tm l ma tak posta:


<a h re f= ". ./oferta/oferta.htm l>0dnonik do oferta.html</a>

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

Rysunek 2.28.
Przykadowe
drzewo katalogw

67

Katalog gwny strony


zawiera pliki:
index.html
plik.html

Dwie kropki ( . . ) sugeruj, by przegldarka w poszukiwaniu pliku wrcia o jedno


pitro wyej. Deklaracja katalogu bezporednio po dwch kropkach ( . . ) mwi, by
przegldarka zesza o jedno pitro niej w drzewie katalogw czyli do katalogu
ssiedniego w poszukiwaniu danego pliku. Oczywicie cig
moe by do
wolnie dugi w zalenoci od potrzeb.

Uwaga

Pamitaj, e adresy internetowe zawieraj /, a nie \ jak katalogi w DOS czy


MS Windows.
Pamitaj, e pusty odsyacz na stronie le wiadczy o samej witrynie, jak i jej twrcy.
Dlatego dbaj o to, by taka sytuacja nigdy nie zaistniaa w Twoich projektach.

Tworzenie hiperczy za pomoc edytora kED


Edytor kED pozwala na wygodne tworzenie hiperczy tekstowych. Czynno t mo
emy wykona na dwa sposoby. Pierwszy sposb ogranicza si do kliknicia przycisku
oznaczonego za pomoc strzaki na rysunku 2.29 (mona skorzysta ze skrtu Ctrl+M)
i wpisania niezbdnych danych w nowym oknie.
W polu Element docelowy moesz wybra z listy rodzaj odnonika, jaki chcesz stwo
rzy (odwoanie do innej strony, poczty e-mail lub serwera FTP). Po wybraniu rodzaju
odnonika naley dopisa odpowiedni adres strony, poczty lub serwera.
Kolejnym elementem, ktry naley uzupeni, jest Tre odnonika, czyli to, co bdzie
si pojawia na stronie. Innymi sowy, warto wpisana w polu Tre odnonika to nic
innego jak tekst umieszczony pomidzy znacznikami <a></a>.
Opis to nastpny element, ktry moemy uzupeni ale nie musimy. Tekst wpisany
w polu Opis bdzie widoczny w chwili, gdy umiecimy kursor myszy bezporednio
nad odnonikiem.

68

Tworzenie stron WWW w praktyce

kD 2.1.4.0 - C:\Usef5\8artek\Desktop\Strona WWW\testhtml *


Plik

Edycja

J -

<-

Szukaj

XHTML

- - A J

PHP

JavaScript

Opcje

Pomoc

J i p * H % h ! t i ta !

t #

i iRE M i B ><! / <! * a X* xi ( n H H H

O ia*0 |a a a a |E s >
>Ol

a j S S 'l t '

ffl- CA[Vista]
<10 DA[System]
sa*E \ [Media]
I
EA[Dokumenty]
ffl-S#GA[Pfcil

HA[Roboczy]

15

<*xmT' v e r s ' o n - " i ' .


enc"dTng-MT s o G < OOCTYPE htrol PUBLIC " -//W 3 C //O T D XHTML 1 . 0 S t r ic t /'/E N "
: h t t p : //w w w . w3. o r g /T R / x h t r o l l / O T D / x h t t n l l - s t r i c t . d td " >
; < h tm l xm ln s " h t t p : //w w w .w 3 .o r g /1 9 9 9 /x h t m V x m l: l a n g - " p l la n g - " p l" >
i< h e a d >
<m eta h t t p - e q u 1 v - " c o n t e n t - T y p e " c o n t e n t " ! e x t / h t m l ; c b a r s e t = is o - 8 8 5 9 - 2 " / >
<m eta nam e-"keyw ords" c o r r t e n t - ' l i t e r a t u r a in f o r m a ty c z n a , B a rto s z D ano w ski,
k s i k i / >
cm eta n a m e " d e s c r1 p tio n " c o n t e n t= " B a r to s z Danowski - s tr o n a a u to r a lic n y c h
p o ra d n ik w in fo r m a ty c z n y c h , in f o r m a c je o k s i k a c h , o p in ie c z y te ln ik w ,
d odatkow e m a t e r i a y i p r z y k a d y ." / >
<m eta n a m e -''c o p y r1 q h t" c o n te rrt= " B a rto s z Danow ski" / >
<m eta n a m e -" a u tn o r
c o n t e n t - B a r to s z D anow ski" / >
cmeta nam e-r o b o ts " c o n t e n t - 'i n d e x , f o l l o w / >
< t i t l e > B a r t o s z D a n o w s k i< /t 1 tle >
clin k r e l " s t y l e s h e e t h r e f - g lo w n y .c s s " t y p e - " t e x t / c s s / >
;/h ead >
<body>
Wstaw odnonik

</b od y>
< /h tm I>

temcnt docelowy (href)


http//danowski. p>l

j~Przegldaj... |

Tre odnonika
Bartosz Danowski
Opis (tttte)
Ofajalan strona Bartosza Danowskiego
Qkno docelowe (target)

Ustawie stylu
dass

Zamieniaj w nazw etementu docelowego znaki \ na /

jj

Kod

j SX
NUM Rozmiar. 8 B [0,85 KB)

K:1,W:16

Rysunek 2 .2 9 . Dodawanie hipercza tekstowego

Okno docelowe pozwala na wybranie wartoci przypisanej do atrybutu target. Innymi


sowy, ustawiajc w tym miejscu warto _ s e lf, wymusimy otwieranie nowego okna
po klikniciu odsyacza.
Pole id suy midzy innymi do okrelania nazwy kotwicy, do ktrej ma odwoa si
hipercze.
Po wprowadzeniu wszystkich elementw odsyacza naley klikn przycisk Wstaw.
W miejscu, w ktrym znajdow a si kursor, pojawi si odpowiedni kod odsyacza.
Warto w tym miejscu zwrci uwag na to, e w kodzie odsyacza ze zdefiniowan
kotw icjest pewien bd.
<a href=''h ttp : //danowski .p l" id="nazwa_kotwicy" name="nazwa_kotwicy" title =
"O ficjalan strona Bartosza Danowskiego">Bartosz Danowski</a>

Zgodnie z zaleceniami specyfikacji jzyka HTML kotwic okrelamy za pomoc


atrybutu name. Natomiast w przypadki XHTML name zostao zastpione przez id. Nie
stety kED wstawia obie wartoci, co zmusza nas do pamitania o tym, aby usun t,
ktra jest zbdna.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

69

Osobicie jestem zwolennikiem drugiej metody wstawiania odnonikw i tworzenia


samego kodu. W tym przypadku po prostu wpisujemy nazw znacznika, a nastpnie
dopisujemy poszczeglne atrybuty wraz z wartociami.
Dodawanie kotwic do tworzonej strony jest jeszcze mniej skomplikowane. Rwnie
tym razem moesz skorzysta z kreatora, ktry wszystko zrobi za Ciebie. W ystarczy,
e klikniesz przycisk oznaczony za pom oc strzaki na rysunku 2.30, w nowym oknie
wpiszesz nazw kotwicy i klikniesz OK. W miejscu, w ktrym znajdowa si kursor,
pojawi si kod kotwicy.
tssh h ti

I kED 2.14.0 - C:\Users\Bartek\Desktop\Strona W W W tte s th tm l


Plik

Edycja

Szukaj

XH TM L

PH P

JavaScript

j
i i ?' ;
F ... ( j M jj ' B !!! Z o
m i a s t ! - |_%-

Po m oc

J akl J | J i

! E l M BI M SS i

P, G iaW *

at

l I - o i ^ 3 S g i B B S *

Drzewo dokumentu

J
j ^

O pcje

i (B O ) Q |

-c^xmK v e r s i o n - 'l . o " e n co d -fn g -His o - ^ -2 ''^ >


^jOOC TYPE h t Oli PUBLIC " - //W 3 C //O T D XHTWL 1 . 0 5 t r i C t //E N "
. ,'www. w3. o r g / T R / x h t r o l l / D T D / x h t m l l - s t r i c t . d t d V
-chtml x m ln s -" h t t p : //w w w .w 3 .o r g /1 9 9 9 /x h t m l" x r a l: la n g - " p l" la n g - " p l" >
<head>
<m eta h t t p - e q u iv " C o n te n t- T y p e " c o n t e n t - " t e x t / h t m l : c h a r s e t - i s o - 8 8 5 9 - 2 " / >
<raeta n am e-"keyw ords" c o n t e n t - ' l i t e r a t u r a in fo r m a t y c z n a , B a r to s z D a n o w s k i,
k s i k i" / >
< m eta n a m e - 'd e s c r ip t io n " c o n t e n t - " B a r t o s z Dar>owski - s t r o n a a u t o r a lic z n y c h
p o ra d n ik w in fo r m a ty c z n y c h . In f o r m a c je o k s i k a c h , o p in ie c z y t e ln ik w ,
dodatkow e m a t e r i a y i p r z y k a d y ." / >
< m eta nam e- c o p y r ig h t ' c o n t e n t - 'B a r t o s z o a n o w ski" / >
<roeta n a m e -'a u tn o r
c o n t e n t - 'B a r t o s z o a n o w ski" / >
< m eta n am e-r o b o ts " c o n t e n t - " in d e x , f o l l o w " / >
< t it le > B a r t o s z o a n o w s k i< /title >
< l i n k r e l - s t y le s h e e t " h r e f - " g lo w n y .cs s " t y p e - " t e x t / c s s " / >

C:\fVwtal
DA (Systemj

S S * E .A [Medaj
F:\ pokumentyl
s * . G A IPHM
H hA [Roboczy]

</head>
;<body>
< a h r e f - " h t t p : //d a r s o w s k i. p i " t i t l e - 'O f i c j a l a n s t r o n a B a r to s z a D anow skieg o">
B a r to s z D a n o w s k i< /a >

I< /b o d y >

</html>

U:-

W staw ienie kotw icy


W pisz nazw kotwicy:
nezwe_kotwicj

.1

km

) J * PodjWi
INS

: ' - NUM Roimtar 968 B (0.95 KB)

Rysunek 2.30. D odawanie kotwicy

Tabele
Wprowadzenie obsugi tabel w jzyku HTML spowodowao prawdziw rewolucj. To
wanie dziki tabelom strony nabray ciekawego wygldu i stay si bardziej prze
strzenne ni dotychczas. W tym miejscu zaryzykuj twierdzenie, e tabele stay si tak
popularne jako narzdzie wykorzystywane do budowania struktury strony, e w pew
nym momencie si przejady. W raz z popularyzacj XHTML i CSS zaprzestano

70

Tworzenie stron WWW w praktyce

korzystania z tabel i zastpiono je pozycjonowaniem elementw oraz warstwami. Takie


podejcie spowodowao znaczce odchudzenie kodu strony, popraw szybkoci wczy
tywania oraz umoliwio realizacj bardziej skomplikowanych projektw.
Zwr uwag, e ju nie spotyka si stron, ktre skadaj si z jednej szpalty tekstu
cigncego si w nieskoczono tak jak na rysunku 2.31.
Rysunek 2.31.
P rzykad strony
cigncej si
w nieskoczono
jed n a szpalta tekstu

Adam
Strona prywatna

Na stronie znajdziesz:

Q Co o mnie
@ Kcik porad prawnych (z zakresu prawa pracy)
@ Klub Fiata Uno
@ Troch ciekawych linkw
@ A moe chcesz w cos zagra...

Bd w dziczny za wszystkie uwagi na temat strony


i in n korespondencj
E-Mail*

Strona ostatnio zmodyfikowana: iroda, 22 sierpnia 2001

Naleze d o sy jtg n u B 3 p .g P q.wer

Stronamajiujt1mmttrwmnmwwm.rmntbNkapl
R e p u b lik a

W W W

Dzisiaj niemal kady projekt posiada kilka oddzielnych blokw, znajdujcych si obok
siebie. Przykadem takiej strony moe by moja witryna dostpna pod adresem http://
danowski.pl patrz rysunek 2.32.
Pomimo popularyzacji XHTML i CSS oraz coraz lepszej obsugi nowych rozwiza
we wspczesnych przegldarkach nadal wikszo stron jest budowana przy wykorzy
staniu tabel. We wntrzu tabel znajduj si: tekst, grafika, formularze, a nawet inne
tabele. Prawd mwic, nawet moja strona domowa w poprzedniej wersji te opieraa

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

Rysunek 2.32.
Przykad strony
z kilkoma kolumnami
tekstu

71

Bartosz Danowski

lite ra tu ra in fo rm aty czn a


S tro n a qW>wna j' Ksiki !j Artykuy '! O

"| Ptzydi-oe strony ; K ontakt ! Sklep

Danowski.pl

Szukaj

Nero - problemy z jzykiem polskim


*** 9.0 6 .2 0 0 ? V1Nie ma kom entarzy Edytuj
Dostaem ktlka p y ta d o ty c z cy c h te g o sam ego problemu. W
skrcie chodzi o to.
oryginalny zakupiony w polskim sklepie
pakiet Nero 7 nie w yw ietla si w jzyku polskim. Przyczyn
takiego sta n u rzeczy je s t bd instalatora. Na szczcie
rozwizanie je s t bardzo proste.

te

! C zytaj cao

> Aktualnoci
Ciekawe programy
Mozilla
Nero

Rewelacyjna wtyczka do Firefoksa

Kategorie

19.06.2007 y p Nie ma kom entarzy Edytuj

* Nie na te m at
Ogoszenia

Screengrab je s t bardzo p rak ty czn w tyczk do przegldarki


Mozilla Pirefo*. D odatek pozwala n a spraw ne i szybkie wykonanie
zrzutu ekranu z z aw arto ci przegldanej stro n y WWW.

* Porady

Czytaj cao *

Prgierz

Nowa ciekawa promocja


3 J 5.06.2007 P N ie ma kom entarzy Edytuj
Ksi2ka Pozycjonowanie i optymalizacja stro n WWW. Jak si to
robi je s t o b j ta now - i mam nadziej ciekaw - promocj.
Ot c e n a ksiki zostaa czasow o obniona i kadego dnia
w zrasta o 2 z, az do chwi osignicia pierw otnej w artoci (39,90
z). Dzisiejsza c en a ksiki to 33.90 z, a ju tro bdzie o 2 z
wicej...
Na [...}

* Pozycjonow anie stro n

Strony WWW i in ternet


Wanie pisz

Opinie czytelnikw

niezmiernie

Je ste m
zadowolony z Pana
ksiki p t:
"Tworzenie stron
WWW w praktyce.

W R H T *

C zytaj c ao

Pozycjonowanie i optymalizacja stron WWW. Jak to si


robi
3 12.06.2007

Bogi

Komentarzy. 2 Edytuj
WebAucfit Blog

Dziki ksice " P o z y c jo n o w a n ie


o p ty m a liz a c ja s tr o n WWW. Ja k t o si
ro b i" zrozumiesz, jak dziaaj wyszukiwarki,
jak wpywa to n a kolejno wywietlania
odnonikw do znalezionych m atenaw , a
przede wszystkim jak uzy te j wiedzy do
tworzenia stron, ktre b d zajmoway
wysokie pozycje w wynikach wyszukiwania.
Poznasz take techniki umoliwiajce
popraw funkcjonalnoci witryny oraz
dodatkow e sposoby jej promowania, dziki czem u liczba osb
odw iedzajcych stro n y Twojej firmy szybko wzronie, podobnie
ja k generow ane przez ni zyski.
Czytaj c ao

Co nowego...
*** 0 7.06 2007 '-O Nie ma kom entarzy * Edytuj
Od dawna nie informowaem o rzeczach n ad ktrymi aktualnie
pracuj. Dlatego przysza pora aby nadrobi zalegoci i podzieli
si z Wami informacjami, o tym co skoczyem lub wanie pisz.

Poradnik w ebm astera


Tako rze cz e Shrew

m arcoos.techblog

RSS
( 3 W szystkie wpisy

..'

f l i

| J Ksiki
8 Artykuy

New sletter
Jeli c h ce sz by powiadamiany o
now ociach na stronie zaprenumeruj
b iu le ty n in fo rm a c y jn y

Czytaj cao

si na tabelach. Na szczcie teraz, gdy czytasz te sowa, mog Ci zapewni, e to


ju si zmienio. To, co widzisz na rysunku 2.32, to ju efekt dziaania kaskadowych
arkuszy stylw.

Uwaga

Staraj si nie uywa tabel do budowy struktury witryny. Obecnie m asz znacznie
lepsze i wydajniejsze techniki XHTML i CSS. Tabel uywaj wycznie do prezentacji
tych danych, ktre tego faktycznie wymagaj, np. mog to by jakie terminarze
albo fragmenty arkuszy kalkulacyjnych.

Tworzenie stron WWW w praktyce

72

Proste tabele
Kada tabela skada si z odpowiedniej kombinacji znacznikw <table></table>,
< tr> < /tr> oraz <td></td>. Przykad prostej symetrycznej tabeli z obramowaniem.
<body>
<table border="l">
<tr>
<td>Pierwsza komrka tabel i </td>
<td>Druga komrka ta b e li</td>
< /tr>
<tr>
<td>Trzecia komrka tabeli</td>
<td>Czwarta komrka tabeli</td>
< /tr>
</table>
</body>

Konstrukcja tabeli jest stosunkowo prosta do opanowania, jednak wymaga, by kady


znacznik wprowadza bardzo uwanie. Maa pomyka, np. brak zamknicia znacznika,
moe spowodowa bdne wywietlenie caoci.
Znacznik <table></table> okrela oglne ramy tabeli, natomiast za pomoc <tr> < /tr>
wstawiamy jej wiersze. Kady wiersz to jedna para znacznikw < tr> < /tr> . Przyka
dowy listing zawiera dwie pary tych znacznikw, co oznacza, e tabela ma dwa wier
sze. W ewntrz wiersza znajduj si komrki, ktre s tworzone za pomoc znacznika
<td></td>. Jedna para znacznikw odpowiada jednej komrce tabeli. Przykadowa ta
bela zawiera po dwie komrki w kadym wierszu, co oznacza, e ma ona dwa wiersze,
a w kadym z nich dwie komrki. Pamitaj, e w symetrycznej tabeli w kadym wierszu
znajduje si dokadnie tyle samo komrek. Oczywicie, nieco pniej dowiesz si, jak
stworzy tabele niesymetryczne o zrnicowanej liczbie komrek w kadym wierszu.
Bardzo czsto przy tworzeniu tabel zdarza si, e jeden wiersz zawiera opis zawarto
ci nagwek tabeli. Zazwyczaj chcemy, by ten element wyrnia si na tle reszty,
np. poprzez pogrubion czcionk i wyrodkowany tekst. Na stronie W WW efekt ten
mona uzyska, stosujc zamiast znacznika <td></td> inny znacznik: <th></th>. Jedyna
rnica polega na tym, e zawarto takiej komrki zostanie przedstawiona za pomoc
pogrubionej czcionki i wyrodkowanego tekstu. Stosowanie tego znacznika ma rwnie
znaczenie, gdy chcesz w przyszoci upikszy tabel za pomoc kaskadowych arku
szy stylw.

Uwaga

Przy tworzeniu tabel warto korzysta z tzw. wcinania kodu tak jak to wida na listin
gach, gdy dziki temu znacznie atwiej zapanowa nad skomplikowanym projektem.

Zwr uwag na zawarto znacznika <table>, w ktrym rozmylnie umieciem


atrybut b o rd e r-'1". Atrybut ten odpowiada za wywietlanie obramowania tabeli. Jeeli
go nie wpiszesz, tabela bdzie miaa niewidoczne obramowanie. Brak atrybutu border
jest rwnoznaczny z wpisem border="0". W przypadku jzyka XHTML obramowanie
tabeli warto kontrolowa za pom oc kaskadowych arkuszy stylw, bo dziki temu zy
skamy znacznie wicej moliwoci.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

73

Poniej przykad tabeli bez obramowania.


<body>
<table>
<tr>
<td>Pierwsza komrka<td>
<t>Druga komrka</t>
</tr>
<tr>
<t>Trzecia komrka</td>
<td>Czwarta komrka</td>
</tr>
</table>
</body>

Na rysunku 2.33 znajduje si wynik dziaania obu powyszych listingw.


Rysunek 2.33.
Przykad tabeli
bez widocznego
obramowania
i z widocznym
obramowaniem

Tabela bez widocznego obramowania


Pierwsza komrka Druga komrka
Trzecia komrka Czwarta komrka

Tabela z widocznym obramowaniem


Pierwsza komrka Druga komrka
Trzecia komrka

Czwarta komrka

Tabele widoczne na rysunku automatycznie dopasowuj si do swojej zawartoci. Jeeli


do tego samego kodu zamiast sw w komrkach wpiszesz dowolny pojedynczy znak,
tabela automatycznie dopasuje si do zawartoci.

Wymiarowanie tabel
Kada tabela publikowana za pom oc znacznikw jzyka HTML moe mie okrelo
ny rozmiar wysoko oraz szeroko. Rozmiar moe by zdefiniowany w pikselach
(jednostki stae) lub w procentach (jednostki wzgldne). Regulacja obu wartoci jest
moliwa za pom oc atrybutw width (szeroko) oraz height (wysoko) znacznika
<table></table> lub <td></td>.
Jeeli na sztywno okrelisz wymiary tabeli, to bez wzgldu na rozmiar okna przegl
darki bdzie ona miaa sta wielko. Poniej zamieszczam przykady tabeli o wymia
rach 200 na 200 pikseli oraz szerokoci 50%. Natomiast na rysunku 2.34 wida efekt
dziaania kodu.
< !- -Tabea o wymiarach 200 na 200 p ikse i <body>
<table border="l" width="200" height="200">
<tr>
<td>l</td>
<td>2</td>
</tr>

74

Tworzenie stron WWW w praktyce

Rysunek 2.34.
P rzykad tabel
z okrelonym
rozmiarem

Tabela o rozmiarze 200x200 pikseli


1

Tabela o rozmiarze 50\50 procent


[1
3

2
4

<tr>
<td>3</td>
<td>4</td>
< /tr>
</table>
</body>
< !--Tabela o wymiarach 50 na 50-->
<body>
<table border="l width="50" height="50">
<tr>

<td>l</td>
<td>2</td>
< /tr>
<tr>
<td>3</td>
<td>4</td>
< /tr>
</table>
<body>

Oczywicie nic nie stoi na przeszkodzie, by okreli wielko poszczeglnych komrek.


Robi si to za pom oc dokadnie tych samych atrybutw, z t rnic, e s one wpi
sane do znacznika <td>. Stosujc taki sposb regulacji rozmiaru tabeli, musisz pamita,
e jej faktyczny zewntrzny wymiar to suma wymiarw poszczeglnych komrek.
<body>
<table border='T'>
<tr>
<td width="100">l</td>

<td>2</td>
< /tr>
<tr>
<td width=''50>3</td>

<td>4</td>
< /tr>
</table>
<body>

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

75

czna szeroko przykadowej tabeli powstaej w wyniku wykonania powyszego li


stingu wynosi 150 pikseli.

V
Uwaga

Decydujc si na stosowanie jzyka XHTML do okrelania wymiarw caej tabeli


lub poszczeglnych komrek, uywamy kaskadowych arkuszy stylw. Rozwizanie to
jest przeze mnie zalecane i dokadniej je opisaem w rozdziale czwartym.

Ciekaw, a zarazem poyteczn w aciw oci tabel jest m oliwo regulowania od


stpw midzy ich komrkami skadowymi. Kontrola tej waciwoci jest moliwa za
pomoc atrybutu cellspacing. Wystpuje on w znaczniku <table>. Poniej zamiesz
czam prosty przykad jego wykorzystania.
<body>
<table border= l" width="200" height="200" censpacing= 15 >
<tr>

<td>l</td>
<td>2</td>
</tr>
<tr>

<td>3</td>
<td>4</td>
</tr>
</table>
</body>

Brak atrybutu cel 1spaci ng zostawia domyln przerw midzy komrkami. W sytuacji,
gdy chcesz cakowicie usun odstpy (np. gdy tabela zawiera pocit na mniejsze
czci grafik), musisz uy atrybutu o nastpujcej postaci cellspacing="0".
Nastpnym atrybutem, podobnym w dziaaniu do cellspacing, jest cel 1padding, ktry
odpowiada za regulacj wewntrznych marginesw w komrce tabeli. Atrybut ten rw
nie wystpuje w znaczniku <table>.
<body>
<table brder=T ' width="200" height="200" c e li paddi ng= 25''>
<tr>
<td>l</td>
<td>2</td>
</tr>
<tr>

<td>3</td>
<td>4</td>
< /tr>
</table>
</body>

Oczywicie, nic nie stoi na przeszkodzie, by na stronie w tabeli czy oba atrybuty:
cel 1spaci ng oraz cel 1paddi ng. W takim przypadku odstpy bd si sumoway. Stosow
ny przykad zamieszczam poniej.

76

Tworzenie stron WWW w praktyce

<body>
<table border="l" width="200" height="200" cellpadding= 20 censpacing=''20>
<tr>

<td>l</td>
<td>2</td>
< /tr>
<tr>
<td>3</td>
<td>4</td>
< /tr>
</table>
</body>

Przy poczeniu obu atrybutw ich warto si sumuje i w efekcie uzyskujesz wikszy
odstp midzy zawartoci poszczeglnych komrek.

Tabele niesymetryczne
Dotychczas opisywane tabele byy symetryczne i zawsze zawieray tyle samo komrek
w kadym wierszu. Teraz przysza pora, by zaj si tworzeniem tabel o nieregularnych
ksztatach niesymetrycznych. Zaczn od przykadu tabeli niesymetrycznej, by do
kadnie wiedzia, o czym pisz. Przykad takiej tabeli znajduje si na rysunku 2.35.
Rysunek 2.35.
Przykad tabel

Przykad pierwszy

Przykad drugi

niesymetrycznych
1

Zwr uwag na to, e w przypadku pierwszej tabeli drugi wiersz zawiera jedn ko
mrk, ktra zostaa rozcignita na dwie kolumny. Nieco inaczej wyglda dmga tabela,
gdzie w pierwszej kolumnie rozcignem komrk na dwa wiersze.
Przedstawione dziaanie na tabelach jest moliwe dziki dwm atrybutom jzyka
XHTML (HTML), uywanym w znaczniku <td>. Mam tutaj na myli rowspan i col span.
Pierwszy z nich rozciga komrk na ssiednie wiersze, natomiast drugi na kolumny.
Poniej zamieszczam przykadowy listing dla tabel z rysunku 2.35.
<body>
<!-Pierwszy przykad-->
<table border= l " width="200" he1ght="200">
<tr>
<td>l</td>
<td>2</td>
< /tr>

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

77

<tr>
<td colspan="2">3</td>
< /tr>
</table>
</body>
<body>
<!Drugi przykad-->
<table border="l" width="200" height="200">
<tr>
<td rowspan=2">l</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tab!e>
</body>

Zwr uwag, e przy atrybutach rowspan i col span wystpuje warto liczbowa, kt
ra okrela, na ile wierszy lub kolumn ma zosta rozcignita formatowana komrka.
Oczywicie, tabele m og przybiera rne wymylne ksztaty, a wszystko zaley od
pomysowoci webmastera oraz jego znajomoci znacznikw jzyka XHTML (HTML).
Pamitaj, e do tworzenia tabel nie potrzeba Ci ju niczego wicej.

Zagniedanie tabel
Na pewno pamitasz, w jaki sposb zagniedalimy listy. Teraz te wiadomoci si
przydadz, poniewa zasada zagniedania tabel jest dokadnie taka sama. Poniej za
mieszczam prosty przykad tabeli zagniedonej wewntrz komrki innej tabeli. W listin
gu umieciem dodatkowo komentarze, dziki czemu bdzie Ci znacznie atwiej zrozu
mie, gdzie zaczyna si i gdzie koczy tabela. Rysunek 2.36 przedstawia uzyskany efekt.
< !-- POCZTEK GWNEJ TABELI -->
<tab1e border='T'>
<tr>

<td>
< !-- POCZTEK PIERWSZEJ ZAGNIEDONEJ TABELI -->
<table border="l'' width="200" height="200">
<tr>

<td>l</td>
<td>2</td>
< /tr>
<tr>
<td colspan="2>3</td>
< /tr>
</table>
< !-- KONIEC PIERWSZEJ ZAGNIEDONEJ TABELI -->
</td>
<td>

Tworzenie stron WWW w praktyce

78

Rysunek 2.36.

Przykad
zagniedonych tabel

< !-- POCZTEK DRUGIEJ ZAGNIEDONEJ TABELI -->


<table border="l" width="200" height="200">
<tr>
<td rowspan="2">l</td>
<td>2</td>
< /tr>
<tr>

<td>3</td>
< /tr>
</table>
< !-- KONIEC DRUGIEJ ZAGNIEDONEJ TABELI -->
</td>
< /tr>
</table>
< !-- KONIEC GWNEJ TABELI -->

Mam nadziej, e zrozumiae, o co chodzi. Pamitaj jednak, e zbyt duo zagnie


donych tabel na stronie moe spowodowa spore zamieszanie oraz znaczne zwik
szenie objtoci pliku. Starsze przegldarki charakteryzoway si ciekawym podejciem
do tabel: ot w czytyw ay one strony i w chwili, gdy napotkay znacznik <table>,
czekay na odpowiedni znacznik zamykajcy < /table> i dopiero wtedy pokazyway
zawarto tabeli. W zwizku z tym, nawet gdy przegldarka wczytaa ju ca za
gniedon tabel, to nie w yw ietlaa jej do chwili, gdy nie zosta pobrany z sieci
ostatni znacznik zamykajcy tabeli nadrzdnej. W efekcie ogldajcy mia wraenie,
e strona wczytuje si bardzo powoli.

V
Uwaga

Jeszcze raz pragn zachci Ci do porzucenia pomysu stosowania tabeli do bu


dowy struktury witryny. Signij po znacznie lepsze i wygodniejsze rozwizanie, jakim
je st jzyk XHTML i kaskadowe arkusze stylw. Konkretne przykady zastosowania
nowych moliwoci znajdziesz w kolejnych rozdziaach.

Dodatkowe elementy tabeli


Opisywana specyfikacja jzyka HTML wprowadza trzy nowe znaczniki zwizane z ta
belami. Mam tutaj na myli: <thead></thead>, <tbody></tbody> oraz < tfo o t> < /tfo o t> .
Znaczniki te su do wyodrbnienia nagwka, ciaa i stopki tabeli i s bardzo przy
datne przy formatowaniu za pom oc kaskadowych arkuszy stylw.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

79

Poniej przedstawiem prosty listing, na ktrym wida przykad uycia wspomnia


nych znacznikw. Nie przewidziaem uycia obrazka, poniewa na tym etapie nie jest
on konieczny, gdy opisywane znaczniki nie m aj na razie adnego wpywu na wygld
strony WWW.
<body>
<table border= l">
<thead>

<tr>
<td>nagwek tabel i </td>
</tr>
</thead>
<tbody>

<tr>
<td>ciao tabeli</td>
< /tr>
</tbody>
<tfoot>
<tr>

<td>stopka tabeli</td>
</tr>
</tfoot>

</table>
</body>

Kada tabela moe zawiera podpis, ktry ma nastpujc posta:


<caption>7afc>e7a 1.1. Kada tabela moe zawiera podpis</caption>

W kodzie strony natomiast podpis powinien znajdowa si midzy znacznikiem <tabl e>
</table>.
<body>
<table border="l' w1dth="200" height=200">
<caption>Tabela 1.1. Kada tabela moe zawiera podpis</caption>
<tr>

<td>l</td>
<td>2</td>
</tr>
<tr>
<td colspan=2>3</td>
< /tr>
</table>
</body>

Tworzenie tabel za pomoc edytora kED


Edytor kED dysponuje bardzo rozbudowanymi narzdziami uatwiajcymi tworzenie
tabel. Dziki temu kada osoba nawet laik poradzi sobie i utworzy tabel zgod
n ze wszystkimi zaoeniami specyfikacji.
Zacznijmy od prostych rozwiza uatwiajcych przygotowywanie tabeli. Na pasku
narzdzi znajduje si kilka przyciskw, ktre pozwalaj na szybkie wstawianie pewnych
czci tabeli (rysunek 2.37).

80

Tworzenie stron WWW w praktyce

i# kD 21.4.0 - C:\Users\Bartek\Desktop\Strona WWW\test.html *


Plik

Edycja

Szukaj

XHTML

PHP

JavaScript

j : e * a ; .j; a?
F ... I ] M J$

-a J i S" : -

3H i

Drzewo dokumentu

SC .

*!
&

Elementy
* htm*
i

C \ [Vta[

i
DA [System}
(S- s ^ E :\ [Media}
!+!
F \ [Dokumenty]

^G\[Pki]

SI

SI

i
i

H A [Roboczy}

ii

ip
ii"

\*

Opcje

Pomoc

j t ] m * w a j ^ f
i r *1 J -a
A' X 1 *> U H H B H ____
i m. .Jl ! a8 & -> I
I . := -

Q
/ .'wir /7io-W-2"S

c^xm'T v e r s io n ''! . 6 A e n c o dITh?S*'


ln
< O O C T Y P htlfil PUBLIC " -//W 3 C /' d t o XHTW L 1 . 0 s t r i c t " h t t p : //WWW. w3. o rg /T R /x h tm ll/D T D ., x h t m i l - s t r i c t . d td " >
ch tm i x m ln s - " h t t p : ,'www.w3. o r g /1 9 9 9 /x h t m l xml : l a n g - " p " a n g = " p V >
<head>
< m eta h t t p - e q u iv - 'c o n t e r r t - T y p e " c o n t e n t - " t e x t / h t m l ; c h a r s e t - is o - 8 8 5 9 - 2 " / >
< m eta name"keyw ords" c o n t e n t " ! 1 t e r a t u r a in fo r m a ty c z n a , B a rto s z o an o w ski,
k s i k i" / >
c m eta n a m e " d e s c rip tio n " c o n t e n t - " B a r to s z Danowskl - s t r o n a a u to r a lic z n y c h
p o ra d n ik w in fo r m a ty c z n y c h , in f o r m a c je o k s i k a c h , o p in ie c z y te ln ik w ,
dodatkow e m a t e r i a y i p r z y k a d y ." / >
< m eta n am e-" c o p y r ig h t " c o n te n t = " B a r to s z Oanow ski" / >
c m eta name" a u th o r
c o n t e n t - 'B a r t o s z o a n o w ski" / >
c m eta name" ro b o ts " c o n t e n t - 'i n d e x , f o llo w " / >
< t i t l e > B a r t o s z D a n o w s k ic /t it le >
c l i n k r e l - s t y le s h e e t " h r e f - " g lo w n y .c s s " t y p e = " t e x t c s s " / >
c /h e a d >

<body>

< ta b le x tr > c T d > |< /td > < /tr x /ta b le >
< /b o d y >
; < /h t m l>

Rysunek 2 .3 7 . Wstawianie elementw tabeli za pom oc edytora kED

Pierwszy z oznaczonych przyciskw wstawia ramy tabeli znacznik <table></table>.


Drugi przycisk pozwala na szybkie wstawienie znacznikw okrelajcych wiersz tabeli
< tr> </tr> . Natomiast ostatni przycisk umoliwia wstawienie znacznikw komrki
tabeli <td></td>.
Dziki trzem omwionym wczeniej przyciskom moemy szybko budowa poszcze
glne czci tabeli. Jednak to nie wszystko, poniewa kED ma jeszcze jedn cieka
w funkcj, dziki ktrej moemy tworzy tabele, a nawet przeksztaca w nie ist
niejcy tekst.
Zacznijm y od w staw ienia kompletnej pustej tabeli. W ystarczy, e klikniesz lewym
przyciskiem myszy ikon oznaczon na rysunku 2.38. W nowym oknie w zakadce
Parametry tabeli moemy ustawi rozmiary tabeli oraz kilka innych drobiazgw.
Kolumny pozwala na ustawienie liczby kolumn.
Wiersze pozwala na ustawienie liczby wierszy.
Odstpy pozwala na okrelenie rozmiaru odstpw pomidzy komrkami.
Ramka odpowiada za definicj gruboci ramki tabeli.
Tytu tabeli jeeli wpiszesz do tego pola tytu swojej tabeli, to zostanie on
wywietlony za pom oc znacznikw <caption></caption>.
Po klikniciu przycisku Wstaw tabel odpowiedni kod zostanie dodany do tworzonej
strony w miejscu, w ktrym znajdowa si kursor.
Teraz przyjrzyjmy si innemu przypadkowi, w ktrym kED i jego narzdzia do tabel
s po prostu nieocenione. Wyobra sobie arkusz kalkulacyjny, ktry ma zosta prze
ksztacony na tabel. Zajcie to jest zwykle bardzo pracochonne i wymaga czasu.
Jednak teraz m oem y w inny sposb w ygenerowa tabel na podstawie arkusza

81

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

. ) ktD 2.14.0 bez_nazwy


Plik

Edycja

Szukaj

XHTML

PHP

JavaScript

j * p_' a * *
sr

< 1 I [FI

Opcje

Pomoc

$ ./?

y ii

j B

!!

i R 3 A . % - !:

i i-i. * B

Scaoa

test.M ualSGQ

Drzewo dokumentu
Elementy

Wstawki

M.
3 & -

ON

a a m a * a

a a is E ?

G bsz_na;wy (ISO) )

T---------------------

&

*htm
ffi

CA [Vista]

!i

E:\ [Medial

DA [System]
ffl ** E:\ [Dokumenty]

[PM
!i sin HA [Roboczy]

, j Definiowanie i import tabeli


Parametry tabeli j Dane rdowe:

t t Iw a m i &
Kolumny 3

Odstpy 0

W iersze j*

Ramka

Vj Usuwaj zbdne spacje podczas importu do projektu tabeli


Kady w iersz w osobnej linii

I n

Q Kada komrka w osobnej linii

[Pj Tytu tabeli jako opis (summary)

i Pierw szy w iersz jako nagwek

Tytu tabeli (pozostaw pusty, aby pomin) jg Ostatni w iersz jako stopka
ii

Przykadowa tabela

IV
u
U

jgjj Wypeni) puste komrki

inbsp;

ntabel

Ustawienia stylu
class

id

Jt KM
INS

NUM Rozmiar 0 B (0.00 KB)

Rysunek 2 .3 8 . Rozbudowane narzdzie do wstawiania gotowych tabel

MS Excela lub OpenOffice Calca. Wystarczy arkusz wyeksportowa do formatu CVS,


a nastpnie tak przygotowany dokument zaimportowa do edytora kED i na tej pod
stawie zbudowa tabel.
Na rysunku 2.39 przedstawiem widok arkusza programu MS Excel. T tabele spr
bujemy przenie na stron WWW. Na potrzeby dalszego opisu zaoyem, e od
powiedni plik CVS masz ju przygotowany, i skupiem si wycznie na utw orze
niu tabeli.
W oknie edytora kED kliknij przycisk oznaczony za pom oc strzaki na rysunku 2.40.
W nowym oknie przejd do zakadki Dane rdowe. Okrel rodzaj separatora w pli
ku CVS. Domylnie w przypadku plikw CVS je st to rednik i tak opcj zaznasz
w sekcji Rodzaj separatora.
Kliknij przycisk Wczytaj dane i w nowym oknie wska odpowiedni plik CVS. Po w y
konaniu tej czynnoci zawarto pliku pojawi si w gwnej czci okna. Upewnij si,
czy wybrany przez Ciebie rodzaj separatora odpowiada temu, co wida po wczytaniu
pliku, i w razie koniecznoci wprowad odpowiednie zmiany.

82

Tworzenie stron WWW w praktyce

Rysunek 2 .3 9 .

E3 Microsoft Excei - Zeszyt 1

Przykadowy arkusz
program u M S Excel

SjjJ Plik

Edycja

D s ia ti

2
3
4

S
6
7
8
9 1
10
11
12
13
Ml
15
16
17]

PkED 2.1.4.0 - bez_nazwy *


P lik

Edycja

Szukaj

XHTM L

Wstaw

Format

Narzdzia

Darte

Qkno

Pomo

f,
B

Miesic
Stycze
Luty
Marzec
Kwiecie
Maj
Czerwiec
Lipiec
Sierpie
Wrzesie
Padziernik
Listopad
Grudzie

Wpywy
1500
2345
1234
5678
924
2680
3214
2456
8724
4321
1122
2368

JOD OD

Wydatki ~||
980
1890
250
1090
156
256
1234
3085
1345
987
765
13288

E
Bilan
250
1365
-656
5428
-166
2524
2958
1222
5639
2976
135
1603

Cu4 0

"S i

_ i_ d _
PHP

JavaScript

j - o - y * * j C P >* |
5t W rm M B m /
'fi a a i S - i t ; Notatki

F23

Widok
s

Opcje

Pomoc

% U N i i H B l k k l

U M J - ra i
\ :M B ! a) *

.i

@ test.html (IS0)O bez_nazwy (60) Q j

rt3 >M ies t c < / t d ><t d > w p yvty< /td > < t d>wydat k f < / t d x t d>Bf Tans < / t d>

} Definiowanie i import tabeli

->

iti
CA [Vista]
> s> DA [System]
+ X*. E:\ [Media]
li! W PA [Dokumenty]

ItaJtraM

Rodzaj separatora
Tabulator
Przecinek

*^ G A [P B il)
83 * H A [Roboczy]

M ie s i c ; W p y w y ;W y d a tk i; B lla n s ; ;;
S ty c z e ; 1 5 0 0 ;12 50;250;;;
L u ty ;2 3 4 5 ;9 8 0 ;1 3 6 5 ;;;
M a rz e c ;1234; i e 9 0 ; -6 5 6 ; ; ;
K w ie c ie ; 5 6 7 8 ;25 0;5428;;;
M a j; 9 2 4 ;1 0 9 0 ;-1 6 6 ;;;
C z e r w ie c ; 2 6 8 0 ;15 6;2524;;;
L ip i e c ; 3214 ;2 5 6 ;2 9 5 8 ;;;
S ie r p ie ; 2 4 5 6 ;12 34;1222;;;
W rze sie ;8 7 2 4 ;3 0 e 5 ;5 6 3 9 ;; ;
P a d z ie r n ik ; 4 321 ;13 45;2976;;;
L is t o p a d ; 1122 ;9 B 7;135 ;;;
G ru d z ie ; 2 3 6 8 ;7 6 5 ;1 6 0 3 ;;;
;36566;13 288;23278;;;

< /ta b le > |

PW
IPfIM!>IIPI!IN
J

im

i , poa
INS

NUM Rczn-.iar: 1347 e a,32 KB)

Rysunek 2 .4 0 . Importowanie tekstu do tabeli etap pierwszy

JO 9, W: 54

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

83

Przejd do zakadki Parametry tabeli (rysunek 2.41) i kliknij przycisk oznaczony za


pomoc strzaki widocznej w lewym grnym naroniku. Po chwili w dolnej czci
okna pojawi si tabela. Jeeli zajdzie taka potrzeba, to za pom oc odpowiednich opcji
zmie liczb wierszy lub kolumn. Dodatkowo wcz opcje: Wypenij puste komrki
i w polu obok wpisz Snbsp:, Usuwaj zbdne spacje podczas importu do projektu tabeli.
Rysunek 2.41.
Importowanie tekstu
do tabeli etap drugi

I Definiowanie i import tabeli


ParamMta

arie rdowe

9 -z

js

Kolumny

Odstpy 0

(>
GB

Wiersze 15

Ramka

[P] Usuwaj zbdne spacje podczas impt>rtu do projektu tabeli j


[f! Kady wiersz w osobnej linii

Kada komrka w osobnej linii


| / ] Tytu tabeli jako opis (summary)

Ijyl Pierwszy wiersz jako nagwek

Tytu tabeli (pozostaw pusty, aby pomin)

{3 Ostatni wiersz jako stopka

Przykado wa tabela

Wypenij puste komrki

&nbsp;

id

Anuluj

CT)

</>

class

*
U

|2

Miesic

Wpywy

Wydatki

Bilans

Stycze

1500

1250

250

Luty

2345

980

1365

Marzec

1234

1890

-656

Kwiecie

5678

250

5428

Maj

924

1090

-166

Czerwiec

2680

156

2524

Linie

3214

256

2958

i9

*
Wstaw tabel

Ustawie na stylu

Jeeli tabela bdzie wyglda w naleyty sposb, kliknij przycisk Wstaw tabel. Od
powiedni kod pojawi si w miejscu, w ktrym znajdowa si kursor. Na rysunku 2.42
wida przykadow tabel po przeniesieniu na stron WWW. Oczywicie, tabela wymaga
jeszcze odpowiedniego formatowania, ale to ju zadanie dla kaskadowych arkuszy stylw.
Rysunek 2.42.
Przykad
gotowej tabeli

Przykadowa tabela

Miesic

Wpywy Wydatki Bilans

Stycze

1500

1250

Luty

2345

980

250
1365 ,

Marzec

1234

1890

-656 I
___

Kwiecie

5678

250

5428

Maj

924

1090

-166

Czerwiec

2680

156

2524

Lipiec

3214

256

295S

Sierpie

2456

1234

1222

Wrzesie

8724

3085

5639

Padziernik 4321

1345

2976

Listopad

1122

987

135

jGnidzie

2368

765

1603

36566

13288

23278

84

Tworzenie stron WWW w praktyce

Formularze
W naszym yciu wypeniamy dziesitki, jeli nie tysice formularzy. Wynika to z faktu,
e jest to najprostsza forma zdobywania cile okrelonych informacji. Jzyk XHTML
(HTML) posiada zestaw znacznikw odpowiedzialnych za generowanie elektronicz
nych formularzy.
Formularz jest uywany w bardzo wielu przypadkach. Za jego pomoc zdobywamy
informacje o odwiedzajcych stron, tworzymy ankiety, ksiki goci, a nawet zgasza
my zapytanie do internetowych serwisw katalogujcych, czy dokonujemy zakupw
w sieciowych centrach handlowych.
Ramy formularzy na stronie definiuje znacznik <form></form>. Zdye ju pozna
budow znacznikw, wic moesz si spodziewa, e <form> posiada szereg atrybutw
oczywicie, nie mylisz si.
Pierwszym atrybutem tego znacznika jest action, ktry okrela rodzaj akcji, jaka ma
zosta wykonana po naciniciu przycisku OK. Jako warto action mona poda adres
odpowiedniego skryptu bd adres e-mail. Dalej mamy atrybut method, gdzie okrela
si metod, ktra zostanie uyta do wykonania formularza. Do wyboru mamy dwie
metody: post i get. Pierwsza z nich, post, suy do zgaszania dugich da do serwe
ra, natomiast get zgasza krtkie dania. Jest to do oglnikowe wyjanienie, ale uzna
em, e zupenie wystarczy dla Twoich potrzeb. Jeli zajmiesz si pisaniem skryptw,
wtedy bdziesz musia poszerzy wiadomoci z tego zakresu.
Pora na przykad definicji ram formularza:
<form action*"matlto:email@domena.pl'' method="post"></form>

Tak ustawiony formularz wyle na adres e-mail zawarto wszystkich pl, jakie wsta
wimy w dalszej czci.

Pola typu input


Formularz elektroniczny, tak jak jego papierowy odpowiednik, skada si z odpowied
nich pl sucych do rnych celw. Pierwsza grupa pl formularza to input czyli
formularze pozwalajce wprowadzi okrelone dane. Oto przykad definicji:
<input type=" " name= " value=" " size=" "

maxlength= />

Przyjrzyjmy si bliej poszczeglnym atrybutom znacznika <input />. Pierwszy z nich


nosi nazw type i okrela rodzaj pola formularza. Do wyboru mamy nastpujce typy pl:
typ e = "te xt" wstawia zwyke pole tekstowe.
type="checkbox" wstawia mae okienka, ktre moemy dowolnie zaznacza.

To pole daje nam moliwo zaznaczenia wicej ni jednej odpowiedzi.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

85

type="radio" pole podobne w dziaaniu do checkbox, z tym e moemy


wybra zaledwie jed n z wielu odpowiedzi. Pamitaj, e wszystkie pola tego
typu musz mie identyczn warto atrybutu name.
type="password" pole odpowiedzialne za podanie hasa. Wpisywany tekst
jest zamieniany na gwiazdki.
type="fi 1e" pozwala doczy dowolny plik tekstowy do formularza.
type="submit" wstawia przycisk do formularza, odpowiada za wykonanie
action zdefiniowanego dla formularza.
type="re se t" przycisk, ktry czyci wszystkie pola formularza.
type="hidden wstawia zwyke pole tekstowe niewidoczne na stronie.
type="button" okrela przycisk dowolnego przeznaczenia.
Kolejny atrybut, name, okrela nazw dla danego pola. Pole jest do przydatne przy
analizowaniu przesanych danych bd przy konfiguracji skryptw. W przypadku wszyst
kich dostpnych pl warto tego atrybutu musi by rna. Pamitaj o jedynym wy
jtku, jakim jest pole typu radio w tym przypadku w szystkie pola wchodzce
w skad jednej grupy m usz mie identyczn nazw. Oczywicie, na stronie moe by
kilka grup pl i kada grupa powinna mie inn nazw.
Value wstawia w dane pole zadeklarowan warto. Atrybutu tego mona uy do opi
sania pl formularza bd zadeklarowania jakiej domylnej wartoci dla danego pola.
Atrybut size suy do okrelenia liczby znakw mieszczcych si w widocznej czci
pola tekstowego. Wpisanie duszego cigu znakw w takie pole spowoduje przewi
nicie jego zawartoci; zawarto bdzie pokazywana jedynie w maej czci.
Opcja maxlength ogranicza liczb znakw, jakie mona wpisa do zwykego pola tek
stowego, dla ktrego zostaa zadeklarowana. Oznacza to, e do pola o pojemnoci dwu
dziestu znakw nie wpiszesz ich wicej.

Uwaga

Gdy tworzysz formularz zgodny ze specyfikacj jzyka XHTML, pamitaj, e znacznik


<input /> musi mie zamknicie. W zwizku z tym, e specyfikacja nie przewiduje
oddzielnego zamykajcego znacznika, m usisz skorzysta z zapisu < in p u t />.

Na poniszych przykadach wida kilka moliwoci definicji pl formularza, natomiast


rysunek 2.43 przedstawia wszystkie typy pl in p u t.
<input
<input
<input
<input

type="text" name="0pi ni a size="30" value=''Ksika mi si podoba" />


type="password" name="Has1o" size="10" maxlength="10" />
type="checkbox" name="Zainteresowania" value="Sport" />
type=''submit" name="0K" value="0K " size="10" />

86

Tworzenie stron WWW w praktyce

Rysunek 2.43.
Przykadowe pola
form ularza typu input

T ext
Checkbox
Radio

Domylna warto
0

Password

FUe
Sobmit

OK |

R e se t

Anuluj )

Ptzeglqdaj. - ]

Hidden
Button

Przycisk ]

Pole typu select


Kolejn grup pl formularza jest select. Pole tego typu pozwala na wybranie jednej
lub kilku pozycji z listy. Jego konstrukcja wyglda nastpujco:
<select name="nazwa_naszej_listy">
<option>pierwsza pozycja</option>
<option>druga pozycja</option>
<optior\>trzecia pozycja</option>
</select>

W przypadku select, podobnie jak przy polach typu input, moemy okreli jego na
zw atrybut name.
Znacznik <option></option> definiuje jedn pozycj z listy. Taka definicja pola typu
se le ct pozwala na wybranie tylko jednej pozycji z naszej listy. Aby da moliwo
wyboru kilku, nasz definicj musisz uzupeni o atrybut m u ltip le , zgodnie z tym, co
prezentuje podany przykad. Pamitaj, e w przypadku strony zgodnej ze specyfikacj
XHTML atrybut m u ltip le musi mie posta tak, jak ta na poniszym przykadzie.
<select name="nazwa_naszej_listy" m ultiple=m ultiple">
<opti on>p7erwsza pozycja</o p tion>
<option>druga pozycja</option>
<opti or\>trzecia pozycja</option>
</select>

Ostatnim atrybutem, uywanym przy polach typu select, jest size. Okrela on, ile
pozycji z listy ma by widocznych na ekranie. Podanie zmiennej jako wikszej lub
rwnej liczbie pozycji zdefiniowanych w ramach pola pozwoli nam wyeliminowa
pasek przewijania, pojawiajcy si z boku pola.
<select r\atne="nazwa_naszej_l i sty" m ultiple ''m ultiple size="5>
<opti on>p ierwsza pozycja</option>
<option>druga pozycj'a</option>
<opti on>trzecia pozycja</option>
</select>

Na rysunku 2.44 wida przykad pola typu se le ct w rnych wariantach.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

Rysunek 2.44.
Przykad
pl formularza
typu select

S e e c t

pierwsza pozycja v

S e e c t

pierwsza pozycja
druga pozycja
trzecia pozycja

S e e c t

87

druga pozycja
trzecia pozycja

Pole typu textarea


Twrcy jzyka XHTML i HTML oddali do naszej dyspozycji jeszcze jeden rodzaj
pola, a mianowicie te x ta re a . Suy ono do wprowadzania wikszej iloci danych.
Znacznik ma nastpujc konstrukcj:
textarea name-"opinie" rows=2" cols="50">napisz co do wi7'e</textarea>

Umieszczajc tekst pomidzy znacznikami < te x ta re a > < /te x ta re a > , moemy zasuge
rowa co potencjalnemu uytkownikowi formularza. Rozwizanie to jest podobne
w dziaaniu do atrybutu value, omawianego przy poprzednich znacznikach typu in p u t.
Poprzez dodanie atrybutw rows i col s moesz regulowa wielko pola.
Rysunek 2.45 przedstawia pole typu te x ta re a .
Rysunek 2.45.
Przykadowe
pola formularza
typu textarea
Te x tare a

Przesyanie treci formularza


Na samym pocztku, przy okrelaniu ram formularza, skorzystaem z moliwoci wy
sania go e-mailem. Jest to najatwiejsze rozwizanie obsugi formularza, ale efekt, jaki
uzyskamy, pozostawia wiele do yczenia. Dalej zamieszczamy przykad wysania for
mularza o nastpujcej treci:
Imi: BARTEK
Pe: Mczyzna
Wiek: Ponad 25 la t
Tre: Zrobilimy nieza stron...

Dalej prezentuj wynik, jaki trafi na podany adres e-mail:


imi e=Bartek&pl ec=MXEAXBFczyzna&wi ek=wi ecej_25&tresc=Zrobi 1i 9Cmy+ni ezB3B9+stronXEA+...

Tworzenie stron WWW w praktyce

88

Dokadnie tak bdzie wygldaa poczta, ktr otrzymamy. Forma jest raczej mao za
dowalajca. Istniej specjalne programy, ktre s w stanie przetworzy cao na zrozu
m ia posta, ale ich stosowanie mija si z celem i jest pracochonne. Dlatego do obsugi
zaleca si stosowanie odpowiednich skryptw, np. popularnego FormMail, ktre prze
tworz odpowiednio wynik dziaania formularza, a otrzymana poczta bdzie czytelna.
Prawie kady z rodzimych dostawcw usug internetowych oferuje swoim klientom
odpowiednie skrypty do obsugi formularzy. Bardzo wiele firm udostpnia takie skrypty
bezpatnie. Wystarczy ich poszuka, np. za pomoc Google (http://google.pl). Oczywi
cie, w dodatku na kocu ksiki zamieciem zbir odnonikw do firm, ktre oferuj
darmowe skrypty do obsugi formularzy i nie tylko. Mam nadziej, e Ci si przyda.
W poprzednich podrozdziaach omwiem wszystkie dostpne pola formularza i teraz
przysza pora, by zobaczy, jak wyglda i dziaa on w praktyce. Sprbujemy przygoto
wa formularz, w ktrym uyjemy wszystkich dostpnych pl, a cao zostanie wy
sana za pom oc specjalnego skryptu. Postanowiem, e formularz bdzie miniankiet
na Twj temat, mj drogi Czytelniku. Chciabym si dowiedzie czego wicej o Tobie,
Twoich zainteresowaniach oraz o tym, co mylisz o tej ksice. Bardzo mi zaley,
by pozna Twoje zdanie, gdy to pozwoli mi napisa jeszcze lepsz ksik, spenia
jc Twoje oczekiwania.

Uwaga

Do obsugi formularza wykorzystaem darmowy skrypt FormMail dostpny na stronie


http://w w w .icenter.pl/m oduly/form m ail.php. Aby formularz wykorzystujcy skrypt
FormMail zadziaa, niezbdne jest zamieszczenie w nim nastpujcych elementw:
<form action="http://www.ro y.ic e n te r.p l/fo rm /" method=''post" />
<input type="hidden" name=''to" value="adres@email.p" />
<input type="hidden" name="subject" value=Temat wiadomoci" />
Zwarto pierwszej linii zawsze wyglda tak samo. Natomiast w drugim wierszu dla
atrybutu valu e m usisz poda adres e-mail, na ktry formularz zostanie wysany.
W ostatniej linii zmianie musi ulec warto atrybutu value powinna ona zawiera
tem at wysyanego formularza.

Na rysunku 2.46 wida przykad formularza, bdcego ankiet. Jeeli chcesz oceni
niniejsz ksik, sprbuj przygotowa podobny formularz i wysa go do mnie.

Ramki
N a samym pocztku sprbuj odpowiedzie na pytanie, czym s ramki. Ot jest to
rozwizanie pozwalajce w jednym oknie przegldarki wywietli kilka stron. Uywa
jc ramek, m oesz podzieli okno przegldarki na kilka czci w zalenoci od
potrzeb i w nich niezalenie przeglda dokumenty.
Klasycznym przykadem uycia ramek jest sytuacja, gdy okno przegldarki dzielimy na
dwie czci; lewa, mniejsza, cz zawiera spis zawartoci witryny, natomiast w prawej,
wikszej, widzimy poszczeglne strony z treci. Wybierajc jedn z pozycji z lewej cz
ci przegldarki, powodujemy wywietlenie odpowiedniego dokumentu w prawej czci.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

Rysunek 2.46.

miniankieta

Przykad
kompletnego
formularza

89

bartek@danowski.pl

Odbiorca ankiety:
Imi:
F.-matT

Pe:

Kobieta: O Mczyzna: O

Czego brakowao Ci w ksice


Prosz, oce ksik:
Przykadw
Obrazkw
Porad

Wybierz ocen v ;

Przelij swoje uwagi

[ Wylij

] [ Anuluj )

Jeeli chcesz, aby tre tego formularza trafia do Ciebie, musisz w polu Odbiorca ankiety wpisa swj
poprawny adres e-mail. Pamitaj o tym, e zaley' mi rwnie na tym, aby Twoja ocena ksiki trafia do
mnie. Dlatego najpierw' wylij formularz na domylnie podany adres, a dopiero pniej sprawd inne
moliwoci

Ramki zostay oficjalnie ujte w specyfikacji jzyka HTML 4 i s obsugiwane przez


gwne przegldarki. Z chwil wprowadzenia tego rozwizania projektanci stron po
dzielili si na dwa obozy: zwolennikw i przeciwnikw ramek. W ynika to z faktu,
e ramki m aj sporo zalet, jak i wad. Do zalet mona zaliczy m.in.:
atwo rozwizania nawigacji w obrbie stron,
uatwienie organizacji stron,
a do wad:
spowolnienie adowania strony,
brak prostej moliwoci dodawania strony do ulubionych,
problemy z prawidowym indeksowaniem strony przez wyszukiwarki sieciowe,
problemy z drukowaniem.
To tylko cz wad i zalet ramek, a wymienianie ich wszystkich i tak niczego nie
zmieni. Kady sam musi si przekona o tym, czy w jego przypadku stosowanie ramek
jest konieczne. Moim zadaniem korzystanie z ramek jest ostatecznoci i obecnie dziki
znacznie lepszej obsudze kaskadowych arkuszy stylw oraz stronom generowanym
dynamicznie moemy cakowicie zrezygnowa z tego rozwizania.
Niejako z obowizku w niniejszej ksice opisaem, w jaki sposb przygotowa stron
wykorzystujc ramki. Proponuj jednak, aby siga po to rozwizanie w ostatecznoci.

90

Tworzenie stron WWW w praktyce

Konstrukcja ramek skada si z pliku definiujcego podzia okna przegldarki na za


planowan liczb okien. Plik ten jest zbliony wygldem do tradycyjnego, cho ma kilka
istotnych rnic. Oto przykad prostego pliku definiujcego podzia strony na ramki:
<?xml version="1.0" encoding-"IS0-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
'http://www.w3.org/TR/xhtml1/DTD/xhtml 1- frameset.dtd">

<html xm1ns="http://www.w3.org/1999/xhtml" xml:1ang="p1">


<head>
<meta http-equiv="content-type" content="text/htm l;charset=IS0-8859-2 />
<title>Przykad w itryny z ramkami</title>
<link rel="Stylesheet" href="style.css" type="text/css" />
</head>
<frameset cols=''20,*r'>
<frame scrolling="auto" name="menu" src="menu.htm'' />
<frame scrolling="auto" name=opis" src="opis.htm" />
</frameset>

</html>

Menu

Gwna tre strony

<?xml version="1.0" encoding-"IS0-8859-2"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"h ttp : //www.w3.org/TR/xhtml1/DTD/xhtml 1- frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="pl">


<head>
<meta http-equiv="content-type" content="text/html:charset=IS0-8859-2" />
<title>Przyklad witryny z ramkami</title>
<1 ink rel="Stylesheet" href="style.css" type="text/css" />
</head>
<frameset rows="2M,*t">
<frame scrolling="auto" name="menu" src=''menu.htm" />
<frame scrolling="auto" name="opis" src="opis.htm" />
</frameset>

</html>

Menu
Gwna tre strony

Pierwsz rzucajc si w oczy rnic w stosunku do klasycznej strony (bez ramek)


jest deklaracja DOCTYPE. Sprawa jest jasna i nie wymaga dalszego omawiania.
Miejsce znacznika <body></body> zajmuje znacznik <frameset></frameset>, ktry jest
odpowiedzialny za deklaracje wygldu naszych ramek. Otwierajcemu znacznikowi
<frameset> towarzyszy jeden z dwch atrybutw: cols="x,y" albo rows="x,y". Pierw
szy odpowiada za definiowanie kolumn, a dmgi wierszy. Wartoci x ,y okrelaj liczb
kolumn lub wierszy i m og by podawane bd jako liczba pikseli, bd jako warto
procentowa liczona od wielkoci okna przegldarki. Istnieje te moliwo definiowa
nia tych wartoci w taki sposb, jak to przedstawia podany przykad: wwczas musimy
zadeklarowa pierwsz warto, natomiast drug zastpujemy gwiazdk (*), co ozna
cza, e chcemy uy caoci dostpnej powierzchni. Rozwizanie takie jest stosunkowo
wygodne, gdy nie musimy zna dokadnych wartoci.

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania

91

Nasz przykad zawiera nastpny znacznik <frame />, ktry okrela dokadniej kon
kretn ramk i przypisuje do niej nazw oraz dokument wywietlany domylnie w e
wntrz. Su do tego atrybuty name oraz src. Poza tym znajduje si tu jeszcze atrybut
s c ro llin g , odpowiedzialny za wywietlanie suwakw, pozwalajcych na przewijanie
dokumentu znajdujcego si wewntrz ramki. Moe on przybra nastpujce wartoci:
auto wwczas suwaki bd pokazywane automatycznie, jeli oka si potrzebne
(gdy dokument przypisany do danej ramki bdzie za duy), no wtedy suwaki nigdy
nie zostan pokazane, oraz yes w ym uszajcy pokazywanie suwakw niezale
nie od tego, czy s potrzebne, czy nie. Ostatnim atrybutem znacznika <frame /> jest
noresize, wymuszajcy na przegldarce zablokowanie moliwoci zmiany wielkoci
okien, ktre domylnie m aj tak moliwo.
Podane przykady pokazuj, e moemy dzieli okno przegldarki na kolumny (atry
but col s) bd wiersze (atrybut rows), ale nic nie stoi na przeszkodzie, by na naszej
stronie wiersze i kolumny poczy. Do tego celu musimy uy dobrze znanego zagnie
dania. Oto przykad:
<?xml version="1.0" encoding="IS0-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"h ttp ; / / www.w3.org/TR/xhtml1/DTD/xhtml 1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="pl">
<head>
<meta http-equiv=''content-type" content="text/html;charset=IS0-8859-2" />
<title>Przykad witryny z ramkami</title>
<link re i="Stylesheet" href=''style.css" type="text/css" />
</head>
<frameset rows="100,*">
<frame name="gora" src="gora.htm'' />
<frameset cols="35,*">
<frame name="lewa" src="lewa.htm" />
<frame name=''prawa src="praw.htm" />
</frameset>
</frameset>

</html>
G ra
L ew a

P ra w a

Prawda, e proste?
Skoro wiesz, jak dzieli okno na odpowiedni liczb ramek, pora pozna form adre
sowania dokumentw wewntrz ramek. Chodzi o to, e hipercza w formie, jak po
znalimy nieco wczeniej, nie zadziaaj poprawnie na stronie opartej na ramkach.
Efekt bdzie taki, e przy wywoaniu hipercza strona, do ktrej si ono odnosi, zosta
nie wywietlona w tym samym oknie, w ktrym znajdowao si hipercze. By tego
unikn, musisz okreli, w ktrym oknie wywoywany dokument ma zosta wywie
tlony i tu z pom oc przychodz nam nazwy ramek, definiowane wczeniej.
Przeanalizujmy przykad oparty na powyszej definicji ramek. Zdefiniowalimy 3 ramki
na stronie i nadalimy im nazwy: Gora, Lewa, Prawa. Dokumenty w nich wywietlane maj
podobne nazwy. Dokument lewa.html zawiera definicje nastpujcych odsyaczy:

92

Tworzenie stron WWW w praktyce

<a h re f= "in fo l.h tm l>Informacje l</a>


<a href="info2.html">Informacje 2</a>

Tymczasem my chcemy, by po wybraniu dowolnego z tych odsyaczy odpowiednia


strona zostaa pokazana w ramce o nazwie Prawa. Aby to osign, nasz odnonik
w pliku lewa.htm l m usim y w zbogaci o atrybut target="nazwa ramki docelowej".
W naszym przypadku bdzie to wygldao tak:
<a h re f= "in fo l.h tm l" target="prawa">Informacje l</a>
<a h re f= "info2.html" target="prawa">Informacje 2</a>

Atrybut target zawiera dodatkowo cztery zdefiniowane wartoci. S to:


target="_blank",
ta rg e t= "_ s e lf",
target="_parent",
ta rg e t= "_ to p .

Pierwsza warto spowoduje otwarcie nowego okna przegldarki i wywietlenie w nim


danego dokumentu. Kolejna, "_sel f ", jest domylna i spowoduje, e dokument zosta
nie wywietlony w ramce, z ktrej chcielimy dokona przekierowania. Warto trzecia
dokona zamiany dokumentu nadrzdnego dla biecego dokumentu. Ostatnia natomiast
spowoduje ponowne wczytanie zawartoci okna i wywietlenie nowego dokumentu,
czyli dokona zmiany na miejscu dokumentu pierwszego w hierarchii skokw.
Ostatnia warto jest szczeglnie przydatna, jeli z dokumentu zawierajcego zdefinio
wane ramki adujemy inny dokument, rwnie zawierajcy ramki, np. jeli chcemy je
dynie za pom oc HTML ponownie wczyta zawarto dwch ramek.

Rozdzia 3.

Grafika sieciowa
Specyfikacja jzyka HTML (XHTML) pozwala na umieszczanie elementw graficz
nych na stronie WWW. Twrcy pierwszych stron wzbogaconych o grafik mieli do dys
pozycji dwa formaty plikw graficznych GIF i JPG. Z biegiem czasu przybornik
webmastera zosta rozszerzony o kolejne ciekawe formaty PNG, Flash, a ostatnio
SVG. O ile GIF, JPG i w nowszych przegldarkach PNG nie wymagaj dodatkowych
narzdzi do wywietlania grafiki na stronie, to pozostae dwa potrzebuj specjalnej
wtyczki do przegldarki, ktr ogldajcy musi pobra z sieci. Ogromna popularno
Flasha spowodowaa, e wszystkie obecnie dostpne przegldarki domylnie m aj in
stalowane odpowiednie oprogramowanie.
Na nastpnych stronach dowiesz si, czym rni si poszczeglne formaty plikw
graficznych oraz sposoby prezentacji grafiki na stronie. Na przykadzie Paint Shop Pro
poznasz sposoby przygotowania grafiki na potrzeby sieci i tworzenia popularnych roz
wiza graficznych stron WWW. Informacje tutaj zawarte bd nam potrzebne przy
tworzeniu naszych projektw i niestety nie da si pomin tego rozdziau.

Uwaga

Now wersj programu Paint Shop Pro m oesz pobra ze strony h ttp ://a p p s .
corel.com /int/pl/psppxi.htm l. W swoim opisie skorzystaem co prawda ze starszej
wersji programu (na niego wykupiem licencj, pracujc od kilku lat bardzo si do
niego przyzwyczaiem), ale myl, e bez problemu sobie poradzisz z wykonaniem
opisanych zada w nowszej wersji. Pamitaj, e na pycie CD doczonej do ni
niejszej ksiki zamieciem rwnie kilka darmowych i rozbudowanych programw
graficznych.

Zanim przejdziemy do waciwej treci, chciaem zwrci uwag na jeszcze jeden istot
ny fakt. Ot jeeli planujesz zaj si tworzeniem stron WWW w sposb komercyjny,
tzn. zaoy firm i wiadczy usugi webmasterskie, to wydaje mi si, e powiniene
wzi sobie do serca to, co zaraz napisz.
W naszym kraju ze wzgldu na due koszty pracy powsta specyficzny pogld na prac
webmastera twrcy stron WWW. Zgodnie z t w izj osoba zajmujca si tworze
niem stron WWW powinna zna si co najmniej na:

94

Tworzenie stron WWW w praktyce

jzyku opisu strony (HTML, XHTML, CSS, XML),


jzykach skryptowych client-side (JavaScript, VBS, Ajax, JSP),
jzykach dziaajcych po stronie serwera server-side (PHP, CGI, ASP),
bazie danych (mySQL),
grafice (statyczna, Flash),
muzyce (przygotowanie dwikw do animacji Flash),
typografii,
administracji serwerami.
Powysze wyliczenie ma jedynie charakter pogldowy i bardzo czsto moe wygl
da zupenie inaczej. Jednak idea jest zawsze taka sama twrca stron WWW musi
zna si na wszystkim. W moim odczuciu jest to totaln bzdur. Dla porwnania
przyjrzyjmy si, jak to wyglda w cywilizowanych krajach, gdzie nad jednym pro
jektem pracuje zesp ludzi. Niezbdnym minimum jest grafik, ktry przygotuje wszyst
kie elem enty graficzne uyte na stronie, czuwa nad kolorystyk i ukadem caoci.
N astpn osob jest programista, ktry pisze niezbdne skrypty lub aplikacje dziaajce
po stronie serwera. Za odpowiedni konfiguracj serwerw odpowiada administrator.
Nad caoci projektu czuwa webmaster, zajmujcy si tworzeniem gotowej strony, ktr
moemy podziwia. Oczywicie, webmaster jest kierownikiem caego projektu i zleca
wykonanie odpowiedniego skryptu czy aplikacji programicie, a wsplnie z grafikiem
obmyla wygld i charakter witryny.
Jak widzisz, nad projektem pracuj co najmniej cztery osoby, pomidzy ktre roz
dziela si obowizki. Takie rozwizanie daje pewno, e strona bdzie dobrze wygl
daa pod kadym wzgldem.
Niestety, specyfika naszego kraju wymusza, by webmaster zna si na wszystkim, bo tak
jest taniej. Jeeli spojrzymy na to od strony pracodawcy, to zatrudnienie jednej osoby
znajcej si na wszystkim kosztuje cztery razy mniej ni przyjcie czteroosobowego
zespou specjalistw. Zamy, e jeden pracownik dostanie nawet wiksz wypat ni
pierwotnie przewidywano, to i tak ostateczny koszt bdzie znacznie niszy.
Ot wychodz z zaoenia, e jeeli webmaster zna si na wszystkim (grafika, typografia, programowanie, bazy danych, administracja serwerami), to jest przecitny w ka
dej z tych dziedzin. Natomiast osoba znajca si na jednym czy dwch zagadnieniach
moe by prawdziwym ekspertem w swojej dziedzinie.
Oczywicie, zdarzaj si nieliczne wyjtki, kiedy jeden czowiek jest wybitnym spe
cjalist w wielu dziedzinach, jednak sytuacje takie s niezmiernie rzadkie. I cho mo
goby si nawet wydawa, e w naszym kraju takich specjalistw od wielu zagadnie
jest do sporo, to tak naprawd moe uda si ich zliczy na palcach jednej rki. Nato
miast caa reszta specjalistw to osoby, ktre nie s do koca dobre w adnym za
gadnieniu. Przedstawi prosty przykad. Czy programista moe by dobrym grafikiem?
Moim zdaniem nie da si nauczy grafiki komputerowej w prosty sposb, tak jak np.
jzyka PHP. Oczywicie, programista moe doskonale pozna program graficzny, kada

Rozdzia 3. Grafika sieciowa

95

funkcja programu bdzie dla niego znajoma i bdzie wiedzia, ja k z niej skorzysta.
Jednak nie nauczy si myle jak grafik. Nie bdzie mia oryginalnych pomysw,
a wszystkie jego prace bd jedynie mniej lub bardziej udolnymi kopiami tego, co ju
kiedy powstao.
Prawda moe si wydawa do brutalna, jednak z takim spojrzeniem na stan rzeczy
zgadza si wielu ludzi zajmujcych si tworzeniem stron WWW na powanie.
Oczywicie, jeeli zajmujesz si tworzeniem stron typowo amatorsko i dla wasnej
przyjemnoci, to nic nie stoi na przeszkodzie, by poznawa wszystkie dostpne tech
niki. Pamitaj jednak, eby nie popa w samouwielbienie i nie sta si kolejnym
specjalist od stron WWW.
Po tym krtkim wstpie przejdmy do gwnego tematu rozdziau, czyli opisu stoso
wanych formatw graficznych oraz sposobu przygotowania grafiki sieciowej.

Format
Na stronie WWW moemy umieci tylko kilka z dziesitek formatw graficznych.
W dalszej czci niniejszego podrozdziau omwiem najwaniejsze formaty wraz z ich
zaletami i wadami. Uwaam, e powiniene dokadnie przyjrze si kolejnym pod
rozdziaom.

GIF jest formatem stosowanym od lat na stronach WWW; pomimo wielu ogranicze
ma si doskonale i jak na razie trudno jednoznacznie przewidzie koniec jego wyko
rzystania do tworzenia stron. Format ten powsta w 1997 roku (wersja 87a) na zamwie
nie sieci CompuServe, a nastpnie zosta zmodernizowany w roku 1999 (wersja 89a).
Kompresja danych odbywa si w oparciu o algorytm LZW i jest licencjonowana przez
waciciela firm Unisys. GIF jest formatem omiobitowym lub, jak kto woli, po
zwala na zapisanie maksymalnie 256 kolorw. Oczywicie, w razie potrzeby moemy
w nim zapisa znacznie mniej kolorw, a co za tym idzie, zredukowa palet.
Przyjrzyjmy si dokadniej metodzie kompresji, gdy jej zrozumienie pozwoli na bar
dziej wiadome korzystanie z tego formatu. Ot LZW jest bezstratn m etod kom
presji charakteryzujc si stopniem upakowania rwnym 4:1. Oznacza to, e obrazek
po zapisaniu do tego formatu ma rozmiar okoo cztery razy m niejszy ni orygina.
Natomiast bezstratna kompresja oznacza, e obrazek zawsze wyglda dokadnie tam
samo i zawiera te same kolory, co orygina.
GIF jest idealnym rozwizaniem do zapisu wszystkich elementw graficznych, ktre
nie s fotografiami, np. ozdobnych nagwkw, tekstu, wykresw i innych prostych
elementw graficznych.

Tworzenie stron WWW w praktyce

96

Na rysunku 3.1 przedstawiem trzy plamy barwne w rnych odcieniach koloru szare
go. Mam nadziej, e wida rnic w odcieniach poszczeglnych elementw. Jeel
nie, to musisz uwierzy mi na sowo, e prostokt z lewej strony ma kolor szary, nato
miast element w rodku ma kolor jasnoszary. Ostatni prostokt ma kolor czarny.
Rysunek 3.1.
Prosty obrazek GIF
prba omwienia
kompresji L ZW

Rysunek 3.2 przedstawia wycinek jednej linii z rysunku 3.1. Znajduj si na nim
rwnie trzy kolory, szary, jasnoszary oraz czarny. Poza tym wida podzia na piksele
mae kwadraciki.
Rysunek 3.2.
Wycinek
z rysunku 3.1

Algorytm kompresji LZW dzieli obrazek na linie, a nastpnie w kadej linii dokonuje
sprawdzenia koloru zapisanego w kadym pikselu. Oto wynik analizy dla linii z ry
sunku 3.2:
szary 10 pikseli (dalej oznacz ten kolor liter S),
jasnoszary 16 pikseli (dalej oznacz ten kolor literami JS),
czarny 9 pikseli (dalej oznacz ten kolor liter C).
Kompresja LZW po przeprowadzeniu analizy liczby powtrze koloru w danej linii
zredukuje je do jednego i doda informacj o tym, ile razy dany piksel powinien wy
stpi. Zapis linii z rysunku 3.2 bdzie mia nastpujc posta 10S 19JS 9C.
Jeeli dane linie powtarzaj si wiele razy po sobie, to stopie kompresji jest jeszcze
lepszy. Oczywicie, podany przykad jest duym uproszczeniem zasady rzdzcej kom
presj LZW, ale daje moliwo wyrobienia sobie pogldu na temat jej zasady dziaania.
Dalej zamieszczam kilka przykadowych obrazkw, by mg jeszcze lepiej zrozumie,
jak kompresuje si obraz w formacie GIF (rysunek 3.3).

97

Rozdzia 3. Grafika sieciowa

Rysunek 3.3.

Kilka przykadowych
obrazkw zapisanych
wformacie GIF
1326 bajtw

1040 bajtw

2682 bajtw

2823 bajtw

957 bajtw

Zwr uwag na to, e obrazki, na ktrych dany kolor powtarza si w jednej poziomej
linii, kompresuj si znacznie lepiej ni te, gdzie linia ma orientacj pionow.
Format GIF pozwala na skorzystanie z kilku ciekawych waciwoci. Mam tutaj na
myli moliwo okrelenia koloru przezroczystego (transparentnego), zastosowania
przeplotu oraz animacji. Kademu z zagadnie powiciem oddzielne podrozdziay.
W kadym z nich znajdziesz opis jednej z waciwoci oraz krtk instrukcj, jak z niej
skorzysta w programie Paint Shop Pro.

Transparentno kolor przezroczysty


Transparentno lub przezroczysto w przypadku formatu GIF umoliwia zdefiniowa
nie jednego koloru, ktry nie bdzie widoczny w przegldarce. Pamitaj, e kady ele
ment graficzny zawsze ma ksztat prostokta i nie ma moliwoci, by to zmieni. cilej
rzecz biorc, nie da si przygotowa okrgej grafiki.
W praktyce z funkcji transparentnoci formatu GIF musisz skorzysta w przypadku,
gdy chcesz unikn um ieszczania na stronie elementw o prostoktnych ksztatach.
Doskonaym przykadem bdzie okrgy przycisk. Mam nadziej, e po przygotowaniu
pierwszego obrazka zrozumiesz, o co mi chodzi.
Wspomniaem ju wczeniej, e bdziemy pracowa z programem Paint Shop Pro, dla
tego musisz go zainstalowa na komputerze.
Po uruchomieniu aplikacji tworzymy nowy obrazek, np. o rozmiarach 300x300 pikseli.
W tym celu z menu P lik wybieram y opcj Nowy. W nowo otwartym oknie, widocz
nym na rysunku 3.4, musisz okreli rozmiar obrazka Szeroko oraz Wysoko.

98

Tworzenie stron WWW w praktyce

Rysunek 3.4.
Tworzenie
nowego rysunku
w Paint Shop Pro

Wymiary obrazka
Szeroko:
J Wysoko:
Rozdzielczo:

300

;:^i

300

78,740

HM !Piksele/cm

Jednostki:
1Piksele

Charakterystyka obrazka

To rastrowe
To wektorowe
To - rodki artystyczne
Gbia kolorw:

a
a
ii

| RGB - 8 bitw/kana

Kolor:

O Przezroczysto
Wymagana pami:

432 KB

Wymiary:

300 x 300 Piksele


OK

Anuluj

Pomoc

Nastpnie w polu Rozdzielczo okrel rozdzielczo obrazka, tak by wynosia 78 piksele/


cm. W zwizku z tym, e pracujemy z obrazkiem w formacie GIF, moemy od razu
ustawi palet kolorw na 256; suy do tego pole Gbia kolorw.
W celu uatwienia dalszej pracy z PSP (Paint Shop Pro) zamieszczam tu opis wygldu
okna programu oraz waniejszych narzdzi (rysunek 3.5 i 3.6). Od teraz bd uywa
nazw z rysunku, natomiast Ty bdziesz klika waciwe ikony odpowiadajce nazwom.
Po utworzeniu nowego obrazu pora narysowa kko. W tym celu wybierz narzdzie
o nazwie Ksztaty (rysunek 3.7) i na grnym pasku narzdzi wybierz koo z listy do
stpnych ksztatw. Dodatkowo wycz opcje Zachowaj styl i Utwrz w postaci wek
torowej. Po prawej stronie na pasku z palet kliknij w pierwszy z maych prostoktw
oznaczonych strzak. W nowym oknie wybierz kolor. Czynno powtrz dla drugiego
prostokta. W obu przypadkach wybierz ten sam kolor.
Dopiero teraz moesz narysowa w oknie obrazka (to ten biay kwadrat na rodku)
swoje koo. Wyobra sobie, e rysujesz kwadrat i zaczynasz od jednego z naronikw,
a z pewnoci uda Ci si za pierwszym razem narysowa idealne koo. Musisz ustawi
kursor w lewym grnym naroniku wyobraonego kwadratu, nacisn i przytrzyma
lewy przycisk myszy, a nastpnie przesun kursor w prawo i w d. Dopiero teraz
moesz zwolni przycisk myszy.

Rozdzia 3. Grafika sieciowa

99

1 Corel Peint Shop Pro Photo XI - Obnzek2


| lf t

Edycje

ffid=k

Obr.zek

fiopMOW.nie

'. LiVi> 0 f e *

'

Eiekty

'i

Wjrstwy

O tieldy
Poprew zdjcie *

P jlety -

..P o m n ie js z

Rysunek 3.5. Wygld gwnego okna programu


Rysunek 3.6.
Opis najwaniejszych
narzdzi

m
a*

D*

W s k a n ik
S e le kcja
P ipeta
K a d ro w a n ie
C z e rw o n e oczy

V
J ' P d z e l/A e ro g ra f
** w
lii
1
t/
0*
CS
A

T e k st
? ' K s z ta ty
?
V
V '
. ..

....

Tworzenie stron WWW w praktyce

100

J Corel Paint Shop Pro Photo XI - [Obrazek2* 150% (To)]


O

&k

dycja

^ id o k

Obrazek

w pasow anie

Efekty

Warstwy

Obiekty

Eopraw zdjcie '

Naznaczenia
P a le ty '

O&no

Pornos

Pomniejsz

Powiksz

Materiay

rfzie fekaK

300 X 300 * RGB - 8 b itw

Rysunek 3 .7 . Tworzenie prostego rysunku opartego na ksztacie koa

Teraz przysza pora na okrelenie koloru, ktry ma by niewidoczny na stronie WWW.


W tym celu z menu Obrazek w ybieram y opcj Paleta/Ustaw przezroczysto palety
(skrt Ctrl+Shift+V). W nowym oknie nic nie zmieniaj i kliknij przycisk OK. Po chwili
na ekranie monitora pojawi si nowe okno (rysunek 3.8).
W nowo otwartym oknie wybieramy opcj Ustaw warto przezroczystoci dla wpisu
palety, a nastpnie przesuwamy kursor myszy nad obrazek i klikamy kolor, ktry ma
by niewidoczny. W polu obok wybranej opcji pojawi si numer koloru, ktry zosta
nie ukryty.
Teraz pozostaje tylko zapisanie obrazka na dysku w formacie GIF i umieszczenie go
na stronie o zdefiniowanym tle. Sam zapis nie rni si niczym od podobnych czyn
noci znanych z innych programw. W skrcie wyglda to tak, e klikamy kursorem
myszy menu Plik i wybieramy opcj Zapisz jako. W nowo otwartym oknie wybiera
my lokalizacj dla pliku i nadajemy mu nazw, a nastpnie w polu o nazwie Zapisz
ja k o typ z listy wybieramy format GIF.
Oczywicie, pamitam, e jeszcze nie wiesz, w jaki sposb zdefiniowa to dla strony,
dlatego przepisz podany listing i zmie w nim jedynie nazw obrazka bdcego transparentnym GIF-em.

101

Rozdzia 3. Grafika sieciowa

4 l Corel Paint Shop Pro Photo W


O

Plik

fcdycja

Widok

'Obrazek?* 150% (Tto)l

Qbrazek

Qopasowame
fc o

; ; 0 Zachowaj gy

Efekty
T -

Warstwy
tjji

gjUtwa w postaci wakwowaj

. [V;Wygadzam#opiyona

Ofeiekty

Popraw zdjcie

Naznaczenia
Pjlety

Ofcno

Pomo

_ v Pomniejsz
Sarowai:

v Powiksz
Styk:

Lm* wytai osrwe:

3 400 *3 |> -j 15

n a

1: .............

**

I'

Bez przezroczystoci
Ustaw warto przezroczystoci do biecego koloru ta

# Ustaw warto przezroczystoci do wpisu palety:

62

*Q

Uwaga. W iele formatw plikw (np. mapa bitowa systemu Windows) nie obsuguje

Anutui

Uwzgldnia

Pomoc

m4 .

Wszysdu#

fic6? y:7c)'i - *R ?55 G-?S5.??55 C 255; - Obrazek

' skorzysta z Pomocy, hacrinii klawisz FI

3QQ v

mn*

y ndefcs - paleta M -k o fe rtw a

Rysunek 3.8 . Okrelamy kolor transparency


<head>
<meta http-equ1v="Content-type" content="text/html;charset=IS0-8859-2" />
<title>Tansparentny G IF </title>
<style type="text/css">
BODY

{
background-color: #8080FF:

}
</style>
</head>
<body>
<img src= "kolo.g if" />
</body>
</html>

W tym opisie przy tworzeniu obrazka od razu okrelilimy palet kolorw, z ktrej
bdziemy korzysta, ale nic nie stoi na przeszkodzie, by przygotowa obrazek w wik
szej liczbie kolorw, a nastpnie dokona redukcji. Z tej metody skorzystam nastp
nym razem, wic nic si nie martw, gdy na pewno dowiesz si, co mam na myli i jak
to zrobi.

102

Tworzenie stron WWW w praktyce

Przeplot

Przeplot jest kolejn bardzo ciekaw waciwoci formatu GIF. Obrazek, w ktrym
zastosowano przeplot, wczytuje si niejako fragmentami. cilej rzecz biorc, za pierw
szym przejciem zostaje wczytana co czwarta linia obrazka, dziki czemu wida oglny
zarys caoci. Z kadym nastpnym przejciem zostaj wczytane kolejne linie, dziki
czemu obrazek wyostrza si i staje bardziej czytelny. Takich przej jest cztery i dopiero
po ostatnim przebiegu obrazek wyglda idealnie.
Pamitaj, e stosowanie przeplotu powoduje zwikszenie rozmiaru obrazka, ale daje
pozorne odczucie szybszego wczytywania si strony.
Na rysunku 3.10 przedstawiono w duym uproszczeniu, jaka jest zasada wczytywania
obrazka, w ktrym zastosowano przeplot.
Rysunek 3.10.
Schem at dziaania
przeplotu

Przygotowanie obrazka z przeplotem w programie Paint Shop Pro ogranicza si jedy


nie do dokonania pewnych zmian w procesie zapisu do pliku. Dalej dokadnie opisaem,
gdzie i co musisz zmieni, by otrzyma obrazek z przeplotem.
Z menu Plik wybierz opcj Zapisz jako. W oknie zapisu po wybraniu formatu GIF mu
sisz klikn przycisk Opcje znajdujcy si w prawym dolnym naroniku okna zapisu.
Przeplot zostanie wczony w zapisywanym obrazku, gdy uaktywnisz opcj Z prze
plotem w okienku widocznym na rysunku 3.12. Po zmianie domylnych ustawie klik
nij przycisk OK. Nastpnie w oknie z rysunku 3.11 wpisz nazw obrazka, okrel lokali
zacj, w ktrej bdzie zapisany plik, i kliknij Zapisz.

Animowany GIF
Ogromn zalet formatu GIF jest moliwo przygotowania obrazka, ktry bdzie si
porusza. Oczywicie mam tutaj na myli animacj jakiej czynnoci wewntrz, a nie
przesuwanie caego obrazka na stronie WWW. Animacja GIF-a polega na przygoto
waniu kilku klatek, a nastpnie zapisaniu ich do jednego pliku (wraz ze specjalnymi
kodami sterujcym i) i wywietlaniu jedna po drugiej. Z pewnoci kojarzy Ci si to
z klatkami filmu i takie porwnanie jest jak najbardziej trafne.
Procesem wywietlania poszczeglnych klatek steruje przegldarka i na podstawie od
powiednich kodw sterujcych zapisanych w pliku wraz z obrazkami moe uruchomi
wybrany element naszej strony.

Rozdzia 3. Grafika sieciowa

Rysunek 3.11.
Zapisywanie obrazka
w form acie GIF
z wczonym
przeplotem
etap pierwszy

103

1; Z a p is z ja k o
Z a p isz w:

Stel

O brazy

Nazwa

Data w yko...

Tagi

0 f

Rozmiar

* Uh B
Klasyfikacja

O statnio
uywane miej...

A
P rzykadowe obrazy

P ulpit

K om pu ter

*
-'i
Sie

Nazwa pliku:

0 b raze k 2 .gif

zjakot^^jlIF - CompuServe Graphics Interchange f.grf)

Zapisz jako

Rysunek 3.12.
Zapisywanie obrazka
w form acie GIF
z wczonym
przeplotem
etap drugi

Opcje zapisywania
Wersja
|

OK

O Wersja 87a
Wersja 89a
Przeplot

Anuluj
Pomoc

9 Z przeplotem
C Bez przeplotu

! Uruchom optymalizator...

Zacznijmy od przygotowania poszczeglnych klatek za pom oc programu Paint Shop


Pro. Na rysunku 3.13 przedstawiem wszystkie klatki dla naszej animacji. Najprostszym
sposobem przygotowania takiej animacji jest rozpoczcie pracy od koca i przygoto
wanie gotowego napisu, a nastpnie sukcesywne jego skracanie, by na kocu doj do
etapu, gdy w klatce pozostanie jedynie may fragment pierwszej litery. W celu wsta
wienia tekstu musisz skorzysta z ikony Tekst. W nowo otwartym oknie powiniene
wpisa tekst i cao zatwierdzi za pom oc przycisku OK.
Oczywicie, naley pamita podczas stosowania takiej metody, e ostatni obrazek b
dzie mia numer jeden, natomiast ten, od ktrego zaczynae prac, bdzie oznaczony
ostatnim z dostpnych numerw.

Tworzenie stron WWW w praktyce

104

Rysunek 3.13.
Poszczeglne klatki
animacji

iS

B ?

/ *

B a ^
s
(B a r

r t ^

(B a r t ? ^

B a r t

(B a r t ^

B a r t e k

s
B a r t

B a r t e k

B a r t e k

B a r t e i ^ / ?

B a r t e

W moim przypadku przygotowaem dziewitnacie klatek, a nastpnie zapisaem je na


dysku twardym, nadajc im nazwy bdce numerami klatki w caej animacji, dziki
czemu znacznie wygodniej bdzie mi pracowa przy generowaniu animowanego GIF-a.
Teraz przysza pora, by uruchomi program do tworzenia animowanych GIF-w. Nie
stety najnowsza wersja Paint Shop Pro zostaa pozbawiona wygodnego narzdzie do
animacji plikw GIF w zwizku z czym skorzystaem z darmowego programu o nazwie
MS GIF Animator http://www.jhepple.com/gif_animator.htm.
Po uruchomieniu programu kliknij ikon segregatora (rysunek 3.14) i w nowym oknie
wska ostatni klatk animacji. Zatwierd wybr, klikajc przycisk Otwrz.

Rozdzia 3. Grafika sieciowa

Rysunek 3.14.
Przygotowywanie
animowanego GIF-a
etap pierwszy

105

i c=> i fa i

Microsoft GIF Animator

H
u 4-| -fr j j ? j

D
Options J

P Thumbnails Reflect image


Otwieranie

+* (B e t

! gif_anim
Wykonawcy

Album

Nr

fij 15.gif
g l6 .g if
g l7 .g if
jl8 .g r f

g jl9 .g if
Nazwa pliku

(f.gri

Pliki typu

:
Utwrz

All Supported Formats

T3

Anuluj

Ready

Aby doda kolejne klatki animacji, kliknij przycisk oznaczony strzak na rysunku 3.11 0 .
W nowym oknie wska kolejn (liczc od tyu) klatk animacji i kliknij przycisk Otwrz
Czynno t powtrz dla wszystkich klatek tworzonej animacji.
Rysunek 3.15.
Przygotowywanie
animowanego GIF-a
etap drugi

ES

\Microsoft GIF Animator - 19.gif

?l

* M e |x |

J
i

Options I Animation | Image j

Thumbnails Reflect Image

Insert
Szukaj w: j j , gjfanm
Nazwa

Wykonawcy

Album

jt] 14.gif
g l5 . g i f
jta jl6 .g if
jb jl7 .g if
18.gif
g l9 .g if
Nazwa pliku:
Pici typu:

jl8.gif
All Supported Formats

Nr

Tworzenie stron WWW w praktyce

106

Jeeli chcesz, aby animacja trwaa w nieskoczono, przejd do zakadki Animation


(rysunek 3.16) i zaznacz opcj Looping. Nastpnie dla animacji trwajcej w niesko
czono zaznacz Repeat Forever. Moesz rwnie okreli, ile razy dana animacja ma
zosta otworzona. Wystarczy, e w polu Image Count wpiszesz odpowiedni warto.
Rysunek 3.16.
Przygotowywanie
animowanego GIF-a
etap trzeci

M ic ro s o ft GIF A n im a to r - 19 .g if *

& y

%1b [ x 1
Options

+ 1+ 1

! ?

Animation j image |

J
Frame 81

Animation Width:

13 2

Animation Height:

P?1

Image Count:

38

F!

i"~ Looping

Repeat Count:

(l

f ~ Repeat Forever
Trailing Comment:
Frame 82

<B

Frame 83

_d

Ready

Aby okreli czas trwania animacji, przejd do zakadki Image. Nastpnie kliknij przy
cisk oznaczony za pom oc strzaki na rysunku 3.17 iw polu Duration (1/100 s) ustaw
czas, jaki musi upyn pomidzy wywietlaniem kolejnych klatek animacji.
Po wprowadzeniu wszystkich ustawie przysza pora, aby zobaczy efekt naszej pracy.
W ystarczy, e klikniesz przycisk Play widoczny w gwnym oknie programu (rysu
nek 3.18). Po chwili pojawi si nowe okno, w ktrym zobaczysz przygotowan animacj.
Jeeli chcesz wprowadzi jakie zmiany, zamknij okno podgldu (kliknij znak x w pra
wym grnym rogu). Nastpnie nanie odpowiednie korekty i ponownie sprawd efekt.
Aby zapisa gotowy obrazek, kliknij ikon symbolizujc dyskietk (rysunek 3.19),
a nastpnie w nowym oknie w polu Nazwa pliku wpisz nazw i kliknij przycisk Zapisz.
Sam proces publikacji na stronie nie rni si niczym od wstawiania zwyczajnego ob
razka. Dalej zamieszczam przykad wstawienia mojej animacji do kodu strony.
<img src="przyklad.gif" alt="ciekawa animacja" />

Rozdzia 3. Grafika sieciowa

Rysunek 3.17.
Przygotowywanie
animowanego GIF-a
etap czwarty

107

M icrosoft GIF Anim ator - l i

y U la l _

a lB lT H Pl
Options j Animation

!? !
Image j

Image Width:

j376

Image Height:

|171

Left:
Frame 81
Top:

[o-

Duration (1/100 s):


Undraw Method:

JLeave
Frame 82

Transparency
Traraparent Color:

Comment.

Frame 83
Ready

Na doczonej pycie CD, w dziale Przykady, znajdziesz opisany tutaj animowany


GIF oraz poszczeglne klatki, dziki czemu bdziesz mg sprawdzi, jak wygldaj
elementy skadowe oraz gotowa animacja.

108

Tworzenie stron WWW w praktyce

Rysunek 3.19.
Przygotowywanie
animowanego GIF-a
etap szsty

M icrosoft GIF Anim ator - 19.gif *

d|b|h1

e lx |

Options j Animation

H ?1

Image j

tmmmmm _____ ^aac^

Z a pisyw an ie ja k o

Zapisz w: j~ |j" gif_anim


Frame #1

Nazwa

Wykonawcy

_) - ey m Nr

6 jl.g if
@ 2.gif
ibj3.gif
jbj4.gif
Frame #2

jta'; 5.gif
to 6.aif
Nazwa pliku:

[przykad gif

Zapisz jako

jcompuserve (*gif)

ty p

j^^Zapisz j
3

Anuluj

Frame #3
Ready

Redukcja palety kolorw


Przy okazji omawiania formatu GIF postanowiem rwnie opisa, w jaki sposb
mona zredukowa liczb kolorw w palecie. cilej rzecz biorc, chodzi o to, e nie
ma wikszego sensu zapisywa penej palety 256 kolorw dla obrazka, w ktrym uyto
zaledwie kilkunastu kolorw. Jako przykadowy obrazek posuy mi element o wymia
rach 200x200 pikseli, ktry w caoci jest wypeniony gradientowym tem (pynne
przejcie z jednego koloru w drugi).
Ze wzgldu na fakt, e obrazki w tej ksice s czarno-biae, nie bd tutaj ich publi
kowa, ale jeeli jeste zainteresowany tym, ja k w ygldaj po wykonaniu opisanych
czynnoci, odsyam do pyty CD, gdzie w dziale Przykady zamieciem wszystkie
obrazki z rnych etapw.
Najprostszym sposobem zredukowania kolorw jest skorzystanie z opcji Zmniejsz gbi
kolorw znajdujcej si w menu Obrazek. Znajduj si tam dodatkowe opcje, dziki
ktrym mona ograniczy liczb kolorw do 16 (4-bitowy) lub 2 (1-bitowy). Oczywi
cie, to za mao, dlatego warto zwrci uwag na opcj o nazwie X-Kolorw, dziki
ktrej moemy redukowa w niemal dowolny sposb liczb kolorw ilustracji.
Okno widoczne na rysunku 3.20 pozwala na rczne ograniczenie palety z 256 do 2 ko
lorw. Cay proces wymaga odrobiny zacicia i kilku prb, by pozna zasad dziaania
tego narzdzia.
Redukcj zaczynamy od okrelenia palety, z ktrej chcemy skorzysta. Autorzy PSP
przewidzieli w tym oknie dwie moliwoci; pierwsza nosi nazw Zoptymalizowane przej
cia m edianowe, druga Standardowa/D o publikacji w internecie. Paleta o nazwie
Standardowa/Do publikacji w internecie wywodzi si z czasw, gdy przegldarki miay

Rozdzia 3. Grafika sieciowa

Rysunek 3.20.
Rczna redukcja
kolorw palety
dla obrazkw
zapisywanych
w form acie GIF

1 09

r Podgld

{?] Podgld na obrazku

Powikszenie:

100 H i l

f g j ]

Chwyt

j +

Ustawienia

Paleta

Opcje

Liczba kolorw:

0 Wzmocnij oznaczone kolory o.

[ : 0
Zoptymalizowane przecicie mediano we
Standardowa/D o publikacji w Internecie

U wzgldnij kolory systemu Windows


Zmrejs2 spad koloru

Metoda redukcji
# Najbliszy kolor

Dyfuzja bdw

OK

"

j i

Anuluj

; 1

Pomoc

problemy z poprawnym odw zorow aniem kolorw. Twrcy przegldarki Netscape


Navigator stworzyli wtedy szecian barw, na ktry skadao si 216 bezpiecznych kolo
rw. Stosowanie tego szecianu dawao pewno, e strona bdzie wygldaa na kadym
komputerze dokadnie tak samo, jak yczy sobie tego autor. Dzisiaj nie musisz ju
pamita o tym archaicznym rozwizaniu, poniewa liczba osb pracujcych na kom
puterach przy wykorzystaniu palety 256 kolorw moe by przedstawiana w promilach.
W zwizku z tym odrzucamy bezpieczn palet i ustawiamy opcj Zoptymalizowane
przejcia medianowe. Nastpn wan spraw jest okrelenie sposobu redukcji. Rwnie
i tym razem okno zawiera dwie moliwoci, Najbliszy kolor oraz Dyfuzja bdw.
Teraz wystarczy w polu Liczba kolorw ustawi odpowiedni liczb kolorw i klikn
przycisk OK. Na ekranie od razu zobaczymy efekt redukcji kolorw. Jeeli nie zadowala
Ci jako obrazka, sprbuj uy opcji cofania Edycja/Cofnij. Nastpnie wybierz
inn liczb kolorw lub zmie sposb redukcji. Na pycie CD zamieciem przykady
kilku obrazkw oraz sposobw, w jakie zostay w nich zredukowane kolory. Warto tam
zajrze, poniewa da Ci to moliwo wyrobienia sobie wasnego zdania na temat re
dukcji kolorw.
Paint Shop Pro pozwala korzysta z bardzo wygodnego kreatora przydatnego przy zapi
sywaniu plikw do formatu GIF. N arzdzie to jest dostpne z menu Plik/Eksportuj
i nosi nazw Optymalizator plikw GIF. Jeeli uwaasz, e opisana metoda jest zbyt
skomplikowana, sprbuj uruchomi wspomniany dodatek i zobacz, jak on dziaa. W za
sadzie wszystkie opcje, ktre tam zgromadzono, odpowiadaj temu, o czym ju napi
saem poprzednio.

110

Tworzenie stron WWW w praktyce

Jeeli nadal masz wraenie, e co jest nie tak, kliknij kursorem myszy przycisk Uyj
kreatora, ktry znajduje si w lewym dolnym naroniku okna widocznego na ry
sunku 3.21. Ten kreator poprowadzi Ci krok po kroku przez cay proces optymalizacji.
Rysunek 3.21.
Narzdzie
do optymalizacji
plikw GIF

Podgld
Przed:

a
Powikszenie:

.J -0

[ jjg

chwyt:

[ * ]

Ostatnio uywane

Z kompresj: 2 211 bajty

Bez kompresji: 90124 bajty


Przezroczysto

Czciowa przezroczysto j Kolory ! Format

Czas pobierania

Ktre obszary obrazka maj sta si przezroczyste?


O adne
Istnieica przezroczysto obrazka lub warstwy
W biecym zaznaczeniu
Poza biecym zaznaczeniem
Obszary pasujce do tego koloru

i | j ^ \ JJzyj kreatora

T olerancja

OK

| [

Anuluj

[_

Pomoc

JPG
Drugim formatem uywanym do publikacji grafiki na stronie WWW jest JPG. Format
ten zosta wprowadzony przez Joint Photographic Experts Group. Kompresja w przy
padku JPG wyglda zupenie inaczej, ni to miao miejsce z GIF. Na samym pocztku
zostaje utworzony obraz czarno-biay i oddzielnie s przechowywane informacje o ko
lorach. Nastpnie zostaje dokonana analiza i z informacji o kolorach program usuwa
pewne subtelne rnice, ktre nie s widoczne dla ludzkiego oka.
Format JPG pozwala regulowa stopie kompresji, dziki czemu grafik ma wpyw na
kocowy rozmiar ilustracji. Niestety, w tym przypadku wraz ze wzrostem kompresji
nastpuje spadek jakoci grafiki czy zdjcia. Innym sowy, kompresja JPG jest kom
presj stratn. Stopie kompresji moe wynosi nawet 1:100, jednak zazwyczaj powy
ej 1:30 jako obrazu ulega widocznemu pogorszeniu.

Rozdzia 3. Grafika sieciowa

111

Niestety, nie da si jednoznacznie okreli, jaki wspczynnik kompresji jest ideal


nym rozwizaniem, poniewa kady z obrazkw jest inny i wymaga indywidualnego
traktowania.
Format JPG pozwala na zapisanie penej 24-bitowej palety kolorw ponad 16 mi
lionw kolorw. Dziki temu idealnie nadaje si do przechowywania fotografii oraz
bardzo kolorowych grafik. Jeeli chcesz zapisa obrazek w formacie JPG, nie musisz
redukowa kolorw, poniewa nie bdzie to miao istotnego wpywu na rozmiar pliku,
a spowoduje jedynie pogorszenie jego jakoci.
Podobnie jak w przypadku formatu GIF, rwnie JPG pozwala na stworzenie progre
sywnego obrazka czyli takiego, ktry aduje si na raty. cilej rzecz biorc,
niemal od razu widzimy rozmyty obraz, a z kad chwil (kolejnym przebiegiem) na
biera on wyrazu.
Przyjrzyjmy si teraz, w jaki sposb moemy stworzy wasny JPG. Do pracy bdzie
nam potrzebny Paint Shop Pro. Na razie zakadam, e mamy ju odpowiedni obrazek,
z ktrego chcemy skorzysta.
Przy zapisie obrazka na dysku musisz w polu Zapisz ja k o typ wybra format JPG; na
stpnie wprowad nazw dla pliku i kliknij przycisk Opcje.
Pierwsza sekcja widoczna na rysunku 3.22 pozwala na stworzenie obrazka, ktry b
dzie wywietlany od razu lub progresywnie. Wystarczy, e rozwiniesz list i wybierzesz
jedn z dostpnych opcji (Kodowanie standardowe lub Kodowanie progresywne).
Rysunek 3.22.
Moliwoci
form atu JPG

Opcje zapisywania
Kodowanie
Typ

P/| Zapisz informacje EXIF

: Kodowanie standardowe

Kompresja
Wspczynnik kompresji:
20

Najnisza kompresja,
najwysza jako

Podprbkowanie chromatyczne:

Najwysza kompresja,
najnisza jako

YCbCr 1x1 1x1 1x1 (brak)

Profil ICC
H ] Osad profil ICC:
sRGB Color Space Profile

OK

Anului

Pomoc

Uruchom optymalizator.

Druga z widocznych sekcji odpowiada za regulacj stopnia kompresji. Znajduje si


tam suwak, ktrym ustalasz wspczynnik kompresji. Bliej lewej strony obrazek ma
lepszjako, ale zajmuje wicej miejsca. Natomiast im bliej strony prawej, tym ob
razek mniejszy, ale jego jako wyranie spada. Niestety, w tym oknie nie masz mo
liwoci sprawdzenia jakoci obrazka po zastosowaniu kompresji, dlatego proponuj, by
nie uywa tej metody zapisu.

Tworzenie stron WWW w praktyce

1 12

Znacznie wygodniejszym sposobem kompresji i zapisu obrazkw w formacie JPG jest


opcja Plik/Eksportuj/Optymalizacja plikw JPEG.
Na rysunku 3.23 przedstawiono okno narzdzia Optymalizator plikw JPEG. Zdjcie
widoczne z lewej strony jest obrazkiem w postaci nieskompresowanej, natomiast fo
tografia widoczna z prawej strony to podgld ilustracji poddanej kompresji o wsp
czynniku 15. Mniej wicej w centralnej czci znajduje si pole Ustaw warto kompre
sji na, w ktrym moesz regulowa wspczynnik kompresji, a efekt dziaania bdzie
widoczny na bieco. Druga zakadka pozwala wczy tworzenie progresywnego ob
razka. Natomiast w ostatniej zakadce znajduje si symulacja czasu pobierania danego
zdjcia przez modemy o rnych prdkociach.
Rysunek 3.23.
Optymalizacja
plikw JPG

Ustawienia

Bez kompresji: 2 359 420 bajty


Jako j

Z kompresj: 239 688 bajty

Format I C i pobierania

Ustaw wspczynnik kompresji obrazka.


Uwaga: Wiksze wartoci kompresji zmniejszaj rozmiar pliku lecz pogarszaj jako obrazka.

Ustaw warto kompresji na:

Podprbkowanie chromatyczne:

20

lYCbCr 1x1 1x1 1x1 (brak)

O Zapisz dane EXIF (dostpne tylko w formacie Standardowy)

Mz kreatora

OK

Anuluj

Pomoc

Po dobraniu odpowiedniego wspczynnika kompresji i klikniciu przycisku OK zo


stan wprowadzone zmiany w obrazku i na ekranie pojawi si okno zapisu, w ktrym
musisz poda nazw oraz lokalizacj dla pliku.
N a doczonej pycie CD w dziale Przykady zamieciem kilka przykadw zdjcia
skompresowanego w formacie JPG. Moesz tam zobaczy obrazek nieskompresowany
oraz przykady obrazkw o kompresji 20, 50 oraz 90. Gorco polecam, by zobaczy,

Rozdzia 3. Grafika sieciowa

113

co si dzieje ze zdjciem podczas stosowania rnych wspczynnikw kompresji.


Sprbuj dokona porwnania poszczeglnych zdj i zwr uwag na to, e obrazek
o stopniu kompresji 1:50 nadal ma akceptowalnjako.

PNG
Trzecim i jak na razie ostatnim popularnym formatem publikacji grafiki rastrowej
na stronie WWW jest PNG (Portable N etwork Graphics). Rozwizanie to powstao
w chwili, gdy waciciel praw patentowych do kompresji zastosowanej w formacie GIF
zacz pobiera opaty licencyjne za uywanie tego rozwizania. PNG opiera si na
oglnie dostpnych darmowych algorytmach kompresji, dziki czemu nie bdzie nigdy
koniecznoci opacania jakichkolwiek licencji.
Do podstawowych zalet tego formatu moemy zaliczy:
obsug palety do 48 bitw w kolorze oraz 16 w odcieniach szaroci,
moliwo okrelania przezroczystoci,
obsug korekcji gamma,
obsug trybu progresywnego,
bardzo efektywn i bezstratn kompresj.
Obsuga formatu PNG przez gwne przegldarki zacza si ju od wersji 4 i z chwil
pojawiania si nowszych przegldarek wyglda znacznie lepiej, jednak nadal nie jest
idealna.
Format PNG jest obsugiwany przez Paint Shop Pro. W menu Plik/Eksportuj znajduje
si specjalne narzdzie Optymalizuj pliki PNG, dziki ktremu moesz przygotowa
swoje pliki w tym formacie. Praca z tym narzdziem w zasadzie niczym nie rni si
od wykorzystania dwch podobnych kreatorw opisanych przy okazji formatw JPG
oraz GIF, dlatego nie widz koniecznoci prezentowania po raz kolejny podobnych
moliwoci; proponuj natomiast, by zapozna si z moliwociami PNG we wasnym
zakresie, gdy format ten z ca pewnoci zajmie miejsce poczciwego GIF.

Inne metody redukcji rozmiaru zdj i grafiki


Podrozdzia ten dotyczy zarwno obrazkw zapisanych w formacie JPG, jak i GIF czy
PNG, wic prosz, by informacji tutaj zawartych uywa w odniesieniu do wszystkich
typw grafiki rastrowej przeznaczonej na potrzeby sieci.
Jednym z najprostszych sposobw zredukowania rozmiaru obrazka jest zmiana jego
fizycznej wielkoci. Zazwyczaj jest tak, e posiadane zdjcia s zbyt due do publika
cji na stronie i wypadaoby je przeskalowa. Skalowanie obrazka moe odbywa si
z poziomu jzyka HTML (XHTM L) za pom oc atrybutw w id th i h e ig h t lub CSS.
Niestety, takie postpowanie nie przynosi adnego spadku rozmiaru pliku z obrazkiem.
Pisaem, e zawsze publikujemy obrazki o takich rozmiarach, by nie byo potrzeby

Tworzenie stron WWW w praktyce

114

ich skalowania; teraz dowiesz si, jak zmniejszy fizyczny rozmiar obrazka, a co za
tym idzie pliku. Jako przykad znowu posuy nam zdjcie, nad ktrym pracowa
em przy okazji omawiania formatu JPG i kompresji.
Oryginalny rozmiar tego zdjcia wynosi 1792x1200 pikseli. Informacje te mona
uzyska dziki opcji Obrazek/Informacje o obrazku (rysunek 3.24).
Rysunek 3.24.
Odczytywanie
informacji
na tem at obrazka

44 Informacje o biecym obrazku

N o m a c * o obrazku { In to n a cje o twrcy | M o m a e o in a ku wodnym j M o m a q e EXIFj


Plik rdowy
Nazwa pliku:

F:\Moje dokumenty\! - HELIONM W trakcie pisania \Tworzenie stron


W W W w praktyce. Wydanie ll\CD-ROM\Przyklady^pg\duzy.jpg

Typ pliku:

JPEG

Obrazek

Stan
1792 x 1200 piksele

Zmodyfikowano:

Nie

227.584 x 152.400 mm

Ma zaznaczenie:

Nie

Wymiary:

Piksele na cm:
G bia pikseli/kolorw:
Wykorzystanie pamici

78.740
RG B-8

Liczba warstw:

Liczba kanaw alfa:

W pamici RAM

Na dysku
126K

6300K

Cofnij:

OK

OK

cznie:

OK

G300K

Obrazek:
Pami podrczna obrazkw:

OK

OK

Anulu

; !

Pomoc

Dla porwnania najpopularniejsze rozdzielczoci ekranu to 1024x768 i 1280x 1024.


Teraz mamy ju jasno, e posiadany obrazek jest stanowczo za duy do publikacji
na stronie i musi by zmniejszony.
Przy oryginalnym rozmiarze po zapisaniu z kompresj 1:50 obrazek zajmuje na dysku
129 679 bajtw. Warto, by sobie zapamita t liczb w celu pniejszego porwnania
z pomniejszonym obrazkiem.
Pomniejszanie obrazka jest moliwe tylko w palecie 24-bitowej, a suy do tego opcja
o nazwie Zmie rozmiar, dostpna w menu Obrazek. Pomniejszanie fotografii czy te
grafiki jest moliwe na kilka sposobw. Pierwszy z nich to podanie w sekcji Wymiary
w pikselach rozmiaru obrazka i ustawienie jako jednostki wartoci Piksele. Zwr uwag,
e po w pisaniu jednej z w artoci druga jest okrelana automatycznie na podstawie

115

Rozdzia 3. Grafika sieciowa

Rysunek 3.25.
Zmiana rozmiaru
grafiki lub zdjcia

Wymiary oryginalne
Szeroko:

Piksele: 1792 (227,584 Milimetry)

Wysoko:

Piksele: 1200 (152,400 Milimetry)

Rozdzielczo: 78,740 Piksele/centymetr


Wymiary w pikselach (1792 x 1200 pikseli)
Szeroko:

Wysoko:

v Q

00

Ci ]

Rozmiar wydruku
Szeroko:
[ Milimetry

Piksele/centymetr

J Zmie rozmiar/rozdzielczo metod

Dwuszeciennie

0 Zachowaj oryginalny rozmiar wydruku

[5*1Zablokuj proporcje:

-rfr]

j 1,4933

do 1

( 2 Zmie rozmiar wszystkich warstw


OK

Anuluj

Pomoc

wspczynnika okrelonego w polu Zablokuj proporcje. W spczynnik ten pozwala


na zachowanie proporcji skalowanego obrazka, ale w niektrych sytuacjach mona go
wyczy i wtedy musisz rcznie wprowadzi zarwno wysoko, jak i szeroko.
Drug metod skalowania jest okrelenie procentowego rozmiaru obrazka wzgldem
oryginau. Wystarczy, e w sekcji Wymiary w pikselach ustawiasz Procenty i wpiszesz
np. warto dwadziecia i obrazek bdzie stanowi zaledwie jed n pit oryginalnego
rozmiaru. Pamitaj, e warto sto to obraz o oryginalnym rozmiarze. Przykadowo ten
sam obrazek pomniejszony do dwudziestu procent oryginau na dysku zajmuje ju je
dynie 21 274 bajtw, czyli jest ponad sze razy mniejszy, a jego rozmiar jest ju do
zaakceptowania dla potrzeb sieci. Na doczonej pycie CD zamieciem obrazek o ory
ginalnych rozmiarach oraz jego pomniejszon wersj; jeeli chcesz zobaczy, jak wy
glda on po zmniejszeniu, to zapraszam do dziau Przykady.
Innym rwnie ciekawym sposobem redukcji wielkoci pliku z obrazkiem jest spraw
dzenie i zmniejszenie jego rozdzielczoci. Zanim jednak opisz, co mam na myli,
potrzebujesz kilku sw tytuem wprowadzenia. Ot monitor komputerowy w zaleno
ci od jego jakoci wywietla obraz z rozdzielczoci okoo 72 dpi. Dlatego te obrazek
przeznaczony do publikacji w sieci nie musi mie wikszej rozdzielczoci ni wspo
mniane 72 dpi. Oczywicie fotografie, ktre maj by poddawane dalszej obrbce i dru
kowaniu, powinny mie znacznie wiksze rozdzielczoci, np. moja drukarka moe
wydrukowa fotografi z rozdzielczoci 2400 dpi, a skaner moe odczyta obrazek
w rozdzielczoci wikszej ni 9600 dpi.

Tworzenie stron WWW w praktyce

116

Bardzo czsto bywa tak, e fotografie, jakie mamy do publikacji na stronie, zostay
wykonane w rozdzielczoci znacznie wikszej ni 72 dpi. Dlatego zanim opublikujesz
obrazek, musisz sprawdzi jego waciwoci i w razie potrzeby zredukowa rozdziel
czo. Do redukcji rozdzielczoci posuy nam to samo okno, za pomoc ktrego zmie
nialimy wymiary obrazka. Niezbdna opcja znajduje si w sekcji Rozmiar wydruku
mam tutaj ma myli pole Rozdzielczo. W ystarczy, e w tym polu zmienisz roz
dzielczo na 72 dpi i po klikniciu kursorem m yszy przycisku OK zostanie ona
zmieniona.

Pozostae formaty publikacji grafiki na stronie WWW


W tym podrozdziale postanowiem opisa kilka formatw uywanych obecnie do pre
zentacji elementw graficznych na stronie WWW, wymagajcych do dziaania specjal
nych dodatkw pluginw. Mam tutaj na myli rozwizanie oferowane przez Adobe
Flash oraz format SVG, ktry zdobywa rynek.
Pierwsze rozwizanie suy do publikacji na stronie grafiki w postaci wektorowej, dziki
czemu bardzo skomplikowane elementy zajmuj niewiele miejsca. Ogromn zalet gra
fiki wektorowej jest to, e jest ona niezalena od rozdzielczoci i wraz z jej wzrostem
grafika ta nie traci na jakoci. Strona oparta na technologii Flash jest niezalena od
rozdzielczoci.
Ogromnym plusem tego rozwizania jest fakt, e pozwala ono na animowanie dowol
nych elementw oraz dodawanie dwikw i muzyki, dziki czemu moemy stworzy
doskonae strony.
Oczywicie, jak kade rozwizanie, rwnie Flash ma swoje wady; jest to bez wtpienia
chociaby konieczno instalacji specjalnego dodatku do przegldarki, dziki ktremu
moemy oglda te zapierajce w dech w piersiach efekty. W zasadzie wszystkie nowe
przegldarki zawieraj ju niejako fabrycznie wbudowan wspomnian wtyczk. Insta
lujc pen wersj MS Internet Explorera, mamy moliwo ogldania stron, na ktrych
uyto technologii Adobe Flash.
Dalej zamieszczam kilka ciekawych stron powiconych technologii Flash oraz przed
stawiajcych sporo ciekawych rozwiza; mam nadziej, e zachc Ci one do spraw
dzenia si w tworzeniu animowanych projektw przy wykorzystaniu technologii Flash:
http://www.adobe.com
http://www.flashzone.pl
http://www.2advanced.com
http://www.favouritewebsiteawards.com
http://helion.pl/search.cgi?szukaj =Flash
Drugim bardzo ciekawym form atem prezentacji grafiki na stronie WWW jest SVG.
miao mog napisa, e format SVG jest hitem ostatnich lat i ogromnym zagroeniem
dla rozwizania oferowanego przez firm Adobe.

Rozdzia 3. Grafika sieciowa

1 17

Zaczn jednak od pocztku i wyjani, czym je st SVG SCALABLE VECTOR


GRAPHICS. Ot je st to rozw izanie pozw alajce na publikacj na stronie WWW
grafiki i tekstu w postaci wektorowej. Podobnie jak Adobe Flash format ten potrze
buje specjalnej wtyczki, ktr mona pobra ze strony http://www.adobe.com.
SVG powsta jako rozszerzenie moliwoci jzyka XML, a tworzenie dokumentw jest
moliwe za pomoc zwyczajnego edytora tekstowego lub wyspecjalizowanych narz
dzi. Do najwaniejszych moliwoci formatu SVG moemy zaliczy tworzenie sta
tycznych i animowanych dokumentw, prac z filtrami i moliwo czenia grafiki
rastrowej i wektorowej na stronie.
Niestety, z braku miejsca w tej ksice nie bd zagbia si w opis szczegw i niu
answ SVG, natomiast dalej zamieciem kilka odnonikw do stron WWW, na kt
rych moesz poczyta o SVG i zobaczy praktyczne przykady zastosowania (pamitaj
jednak o koniecznoci instalacji wtyczki):
http://www.adobe.com/svg
http://www.inkscape.org
Wspomniaem, e do tworzenia grafiki przy wykorzystaniu SVG wystarczy zwyczajny
tekstowy edytor, jednak ten sposb jest bardzo pracochonny; powstao kilka ciekawych
narzdzi do graficznego tworzenia dokumentw SVG. Dalej zamieszczam odpowiednie
odsyacze:
http://www.adobe.com/products/golive/mobile.html
http://www. inks cape, org
O ile oprogramowanie firmy Adobe jest kosztownym rozwizaniem, to z ca pewno
ci kady pocztkujcy twrca stron WWW moe zainteresowa si darmowym pro
gramem Inkscape.

Wygadzanie krawdzi antyaliasing


Grafiki przygotowane na potrzeby publikacji w intemecie, np. przyciski, w przypadku
gdy skadaj si z krzywych lub ukonych linii, z ca pewnoci bd miay poszar
pane krawdzie, tak jak w przykadzie widocznym na rysunku 3.26. W powikszeniu
krawdzi koa wida wyranie zby, ktre s wynikiem ogranicze grafiki rastrowej.
Rysunek 3.26.
Przykad
poszarpanych
krawdzi

1 18

Tworzenie stron WWW w praktyce

Grafika rastrowa to zbir pikseli rozmieszczonych na ukadzie wsprzdnych.

Uwaga

Poszarpane krawdzie w wielu przypadkach bardzo brzydko wygldaj na stronie WWW,


zwaszcza gdy mamy do czynienia z elementami o duym kontracie, np. granatowymi
przyciskami na biaym tle. N a szczcie istnieje kilka sposobw na ukrycie nierw
nych krawdzi.
Najczciej spotykanym rozwizaniem jest stosowanie antyaliasingu. Metoda ta bazuje
na niedoskonaoci ludzkiego oka i polega na dodaniu przejciowych barw pomidzy
dwoma kolorami. W naszym przypadku niech to bdzie biae to i zielony element.
Z antyaliasingu moesz korzysta tylko w 24-bitowej palecie i dlatego jeeli przygo
towujesz przycisk w formacie GIF, musisz wykona go w penej palecie kolorw, a na
stpnie dokona redukcji do potrzebnej liczby kolorw.
Antyaliasing m oesz stosowa zarwno podczas tworzenia elementw graficznych
(figur, linii), jak i tekstu. Niezbdna opcja o nazwie Wygadzanie optyczne znajduje si
w oknie waciwoci wybranego narzdzia (rysunek 3.27).
Rysunek 3.27.
Wczanie
wygadzania

Corel Paint Shop Pro Photo XI - Obrazek3


Plik

Edycja

Widok

Obrazek

Dopasowanie

Efekty

Wrstt

N a rysunku 3.28 zamieciem przykad tego samego okrgu co na rysunku 3.26, z t


rnic, e zosta on wykonany przy wczonym antyaliasingu. Przyjrzyj si dokadnie
krawdzi koa i zwr uwag na to, e automatycznie zostay dodane barwy przejciowe
pomidzy kolorem koa (zielonym) i ta (biaym).
Rysunek 3.28.
Przykad dziaania
wygadzania

Na przykadzie wida, e program doda trzy odcienie koloru zielonego, dziki czemu
cae koo wydaje si idealnie gadkie. Dalej zamieszczam dokadne numery poszcze
glnych kolorw, by m ia moliwo zauwaenia rnicy na czarno-biaym rysunku.
kolor koa #00C000,
pierwsza barwa przejciowa #37CE37,
druga barwa przejciowa #9EE79E,
trzecia barwa przejciowa #E0F7E0.

Rozdzia 3. Grafika sieciowa

119

Rysunek 3.29 przedstawia gotowe koo narysowane przy uyciu opcji antyaliasingu.
Rysunek 3.29.
Widok kola
z wczonym
wygadzaniem

Stosowanie antyaliasingu jest wskazane przy tworzeniu wszystkich elementw, ktrych


krawdzie s zaokrglone lub pooone pod skosem. Natomiast nie powinno si go
stosowa w elementach o rwnych krawdziach, np. kwadratach czy prostoktach,
gdy w takim przypadku powoduje to pogorszenie jakoci i niepotrzebnie zwiksza
wielko pliku.
Niestety, poza sporymi zaletami antyaliasing ma rwnie wad, ktra ujawnia si pod
czas prby poczenia formatu GIF i efektu transparentnoci. Problem polega na tym,
e dookoa le przygotowanego obrazka pojawia si cienka obwdka w kolorze innym
ni to strony WWW. Zamy, e publikujemy niebieski przycisk na stronie o kolorze
czarnym. W takim przypadku obwdka, ktra pojawi si przy obrazku, moe by biaa.
Na rysunku 3.30 dokadnie wida opisany przeze mnie efekt. Najprostszym sposobem
pozwalajcym na uniknicie problemu z dodatkow obwdk jest przygotowanie ob
razka na tle podobnym do tego, na ktrym bdzie on publikowany. Nastpnie kolor ta
okrelamy jako przezroczysty i obwdka jest niewidoczna na stronie, poniewa barwy
przejciowe s dopasowane do ta strony.
Rysunek 3.30.
Przykad brzydkiej
biaej otoczki.
Jest to efekt poczenia
antyaliasingu
oraz funkcji
transparentnoci

Innym sposobem pozwalajcym unikn problemu z niechcian obwdk jest przy


gotowanie obrazka w duo wikszym rozmiarze ni wymaga tego strona bez antyalia
singu, a nastpnie przeskalowanie go w programie Paint Shop Pro do odpowiednich
wymiarw potrzebnych na stronie WWW i zapisanie z okreleniem koloru przero
czystego (rysunek 3.31). Dziki takiej prostej operacji obrazek nie ma obwdki ani po
strzpionych krawdzi, a przy tym antyaliasing nie ma wpywu na wielko samego
pliku, poniewa nie s dodawane barwy przejciowe.

Tworzenie stron WWW w praktyce

120

Rysunek 3.31.
P rzykad obrazka
z gadkimi krawdziami
bez dodatkowej
obwdki

Tworzenie gotowych rozwiza


na potrzeby stron WWW
Zdobye ju niezbdn wiedz na temat formatw graficznych stosowanych na stro
nie WWW. Poznae sposoby zmniejszania objtoci grafiki przeznaczonej do publikacji
w sieci, a teraz przysza pora na przygotowanie kilku konkretnych rozwiza przydat
nych na kadej stronie.

Prostoktne i owalne przyciski


Zaczniemy od przygotowania przyciskw prostoktnych i owalnych, gdy jest to naj
prostsza czynno, a w nastpnym podrozdziale dowiesz si, jak wykona przycisk
o nieregularnych ksztatach lub zaokrglonych naronikach.
Wszystkie opisy staraem si maksymalnie uproci, tak by nawet pocztkujcy grafik
mg przygotowa wasny przycisk gotowy do uycia na stronie WWW. Oczywicie,
osoby majce styczno z grafik komputerow znaj inne, znacznie doskonalsze spo
soby tworzenia przyciskw czy te innych elementw graficznych strony, dlatego na
samym pocztku chciaem napisa, e moje przykady to jedynie najprostsze sposoby
wykonania podstawowych czynnoci.
Prac rozpoczynamy od utworzenia nowego obrazka. Rozmiar tego elementu moe
by wikszy ni planow any przycisk, dziki czemu bdzie nam znacznie wygodniej
pracowa nad caym projektem. Za tworzenie nowego projektu odpowiada opcja Plik/
Now y lub ikona symbolizujca bia kartk.
Pamitaj, e rozdzielczo tworzonego obrazka nie powinna by wiksza ni 72 dpi,
a do pracy powiniene uy 24-bitowej palety kolorw. Na rysunku 3.32 przedstawiono
przykad zalecanych ustawie.

Rozdzia 3. Grafika sieciowa

121

Rysunek 3.32.
Tworzenie przycisku
etap pierwszy

^ Wysoko:
Rozdzielczo:

\300
j 78,740

Charakterystyka obrazka

%To rastrowe
To wektorowe

To - rodki artystyczne

Gbia kolorw:

| RGB - 8 bitw/kana

Kolor:

O Przezroczysto
Wymagana pami:

432 KB

Wymiary:

300 x 300 Piksele


CK

j Anulu)

| Pomoc

Pamitajc o problemach z przezroczystym elementem, w ktrym uyto antyaliasingu,


warto ustawi kolor ta caego nowo tworzonego obrazka, tak by by zbliony do ko
lorystyki strony, na ktrej przycisk zostanie uyty. Ma to szczeglne znaczenie w przy
padku tworzenia przyciskw owalnych. To m oesz definiowa na samym pocztku
w oknie nowego projektu lub po jego utworzeniu wyla farb na cay obszar pro
jektu. Ze wzgldu na czytelno rysunkw zamieszczonych w tej ksice postanowiem
przygotowa przycisk przeznaczony na stron o biaym tle, ale nic nie stoi na prze
szkodzie, by u siebie zmieni kolorystyk caoci, tak by pasowaa do Twojego projektu.
Tworzenie przycisku rozpoczniem y od wybrania narzdzia selekcji (rysunek 3.33).
W grnej czci okna, w polu Typ zaznaczania, moesz okreli ksztat selekcji. Do
wyboru masz kilka ksztatw, np. prostokt, owal, zaokrglony prostokt, etc. Po wybra
niu odpowiedniego ksztatu selekcji pozostaje wczenie opcji Wygadzanie optyczne.
Pamitaj, e antyaliasingu uywamy tylko dla elementw, ktre maj okrge lub owalne
elementy; natomiast jest on niewskazany dla prostoktw czy kwadratw, ktre s
umieszczone idealnie w pionie czy te poziomie.
Nastpnym krokiem jest narysowanie naszego przycisku w obszarze roboczym. Od
powiedni przykad znajduje si na rysunku 3.34. Obsuga narzdzia selekcji ogranicza
si do umieszczenia kursora w jednym z naronikw, wcinicia i przytrzymania lewe
go przycisku myszy, a nastpnie przesunicia kursora, tak by powsta prostokt o wy
maganych rozmiarach.

122

Tworzenie stron WWW w praktyce

Rysunek 3 .3 3 .

& fl Corel Paint S hop Pro P hoto XI - [0 b ra ze k4 @ 250% (To)]

Tworzenie przycisku
etap drugi

Plik
U

Edycja

W ido k

Obrazek

d op aso w a n ie

E j

''

Efekty
l

Tryb:

U Jjte ll

li

i i i Ii

U I.fm 1 1u n I m

O biekty

Zaznaczeni.

P opraw zdjcie -

.- : i - :

Zaokrglony prostokt

I 1 JJUL U i J j S U W

W arstw y
Q

Palety

j Wygadzanie optyczni

i Pu i i I u i ilu.,u l??l ll j U l iu u lx L u llJ X ll I.I..

! C o rd Paint Shop Pro Photo XI - [Obrazeki- 250% Cite)] '


O

Plik
U

Edycja
I

Wfidok
J

ib

fibrazek
r 4

lO

dopasowanie
'

Efekty
'

Warstwy
O

Ofaiekty

Zaznaczenia

Po pra w z d j c ie *

P a le t / -

Ofcno
.

Pornos

Po m niejsz

Pow iksz

Utwrz z * E N * a *n * zi

t. aby doda

(x:299y:172)

!- O b ra ze k 300* 300 RGB - 8 bitdw /kan a

Rysunek 3 .3 4 . Tworzenie przycisku etap trzeci

Udao nam si przygotowa zarys przycisku i teraz pora zaj si jego wypenieniem.
W tym celu skorzystamy z ikony wiaderka, odpowiedzialnej za wypenienie naszej
selekcji wybranym kolorem. Po wczeniu wypenienia musisz na pasku koloru z pra
wej strony wybra odpowiedni kolor, np. zielony. Nastpnie powiniene nakierowa
kursor myszy nad zaznaczony obszar i klikn lewy przycisk myszy.

123

Rozdzia 3. Grafika sieciowa

Mamy ju przygotowany element o okrelonym ksztacie i kolorze, jednak jest on zu


penie paski i nie ma nic wsplnego z efektownymi przyciskami, jakie znamy z innych
stron. Nie martw si tym, bo teraz dodamy efekt przestrzennoci do tego obrazka, dziki
czemu bdzie on wyglda o niebo lepiej.
Odpowiednie narzdzie pozwalajce stworzy przestrzenny przycisk znajduje si w menu
Efekty/Efekty 3D/W ygld przycisku. Pamitaj jednak, e w celu skorzystania z tego
narzdzia nadal musisz mie w czon selekcj przycisku na stronie; w przeciwnym
razie opcja Wygld przycisku nie zadziaa. Jeeli wyczye selekcj, to moesz sko
rzysta z narzdzia Magiczna rdka lub utworzy przycisk od pocztku. Dodam, e
w niektrych przypadkach lepszym rozwizaniem jest stworzenie przycisku od nowa ze
wzgldu na pewne niedokadnoci rdki.
Praca z narzdziem do tworzenia przycisku jest bardzo prosta i ogranicza si jedynie do
eksperymentw z suwakami znajdujcymi si w oknie widocznym na rysunku 3.35.
Spor zalet tego narzdzia jest moliwo podgldania na bieco uzyskanego efektu.
Rysunek 3 .3 5 .
Tworzenie przycisku
etap czwarty

Wygld przycisku
Podgld

1 0 P o d g ld na o brazku

Przed:

Po:

P ow ikszenie:

W y so k o :

10

K ra w d
!

P rzezro czyste

O stre

Sze ro ko:

Anuluj

Kolor:

Pom oc

Po wprowadzeniu odpowiednich ustawie i klikniciu przycisku OK na ekranie mo


nitora pojawi si pikny przycisk stwarzajcy wraenie przestrzennego obiektu (rysu
nek 3.36). Dopiero teraz moesz wyczy migajce linie selekcji w tym celu uaktyw
nij narzdzie selekcji, a nastpnie kliknij prawym przyciskiem myszy okno rysunku,
jednak na zewntrz zaznaczonego obszaru.

124

Tworzenie stron WWW w praktyce

J Corel Paint Shop Pro Photo XI - [Obrazek4* S 100% (To)J

lik
j

dycja

L ) ^

ffiidok
G

&

Qbrazek
^

dopasowanie
tu

Efekty

Warstwy

^ *kM

Obiekty

Popraw zdjcie

aznaczenia
Palety *

Ojjno

Pom o j

_ v Pomniejsz

Powiksz

m.

[yiWyk nanSt*

N i n y a t a rn a tte n ie - Klirnij i przecignij, aby- zazn aczy Oyj klaw isza S h ift abv do d a d o istniejceg o zaznaczenia lu b klaw isza C

O bra ze k: 300 * 300 RGB - 8 bit w /kan a

Rysunek 3 .3 6 . Tworzenie p rzycisku etap pity

Oczywicie, sam przycisk to nie wszystko i musisz si ze mn zgodzi, e powinien


on zawiera jaki tekst opis. Dodanie opisu nie stanowi dla Ciebie problemu, po
niewa robie to ju przy okazji tworzenia animowanego GIF-a. Jednak w przypadku
przyciskw, ktrych zazwyczaj na stronie znajduje si kilka lub kilkanacie, a kady
jest inaczej opisany, warto doda now warstw i na niej umieci nasz tekst. Dodatko
wym atutem Paint Shop Pro jest moliwo pracy z grafik wektorow, dziki czemu
kada zmiana opisu przycisku bdzie dziecinnie prosta.
Po wybraniu ikony odpowiedzialnej za wstawianie tekstu ustaw na grnym pasku
rozmiar i rodzaj czcionki lub nadaj inne formatowanie. Nastpnie wybierz kolor tekstu
i dla opcji Wygadzanie optyczne ustaw warto Gadkie oraz dla opcji Utwrz jako
ustaw Wektorowe. Kliknij przycisk odpowiedzialny za wprowadzenie tekstu i w no
wym oknie wpisz opis przycisku (rysunek 3.37). W pisane dane zatwierd, klikajc
przycisk Zastosuj.
W tej chwili w roboczej czci okna programu pojawi si tekst. Zwr uwag na to,
e tekst znajduje si w ramce, a na jej naroach umieszczono miniaturowe kwadraty.
Dziki takiemu rozwizaniu moesz skalowa wielko tekstu oraz jego wysoko lub
szeroko. Wystarczy, e umiecisz kursor myszy na jednym z tych punktw, wciniesz
lewy przycisk myszy i przesuniesz go bez puszczania przycisku.

Rozdzia 3. Grafika sieciowa

1 25

1 Corel Paint Shop Pro Photo XI - [Obrazek4* @100% {Wektorowa 1}]


O

Elik

dycja

^idok

Obrazek

dopasowanie

Efekty

Warstwy

Ofetekty

P o pra w zdjcie *

Naznaczenia

Ofcno

Pomo&

Plety

Pow iksz
Sjenwcsc go o g m t :

utwn )ta

; 4

! Wenowwe

y Q

[ Wprowadzania tekstu
Cennik

:e. s r u n i i p rey m fc Ai kliknij a b y utw o > rv

b n z e k S X * 3 0 0 x RGB -

Rysunek 3.37. Tworzenie przycisku etap szsty


Utworzony tekst musi znajdowa si nad naszym przyciskiem, dlatego umie kursor
bezporednio nad rodkiem tekstu, tak by pojawi si kursor w ksztacie krzya za
koczonego strzakami, a nastpnie trzymajc wcinity lewy przycisk myszy, przesu
go w odpowiednie miejsce i zwolnij przycisk myszy. W tej chwili moesz przeskalowa tekst, tak by wspgra rozmiarem z caym obrazkiem. Rysunek 3.38 przedstawia
przycisk z opisem.
Teraz przysza pora na usunicie zbdnej czci obrazka za pomoc narzdzia odpo
wiedzialnego za kadrowanie. Wystarczy, e po uaktywnieniu odpowiedniego narzdzia
narysujesz prostokt dookoa przycisku, a nastpnie dwa razy szybko klikniesz jego
rodek. Gotowy przycisk przedstawiono na rysunku 3.38.
Na koniec tego krtkiego opisu warto jeszcze doda kilka sw o tym, w jaki sposb
zmieni tekst widoczny na rysunku. Z pewnoci pamitasz, e zosta on utworzony na
wektorowej warstwie.
Pierwszym krokiem, jaki musimy wykona w celu zmiany tekstu, jest otwarcie okna
waciwoci warstw. W tym celu nacinij klawisz F8 na klawiaturze. W prawej cz
ci gwnego okna programu pojawi si dodatkowe okno z widocznymi warstwami
(rysunek 3.39).

Tworzenie stron WWW w praktyce

126

a ,a r

Corel Paint Shop Pro Photo XI - [Obrazek4* 250% (Tto)l


O

lik

dycja

& id o k
U S }

Qbrazek
^

fiopasowame

Efekty

* **

Wjrstwy
II

Ofciekty

aznaczema

Eopraw zdjcie *

Pjlety -

OJtno

P om o i

i. , Pomniejsz

Prawo:

O rt

-0 J1 . :l' '

.* s
r

[N a rz d zie K adro w an ie - K liknij i przecignij. a b v narysowa prostokt k a d ro w a n ia . KTiknij

f r i | 5 y T 57j

( R 75P>.G:255 B

B X

Powiksz

- O brazek: 300 * 3(

4 o

x RGB - 8 b f t w /k a n a . ' :

Rysunek 3.38. Tworzenie przycisku etap sidmy


Obok wektorowej warstwy bdzie widoczny przycisk ze znakiem plusa. Kliknij go
lewym przyciskiem myszy, a nastpnie dwukrotnie kliknij opcj, ktra pojawi si po
niej. W tej chwili w nowym oknie bdziesz mg zmieni opis przycisku. W celu za
chowania zmian kliknij przycisk Zastosuj.

\
Uwaga

Pamitaj, e zapisujc przycisk do formatu JPG, GIF lub PNG, tracisz informacje
o warstwach i dlatego koniecznie zachowaj kopi przycisku w macierzystym formacie
programu Paint Shop Pro o nazwie PSP.

Pracujc z warstwami, w prosty sposb moesz przygotowa przyciski do strony, na


ktrej chcesz uy efektu rollover po najechaniu kursorem myszy na przycisk ulega
on zmianie na inny. Dokadny opis, jak to zrobi, znajdziesz w jednym z nastpnych
rozdziaw.

Przyciski o nieregularnych ksztatach


W tym podrozdziale zajmiemy si przygotowaniem przycisku o bardzo nieregularnych
ksztatach takich, jakich nie da si uzyska za pomoc typowych selekcji opisanych
kilka stron wczeniej.

Rozdzia 3. Grafika sieciowa

1 27

I0HE

& i Corel Paint Shop Pro Photo XI - [Obrazek4* 250% (Wektorowa 1})
>

lik
l

dycja
J

#idok

Qbrazek

C>

dopasowanie

Wjrstwy

<?

Ofeiekty

Naznaczenia

Popraw zdjcie

Ronntm

.
J im ln u

Efekty

jf.nostk'n

Styl aonfei:

Wyrwna!

, .w.. b / u - i i

TsiaBmi

Palety *

Kieruneki V

J-

............................

M| | I II I | | | | l^i | | | | | || | . I II PPMI | | | I i | I I I I I'?? I I I I I I i I I I I I Pu3.! I I I II I U I I H?I I I I I I I I I I I I

1!

Wgrewadz tekst tutaj:

Oferta

tekst

^ a r z g d a e Tefcsk t fc n i ;ig o b ie k tu w

t e ks t u n a c ie f c e

y :t^ -

- 8 b it v ^ k a n a

Rysunek 3 .3 9 . Zmiana tekstu dostpnego na warstwie w ektorow ej etap pierw szy

Na rysunkach 3.40 i 3.41 wida przykadowe przyciski, ktre wsplnie stworzymy.


Teraz, kiedy wiemy, co nas czeka, moemy zabiera si do pracy. Zwr uwag, e
przykady s diametralnie rne, poniewa w przypadku pierwszego rozszerzamy gw
ny element o dodatkowe ozdoby koa w naronikach. Natomiast w drugim przypad
ku gwny element obcinamy o pewne fragmenty.
Rysunek 3 .4 0 .
Przykad pierwszego
przycisku

Rysunek 3 .4 1 .
Przykad drugiego
przycisku

Tworzenie stron WWW w praktyce

128

Zacznijmy od stworzenia nowego obrazka, tak jak to robilimy poprzednio rw


nie i tym razem powinien mie rozdzielczo 72 dpi oraz 24-bitow palet kolorw.
Nastpnie konieczne jest wczenie siatki uatwiajcej rozplanowanie elementw na
stronie. Robi si to za pom oc opcji Siatka z menu Widok.
Zacznijmy od pierwszego przykadu. Opierajc si na siatce, za pomoc selekcji o od
powiednim ksztacie rysujemy koo, ktre bdzie si znajdowao w jednym z naroni
kw. W e pod uwag, e musisz jeszcze dorysowa pozostae elementy, a do tego
potrzeba miejsca.
Pierwsze koo ju mamy, ale teraz nasuwa si pytanie, w jaki sposb doda pozostae
trzy. Rozwizanie jest bardzo proste wystarczy, e przytrzymasz wcinity klawisz Shift,
a obok kursora pojawi si may znak plusa, co oznacza, e moesz rysowa kolejne
elementy bez obawy, e nowa selekcja wyczy poprzedni. Pamitaj jednak, e klawisz
ten musisz przez cay czas trzyma wcinity i moesz go zwolni dopiero wtedy, gdy
narysujesz ostatnie, czwarte koo (rysunek 3.42).
Rysunek 3.42.
Tworzenie
pierwszego przycisku
etap pierwszy

Nastpnym etapem tworzenia elementu z pierwszego przykadu jest dodanie kolejnej


selekcji w ksztacie prostokta. Rwnie i tym razem musisz w czasie rysowania przy
trzyma wcinity klawisz Shift. Prostokt musimy wrysowa tak, by rodki jego na
ronikw pokryway si ze rodkami poszczeglnych okrgw. W tym momencie bar
dzo potrzebna okae si pom ocnicza siatka, ktr wczye na samym pocztku. Po
narysowaniu ostatniego elementu i zwolnieniu klawisza Shift na ekranie powinien po
jawi si zaznaczony obszar o ksztacie zgodnym z naszym przykadem (rysunek 3.43).
Jak ju zapewne zauwaye, selekcje zostay poczone w cao.
Rysunek 3.43.
Tworzenie
pierwszego przycisku
etap drugi

Rozdzia 3. Grafika sieciowa

129

Teraz pozostaje wypenienie selekcji za pom oc dowolnego koloru i dodanie efektu


wypukoci. W tym przypadku nie bdziemy mogli skorzysta z opcji Wygld przycisku,
ale zamiast niej sprbujemy uy opcji Faza zewntrzna, ktra znajduje si w menu
Efekty/Efekty 3D. W nowo otwartym oknie musisz poeksperymentowa ze znajdujcymi
si tam opcjami, tak by uzyska zadowalajcy efekt.
Drugi przykad jest zupenie inny, gdy z jednego obszaru wyciem pewne fragmenty.
Przyjrzyjmy si dokadnie, jak zrobi przycisk z drugiego przykadu. Rwnie tym
razem tworzymy nowy rysunek, wczamy siatk selekcji i rysujemy za pom oc na
rzdzia selekcji prostokt. Nastpnie wybieramy selekcj w ksztacie koa, wciskamy kla
wisz Ctrl i zaczynamy rysowa okrg. Musisz jednak pamita, e selekcja w ksztacie
koa jest rysowana od rodka okrgu, dlatego kursor umie dokadnie na naroniku
prostokta i narysuj okrg, tak by jego obwd styka si z przeciwlegym wierzcho
kiem prostokta. Wycicie drugiego boku prostokta wyglda dokadnie tak samo, z t
drobn rnic, e tym razem rodkiem okrgu powinien by wierzchoek znajdujcy
si po przektnej. Na rysunku 3.44 wida pierwszy etap pracy.
Rysunek 3.44.
Tworzenie
drugiego przycisku

Na koniec pozostao dodanie efektu wypukoci i tym razem skorzystamy z innej


opcji o nazwie Wycinek, znajdujcej si w menu Efekty/Efekty 3D. Teraz rwnie po
winiene poeksperymentowa z ustawieniami tej funkcji w celu uzyskania dobrego
efektu. Pamitaj, e na bieco moesz kontrolowa wszystkie zmiany w oknie pod
gldu znajdujcym si w grnej czci.

Cicie grafiki na mniejsze elementy


W drugim rozdziale dowiedziae si, jak wstawia obrazki na stronie oraz jak defi
niowa graficzne odnoniki do innych stron. Teraz przysza pora, by dowiedzia si,
jak tworzy elementy graficzne, ktre s publikowane na stronie WWW, ale skadaj
si z mniejszych czci. Wydaje mi si, e trafnym porwnaniem dla tej techniki s
puzzle, gdzie z maych kawakw powstaje cay obraz.
Cicie na mniejsze kawaki grafiki przeznaczonej do publikacji na stronie ma kilka zalet:
pozwala przypieszy wczytywanie strony,
umoliwia stworzenie obrazka bdcego odnonikiem do kilku miejsc
bez koniecznoci uywania mapy odsyaczy,
daje moliwo przygotowania bardzo ciekawych graficznych stron WWW.

Tworzenie stron WWW w praktyce

130

Pocity obrazek na stronie jest publikowany w tabeli, dla ktrej okrela si dokadny
rozmiar oraz wycza obramowanie i odstpy pomidzy komrkami, tak by wszystkie
czci ukadanki idealnie do siebie pasoway.
Przygotowanie pocitej grafiki bez specjalnych narzdzi jest rzecz do skompliko
w an i wymaga niesamowitej wrcz precyzji, dlatego wiele firm dostrzego potrzeb
przygotowania specjalnych programw, ktre zajm si krojeniem obrazw. W tej
ksice skorzystamy z dodatku, jaki znajduje si w programie Paint Shop Pro. Program
ten poza tym, e tnie obrazki, moe rwnie przygotowa odpowiedni kod tabeli wraz
z obrazkami, ktry nastpnie moemy wklei do naszej strony.
Po otwarciu obrazka z menu Plik/Eksportuj powiniene wybra opcj Kreator kawako
wania obrazka. W oknie widocznym na rysunku 3.45 pojawi si obrazek, ktry bdziemy
ci na mniejsze kawaki.
Rysunek 3.45.
Cicie obrazka
na kawaki
etap pierw szy

X:
Przejcia
WaciwoscH^omorkT
Kreator ptze|..
Adres URL: http://danowski.pl

'r

zastpczy:

'r

Bartosz Danowski

JPEG

Cel:

Lewo:

| Optymalizuj komrk...

H3 Zastosuj optymalizacj do caego obrazka


497

Gra:

113

Dk

1124

Zapisz ustawienia...
Prawo:

Ptzeicia wczone nie

1652

[ y l Uwzgldnij komrk w tabeli

I Zapisz w schowku

Zapisz tako.

Pomoc

[ Zagaduj ustawienia...

Wyczy

Prefeienqe

Zamkmi

Sam proces podziau obrazka ogranicza si do wybrania ikony noa znajdujcej si


w lewym grnym naroniku opisywanego okna. Nastpnie przesuwamy kursor myszy
na obrazek w oknie podgldu i trzymajc wcinity lewy przycisk myszy, przesuwamy
go nad obrazkiem. Po puszczeniu przycisku myszy powinna pojawi si czerwona linia
podziau. Jeeli mamy narysowanych ju kilka linii, np. pionowych, i chcemy doryso
wa linie poziome, to program automatycznie rysuje linie pomidzy dwiema pionowy
mi kreskami. Jeeli chcemy przesun nasz lini podziau, to wystarczy kursorem
myszy przejecha poza pionow lini podziau i zwolni przycisk myszy.

Rozdzia 3. Grafika sieciowa

131

Obrazek moe by podzielony na dowoln liczb prostoktnych elementw, a w razie


pomyki moemy za pomoc ikony gumki usun zbdne linie podziau. Oczywicie,
nic nie stoi na przeszkodzie, by przesuwa ju naniesione podziay. Wystarczy umieci
nad nimi kursor myszy i po jego zmianie na strzak skierowan w praw i lew stro
n nacisn lewy przycisk myszy i przesun lini podziau.
W oknie narzdzia Waciwoci komrki moemy dla kadej czci doda odnonik.
Wystarczy, e wybierzesz ikon strzaki i wskaesz fragment obrazka, ktry ma by od
nonikiem zostanie on wyrniony zielonym obramowaniem. Nastpnie w polu Adres
URL powiniene wpisa adres strony lub pliku, do ktrego ma prowadzi odsyacz.
Poza tym w polu znajdujcym si poniej moesz okreli tekst alternatywny, ktry
zostanie wywietlony u osb, ktre nie m aj graficznej przegldarki lub te wyczyy
wywietlanie obrazkw na stronie.
W chwili gdy okrelimy wszystkie linie podziau oraz wprowadzimy odsyacze, pozo
staje nam okrelenie formatu, w jakim obrazki zostan zapisane na dysku. Suy do tego
opcja o nazwie Format. Z listy powiniene wybra jeden z dostpnych na niej forma
tw zapisu grafiki GIF, JPG lub PNG. Nastpnie za pomoc opcji Optymalizuj ko
mrk moesz wczy narzdzia umoliwiajce kontrol waciwoci danego formatu
(zostay one ju opisane nieco wczeniej).
Po okreleniu formatu obrazka pozostaje zapisanie caoci na dysku; w tym celu kli
kamy kursorem myszy przycisk Zapisz jako. W nowo otwartym oknie musimy okre
li jedynie nazw pliku, w ktrym zostanie zapisany kod strony, natomiast program
automatycznie ponumeruje obrazki. Kliknicie kursorem myszy przycisku Zapisz jest
rwnoznaczne z wykonaniem operacji pocicia obrazka na mniejsze czci.
Na rysunku 3.46 przedstawiono przykad obrazka pocitego na mniejsze czci. Roz
mylnie zwikszyem odstp pomidzy komrkami, tak by mg zobaczy, z ilu czci
skada si przykadowy obrazek.
Rysunek 3.46.
Podgld strony
z pocitym obrazkiem

132

Tworzenie stron WWW w praktyce

Mapa odsyaczy
Przy okazji opisywania graficznych odsyaczy w rozdziale pierwszym wspomniaem
o tym, jak tworzymy mapy odsyaczy. Przedstawiony tam opis bazowa na pracy z ko
dem oraz ogldaniem obrazka w programie graficznym, natomiast teraz opisz znacznie
prostsz i wygodniejsz metod.
Uywany przeze mnie w tej ksice Paint Shop Pro w menu Plik/Eksportuj zawiera na
rzdzie o nazwie Kreator mapy obrazka.
Narzdzie to jest bardzo podobne do Kreatora kawakowania obrazka, dlatego opisz je
jedynie w skrtowej formie. Na grze znajduje si zdjcie, ktre ma by m ap odsy
aczy. Wystarczy, e z paska ikon w tym oknie wybierzesz odpowiedni ksztat, ktry
chcesz zaznaczy, i na rysunku naniesiesz waciwe obszary. Do wyboru masz koo,
prostokt oraz obszar dowolny. Rysowanie aktywnych obszarw ogranicza si jedynie
do kliknicia m ysz rysunku i narysowania koa lub prostokta w taki sam sposb, jak
to robie w program ie Paint Shop Pro. N ieco inaczej wyglda oznaczenie obszaru
0 nieregularnych ksztatach. W tym przypadku klikasz pierwszy punkt na rysunku
1 zwalniasz przycisk myszy, nastpnie przesuwasz mysz w nastpny punkt i ponownie
klikasz lewym przyciskiem myszy. Czynno powtarzasz tak dugo, a oznaczysz cay
obszar. Ostatnie kliknicie powinno skoczy si w miejscu, z ktrego rozpoczynae.
Po narysowaniu wszystkich aktywnych obszarw pora doda odsyacz; w tym celu za
pom oc ikony strzaki klikasz wybrany obszar, tak by zosta on wyrniony kolorem
zielonym, a w polu Adres URL wpisujesz adres, do ktrego ma prowadzi hipercze.
Do kadego odnonika moesz doda alternatywny tekst.
Zapis obrazka na dysku niczym nie rni si od analogicznej czynnoci, ktr opisa
em przy okazji omawiania narzdzia Kreatora kawakowania obrazka.
Uywajc opisanego narzdzia, w prosty i szybki sposb stworzysz bardzo skompli
kowane mapy odsyaczy, wkadajc w to minimum pracy; dlatego warto, by sign
po rozszerzenia programu Paint Shop Pro, ktry jak ju miae okazj si przekona
jest rozwizaniem przeznaczonym dla twrcw stron WWW.

Rozdzia 4.

Kaskadowe
arkusze stylw
Piszc o jzyku XHTML lub HTML 4.01, nie sposb pomin kaskadowe arkusze
stylw. Waciwie bez CSS nie da si obecnie zrobi ciekawie wygldajcej strony,
ktra do tego jeszcze byaby zgodna ze specyfikacj wymienionych jzykw.
Na pocztku wyjanijmy sobie, czym s owe kaskadowe arkusze stylw. Pojcie to
pojawiao si w drugim rozdziale prawie na kadej stronie, ale nie zostao dokadnie
omwione. Od wersji HTML 3.2 wprowadzono pewne innowacje w strukturze jzyka
i zaczto zastpowa cz znacznikw innymi. Nowe znaczniki nazwano kaskadowy
mi arkuszami stylw i sukcesywnie je rozbudowywano. Obecnie najnowsza specyfika
cja CSS nosi numer 2.1. Prowadzone s rwnie prace nad jej trzeci odson.
Dziki stylom moemy mie pen kontrol nad formatowaniem dokumentu. Do tej
pory adne z polece jzyka XHTML czy HTML nie pozwalao nam na regulowanie
odstpw pomidzy blokami oraz nakadanie ich na siebie. Warto wspomnie o tym,
e style umoliwiaj kontrol ta poszczeglnych czci dokumentu, waciwoci czcio
nek zastosowanych na stronie, tabel, formularzy itp.
Kaskadowe arkusze stylw, w skrcie CSS, moemy okreli jako narzdzie do forma
towania wygldu dokumentw. N atom iast za pom oc samych stylw nie moemy
stworzy strony. Podobnie jak jzyk XHTML i HTML, kaskadowe arkusze stylw s
standaryzowane przez W3 i tam naley szuka odpowiedniej specyfikacji.

Uwaga

W niniejszym rozdziale omwiem tylko cz moliwoci, jakie oferuj kaskadowe


arkusze stylw. Wybr pad na rozwizania popularne i czsto stosowane w budowie
prostych stron WWW. Natomiast w dodatku do niniejszej ksiki znajdziesz peen wy
kaz waciwoci wszystkich stylw wchodzcych w skad specyfikacji C SS1 i CSS2.1.
Poza tym dodatek zawiera rwnie zestaw ienie obsugi stylw przez popularne
przegldarki.

Tworzenie stron WWW w praktyce

13 4

Jeeli bdziesz chcia pogbi swoj wiedz z zakresu kaskadowych arkuszy stylw,
polecam kilka tytuw z oferty wydawnictwa Helion http://helion.pl.
CSS wedug Erica Meyera. Sztuka projektowania stron WW W http://helion.pl/
ksiki/csswww. htm
CSS wedug Erica Meyera. Kolejna odsona http://helion.pl/ksiazki/cssods.htm
Zen stosowania CSS. rdo owiecenia dla projektantw stron WWW
http://helion.pl/ksiazki/zencss.htm
CSS. Antologia. 101 wskazwek i trikw http://helion.pl/ksiazki/cssant.htm

Wprowadzenie
Zanim przejdziem y do poznawania kolejnych stylw oraz oferowanych przez nie
moliwoci, niezbdne s podstawy. Dziki temu podrozdziaowi dowiesz si najwa
niejszych rzeczy, bez ktrych nie mona rozpoczyna pracy nad stron WWW, majc
wykorzystywa potg kaskadowych arkuszy stylw.

Rnice pomidzy formatowaniem


za pomoc XHTML, HTML i CSS
Zaczn od prostego przykadu formatowania akapitu za pom oc atrybutw samego
jzyka HTML (XHTML). Pamitaj, e to sposb ju przestarzay i niezalecany przez
konsorcjum W3C.
<p><font color="green" face="ariar>7eLst aka pitu </font></p>

Teraz sprawdz, w jaki sposb ten sam akapit moe by poddany formatowaniu za
pom oc CSS.
<head>
<stye type="text/css">
P

{
color: green;
font-family: Arial;

}
</style>

</head>
<body>
<f>>Tekst akapitu</p>

</body>
</html>

Listing ten jest przykadem arkusza stylw osadzonego w nagwku dokumentu. Zwr
uwag, e midzy znacznikami <style></style> znajduje si szereg polece, nadajcych
wygld akapitowi. Na moim przykadzie jest to kolor zielony oraz czcionka Arial.

Rozdzia 4. Kaskadowe arkusze stylw

135

Akurat ten przykad w stosunku do zapisu w czystym jzyku HTML (XHTML) nie
oszczdza cennych bajtw w kodzie strony, a wrcz produkuje ich znacznie wicej.
Jednak wyobra sobie, e dokument ma pi akapitw o identycznym wygldzie. W ta
kim przypadku czysty HTML (XHTML) musiaby powtarza formatowanie dla kadego
akapitu oddzielnie, natomiast CSS w postaci powyszego listingu zajmuje si komplek
sowo wszystkimi akapitami. Dopiero teraz rozumiesz, ile mona zaoszczdzi i ja k
atwo zmieni wygld wszystkich akapitw.

Umieszczanie stylw w dokumencie


Kaskadowe arkusze stylw m og by osadzone w kodzie strony na kilka sposobw.
Specyfikacja przewiduje nastpujce rozwizania:
Style wewntrzne
lokalne
zagniedone
Style zewntrzne
doczone
importowane
Pierwszym rozwizaniem jest umieszczenie deklaracji stylu bezporednio w formato
wanym znaczniku. Rozwizanie takie nosi nazw stylu lokalnego, gdy dziaa wycznie
na zawarto znacznika, w ktrym si znajduje.
<p>Tre dokumentu</p>
<p style="color:green; fo n t-s iz e :1 5 p t;">Tre dokumentu</p>

Wad powyszego rozwizania jest spore utrudnienie w przypadku zmiany sposobu


formatowania danego elementu oraz niepotrzebne powikszanie kodu. Wemy na przy
kad dokument, w ktrym umieszczono czterdzieci blokw tekstu i kady z nich ma
wyglda identycznie. Aby to osign, do kadego z nich naley wpisa odpowied
nie style. Wie si to z wykonaniem dodatkowej pracy, strat czasu oraz zwiksze
niem objtoci kodu. Sytuacj tak przewidzieli twrcy kaskadowych arkuszy stylw,
dziki czemu mamy drug moliwo: umieszczanie CSS w kodzie XHTML i HTML.
Metoda ta polega na zdefiniowaniu odpowiednich wpisw bezporednio w nagwku
<head></head> strony. Rozwizanie to nazywane jest stylem zagniedonym i dziki
jego zastosowaniu polecenia form atujce obejm uj swym dziaaniem ca zwarto
<body></body>.
<?xml version="1.0" encoding="IS0-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"h ttp : //www.w3.org/TR/xhtml1/DTD/xhtml1 -s tri c t .dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="pl">
<head>
<meta http-equ1v=''content-type" content="text/html;charset=IS0-8859-2 />
<title>Bartosz Danowski - strona domowa</title>

136

Tworzenie stron WWW w praktyce

<style type="text/css">
P

{
color:green:
font-family:Arial:

}
</style>

</head>
<body>
<p>Przykadowy blok tekstu.</p>
</body>

</html>
Style wewntrzne zarwno lokalne, jak i zagniedone poza zaletami maj rw
nie do powane wady. Wemy jako przykad rozbudowany serwis, np. portal Onet.pl,
na ktry skadaj si setki lub tysice podstron. Kada z nich jest formatowana w po
dobny sposb i wykorzystuje ten sam zestaw stylw. W takim przypadku style lokalne
odpadaj, a zagniedanie definicji w nagwki <head></head> rwnie nie jest naj
lepszym pomysem. Na szczcie istnieje jeszcze trzecia moliwo styl zewntrzny
ktra opiera si na znaczniku <1 i nk />, umieszczanym bezporednio w nagwku
strony, dziki czemu taki arkusz rwnie dziaa na cay dokument. Znacznik ten po
zwala na podczenie zewntrznego arkusza stylw. Odpowiedni wpis ma nastpu
j c posta:
<?xml version="1.0" encoding*"IS0-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"h ttp : / /www.w3.org/TR/xhtml 1/DTD/xhtml 1- s tr i c t .dtd">
<html xmlns*"http://www.w3.org/1999/xhtml" xml:lang=p l>
<head>
<meta http-equiv*"content-type content="text/html;charset=IS0-8859-2" />
<title>Bartosz Danowski - strona domowa</title>
<1 ink rel="Stylesheet" href="style.css" type="text/css" />

</head>
<body>
<p>Przykadowy blok tekstu</p>
</body>
</html>

Atrybut h re f odpowiada za okrelenie nazwy oraz lokalizacji wybranego arkusza. Ko


lejny element, r e i , definiuje relacje, ktre w przypadku CSS zawsze m aj warto
stylesheet. Ostatni element type zawsze posiada warto te xt/css. Dziki temu
przegldarka wie, z jakim arkuszem ma do czynienia. Dziaanie tego elementu do
cenimy w przyszoci, gdy powstan inne arkusze i zajdzie potrzeba korzystania z nich.
Zewntrzny arkusz jest zwyczajnym plikiem tekstowym, a jego zawarto moe wy
glda tak ja k w poniszym przykadzie.
/ * To je s t p rzyka d zewntrznego arkusza stylw */

{
c o lo r:green:
fo nt-fam ily A r i a l :

Rozdzia 4. Kaskadowe arkusze stylw

137

Zewntrzny arkusz powinien by zapisany w pliku o dowolnej nazwie, ktra nie zawiera
polskich znakw. Taki dokument bezwzgldnie musi posiada rozszerzenie zgodne ze
wzorem nazwa-pliku.css.

\
Uwaga

Specyfikacja CSS daje nam jeszcze moliwo zaimportowania arkusza z innej stro
ny oraz zdefiniowania kilku zewntrznych arkuszy dla tej samej strony. Rozwizania
te na tym etapie nie s Ci potrzebne. Dlatego zdecydowaem si jedynie o nich
wspomnie w formie uwagi.

Jednostki miar i nazewnictwo kolorw


stosowane w CSS
Do okrelania wielkoci czcionki, gruboci obramowania czy te szerokoci margine
sw kaskadowe arkusze stylw wykorzystuj wzgldne i bezwzgldne jednostki miary.
Podobnie wyglda sprawa uywanych definicji kolorw. Poniej pokrtce omwiem
wszystkie wzgldne i bezwzgldne jednostki oraz formy zapisu koloru.

Jednostki wzgldne
px piksele
p {margin-1e f t : 20px: }

Jednostka ta opiera si na pojedynczych punktach w idocznych na ekranie monitora


pikselach. Jeeli dokadniej przyjrzysz si ekranowi monitora, powiniene zauwa
y drobne punkty. W zalenoci od ustawionej rozdzielczoci ich liczba moe by
rna, np. 800x600. Pierwsza warto podaje liczb punktw w poziomie, natomiast
druga okrela, ile pikseli mieci si w pionie. Oczywicie, rozdzielczoci m og by
bardzo rne, np. 1024x768 czy 1600x 1200, a do tego m og si rni w zalenoci
od systemu operacyjnego czy te typu monitora. Dlatego te stosowanie takiej jednostki
nie zawsze daje dobre rezultaty we wszystkich warunkach.
em proporcje wysokoci do czcionki danego elementu
p {margin-1eft: 2em;}

Zasada dziaania tej jednostki jest stosunkowo prosta i polega na okrelaniu zaleno
ci pomidzy poszczeglnymi wielkociami. Jeeli zdefiniujem y dom yln czcion
k o wielkoci 12 punktw, to bdzie ona rwna 1 em. Przyjrzyj si poniszemu
przykadowi:
/'*Definicja stylw */

{
font-Si ze: 12pt:
margin-1eft: 2em:

Tworzenie stron WWW w praktyce

1 38

Powyej zdefiniowaem wielko czcionki 12pt dla bloku tekstu. Nastpnie za pomoc
kolejnego polecenia ustawiem lewy margines jako 2em. W tym przypadku lewy mar
gines bdzie rwna si 24pt.
ex proporcje do wysokoci litery x
p {m argin-left: 2ex:}

Stosowanie jednostki ex wie si z rodzajem uytej czcionki. Wemy np. stron, na


ktrej uyto kilku rodzajw czcionek. Jak ju nieraz si przekonae, kada czcionka
inaczej wyglda, a co za tym idzie, ma inn wielko podstawow, dlatego czcionka
Arial o wielkoci 2ex nie bdzie rwna czcionce Times New Roman o wielkoci 2ex.
X procenty
p {fo n t-size : 10*;}

Procenty su do okrelania w ielkoci wzgldem wartoci domylnej. Przykadowa


definicja spowoduje ustawienie wielkoci czcionki na poziomie 1/10 domylnego roz
miaru, jaki zosta skonfigurowany w przegldarce.

Jednostki bezwzgldne
in cale
p {m argin-left: 2 in ;}

Cale w ywodz si z amerykaskiego systemu miar i gwnie tam s wykorzystywane.


W naszym przypadku ta jednostka raczej nie bdzie uywana.
p t punkty
p {fo n t-size : 12pt;}

Punkty wyw odz si z typografii, gdzie s standardow jednostk miary. W praktyce


72 punkty odpow iadajjednem u calowi, a ten z kolei rwna si 2,54 centymetra.
cm centymetry
p {fo n t-size : lcm;}

Centymetr jest podjednostk systemu metrycznego stosowanego w wikszoci krajw


na wiecie. Jeden centymetr odpowiada 0,39 cala.
mm milimetry
p {fo n t-size : 12mm:}

Milimetry s jednostk m niejsz ni centymetr. W ystpuj w systemie metrycznym.


Na jeden centymetr skada si 10 milimetrw.
pc pica
p {fo n t-size : 12pc;}

Podobnie jak punkt jest jednostk typograficzn. Jedna pica rwna si 12 punktom.

Rozdzia 4. Kaskadowe arkusze stylw

139

Nazewnictwo kolorw uywane w CSS


Kolejn wan cech oferowan przez kaskadowe arkusze stylw jest moliwo okre
lania nazw kolorw. Do tego, podobnie jak w jzyku HTML, mona uy nazw kolo
rw, np. red, green czy blue.
di v

{
color: red;

}
Niestety, nazwy zostay przypisane jedynie kilkunastu podstawowym barwom (patrz
tabela 4.1) i jeeli chciaby uy innej, musisz skorzysta z odmiennej formy. Zapis
w postaci RGB moe przybiera nastpujc posta:
di v

{
color: rgb(255.0.0):

}
Tabela 4.1. Wybrane kolory, wchodzce w skad bezpiecznej palety 216 barw, z przypisanym i nazwami
Nazwa koloru

Zapis szesnastkowy

Black

#000000

Silver

#cococo

Gray

#808080

White

#FFFFFF

Maroon

#800000

Red

#FF0000

Purple

#800080

Fuchsia

#FF00FF

Green

#008000

Lime

#00FF00

Olive

#808000

Yellow

#FFFF00

Navy

#000080

Blue

#0000FF

Teal

#008080

Aqua

#00FFFF

Zapis kolorw wykorzystujcy model RGB przypisuje liczby cakowite z przedziau


od 0 do 255 kadej z wartoci skadowych palety RGB (red, green, blue), std liczb
moe by a dziewi.
Oczywicie, mona jeszcze zapisa kolor w postaci RGB, definiujc procent nasyce
nia danej barwy.

1 40

Tworzenie stron WWW w praktyce

di v

{
color: rgb(100X,0,0$);

}
Kolejnym sposobem zapisu barw jest m etoda szesnastkowa, bdca dokadnie tym
samym, co zapis szesnastkowy, doskonale znany wszystkim, ktrzy mieli do czynienia
z komputerami.
di v

{
color: #FF0000;

}
Podane przeze mnie przykady za kadym razem okrelay kolor czerwony.
Uwaga

Specyfikacja CSS2 dopuszcza dodatkowo zastosowanie odwoa do kolorw uytych


przez osob ogldajc stron. Przykadowo, mog stworzy stron majc to iden
tyczne z kolorem Twojego pulpitu lub okna. Wartoci odpowiedzialne za definicje tych
kolorw s cile okrelone i znajduj si w tabeli 4.2.
Tabela 4 .2 . Podstawowe kolory systemowe, z ktrych moemy skorzysta w CSS2
W arto
Background

Opis i przykad

Pobiera kolor pulpitu:


BODY {background-color:background:}

Window

Pobiera kolor ta z okna:

Windowframe

Pobiera kolor ramki okna:

Wi ndowtext

Pobiera kolor tekstu z okna:

ThreeDLightShadow

Pobiera kolor jasnego cienia z elementw 3D:

ThreeDDarkShadow

Pobiera kolor ciemnego cienia z elementw 3D:

ThreeDFace

Pobiera kolor powierzchni z elementw 3D:

ThreeDHighlight

Pobiera kolor podwietlenia z elementw 3D:

ActiveCaption

Pobiera kolor paska tytuu aktywnego okna:

BODY (background-color:window;}

BODY (background-color:windowframe:}

P {color:w indowtext;}

BODY{backgroud-color:ThreeDLightShadow:}

BODY{ backgroud-color:ThreeDDa rkShadow;}

BODY{backgroud-colo r:ThreeDFace:}

BODY{backgroud-colo r :ThreeDHighli g h t; }

P{color:ActiveCaption;}
InactiveCaption

Pobiera kolor paska tytuu nieaktywnego okna:


P{col o r : Inacti veCaption:}

Rozdzia 4. Kaskadowe arkusze stylw

Tabela 4.2. Podstawowe kolory systemowe, z ktrych moemy skorzysta w CSS2 (cig dalszy)
W arto

Opis i przykad

ActiveBorder

Pobiera kolor obramowania gwnego okna:

AppWorkspace

Pobiera kolor ta z aplikacji pracujcej na wielu oknach:

ButtonFace

Pobiera kolor z powierzchni przyciskw:

ButtonHighlight

Pobiera kolor z obramowania przyciskw:

P{color:ActiveBorder:}

P{co1or:AppWorkspace:}

P{color:ButtonFace:}

P {color:B uttonH ighlight;}


ButtonShadow

Pobiera kolor z cienia przycisku:


P{color:ButtonShadow:}

ButtonText

Pobiera kolor z tekstu umieszczonego na przycisku:


P{color:ButtonText;}

CaptionText

Pobiera tekst z nagwkw:


P{color:CaptionText;}

GrayText

Pobiera kolor z nieaktywnego tekstu:


P{color:GrayText;}

Highlight

Pobiera kolor z wybranego elementu:

HighlightText

Pobiera kolor z tekstu w wybranych elementach:

InfoBackground

Pobiera kolor z ta podpowiedzi:

InfoText

Pobiera kolor z tekstu podpowiedzi:

P{color:Hi g h lIg h t:}

P{color:Hi g hli ghtText: }

Pjcolor:InfoBackground;}

P jco lo r:In fo T e xt;}


Menu

Pobiera kolor z ta menu:


P{color:Menu:}

MenuText

Pobiera kolor z tekstu znajdujcego si w menu:


P{color:MenuText:}

Scrollbar

Pobiera kolor ta z paska przewijania:


P {color:Scrol1bar;}

ThreeDDarkShadow

Pobiera kolor z ciemnego cienia paska przewijania:


P{color:ThreeODa rkShadow; }

141

142

Tworzenie stron WWW w praktyce

Budowa stylu
Oglny schemat konstrukcji stylu wyglda nastpujco:
selektor {cecha: warto: cecha: warto: e tc .:}

W schemacie budowy stylu widocznym w poprzednim podrozdziale zamiast sowa


s e le k to r naley podstawi odpow iedni nazw innymi sowy, znacznik z jzyka
HTML (XHTML). Jest to bardzo proste. Jeli chcesz formatowa akapity, to selektorem
jest znacznik <p>, z t rnic, e pomijasz wwczas nawiasy ktowe.
Cecha jest wpisem cile okrelonym przez specyfikacj kaskadowych arkuszy stylw.

W ybrane cechy dostpne w specyfikacji opisz w nastpnych podrozdziaach. Przy


wyborze elem entw kierowaem si ich przydatnoci i mam nadziej, e dziki
temu wiedzy do przyswojenia nie bdzie zbyt wiele, ale za to okae si ona przydatna
w praktyce.

V
Uwaga

Osoby zainteresowane szerszym opisem kaskadowych arkuszy stylw zachcam


do zapoznania si z internetowym kursem mojego autorstwa. Szczegw na temat
kursu m oesz szuka na stronie h ttp ://d a n o w s k i.p l. Warto rwnie zainteresowa
si innymi ksikam i z oferty wydawnictwa Helion. Najciekawsze pozycje zostay
przeze mnie zrecenzowane na mojej stronie domowej.

Warto zazwyczaj jest przypisana do danej cechy; bardzo czsto jednak bywa tak, e

moe ona by podobna do kilku zupenie rnych cech. Poniej zamieciem praktycz
ny przykad stylu.
P

{
color: green;
font-size : 14px;

'

Oczywicie, nic nie stoi na przeszkodzie, by stosowa inny zapis:


p {colo r: green: fo n t-size : 14px:}

Pamitaj, e po kadej cesze zawsze musi znale si dwukropek, a po wartoci red


nik. Brak tych znakw moe skoczy si problemami z interpretacj stylu przez
przegldark.

Selektory
Pojcie selektora, o ktrym kilka razy ju wspominaem, jest jednym z najwaniej
szych elementw skadowych CSS. To wanie dziki selektorowi moemy przypisa
konkretny styl dla wybranego elementu. Selektory wykorzystywane podczas tworze
nia wasnych arkuszy stylw m og przybiera rne formy. Specyfikacja przewiduje
wykorzystanie nastpujcych ich rodzajw:

Rozdzia 4. Kaskadowe arkusze stylw

143

selektory proste,
selektory uniwersalne,
selektory potomka,
selektory dziecka,
selektory rodzestwa.

Selektory proste
Konstrukcja stylu wykorzystujcego selektor prosty nie naley do zbyt skomplikowa
nych i wyglda tak, jak na poniszym przykadzie.
P

{
c o lo r:red:
font-size:14pt:

}
Jak widzisz, selektorem jest znacznik jzyka HTML (XHTML) przypisany do elemen
tu, ktry chcesz w danym momencie formatowa. Styl zdefiniowany dla przykado
wego selektora p bdzie odnosi si wycznie do akapitw zamknitych w znacznik
< p x /p > i nie bdzie wpywa na pozostae elementy strony WWW.

Selektory uniwersalne
Styl zaprezentowany poniej jest przykadem selektora prostego i odnosi si tylko do
elementw zamknitych pomidzy znacznikami <p></p>.
P

{
c o lo r:red:
font-size:14pt:

}
W zwizku z tym wszystkie inne elementy, np. nagwki czy tabele, nadal bd for
matowane w sposb domylny. Oczywicie, sytuacja taka jest zupenie poprawna i dziki
temu praca z CSS jest bardzo prosta i przyjemna. Jeden wpis i mamy zaatwione wszyst
kie akapity - to jest to!
Zdarza si jednak, e zachodzi potrzeba zdefiniowania jakiego typu formatowania w ten
sposb, aby zadziaa on na cay dokument. Bardzo dobrym przykadem tego moe
by to, ktre zazwyczaj powinno by identyczne dla caego dokumentu. Odpowiedni
styl moe przyj nastpujc posta:

{
background-color:whi t e :

Tworzenie stron WWW w praktyce

144

Warto zwrci uwag na to, e selektorem jest gwiazdka. Symbol ten jest spotykany
przy listowaniu zawartoci folderw czy te zakadaniu filtrw.
d ir * . t x t
copy * . * c:\temp

W kadym przykadzie gwiazdka zastpowaa jakie elementy, np. w pierwszym pole


cenie di r wywietla wszystkie pliki z rozszerzeniem txt, natomiast w drugim nastpuje
kopiowanie wszystkich plikw z biecej lokalizacji do katalogu temp na dysku C:L
Rwnie kaskadowe arkusze stylw m aj podobne podejcie do roli gwiazdki, dziki
czemu istnieje moliwo zdefiniowania uniwersalnych stylw. Innymi sowy, uycie
gwiazdki zwalnia od wpisywania nazw poszczeglnych selektorw.
Przyjrzyjmy si pierwszej sytuacji, w ktrej zaleao mi na tym, aby ustawi kolor
czerwony dla wszystkich akapitw, nagwkw stopnia pierwszego i list na przyka
dowej stronie.
P

{
colorrred;

}
ul

{
color:red;

}
hl

{
color:red;

}
Definiowanie w ten sposb waciwoci wszystkich elementw mija si z celem, po
niewa jest bardzo pracochonne. Na szczcie uywajc selektora uniwersalnego, ope
racj t mona znacznie uproci, a cay arkusz skrci do jednego wpisu. Przykad
widoczny poniej pozwala na uzyskanie identycznego efektu jak we wczeniejszym
listingu.

{
color:red;

}
Innym selektorem uniwersalnym jest body.
body

{
color:red;

}
Uniwersalno body wynika z jego roli w hierarchii dokumentu. Dokadnie chodzi tu
o funkcj dziedziczenia pewnych wartoci ze znacznikw stojcych wyej.

Uwaga

Pojcie dziedziczenia zostao szczegowo opisane w dalszej czci niniejszego


rozdziau.

Rozdzia 4. Kaskadowe arkusze stylw

145

Selektory potomka
W przypadku selektora potomka najlepszym rozwizaniem jest rozpoczcie jego oma
wiania od konkretnego przykadu. Dziki temu dziaanie tej konstrukcji powinno by
znacznie bardziej zrozumiae.
Przykadowy styl dla nagwka stopnia pierw szego wyglda tak jak w poniszym
przykadzie:
hl

{
font-size:20pt:

}
Jeeli chcemy, aby jaki fragment tego nagwka by sformatowany wedug innych za
sad, to naley arkusz uzupeni o nastpujc konstrukcj:
hl span

{
font-size:10pt;

}
Kod strony mogcy skorzysta z selektora potomka bdzie wyglda nastpujco:
<hl>Nagwek stopnia pierwszego</hl>
<hl>Nagwek stopnia pierwszego <span>w ktrym zastosowaem selektor potomka</span></hl>

Pierwszy z przykadowych nagwkw stopnia pierwszego ma wysoko rw n 20pt.


W drugim nagwku uyto selektora potomka, dziki czemu poowa tekstu ma wyso
ko 20pt czyli tak jak pierwszy nagwek, natomiast druga cz zostaa wywie
tlona czcionk o wysokoci rwnej lO pt.
Poniej zamieszczam jeszcze jeden przykad zastosowania selektora potomka.
Arkusz stylw ma nastpujc posta:
P

{
font-size:14pt;

}
p span

{
fo n t-s ty le :i t a l i c :
font-size:20pt:

}
Przykadowy kod strony wykorzystujcej selektor potomka zadeklarowany powyej
moe przybra nastpujc form:
<p>Przykadowy kod HTML wykorzystujcy <span>selektor potomka</span> zadeklarowany
powyej moe przybra nastpujc posta.</p>

Rwnie tym razem efekt dziaania selektora potomka zobaczymy tylko dla tej czci
akapitu, ktra dodatkowo jest zamknita w znacznik <span></span>.

Tworzenie stron WWW w praktyce

146

Selektory dziecka
Selektory dziecka s wynikiem zalenoci panujcych pomidzy poszczeglnymi znacz
nikami jzyka HTML. Przykad opisanego selektora znajduje si poniej.
p > span

{
font - s ty l e :i ta 1i c :
text-decorati on:underli ne;

}
Dany styl zadziaa, gdy wewntrz bloku tekstu zostanie umieszczony znacznik <span>
</span>.
<p>Dowolny tekst, w ktrym wida efekt dziaania <span>selektora dziecka</span>.</p>

W tym przypadku <span></ span > jest dzieckiem <p></p> i tylko w takiej sytuacji zo
stanie odpowiednio sformatowany. Jeeli rozbudujemy powyszy przykad o nastpne
linie, zgodnie z poniszym listingiem, to formatowaniu zostanie poddany tylko tekst
znajdujcy si wewntrz znacznika <span></span>, ktry z kolei ograniczony jest przez
<p></p>, natom iast inne elementy, niebdce dziemi <p></p>, pomimo e rwnie
zamknite s w <span></span>, pozostan bez zmian.
<p>Dowolny tekst, w ktrym wida efekt dziaania <span>selektora dziecka</span>.</p>
<span>Tekst zamknity wewntrz znacznika span, ktry nie je s t formatowany za pomoc
selektora dziecka.< /span>

Selektor dziecka nie jest poprawnie obsugiw any przez przegldark MS Internet
Explorer.

Selektory rodzestwa
Rwnie w przypadku tego typu selektorw opieramy si na zalenociach obowi
zujcych w jzyku HTML (XHTML). N a podstawie tego rodzaju selektora moemy
przypisa styl elementowi bezporednio ssiadujcemu z innymi. By warunek zosta
speniony, oba selektory m usz mie wsplnego rodzica. Przykadem moe by po
niszy listing.
p + span

{
fo n t- s ty le :ita lic ;
text-decorati on:underli ne;

}
Zgodnie z tym, co napisaem powyej, znaczniki <p></p> oraz <span></span> musz
ze sob ssiadowa.
<div>
<p>To jest tekst akapitu.</p> <span>A tutaj dziaa selektor rodzestwa.</span>

<spar\>Natomi ast ten tekst, pomimo e je s t zamknity w span, ju nie je s t formatowany,


bo nie ssiaduje bezporednio z akapitem.</span>
</div>

Rozdzia 4. Kaskadowe arkusze stylw

147

W powyszym kodzie wyranie wida, i blok tekstu ssiaduje ze znacznikiem <span>


</span>, natomiast dmgi znacznik <span></span> bezporednio nie ssiaduje z <p></p>.
Podobnie jak selektor dziecka, rwnie ten przykad nie dziaa w przegldarce MS In
ternet Explorer.

Selektor atrybutu
Niemal kady znacznik jzyka HTML (XHTML) moe by uzupeniony o atrybuty
przypisane do niego przez specyfikacj, np.
<hl t it le = czerwony">Nagwek stopnia pierwszego</hl>

Dziki kolejnej osonie specyfikacji CSS moemy tak skonstruowa selektor, aby od
nosi si on do konkretnego znacznika i jego atrybutu. Rozwizanie to nosi nazw
selektora atrybutu.
Przykad arkusza stylw:
h l[title ]

{
col or : red ;

}
Przykad kodu HTML:
<hl title="czarny">Pierwszy nagwek z atrybutem</hl>
<hl title="czerwony">Drugi nagwek z atrybutem</hl>
<hl>Trzeci nagwek bez atrybutw</hl>

Efektem dziaania powyszych listingw bdzie wywietlenie wszystkich nagwkw


stopnia pierwszego z atrybutem t i t l e za pom oc koloru czerwonego. Natomiast na
gwki bez atrybutu zachowaj domylne formatowanie.
Idc za ciosem, mona jeszcze dokadniej przypisa formatowanie i uzaleni je od
wartoci, jak przybiera wybrany atrybut.
hl[title=czerwony]

{
c o lo r:red:

}
Przykad kodu HTML:
<hl title = "cza rn y>Pierwszy nagwek z atrybutem</hl>
<hl title="czerwony">Drugi nagwek z atrybutem</hl>
<hl>Trzeci nagwek bez atrybutw</hl>

W tym przypadku tylko drugi z przykadowych nagwkw bdzie w ywietlony za


pom oc koloru czerwonego, poniewa tylko jego atrybut oraz warto odpow iadaj
definicji stylu w przykadowym arkuszu.

Tworzenie stron WWW w praktyce

1 48

Atrybut selektora jest poprawnie obsugiwany przez nowe wersje przegldarki Mozilla
Firefox oraz Opery. Uytkownicy starszych przegldarek oraz MS Internet Explorera
musz obej si smakiem.

Identyfikatory
Dotychczas opisane selektory pozwalay na przypisanie danego formatowania wszyst
kim elementom odpowiadajcym uytemu selektorowi. Przykadowy styl zamieszczony
poniej okrela, i wszystkie akapity powinny zosta sformatowane za pomoc czcionki
o kolorze zielonym i wysokoci 14pt.
P

{
color:green;
fo n t- si ze : 14pt;

}
Twrcy kaskadowych arkuszy stylw od samego pocztku dostrzegli konieczno zr
nicowania podobnych elementw, w efekcie czego wprowadzili identyfikator id.
Zasada dziaania identyfikatora, co wida na poniszym przykadzie, jest stosunko
wo prosta.
P

{
color:green:
font-size:14pt:

}
fpochyly

{
fo n t-s ty le :ita 1 iC ;
font-size:20pt;

}
Odpowiedni wpis skada si z selektora, do ktrego planujemy przypisa identyfikator,
oraz z nazwy poprzedzonej znakiem #. Wywoanie tak przygotowanego identyfikatora
ma nastpujc posta:
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<p id="pochyly">Blok tekstu o kolorze zielonym i czcionce 20pt</p>
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>

Raz zdefiniowanego identyfikatora moemy bez problemu uy w innych akapitach,


o ile zajdzie taka konieczno. Co prawda nie jest to zgodne z zaleceniami specyfikacji,
ale dziaa.
Jeeli chcem y przygotowa identyfikator uniwersalny, ktrego uycie jest moliwe
w dowolnym elemencie strony, to powinien on przybra nastpujc posta:
#czerwony

{
color:red:

Rozdzia 4. Kaskadowe arkusze stylw

149

W ywoanie takiego identyfikatora wyglda dokadnie tak samo jak poprzednio, z t


drobn rnic, e moe nastpi w dowolnym znaczniku.
<p id="czerwony>Tre akapitu</p>
<hl id="czerwony>Tre nagwka stopnia pierwszego</hl>
<td id=czerwony>Tekst wewntrz komrki</td>

Klasy
Klasy s kolejnym podstawowym pojciem w kaskadowych arkuszach stylw. Budowa
klasy ma nastpujc posta:
selektor.nazwak1asy

{
font-size:12 pt:
color:green:

}
Zwr uwag na wystpowanie kropki po selektorze lub przed nazw klasy. Jest to
element obowizkowy i bez niego dalsza praca nie miaaby wikszego sensu.
Podobnie jak w przypadku identyfikatora, tak zdefiniowana klasa moe zosta uyta
tylko w tym selektorze, do ktrego zostaa przypisana, np.:
p.moja

{
color:green:
font-size:14pt;

}
Powinna zosta wywoana w znaczniku <p></p> w nastpujcy sposb:
<p cass=moja>7re.i akapitu</ p>

Jak wida na powyszym przykadzie, klasa jest wywoywana w dokumencie za po


moc atrybutu c la ss, ktry moe zosta umieszczony niemal w dowolnym znaczniku
kodu HTML.
Specyfikacja CSS przewiduje moliwo zdefiniowana takiej klasy, ktrej uycie
jest moliwe w rnych znacznikach. Odpowiednia konstrukcja moe mie nastpu
jc posta:
.moja

{
color:red:
font-size:12pt;
fo n t-s ty le n ta lic ;

}
Wywoanie tak okrelonej klasy rwnie odbywa si za pom oc atrybutu class.
<p cass="mja">Przykad akapitu z okrelon klas</p>
<hl class=moja >Przyklad nagwka z okrelon klas</hl>

150

Tworzenie stron WWW w praktyce

Dokadniejsza analiza uniwersalnych definicji klas oraz identyfikatorw prowadzi do


wniosku, e w dziaaniu niczym si one nie rni. Jednak specyfikacja zakada, i dany
identyfikator moe wystpi w caym dokumencie tylko raz, natomiast klas mona
powiela do woli. Oczywicie, najczciej uywane przegldarki nie s w tym przy
padku do koca zgodne ze specyfikacj, dlatego identyfikatorw, podobnie jak klas,
moemy uywa tyle razy, ile uznamy to za konieczne.
Poniej znajduje si prosty przykad, w ktrym wyranie wida zasad dziaania klas
w dokumencie HTML (XHTML).
P

{
fo n t-si ze: 14pt;
color:green;

}
.moja

{
fo n t-s ty e : i ta l i c ;
font-size:20pt:
c o lo r:red;

}
Przykadowy kod strony;
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<p class="moja>Blok tekstu, w ktrym uyem klasy o nazwie .moja</p>
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<ol class="moja">
<1i> l i s ta , w ktrej uyem klasy o nazwie .moja</li>
<1 i >1 i sta . w ktrej uyem klasy o nazwie ,moja</1i>
</ol>

Pseudoklasy
Specyfikacja CSS przewiduje kilka cile okrelonych klas, pozwalajcych na formato
wanie niektrych elementw dokumentu. Do najpopularniejszych z ca pewnoci
zaliczaj si pseudoklasy odsyaczy.
a :lin k

{
c o lo r:red;

}
a :visite d

{
color:green;

}
Szalenie istotnym elementem w tej konstrukcji jest dwukropek, wystpujcy pomidzy
selektorem a nazw klasy.
Pierwsza z prezentowanych pseudoklas, a : 1i nk, odpowiada za wygld hipercza, jeeli
nie zostao ono jeszcze odwiedzone. Przykadowa definicja sformatuje odnonik za po
moc koloru czerwonego.

Rozdzia 4. Kaskadowe arkusze stylw

151

Element a :v is ite d odpowiada za formatowanie hipercza ju odwiedzonego i w na


szym przypadku taki odnonik bdzie mia kolor zielony.
Oczywicie, zdefiniowane pseudoklasy nie kocz si na tych dwch zaprezentowa
nych powyej i specyfikacja przewiduje jeszcze kilka dodatkowych.
Dziki pseudoklasie a : hover moliwe jest dokonanie zmiany pewnych elementw po
najechaniu na nie urzdzeniem wskazujcym (np. mysz). N a pewno kady widzia
takie strony WWW, na ktrych odnoniki tekstowe zmieniay kolor po najechaniu na
nie kursorem myszy to wanie dziki tej pseudoklasie.

Uwaga

Pseudoklasa a:hover nie jest obsugiwana przez stare wersje przegldarki Netscape
Navigator. Ignoruj one jej dziaanie i elem ent nie zmienia formatowania po naje
chaniu na niego kursorem myszy. Oczywicie, mona j stosowa, gdy nie ma ona
wpywu na sam wygld domylnego odnonika.

Poniej znajduje si przykad prostego arkusza stylw odpowiedzialnego za formato


wanie wygldu wszystkich odnonikw w dokumencie HTML (XHTML).
/* definicja odsyacza podstaw owego */

{
font-size:12pt;
te x t-decorati on:none;

}
a:1 i nk

{
color:navy:

}
a :visite d

{
col or:green:

}
a:hover

{
color:red:
text-decoration:underline:

}
W pierwszej definicji okreliem te elementy, ktre s wsplne dla wszystkich odsy
aczy; nastpnie wpisy form atuj odsyacze przy wykorzystaniu pseudoklas i nadaj
im specyficzne cechy wygldu.
Niestety, ycie bywa trudne i wikszo nowoczesnych stron wymaga stosowania na
nich odnonikw o zrnicowanej wielkoci lub wygldzie. N a szczcie w specyfi
kacji CSS znajdziemy sposb na rnicowanie odnonikw na stronie. Do wykonania
tego zadania wystarczy poczy zdobyte wczeniej informacje o klasach oraz pseudoklasach.
Poniej znajduje si listing arkusza stylw, w ktrym uwzgldniono dwa rodzaje od
nonikw.

152

Tworzenie stron WWW w praktyce

/ * definicja odsyacza podstaw owego */

{
font-size:24pt;
text-decorati on:none:

}
a :1 i nk

{
color:navy:

}
a :visite d

{
color:green;

}
a: hover

{
col o r :red:
text-decorati on:underl i ne;

}
/ * definicja odsyacza mniejszego */

a .may

{
fo n t-si ze: 12pt;

W celu zrnicowania rozmiaru czcionki w odnonikach w kodzie strony naley sko


rzysta z klasy o nazwie may.
<ul>

<li><a href="http://d a n o w ski.p l" class="maly>Bartosz Danowski</a></li>


<1 i><a href="h ttp ://o n e t.p l"> P o rta l Onet.p l< /a > < /li>
<li><a href="http://helion.pl">Wydawnictwo Hel i on</a></1i >

</ul >
M ona rwnie okreli oddzielne formatowanie dla kadego stanu odnonika. Poniej
znajduje si konkretny przykad.
/*norm alne odnoniki*/

{
font-size:24pt:
text-decorati on:none;

}
a:1 i nk

color:navy;

}
a :v is i ted

{
col or:green;

}
a:hover

{
col or:red;
text-decorati on:underli ne;

Rozdzia 4. Kaskadowe arkusze stylw

153

/*m ale odnoniki*/

a.may

{
font-size: 12pt:

}
a.may:1 ink

{
col o r:s il v e r::

}
a.m aly:visited

{
color:yellow :

}
a .may-.hover

{
col or:black;
text-decorati on:none;

}
Kolejn dostpn pseudoklas jest : active, ktra pozwala nada dowolne formato
wanie elementowi po nakierowaniu na niego wskanika myszy i wciniciu przycisku,
ale przed jego zwolnieniem. Pseudoklasy tej mona uywa jako uzupenienia definicji
odnonikw, o ktrych pisaem wczeniej, lub jako elementu poprawiajcego czytel
no formularzy.
a: active

{
c o lo r:s ilv e r;

}
Jeeli chcemy, by wanie wywietlany odsyacz z menu by formatowany innym
kolorem, to z pomoc moe nam przyj kolejna pseudoklasa o nazwie : focus. Jej de
finicja wyglda nastpujco:
a: focus

{
color:braun;

}
W drugiej specyfikacji kaskadowych arkuszy stylw znajduj si jeszcze pseudoklasy
: 1ang oraz : f i r s t - c h i Id. Pierwsza z nowych klas z zaoenia miaa pozwoli na for
matowanie wielojzycznych dokumentw.
<p lang=p1 ">Jak si masz</p>
<p lang="en">How are you</p>

Przyjrzyjmy si powyszemu listingowi, na ktrym zostay zadeklarowane dwa aka


pity. Pierwszy z nich posiada przypisany atrybut lan g= "p l " i powinien zawiera tekst
w jzyku polskim. Drugi natomiast ustawia jzyk akapitu jako angielski. Dla tak przy
gotowanego dokumentu za pomoc pseudoklasy :lang moemy w prosty sposb przy
pisa dowolne formatowanie.

Tworzenie stron WWW w praktyce

154

{
f o n t - S i z e : 1 4 p t;

color:navy:

}
p :la n g (p l)

{
font-weight:bold;
color:black;

}
p:lang(en)

{
fo n t-s ty le :i t a l ic :

}
Pseudoklasa : lang nie jest obsugiwana poprawnie przez wszystkie przegldarki. Wrd
nowych przegldarek radz sobie z ni Mozilla Firefox oraz Opera. Uytkownicy
MS Internet Explorera kolejny raz odejd z kwitkiem.

Pseudoelementy
Ciekaw grup selektorw stanowi pseudoelementy, ktre pozwalaj na przypisanie
kolejnych wymylnych stylw do elementw strony WWW.
Pseudoelement : f i r s t - l e t t e r pozwala na formatowanie pierwszej litery w bloku tekstu.
Przykadowy arkusz spowoduje powikszenie pierwszej litery do wielkoci 100 punk
tw i nadanie jej koloru czerwonego.
P

{
color:navy;
font-size:30pt;

}
p : f i rs t- le tte r

{
c o lo r:red;
font-size:100pt;

}
Efektem dziaania powyszego arkusza stylw bdzie powikszona pierwsza litera ka
dego akapitu wystpujcego w dokumencie HTML (XHTML).
<p>Pierwsza lite r a tego akapitu zostanie powikszona za pomoc pseudoelementu
:fir s t- le tte r .< /p >

Oczywicie, nic nie stoi na przeszkodzie, by pseudoelement : f i r s t - l e t t e r stosowa


z innymi znacznikami. Przykadem takiego postpowania moe by poniszy listing, na
ktrym poczyem ten element z nagwkiem stopnia pierwszego.
hl

{
color:navy;
font-size:30pt;

Rozdzia 4. Kaskadowe arkusze stylw

155

h l:f i rs t-1 e tte r

{
colon red;
font-size:100pt;

}
Przykadowy kod:
<hl>Portal Onet.pl</hl>

Na rysunku 4.1 wida przykad wykorzystania pseudoelementu : fi rst-1 e tte r .


Rysunek 4.1.
Przykad dziaania
pseudoelementu
:first-letter

Kolejnym pseudoelementem jest : f i r s t - 1i ne, ktry obejmuje formatowaniem ca pierw


sz lini, a nie tylko pierwsz liter.
P

{
color:navy:
font-size;12pt:

}
p: f i rs t-1 i ne

{
c o lo r:red;
font-size:20pt:
font-weight:bold;

}
Przykadowy kod HTML:
<p>Kolejnym pseudoelementem je s t :f i rs t-1 i ne, obejmuje formatowaniem ca pierwsz
lin i , a nie tylko pierwsz 1i te r .</p>

Zarwno : f i r s t - l e t t e r , jak i : f i r s t - l i n e s poprawnie obsugiwane przez najpo


pularniejsze przegldarki stron WWW.
Poza : f i r s t - l e t t e r oraz : f i r s t - l i n e w specyfikacji umieszczono jeszcze dwa inne
pseudoelementy: : a fte r oraz : before. Oba su do umieszczania tekstu bd elementu
graficznego przed i za formatowanym elementem strony. Poniej zamieszczam odpo
wiedni przykad.
p:before

{
content: "WANA WIADOMO";
font-size:15pt;
fo n t- s ty le :ita lic ;
font-weight:bold:

156

Tworzenie stron WWW w praktyce

p :a fte r

{
content:"AUTOR Bartosz Danowski";
font-size:15pt:
fo n t- s ty le :ita lic :
font-weight:boid;

}
Przykadowy kod:
<p>Poza : f ir s t - le t t e r oraz : f ir s t - lin e w specyfikacji umieszczono jeszcze dwa inne
pseudoelementy: :a fte r oraz ibefore. Oba su do umieszczania tekstu przed i za
formatowanym elementem strony. </p>

Oba prezentowane pseudoelementy :a f te r oraz :b e fo re dziaaj poprawnie w Operze


i Mozilli. Uytkownicy przegldarki MS Internet Explorer efekt dziaania tej funkcji
m og zobaczy na rysunku 4.2.
WANA WIADOMO Prcz Srst-letter oraz first-line w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: rafter oraz
before. Oba elementy du do umieszczania tekstu przed i za formatowanym elementem strony. A UTOR Bartosz DatlOWSki

Rysunek 4 .2 . Przykad dziaania pseudoelem entw :after oraz :before

Grupowanie selektorw
N a pocztek prosty przykad arkusza stylw, okrelajcego kolor dla nagwkw
i akapitw.
hl

{
color:green:

}
h2

{
color:green:

}
P

{
color:green;

}
Dziki temu, e selektory mona dowolnie grupowa, jeli pewne wartoci maj obo
wizywa dla kadego z nich, powyszy zapis mona znacznie uproci poszcze
glne selektory wchodzce w skad grupy rozdzielamy przecinkami. Poniej przedsta
wiono przykad zgrupowanych selektorw h l , h 2 oraz p .
h l. h2. p

{
color:green:

}
Styl powyszego przykadu spowoduje nadanie koloru zielonego wszystkim nagw
kom stopnia pierwszego i drugiego oraz blokom tekstu. Oczywicie, nic nie stoi na
przeszkodzie, by doda tu kolejne style, np. bloku tekstu, okrelajce wysoko czcionki
jako 15 punktw.

Rozdzia 4. Kaskadowe arkusze stylw

157

hl. h2. p

{
c o lo r:red:

}
P

{
font-size:15pt;

}
Taka definicja stylw uyje koloru czerwonego do formatowania zgrupowanych ele
mentw oraz czcionki o wysokoci 15 punktw w kadym bloku tekstu.

Dziedziczenie i kaskadowo to klucz do potgi CSS


Pojcie dziedziczenia wie si z hierarchi wanoci poszczeglnych znacznikw j
zyka HTML (XHTML). Zalenoci te doskonale wida na rysunku 4.3.
Rysunek 4.3.
Drzewo hierarchii

HTML

Podczas analizy rysunku mona zobaczy, e okrelenie np. koloru tekstu jako niebie
skiego bezporednio dla body spowoduje jego uycie dla kadego elementu naszej
strony, znajdujcego si niszej w hierarchii. Jeeli dodatkowo zdefiniujesz kolor listy
<ul></ul> jako zielony, to tekst caego dokumentu bdzie niebieski poza list, ktra
zostanie sformatowana za pom oc koloru zielonego. Idc dalej tym tropem, dopisz
do stylu odpowiedzialnego za formatowanie body definicj wielkoci czcionki rwn
14 punktom. Strona wynikowa bdzie zatem sformatowana za pomoc czcionki o wiel
koci 14 punktw i w kolorze niebieskim , natomiast lista bdzie m iaa kolor zielony
i identyczn jak reszta dokumentu wielko czcionki. Innymi sowy, styl odpowiedzial
ny za definicj czcionki bdzie dziedziczony z nadrzdnego w hierarchii znacznikw
<body></body>.

158

Tworzenie stron WWW w praktyce

Z przykadem dziedziczenia zetkne si ju na poprzednich stronach tego rozdziau,


np. przy tworzeniu zrnicowanych odnonikw na stronie WWW. Mam tutaj na myli
sytuacj, w ktrej chciae stworzy odnoniki o dwch rnych wielkociach. W de
finicji klasy .maa wystarczyo poda jedynie cechy, ktre miay ulec zmianie, nato
miast wszystkie pozostae elementy byy dziedziczone z nadrzdnej pseudoklasy.
Starsze wersje przegldarek miay problemy z dziedziczeniem, jeli na stronie znaj
dowaa si tabela. Poniej znajduje si prosty przykad (rysunek 4.4.), w ktrym cz
tekstu umieciem w tabeli, a cz poza ni. Nastpnie ustawiem kilka cech bezpo
rednio dla selektora body.
<html>
<head>
<meta http-equiv="Content-type" content-"text/htm l;charset IS0-8859-2" />
<title>Tworzenie stron WWW w p raktyce</title>
<style type="text/css">
BODY

{
background-color: white;
fo n t-size : 24pt;
color: green:

}
</style>
</head>
<body>
<p>Wydawnictwo Hel i on</p>
<table width="902" border="l">
<tr>
<td>Wydawnictwo Helion</td>
< /tr>
</table>
</body>
</html>
Rysunek 4.4.

Przykad problemw
z dziedziczeniem

Wydawnictwo Helion
Wydawnictwo Helion

Zwr uwag na wysoko tekstu w tabeli i poza ni. Domylnie mia on mie wyso
ko 24 punktw w caym dokumencie. Niestety, tabela wyczya wielko tekstu dla
swojej zawartoci. Problemy takie m og wystpi w starszych przegldarkach, a naj
prostszym sposobem na ich uniknicie jest zgrupowanie selektorw body oraz td.
body. td

{
background-color: white:
fon t-size: 24pt:
color: green:

Rozdzia 4. Kaskadowe arkusze stylw

159

Kolejnym wanym pojciem, z ktrym stykasz si ju w samej nazwie kaskadowe


arkusze stylw, jest kaskadowo. Odpowiada ona za zdefiniowanie zalenoci midzy
rnymi sposobami umieszczania stylw w dokumencie. Z ca pewnoci pamitasz,
e style moemy wpisa bezporednio do znacznika, osadzi w nagwku dokumentu,
pobra z zewntrznego arkusza czy zaimportowa; poza tym kada przegldarka ma
swoje domylne arkusze, a do tego dochodzi jeszcze moliwo stworzenia wasnego
arkusza przez internaut. Jak wida, moliwoci jest cakiem sporo i dlatego specyfika
cja okrela priorytety dla kadej z tych metod.
Przyjrzyj si nastpujcemu przykadowi, ktry jest wzorem bardzo prostej kaskady.
<html>
<head>
<meta http-equiv="Content-type" content="text/htm l:charset=IS0-8859-2" />
<title>Tworzenie stron WWW w praktyce</title>
<style type="text/css">
BODY

{
background-color: whlte;
font-slze: 24pt;
color: green:

}
</sty1e>
</head>
<body>
<p>Wydawnictwo Helion</p>
<p style="font-size: 14pt;">Wydawnictwo Helion</p>
</body>

</html>
Zwr uwag, e w listingu poczyem dwie metody osadzania arkuszy w dokumen
cie w nagwku oraz bezporednio w znaczniku.
Zgodnie z zasad kaskadowoci najpierw zostanie zaadowany zewntrzny arkusz, na
stpnie style wpisane do nagwka <head></head>, a na samym kocu style wpisane
bezporednio do znacznika. Takie rozwizanie umoliwia pen kontrol nad doku
mentem, a w przypadku sprzecznoci zdefiniowanych stylw spowoduje, i uyty zo
stanie ten, ktry jest najbliej formatowanego elementu.
Jeeli rozpatrzysz pen wersj kaskady, to liczba moliwoci, z jak mamy do czynie
nia, wyglda imponujco. Poniej zamieszczam prosty wykaz wanoci poszczegl
nych arkuszy.
1. Arkusze stylw przegldarki.
2. Arkusze stylw internauty.
3. Arkusze stylw projektanta strony:
zewntrzne arkusze stylw,
style osadzone w nagwku dokumentu HTML,
style osadzone bezporednio w znaczniku.

1 60

Tworzenie stron WWW w praktyce

Jeeli internauta wejdzie na stron, na ktrej twrca nie zastosowa adnych stylw,
strona ta zostanie wywietlona za pomoc domylnego arkusza przegldarki. Jednak gdy
internauta ma przygotowany wasny arkusz stylw zostanie on uyty do wywie
tlenia strony.
Jeli na stronie znajduj si arkusze stylw przygotowane przez jej projektanta, to one
zostan uyte do wywietlenia strony WWW. Pamitaj, e tutaj moe zachodzi ko
lejna kaskada m idzy arkuszem osadzonym w znaczniku lub pobranym z zewntrz
nych plikw.

Formatowanie wygldu tekstu


Masz ju niezbdne podstawy, dziki ktrym moemy zaj si waciwociami po
szczeglnych elementw. Niejako tradycyjnie zaczniemy od waciwoci tekstu.
Specyfikacja kaskadowych arkuszy stylw pozwala na kontrolowanie nastpujcych
elementw tekstu:
poziome i pionowe wyrwnanie,
wcicie,
odstpy midzy wierszami,
odstpy midzy wyrazami,
odstpy midzy literami,
dekoracja tekstu (tekst podkrelony, przekrelony, etc.),
przeksztacanie tekstu (mae i due litery),
kontrola pustej przestrzeni (dodatkowe spacje w tekcie).

Wyrwnanie tekstu
Istnieje moliwo wyrwnania tekstu do prawej i lewej strony oraz wyrodkowania
lub wyjustowania caego bloku. Konstrukcja odpowiedniego stylu ma nastpujc posta:
P

te x t-a lig n : le f t ;

}
P

{
te x t-a lig n : rig h t;

}
P

{
te x t-a lig n : center;

Rozdzia 4. Kaskadowe arkusze stylw

16 1

te x t-a lig n : ju s tify :

Za pomoc cechy te x t - a l ign moesz wyrwna wszystkie elementy blokowe.

Uwaga

Pionowe wyrwnanie
Elementy umieszczone w komrce tabeli oraz wewntrz innych elementw blokowych
moesz dodatkowo wyrwna w pionie. W tym przypadku specyfikacja przewiduje na
stpujce moliwoci: gra, d, rodek, indeks grny oraz indeks dolny.
/*w y rwnanie do g ry*/

td

i
v e rtic a l-a lig n : top;

}
/ * wyrwnanie do rodka*/

td

{
v e rtic a l-a lig n : middle:

}
/* wyrwnanie do dou*/

td

{
v e rtic a l-a lig n : bottom;

}
Do zdefiniowana indeksw posu si nieco innym przykadem i skorzystam z selekto
ra potomka, dziki czemu atwiej ustawi odpowiednie wartoci. Poniej zamieszczam
przykadowy listing fragmentu kodu odpowiedzialnego za powstanie indeksw.
/*indeks dolny*/

p span

i
v e rtic a l-a lig n : sub:

}
/*indeks grny*/

p.inny span

{
v e rtic a l-a lig n : super;

}
Natomiast sam kod HTML wyglda tak:
<p>Indeks <span>Dolny</span></p>
<p class="inny">Indeks <span>Grny</span></p>

V
Uwaga

Tekst umieszczony pomidzy znakami / * * / je s t komentarzem i nie zostanie wy


wietlony na stronie WWW. Warto komentowa niektre elementy, gdy dziki temu
masz lepsz kontrol nad tworzonym arkuszem.

162

Tworzenie stron WWW w praktyce

Rysunek 4.5 przedstawia wynik dziaa wyrwnania tekstu w pionie.


Rysunek 4.5.
P rzykad wyrwnania
tekstu w pionie

Wcicie pierwszego wiersza akapitu


Nastpn cech elementw blokowych jest moliwo kontroli wcicia. Z pewnoci
pamitasz akapity w niektrych ksikach, gdzie pierwszy wiersz by nieco bardziej
wcity ni pozostay tekst. Taki efekt jest moliwy do uzyskania na stronie WWW za
pom oc kaskadowych arkuszy stylw i suy do tego celu polecenie te x t-in d en t.
P

{
text-inde nt: Ion:

}
Jak widzisz, konstrukcja jest bardzo prosta i tradycyjnie skada si z cechy oraz war
toci, ktra w tym przypadku jest liczb i korzysta z jednostek wzgldnych lub bez
wzgldnych.
Przykad odnosi si do wszystkich blokw tekstu akapitw, a kady z nich bdzie
mia wcity pierwszy wiersz o jeden centymetr.

Odstpy wiersze, wyrazy, litery


Za pom oc kaskadowych arkuszy stylw moesz kontrolowa odstpy midzy wier
szami elementw publikowanych na stronie WWW. Odpowiednie polecenie ma nast
pujc posta:
P

{
lin e-height: 9pt;

}
Powyszy listing spowoduje, e odstp midzy poszczeglnymi wierszami akapitu b
dzie wynosi 9 punktw.
Uywajc tej cechy, musisz pamita o tym, e zbyt may lub za duy odstp midzy
wierszami moe spowodowa trudnoci w czytaniu, co w konsekwencji moe zniech
ci odwiedzajcego do lektury zawartoci strony.
Odstpy midzy wierszami m og rwnie przybiera wartoci ujemne, dziki czemu
tekst si zagszcza.

Rozdzia 4. Kaskadowe arkusze stylw

163

{
line-height: -3pt;

}
Skoro mona kontrolowa odstpy midzy wierszami tekstu, to czemu nie regulowa
odlegoci midzy wyrazami. Twrcy kaskadowych arkuszy stylw dostrzegli t cech
tekstu i stworzyli polecenie word-spaci ng, za pomoc ktrego mona kontrolowa za
gszczenie wyrazw.
hl

{
word-spacing: lcm

}
lub
P

{
word-spacing: -3pt:

}
Jak wida, rwnie w tym przypadku warto cechy moe by liczb ujemn, co wie
si ze zmniejszeniem odstpw i zagszczeniem wyrazw.
Pamitaj, e zbytnie rozstrzelenie lub zagszczenie utrudnia czytanie tekstu.
Uwaga

Regulacja odstpw midzy znakami jest ostatnim elementem, ktry odpowiada za


ustawienia przerw. Po znaku nie ma bowiem ju innego, mniejszego elementu ska
dowego tekstu. Konstrukcja stylu odpowiedzialnego za regulacj odstpw midzy zna
kami ma nastpujc posta:
a: lin k

{
letter-spacing: -2pt;

}
Warto cechy moe zawiera liczby dodatnie zwikszenie odstpu, lub ujemne
jego zm niejszenie. Rwnie tym razem m usisz pam ita o czytelnoci tekstu.
Moim zadaniem raczej nie zagszczaj ani nie rozrzedzaj zbyt duych partii tekstu,
poniewa moe to znacznie utrudni czytanie. Oczywicie, ozdobne nagwki czy te
fragmenty tekstu, ktre chcesz wyrni, jak najbardziej moesz okrela za pomoc
tej cechy. Takie dziaanie w odpowiednim kierunku z pewnoci poprawi funkcjonal
no strony.

Dekoracja tekstu
Kaskadowe arkusze stylw pozwalaj na kontrol wygldu tekstu i przypisywanie mu
dekoracji. Dokadniej mwic, za pomoc cechy text-decoration mona spowodowa,
e formatowany tekst na stronie bdzie podkrelony, przekrelony, nadkrelony lub
migajcy. Oglna konstrukcja ma nastpujc posta:

164

Tworzenie stron WWW w praktyce

selektor

{
text-decoration: warto;

}
gdzie warto moe przybiera jedn z nastpujcych nazw:
underline (podkrelony),
over! i ne (nadkrelony),
line -th rou gh (przekrelony),
b link (migajcy).
hl

{
text-decoration: overline:

Bardzo wanym elementem dekoracji jest moliwo jej wyczenia. Waciwo ta


jest szczeglnie przydatna w sytuacji, gdy chcemy formatowa hipercza, ktre do
mylnie s podkrelone.
a

{
text-decoration: none:

}
Na rysunku 4.6 wida przykad tekstu, ktry zosta nadkrelony.

Wydawnictwo HELION
z dekoracj w postaci
nadkrelenia

Przeksztacanie mae i due litery


M oliwo przeksztacania jest szczeglnie przydatna w sytuacji, gdy dostaniesz go
towy tekst i jest on np. napisany w caoci maymi literami, a na stronie litery maj
by widoczne jedynie jako due znaki. Nie warto przepisywa caoci czy te zmienia
jej za pomoc edytora tekstu, np. MS Word, gdy problem ten moemy zaatwi jednym
wpisem do arkusza stylw. Poniej zamieciem schemat stylu.
selektor

{
text-transform : warto;

}
Zamiast sowa warto mona podstawi jeden z nastpujcych stylw przeksztacenia:
uppercase tylko due litery,
1owercase tylko mae litery,
capi ta l i ze pierwsza litera kadego sowa zostaje zamieniona nad du,

Rozdzia 4. Kaskadowe arkusze stylw

165

none znaki s pokazywane tak, jak zostay wpisane do dokumentu; jest to

warto domylna.
hl

text-transform : uppercase;

}
Rysunek 4.7 przedstawia nagwek stopnia pierwszego, w ktrym za pom oc stylu
te xt-tra n sform dokonaem przeksztacenia tekstu na due litery.

Rysunek 4.7.
Nagwek hl

WYDAWNICTWO HELION

form atowany
za pom oc stylu
text-transform

Kontrola pustej przestrzeni


W jednym z poprzednich rozdziaw wspomniaem, e podczas interpretacji kodu HTML
(XHTML) przez przegldark wszystkie nadmiarowe spacje s ignorowane, jeeli na
tomiast koniecznie chcesz wymusi jak dodatkow spacj, mona korzysta ze spe
cjalnej twardej spacji, oznaczonej symbolem &nbsp. Rozwizanie to byo mao wygodne
i w sytuacji, gdy wymuszonych spacji byo w dokumencie wicej, mogo si zdarzy,
e kod strony pcznia w zastraszajcym tempie.
Alternatyw dla wstawiania twardych spacji w niektrych przypadkach mg si oka
za archaiczny znacznik <pre></pre>, jednak nie byo to rozwizanie idealne. Dlatego
kaskadowe arkusze stylw wprowadziy moliwo kontroli odstpw w dokumencie.
Konstrukcja odpowiedniego stylu jest nastpujca:
selektor

{
white-space; warto:

}
gdzie warto jest zastpowana przez jed n z nastpujcych moliwoci:
normal stan domylny; spacje s redukowane do jednej,
pre - wymusza zachowanie dokadnie takiej liczby spacji, jaka znajduje si
faktycznie w tekcie; z pewnoci widzisz analogi do znacznika <pre></pre>,
nowrap kady wiersz wchodzcy w skad akapitu jest automatycznie amany

przez przegldark; jeeli chcesz, to za pom oc tej opcji moesz zablokowa


amanie wierszy.
Przygldajc si wartoci nowrap, po raz kolejny moemy zobaczy analogi do atry
butu nowrap, spotykanego w specyfikacji jzyka HTML.

Tworzenie stron WWW w praktyce

1 66

Wnioski
Kady podrozdzia powicony funkcjom kaskadowych arkuszy stylw bd koczy
maym podsumowaniem, w ktrym znajdzie si tabela zawierajca wszystkie cechy
i wartoci stylw skadajcych si na dane zagadnienie. Poza tym w tabeli 4.3 znaj
dziesz przykady zastosowania danego stylu.
Tabela 4 .3 . Zbiorcze zestaw ienie waciwoci tekstu
Deklaracja

Dostpne w artoci

text-align

le f t | rig h t | center | ju s tify | in h e rit


p {te x t-a lig n : l e f t ; }

vertical-align

baseline | sub | super | bottom | text-bottom | middle | top | text-top |


warto liczbowa \ warto procentowa | in h e rit
p {v e rtic a l-a lig n : super;}

text-indent

warto liczbowa \ warto procentowa | in h e rit


p {te xt-in d e n t: 3pt; }

text-decoration

none | underline | overline | line-through | b lin k | in h e rit


p {text-decoration: underline;}

text-transform

ca p ita liz e | uppercase | lowercase | none | in h e rit


p {text-transform : c a p ita liz e ;}

letter-spacing

normal | dugo | in h e rit


p{letter-spacing: 3pt: }

word-spacing

normal | dugo | in h e rit


p{word-spacing: 3 p t;}

white-space

normal | pre | nowrap | pre-wrap | p re -lin e | in h e rit


p{white-space: nowrap;}

Pamitaj, e wszystkie opisane w tym podrozdziale cechy moesz dowolnie ze sob


czy w celu uzyskania podanego efektu.
P

{
te x t-a lig n : center:
te xt-ind ent: lcm;
text-transform : ca p ita lize ;

Formatowanie wygldu czcionki


Specyfikacja kaskadowych arkuszy stylw wyrnia nastpujce cechy czcionki:
rodzaj,
rozmiar,
waga,

Rozdzia 4. Kaskadowe arkusze stylw

167

styl,
wariant.

Poza wymienionymi cechami przewidziano jeszcze dwie dodatkowe: szeroko oraz


proporcj jednak nie s one jeszcze obsugiwane przez wiodce przegldarki.

Rodzaj czcionki
Pod pojciem rodzaju czcionki kryje si rodzina czcionki, np. Arial lub Times. Za
pomoc kaskadowych arkuszy stylw mona okreli, z jakiego rodzaju czcionki ko
rzystamy przy wywietlaniu wybranego elementu na stronie. Oczywicie, nic nie stoi
na przeszkodzie, by na jednej stronie rne elementy byy wywietlone za pom oc
kilku rodzajw czcionki.
Oglna konstrukcja stylu ma posta:
selektor

{
font-fam ily: nazwa_wasna_czcionki lub nazwa_rodzajowa_czcionki:

Okrelanie rodzaju czcionki moe si odbywa za pomoc jej nazw wasnych, np. Arial,
Times New Roman.
body

{
font-fam ily: a ria !, helvtica, verdana:

}
Drugim sposobem jest uycie nazw rodzajowych: serif, sans-serif, monospace, cursive
oraz fantasy.
body

{
font-fam ily: s e rif;

}
Czcionki okrelane mianem se rif s proporcjonalne, gdy kada litera ma inn szero
ko porwnaj np. liter m oraz 1. Dodatkowo kada czcionka z tej rodziny
posiada ozdobniki, zwane szeryfami. Typow czcionk nalec do grupy rodzajowej
s e n /je s t Times New Roman.
Druga grupa czcionek to sans-serif ktre rwnie s proporcjonalne. Rnica polega
na braku ozdobnikw. Przykadami czcionek nalecych do tej grupy m og by Arial,
Helvtica oraz Verdana. Ten rodzaj je st duo lepszy do czytania, w zwizku z tym
przyjto, e to wanie sans-serif powinien by uywany na stronie.
Kolejna grupa to monospace. Czcionki tego typu s nieproporcjonalne, co oznacza, e
kada litera ma tak sam szeroko (np. m ma tak sam szeroko jak 1). Ten
rodzaj jest doskonale znany z maszyn do pisania bd te starych drukarek igowych.
Ciekaw cech tego typu pisma jest to, e czcionka moe mie szeryf lub nie. Przy
kadem takiej czcionki jest Courier New.

168

Tworzenie stron WWW w praktyce

Nastpna grupa rodzajowa czcionek to cursive. Nie naley myli tej nazwy z tekstem
pochyym napisanym kursyw, gdy ta grupa rodzajowa obejmuje wszystkie czcionki,
ktre s podobne do odrcznego pisma. Innymi sowy, mog one zawiera rne ozdob
niki w postaci zawijasw. Przykadowa czcionka cursive to Comic Sans MS.
Ostatnia grupa nosi nazw fantasy i zawiera czcionki, ktrych nie da si zaklasyfiko
wa do adnego z pozostaych stylw rodzajowych. Przykadowa nazwa to Dziurki
Sto, ktrej osobicie nie potrafi zaklasyfikowa nigdzie indziej.
W tym miejscu warto zwrci uwag na to, w jaki sposb przegldarka uywa czcio
nek na stronie WWW. Ot wszystkie czcionki, ktre zdefiniowano w arkuszu sty
lw, przegldarka pobiera z komputera uytkownika ogldajcego stron WWW. Je
eli internauta nie posiada uytej czcionki, to przegldarka zastpi j domyln
czcionk dla danego systemu. W zwizku z tym moe si zdarzy, e przy zastoso
waniu innej czcionki caa strona si rozsypie i bdzie zupenie nieczytelna. Dlatego
proponuj, by nie uywa czcionek spoza listy najpopularniejszych, tzn. Times,
Times New Roman, Arial, Helvetica, Courier oraz nazw rodzajowych.
Bardzo dobrym nawykiem przy definiowaniu listy czcionek jest uywanie nazw kilku
podobnych czcionek oraz uzupenianie ich o nazw rodzajow.
body

{
fo n t-fa m ily: a ria l. Helvetica, verdana, sans-serif:

}
Jeeli strona z czcionkami okrelonymi w ten sposb zostanie otwarta na komputerze,
gdzie nie ma czcionki Arial, to automatycznie zostanie podjta prba wywietlenia
tekstu za pom oc czcionki Helvetica lub Verdana. W sytuacji, gdy ogldajcy nie po
siada adnej z zaproponowanych czcionek, jego przegldarka sprbuje odszuka do
woln, nalec do grupy sans-serif.
Oczywicie, jeeli zdarzy si tak, e nie bdzie w komputerze ani jednej z okrelo
nych czcionek, jak rwnie przegldarka nie dopasuje innej czcionki, nalecej do
danego rodzaju, to zostanie pobrana domylna czcionka z komputera ogldajcego.
Jednak przy dobrze dobranych nazwach czcionek oraz dopasowanych rodzajach
prawdopodobiestwo takiego zdarzenia jest niewielkie.

Rozmiar
Rne elementy na stronie m og mie odmienny rozmiar czcionki zastosowanej do
ich wywietlenia. Za pom oc kaskadowych arkuszy stylw moesz kontrolowa roz
miar, uywajc do tego celu jednostek wzgldnych i bezwzgldnych, opisanych na
pocztku tego rozdziau. Konstrukcja oglna stylu ma nastpujc posta:
selektor

{
font-size : warto:

Rozdzia 4. Kaskadowe arkusze stylw

169

W praktyce moe to wyglda np. tak:


hl

{
font-size: 20pt;

}
lub
P

{
font-size: 12px:

}
Przyjrzyj si nastpujcemu arkuszowi:
body

{
font-size: 20pt:

}
.wikszy

{
font-size: 40pt;

}
.procenty

{
font-size: 2002:

}
Domylny tekst ma rozmiar 20 punktw, natomiast tekst w bloku, ktry ma przypisan
klas o nazwie .wikszy 40 punktw. Ciekawostk jest klasa o nazwie .procenty,
gdy jej uycie ustawi tekst o rozmiarze 200% tekstu podstawowego. W tym przypadku
domylnym rozmiarem tekstu jest 20 punktw, czyli tekst formatowany za pom oc
klasy . procenty bdzie mia rozmiar 40 punktw tak jak klasa . wi ekszy.
Poza opisanymi sposobami okrelania wielkoci tekstu zgodnie ze specyfikacj mo
na rwnie uywa zdefiniowanych wielkoci. Zostao ich przewidzianych siedem:
xx-sma11, x-sm all, smali,medium, large, x-la rge , xx-large.
p.duzy

{
font-size: xx-large;

}
Ciekaw waciwoci kaskadowych arkuszy stylw jest moliwo okrelania wzgld
nych rozmiarw za pom oc opcji 1arger oraz smal 1er.
body

{
font-size: large:

}
.wikszy

{
font-size: larger:

Tworzenie stron WWW w praktyce

170

.mniejszy

{
fon t-size: smal 1e r;

}
Powyszy listing przedstawia typow konstrukcj, jak mona spotka niemal codzien
nie. Na pocztku ustawiem dom yln wielko tekstu jako large. Nastpnie za po
m oc klas zdefiniowaem tekst o jeden stopie niszy smal 1er czyli w tym przy
padku medi um oraz o jeden stopie wyszy 1arger w tym przypadku bdzie to
x-large. Na rysunku 4.8 wida efekt dziaania listingu, ktry wanie opisaem.
Rysunek 4.8.
Przykad
zrnicowania
rozmiaru czcionki
za pom oc CSS

Wydawnictwo HELION - tekst domylny

W y d a w n ic t w o H E L I O N - t e k s t w i k s z y
Wydawnictwo HELION - tekst mniejszy

Korzystanie z tych dwch wartoci w czasie pracy nad stron jest bardzo wygodne,
gdy potrzeba tylko trzech wielkoci tekstu. W ystarczy zdefiniowa domylny rozmiar
czcionki, a potem opiera si na zalenociach smal 1er i 1arger.

Waga czcionki
Pod pojciem wagi czcionki naley rozumie jej grubo, a nie faktyczny ciar liczony
w kilogramach. Odpowiednia konstrukcja ma nastpujc posta:
selektor

{
font-weight: warto:

}
Uarto moe by okrelona za pom oc liczb z przedziau od 100 do 900 oraz nazw
boid, bolder, lig h te r i normal.
P

{
font-weight: boid:

}
W artoci bolder i lig h te r dziaaj dokadnie tak samo, jak opcje 1arger i smali er,
dostpne przy okrelaniu wielkoci czcionki. Dokadniej mwic, pozwalaj na uzy
skanie czcionki ciszej lub lejszej o jeden stopie w skali.
Rysunek 4.9 przedstawia poszczeglne wagi czcionki. Szczeglnie interesujce s
rnice w interpretacji poszczeglnych wag przez rne przegldarki.

17 1

Rozdzia 4. Kaskadowe arkusze stylw

M o z illa F ire fo x 2 .0 .4

MS IE 7

O p e ra 9.x

S a fa ri 3 .0 .2

Tekst o wadze normal

Tekst o wadze normal

Tekst o wadze normal

Tekst o wadze normal

Tekst o wadze 100

Tekst o wadze 100

Tekst o wadze 100

Tekst o wadze 100

Tekst o wadze 200

Tekst o wadze 200

Tekst o wadze 200

Tekst o wadze 200

Tekst o wadze 300

Tekst o wadze 300

Tekst o wadze 300

Tekst o wadze 300

Tekst o wadze 400

Tekst o wadze 400

Tekst o wadze 500

Tekst o wadze 500

T ek st o w ad ze 6 0 0

T ekst o w adze 600

T ek st o w adze 700

T ekst o w ad ze 700

T ek st o w adze 800

T ekst o w adze 800

Tekst o wadze 400


Tekst o wadze 500
T ekst o wadze 600

Tekst o wadze 400


Tekst o wadze 500
T ek st o w a d ze 6 0 0

T ekst o wadze 700


T ek st o wadze 700
T ekst o wadze 800
T ek st o w adze 800
T ekst o wadze 900
T ek st o wradze 900
T ek st o w adze bold

T ek st o wadze bold

T ek st o wradze bold

T ek st o wradze bolder

T ek st o wadze bolder

Tekst o wadze Hght

Tekst o wadze Hght

Tekst o wadze Hghter

T ek st o wradze bold er

Tekst o wadze Hght


Tekst o wadze Hghter

T ek st o w adze 900

T ekst o w adze 900


T ekst o w adze bold
T ekst o w adze bolder

Tekst o wadze light


Tekst o wadze ligbter

Tekst o wadze Hghter

Rysunek 4 .9 . Poszczeglne wagi czcionki. Zwr uwag na rnice w interpretacji p rzez przegldarki

Styl czcionki
Czcionka publikowana na stronie WWW, poddana procesowi formatowania za po
moc kaskadowych arkuszy stylw, moe zmienia swj styl. Specyfikacja okrela
dwa rodzaje stylw czcionki.
Pierwszy z nich to i ta l i c.
P

{
fo n t-style : i ta l i c :

}
Myl, e tumaczenie tego, jak wyglda i ta l i c, nie ma wikszego sensu, bo przecie
kady spotka si z tekstem pochyym, czyli kursyw.
Druga opcja przy okrelaniu stylu czcionki to obi i que.
P

{
fo n t-s ty le : oblique:

172

Tworzenie stron WWW w praktyce

W tym przypadku wystpuj pewne problemy, poniewa tekst wywietlony za pomo


c tego stylu rwnie jest pochyy i nie rni si niczym od stylu i t a l i c . Domylna
warto stylu czcionki nosi nazw norm al.

Wariant czcionki
To enigmatyczne pojcie odpowiada za przeksztacenie tekstu w kapitaliki. Tekst przed
stawiony za pom oc kapitalikw skada si z wielkich liter, a oprcz tego pierwsze
litery kadego wyrazu s wyranie wiksze anieli pozostae. Konstrukcja stylu jest
nastpujca:
hl

{
fo n t-va ria n t: small-caps;

}
Domyln wartoci tego stylu jest opcja normal, dziki ktrej moemy wyczy dzia
anie stylu.

Wnioski
Podobnie jak w przypadku waciwoci tekstu, rwnie cechy czcionki moemy do
wolnie ze sob czy.
P

{
fo n t-fa m ily: a ria l, helvtica, verdana, sans-serif:
font-size: 12px;
font-weight: bold;
fo n t-s ty le : it a lic :
fo n t-va ria n t: small-caps;

}
Oczywicie, nic nie stoi na przeszkodzie, by doda do podanej definicji wybrane cechy
waciwoci tekstu.
P

{
fo n t-fa m ily: a ria l, helvtica, verdana, sans-serif;
font-size: 12px;
font-weight: bold;
fo n t-s ty le : it a lic ;
fo n t-va ria n t: small-caps;
te x t-a lig n : center;
word-spacing: 6px;

Rozdzia 4. Kaskadowe arkusze stylw

173

Tabela 4.4. Zbiorcze zestawienie waciwoci czcionki


Deklaracja

Dostpne w artoci

font-fam ily

nazwa czcionki | s e rif | sans-serif | monospace | fantasy | cursive | in h e rit


p {fo n t-fa m ily: Verdana. A ria l:}
normal | i t a l ic | oblique | in h e rit

font-style

p {fo n t-s ty le : it a l ic ; }
font-variant

normal | small-caps | in h e rit


p {fo n t-v a ria n t: small-caps;}

font-w eight

normal | bold | 100 | 200 | 300 | 400


| lig h te r | in h e rit

font-size

rozmiar absolutny | rozmiar wzgldny | xx-small I x-small


larger | in h e rit
large | x-large | xx-large | smaller

fo n t

font-styl | font-variant | font-weight | font-size | line-hight | font-fam ily


| icon | menu | caption | message-box | small-caption | status-bar

500 I 600 I 700 I 800 | 900 | bolder

p {font-weight: bold;}
smal 1 I medi urn

p {fon t-size : lOpt:}

p {fo n t: i t a l ic small-caps 600 14pt/2 a r ia l;}


font-stretch

normal | wider | narrower | ultra-condensed | extra-condensed | condensed


| semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
I in h e rit

font-size-adjust

none | wspczynnik | in h e rit

p {fo n t-s tre tc h : ultra-condensed:}


p {font-size -a d ju st: 0.54;}

Formatowanie wygldu list


Kaskadowe arkusze stylw um oliwiaj kontrol wygldu list punktowanych, nume
rowanych oraz definicji. Poza kontrol rodzaju uytej czcionki czy te jej wielkoci
twrcy specyfikacji CSS wyrnili dodatkowe cechy specyficzne dla list:
typ.
graficzny punktor,
pozycjonowanie wzgldem punktora.

Typ listy
Listy punktowane i numerowane m og rni si wygldem punktora lub sposobem
numeracji. Wemy np. listy numerowane, ktre m og by ponumerowane za pomoc
liter lub cyfr. Dodatkowo litery m og by mae lub due, natomiast liczby m og by
rzymskie lub arabskie. Podobnie wyglda sprawa punktora w listach wypunktowanych.
W tym przypadku mona rwnie wyrni kilka punktorw, np. kwadrat, koo lub okrg.

1 74

Tworzenie stron WWW w praktyce

Typ listy okrela si za pom oc nastpujcej konstrukcji:


selektor

{
lis t-s ty le -ty p e : warto:

}
Warto moe przybra jed n z nastpujcych postaci:
none brak punktora,
disc peen okrg,
c ir c le okrg,
square peen kwadrat.

Gdy okrelasz punktor listy wypunktowanej selektorem, musisz uy znacznika ul, tak
jak w poniszym przykadzie.
ul

{
lis t-s ty le -ty p e : square:

}
Nieco inne wartoci mona przypisa dla listy numerowanej, poniewa w tym przy
padku mamy niejako dwa gwne typy numeracji liczby oraz litery, a kady z nich
dzieli si jeszcze na podtypy.
Wartoci dla listy wypunktowanej m og przybra nastpujc posta:
none brak punktora,

decim al liczby arabskie,


1ower- roman mae liczby rzymskie,
upper-roman due liczby rzymskie,
lower-alpha mae litery,
upper-alpha due litery,
none brak wypunktowania.
W tym przypadku selektorem jest o l, tak jak w poniszym przykadzie:
ol
{
lis t-s ty le -ty p e : upper-alpha:

}
Teoretycznie, moesz za kadym razem uywa tego samego selektora i przypisywa
inne wartoci dla cechy, jednak kontrola takich list jest znacznie utrudniona, dlatego
warto zada sobie trud i trzyma si przyjtych prawide.

Rozdzia 4. Kaskadowe arkusze stylw

1 75

Wasny punktor graficzny


Sposoby wypunktowania listy opisane kilka wierszy wczeniej s bardzo wygodne
i estetyczne, jednak w niektrych przypadkach mog okaza si zbyt oklepane. Mam
tutaj na myli rozwizania stosowane na niektrych stronach domowych. Dlatego w spe
cyfikacji kaskadowych arkuszy stylw umieszczono cech, ktra umoliwia zastoso
wanie wasnego punktora obrazka w formacie gif, jp g lub png. Przykad stylu, ktry
pozwala na umieszczenie na stronie wasnego punktora, znajduje si poniej.
ul

{
list-style-im age: url ("p u n k to r .g if):

}
Oczywicie, zam iast punktor .g i f naley poda nazw wasnego obrazka. Pamitaj
o tym, e nie moe on by zbyt duy, gdy na stronie bdzie wyglda bardzo nie
estetycznie. Przyjrzyj si rysunkowi 4.10, na ktrym wida przykad zastosowania
punktora na stronie.
Rysunek 4.10.
Przykad zastosowania
wasnego graficznego
punktora

L IST A Z A K U P W
I. P r o d u k t y m c z n e
W ,p ,z .n n ,
mka ziemniaczana
mka krupczatka

II. O w o c e
% b lk a
banany
^ cy tru sy
cytryny
mandarynki
'

' pomaracze

arbuzy_________________

Pozycjonowanie listy wzgldem punktora


Trzeci i ostatni cech formatowania wygldu list jest moliwo regulacji pooenia
tekstu wzgldem punktora patrz rysunek 4.11.
selektor

{
lis t-s ty le -p o s itio n : warto:

176

Tworzenie stron WWW w praktyce

Rysunek 4.11.
Przykad listy,
w ktrej okrelono
pooenie tekstu
wzgldem punktora.
Pierwsza lista uywa
wartoci outside,
a druga inside

Lorem ipsum door sit amet, consectetuer adtpiscing et. Vestibuhmi et puras. Sed
varias semper nibh Quisque tempor, risas nec facisis dictum, lacus teBus auctor
diam, porttitor suscipit lectus massa et sapien.
Lorem ipsum dolor sk amet, consectetuer adipiscing elit Vestrbuhim et puras. Sed
varius semper nibh. Quisque teinpor, risus nec. facilisis dictum, lacus telhis auctor
diam, porttitor suscipit lectus massa et sapien.
Lorem ipsum dolor sit amet consectetuer adipiscing eht. Vestibahim et parus.
Sed vanus sender nibh. Quisque tensor, risus nec facilisis dietmn, lacus tehis
auctor diam, porttitor suscipit lectus massa et sapien.
Lorem ipsum dolor sit amet, consectetuer adipiscing et. Vestibuhim et puras.
Sed varias semper nibh. Quisque tempor, risus nec facilisis dictum, lacus telus
auctor diam, porttitor suscipit lectus massa et sapien.

N iejako ju tradycyjnie do powyszego przepisu zam iast sowa s e le k to r moesz


podstawi znaczniki ul lub o l, natom iast warto przybiera jedn z nastpujcych
moliwoci:
outsi de punktor znajduje si wyranie poza list,
insid e punktor jest schowany w tekcie listy.

Oczywicie, jeeli lista zawiera krtkie wpisy w kadym punkcie, to nie wida rni
cy midzy wartociami wyrnionymi powyej. Innymi sowy, stosowanie cechy l i s t -s ty le -p o s itio n ma sens tylko w przypadku list, w ktrych kady z punktw zajmuje
wicej ni jeden wiersz.
ol

{
lis t-s ty le -p o s itio n : inside:

Wnioski
Cechy list bez wikszych problemw moesz czy ze sob lub z innymi elementami
kaskadowych arkuszy stylw.
OL

{
lis t-s ty le -ty p e : c irc le ;
font-size: 12px;

Kolor i to poszczeglnych elementw


Praktycznie kady element na stronie WWW formatowany za pomoc kaskadowych
arkuszy stylw moe mie swj kolor bd to. O ile nie ma wikszego problemu
z okreleniem, czym jest kolor np. tekstu, to sprawa wyglda nieco gorzej z tem.

Rozdzia 4. Kaskadowe arkusze stylw

177

Tabela 4.5. Zbiorcze zestawienie waciwoci list


Deklaracja

Dostpne w artoci

list-style-type

disc | c irc le | square | decimal | decimal-leading-zero | lower-roman


| upper-roman | lower-greek | lo w e r-la tin | upper-latin | armenian |
georgian | lower-alpha | upper-alpha | none | in h e rit

list-style-image

url | none | in h e rit

list-style-position

inside | outside | in h e rit

list-style

lis t-s ty le -ty p e | lis t-s ty le -p o s itio n | list-style -im a g e

ol {lis t-s ty le -ty p e : lower-alpha:}


ul {lis t-s ty le -im a g e : u rlC im ages/obrazek.gif"");}
ul {lis t-s ty le -p o s itio n : in sid e ;}
ul { lis t- s t y le : upper-roman in sid e :}

Ot to moe by okrelone na dwa sposoby. Pierwszy z nich to ustawienie ta po


przez zastosowanie definicji koloru, drugi natom iast polega na ustawieniu ta, ktre
jest obrazkiem.

Kolor
Za pomoc CSS mona przypisa dowolny kolor, np. bloku tekstu czy nagwka.
selektor

color: warto:

}
W praktyce przypisanie koloru nagwka stopnia pierwszego moe wyglda tak, jak
na poniszym przykadzie:
hl

color: red:

}
lub
P

color: #8999e4;

}
Niestety, za pomoc tej cechy nie da si okreli np. koloru obramowania tabeli, gdy
do tego celu su inne opcje dostpne w specyfikacji CSS. Dlatego zapamitaj, e za
pomoc cechy color moesz kontrolowa kolor jedynie tekstu.
Poniej zamieciem prosty przykad zdefiniowana na stronie ciekawych odnonikw,
ktre po najechaniu na nie kursorem myszy zmieniaj kolor.
a

{
text-decoration: none;
font-size: lOpt;
color: black:

Tworzenie stron WWW w praktyce

178

a:hover

{
color: red;

To
We wstpie do tego podrozdziau wspomniaem, e tem moe by definicja koloru lub
obrazek. W zalenoci od rodzaju ta naley skorzysta z dwch rnych cech wyszcze
glnionych w specyfikacji CSS.
To moesz ustawi dla kadego elementu wykorzystanego na stronie WWW. Tak wic
to moe posiada caa tabela (< ta b le > < /ta b le > ) lub jej komrka (<td></td>), jak rw
nie blok tekstu (<p></p>). Nic nie stoi na przeszkodzie, by okreli to dla pseudoklas
odsyaczowych i zmienia je za pomoc pseudoklasy a : hover.
Definicja koloru jako ta ma nastpujcy wygld:
selektor

{
background-color: warto;

}
W praktyce moe to wyglda np. tak:
table

{
background-color: s ilv e r;

}
Drugim typem ta jest to graficzne, ktre w praktyce jest obrazkiem umieszczonym pod
tekstem lub innym elementem na stronie WWW.
selektor

{
background-image: URKnazwa . gi f ) :

}
W tym przypadku selektorem moe by praktycznie dowolny element jzyka HTML
(XHTML), natomiast obrazek, ktrego nazwa znajduje si w nawiasie, musi by zapi
sany w jednym z dostpnych formatw jp g , g i f lub png.
body

{
background-image: U R L (tlo .g if);

}
Jeeli chcesz stosowa graficzne to, powiniene wiedzie, e posiada ono ciekaw
waciwo: jest ono powielane w pionie i poziomie w zalenoci od potrzeb. Dlatego
wystarczy nieduy obrazek, by mie na stronie ciekawe to.
Jeeli uywasz ta graficznego, zastanw si, czy nie mona go przygotowa w taki
sposb, by udao si wykorzysta naturalne powielanie w pionie i poziomie patrz
rysunek 4.12. Dziki temu moesz przyspieszy wczytywanie strony.

179

Rozdzia 4. Kaskadowe arkusze stylw

Bartosz Danowski - M oziila Firefox..................................................

Plik

Edycja

Widok

Historia

Zakadki

Narzdzia

Pomoc

lilo/1/C'Useis. Bartek/DesktopcStions'WOW/lrWI/lest htmi


Helion
i d Oisabe* 5

Danowski
Cookies

Haidwaie
CSS*

] Forms*

Wiadomoci

00owanie

LG PotyC|

' Images* U Inlormotion*

i j Google Reedei l J ING Online

Miscellaneous- .

Outline* , , Resize*

Zscene.-tmc

Materiay ks/azki
Tools*

Sowniki

<
View Source-

Piogiamy
Options*

Pawowe

07*0s p /< S . <6

Rysunek 4 .1 2 . Przykad powielonego tla. Podstawowy obrazek oznaczyem za pom oc prostokta

Obrazek widoczny na rysunku 4.13 ma wymiary 30x1200 pikseli. Przegldarka au


tomatycznie powielia obrazek zdefiniowany jako to tylko w pionie, poniewa jest on
bardzo szeroki i w wikszoci uywanych rozdzielczoci powielanie w poziome nie
jest konieczne.

T
Rysunek 4 .1 3 . Pasek, ktry p o powieleniu daje to z rysunku 4.12

W podanym przykadzie to zostao powielone tylko w pionie, poniewa obrazek by


bardzo szeroki, ale w przypadku gdy to bdzie mniejsze ni dostpna rozdzielczo,
przegldarka zastosuje powielanie pionowe i poziome.

Powielanie i zatrzymanie ta
Za pomoc kaskadowych arkuszy stylw mona kontrolowa powielanie oraz zatrzy
ma to tak, by nie przewijao si wraz z zawartoci strony WWW.

180

Tworzenie stron WWW w praktyce

Zaczn od cechy kaskadowych arkuszy stylw, ktra pozwala na kontrol powielania


ta. Oglny schemat znajduje si poniej.
selektor

{
background-repeat: warto;

}
Zamiast sowa warto mona w tym przypadku podstawi jedn z czterech moliwoci:
no-repeat to nie bdzie powielane i wywietli si tylko raz,

repeat -x
to zostanie powielone tylko w poziomie,
repeat -y to zostanie powielone tylko w pionie,
repeat to bdzie powielane zarwno w pionie, jak i w poziomie.
body

{
background-repeat: repeat-x:

}
Na rysunku 4.14 przedstaw iem prosty przykad, na ktrym obrazek, bdcy tem
dokum entu, zosta pow ielony w poziomie, natom iast powielanie w pionie zostao
zatrzymane.
Drug cech, ktra jest szczeglnie przydatna na stronie z tem, jest moliwo jego
zatrzymania tak, by nie przesuwao si razem z zawartoci strony. Efekt ten mona
porwna do sytuacji, w ktrej masz jed n kartk papieru z tem oraz przezroczyst
foli, na ktrej znajduje si tekst; po naoeniu folii na kartk papieru moesz prze
suwa foli, a to pozostanie pod spodem i bdzie nieruchome.
Rozwizanie to pozwala ustawi w tle strony np. zdjcie i dziki temu uzyska bardzo
ciekawy efekt. Jednak pamitaj, e nie kade zdjcie nadaje si, by ustawi je w tle;
czasami mona doprowadzi do sytuacji, w ktrej tekst stanie si zupenie nieczytelny.
Oglny schemat blokowania ta wyglda nastpujco:
body

{
background-image: u rK tlo . jpg):
background-attachment: fixed;

}
Jak si zapewne domylasz, nie ma sensu blokowanie ta np. dla tabeli czy te innych
nieduych elementw. Moim zdaniem wykorzystanie tej cechy ma sens jedynie w przy
padku, gdy ustawisz to dla caej strony WWW.

181

Rozdzia 4. Kaskadowe arkusze stylw

sft.

I
' o

H nhM j u

w w m fc i

U ) Poiyqonow*me

G o o g l. R t . d U INGOnlin.

iJ

M a tm * f c * *

S t a m k i | l_ J P m j n m y

0.4905

&

Rysunek 4.14. Przykad ta powielonego tylko w poziomie

Pozycjonowanie graficznego ta
Obrazek ustawiony w tle moe by dowolnie pozycjonowany za pomoc kaskadowych
arkuszy stylw wzgldem caego okna lub lewego grnego naronika. Oglny schemat
zamieciem w poniszym listingu.
body

{
background-image: u r l ( t lo . g if ) ;
background-repeat: no-repeat;
background-position: warto;

}
Warto dla cechy background-position moe tu przybra nastpujc form;
center to bdzie wyrodkowane,
1e ft to znajdzie si z lewej strony,
r ig h t to znajdzie si z prawej strony,

182

Tworzenie stron WWW w praktyce

to p to znajdzie si u gry,
bottom to znajdzie si na dole,

w drtoci liczbowe w tym przypadku okrelasz oddalenie ta od lewego


grnego naronika okna przegldarki.
W praktyce mona czy podane wartoci, dziki czemu obrazek moe si np. znale
w prawym dolnym naroniku.
body

{
background-image: u r lC tlo .g if);
background-repeat: no-repeat;
background-position: rig h t bottom:

}
Nieco inaczej bdzie wyglda zapis w przypadku, gdy zdecydujesz si na okrelenie
ta za pomoc wartoci liczbowych. Pozycja jest bowiem liczona wzgldem lewego
grnego naronika okna przegldarki. Jednostki, jakich uyjesz do pozycjonowania ta,
m og przybiera wartoci wzgldne lub bezwzgldne dokadny opis znajdziesz we
wstpie do tego rozdziau.
body

{
background-image: u r l ( t l o . g i f ) ;
background-repeat: no-repeat:
background-position: 2cm 2cm:

}
N a rysunku 4.15 wida przykad ta, ktre zostao ustawione w odlegoci 2 cm od
lewej i grnej krawdzi okna przegldarki.
Rysunek 4.15.
Przykad ta
pozycjonowanego
wzgldem lewego
naronika okna
przegldarki

Bartosz Danowski - Mozilla Firefox


_ T _ _____ .____________________ _________________________

Plik

Edycja

W id o k

H istoria

I2cm

Zakadki

Narzd

Rozdzia 4. Kaskadowe arkusze stylw

183

Wnioski
W swoich projektach moesz niemal dowolnie czy ta bdce kolorem lub obrazkiem.
body

{
background-color: black;
background-image: u r l( tlo .jp g ) ;

}
Specyfikacja nie przewiduje ustawienia dwch obrazkw w tle dla jednego elementu,
czyli nastpujcy listing jest bdny:
body

{
background-image: u r K tlo .jp g ) ;
background-image: u r l ( t lo l. jp g ) ;

}
Oczywicie, na jednej stronie dla kadego elementu moesz przypisa inny obrazek
w tle i to zadziaa, jednak moim zdaniem efekt bdzie mierny, by nie napisa tra
giczny. Wyjtkiem jest sytuacja w ktrej tworzysz zaawansowany i z gry przemy
lany projekt.
Pamitaj, e waciwoci ta dla jednego elementu moesz czy z formatowaniem
wygldu innych elementw strony. Nie jest tak, e to wykorzystane dla selektora
<body></body> uniem oliwia przypisanie dla tego selektora np. koloru tekstu czy te
wyrwnania zawartoci bloku prawego marginesu.
Tabela 4.6 . Zbiorcze zestawienie waciwoci koloru i ta
Deklaracja

Dostpne w artoci

color

nazwa lub warto koloru | in h e rit


pjco lo r: red:}
ul {color: #FF0000}

background-color

nazwa lub warto koloru | transparent | in h e rit


body{color: red:}
td {color: #FF0000}

background-image

url | none | in h e rit

background-attachment

scro ll | fixed | in h e rit

body{background-image: u r l( t lo . g if ) }
body {background-attachment: fixed}

background-position

l e f t | rig h t | center | top | bottom | wartoci liczbowe |


wartoci procentowe | in h e rit

background-repeat

repeat | repeat-x | repeat-y | no-repeat | in h e rit

body {background-position: bottom}


body {background-repeat: repeat-x}

background

background-color | background-image | background-repeat |


background-attachment | background-position
body {background: white U R L(tlo.gif) bottom rig h t}

184

Tworzenie stron WWW w praktyce

Marginesy i dopenienie
Specyfikacja kaskadowych arkuszy stylw okrela dwa rodzaje odstpw pomidzy
elementami. Pierwszym sposobem regulacji jest margines, natomiast druga metoda to
dopenienie, ktre bywa popularnie zwane marginesem wewntrznym.

Marginesy zewntrzne
Na zewntrzne m arginesy skadaj si nastpujce marginesy: prawy, lewy, grny
oraz dolny. Do okrelania marginesu uywa si cechy margin. Oglny schemat definicji
ma tu posta:
selektor

{
margin-strona: warto;

}
Zamiast sowa strona naley podstawi jedn z poniszych nazw, okrelajcych stron
okna przegldarki:
1e f t lewa strona,
ri ght prawa strona,
top gra,
bottom d.

Warto w tym przypadku przyjmuje wartoci liczbowe uzupenione o jednostki wzgld


ne lub bezwzgldne. Ciekawostk jest fakt, e szeroko marginesu moe przyjmowa
wartoci ujemne oraz e dla kadego z elementw strony margines moe mie inn
warto.
Poniej prosty przykad okrelenia marginesu caej strony.
body

{
m argin-left: lcm:
m argin-right: lcm;
margin-top: 2cm:
margin-bottom: 3cm;

}
W tym przykadzie ustawiem rne szerokoci marginesw, w zwizku z tym dla ka
dego elementu musiaem dokadnie okreli cech. Jednak na stronie, na ktrej wszyst
kie marginesy s identyczne, mona stosowa skrcony zapis, np.:
body

{
margin: lcm:

Rozdzia 4. Kaskadowe arkusze stylw

185

Powyszy listing ustawi margines o szerokoci 1 cm dla wszystkich bokw okna prze
gldarki. Zwr uwag na to, jaka to oszczdno kodu.
Ciekaw waciwoci marginesw jest to, e marginesy rnych elementw si sumu
j. Dokadniej mwic, jeeli ustawi si np. 11-procentowy lewy margines dla selektora
body, a nastpnie oddzielny margines o szerokoci 2 cm dla akapitw, to faktyczny od
stp od lewego brzegu okna dla akapitu bdzie wynosi a 11% + 2 cm (rysunek 4.16).
Bartosz Danowski - Mozila Firefox
Plik

Edycja

<S

Helion

Widok

Historia

Zakadki

ja
Danowslo

Disable- <3 Cookies-

Narzdzia

Pomoc

i im m

>> .

file:///C:/Users/8artelc/Deslrtop/Strona%20WWW/test.html

Hardware
. CSS* ~ l Forms-

Wiadomoci
Images* 0

Pozycjonowanie
Information-

/ Google Reader

Miscellaneous-

ING Online

Outline-

, Resize*

Materiay ksijri

Tools- p j View Source-

N agw ek stopnia pierw szego


Lorem ipsum dolor sit amet consectetur adipisicing eHt, sed do dusmod tempor incididunt ut
labore et doore magna aqua. Ut enim ad minim veniam, quis nostrud exercitation uBamco
laboris nisi ut aquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
vohiptate vet esse ciBum dolore eu fugiat nuBa pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

N agw ek stopnia pierw szego


Lorem ipsum dolor sit amet, consectetur adipisicing et, sed do eiusmod tempor incididunt ut
tabore et dolore magna aqua. Ut enim ad minim veniam, quis nostnid exercitation uBamco
iaboris nisi ut aquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
vohiptate vet esse dSum dolore eu fugiat nua pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt moffit anim id est laborum

Zakoczono

.............

(g ) P49*R*nk Comp $ 0 . 4 0 s ...

Rysunek 4.16. Przykad sumowania marginesw

Ujemna warto pozwala na przesunicie elementu poza domylnie zdefiniowany mar


gines, co mona wykorzysta np. do umieszczenia napisu w obszarze poza widoczn
czci okna przegldarki. Moe to by ciekawy motyw zdobniczy Twojej strony WWW.
Margines nadaje si rwnie do regulacji odstpw midzy elementami na stronie WWW.
Zamy, e ustawisz grny i dolny margines dla selektora p . Dziki temu masz mo
liwo kontroli odstpu midzy akapitami regulacji wiata strony.
Koniecznie uywaj marginesw do centrowania tabeli na stronie WWW. Przykad ta
kiego dziaania znajduje si poniej.

186

Tworzenie stron WWW w praktyce

table

{
m argin-left: auto:
m argin-right: auto:

Marginesy wewntrzne dopenienie


Margines wewntrzny na pierwszy rzut oka nie rni si niczym od uprzednio opisa
nego marginesu zewntrznego, jednak po dokadniej analizie okazuje si, e to dwie
zupenie rne rzeczy. Oglny przepis, pozwalajcy na stworzenie marginesu wewntrz
nego, ma posta:
selektor

{
padding-strona: warto;

}
Podobnie jak w przypadku ju opisanych marginesw zewntrznych, zamiast sowa
strona mona wpisa jed n z czterech dostpnych stron (oczywicie w jzyku an
gielskim): l e f t , r ig h t, bottom oraz top. Natomiast warto ma zawiera liczby dodatnie
lub ujemne oraz jednostki wzgldne lub bezwzgldne.
Do zrozumienia rnicy midzy marginesem zewntrznym a wewntrznym bdzie po
trzebny prosty przykad. Dla uwidocznienia rnicy pomidzy nagwkami dodatkowo
wczyem to.
N a rysunku 4.17 wida sytuacj, w ktrej zadziaay marginesy zewntrzne grny
i dolny. Zwr uwag na to, e to znajduje si dokadnie pod tekstem i brak dodatko
wego obramowania dookoa tekstu.
Teraz dla tych sam ych nagwkw zam iast marginesw zewntrznych ustawiem
wewntrzne.
hl

padding-top: lcm;
padding-bottom: lcm;

}
Porwnaj rysunki 4.17 oraz 4.18 i zwr uwag na to, e odlego midzy tami nie
rni si niczym od domylnego stanu, jaki moesz zaobserwowa w oknie przegl
darki po umieszczeniu w nim trzech nagwkw, natomiast odlego tekstu jest w tym
przypadku do znaczna i wynosi ponad 2 cm. Zauwa, e obramowanie dookoa tekstu
niejako si zwikszyo.
N a tym w anie polega rnica midzy zewntrznym i wewntrznym marginesem.
Pamitaj o tym, e stosujc kady z nich, moesz uzyska podobny efekt, jednak w prak
tyce oba typy znacznie si rni.

Rozdzia 4. Kaskadowe arkusze stylw

187

Bartosz Danowski - Mozilla Firefox


Plik

Edycja

Widok

Historia
J L

Zakadki
I

Helion

Danowski

Disable* &

Cookies* J CSS* S

Narzdzia

Pomoc

'W

fit e / / /C:/Users/Bartdc/Deslctop/Strona%20WWW/test.html

Hardware
Forms*

Wiadomoci

Pozycjonowanie

Images* C l Information*

Google Reader Lj

Miscellaneous*

ING Online

Outline*

2*

Resize*

Materiay ksiki
' Tools*

View Source*

Nagw ek stopnia pierw szego


iglwek stopnia pierw szego
N agw ek stopnia pierw szego

PageRank Compete

63405

Qf<

Rysunek 4 .1 7 . Przykad dziaania marginesw zewntrznych na nagwki stopnia pierwszego

Okrelajc wewntrzny margines, rwnie moesz stosowa zbiorczy zapis, ma on posta:


hl

{
padding: lcm:

Wnioski
Definicje marginesw oraz dopenienia moesz ze sob dowolnie czy, ale pamitaj
o tym, e faktyczna odlego bdzie sum wartoci dopenienia i marginesu.
Definicje marginesw za kadym razem m og by dowolnie uzupeniane przez inne
elementy kaskadowych arkuszy stylw.

188

Tworzenie stron WWW w praktyce

Ig | l l tSM l

Bartosz Danowski - Mozilla Firefox


Plik

Edycja
*

Helion

Widok
* ( g

Disable-

Historia

L-

Danowski
Cookies-

Zakadki

ULj

i 0

Narzdzia

Pomoc

fite///C :/U seiVB artik/D ktop/S trona% 20V \W W /tt.htm l

Hardware

!) Wiadomoci | L

CSS- {UD Forms-

Images- 0

} Pozycjonowanie
Inform ation-

| }>

:W

! f j ! Google Reader U ING Online

Miscellaneous-

Outline-

| Wikipedia

\i

* Resize-

Materiay ksiki
' Tools- Q

agw ek stopnia pierw szego

PagoRank Compete

Zakoczono

Rysunek 4 .1 8 . P rzykad dziaania m arginesw wewntrznych


Tabela 4.7. Zbiorcze zestawienie waciwoci marginesw
D eklaracja

Dostpne w artoci

margin-left

warto liczbowa \ warto procentowa | auto | in h e rit


p{m argin-left: lcm:}

margin-right

warto liczbowa \ warto procentowa | auto | in h e rit


p{m argin-right: 10;}

margin-top

warto liczbowa \ warto procentowa

auto | in h e rit

p{margin-top: 20px;}
margin-bottom

warto liczbowa \ warto procentowa

auto | in h e rit

p{margin-bottom: lcm:}
margin

margin-top | margin-right | margin-bottom | m argin-left


body{margin: lcm:}
body{margin: lcm 2 cm 3cm 4cm:}

0.600s

View Source-

8W *

Rozdzia 4. Kaskadowe arkusze stylw

1 89

Tabela 4.8. Zbiorcze zestawienie waciwoci dopenienia


Deklaracja

Dostpne w artoci

padding-left

warto liczbowa \ warto procentowa \ in h e rit


p{padding-left: lcm: }

padding-right

warto liczbowa \ warto procentowa \ in h e rit


p{ padding -rig h t: 10:}

padding-top

warto liczbowa \ warto procentowa | in h e rit


p{ padding -top: 20px:}

padding-bottom

warto liczbowa | warto procentowa | in h e rit


p{ padding -bottom: lcm;}

padding

padding-top. | padding-right | padding-bottom | padding-left


body{ padding: lcm:}
body{ padding: lcm 2 cm 3cm 4cm;}

Obramowanie elementw
Za pomoc kaskadowych arkuszy stylw mona kontrolowa obecno i rodzaj ob
ramowania np. bloku tekstu czy te tabeli. Odpowiednie polecenie ma posta:
selektor
{
border-strona: warto:

}
W tym przypadku zamiast sowa strona podstawiamy jedn z poniszych moliwoci:
1e f t lewa strona,
ri ght prawa strona,
top gra,
bottom d.
Warto okrela natomiast styl lub grubo obramowania. Innymi sowy, w praktyce
wczenie obramowania dla akapitu na stronie moe wyglda tak:
P

{
b o rde r-left: solid ;
border-right: solid ;
border-top: solid ;
border-bottom: so lid ;

Tworzenie stron WWW w praktyce

190

Oczywicie, mona rwnie uy zapisu skrconego:


P

{
border: solid ;

}
C iekaw ostkjest to, e pierwszy sposb definiowania obramowania nie dziaa w star
szych wersjach przegldarki Netscape Navigator, natomiast skrcony zapis nie sprawia
jej adnych problemw.

Styl obramowania
Obramowanie danego elementu lub tabeli moe przybra dowolny styl. Oglny schemat
odpowiedniego polecenia wyglda mniej wicej tak:
selektor

{
border-style: warto:

}
Warto w tym przypadku moe przybra jedn z poniszych form:
{
border-style: none;

}
Linia ramki jest niewidoczna:
{
border-style: hidden:

}
Linia ramki skada si z linii wykropkowanej (zaley od przegldarki):
P

{
border-style: dotted;

}
Linia ramki skada si z linii przerywanej:
{
border-style: dashed;

}
Linia ramki skada si z linii cigej:
P

{
border-style: solid:

Rozdzia 4. Kaskadowe arkusze stylw

191

Linia ramki skada si z podwjnej linii:


P

{
border-style: double:

}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P

{
border-style: groove;

}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P

{
border-style: ridge;

}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P

{
border-style: inset:

}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P

{
border-style: outset:

}
Na rysunku 4.19 wida przykad dziaania poszczeglnych rodzajw obramowania.
Pamitaj jednak, e przegldarki na rne sposoby interpretuj niektre style obra
mowania.
Stosujc odpowiedni konstrukcj stylw, mona kontrolowa wygld tylko niekt
rych krawdzi tabeli. Poniej zamieszczam odpowiednie polecenia.
Grna krawd:
border-top-style:

Lewa krawd:
border-le ft- s ty le :

Dolna krawd:
b o rd e r-b o tto m -sty le :

Tworzenie stron WWW w praktyce

192

Rysunek 4.1 9.
P rzykad dostpnych
stylw obramowania

Przykad obram ow ania - NONE.


Przykad obram ow ania - HIDDEN.


Przykad ob ram ow ania - DO TTED.

Prz^Wad ob ram ow ania - D ASH ED .

Przykad ob ram ow ania - SOLID.

|Przykad obram ow ania - D O U BLE.

|JPrzjkad ob ram ow ania - G RO O VE.

f[Przykad ob ram ow ania - INSET.


Przykad ob ram ow ania - O UTSET.

Prawa krawd:
b o rd er-righ t-style :

Oraz konkretny przykad:


hl

{
border-top-style: dashed:
b o rd e r-rig h t-style : double:

Szeroko obramowania
Obramowanie wybranych elementw moe mie rn grubo. Odpowiedni styl ma
nastpujc posta:
selektor

{
border-width: warto:

}
Warto w tym przypadku moe by dowoln dodatni liczb uzupenion o jednostki,
ktre opisaem na pocztku tego rozdziau.

Rozdzia 4. Kaskadowe arkusze stylw

193

Jeli chcesz kontrolowa szeroko wybranych krawdzi, musisz skorzysta z innej


konstrukcji.
Grna krawd:
border-top-width:

Lewa krawd:
border-left-w idth:

Dolna krawd:
border-bottom-width:

Prawa krawd:
border-right-width:

Przykad obiektu z ustawionymi rnymi grubociami krawdzi znajduje si poniej.


Dodatkowo zmieniem rwnie styl obramowania.
hi
{
border-top-width: lcm:
border-left-w idth: lmm:
border-bottom-width: 5mm;
border-right-w idth: lin :
b o rd e r-le ft-s ty le : solid:
border-rig ht-style : double:
border-top-style: dashed;
border-bottom-style: dotted;

Kolor obramowania
Ostatnim elementem obramowania, jaki mona kontrolowa, jest kolor. Do tego celu
suy polecenie border-color.
hl

{
border-color: red:
border-width: 3mm;
border-style: so lid :

}
Rwnie w tym przypadku mamy do czynienia z m oliwoci okrelania koloru tylko
wybranych krawdzi. Uywamy wtedy nastpujcych polece:
Grna krawd:
border-top-color:

Lewa krawd:
b o rd e r-le ft-c o lo r:

1 94

Tworzenie stron WWW w praktyce

Dolna krawd:
border-bottom-color:

Prawa krawd:
border-right-color:

Wnioski
Style odpowiedzialne za wygld obramowania moesz dowolnie ze sob czy, dziki
czemu strona bdzie wygldaa znacznie ciekawiej. Definiujc obramowanie dla ja
kiego elementu, moesz sprbowa za jednym razem zapisa kilka waciwoci. Oto
prosty przykad:
P

{
border: solid 3mm green:

}
Oglnie rzecz ujmujc, zasada zbiorczego zapisu jest nastpujca: najpierw podajesz
rodzaj obramowania, nastpnie jego szeroko, a na kocu kolor.
Oczywicie, nic nie stoi na przeszkodzie, by zbiorczy zapis stosowa dla wybranej
krawdzi, tak jak to przedstawiono na nastpnym przykadzie.
P

{
border-bottom: so lid lmm red:
border-right: so lid lmm red:

}
Kontrola wygldu obramowania jest szczeglnie przydatna podczas formatowania tabel.
W ystarczy odpowiednie style przypisa do selektorw ta b le oraz td zamiennie z th.
table

{
background-color: s ilv e r:
font-size: 12px;
color: black;
te x t-a lig n : center;

}
Ciekawostk jest to, e moesz okreli niektre elementy niejako dwa razy raz dla
caej tabeli i drugi raz dla komrki. Przyjrzyj si przykadowi.
table

{
background-color: navy:

}
td

{
background-color: s ilv e r;

Rozdzia 4. Kaskadowe arkusze stylw

195

Takie rozwizanie spowoduje utworzenie tabeli, ktra bdzie miaa szare to we wszyst
kich komrkach oraz granatowe linie podziau. Rozwizanie to pozwala na przygoto
wanie bardzo ciekawych tabel przy minimalnym nakadzie pracy.
W pierwszym rozdziale przy okazji omawiania tabel wspomniaem o trzech dodatko

wych znacznikach, ktre wprowadza nowa specyfikacja jzyka HTML. Mam tutaj na
myli <thead></thead>, <tbody></tbody> oraz < tfo o d > < /tfo o d> . Jeeli uyjesz tych
znacznikw, m oesz w ten sposb kontrolow a zaw arto wybranej czci tabeli
nagwka, ciaa lub stopki. W niektrych przypadkach rozwizanie to jest bardzo
wygodne i warto o nim pamita.
Za pomoc kaskadowych arkuszy stylw moesz rwnie kontrolowa wygld samej
tabeli. Mam tutaj na myli rodzaj obramowania czy te jego kolor.
W tym przypadku dla selektorw ta b le , td lub th moesz uy stylu odpowiedzialne
go za rodzaj, kolor i grubo obramowania. Style te opisaem w poprzednim podroz
dziale, dlatego teraz zamieszcz jedynie kilka przykadowych listingw wraz z rysun
kami obrazujcymi ich dziaanie.
table

m argin-left: auto;
margin-right: auto;
border: 2mm double green;

Rysunek 4.20 przedstawia tabel, ktra za chwil zostanie poddana formatowaniu za


pomoc CSS. Odpowiedni kod jest widoczny bezporednio pod rysunkiem. Natomiast
rysunek 4.21 przedstawia ostateczny efekt.
Rysunek 4.20.
Przykadowa tabela

T a b e l a 1.1. S p r ze d a p o m id o r w

1997

1998

1999

2000

Producent X

1 5 .2 3 4

1 8 ,1

2 ,2 2

0 ,1 1 9

Producent Y

1 ,0 1 0

1 1 ,1

1 3 ,1 3 3 1

1 4 ,2 2 5

Producent Z

2 4 ,1

2 8 ,1 2 2 1

3 2 ,1

3 0 ,1

Wszystkie w otoci f \ liczone w tys s a

TH. TD

{
border: dotted green;

}
TH.brak

{
border: none;
background-color: white:

}
TD.mini

{
b o r d e r : n one ;

196

Tworzenie stron WWW w praktyce

Rysunek 4.21.
P rzykad
zmodyfikowanej
tabeli

T a b e l a 1 .1 . S p r z e d a p o m id o r w
* * *MAM:!!
i 1 9 9 7 : 1 9 9 8 : 1 9 9 9 :: 2 0 0 0
* i i' IV r v; T T!t "*'i r / * 1 v
15.234 ;

18,1

::

0.119

; Producent Y
} 1/
1lyf*

1.010

11,1

i 13,1331 :!

14,225

: Producent Z "

24,1

28,1221

32,1

30,1

Producent X "
1SM BBBBEcl

2,22

::

W rzyrtku wntoci c%lic ssu w tys t

Tabela 4 .9 . Zbiorcze zestawienie waciwoci obramowania


Deklaracja

Dostpne wartoci

b o rd e r

border-style | border-width | border-color

border-top
border-right
border-left
border-bottom
b o r d e r - s t y le

border-left-style
border-right-style
border-top-style
border-bottom-style
b o r d e r - y v id t h

border-lefi-width
border-right-width
border-top-width
border-bottom-width
b o r d e r - c o lo r

border-left-color
border-right-color
border-top-color
border-bottom-color

p {border: 1cm so lid navy;}


div {b o rd e r-le ft: 2mm dotted s o lid :}

none | hidden | dotted | dashed | so lid | double | dot-dash |


dot-dot-dash | wave | groove | ridge | inset | outset | in h e rit
p {border-style: double;}
div {b o rd e r-le ft-s ty le : dashed; border-top-style: dotted;}
none | wartoci liczbowe \ wartoci procentowe | thin | medium | thick
| in h e rit
p {border-width: 20px;}
div {b o rd e r-le ft-w id th : th in ; border-top-width: th ic k :}

nazwa lub warto koloru \ transparent | in h e rit


p {border-color: navy;}
div {b o rd e r-le ft-c o lo r: green; border-top-color: red:}

Pozycjonowanie elementw
Za pomoc odpowiednich polece kaskadowych arkuszy stylw mona pozycjono
wa na stronie dowolne elementy tabele, nagwki, bloki tekstu czy te obrazki.
Specyfikacja CSS rozrnia nastpujce metody pozycjonowania:
s t a t i c (statyczne) kady element umieszczony na stronie ma nadane
pozycjonowanie statyczne; jest to jego domylne pooenie.
rei a ti ve (wzgldne) punktem odniesienia do okrelania pooenia wzgldnego
elementu jest jego domylna lokalizacja na stronie. Pozycjonowanie wzgldne
jest powizane bezporednio z konkretnym znacznikiem lub moe zosta
rozcignite za pom oc <di v></di v>.

Rozdzia 4. Kaskadowe arkusze stylw

197

position:relative;
top :1cm;
left :1cm;

absol ute (bezwzgldne) polega na okrelaniu dokadnego pooenia elementu


wzgldem lewego grnego naronika okna przegldarki. Punkt ten przyjmuje
wsprzdne (0;0), a ustawianie elementw polega na wyznaczaniu,
w wirtualnym ukadzie, wsprzdnych pozycji lewego grnego rogu
pozycjonowanego elementu.

position:absol ute;
left:80px;
top:80px;

}
fixed (ustalone) jest odmian pozycjonowania bezwzgldnego, jednak element,
ktrego dotyczy, zawsze pozostaje w widocznej czci okna przegldarki.
W praktyce wyglda to tak, jakby na stronie zostaa zastosowana ramka.
div.lewa

{
position:fixed:
top:10px:
width:180px;

}
Przyjrzyj si poniszym przykadom arkusza oraz rysunkom 4.22 i 4.23
mam nadziej, e dziki temu zauwaysz rnic midzy pozycjonowaniem
bezwzgldnym i wzgldnym.
di v

{
position: absolute;
top: lcm;
le f t : lcm;

Rysunek 4.22.
Elementy (nagwek
oraz blok tekstu)
na strome zostay
ustawione w sposb
bezwzgldny

3 T ytu S tro n y W W W - M icro so ft In te rn e t Ex p lo rer


W idok

Ulubione

N a rzdzie

Pomoc

\W yszuka)
A d re s

; f i Ulubione

^ M u ltim e d ia

E:\MoJe dokumenty\l - HElION\ABC - CSS\html\szabton.html

N o rto n Antivirus
Online

Nagwek stopnia pierwszego


Przykadowy tekst pozycjonowany wzgldnie Przykadowy tekst pozycjonowany wzgldnie
Przykadowy tekst pozycjonowany wzgldnie Przykadowy tekst pozycjonowany wzgldnie
Przykadowy tekst pozycjonowany wzgldnie

198

Tworzenie stron WWW w praktyce

{
position: re la tiv e :
top: lcm;
le f t : 1cm:

}
Rysunek 4.23.
B lok tekstu zosta
ustawiony na stronie
w sposb wzgldny

3 T y tu S tr o n y W W W
PRk

E d y c ja

W id ok

M ic r o s o ft In te r n e t E x p lo re r
Ulubione
21

A d re s
c z a

N a rzdzia

Pomoc

W y s zu k a j

[ j j Ulubione

f M ultim edia

j^j E :\M o je do k um en ty \! - H E LIO N \A BC - CSS\htm l\szablon.htm l


Ig^ C D R info

) benchm ark.pl

P C .com .pl

g J J a m a M a st a h a

j| | | |

3
'^ ]B S K Online

[w j * d
No rto n Antivirus

] In fo s e e k

g ] Helion

N agw ek stopnia pierwszego


przykadowy tekst pozycjonowany wzgldnie Przykadowy tekst pozycjonowany wzgldnie
Przykadowy tekst pozycjonowany wzgldnie Przykadowy tekst pozycjonowany wzgldnie
Przykadowy tekst pozycjonowany wzgldnie

4J G o tow e

| f M j kom puter

Okrelanie pozycji
Niezalenie od metody ustawiania elementw na stronie ich pozycja jest okrelana za
pom oc polece l e f t , r ig h t, to p oraz bottom, uzupenionych o warto liczbow lub
procentow. Poniej zamieciem kilka prostych przykadw:
P

{
position: re la tiv e ;
top: lcm;
le f t : lcm:

}
div.lewa

{
p o sitio n :fixe d ;
top:10px;
width:180px:

Wymiarowanie elementw
Dla wybranych elementw mona rwnie zdefiniowa wysoko oraz szeroko. Za
okrelanie tych rozmiarw odpowiadaj dwa polecenia: w id th i h e ig ht. Przykad uy
cia wymiarowania elementu znajduje si poniej.

Rozdzia 4. Kaskadowe arkusze stylw

199

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=IS0-8859-2">
<style type="text/CSS">
p.jeden

{
position: absolute:
le f t : 10px;
top: 1cm:
te x t-a lig n : ju s tify :
border: 1mm so lid :
width: 250px:

}
p.dwa

{
position: absolute;
le f t : 300px;
top: lcm:
te x t-a lig n : ju s tify ;
border: 1mm solid;
width: 250px;

}
< /s ty le>
</head>
<body>
<p class="jeden">Przykadowy blok tekstu...</p>
<p class="dwa">Przyk?adowy blok tekstu...</p>
</body>
</html>

Na rysunku 4.24 przedstawiem dwa bloki tekstu, ktrych szeroko zostaa okrelona
na 250 pikseli. Dodatkowo uyem jeszcze polecenia border, by pokaza, e s to dwa
bloki zupenie niezalene od siebie.
Rysunek 4.24.
Przykad
wymiarowania
elementw

i M ozilla Firefox
Plik

Edycja

Widok

mm
Historia

Zakadki

Narzdzia

Pomoc

f ile :///C :/ Users/Bartek/Desktop/Strona% 20 W W W /te s tl .h tm l

lip Danowski

Helion

Disable* &

3 Hardware

Cookies* _ J CSS* (D Forms*

Lorem ipsum dolor sit amet, consectetur


adipisicing elit, sed do eiusmod tempoi
incididunt ut labore et dolore magna
akqua. Ut enim ad minim veniam, quis
nostrud exercitation uamco laboris nisi ut
akquip ex ea commodo consequat Duis
aute irure dolor in reprehenderit
vohiptate vdit esse ciflum dolore eu fiigiat
nuQa pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui
officia deserunt moit anim id est
laborum.

Wiadomoci O
Images*

Pozycjonowanie
Information*

f l 1Google Reader Q ING Online

Miscellaneous*

Lorem ipsum dolor sit amet, consectetur


adipisicing elit, sed do eiusmod tempoi
incididunt ut labore et dolore magna
akqua Ut enim ad minim veniam. quis
nostrud exercitation uamco laboris nisi ut
aliquip ex ea commodo consequat Duis
aute irure dolor in reprehenderit
vohiptate vekt esse cilhim dolore eu fugiat
nua pariatur Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui
officia deserunt molkt anim id est
laborum.

Outline* * * Resize

200

Tworzenie stron WWW w praktyce

Pywanie i tamowanie elementw


Do dugo zastanawiaem si, czy opis pywania elementw umieci w podrozdziale
omawiajcym kontrol ukadu strony. Uznaem jednak, e skoro dziki sterowaniu py
waniem kontrolujemy struktur witryny, to ten podrozdzia jest najbardziej odpowiedni.
Pywanie elementw to nic innego jak kontrola sposobu oblewania jednego elementu
przez inny. Chyba najbardziej znanym przykadem pywania jest obrazek oblany z jednej
ze strony przez blok tekstu.
Do kontrolowania oblewania uywamy polecenia f 1oat, ktremu moemy przypisa
jedn z trzech wartoci: l e f t , r ig h t lub none.
<img src="obrazek.jpg" style="float:left;">
<img src="obrazek.jpg" style="float:nght;">
<img src="obrazek.jpg" style="float:none;>

Oczywicie, tekstem moemy oblewa nie tylko obrazki, ale rwnie inne elementy.
Na rysunku 4.25 zamieciem przykad, w ktrym tekst oblewa zawarto znacznika
<d iv> < /div> .
Danowski Mozilla Firefo*
Plik

Edycja

Widok

Historia

* ./ - i*: v j Haiion
. .

t-2 Danowski

;! Disable* Q, Cookies'

Zakadki

Narzdzia

Pomoc

j| http d l danowski.pt/ksazki/wedtug-terii/rtandarri/pozycjonowanie-j-optymafaaga-stron-wo
J Hardware
CSS

J Wiadomosci

Forms

; j filei.V/C-yUsers/...20WWW/testl html

Images-

Pozycjonowame

Information

_*! Google Reader j ING Online


...

Miscellaneous

Outline-

j W * ; Bartosz Danowski

J Materialy
ksiazki

t, Resize

Slowntto

Tools , - View Source-

Programy
-------

Options t /

[/)] Pozycjonowanie I optymaiizacja s t_ y |

Kategorie

Bestseller Wydawnictwa
Helion
czerwiec 2007
Pozycjonow anie

P r a k ty c z n y p rz e w o d n ik po

stron WWW

In te rn e c ie

J M TO E MOI

Skd wyszukiwarki bior


informacje o wywietlanych
stronach?

Jakich dodatkowych technik


promocji uy do
zwikszenia ruchu na strome
i zwizanych z tym zyskw?

* Internet

i o p ty m a liz a c ja

s k u te c z n e } p ro m o c ji w

Jak sprawi, aby Twoja firma


pojawiaa si w wynikach
przed konkurencj?

__________

Fotografia cyfrowa

Sk V I

+ir

* Komputer PC
Konfiguracja

1optymalizacja

<
Monta 1naprawa
Podkrcanie i tuning
* Monta wideo
* Nagrywanie pyt

Strona domowa ksiki


Spis treci
ISBN: 978-83-246-0690-0
Format: B5, stron: 264
Data wydania: 2007-06-12
Fragment ksiki w PDF

Wyobra sobie, e w trakcie


surfowania po Internecie znalaze
ciekaw ofert. Po pewnym
Cena: 39.90 zl
czasie chcesz w rci na stron,
Dodaj do koszyka
na ktrej znajduje si interesujcy
Ci produkt, ale nie pamitasz jej
adresu ani nazwy firmy. Wpisujesz
w wyszukiw arce nazw przedmiotu, ale zam iast szukanej witryny

pojawiaj si setki innych. Zniecierpliwiony kupujesz produkt u


innego sprzedawcy. Nie chcesz, aby c o podobnego spotkao
Twoich klientw? Zainteresuj si pozycjonowaniem stron, czyli
technikami poprawiania pozycji witryny w wynikach
w yw ietlanych przez wyszukiwarki.

* Programy biurowe
Systemy operacyjne
* Tworzenie stron WWW
* W edug serii

ABC
wiczenia
Ebooki
Ilustrowany przewodnik
Kurs
k Po prostu
Standard
0

Rysunek 4 .2 5 . Przykad znacznika <div></div> oblanego przez tekst

Comp*. } 3.969s

Rozdzia 4. Kaskadowe arkusze stylw

201

Podczas tworzenia stron WWW czasem chcemy, by jaki element nie by oblany. Wtedy
z pomoc przychodz nam polecenie e le a r i wartoci l e f t , r ig h t, both oraz none.
<hl s ty le = " c le a r:le ft;>

Poniszy przykad prezentuje tabel oblan przez blok tekstu oraz nagwek stopnia
pierwszego.
<html>
<head>
<meta http-equiv="Content-type content="text/html ;charset IS0-8859-2">
<title>Tytu? Strony WWW</title>
<style type="text/css">
di v

{
width:400px:

}
td

{
border:solid lpx black;

}
table

{
width:200px;
height:400px;
f lo a t : le f t ;

}
</style>
</head>
<body>
<div>
<table>
<tr>

<td>l</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
<p>Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. </p>
<hl>Nagwek HI, ktry ma znale si pod tabel</hl>
</body>
</html>

Korzystajc z funkcji e le a r, moemy wymusi, aby nagwek stopnia pierwszego


znalaz si bezporednio pod tabel i nie oblewa jej, jak to wida na rysunku 4.26.
Odpowiedni wpis do arkusza stylw ma posta:
hl

{
c le a rile ft:

202

Tworzenie stron WWW w praktyce

Rysunek 4.26.
P rzykad dziaania
stylu elear
1

Przykadowy bok tekstu


oblewajcy tabel Przykadowy
blok tekstu oblewajcy tabel
Przykadowy blok tekstu
oblew ajcy tabel. Przykadowy
blok tekstu oblewajcy tabel
Przykadowy blok tekstu
oblewajcy tabel. Przykadowy
blok tekstu oblewajcy tabel
Przykadowy blok tekstu
oblewajcy tabel. Przykadowy
blok tekstu oblewajcy tabel
Przykadowy blok tekstu
oblewrajcy tabel. Przykadowy
blok tekstu oblewrajcy tabel.

Nagwek H I, ktry ma
znale si pod tabel
Oczywicie, w zalenoci od uytej wartoci, moemy tamowa pywanie elementw
z prawej ( r ig h t ) , lewej ( l e f t ) lub obu stron jednoczenie (both).

Kolejno nakadanych elementw


Przy nakadaniu elementw nasuwa si pytanie, czy nie ma moliwoci okrelenia ko
lejnoci poszczeglnych warstw. Ot kaskadowe arkusze stylw wprowadzaj spe
cjalne polecenie z - index, za pom oc ktrego moesz kontrolowa kolejno warstw.
Przyjrzyj si listingowi przykadu z rysunku 4.27 i zwr uwag na sposb zastosowa
nia wspomnianego elementu z-in d e x.
P

{
position: absolute:
left:80px;
top: 80px;
font-size : 50pt:
font-weight: bold;
color: black;
z-index: 1:

}
p#cien

{
position: absolute;
left:88px;
top: 88px;
fon t-size: 50pt;
font-weight: bold;

Rozdzia 4. Kaskadowe arkusze stylw

Rysunek 4.27.
Ustalanie kolejnoci
nakadanych
elementw

203

Wydawnictwo

HELION

color: s ilv e r:
z-index: 2:

}
plwydawnictwo

{
position: absolute:
left:80px:
top: 60px:
font-size: 20pt:
font-weight: bold;
fo n t-style : it a lic :
color: black:
z-index: 3:

Wnioski
Jak si zapewne domylasz, pozycjonowanie elementw pozwala Ci na dowolne okre
lenie wszystkich elementw na stronie WWW, a co za tym idzie, masz ogromn kon
trol nad caoci. Pozycjonowanie w moim odczuciu jest rozwizaniem na miar
wprowadzenia tabel i oferuje znacznie wiksz swobod tworzenia. Jednak zanim opu
blikujesz stron wykonan w ten sposb, musisz j dokadnie sprawdzi, by pniej
nie okazao si, e sjakie problemy w poszczeglnych przegldarkach.

Tworzenie arkusza stylw


za pomoc edytora kED
Tworzenie zewntrznego arkusza lub dodawanie stylw bezporednio do dokumentu
HTML (XHTML) moemy usprawni dziki moliwociom, jakie ofemje edytor kED.
Poniej opisaem moliwoci, jakie otrzymalimy z chw il instalacji promowanego
przeze mnie edytora.
Wsparcie dla CSS oferowane przez kED skupia si na dwch rzeczach. Po pierwsze,
edytor pozwala na skorzystanie z szablonu gotowego zewntrznego arkusza, w ktry
wprowadzamy tylko niezbdne poprawki. Po drugie, kED automatycznie zamyka na
wiasy {}, w ktrych spisujemy definicje stylw. M oemy rwnie skorzysta z po
mocy i jednym klikniciem myszy wstawi potrzeb definicj stylu.
Zacznijmy od korzystania z gotowego szablonu. Wystarczy, e z klikniesz w menu Plik,
a nastpnie wybierzesz opcj Nowy z szablonu i Szablon arkusza CSS (rysunek 4.28).

204

Tworzenie stron WWW w praktyce

kD 2.1.4.0 - bcz_nazwy
PiiiTl Edycja

Szukaj

Nowy plik

Now y z szablonu

XHTML

PHP

JavaScript

Opcje

Ctrl+N

C3 Otwrz plik...

Pomoc

li I

i 1!.

C tr* 0 >

L? Ostatnio uywane
| | Otwrz ponownie

XHTML 1,0 Frameset

S hift* C trlfO

Zapisz plik

X F tT M L U

Ctr+S

WML

S hift* Ctr+S

Kana RSS

Szablon uytkownika

Zapisz plik jako...

Zapisz wszystkie pliki

M Szablon arkusza CSS


a,

ta h o m a ,

a r ia l,

H e lv e tic a ,

s a n s - s e r if;

Zapisz otwarte pliki ja ko projekt...

Podgld dokumentu
S 3 Zamknij plik

Zamknij wszystkie pliki

p a dl a i nn gg : O
px;
f o n t - s i z e : le m ;
t e x t - a lig n : le f t ;

S hift* C trl* W

i mg
{ b o r d e r : O p x;

Drukuj dokument...

Kolorowanie skadni
Zmie stron kodow...

hi*
{ f o n t - s i z e : 1 .4 e m ;
f o n t - w e ig h t : b o ld ;

F4

| | Sprawd poprawno dokumentu...


Zamknij program

Tffrargmr-TTpy

C trl* W

S hift* C trl* V
Alt+F4

h2
{ fo n t- s iz e :

1 .2 e m ;

1____________

Rysunek 4.28. Wbudowany szablon arkusza CSS


Tabela 4 .1 0 . Zbiorcze zestawienie waciwoci pozycjonowania i wymiarowania elementw
Deklaracja

Dostpne w artoci

position

s ta tic | re la tiv e | absolute | fixed | in h e rit

left

auto | warto liczbowa \ warto procentowa | in h e rit

top

auto | warto liczbowa | warto procentowa | in h e rit

p (position: absolute;}

p ( le f t : 1cm;}

p (top: 1cm:}
bottom

auto | warto liczbowa \ warto procentowa | in h e rit


p (bottom: 1cm;}

right

auto | warto liczbowa | warto procentowa \ in h e rit


p (rig h t: 1cm:}

width

warto liczbowa \ warto procentowa | auto | in h e rit


p (width: lOOpx:}

height

warto liczbowa \ warto procentowa \ auto | in h e rit

z-index

auto | warto liczbowa okrelajca pozycj w stosie | in h e rit

flo a r

l e f t | rig h t | none | in h e rit

clear

l e f t | rig h t | none | both | in h e rit

p (height: lOOpx;}
p (z-index: 1;}

img ( f lo a t : r ig h t:}

hi (cl ear: r i g h t:}

205

Rozdzia 4. Kaskadowe arkusze stylw

Gotowy arkusz warto podda wasnej obrbce, tak by odpowiada potrzebom. Do


kadniej mwic, szablon mona traktowa jako punkt wyjcia do dalszych dziaa.
Pracujc ze stylami, warto pamita o tym, e kED daje szybki dostp do listy stylw
i umoliwia ich wstawienie do dokumentu. W ystarczy, e w lewej kolumnie przej
dziesz do zakadki ciga i z listy wybierzesz opcj Waciwoci i wartoci CSS. Dalej
wystarczy ju tylko ustawi kurs w miejscu, gdzie ma zosta wstawiona odpowiednia
definicja stylu, odszuka j na licie po lewej stronie i dwukrotnie klikn lewym przy
ciskiem myszy.

bez_nazwy (VWn) Q j

b o r d e r - w id t h

Waciwoci i wartoci CSS

;i| azimuth:
v background:
v, bac kg round-attachauj
background-colcr:
,i background-image:
. background-positioi
.. background-repeat:
border:
border-widt^i
her dr-st j
inherit
$ border-collapse:
border-color:
border-spacing:
border-style:
border-top:
3, border-right:
3; border-bottom:
border-left:
x border-top-color:
bcrder-nght-color
($; border-bottons-colo:
border-left-color:
border-top-style:
k n r r t T - r i a h r r v l m

Podgld
INS

( A - ; N U M R o z m ia r 4 B (0,02KB)

Rysunek 4 .2 9 . Korzystanie z pom ocy wbudowanej w edytor kED

K :1 5 ,W :3

206

Tworzenie stron WWW w praktyce

Rozdzia 5.

Praktyczny projekt.
Moja strona domowa
Mamy za sob niezbdn cz teoretyczn, nadszed zatem czas, by zaj si prak
tycznym przygotowaniem strony domowej. M am nadziej, e zdajesz sobie spraw
z tego, e nie wystarczy nauczy si skadni jzyka HTML (XHTML) czy CSS, by do
brze przygotowywa strony. Sprawa nie jest tak prosta, jak to si moe wydawa, po
niewa tworzenie stron WWW wymaga praktyki. Oczywicie, bez prb i bdw nie
zdobdziesz dowiadczenia, dlatego dokadnie czytaj wszystko, co zawieraj strony
tej ksiki. Mam nadziej, e dziki kolejnym rozdziaom zdobdziesz wiele wanych
informacji i bdziesz mg bardziej wiadomie projektowa strony.

Dlaczego jest mi potrzebna


strona WWW?
Zanim zaczniesz tworzy stron domow, warto zastanowi si, czy jest Ci ona po
trzebna. Moim zdaniem nie ma sensu projektowa witryny domowej, jeeli jest to
jednorazowy przypyw entuzjazmu, ale nie masz wizji rozwoju projektu. W sytuacji,
gdy od razu zakadasz, e po publikacji nie bdziesz si wicej zajmowa swoj stron,
w moim odczuciu taka praca nie ma wikszego sensu.
Zastanw si, czy nie szkoda Twojego czasu na nauk jzyka oraz innych zasad zwi
zanych z projektowaniem stron WWW. Jeeli planujesz publikacj swojego projektu
na jednym z darmowych serwerw, musisz wzi pod uwag fakt, e jednym z ogra
nicze takiego rozwizania jest konieczno regularnego czytania poczty stanowicej
integraln cz caego konta. Jeeli nie masz zamiaru czyta poczty i godzisz si z tym,
e Twoja strona zniknie z sieci za kilka tygodni, od razu zrezygnuj z pomysu tworze
nia strony WWW.

208

Uwaga

Tworzenie stron WWW w praktyce

Dzisiejszy poziom rozwoju usug internetowych je st na tyle zaawansowany, e do


posiadania wasnej strony nie je st wymagana znajomo XHTML czy CSS. Google
udostpnia doskonae narzdzie do wizualnego projektowania stron, a bogi stay
si tak popularne, e po prostu wypada je prowadzi. To wszystko sprawia, e pro
jektowanie wasnej strony domowej staje pod znakiem zapytania i zmusza do za
stanowienia si nad skorzystaniem z gotowych rozwiza.

Jeeli planujesz przygotowa stron dom ow i chcesz to zrobi profesjonalnie, warto


zastanowi si nad wykupieniem konta patnego, ktre oferuje znacznie wicej mo
liwoci anieli jego bezpatny odpowiednik. W moim przypadku postanowiem wyku
pi konto patne oraz wasn domen, poniewa zamierzam prowadzi stron na po
w anie i chc by niezaleny od mojego dostawcy usug internetowych, a wasna
domena daje mi taki komfort. Nie interesuje mnie rwnie zaleno od platform blogowych czy innych nowoczesnych rozwiza. Po prostu chc, aby moje internetowe
oblicze byo inne od caej reszty.
M am nadziej, e ju w ystarczajco Ci zniechciem do posiadania wasnej strony
i jeeli nadal czytasz to opracowanie, pora przedstawi korzyci, ktre wynikaj z po
siadania wasnej strony WWW.
Jak zapewne widzisz, pisz ksiki, artykuy oraz mam szereg zainteresowa, ktrymi
chciabym si podzieli z innymi ludmi. Uwaam, e strona da mi moliwo uzu
peniania informacji zawartych w rnych publikacjach. Wychodz z zaoenia, e my
li si jest rzecz ludzk, ale niestety w ksice po jej wydaniu nie mam ju moliwoci
naniesienia stosownych poprawek. Natomiast posiadajc swoj stron WWW, na ktrej
dla kadej ksiki wydziel oddzielny obszar, mog uzupenia, poprawia i dodawa
nowe przykady. Zakadam, e wydawane ksiki bd zawieray stosowne informa
cje o mojej stronie WWW, dziki czemu kady z Czytelnikw bdzie wiedzia, gdzie
mnie szuka. O czywicie, na umieszczeniu mojego adresu internetowego w ksice
si nie skoczy, a strona zostanie zarejestrowana, prawidowo wypozycjonowana i wy
promowana.
Planuj wykorzysta swoj stron W WW jako dodatkowy pomost pomidzy Czytel
nikiem czy te Internaut a mn. Zakadam, e dziki temu uda mi si zdoby szereg
ciekawych informacji, zapozna si z krytyk oraz propozycjami, co w konsekwencji b
dzie prowadzio do powstawania nowych, lepszych i z pewnoci ciekawszych ksiek.
Poza m oj ksikow dziaalnoci chciabym za pom oc swojej strony wyrazi po
gldy na zagadnienia, ktre nie zawsze nadaj si na temat ksiki czy te artykuu.
Strona domowa bdzie rwnie idealnym miejscem, w ktrym bd mg si przed
stawi wiatu, umieci swoje zdjcia i napisa kilka sw o sobie, dziki czemu nie
bd jednym z wielu milionw anonimowych uytkownikw intemetu.
Mam nadziej, e moja strona domowa z czasem bdzie si coraz lepiej rozwijaa i pew
nego dnia stanie si zbiorem solidnych i ciekawych informacji na tematy zwizane
z tw orzeniem stron WWW oraz innymi moimi zainteresowaniami; jednak zanim to
nastpi, czeka mnie jeszcze sporo pracy.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

209

Jeeli po przeczytaniu tego wywodu na temat posiadania strony WWW nadal uwaasz,
e chcesz j mie, pora zastanowi si nad kilkoma wanymi sprawami.

V
Uwaga

Zanim zaczniesz projektowa stron, zapoznaj si z dodatkiem, w ktrym znalazy


si zestawienia najwaniejszych informacji na temat rozdzielczoci, przegldarki czy
palety kolorw. Moim zdaniem warto wiedzie, czego uywaj obecnie internauci,
i koniecznie naley na bieco te informacje ledzi.

Gromadz materiay
Zanim zaczniemy prac z edytorem i kodem, warto zebra wszystkie materiay, tak
by pniejsza praca moga przebiega gadko i bez komplikacji. Osobicie bardzo nie
lubi robi przerw wynikajcych z braku odpowiedniego tekstu na jedn z podstron.
Przygotowanie odpowiedniego tekstu wybija mnie z rytmu i zazwyczaj nie potrafi
stworzy czego dobrego na zawoanie. W efekcie praca przeciga si na nastpny
dzie, a kady pretekst jest dobry, by nie usi przed komputerem.
W zwizku z tym zanim zaczniesz tworzy stron, spokojnie usid i przemyl, co
chcesz na niej umieci. Nastpnie zbierz lub przygotuj odpowiednie teksty, zdjcia
lub inne elementy przewidziane do publikacji. Pamitaj, e przygotowanie tych mate
riaw jest nieuniknione i prdzej czy pniej bdziesz musia to zrobi.
Postanowiem, e kolejna wersja mojej strony WWW bdzie zawieraa nastpujce dziay:
Strona gwna przejcia do poszczeglnych dziaw, informacje o nowociach
na stronie, formularz umoliwiajcy zapisanie si na m oj list mailingow,
za pom oc ktrej bd informowa staych goci o zmianach na stronie.
Ksiki krtki opis kadej pozycji, poprawki, przykady oraz dodatkowe
informacje, ktre nie znalazy si w ksice.
Artykuy dzia ten ma zawiera kopie moich artykuw, ktre zostay
opublikowane w prasie komputerowej. Poza tym znajd si tam zwizane
z moimi zainteresowaniami artykuy, ktre nie byy nigdzie publikowane,
a uznaem, e warto je gdzie zaprezentowa. Planuj rozbudowywa t cz
strony o nowe opracowania w miar swoich moliwoci i wolnego czasu.
O mnie skrcony yciorys, zdjcia, odnoniki do ciekawych stron zwizanych
z miastem, w ktrym mieszkam, informacje o ulubionych filmach, muzyce,
ktrej sucham, i wszystkim, co ma na mnie mniejszy lub wikszy wpyw.
Przyjazne strony zbir odnonikw do innych ciekawych stron.
Kontakt formularz pozwalajcy na nawizanie ze m n kontaktu.
Sklep prosty sklep w ktrym znajdzie si wykaz wszystkich moich ksiek.
Udao mi si okreli mniej wicej zawarto mojej strony, a teraz duga droga do
skompletowania zawartoci poszczeglnych dziaw.

2 10

Tworzenie stron WWW w praktyce

Tworzc teksty na potrzeby strony WWW, musisz pamita o tym, e dziaanie to nie
jest takie proste, jak si moe wydawa. Badania przeprowadzone na internautach ju
dawno wykazay, e m aj oni specyficzne podejcie do czytanego tekstu. Piszc tekst
przeznaczony do publikacji, musisz pamita o kilku poniszych zasadach.
Tekst powinien by krtki i zwarty. W intemecie ludzie nie przepadaj
za czytaniem dugich elaboratw i wol, gdy si im dostarcza sam esencj.
Najwaniejsze elementy powinny znajdowa si w pocztkowej czci tekstu.
Internauci bardzo rzadko przewijaj stron, aby zobaczy, co znajduje si poza
obszarem widocznym na ekranie monitora. Na rysunku 5.1 przedstawiem
przykad dugiej strony, ramka oznacza obszar widoczny na ekranie monitora.
Staraj si tak skonstruowa tekst, aby to, co wida, zachcio internaut
do przewinicia strony.
Staraj si uywa sw kluczowych w tekcie. Z myl o dobrej pozycji strony
w wyszukiwarce staraj si uywa w tekstach przeznaczonych do publikacji
na stronie sw kluczowych, pod ktrymi strona ma by widoczna. Tekst musi
by naturalny i przede wszystkim kierowany do czowieka, a nie robota
wyszukiwarki. Wicej informacji na temat sw kluczowych oraz ich doboru
znajdziesz w dalszej czci ksiki.

Struktura witryny
Teraz przyszed moment, w ktrym musimy popracowa przez chwil z kartk papie
ru, poniewa potrzebna jest jasna i przemylna struktura witryny w celu rozplanowa
nia systemu nawigacji. N a rysunku 5.2 przedstawiem wstpny schemat rozwizania
problemu nawigacji na mojej starej stronie.
Przyjrzyj si rysunkowi 5.2 i zwr uwag na to, e wszystkie linie czce poszcze
glne dziay s odpowiednikami odsyaczy. Moesz przyj, e niemal kady z tych
odnonikw dziaa w dwie strony. cilej rzecz biorc, ogldajcy stron zawierajc
mj yciorys po klikniciu odsyacza do moich zainteresowa muzycznych i filmowych
zawsze bdzie mia moliwo powrotu do poprzednio ogldanej strony. Poza tym
zaplanowaem rwnie moliwo swobodnego przejcia na kolejne poziomy. Skompli
kowana struktura odsyaczy pomidzy podstronami mojego serwisu jest sporym wy
zwaniem, gdy atwo pogubi si w tej pltaninie, co prowadzi moe do sytuacji,
w ktrej wystpi zerwane, puste odnoniki prowadzce donikd.
Pamitaj, e im lepsza struktura wewntrznych odnonikw, tym lepiej dla Ciebie.
Dokadniej mwic, internauta bdzie mia wicej swobody w dotarciu do poszcze
glnych dziaw witryny, a robot wyszukiwarki sieciowej dokadniej zindeksuje po
szczeglne czci strony.

211

Rozdzia 5. Praktyczny projekt. Moja strona domowa

Rysunek 5.1.
Przykad dugiej
strony, dodatkowo
za pom oc ramki
oznaczyem
obszar widoczny
na pierwszym
ekranie monitora

Bartosz Danowski

l i t e r a t u r a i n f o r m a t y c z na
SOom gMwna II KsIZki j| artykuy |f O mftls l'ir.yjjziie attony | Kontakt ' 'Mkd I
nwmyki.pl Standard

Kategorie

Bestseller Wydawnictwa
Heiofi
czerw iec 2007

- Fotografia cyfrowa

* Konfiguracja i optymakzac

Skdwyszukiwarki bior
aiformacje o wywietlanych

v Monta i naprawa
Podkrgcanie i tuning

Jaksprawie, aby Twoja firma

Monta wideo
przed konkurencja?

- Nagrywanie pyt

i zwizanych z tym zyskw'


surfowania po Internecie znataziei
ciekaw ofert. Po pewnym
u ktre] znajduje si interesujcy
O produkt, ale nie pemitasz jej
y tumy Wpisujesz
wyszukiwarce narw przedmiotu,
ojawiaj si setki innych.

Fragmont ksiki w PDF


C e n a : 39.90 z
6 Oucie] do koszyka
A Hiooli
mast szukanej witryny
kupujesz produkt u

Jak to si robi" zrozumiesz, jak dziaaj wyszukiwarki, jak wpywa


to na kolejno wywietlania odnonikw do znalezionych
nmtenaw, a pizode wszystkim jak uZy tej wiedzy do
tworzenia stron, ktre bd zajmoway wysokie pozycje w
popraw funkcjonalnoci witryny or
a osb odwiedzajcych strony

Dziaanie wyszukiwarek
Dobr odpowiednich stwkluczowych
Poprawny uktad elementw stron
UZywame odsyaczy wewntrznych 1z
Uatwianie indeksacji witryny
Monitorowanie ruchu na stronie i je) popularnoci
Zapewniam funkcjonalnoci witryny
Dodatkowe rechndn promocji stron
Wystrzeganie si nieuczciwych pc
Wyprzedi konkurencj I uatw swoim ki
swojej oferty.
Zobacz to:
Darmoweopogremowanie. Leksykon
komputer PC pie.uln* kupujcego

Liczba komentarzy: 4
Cd nowego * Bartosz Oanowii f l
S Pozycjonowanie 1 optymakzacja st
si robi obszerny poradmfc na temat
optymalizacji stron WWW. Wnajbliszych dniachksika
powinna pojawi si w sprzeday. Uwag jest to projekt
nad ktrym pracowaamwsplnie z Michaem. j
Nowa ciekawa puu-nocjia Bartosz Oanows*i H

iw I U'*
le j ksika Pozycjonowanie 1optymakzacja stron wyrw.
Jak s* to rotajest objta now i mamnadziej ciekaw
- promocj. (...)

l.,l Osoby zainteresowane nabyciem ksiki


Pozycjonowania i oprymafatacja stron WWW. Jak to si
rota w promocyjnoj cena (jedyne 25 z* tka goci Imprezy)
oraz autogiafem Michaa Mafcaiuka. cnar mojej skromnej

Leny na swon btoguH zamiecie krtk lecenzj


ksiki. Byt maza bdze ona pomocna dla osb, ktie
maj zamiar kupi t pozycj.
Pozostaw komentarz
Zaogowany jako Saitocz Danowski. Wyleguj

* Ilustrowany przewodnik

Tumaczenia
Optnt czytelnikw
nejoekawyszch
programw iv form
ksiki to doskonay'
pomys. kupdem,
uywam i dzikuj.

R E W m l
D arm ow e |

Bogi
Poradnik webmastera
- marcoos.techbiog

RSS
i i Wszystkie wpisy
Kmzki
u3 Artykuy

ML

Newsletter
)esh chcesz by powiadamiany o
nowociach na strome zaprenumeruj
biuletyn Informacyjny -

'

212

Tworzenie stron WWW w praktyce

Rysunek 5.2. Przykad struktury witryny

Przygotowuj poszczeglne
elementy witryny
Skoro wiesz ju, co chcesz umieci na stronie, nadal jeste pewien sensu jej posiada
nia oraz przygotowae materiay i okrelie odbiorc, czas zaj si tworzeniem pro
jektu. Przedstawi krok po kroku opis powstawania mojej witryny; jednak by byo to
moliwe, musiaby zapozna si z ni w intemecie. Wystarczy, e odwiedzisz nast
pujcy adres http://danowski.pl.
W zwizku z tym, e nie wszyscy m og w tym momencie odwiedzi moj stron, po
stanowiem prezentowa zrzut ekranu wybranego fragmentu strony, a nastpnie opisy
wa, jak powstaa strona na nim widoczna. W ydaje mi si, e takie rozwizanie jest
dobre i pozwoli zrozumie, co robiem.

Uwaga

Cay projekt opisany w dalszej czci opiera si na jzyku XHTML w wersji Strict,
a co za tym idzie, struktura strony i ukad poszczeglnych elementw zostay opra
cowane przy wykorzystaniu kaskadowych arkuszy stylw. Innymi sowy, na stronie
nie znajdziesz tabel.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

213

Strona gwna
Najpierw zajmijmy si stron gwn, a po jej stworzeniu zaczniemy si posuwa coraz
dalej. W zwizku z tym, e chc m oj witryn skierowa do moliwie duego grona
uytkownikw intemetu, postanowiem maksymalnie ograniczy ilo elementw gra
ficznych. W przypadku strony gwnej grafika wystpuje zaledwie w kilku miejscach
i jest bardzo skromna. Pozostae elementy uzyskaem, stosujc moliwoci jzyka HTML
(XHTML) oraz CSS.
Ukad strony rwnie jest bardzo prosty, ale dziki temu sprawia wraenie lekkoci
oraz bez wtpienia jest czytelny, a o to mi chodzio. Grne menu nawigacyjne zawie
ra wykaz najwaniejszych dziaw strony. Natomiast boczne menu to dodatkowy po
dzia kadego z gwnych dziaw strony oraz krtkie recenzje ksiek i kilka dodat
kw, o ktrych wspomn w odpowiednim momencie. Rysunek 5.3 przedstawia widok
kompletnej strony gwnej. Warto w tym miejscu zauway, e jej ukad w duej czci
jest podstaw kolejnych podstron.
Cay projekt moemy bez problemu podzieli na cztery gwne czci; nagwek, stop
k oraz szersz lew oraz wsz praw kolumn. Dziki temu przygotowanie caego
projektu moemy podzieli na kilka mniejszych etapw, ktre opisaem w kolejnych
podrozdziaach.

Etap pierwszy struktura strony


W tym miejscu zajmiemy si przygotowaniem oglnej struktury kodu strony oraz przy
gotowaniem odpowiedniego ta dla witryny. To podstawowa operacja, ktrej wykonanie
nie powinno stanowi problemu. Na rysunku 5.4 wida podany przeze mnie wynik.
Kod XHTML odpowiedzialny za przygotowanie zawartoci rysunku 5.4 jest widocz
ny poniej.
<?xml v e rs io n -'!.0" encoding="iso-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N " "DTD/xhtmll-s tr ic t.d td " >
<html xm1ns="http://www.w3.org/1999/xhtml" xml:lang="pl lang="pl">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml: charset=iso8859-2" />
<meta name="Description" content="Strona autora ksiek i artykuw o tematyce
informatycznej. Biografia, publikacje, opinie czytelnikw." />
<meta name="Keywords" content-"Bartosz Danowski. Literatura informatyczna, spam,
nero. bios. monta komputera, instalacja windows" />
<meta name="Author" content="Bartosz Danowski" />
<meta name="Generator" content="kED" />
< title > L ite ra tu ra informatyczna - Bartosz Danowski</title>
<link re i-"stylesheet" href-"danowski,css" type="text/css" />
</head>
<body>
</body>
</html>

214

Tworzenie stron WWW w praktyce

Rysunek 5.3.
Strona gwna
serwisu danowski.pl

B artosz Danow ski


l i t e r a t u ra

inform a t y czna

_________________

; S t r o n a g w n a |[ Ksiki I Artykuy |! o mnie j| Przyjazne stro n y | Kontakt

Skep

Plagiat
3 2 8 .0 6 .2 0 0 7 > K om entarzy: 7
KHka dni tem u trafi do mnie mail z odnonikiem d o stro n y z
pirackimi kopiami ksiek (e-b o o k i). W rd kilkunastu tytuw s
moje publikacje. S praw a nie je s t now a i o d d aw n a wiem o tym, e
kilka ksiek z o stao z esk an o w y ch i nielegalnie u d o stp n io n ych w
sieci. Jed n ak tym razem p o d c za s ru ty n o w y ch ogldzin moj
u w ag przykua ksika, k t ra jak d o [...]
Czytaj cao

Nero problemy z jzykiem polskim


* 3 1 9 .0 6 .2 0 0 7

Nie ma k om entarzy * Edytuj

D ostaem kilka p y ta d o ty c z c y c h te g o sam ego problem u. W


skrcie chodzi o to . e oryginalny zakupiony w polskim sklepie
p ak iet Nero 7 nie w yw ietla si w jzyk u polskim. Przy czy n
takiego s ta n u rze c z y j e s t bd in stala to ra. Na sz czcie
rozw izanie j e s t bard zo p ro ste .
C zytaj c ao

Opinie czytelnikw
Zdecydowaam si
do Ciebie napisa,
poniewa bardzo
spodobaa m i si
konwencja ksiki
"Komputer PC wiczenia
praktyczne. Wydanie
IT ... naprawd
super. Wszystko je s t napisane jasno,
zwile i klarownie...
atw o mona znae to czego si

Rew elacyjna w tyczka do Firefoksa

1 9 .06.2007 'C ' Nie ma k o m en tarzy Edytuj

Scio e n g ra b j e s t bard zo p rak ty c zn w ty c zk d o przegldarki


Mo/illa Eirefo*. D odatek pozw ala n a sp raw n e i szybkie wykonanie
zrz u tu ekran u z z a w arto c i przegldanej stro n y WWW.
C zy taj c ao

Bogi
Tako rze cz e Shrew
WebAudit Blog
i Poradnik w ebm astera

Nowa ciekaw a promocja

m a rcoos.techbiog

13 15.06.2007 r< 5 iW in a k o m entarzy E dytuj

n e t to

Ksika Pozycjonow anie i o ptym alizacja stro n WWW. Jak si to


robi je s t o b j ta n o w - i mam nadziej c iek aw - prom ocj.
OtZ c e n a ksiZki z o staa cza so w o obniona i k adego dnia
w z ra s ta o 2 z, a d o chwili osignicia p ierw otnej w arto c i (39,90
z). D zisiejsza c e n a ksiki to 33.90 zl, a ju tro bdzie o 2 z
w icej...
Na [...]

RS5
3 W szystkie wpisy
KsiZki
Artykuy

C z y ta j c ao

N ew sletter

Pozycjonowanie i o ptym alizacja stron WWW. Ja k to si


robi

Jeli c h ce sz by pow iadam iany o


now ociach na stronie zaprenum eruj
b iu le ty n in f o r m a c y jn y

! 3 12.06.2007 'C 1K om entarzy: 4 E dytuj


Dziki k sice "Pozycjonowanie I
op tym alizacja stron W WW . Jak to si
robi'' zrozum iesz, ja k d ziaaj wyszukiwarki,
jak w pyw a to n a kolejno w yw ietlania
sini WWW
odnonikw do znalezionych m aten a w , a
p rze d e w szystkim ja k u y te j w iedzy do
tw orzenia stro n , k t re b d zajmow ay
w ysokie p o zy cje w w ynikach w yszukiwania.
Poznasz ta k e techniki umoliwiajce
p opraw funkcjonalnoci w itryny oraz
dodatk o w e sp o so b y je j prom ow ania, dziki czem u liczba osb
odw ied zajcy ch stro n y T w o jej firmy szybko w zronie, podobnie
jak g en ero w a n e przez n i zyski.
C zy taj calo

Pnitosz Danowski K Wuyatloe p--i

J Powered by Wordpnws

21 5

Rozdzia 5. Praktyczny projekt. Moja strona domowa

Litei-atufa .n farm a t|~ a - Bartosa D a n o w a k i; MoztHa

Plik

Edycja

Widok

Histor

Zakadki
jU

Helion

Danowski

0 Disable- & Cookies[)1 Bartosz Danowski

Hardware
CSS-

Narzdzia

Pomoc

'ir

filg/Z/C^sers/Bartek/Desktop/StronaVQW W W /danowski.pl/index.html

Forms-

Wiadomoci
Images-

Pozycjonowanie

Information-

; Google Reader Lj ING Online

Miscellaneous-

C Bartosz Danowsk. - Szukaj w Google

# Outline-

2 Resize-

Matenay ks.zfc.
Tools- -

Z Z Z Imj

W Sownik.

j View Source-

Programy
Options-

Literatura informatyczna - Bartos u

P*g*R*nk Comp

i 0520s

[/OH

Rysunek 5.4. Strona z ustawionym tem

Aby uzyska to widoczne na rysunku 5.4 naley przygotowa wski obrazek o pio
nowej orientacji z odpowiednimi kolorami. Nastpnie to naley wstawi za pom oc
kaskadowych arkuszy stylw, przypisa je do selektora body i zablokowa jego powie
lanie w pionie. Przy okazji mona wyczy podkrelenia dla odnonikw. Odpowiedni
fragment arkusza stylw znajduje si poniej.
body

{
background-image: u rl(o b ra z k i/tlo .jp g );
background-color: white;
background-repeat: repeat-x;

}
a

{
text-decorati on:none:

}
Pierwsze polecenie ustawia obrazek w tle strony, drugie ustawia biay kolor ta, a ostat
nie wymusza powielanie obrazka wycznie w poziomie.

Tworzenie stron WWW w praktyce

216

Etap drugi nagwek i stopka


Teraz przysza pora na to, aby przygotowa nagwek i stopk witryny. W przypad
ku mojego projektu szczeglnie istotny jest nagwek, ktry zawiera gwne menu
nawigacyjne.
Do tworzenia gry strony wykorzystamy nagwek, list wypunktowan oraz kaska
dowe arkusze stylw. N a pocztku musimy po prostu osadzi w dokumencie obrazek
oraz list. Cao powinna znale si pomidzy znacznikiem <div></div>, dla ktrego
dodatkowo ustawiamy identyfikator. Kompletny listing znajduje si poniej i raczej
nie wymaga dodatkowego omwienia.
<di v id="naglowek">
<a href="/"><img src="obrazki/lo g o .png" alt="Bartosz Danowski - lite ra tu ra
inforamtyczna" title = "B a rto sz Danowski - lite ra tu ra informatyczna" /></a>
<ul>
<li><a href="index.html">Strona gwna</a></li>
<li><a h ref="ksia zki.htm l">Ksiki</a></li>
<1 i ><a href="artykuly.htm l">Artykuy</a></li>
<1 i ><a href="omnie.html">0 mnie</a></li>
<1 i ><a href="linki.htm l">Przyjazne strony</a></li>
<1 i><a href="kontakt.html">Kontakt</a></li>
<1 i ><a href="sklep.html">Sklep</a></li>
</ul>
</div>

Teraz pora sign po kaskadowe arkusze stylw i za ich pomoc wymusi ukad na
gwka zgodny z naszymi oczekiwaniami. Przypomn tylko, e dymy do sytuacji,
w ktrej projekt bdzie wyglda tak samo jak przykad widoczny na rysunku 5.3.
W pierwszej kolejnoci dla selektora body musimy doda style odpowiedzialne za usta
wienie zerowych marginesw. Dla pewnoci warto zdefiniowa margines i dopenienie.
Odpowiedni wpis bdzie wyglda tak:
body

{
background-image: u rl(o b ra z k i/tlo .jp g ):
background-color: white:
background-repeat: repeat-x:
margin:0;
padding:0:

}
Logo widoczne w nagwku jest obrazkiem oraz odnonikiem do gwnej strony. Dla
tego kolejnym krokiem jest wyczenie obramowania oraz dopenienia dla wszystkich
obrazkw. Robimy to, dodajc do zewntrznego arkusza stylw poniszy fragment kodu.
i mg

{
border; 0:
paddi ng:0;

Rozdzia 5. Praktyczny projekt. Moja strona domowa

217

Teraz przysza pora, aby elementy zamknite w znacznik <di v i d="nagl owek''></di v>
ustawi na waciwym miejscu, okreli szeroko i wysoko kadego z nich oraz wy
rodkowa go na stronie. Wszystkie wymienione czynnoci znowu wykonujemy, korzy
stajc z odpowiednich wpisw w zewntrznym pliku kaskadowych arkuszy stylw.
div#naglowek

{
background-color:#9F3B43:
wi d th :770px:
height: 106px:
m argin-left:auto;
.
margin-right:auto;

'

Na pocztku dodajemy odpowiedni selektor uzupeniony o definicj identyfikatora.


Nastpnie za pomoc stylu background-col or ustalamy kolor ta. Polecenia width oraz
height okrelaj szeroko oraz wysoko formatowanego elementu. Ostatnie dwa wpisy
arkusza stylw odpowiadaj za regulacj rozmiaru marginesw. Dziki wartoci auto
marginesy ustawiaj blok idealnie na rodku strony.
W tej chwili moemy zaj si ustawianiem poszczeglnych elementw nagwka.
Na pocztku bdzie to logo. W przypadku mojego projektu wystarczy okreli odlego
ci obrazka od grnego i lewego brzegu ekranu. Odpowiadaj za to ponisze style. Zwr
uwag na zastosowanie selektora potomka, o ktrym wspominaem w poprzednim roz
dziale. Dziki takiemu rozwizaniu formatowanie odniesie si wycznie do obrazka
znajdujcego si w nagwku.
div#naglowek img

{
margi n - e f t : 10px;
margin-top:9px;

}
Drugim elementem nagwka jest menu, ktre w tej chwili jest zwyk list wypunk
towan. Oczywicie, musimy to zmieni. W tym celu do zewntrznego arkusza stylw
musimy dopisa nastpujcy kod. Dziki temu rozwizaniu nadal korzystamy ze znacz
nikw listy, ale nakazujemy przegldarce, aby traktowaa ten element ja k element
blokowy o rozmiarze automatycznie dopasowujcym si do zawartoci. Rwnie w tym
przypadku skorzystaem z selektora potomka.
div#naglowek l i

{
d isp la y:in lin e ;
width:auto;
flo a t: le f t;

}
Dalsze czynnoci ograniczaj si ju tylko do okrelenia pooenia poszczeglnych
elementw oraz wczenia obramowania i ta. W swoim projekcie rozwizaem to za
pomoc nastpujcych wpisw do zewntrznego arkusza stylw.

218

Tworzenie stron WWW w praktyce

div#naglowek ul

{
paddlng:0;
margin-top:4px;
margin-1eft:10px:

div#naglowek l i

{
display:bock:
width:auto;
f 1o a t:1e f t :
paddi ng:5px:
border:lpx solid white:
border-bottom:none;
margin-right:2px:
background-color:#91242A;

}
Pierwszy selektor okrela pooenie listy wzgldem lewego i grnego marginesu. Do
datkowo zostao wyczone dopenienie. Natomiast druga grupa wpisw ustawia dope
nienie dla poszczeglnych przyciskw, dziki czemu tekst bdzie znajdowa si na ich
rodku. Poza tym wczyem obramowanie oraz ustawiem kolor ta. Zwr uwag
na to, e najpierw ustawiem kompletne obramowanie dla wszystkich krawdzi, a na
stpnie wyczyem je dla dou. Dziki temu zaoszczdziem kilka bajtw kodu.
Aby nagwek uzna za gotowy brakuje nam jeszcze odpowiedniego formatowania hiperczy, a dokadnie tekstu widocznego na naszych przyciskach. Zmiany, ktre naley
wprowadzi, nie s skomplikowane i tradycyjnie wprowadzimy je za pomoc kaskado
wych arkuszy stylw. Wpisy, ktre m usz si znale w oddzielnym arkuszu stylw,
s widoczne poniej.
a

{
font-weight:bolder;
color:w hite;
text-decoration:none:

}
Jeeli chcemy zmienia wygld przycisku, wystarczy dopisa do arkusza stylw dodat
kowy selektor wraz z waciwociami.
div#naglowek li:h o v e r

{
border-bottom:solid 3px white:
background-color:#9F3B43:
padding:5px:

}
Pora zaj si stopk. Podobnie jak w przypadku nagwka, rwnie tym razem po
midzy znacznikami <di v></di v> zamykamy wszystkie elementy majce znale si na
kocu strony. Dodatkowo dla znacznika przypisujemy identyfikator id=stopka'. Od
powiedni kod stopki mojej strony wyglda mniej wicej tak:
<div id="stopka">
Bartosz Danowski to p y Wszystkie prawa zastrzeone
< /di v>

Rozdzia 5. Praktyczny projekt. Moja strona domowa

219

Samo formatowanie stopki ogranicza si do okrelenia jej szerokoci, ktra musi w y


nosi 100%. Dodatkowo ustawiem kolor tekstu, jego wyrwnanie do rodka oraz to
samej stopki. Jak widzisz, nie jest to nic wyszukanego.
di v#stopka
{
color:white;
width:100;
height:30px;
background-color:#9F3B43:
te xt-a lign:cen ter:
}

Pamitaj, e w tej chwili stopka znajdzie si bezporednio pod nagwkiem, ale ule
gnie to zmianie po tym, jak dodamy pozostae elementy.
Efekt dotychczasowej pracy jest widoczny na rysunku 5.5.

Bartosz D anowski
l ite r a t u ra i n f o rm a ty c z n a

i Strona gwna Y K s i k illA rts k u y II O muip || Przyjazno strony |iKont"akt jf Sklep

Bartosz Danowski Wszystkie prawa zastrzeone

Rysunek 5.5. Efekt dotychczasowych dziaa

Etap trzeci lewa kolumna


Kolejnym elementem, jaki naley zaprojektowa, jest lewa kolumna, w ktrej publi
kowane s poszczeglne wiadomoci w skrconej formie. Kolumna w moim przy
padku ma mniej wicej 2/3 caej szerokoci strony WWW. Aby uproci sobie prac,
proponuj w pierwszej kolejnoci pomidzy nagwkiem i stopk dopisa nastpujcy
fragment kodu:

220

Tworzenie stron WWW w praktyce

<div id="tresc">
<div id="lewa">
</div>
<div id="prawa">
</div>
</div>

Znacznik <di v i d = "tre sc></di v> odpowiada oglnie za ca rodkow cz strony,


czyli za lew i praw kolumn. W zwizku z tym w kaskadowych arkuszach stylw
musimy nada mu odpowiednie waciwoci, tak by wspgra z pozostaymi elemen
tami witryny. Mam tutaj na myli szeroko obszaru, jego to oraz pooenie.
div#tresc
{
background-color:whi t e ;
width:770px:
m argin-left:auto:
m argin-right:auto;
c le a r:le ft:
}

Dopiero teraz moemy si zaj tworzeniem lewej kolumny (zawarto zamknita po


midzy znacznikami <div id="lewa></div>). Niezbdne jest okrelenie za pomoc
kaskadowych arkuszy stylw szerokoci tej kolumny oraz marginesw i dopenienia.
Odpowiedni wpis do arkusza stylw znajduje si poniej.
di v#lewa
{
padding:5px:
margimO:
w idth:440px:
padding-top:20px;

Pora na przygotowanie pojedynczego wpisu. N a mojej stronie wpis zosta utworzony


przy wykorzystaniu nagwka stopnia drugiego i kilku akapitw zamknitych pomidzy
znacznikami <di v class= news></div>. Przykadowy kod zamieciem poniej.
<div class=wpis">
<h2 class="tytul">Noc pozycjonerw</h2>
<p class=data"><span>Autor:</span> Bartosz Danowski <span>Data:</span> 12.07.2007
<span>Komentarzy:</span> 0</p>
<p>Tym razem na szybko i typowo informacyjnie. W sobot i niedziel (30.06-01.07)
odbdzie si I oglnopolska Noc pozycjonerw. Organizatorzy przygotowali szereg
niespodzianek i ju nie mog si doczeka spotkania.</p>
<p>Wrd patronw imprezy znajduj si Onet.pl, H elion.pl. Home.pl. IAB.
N e tsp rint.pl. [,..]< /p >
<p><a href="#">Wicej &#187:</a></p>
</div>

Zwr uwag, e niektre sowa dodatkowo zostay zamknite pomidzy znaczniki


<span></span>. Dziaanie takie ma na celu uatwienie nadania im odmiennego formato
wania ni pozostaym elementom w ramach tego akapitu.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

221

Przykadowy kod wpisu musi znale si pomidzy znacznikami <di v i d=" 1ewax / d i v>
i wymaga odpowiedniego formatowania za pomoc kaskadowych arkuszy stylw. Do
kadniej mwic, naley okreli rozmiar czcionki, kolory, odstpy pomidzy akapi
tami oraz rozmiary pojedynczego wpisu. Niezbdne polecenia zamieciem poniej
i rozdzieliem stosownymi komentarzami.
h2.tytu
{
font-size:14pt;
padding:0;
margin:0;
}

Powysza definicja okrela rozmiar czcionki nagwka stopnia drugiego oraz wycza
dopenienie i marginesy.
p.data
{
font-size:9pt;
paddi ng:0:
margi n: 0:
color:#2F63B3;
}
p.data span
{
font-weight:bolder;

Kolejny wpis do arkusza odpowiada za formatowanie tekstu umieszczonego bezpo


rednio pod nagwkiem. Uznaem, e naley zmieni rozm iar i kolor czcionki oraz
wyczy marginesy i dopenienie. Dodatkowo wyrniem sowa znajdujce si po
midzy znacznikami <span></span> wewntrz <p class="data></p>.
div.wpis
{
border-bottom:solid 2px s ilv e r:
margin-bottom:10px:
}
div.wpis a
{
font-w e ig h t:lig h te r;
color:#2F63B3;
}

Kolejne wpisy wczaj dolne obramowanie moduu z pojedynczym wpisem. Rozwi


zanie to ma rozdzieli graficznie poszczeglne elementy. Poza tym niezbdne byo
wprowadzenie dolnego marginesu, aby zwikszy wiato pomidzy ssiadujcymi wpi
sami. Ostatnia definicja formatuje odnonik znajdujcy si na kocu kadej wiadomoci.
Na rysunku 5.6 przedstawiem ostateczny efekt. Dodatkowo na potrzeby przykadu
wyrniem za pom oc szarego ta sekcj z wpisami.
Jak widzisz, utworzenie lewej kolumny nie byo skomplikowane. Wane jest tylko to,
aby podczas dodawania kolejnych wpisw trzyma si schematu i konsekwentnie uy
wa tych samych znacznikw.

222

Tworzenie stron WWW w praktyce

- , Noc pozycjonerw
B R Autor: Bartosz Daaowito Data:

\2.(P200'komentarz)

| &

Tym razem aa szybko i typow o informacyjnie W sobot i niedziel


111 (30.06-01.07) odbdzie si I oglnopolska N oc pozycjonerw
Organizatorzy przygotowali szereg niespodzianek i ju me mog si

doczeka spotkana
W rd patronw imprezy znajduj si Onet pl, Helion pl, Home.pl, LAB,
Netsprmt.pl. [ ]

?; Wicej
Nero - problemy z jzykiem polskim
Autor: Bartosz Danowski Data: i9.06.200'1Komentarzy: 0

Dostaem lalka pyta dotyczcych tego samego problemu W skrcie


chodzi o to, e oryginalny zakupiony w polskim sklepie pakiet Nero 7 nie
wywietla si w jzyku polskim Przyczyn takiego stanu rzeczy jest bd
instalatora. N a szczcie rozwizanie jest bardzo proste.

Wicej

Rewelacyjna wtyczka do Firefoksa


Autor: Bartosz Danowiki Data: 1107.200' Komentarzy: 0

Screengrab jest bardzo praktyczn wtyczk do przegldarki M ozfia


Fkefox. Dodatek pozwala na sprawne i szybkie wykonanie zrzutu ekranu
z zawartoci przegldanej strony W W W .

Wicej

Plagiat
Autor: Bartosz Daoowila Data: 28.06.200' Komentarz)-; 0

K ilka dni temu tra fi do mnie mail z odnonikiem do strony z pirackimi


kopiami ksiek (e-boold) W rd kilkunastu tytuw s moje
publikacje. Sprawa nie jest nowa i od dawna wiem o tym, e kilka
ksiek zostao zeskanowych i nielegalnie udostpnionych w sieci
Jednak tym razem podczas rutynowych ogldzin moj uwag przykua
ksika, ktra jak do [. .]

Wicej
prawa kolumna
Bartosz Danowski C Wszystkie prawa zastrzeone

Rysunek 5.6. Gotowa sekcja z w pisam i lewa kolumna

Etap czwarty prawa kolumna


Ostatnim elementem strony gwnej, ktrym musimy si zaj, jest prawa kolumna,
zawierajca dodatkowe menu oraz kilka oglnych informacji. Do przygotowania tego
elementu wykorzystaem list wypunktowan, nagwki stopnia trzeciego i formularz.
Zanim zaczniemy dodawa pozycje do prawej kolumny, warto j umieci w odpowied
nim miejscu oraz okreli jej szeroko. Moemy to zrobi za pomoc CSS i wartoci
odpowiedzialnych za pywanie oraz tamowanie elementw. Przyjrzyj si poniszym
listingom i wyrnione wpisy dodaj do swojego arkusza w odpowiednich miejscach.
Jeeli ktrego selektora jeszcze nie posiadasz, to wpisz go w caoci.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

223

div#stopka
{
color:white:
width:100:
height:30px;
background-color:#9F3B43;
text-align :center;
cleariboth;
}
di v#l ewa
{
paddi ng:5px;
margi n:0:
wi dth:440px;
padding-top:20px:
background-color:#EFEDED:
f 1oat: le f t ;
}
div#prawa
{
width:320px:
f l o a tirig h t;
background-color:whi t e :
}

Zwr uwag na to, e selektor odpowiedzialny za kontrol wygldu prawej kolumny


zawiera dodatkowo definicj szerokoci oraz koloru ta.
Dopiero w tej chwili moemy zacz tworzy poszczeglne elementy skadowe pra
wej kolumny. W dalszej czci niniejszego podrozdziau opisz, w jaki sposb przy
gotowa dwa elementy, ktre znajduj si w tym miejscu na mojej stronie. Uznaem, e
nie ma wikszego sensu opisywa kadej z pozycji, bo tworzy si je dokadnie tak samo.
Zgodnie z zasadami funkcjonalnoci strony w prawym grnym rogu witryny powinna
si znale wyszukiwarka. Tak te zostaa zaprojektowana moja strona domowa. Jeeli
tworzysz stron statyczn, do jej przeszukiwania moesz wykorzysta rozwizanie
oferowane przez Google. Mam tutaj na myli m oliwo personalizacji najbardziej
znanej wyszukiwarki i takiej jej skonfigurowanie, aby poszukiwaa informacji w ob
rbie jednej witryny. Oczywicie, aby korzysta z dobrodziejstw Google niezbdna jest
prawidowa indeksacja witryny, co jest rwnoznaczne z tym, e wyszukiwarka swoj
skuteczno zyska dopiero po kilku bd kilkunastu dniach. Kod spersonalizowanej
wyszukiwarki moesz przygotowa na stronie http://www.google.com/coop.
Do przygotowania moduu wyszukiwarki, umieszczonego w prawej kolumnie, wykorzy
staem nagwek, znaczniki <di v></di v> oraz pola formularza. Odpowiednia struktura
znacznikw moe przybra nastpujc posta:
<h3>Szukaj</h3>
<div id="szukaj">
<form id="searchbox_001410115111215252557:zo02p77qzey" a c tio n = "h ttp ://
www.google.com/cse">
<input type="hidden" name="cx" value="001410115111215252557:zo02p77qzey" />
<input type="hidden" name="cof" value="FORID:0" />

224

Tworzenie stron WWW w praktyce

<input name="q" type="text" size="30" />


<input type="submit" name="sa" value="Szukaj" />
</form>
< script type= "text/javascript" src="http://www.google.com/coop/cse/brand?form=
searchbox_001410115111215252557^3Azo02p77qzey"></script>
</di v>

Powyszy kod w prosty sposb moemy doprowadzi do postaci zgodnej z wymaga


niami caego projektu strony. W ystarczy dla uytego nagwka wyczy marginesy
i dopenienie. Nastpnie dla znacznika <div i d= szuka j" > < /d i v> wczy grne ob
ramowanie.
h3
{
paddi ng:0:
margin:0;
}
div#szukaj
{
border-top:solid 4px green:
padding:10px:
}

Jeeli uznasz, e wygld formularza Ci nie odpowiada, to moesz go zmieni, korzy


stajc z odpowiednich stylw.
Drugim opisanym przeze mnie elementem jest dodatkowe menu nawigacyjne. W przy
padku mojej witryny pozwala ono na dodatkow segregacj treci dostpnych w wy
branym dziale. Na przykad w sekcji Ksiki boczne menu pozwala na wybranie ksi
ek z konkretnej serii lub o zadanej tematyce. Oczywicie, boczne menu zmienia si
w zalenoci od gwnego dziau witryny.
Do przygotowania bocznego menu tradycyjnie wykorzystaem list wypunktowan.
Kod kompletnej listy znajduje si poniej.
<h3>Kategori e</h3>
<div id="kategorie">
<ul>
<li><a href="#'>Aktualnoci</a></11>
<1 i><a href="#">Ciekawe programy</a></li>
<1i><a href="#">Mozi11a</a></li>
<li><a href="#">Nero</a></li>
<li><a href="#">Nie na temat</a></li>
<1 i><a href="#">Ogoszeni a</a></l1>
<1 i><a href="#">Porady</a></li>
<1i><a href="#">Pozycjonowan1e stron</a></li>
<li><a href="#">Prgierz</a></li>
<li><a href="#">Strony WWW i internet</a></li>
<1 i><a href="#">Wanie pisz</a></li>
</ul>
</di v>

Rozdzia 5. Praktyczny projekt. Moja strona domowa

225

W pierwszej kolejnoci naley wczy grn krawd moduu z menu. W tym celu
wystarczy wprowadzi drobn zmian w ju istniejcym arkuszu stylw.
div#szukaj, div#kategorie
{
border-top:solid 4px green:
padding:10px:
}

Nastpny etap wymaga przeksztacenia listy wypunktowanej w atrakcyjnie wyglda


jce menu. Zadanie nie jest skomplikowane i oczywicie w caoci zostanie przepro
wadzone za pom oc kaskadowych arkuszy stylw.
Na pocztku przypomn, e menu znajduje si pomidzy znacznikami <div id=
"kategorie"></div>, dlatego do jego sformatowania bdziemy musieli uy selektora
potomka. W pierwszej kolejnoci dla poszczeglnych elementw listy musimy okreli
zerowy margines i dopenienie. Nastpnie ustawiamy obramowanie.
div#kategorie l i
{
border-bottorrcsolid lpx black:
padding:0px;
margin:0;
}

Dla caej listy majcej sta si menu wyczamy punktory oraz marginesy i dopenienia.
div#kategorie ul
{
list-style :n o n e ;
margin:0;
paddi ng:0:
}

Teraz przysza pora, aby si zaj odsyaczami. Ustawiamy waciwoci czcionki od


syacza, za pomoc dopenienia okrelamy wymiary przycisku i na kocu za pom oc
stylu di spl ay przeksztacamy odnoniki na elementy blokowe. Dziki temu cay obszar
przycisku bdzie aktywnym hiperczem. Dodatkowo w tym miejscu moemy ustawi
kolor ta przycisku.
div#kategorie a
{
color:black:
fo nt-w e ight:lighte r:
di splay:block;
padding:5px:

Na kocu za pom oc pseudoklasy : hover m oem y okreli zachowanie przycisku


w chwili, gdy znajdzie si nad nim kursor. Akurat w moim projekcie zmienia on kolor
na inny.
div#kategorie a:hover
{
background-colo r:si 1ve r;
}

Tworzenie stron WWW w praktyce

226

Na rysunku 5.7 wida przykad kompletnej strony gwnej. Oczywicie, to oglny


projekt i zapewne rni si szczegam i od tego, co moesz zobaczy na stronie
http://danowski.pl. Midzy innymi brakuje pozostaych elementw prawej kolumny,
ale jak ju zapewne zauwaye, mona je doda w podobny sposb jak pole wyszu
kiwarki czy menu.
Rysunek 5.7.

B artosz D anow ski

Widok gotowej
strony gwnej

lite ra tu ra inform atyczna


; Stron a giunuu

k s i k i j A rtykuy ; O innif || Przyjazne stro n \ !! k o n ta k t 1 S klep 1

I N o c p o zycjo n cr w
I

Bmotz D*rrwi: Dua: 1.'

S zu k a j
'(fi!
Szukaj

Tym larem na szybko t typowo formacyjnie W sobot i niedziel

H (30 06 01 07) odbdzie si 1ogolnopolska Noc pozvc jouerow

K a te g o rie

Organizatorzy przygotowali szeteg mespodzmnek i juz nie mog si


doczekac spotkana
W rd patrooow anprer. znajduj si Onet pl. Hebon p i Home p. LAB.
N etspratpl ( ]

N e ro - p ro b le m y z j zy k ie m p o lsk im
Anton Bsrtnw. Dmowski D m : 14 04-20071
Dostaem kilka pyta dotyczcych tego samego problemu W skrcie
chodzi o to, e oryginalny zakupiony w polskim sklepie pakiet Nero 7 me
wywietla si w jzyku polskim Przyczyn takiego stanu rzeczy jest bd
instalatora N a szczcie rozwizanie jest bardzo proste

Ogoszenia
Porady
-----------------------------Pozycjonowane stron
p,gjCTz
Strony W W W i internet

Wie
R e w e la c y jn a w ty c zk a do F ire fo k s a
Autor:

DmowskiDala: 2.0",200' Kumratorzj: 0

Screengrab jest bardzo praktyczn wtyczk do przegldarki MoziDa


Fireftn. Dodatek pozwala na sprawne i szybkie wykonanie zrzutu ekranu
z zawartoci przegldanej strony W W W

P la g ia t
tutor: Bartosz Dkot * D i i i : 2t.0&3!Xf kominiarzy: 5
Kilka dni temu trafi do mnie mail z odnonikiem do strony z pirackimi
kopiami ksiek (e-boctd) Wrd kilkunastu tytuw s moje
publikacje Sprawa nie jest nowa i od dawna wiem o tym, e kilka
ksiek zostao zeskanowych i nielegalnie udostpnionych w sieci
Jednak tym razem podczas rutynowych ogldzin moj uwag przykua
ksika, ktra jak do [. .]
W icej

Bmtos/ Danowski W szystkie prawa zastrzeone

Etap pity pojedynczy wpis


Po klikniciu hipercza Czytaj cao widocznego obok pojedynczych wpisw na stro
nie gwnej, pojawi si pena tre notatki. Przygotowanie takiej strony z pojedynczym
wpisem ogranicza si do wprowadzenia zmian wycznie w zawartoci lewej kolumny.
N a rysunku 5.8 wida przykadow notatk z mojej strony WWW.
Do przygotowania struktury notatki wykorzystaem nagwek stopnia drugiego oraz
trzeciego i znaczniki odpowiedzialne za tworzenie akapitw i list wypunktowanych.
Stosowny kod XHTML moe wyglda mniej wicej tak:

Rozdzia 5. Praktyczny projekt. Moja strona domowa

227

Rysunek 5.8.
Strona z przykadow
notatk

A Mapa 3tiony

B artosz D anow ski


literatura

informatyczna

Strona gwna II Ksiki li Artykuy | o mnie |f Przyjazne strony


Danowski.pi Nero

Kontakt 1 Sklep ]

w m m

Szukaj

Nero - problem y z jzykiem polskim


Dostaem kilka p y ta d o ty c z c y c h te g o sam eg o problem u. W
skrcie chodzi o to , e oryginalny zakupiony w polskim sklepie
p a k iet Nero 7 me w yw ietla si w jzy k u polskim. Przy czy n
takiego s ta n u rze cz y je s t bd in stala to ra. Na sz cz c ie
rozw izanie j e s t bard zo p ro ste . W y starczy z a sto s o w a si do
instrukcji zam ieszczo nej poniej:

Kategorie
* A ktualnoci
Ciekaw e program y
Mozilla

Ze stro n y p ro d u ce n ta pobierz n a jn o w sz polsk ,

7
Pobierz program General CleanToot,

Nero
Nie na te m a t

O dinstauj aktualnie p o sia d a n w ersj Nero 7,


W yczy kom p u ter z a p o m o c program u General CleanTool,
Z ainstaluj n o w w ersj Nero 7 (u y j oryginalnego num eru
seryjn eg o ).
Od te j chwili Nero pow inno praw idow o dziaa w n aszym rodzim ym
jzyku.

Zobacz te:
Nielegalne legalne Nero 7

O goszenia
Porady
Pozycjonow anie stro n
Prgierz
S tro n y WWW i in te rn et
W anie pisz

Nowa w ersja Nero 7


Nowe Nero 7 .0 .8 .2

O pinie czyteln ikw


Nie dawno
ksik pC. "BIOS.
Przewodnik. Wydanie
U" k t ra wiele mnie
nauczya t pomoga
lepiej pozna BIOS.

B IO S

Bogi
- Poradnik w eb m aste ra
n e t to
m arc o o s.te ch b lo g
Tako rze cz e Shrew
W ebAudit Blog

RSS_________________
1*3 W szystkie w pisy
O Ksiki
Q Artykuy

PS

N ew sletter
Jeli c h c e s z b y pow iadam iany o
now o ciac h na stronie zaprenum eruj
b iu le ty n in f o r m a c y jn y *

<h2>Nero - problemy z jzykiem polskim</h2>


<p>Dostaem kilka pyta dotyczcych tego samego problemu. W skrcie chodzi o to.
e oryginalny zakupiony w polskim sklepie pakiet Nero 7 nie wywietla si w jzyku
polskim. Przyczyn takiego stanu rzeczy je s t bd in sta la to ra . Na szczcie
rozwizanie je s t bardzo proste. Wystarczy zastosowa si do in s tru k c ji zamieszczonej
poniej:</p>
<u1>
<1 i>Ze <a href=" http://www.nero.com ">strony producenta</a> pobierz najnowsz
polsk wersj Nero 7 < /li>
<li>Pobierz program <a href="http://www.nero.com">General CleanTool</a>,</li>
<1i>0dinstaluj aktualnie posiadan wersj Nero 7 ,< /li>
<li>Wyczy komputer za pomoc programu General CleanTool,</li>
<1 i>Zainstaluj now wersj Nero 7 (uyj oryginalnego numeru seryjnego),</li>

228

Tworzenie stron WWW w praktyce

</lll>
<p>0d te j chw ili Nero powinno prawidowo dziaa w naszym rodzimym jzyku.</p>
<h3>Zobacz te:</h3>
<ul>
<1 i><a href="nieleg_nero7.html'i>Nielegalne legalne Nero 7</a></li>
<li><a href="nowe_nero7.html">Nowa wersja Nero 7</a></li>
<1 i><a href-"nero7082.html">Nowe Nero 7 .0 .8 .2</a></li>
</ul>

Rysunek 5.9 przedstawia efekt dziaania powyszego kodu. Akurat w tym przypadku
dodatkowe formatowanie nie jest wymagane. Jeeli jednak uznasz, e pewne elementy
powinny wyglda inaczej, oczywicie moesz to zrobi za pomoc kaskadowych ar
kuszy stylw.
Rysunek 5.9.

Bartosz Danowski

W y n ik d zia a n ia
p o w yszeg o kodu

l it e r a t u r a i n i o r m a t ycz n a

i Si runa gwna j[ K s i k i! A rtykuy II O mote lj Przyjazne strony j| k on takt |f S klep i

p i

Szukaj

Nero - problem y z jzy kiem polskim


Dostaem kilka p tar. docczaocb tego samego problemu W skrcie
chodn o to. e or. gmakw zakupione u- polskim sklepie pakiet Nero ~

wywietla si w jzvku polskim Przyczyn takiego stanu tzeczy jest b


j e mstakitoi.. Na szczcie rozwizanie jest tardzo proste Wystarczyzastosowa si do tnitrukcji zamieszczonej potae)

[ .......... -

.....................

M m

Kategorie
Aktualnoci
Ciekawe program-.

Ze strony producenta pobierz najnowsza polsk wersj Nero 7


Pobierz program Genera CleanToo,
Odinstahij aktnanie posiadan ssersj Nero '.
Wyczyc komputer za pomoc programu General CleanToo,
Zamstalli) nowa wersj Nero 7 (nyj oi -ginanego numeru
seryjnego)

O d tej chwib Nero powinno ptaurdkiwc dziaa w nasr.rn rodzonym


jrdni

Zobacz te:

MonBa
Nero
Nie oa temat
Ogoszenia
Porady
Pozycjonowanie stron
Prgierz
Strony W W W i internet

Nieegane legalne Nero 7


N ow a wer sja Nero 7
Nowe N ero 7.0.8

Wanie pisz

e*

prawa zastrzeone

Sekcja Ksiki
Osoby, ktre na mojej stronie WWW klikn przycisk Ksiki, trafi do oddzielnej czci
witryny, zawierajcej wykaz napisanych przeze mnie ksiek. Podobnie jak na stronie
gwnej, mamy do czynienia z krtkimi notatkami i dopiero po klikniciu odnonika
Czytaj cao moemy zobaczy peny opis danej publikacji. Rysunek 5.10 przedsta
wia widok listy krtkich zapowiedzi. Zwr uwag, e obok kadej pozycji znajduje si
maa okadka ksiki. Zmianie ulego rwnie menu widoczne z prawej strony.
Za utworzenie kadego ze skrconych wpisw odpowiadaj te same struktury znacz
nikw co w przypadku strony gwnej. Innymi sowy, mamy prawie gotowy arkusz
stylw do tego, aby sformatowa pojedynczy wpis. Poniej zamieciem przykadowy
kod, ktry powinien znale si pomidzy znacznikami <d iv id = "le w a "> < /d iv> . Do
datkowo pogrubiem fragment odpowiedzialny za wstawienie obrazka.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

229

Rysunek 5.10.
Widok sekcji Ksiki

B artosz D anow ski

lite r a tu r a in f o r m a ty c z n a
Stro n a gw na || K si k i || Artykuy

_________ ______ _

0 mnie | Przyjazne stro n y

Danowski.pl Ksiki

K ontakt 1 Sklep

Szukaj

Ksiki

ABC sam o ptym alizuj komputer


5 1 2 .07.2007

Kategorie

O Nie ma ko m en taizy Edytuj

"ABC sam o p tym alizu j kom puter" to


p rzy stp n y poradnik dla o s b , kt re c h c
moliwie najlepiej p rzy g o to w a sw ojego
p e c e ta do w ydajnej i kom fortow ej p rac y .
Dziki te j k sice n a u cz y sz si sk u teczn ie
optym alizow a dziaanie kom putera,
odpow iednio konfigurujc ustaw ien ia
BIO S-u, sy ste m u o p era cy jn e g o i u yw anych
program w . Z o b aczy sz, jak podzieli dyski i
rozplanow a przechow yw anie d an y ch .
Dowiesz si ta k e , ja k zw ikszy b e zp ie cz e stw o sy ste m u i k t re
elem e n ty kom p u tera w arto wymieni, jeli z aw io d inne spo so b y
p opraw y w ydajnoci.

F otografia cyfrow a
In te rn e t
Komputer PC
* K onfiguracja i optym alizacja
* M onta i napraw a
* P odkrcanie i tunm g
M onta wideo
N agryw anie pyt
Program y biurowe

C zytaj c a o

S ystem y opera cy jn e

Pozycjonowanie 1 o ptym alizacja stron WWW. Ja k to si


robi

Tw orzenie stro n WWW

W edug serii

12.06.2007 p Kom entarzy: 4 E d y tu j

* ABC

Dziki k sice "Pozycjonowanie i


op tym alizacja stron W WW. Jak to si
r o b i'1 zrozum iesz, ja k d ziaaj wyszukiwarki,
ja k w pyw a to n a kolejno w yw ietlania
odnonikw do znalezionych m ateriaw , a
p rze d e w szystkim jak uy te j w iedzy do
tw orzenia stro n , k t re b d zajmoway
w ysokie p o z y cje w w ynikach w yszukiwania.
Poznasz ta k e techniki umoliw iajce
p o p raw funkcjonalnoci w itryny oraz
d o d atk o w e sp o so b y je j prom ow ania, dziki czem u liczba osb
o d w ie d za jc y ch stro n y Tw ojej firmy szybko w zronie, podobnie
ja k g en ero w a n e przez m zyski.

wiczenia

SUMWWW

C z y ta j c ao

Ilustrow any przewodnik


4 Kurs
* Po p ro stu
4 S ta n d a rd
* Tablice inform atyczne
* T um aczenia

Opinie czytelnikw_________

Nagrywanie pyt CD 1 DVD. Kurs. Wydanie II

Jestem ju z trz y
miesice po
studiowaniu Pana
ksiZek ktre sa
super!

1 7 .0 4 .2 0 0 7 ^ K o m en ta rz y : 2 E dytuj

Ksika "Nagrywanie p yt CD i DVD. Kurs.


W ydanie n ' pom oe kadem u
uytkownikowi w rozwianiu wszelkich
w tpliw oci z w izanych z zapisyw aniem
d a n y ch n a p y ta ch . C z y ta jc j , n a u czy sz
si n ag ryw a p y ty z danymi, plikami mp3 i
filmami, tw orzy cyfrow e albumy
fo to g raficzn e i p y ty OVO. P o zn asz rne
narzd zia su c e d o p rac y z nagryw arkam i,
sp o so b y zoptym alizow ania dziaania
sy ste m w o p era cy jn y c h p o d k tem w sppracy z tymi
urzdzeniam i oraz m e to d y tw orzenia archiw w d a n y ch n a p y ta ch
CD. P rz ec zy ta sz takZe o zapisie w ielosesyjnym i projektow aniu
okadek n a pyty.

m a rc o o s. te chblog
n e t to
T ako rze cz e Shrew
W ebAudit Blog
Poradnik w eb m aste ra

C z y ta j c a o

Windows V ista PL. Instalacja i naprawa. wiczenia


praktyczne

RSS
3 W szystkie wpisy

*5 2 8 .0 3 .2 0 0 7 'P Nie ma k om entarzy E dytuj

3 Ksiki

Dziki k sice "Windows Vista PL.


In stalacja I naprawa. wiczenia
praktyczne" byskaw icznie zain stalu jesz
now e okna t p rzy g o tu jesz je d o p rac y .
Dowiesz si, jaki kom puter je s t p o trzeb n y ,
a b y k o rzy sta z V isty, jakie s moliwoci
p o szczeg lny ch w ersji te g o sy ste m u , a
ta k e ja k z ain stalo w a g o n a p u sty m dysku
lub zaktualizow a W indows XP. Z o b aczy sz,
jak a k ty w o w a sy ste m , a n a stp n ie
pielgnow a go, d o d a jc ak tu alizacje i w czajc zab ezp ieczen ia.
N auczysz si konfigurow a V ist i in stalo w a sterow niki p o trze b n e
do dziaania ko m p u tera, a ta k e p o z n asz p rzy d a tn e techniki
zab ezp ieczania d a n y ch oraz rozw izyw ania rozm aitych
problem w, c o pozwoli C kom fortow o k o rzy sta z te g o sy ste m u .

3 Artykuy

Banw Dflnowtk- c Wszystkie pi

N ew sletter
Jeli c h c e s z b y pow iadam iany o
now o ciac h na stronie zaprenum eruj
b iu le ty n I n fo r m a c y jn y

n o n e I Wetwies.iM' "'koiaj

| Pote'ed tty wo*flor

230

Tworzenie stron WWW w praktyce

<d1v class="wpis">
<h2 class="tytul">ABC sam optymalizuj komputer</h2>
<p class="data"><span>Autor:</span> Bartosz Danowski <span>Data:</span> 12.07.2007
<span>Komentarzy:</span> 0</p>
<p><a href="abcopt.html"><img src="obrazki/abcopt.jpg" alt="ABC sam optymalizuje
komputer" title="ABC sam optymalizuje komputer" width=125" height="163" /></a>

<strong>ABC sam optymalizuj komputer</strong> to przystpny poradnik dla osb,


ktre chc moliwie n a jle p ie j przygotowa swojego peceta do wydajnej i komfortowej
pracy. Dziki te j ksice nauczysz si skutecznie optymalizowa dziaanie komputera,
odpowiednio konfigurujc ustawienia BIOS-u. systemu operacyjnego i uywanych
programw. Zobaczysz, jak podzieli dyski i rozplanowa przechowywanie danych.
Dowiesz si take, jak zwikszy bezpieczestwo systemu i ktre elementy komputera
warto wymieni, je li zawiod inne sposoby poprawy wydajnoci,</p>
<p><a href="abcopt.html">Czytaj cao</a></p>
</div>

Jedyn zm ian w arkuszu stylw jest dodanie polece okrelajcych oblewanie ob


razka tekstem oraz utworzenie wok niego ramki. Odpowiednie wpisy powinny wy
glda mniej wicej tak:
div.wpis img
{
f l o a t:rig h t:
border:sol id 2px s ilv e r:
padding:2px;
margin:5px;

Pierwsza z deklaracji okrela sposb, w jaki obrazek zostanie oblany tekstem. W tym
przypadku obrazek znajdzie si z prawej, a tekst z lewej strony. Kolejne wpisy defi
niuj wygld ramki oraz margines i dopenienia. Ostateczny efekt jest widoczny na
rysunku 5.11.
Rysunek 5.11.
P rzykad wykazu
ksiek krtki opis
p lus okadka ksiki

Bartosz Danowski
lit e r a t u ru in f o r m a t y c z n a
! Strona glowo j j! Ksiki |j Artykalyi O ma ii

--------- 1

ABC sam optymalizuje komputer to


przystpny poradnik <Ja osb, ktre chc
mohnie najlepiej przygotowa swojego peceta
H do wydajnej i komfortowej pracy. Dziki tej
; ksice nauczysz si skutecznie optymalizowa
dziaanie komputera, odpowiednio konfigurujc
ustawienia BlOS-u. systemu operacyjnego i
uywanych programw Zobaczysz, jak podzieli
dyski i rozplanow a przechowywanie danych
Dowiesz si take, jak zwikszy
bezpieczestwo systemu i ktre elementy komputera warto
jeli zawiod inne sposoby poprawy wydajnoci.
Czytaj cao

Pozycjonowanie l optymalizacja stron W W W . J a k to

Prgierz

Auer:Bsnz r>aw*in Dl: i: .V200' Komiourr' 0


Dziki ksice Pozycjonowanie i optymalizacja
stron WWW. Ja k to si robi zrozumiesz, jak
dziaaj wyszukiwarki, jak wpywa to na
kolejno wywietlania odnonikw do
znalezionych materiaw a przede wszystkim jak uy tej wiedzy do tworzenia stron, ktre
bd zajmoway wysokie pozycje w wynikach
;
wyszukiwania Poznasz take techniki
umoiwiayce popraw finkcjonaiooci witryny
oraz dodatkow e sposoby jej promowana, dziki
czemu liczba osb odwiedzajcych strony Twojej firm\
wzronie, podobnie jak generowane przez ni zyski

mWW
W

Czytaj cafo

Rnrlo-.r Danowski 5 Wszystkie prawa ustrzeone

Rozdzia 5. Praktyczny projekt. Moja strona domowa

231

Z nieco bardziej skomplikowanym rozwizaniem mamy do czynienia na podstronie


konkretnej ksiki (rysunek 5.12). Rwnie tym razem cay kod powinien znale si
w gwnym kodzie strony, pomidzy znacznikami <d iv id = "le w a >< /d i v>.
Rysunek 5.12.
Przykadowa strona
ksiki

A Mapa strony

Bartosz Danowski

lite ra tu ra in fo rm aty czn a

i Srrv*M gk>w**a ' K siki '! Aityfcuy j o m w j Przyjazna strony '[ Kontakt jj Sklep
Oanowski.pl ABC

Szukaj

ABC sam optymalizuj komputer

ISzukaj na shonie

W y k o rz y sta j peni m o liw o c i


s w o je g o k o m p u te r a

Kategorie

la k zapewni stabilne
funkcjonowanie komputera?

...JESI

Fotografia cyfrow a
Intern e t

lak przyspieszy dziaanie


programw?

Komputer PC

lak poprawi komfort pracy


w system ie operacyjnym ?

e Konfiguracja i optymalizacja

W wielu przypadkach kom puter po


wymianie podzespow i
skonfigurowaniu nada nie dziaa
tak. jak uytkownik oczekiw a. Na
pozr najprostszym wyjciem je s t
S tro n a domowa ksiki
w tedy zakup now ego sprztu,
Spis treci
jednak je s t to kosztow ne
ISBN: 978 -8 3 -24 6-10 3 7-2
rozwizanie i, co gorsza, c z sto
Form at: 85, stron : 384
nie gw arantuje spodziew anych
D ata wydania: 2007-07-12
e fektw . Na sz czcie istnieje
Fragm ent ksiki w PDF
lepszy 1 tartszy sposb.
39.00
W spczesne kom putery i system y
o peracyjne d a j wiele moZhwoci
.y, Dodaj d o koszyka
w zakresie samodzielnej popraw y
szybkoci oraz stabilnoci
dziaania programw, a tak e zwikszania komfortu i efektyw noci
pracy.

Cena:

ABC s a m o p ty m a liz u j k o m p u te r" to przy stp n y poradnik dla


osb, ktre c h c moliwie najlepiej przygotow a sw ojego p e c e ta
do wydajnej i komfortowej pracy. Dziki te j ksiZce nau czysz si
sk utecznie optymalizowa dziaanie kom putera, odpowiednio
konfigurujc ustaw ienia BIOS-u, sy stem u o p eracyjnego i
u ywanych programw. Z obaczysz, jak podzieli dyski i
rozplanowa przechow yw anie danych. Dowiesz si tak2e. jak
zwikszy b ezpieczestw o sy ste m u i ktre elem enty komputera
w arto wymieni, Jeli zaw iod mne sposoby popraw y w ydajnoci.
Ustawianie opcy BIOS-u
Dobr 1konfigurowanie sterownikw
Efektyw ne zarzdzanie system em plikw
Optymalizowanie sy ste m u operacyjnego Windows XP/Vista
Zapewnianie b ezp ieczestw a system u
Archiwizowanie d anych w system ie Windows Windows
XP/Vta
Podkrcanie pro ceso ra, k arty graficznej i pamici
Wymiana przestarzaego sprztu
Stosow anie przy d atn y ch programw narzdziow ych
Z a s to s u j sp r a w d z o n e te c h n ik i o p ty m a liz a c ji i tc h n ij n o w e
y c ie w sw j k o m p u te r .

Monta

1 napraw a

Podkrcanie i tumng
Monta wideo
Nagrywanie pyt
Programy biurowe
S ystem y operacyjne
Tworzenie stron WWW
- Wedug serii
ABC
wiczenia
Ebooki
Ilustrow any przewodnik

e Po prostu
S tandard
Tablice inform atyczne
Tumaczenia

Opinie czytelnikw
Wanie
przeczytaem Pana
ksik "ABC sam
naprawiam
komputer". Tak ja k
poprzednie je s t
napisana bardzo
zrozumiaym
jzykiem dla laika
komputerowego, takiego ja k ja . To
dobrze, Ze unikn Pan tych wszystkich
fachowych terminw, zrozumiaych dla
specjalistw.

Zobacz te:
ABC tw orzenia stron w w w , W ydanie drugie

Bogi

ABf sam n a p ra w o m komputer


ABC sam skadam komputer. W ydanie II
Poradnik webmastera
WebAudit Biog
marcoos.techbog
Tako rzecze Shrew

RSS
( 3 Wszystkie wpisy
3 Ksiki
3 Artykuy

Newsletter
Jesi chcesz by powiadamiany o
nowociach na stronie zaprenumeruj
biu le ty n in fo rm a c y jn y

Bono Onowo C Wuysliue |m u

Tworzenie stron WWW w praktyce

232

Do przygotowana strony ksiki wykorzystaem nagwek stopnia drugiego i trzeciego,


kilka blokw tekstu oraz listy wypunktowane. Dodatkowo ramka ze szczegowymi
informacjami na temat ksiki wykorzystuje znacznik <div></div> oraz list wypunk
towan. Przykadowy kod jest widoczny poniej.
<div class="wpis">
<h2>ABC sam optymalizuj komputer</h2>
<div id="legenda">

<img src="obrazki/abcoptl.jpg" alt="ABC sam optymalizuje komputer" title="ABC sam


optymalizuje komputer" width="181" height="236" />
<ul id=ramka">
<1 i ><a href=abcopt.html">Strona domowa ksiki</a></li>
<li><a href="spis_abcopt.html">Spis tre ci< /a > < /li>
<1 i>ISBN: 978-83-246-1037-2</1i>
<li>Format: B5. stron: 384</li>
<li>Data wydania: 2007-07-12</li>
<li><a href="pdf_abcopt.html">Fragment ksiki w PDF</a></li>
</ul>
<span id="cena">Cena: 39.00 z</span>
<p>Dodaj do koszyka</p>
</div>
<strong>Wykorzystaj peni moliwoci swojego komputera</strong>
<ul>
<li>Jak zapewni stabilne funkcjonowanie komputera?</li>
<1 i>Jak przyspieszy dziaanie programw?</li>
<li>Jak poprawi komfort pracy w systemie operacyjnym?</li>
</ul>
<p>W wielu przypadkach komputer po wymianie podzespow i skonfigurowaniu nadal nie
dziaa tak, jak uytkownik oczekiwa. Na pozr najprostszym wyjciem je s t wtedy
zakup nowego sprztu, jednak je s t to kosztowne rozwizanie i . co gorsza, czsto nie
gwarantuje spodziewanych efektw. Na szczcie is tn ie je lepszy i taszy sposb.
Wspczesne komputery i systemy operacyjne daj wiele moliwoci w zakresie
samodzielnej poprawy szybkoci oraz stabilnoci dziaania programw, a take
zwikszania komfortu i efektywnoci pracy.</p>
<p><strong>ABC sam optymalizuj komputer</strong> to przystpny poradnik dla osb,
ktre chc moliwie n a jle p ie j przygotowa swojego peceta do wydajnej i komfortowej
pracy. Dziki te j ksice nauczysz si skutecznie optymalizowa dziaanie komputera,
odpowiednio konfigurujc ustawienia BIOS-u. systemu operacyjnego i uywanych
programw. Zobaczysz, jak podzieli dyski i rozplanowa przechowywanie danych.
Dowiesz si take, jak zwikszy bezpieczestwo systemu i ktre elementy komputera
warto wymieni, je li zawiod inne sposoby poprawy wydajnoci,</p>
<ul>
<li>Ustawianie opcji BI0S-u</li>
<li>Dobr i konfigurowanie sterownikw</li>
<li>Efektywne zarzdzanie systemem plikw </li>
<li>Optymalizowanie systemu operacyjnego Windows XP/Vista</li>
<li>Zapewnianie bezpieczestwa systemu</li>
<li>Archiwizowanie danych w systemie Windows Windows XP/Vista</li>
<li>Podkrcanie procesora, karty graficznej i pamici</li>
<li>Wymiana przestarzaego sprztu</li>
<li>Stosowanie przydatnych programw narzdziowych</li>
</ul>
<strong>Zastosuj sprawdzone techniki optymalizacji i tc h n ij nowe ycie w swj
komputer.</strong>
<h3>Zobacz te:</h3>

Rozdzia 5. Praktyczny projekt. Moja strona domowa

233

<ul>
<li><a href="#">ABC tworzenia stron WWW. Wydanie drugie</a></li>
<li><a href="#">ABC sam naprawiam komputer</a></li>
<li><a href=''#">ABC sam skadam komputer. Wydanie II< /a > < /li>
</ul>
</div>

Myl, e komentowanie poszczeglnych elementw powyszego listingu jest zbdne


i nie ma w nim nic, co nie zostao opisane do tej pory w ksice. Zwr tylko uwag
na dodatkowe identyfikatory, ktre dopisaem w kilku miejscach. Dla uatwienia po
grubiem je w przykadowym listingu. Rysunek 5.13 przedstawia wygld strony z opi
sem ksiki bez odpowiedniego formatowania.
Rysunek 5.13.
Wynik dziaania kodu
odpowiadajcego
ze stron z opisem
ksiki. Zwr uwag
na to, e obrazek
je s t form atowany
za pom ocjednego
z wczeniejszych
wpisw. Bdziemy to
musieli teraz zmieni

Bartosz Danowski

lite ra !u r.i in form a tycz na

! Mruua gowa* K si ki j Artykuy j: O mai>-!; Pr/s jasne ro m j| k u m a ki ; Sklep

ABC sam optymalizuj komputer

Strona domowa ksiki


Spis treci
ISBN: 978-83-246-1037-2
Format B5, stron: 384
Datawydama 2007-07-12
Ftagment ksiki w PDF

Dodaj do koszyka
W ykorzystaj petui moliwoci
swojego komputera
Jak zapewni stabilne funkcjonowanie komputera?
Jak przyspieszy dziaanie programw1
Jak poprawi komfort pracy w systemie operacyjnym
W wielu przypadkach komputer po wymianie podzespow i
skonfigurowaniu nadal nie dziaa tak, jak uytkownik oczekiwa N a
pozr najprostszym wyjciem jest wtedy zakup nowego sprztu, jednak
jest to kosztowne rozwizanie i, co gorsza, czsto nie gwarantuje
spodziewanych efektw N a szczcie istnieje lepszy i taszy sposb.
Wspczesne komputery i systemy operacyjne daj wiele moliwoci w
zakresie samodzielnej poprawy szybkoci oraz stabilnoci dziaania
programw, a take zwikszania komfortu i efektywnoci pracy.

Pozycjonowanie stron

Strony W WW' i internet

A B C sam optymalizuj komputer to przystpny poradnik <fia osb.


ktre chc moliwie najlepiej przygotowa swojego peceta do wydajnej
i komfortowej pracy Dziki tej ksice nauczysz si skutecznie
optymalizowa dziaanie komputera, odpowiednio konfigurujc
ustawienia BIOS-u, systemu operacyjnego i uywanych programw
Zobaczysz, jak podzieli dyski i rozplanowa przechowywanie danych
Dowiesz si take, jak zwikszy bezpieczestwo systemu i ktre
elementy komputera warto wymieni, jeS zawiod inne sposoby
poprawy wydajnoci.

Ustawianie opcji BIOS-u


Dobor i konfigurow ane sterownikw
Efektywne zarzdzanie systemem pikw
Optymalizow anie systemu operacyjnego Windows X P Vista
Zapewnianie bezpieczestwa systemu
Archiwizowanie danych w systemie Windows Windows X P Vista
Podkrcanie procesora, karty graficznej i pomici
Wymiana przestarzaego sprztu
Stosowanie przydatnych programw narzdziowych

Zastosuj sprawdzone techniki optymalizacji i tchnij nowe ycie w


swj komputer.

Z o b a c z te:
A B C tworzenia stron W W W . Wydanie drugie
A B C sam naprawiam komputer
A B C sam skadam komputer Wydanie II

Bartosz Dauowski

iWszystkie ptaw a zastrzeone

Szybka analiza rysunku 5.13 pokazuje, e zmiany s konieczne. N a szczcie nie ma


ich zbyt wiele i dotycz waciwie moduu, w ktrym znajduj si szczegowe infor
macje na temat ksiki.

234

Tworzenie stron WWW w praktyce

Modu ze szczegami ksiki ma przypisany wasny identyfikator o nazwie legenda


i to wanie do niego dodamy wpisy odpowiedzialne za zmian wygldu. Zaczynamy
od okrelenia szerokoci, koloru ta i obramowania. Dodatkowo ustawiamy dope
nienie i wymuszamy, aby element zosta oblany tekstem z lewej strony. Odpowiedni
kod CSS znajduje si poniej.
div#legenda
{
wi dth:195px:
background-color:#DEDCDC;
border: so lid lpx s ilv e r:
padding:5px:
flo a t:r ig h t:

Dalsze zmiany polegaj na wyczeniu punktora listy i formatowaniu wygldu tekstu.


Widoczne poniej fragmenty kodu naley dopisa do arkusza stylw.
ul#ramka
{
list-style -typ e :n o n e ;
padding:0;
line-height:l,5em :
}

Powyszy fragment wycza punktor listy, likwiduje dopenienie i zwiksza odstpy


pomidzy poszczeglnymi pozycjami.
span#cena
{
font-size:30px:
color:red;
font-weight:bold;

Nastpny kawaek arkusza dotyczy ceny ksiki. Okreliem rozmiar, kolor oraz wag
czcionki.
div#legenda p
{
border: lpx so lid s ilv e r:
background-col o r :#D7D5D5:
padding: 5px;
padding-left:20px;
padding-right:20px;
te xt-a lig n :ce n te r;
font-weight:bolder;

Ostatni element dotyczy przycisku odpowiadajcego za dodanie ksiki do koszyka.


W tym przypadku wczyem obramowanie, ustawiem to, dodaem zrnicowane do
penienie oraz wyrodkowaem i pogrubiem tekst. Zwr uwag na wykorzystanie
selektora potomka.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

235

Na rysunku 5.14 przedstawiem ostateczny efekt. Zwr uwag, e formatowanie po


zostaych elementw nie jest wymagane.
Rysunek 5.14.
Gotowa strona
ksiki
ABC sam optymalizuj komputer
| W ykorz) staj peni n o tl ro tc i
snojego komputera

8B

Jak zapewnie stabilne


Jak przvspmszyc dziaame
* Jak poprawi komfort pracy v

_ W widu przypadkach komputer po


skonfigurowaniu m itil nie H;mt tak,
jak uytkownik oczekiwa. N a pozr
najprostszsTO wyjciem jest wtedy
iakup nowego spueto, jednak jestto
kositowne rozwizani, i, co goesia.
czeito nie gwaroMa* ^edziew an,^
efektw. N a oeaida fimieje lapazy i
taszy' sposb. Wspczesne
komputery i systemy operacyjne daj
wiele moliwoci w zakresie

[ s b T 978-83-24(>-1037-2
F o ra a t B5 sirei 384

Da>
p DF

ta0m t
v

t lliJ . o V .

.
* Z

samodzielnej poprawy szybkoci oraz


stabilnoci dziaania programw a
take zwikszania komfortu i
efektywnoci pracy

Dodaj do koszyka

A B C sam optymalizuj komputer to przystpny poradnik dla osb,


ktre chc mozfcwre najlepiej przygotowa swojego peceta do wydajnej
i komfortowej pracy Dziki tej ksice nauczysz si skutecznie
optymalizowa dziaanie komputera, ojow ieAno konfigurujc
ustawienia B lO S -u, systemu operacyjnego i uywanych programw
Zobaczysz, jak podzieli dyski i rozplanowa przechowywanie danych.
Dowiesz si take, jak zwikszy bezpieczestwo systemu i ktre
elementy komputera warto wymieni, jek zawiod inne sposoby
poprawy wydajnoci
* Ust
>r i k o
m plikw
Optymalizowanie systemu operacyjnego Windows X P Vista
Zapewnianie bezpieczestwa systemu
Archiwizowanie danych w systemie Windows Windows X P V is i
Podkrcanie procesora, karty graficznej i pamici
Wymiana przestarzaego sprztu
Stosowanie przydatnych programw narzdziowych
Zastosuj sprawdzono techniki optym alizacji i tchnij nowe ycie w
swj komputer.

Z o b a c z te:
A B C tworzenia stron W W W Wydanie thugie
.ABC sam naprawiam komputer

Sekcja Artykuy
Strona gwna sekcji Artykuy nie rni si niczym od tego, co do tej pory zrobilimy.
Podobnie ma si z podstron konkretnego artykuu. Dlatego nie bd opisywa, w jaki
sposb zostaa utworzona.
Przy okazji sekcji Artykuy chc tylko zwrci Twoj uwag na jedn kwesti, o ktrej
wspominaem nieco wczeniej. Publikujc dugie teksty, np. artykuy, musisz mie na
uwadze, e naley je dzieli na mniejsze czci podstrony. Podzia na podstrony
przypiesza ich wczytywanie, uatwia czytanie i pozytywnie wpywa na liczb podstron,
co z kolei przydaje si podczas pozycjonowania witryny.

236

Tworzenie stron WWW w praktyce

Na rysunku 5.15 pod tekstem znajduje si dodatkowe menu nawigacyjne, ktre po


zwala przej do kolejnych podstron artykuu.
Rysunek 5.15.
Podstrona artykuu
do je j utworzenia
wykorzystaem
typowe rozwizania,
o ktrych wiele razy
bya mowa
w tym rozdziale

Ti M apa strony

Bartosz Danow ski


literatura

informatyczna

f S tro n a gwna l i Kwki || A rty k u y |j O mnie || Przyjane stro n y


D anow ski.pl CDRinfo

K ontakt

Sklep

Szukaj

P ra w id o w a k o n fig u ra c ja n a p d w IDE
Niemal codziennie n a fdom i.cdrinfo.pl pojaw iaj ei p y tan ia na
te m a t te g o w jaki sp o s b popraw nie podczy nagryw ark IDE do
k om putera. Ze w zgldu n a sp o r ilo moliwych konfiguracji
poniej zam ieszczam kilka propozycji. Mam nad ziej, ze wielu
uytkownikom zaprez en to w a n e porad y pom o g pozby si
problemw zw izanych z nieprawidowo p o d p itym urzdzeniami
IDE - zarw no dyskw ja k i n apdw o p ty czn y ch .
Kontroler in terfejsu IDE d o st p n y w kadym kom puterze skada si
z dw ch kanaw , do k t ry ch m oemy p odczy p o dw a
u rzdzenia. Kade z u rzd ze musi mie sw oje okrelone m iejsce.
Do te g o celu su sp ecjaln e zworki z n ajd u jce si z tyu
u rzdzenia.
Na jednym kanale m og p raco w a dw a u rzdzenia. Jednak by to
byo moliwe, kade z ruch musisz odpowiednio skonfigurowa.
Z asad a konfiguracji try b u p rac y urzd ze IDE je s t ta k a sam a
zarw no dla dyskw tw ard y ch , jak i n apdw o p ty czn y ch . Jedno
urzdzenie naley u sta w i w trybie pracy MASTER, a drugie w
trybie SLAVE. Na jednym kanale nie m og p raco w a dw a
urzdzenie u staw io n e w tym samym trybie np. SLAVE.
Dokadny opis spo so b u ustaw ien ia zworek n a tylnym panelu
nagryw arki znajdziesz w dokum entacji nagryw arki lub n a jej
obudowie.

CDRinfo
CHIP
Cyber
M agazyn INTERNET

Opinie czytelnikw
Mam prawie
wszystkie Pana
ksiki szczeglnie
ceni sobie to, te
pisane s jasnym
precyzyjnym
jzykiem.

7 .- - '

B ogi...
* m arcoos.techblog
' Poradnik w ebm astera

W dalszych przykadach b d b azo w a n a konfiguracji c z te re c h


u rzdze IDE dw a dyski tw ard e oraz nagryw arka i n ap d
CD/DVD-ROM. Dziki tem u bdzie moliwe przedstaw ienie
z d ecy d ow an ej w ikszoci przypadkw , z ktrymi m oesz mie do
czynienia. Jeeli w Twoim kom puterze p o siad asz n p . tylko jeden
dysk, to w y sta rc zy , te z o staw isz p u ste m iejsce.

n e t to

Zobacz te:

RSS

- Tako rzecze Shrew

* WebAudit Bog

In tern e to w a a ktualizacja Nero 7

5 W szystkie wpisy

Nero a pra.vo do zapisu w Windows 2000/X P

0 Ksiki
3 Artykuy

O l

N ew sletter
Jeli c h ce sz by pow iadamiany o
now ociach na stronie zaprenumeruj
b iu le ty n I n fo r m a c y jn y

I WebOewn. M.koS)

I Powered Iw WonJpreu

Sekcja O mnie
Sekcja O mnie nie rni si niczym od tego, co do tej pory zrobilimy. Dlatego nie bd
opisywa, w jaki sposb zostaa utworzona.

Sekcja Przyjazne strony


Kolejna cz mojej witryny zawiera wykaz odnonikw do stron, ktre odwiedzam
(rysunek 5.16). Podczas tworzenia tej strony wykorzystaem nagwek stopnia drugie
go, blok tekstu, cytat oraz list wypunktowan.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

237

Rysunek 5.16.

iii Mapa strony

B artosz D anow ski

Sekcja
Przyjazne strony

i n f o r m a t yc z n a

literatura

| S tro n a gw na |j Ksi/k || Artykuy

jj O mnie

]! P r z y ja z n e s t r o n y || k o n ta k t

Danowslu.pl Przyjazne stro n y

Sklep ]

Szukaj

P r z y j a z n e s tro n y

1Szukaj na stronie

Jeeli c h c e s z ab y Tw j odnonik znalaz si n a te j stro n ie musisz


u m ieci odw oanie d o mojej w itryny o treci w idocznej poniej.
N astpnie pow iadom mnie o tym i przylij tre o d sy acza.

Oplnte czytelnikw

'

> .Met--h.r.p:/,d8P;wMlct.p2->HarKss Tm owaki -

Dzikuj z a pom oc w
utworzeniu poczty
e-rnar/.

_ ;E S 1

------------ --

Kompot PC

m o n it r - Tum aczenia program w


Przeprowadzki

1 i

k a talo g C iekawych Stro n


Przeprowadzki
S a lo lo c k - program do z ab e zp ie cz e CD
4MAX - sklep tn tern eto w y
P o rta l coRjnfo.pl - zido wiedzy o nag ry w an iu pyt CD/QVD
K omputery to n a sza p a s ja

pyrchla.pl

6lol
T ako rzecze Shrew
n e t to

Maja Kierzkowska
W ebAudit Blog

Rafa Kochanowski
Pozycjonow anie

m arc o o s.te ch b lo g

O tw arty Katalog In tern e to w y

Poradnik w eb m aste ra

Dziecko w sieci
H ato n

L iteratura in fo rm aty czn a w najlepszym w ydaniu

fWOJSPC p!

Twoi-

Poradnik w eb m aste ra
Szum an

Paw e Wknmer

stro n a p ry w atn a

e p p u - inform atyka i multimedia Przem ysaw Danowski,


o u tsou rcin g n

RSS ....
t j W szystkie wpisy
IfcJ Ksiki
Artykuy

(E j

Grze goi z Harasim owicz

N ew sletter

Oil P eak , ro p a n a fto w a

Jeli c h c e s z b y pow iadam iany o


n o w ociach n a stronie zaprenum eruj
b iu le ty n in f o r m a c y jn y

E dytuj,

Bartosz Danowski

t' W tv s U "* otawa le a rte n irn I Aebdesipr: Mikoaj barrzrntswicz I Powered by W c S c n :

Odpowiednia struktura kodu wyglda mniej wicej tak:


<div id="wpis">
<h2>Przyjazne strony</h2>
<p>Jeeli chcesz aby Twj odnonik znalaz si na te j stronie, musisz umieci
odwoanie do mojej witryny o tre ci widocznej poniej. Nastpnie powiadom mnie
o tym i p rz y lij tre odsyacza.</p>
<bl ockquote><a href="http://danowski .p l>Bartosz Danowski lite ra tu ra informatyczna - ksiki. artykuy</a></blockquote>
<ul>
<li><a href="#">Katalog Ciekawych Stron</a></li>
<li><a href="#">Rafa Kochanowski</a></li>
<1 i ><a href="#>Szuman - strona prywatna</a></li>
<1 i ><a href="#">Maja Kierzkowska</a></li>
<li><a href=#">Przeprowadzki</a></li>
<li><a href="#>TwojePC.pl - Twoje rdo informacji o Sprzcie</a></li>
<li><a href=#">Helion - Literatura informatyczna w najlepszym wydaniu</a></li>
<11><a href="#>Grzegorz Harasimowicz</a></li>
<1i ><a href="#>4MAX - sklep internetowy</a></li>
<1 i><a href="#">Pozycjonowanie</a></li>
<1 i ><a href=''#">Portal CDRinfo.pl - rdo wiedzy o nagrywaniu p y t CD/DVD</a></li>
<1 i ><a href="#">Dziecko w sieci< /a>< /li>
<li><a href="#>Komputery to nasza pasja
pyrchla.pl
</a></li>
<1 i><a href="#">Otwarty Katalog Internetowy</a></li>
<li><a href="#>MONTER - Tumaczenia programw</a></li>
<li><a href="#">SafeLock - program do zabezpiecze CD</a></li>

238

Tworzenie stron WWW w praktyce

<li><a href="#">eppu - Informatyka i multimedia Przemysaw Danowski. outsourcing


IT</a></li>
<li><a href="#">Poradnik webmastera - Pawe Wimmer</a></li>
<li><a href="#>0il Peak: ropa naftowa</a></li>
<li><a href="#">Przeprowadzki</a></li>
</ul>
</div>

Po sprawdzeniu, jak wyglda strona po dopisaniu treci, okazuje si, e uyte do tej
pory style idealnie pasuj do formatowania nowej treci. Jedynym elementem, ktry
wymaga poprawy, jest cytat. Aby to zmieni, do arkusza stylw powinnimy dopisa
nastpujcy fragment kodu, ktry okrela kolor i rodzaj czcionki, dopenienie i lew
krawd caego bloku.
blockquote
{
b o rd e r-le ft:sol id 5px gray:
fo n t-f ami 1y :monospace:
color: green:
padding: 5px;
}

Rysunek 5.17 przestawia gotowy projekt.


Rysunek 5.17,
Efekt dziaania
pow yszego
arkusza stylw

Katalog Ciekawych Stron


Rafa Kochanowski
Sznman - strona prywatna
M aja Kierzkowska
Przeprowadzki
TwojePC pl - Twoje rodo informacji o Sprzede
Helion - Literatura informatyczna w najlepszym wydaniu
Grzegorz Harasimowicz
4 M A X - sklep internetowy
Pozycjonowanie
Portal CDRinfo.pl - rdb wiedzy o nagrywaniu pyt CD/DVT)
Dziecko w sied
Komputery to nasza pasja : pvrchla.pl
Otwarty Katalog Internetowy
M O N T E R - Tumaczema programw
SafeLock - program do zabezpiecze C D
eppu - informatyka i multimedia Przemysaw Danowski.

Strony W W W i internet

Poradnik webmastera - Pawe Wimmer


Oil Peak ropa naftowa
Przeprowadzki
Bartosz D anowski t w szystkie praw a zastrzeone

Sekcja Sklep
Sekcja Sklep zawiera krtki wykaz poszczeglnych ksiek wraz z najwaniejszymi
informacjami, moliwoci zakupu lub przejcia do penej strony z opisem. Na rysun
ku 5.18 przestawiem efekt, ktry chcemy uzyska.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

239

Rysunek 5.18.
Przykad strony Sklep

B artosz D anow ski

lite ra tu ra in fo rm atyczna
Stro n a gw na

Ksiki i Artykuy O mnie

_
Przyjazne stro n y

K ontakt |j S k e p |

Danowski.pl

Sklep
ABC sam optymalizuj? komputer
ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 7 -2
Form at: B5, stro n : 384
D ata w y dania: 2 0 0 7 -0 7 -1 2

C en a : 3 9 .0 0 z
D odaj d o koszyka

i optymalizacja itron WWW. Jak to si?


ISBN: 9 7 8 -8 3 -2 4 6 -0 6 9 0 -0
F o rm at: B5, stro n : 264
D ata w y dania: 2 0 0 7 -0 6 -1 2

C e n a : 3 9 .9 0 z
. D odaj d o koszyka

Nagrywani# pyt CD ( DVD. Kurs. Wydani# II


ISBN: 9 7 0 -8 3 -2 4 6 -0 7 9 9 -0
Form at: B5, stro n : 328
D ata w y dania: 2 0 0 7 -0 4 -1 6

kcD'ovo C e n a : 3 4 .9 0 z
jE te lS

o d a j do koszyka

Windows Vista PL. Instalacja i naprawa. wiczenia


ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 4 -1
Form at: A5, stro n : 224
D ata w y dania: 2 0 0 7 -0 3 -2 7

Vista Pt

Koszty w ysytki
K raj

0,00 z - p a tn o k a rt kredytow ,
3 ,5 0 z w ysyka zwyk p o c z t za
pobraniem ,
1 1 ,9 9 z - w ysyka p o c z t kunersk.
Z a g r a n ic a
+ 70<Wi c e n y k s ld - pa tn o k a rt
kredytow i w ysyka zwyk p o c z t ,
* 1309*> c e n y k s i k i - pa tn o k a rt
kredytow i w ysyka p o c z t lotnicz.
Opinie czytelnikw
Wanie
przeczytaem Pana
. '
ksik "ABC sam
sam
naprawiam
kom puter". Tak ja k
poprzednie je s t
napisana bardzo
zrozumiaym
jzykiem dla laika
kom puterowego, takiego ja k ja . To
dobrze, i e unikn Pan ty c h wszystkich
fa chowych term inw, zrozumiaych dla

j3

B lo,,
- T ako rzec;
Poradnik w

C en a : 19 .0 0 z
D odaj d o koszyka

m a rcoos.techblog
* W ebAudit Blog

Windows XP. Naprawa i optymalizacja. wiczenia


praktyczne
; ISBN: 9 7 8 -8 3 -2 4 6 -0 7 0 2 -0
: Form at: AS, stro n : 224

I Windows XP Data wydarua: 2007-02-21

C e n a : 19 .0 0 z

RSS
W szystkie wpisy
I Ksiki
Artykuy

D odaj d o koszyka

Nero 7 Essenttals. wiczenia praktyczne


; |SBN: 9 7 8 -8 3 -2 4 6 -0 4 6 0 -9
I mTTmhIi
N g IO

n o w ociach na stronie zaprenum eruj


b iu le ty n in f o r m a c y jn y *

' Form at: AS, stro n : 176

7i

D ata wvdan*a: 20 0 7 -0 2 -0 1

C e n a : 17.90 z
0 D odaj do koszyka

Bartota Oanowsk. t wsrysllco prawa zistijato n e ! Web J.:*>orr Mikoaj Barezortewicz I Pomnwl By wordprest

Do sporzdzenia pojedynczego moduu, widocznego na licie, wystarczy nagwek


stopnia drugiego, kilka akapitw oraz okadka ksiki. Stosowny kod moe wyglda
mniej wicej tak:
<h2>Sklep</h2>
<div id="sklep">
<h2><a href="abcopt.html">ABC sam optymalizuje komputer</a></h2>
<a href="abcopt.html"><1mg src="obrazki/abcopt2.jpg" alt="ABC sam optymalizuje
komputer1 title="ABC sam optymalizuje komputer" width="88" height="115" /></a>
<p>ISBN: 978-83-246-1037-2</p>
<p>Format: B5. stron: 384</p>
<p>Data wydania: 2007-07- 12</p>
<p id="cena">Cena: 39.00 z</p>
<p id="koszyk">Dodaj do koszyka</p>
</div>

2 40

Tworzenie stron WWW w praktyce

Za pom oc stylw w pierwszej kolejnoci ustalamy dla caoci szeroko oraz wyso
ko, kolor ta oraz rozmieszczenie poszczeglnych elementw. W praktyce moemy
do tego uy kodu widocznego poniej.
div#sklep
{
border:sol id lpx s ilv e r:
background-color:#D7D5D5:
margin:10px:
padding:10px;

Dalej naley wymusi, aby tekst obla obrazek z prawej strony. Przy okazji okrelimy
odstp tekstu od obrazka. Odpowiedni kod moe wyglda tak:
di v#sklep i mg
{
flo a t : le f t :
border:solid lpx s ilv e r:
padding:5px:
}

W tej chwili pozostao ju tylko zaj si odpowiednim formatowaniem tekstu. Roz


mylnie skorzystaem z oddzielnych akapitw, aby uzmysowi Ci, e w ten sposb
te mona budowa stron i formatowa odpowiednie elementy. Poniszy fragment ar
kusza stylw odpowiada za okrelenie dostpw pomidzy akapitami, kolom tekstu i ta.
di v#sklep p
{
margin:0:
padding:0:
}
p#cena
{
font-size:25px;
c o lo r:red;
font-weight:bold:
}
p#koszyk
{
border: lpx solid s ilv e r:
background-color:#D7D5D5;
padding: 5px;
padding-left:20px;
padding-right:20px;
te xt-a lig n :ce n te r:
font-w eight:boi der;

Sekcja Kontakt
Ostatnim elementem mojej strony jest dzia Kontakt. Nie musz chyba nikomu mwi,
jak wany jest to element i e musi si on znajdowa na kadej szanujcej si stronie.
Rysunek 5.19 przedstawia m oj stron kontaktow.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

24 1

Rysunek 5.19.
Podstrona Kontakt

B artosz D anowski
l i t e r at u r a i nf o r m a t yczna _
S tro n a g w n j

Ksiki

Artykuy

O mtue

___________
P izy ja/r.e stro n y ji K o n ta k t

D anowski.pl K ontaktu

Sklep

Siukaj

K o n ta k t
Uwaga, zanim do mnie nap iszesz uw anie p rze cz y taj informacje
zam ieszczone poniej.
Jeeli c h c e sz sk o rzy sta z form ularza k o n tak to w eg o musisz
bezw zgldnie wypeni w szystkie pola, P o d a n ie b d n e g o
a d r e s u u n ie m o liw i m i o d p o w ie d n a T w o j w ia d o m o .
Jeeli c h ce sz b y informowany o no w o ciach n a te j stronie
zamw mj biuletyn informacyjny.
U dostpniony form ularz suy w ycznie d o korespondencji
p ry w atnej z moimi czytelnikami. N ie y c z s o b ie
o tr z y m y w a n ie z a m a w ia n y c h in fo rm a c ji h a n d lo w y c h
o raz sp am u .

formatmri kom*kowy 1
Imi:

O pinie czytelnikw
Zdecydowaam si
do Ciebie napisa,
poniewa bardzo
spodobaa m i si
konwencja ksiki
p t. 'Kom puter PC wiczenia
praktyczne"...
naprawd super.
Wszystko je s t napisane jasno, zwile i
klarownie...

Boci
m a rcoos.techblog
Tako rze c z e Shrew
n e t to

T re w iadom oci:
- W eb Audit Bog
Poradnik w ebm astera

RSS
3 W szystkie wpisy
j Ksiki
Wyik,:

3 Artykuy

N ew sletter
Jek c h ce sz by pow iadam iany o
now ociach n a stronie zaprenum eruj
b iu le ty n in f o r m a c y jn y *

W dalszej czci niniejszego podrozdziau opisaem tylko, w jaki sposb zbudowa


formularz i sformatowa go za pomoc kaskadowych arkuszy stylw. M usisz jednak
pamita, e formularz kontaktu musi by obsuony przez odpowiedni skrypt. W prze
ciwnym wypadku treci wysane za jego porednictwem s nieczytelne. Wicej infor
macji na temat obsugi formularza znajdziesz w dodatku do niniejszej ksiki.
Zwr uwag na to, e zrezygnowaem z podawania adresu e-mail, a zamiast tego udo
stpniem formularz kontaktowy. Takie rozwizanie pozwala wysa do mnie wiado
mo bez koniecznoci posiadania wasnego konta. Poza tym formularz skutecznie
chroni mj adres przed spamem. Uzupenieniem formularza s krtkie zasady kontaktu,
ktre m aj usprawni cay proces. Kod XHTM L odpowiedzialny za przygotowanie
strony kontaktowej znajduje si poniej. Zwr uwag na ciekawe zastosowanie listy
definicji do budowy formularza.
<h2>Kontakt</h2>
<p>Uwaga, zanim do mnie napiszesz uwanie przeczytaj informacje zamieszczone
poniej,</p>
<ul>
<li>Jeeli chcesz skorzysta z formularza kontaktowego musisz bezwzgldnie wypeni
wszystkie pola. <strong>Podanie bdnego adresu uniemoliwi mi odpowied na Twoj
wi adomo.</strong></li >

242

Tworzenie stron WWW w praktyce

<li>Jeeli chcesz by informowany o nowociach na te j stronie zamw mj biuletyn


inform acyjny.</li>
<li>Udostpniony formularz suy wycznie do korespondencji prywatnej z moimi
czytelnikami. <strong>Nie ycz sobie otrzymywa niezamawianych informacji handlowych
oraz spamu.</strong></li>
</u1>
<form acti on="http: //www. roy. i center. pl /form/ method=''post">
<fieldset><!egend>Formularz kontaktowy</legend>
<dl>
<dt><strong>Imi :</strong></dt>
<dd><input type="text" name="Imi" tabindex="l" value='"' /></dd>
<dt><strong>E-mail:</strong></dt>
<dd><input type="text" name="E-mail'' tabindex="2" value=" /></dd>
<dt><strong>Tre wiadomoci:</strong></dt>
<dd><textarea class="y_msg" name="Wiadomo tabindex="3" rows="8" ></textarea></dd>
<dd>
<input type="submit" name="Submit" tabindex="4" value="Wylij" /><br />
<input type="hidden" name="to" value="bartek@danowski.pl" /><br />
<input type="hidden" name="subject" value="Wiadomo ze strony" /></dd>
</dl>
< /fieldset>
</form>

Oczywicie, kod XHTML wymaga stosownej obrbki za pomoc kaskadowych arkuszy


stylw. Musimy okreli rozmiar pl, waciwoci etykiety, kolor obramowania i par
innych drobiazgw. Przykadowy zestaw polece przydatnych w tym przypadku za
mieciem poniej.
#lewa input, textarea

{
wi d th :350px:
}
legend
{
border:sol id lpx s ilv e r;
padding:3px;
background-colo r:#EEEEEE;
}
fie ld s e t
{
border:solid lpx green;

Nazwy plikw
Przygotowaem ju wszystkie elementy strony i utworzyem kilkadziesit plikw podstron witryny. Cao zostaa poczona i tworzy mj internetowy wizerunek.
Na zakoczenie tego rozdziau warto napisa kilka sw na temat nazw plikw, ktre
odpowiadaj poszczeglnym podstronom. Wbrew pozorom jest to bardzo wana spra
wa, gdy brak konsekwencji w nazewnictwie poszczeglnych plikw w przypadku
duych i rozbudowanych witryn jest przyczyn wielu problemw. Dlatego te staraj si

Rozdzia 5. Praktyczny projekt. Moja strona domowa

243

tak dobiera nazwy plikw, by byy one moliwie krtkie i zwizane z zawartoci
danej strony. Oczywicie, nie zawsze jest to moliwe, dlatego warto opracowa jaki
klucz. Na przykad w przypadku nazw plikw moich ksiek mona uy nastpuj
cego schematu nazewnictwa poszczeglnych plikw:
a b co p t.h tm l,
a b co p t_ sp is. htm l,
p o zo p t.h tm l,
p o z o p t s p is . htm l,

Oczywicie, nazwa taka moe si wydawa mao zrozumiaa, ale mnie mwi bardzo
duo. Zacznijmy od tego, e kada ksika wymaga dwch plikw. Pierwszy z plikw
zawiera opis ksiki i jego nazwa skada si z identyfikatora. Natomiast drugi plik to
spis treci i w tym przypadku na pocztku wystpuje identyfikator, a po podkreleniu
dodatkowo sowo sp is. Dziki takiemu nazewnictwu pliki ksiki zawsze bd obok
siebie i atwo bdzie mona znale odpowiedni ksik.

Uwaga

Pamitaj, e nadajc nazwy poszczeglnym plikom, nie m oesz stosow a spacji


rozdzielajcej poszczeglne czony nazwy. Zalecam, by wieloczciowe nazwy zaw
sze rozdziela za pomoc podkrelenia lub mylnika.

Kolejn bardzo wan spraw jest wielko liter stosowanych w nazwach. Jeeli uwa
nie czytasz niniejsz ksik, z pewnoci pamitasz, e ju o tym wspomniaem.
Dlatego teraz jedynie przypomn w duym skrcie zasady, jakie panuj w wiecie
internetowych publikacji. Ot serwery internetowe w zdecydowanej wikszoci pra
cuj pod kontrol systemw z rodziny Unix, a te rozrniaj wielkoci uytych liter
i np. P lik .h tm l oraz p lik .h tm l to dwa zupenie rne pliki. W zwizku z tym proponu
j, by w nazwach zawsze uywa maych liter, a dziki temu unikniesz problemw.
Zasada ta tyczy si zarwno plikw strony, ja k i obrazkw.

Testowanie gotowego projektu


W tej chwili moemy przyj, e strona WWW jest prawie gotowa. Do peni szcz
cia niezbdnych jest jeszcze kilka testw. Musimy sprawdzi, jak poszczeglne podstrony dziaaj w rnych przegldarkach, w rnej rozdzielczoci oraz czy s zgodne
z wymaganiami specyfikacji.

Testy w rnych przegldarkach


Testowanie wygldu w rnych przegldarkach ogranicza si do otwarcia poszczegl
nych podstron w nastpujcych przegldarkach: Internet Explorer, Mozilla Firefox, Opera
oraz Safari. Pierwsze trzy przegldarki s szczeglnie wane, bo to do nich naley
spora cz rynku. Internet Explorer to ponad 60% udziau w rynku i rozwizanie to

244

Tworzenie stron WWW w praktyce

jest w duej mierze uywane przez mniej wymagajcych oraz pocztkujcych inter
nautw. Mozilla Firefox to ponad 30% udziau w rynku i przegldarka ta jest wyko
rzystyw ana przez bardziej zaawansowanych i wymagajcych uytkownikw. Opera
goci na ok. 6% wszystkich komputerw podczonych do sieci i jest wykorzystywa
na przez wiadomych i wymagajcych uytkownikw. Powysze dane pochodz z ran
kingw publikowanych na stronie http://ranking.pl.
Rysunki 5.20, 5.21, 5.22 oraz 5.23 pokazuj widok wybranej podstrony w rnych
przegldarkach. W ten sam sposb naley sprawdzi wszystkie podstrony witryny.
i ABC sam optym alizuj kom puter Bartosz Danowski - W in dow s in ternet Explorer

tacza
&

9 1

| *| xj | fcogie

||S http://danowsk .pl/ks azki/wecttu -seri /abc/abc-sam-optymaluuje-komputer/


ING BenkOrtline f I Windows Liv* OneCare

^ Laptopy, notebooki, tablety -

iit ksiazka - uwaga ! - Pozycjonowanie 1Optymalizacja

ABC sam optymalizuj komputer Bartosz Dano...

'||

1 - Strona

Narzdzia

Ja k za p e w n i sta b iln e
fu n k cjo n o w a n ie ko m p utera?
Jak p rz y s p ie s z y dziaanie
p rogram w ?
Ja k p o p raw i ko m fo rt p ra c y

K o n fig u racja

1 o p ty m a liza cja

w sy ste m ie o p era cy jn ym ?
fr M o n ta i nap raw a
W w ielu p rz y p a d k a ch k o m p ute r p o
w ym ianie p o dze sp o w

4 P od k r ca n ie

sko nfig urow a niu n a d a l nie dziaa


tak , ja k u y tk o w n ik o cze k iw a. Na
p o z r n ajp ro stsz y m w y jc ie m je s t
w te d y zakup n o w eg o sp rz tu ,
je d n a k j e s t to k o szto w n e
ro zw i za n ie i, c o g o rsz a , c z s to
nie g w a ra n tu je s p o d z ie w a n y ch
e fe k t w . Na s z c z c ie istn ieje
le p sz y i ta s z y sp o s b .
W sp cz e sn e k o m p ute ry i s y ste m y

Stro.na d om ow a ksiki

* N ag ryw an ie p y t

S p is tre c i
ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 7 -2

* Program y biurow e

Form at: 85, stro n: 384


D a ta w y da nia : 2 0 0 7 -0 7 -1 2

S y s te m y o p e ra cy jn e

Fra g m e n t k siki w PDF

* T w o rz e n ie stro n W W W

Cena: 39.00 z

= W edug serii

.T D odaj d o k o szy ka

* ABC

o p e ra cy jn e d a j w iele m oliw o ci
http://danowski.pl/mapa-strony/

1 tuning

* M o n ta w ideo

&Internet | Tryb chroniony, wczony

%100%

Rysunek 5 .2 0 . Widok podstrony w M S Internet Explorer 7

Jeeli w ktrej z przegldarek co nie dziaa poprawnie, naley to poprawi. Na szcz


cie w przypadku gdy trzymasz si specyfikacji, problemy bd wystpowa spora
dycznie.

Testy rozdzielczoci
Kolejnym bardzo wanym testem, jaki naley przeprowadzi przed publikacj, jest
sprawdzenie wygldu strony w rnej rozdzielczoci. Musisz wiedzie, e internauci
pracuj na rnych kom puterach i m aj rn rozdzielczo ekranu. W edug danych
publikowanych na stronie http://ranking.pl pierwsza pitka zestawienia uywanej roz
dzielczoci wyglda nastpujco:

Rozdzia 5. Praktyczny projekt. Moja strona domowa

24 5

ABC Mm optymalizuj komputer Bartosz Danowski - Mozifla Firefox


Plik

tdycja

Widok

Historia

Zakadki

Narzdzia

Pom oc

.[ I http://danowski.pl/ksiazki/w edlug-sem /abc/abc-sam-optym alizuje-kom puter/

Helion

Danowski

Disable* & Cookies*

Hardware
i CSS*

JWiadomoci

] Forms* * Images*

Pozycjonowanie
Information*

Google Rei dr lJ ING Online ,

Miscellaneous* _

W*

Materiay ksizki

Outline* * Resize-

Tools*

Sowniki O Programy

View Source*

Options-

A Mapa strony

Bartosz Danowski
literatura informatyczna
| Strona gwna [ K s i k i || Artykuy || O mnie J| Przyjazne strony [ Kontakt

11 Sklep 1

Danowski.pl ABC

Szukaj

ABC sam optym alizuj kom puter

| Szu kaj na stronie

1E S 1

W y k o r z y s t a j p e n i m o liw o c i

Kategorie

s w o je g o k o m p u t e r a

Jak zapewni stabilne


funkcjonowanie komputera?

Fotografia cyfrow a
Internet

Jak przyspieszy dziaanie


programw?

* Komputer PC

1optymalizacja
4* Monta 1naprawa
Podkrcanie 1 tunmg

Jak poprawi komfort pracy


w systemie operacyjnym?
W wielu przypadkach komputer po
wymianie podzespow i
skonfigurowaniu nada nie dziaa
tak, jak uytkownik oczekiwa. Na
pozr najprostszym wyjciem je st
w tedy zakup nowego sprztu,
jednak je st to kosztowne
rozwizanie i, co gorsza, czsto

<* Konfiguracja

< Monta wideo


Strona domowa ksiki
Spis treci

Nagrywanie pyt
Programy biurowe

ISBN: 978-83-246-1037-2
Format: B5, stron: 384

me gwarantuje spodziewanych
efektw. Na szczcie istnieje

System y operacyjne

Data wydania: 2007-07-12


Fragm ent ksiki w PDF

Tworzenie stron WWW

lepszy i taszy sposb.


Wspczesne komputery i system y

Cena: 3 9 .0 0 z

Wedug seni
O j P ig tf M

Cen*

2.224i

Rysunek 5 .2 1 . W idokpodstrony w Mozilli Firefox 2.0.0.4


'S

4 } ABC M m optymalizuj komputer Bartosz Danowski - Opera


Pld

Edycja

<r*

Widok

Zakadki

ii * *
er
4
* S

-#

Widzety

Narzdzia

o-

J ja y e g g g g a a a o i

Q?

[/>) http://danowski.pl/ksiazki/ wedug


senu abc/abc sam -optymalizuje komputer '

Bartosz Danowski
literatu ra in fo rm a ty c/n a
Strona gwna [ K s i k i! Artykuy

O mnie | Przyjazne strony

Kontakt

Sklep

Danowskt.pl * ABC

ABC sam optym alizuj kom puter


W y k o r z y s t a j p e n i m o liw o c i

Kategorie_____

s w o je g o k o m p u t e r a

* Fotografia cyfrow a

Jak zapewni stabilne


funkcjonowanie komputera?

* Internet

Jak przyspieszy dziaanie

* Komputer PC

programw?
Jak poprawi komfort pracy
w systemie operacyjnym?

i Konfiguracja

skonfigurowaniu nadal nie dziaa


tak, jak uytkownik oczekiwa. Na
pozr naprostszym w yjciem jest
wtedy zakup nowego sprztu,
jednak je s t to kosztowne
rozwizanie , co gorsza, czsto
me gwarantuje spodziewanych
efektw. Na szczcie istnieje

lepszy taszy sposb.


Wspczesne komputery

1optym alizacja

Monta i naprawa

W wielu przypadkach komputer po


wymianie podzespow i

Pomoc

Podkrcanie i tunmg
Monta wideo
Strona domowa ksiki
Spis treci
ISBN: 978-83-246-1037-2
Format: B5, stron: 384
Data wydania: 2007-07-12

* System y operacyjne

Fragm ent ksiki w PDF

Tworzenie stron WWW

C e n a : 3 9 .0 0 z

* Wedug seni

45

system y
Dodaj do koszyka
operacyjne daj wiele moliwoci
w zakresie samodzielnej poprawy
TMhknn nr a t.stahiinnri tn aania- ncnnamu.

Rysunek 5.22. Widok podstrony w Operze 9.2

- Nagrywanie pyt
Programy biurowe

ABC
k wiczenia

0 ^ Googl

-J 6 d

246

Tworzenie stron WWW w praktyce

ABC sam optymalizuj komputer Bartosz Danowski


Fil. Edit
mmi

IQ *

View History Bookmarks Window Help

^^[*c j^ -F ^)I t |j^hnp://danowskl.p/ksiazki/wedlug-scrii/abc/abc-sam-optyrMltzuje-komputer/^^

! m

Apple

Amazon

eBay

Yahoo*

News (361 *

Bartosz Danowski

Laptopy.

i W

Google

. tablety

hMapa strony

Bartosz Danowski

literatu ra in form atyczna


Strona gwna j: K si k i : A rtykuy O m nie j Przyjazne strony

Danow ski.pl * ABC

Kontakt Sklep j
S zu k a j
I Szukaj na stroni...

ABC sam o ptym a lizu j kom puter

EH

W y k o r z y s ta j p e n i m o liw o c i

K a te g o r ie

s w o je g o k o m p u te ra

Jak zapew ni stabilne


funkcjonowanie komputera?

Fotografia cyfrow a
Internet

Jak p rzyspieszy dziaanie


program w?

Komputer PC

Jak popraw i kom fort pracy


w system ie operacyjnym ?

Konfiguracja 1 optym alizacja

W w ielu przypadkach komputer


po w ym ianie podzespow i
skonfigurow aniu nadal nie dziaa
tak, ja k uytkow nik oczekiw a.
Na pozr najprostszym w yjciem
Strona domowa ksiki
Jest wtedy zakup nowego sprztu,
Spis treci
jednak jest to kosztowne
ISBN: 978-83-246-1037-2
rozw izanie i, co gorsza, czsto
Format: B5, stron: 384
nie gwarantuje spodziewanych
Dato wydania: 2007-07-12
efektw. Na szczcie istnieje
Fragm ent ksiki w PDF
lepszy i taszy sposb.
W spczesne kom putery i
Cena:
system y operacyjne daj w iele
,; Dodaj do koszyka
m oliwoci w zakresie
sam odzielnej poprawy szybkoci
oraz stabilnoci dziaania program w, a take zw ikszania

&Monta i naprawa
&Podkrcanie i tuning
Monta wideo

Nagryw anie pyt


Program y biurowe
System y operacyjne
Tworzenie stron WWW
Wedug serii

3 9 .0 0 z

* ABC
wiczenia

Rysunek 5 .2 3 . Widok podstrony w Safari 3.0.2 dla Windows

1. 58% 1024x768
2. 18% 1280x1024
3. 7% 800x600
4. 7% 1152x864
5. 6% 1280x800

Podsumowujc, strona powinna prawidowo wyglda w najpopularniejszych warian


tach rozdzielczoci. Idealnym rozwizaniem jest taki projekt witryny, ktry automatycz
nie dopasowuje si do rozdzielczoci przegldarki. Oczywicie, nie jest to moliwe
w przypadku kadego projektu, ale mimo to warto o to zabiega.
Testowanie w rnej rozdzielczoci moe odbywa si na dwa sposoby. Moesz zmie
ni swoj rozdzielczo za pomoc mechanizmw wbudowanych w system operacyjny
(rysunek 5.24) lub skorzysta z przegldarki Mozilla Firefox wyposaonej w dodatek
o nazwie W eb D evelo p er.
O ile pierwszy sposb testowania nie wymaga dokadniejszej analizy, to w przypadku
drugiego warto powici mu kilka sw. Dodatek W ebDeveloper moemy pobra ze
strony h ttp s://a d d o n s.m o zilla .o rg /p l/fire fo x/a d d o n /6 0 . Po zainstalowaniu go pojawi si
dodatkowy pasek przy grnej krawdzi ekranu (rysunek 5.25). Po klikniciu przycisku
R e size wybieramy opcj E d it R e size D im en sio n s i w nowym oknie wpisujemy rozdziel
czo, ktra nas interesuje.

247

Rozdzia 5. Praktyczny projekt. Moja strona domowa

Rysunek 5.24.
Zmiana
rozdzielczoci ekranu
Przecignij ikony, aby o dp ow ia da y m o n ito ro m .

[1. Rodzajowy monitor PnP na NVIDIA GeForce 7600 GS


0 To jest mj monitor gwny
0 Powiksz pulpit do rozmiarw tego monitora
Kolory:

Rozdzielczo:
~Q

Niska

1280 na 1024

| Najwysza (32 bity)

W ysoka

iksel^

Jak uzyska najlepsze ustawienia wywietlania?

Ustawienia zaawansowane...
Anuluj

(0. Bartosz Danowski - Mozitla Firefox


Plik

Edycja

-4
Helion

Widok

Historia

'

Narzdzia

=naiiHil'

*"
Pomoc

j http://danowski.pl/

Danowski

Disable* S Cookies*

Zakadki

Hardware ,.J
CSS*

Forms*

i
Images*

Pozycjonowanie

'&$Information*

Google Reader

WG Online

Miscellaneous* .

Materiay ksiaiki

Arty k u y

O innie

Sowniki

Programy
Options*

y Q

a p a stro n y

Display Window Size In Title


Resize Window

literatura informatyczna
I S t r o n a g w n a ] K siki

::fs

W ikipedia

' Tools* - J View Source*


Display Window Size

Bartosz Danowski

P rzy ja z n e stro n y

800*600
1024x768

O anow ski.pl

ABC sam optymalizuj komputer


1 2 .0 7 .2 Q Q 7

''.- N ie m a k o m e n t a r z y

E d v tu t

Rysunek 5 .2 5. WebDeveloper

Po zdefiniowaniu odpowiedniej rozdzielczoci, w ktrej bdziemy testowa stron, mo


emy zaj si testowaniem strony. Wystarczy klikn przycisk Resize i wybra z listy
rozdzielczo, w ktrej chcemy sprawdzi wygld strony. Na rysunkach 5.26 i 5.27
pokazaem widok mojej strony w rozdzielczoci 1024x768 oraz 1280* 1024.
W przypadku wykrycia ewentualnych problemw z dziaaniem strony w danej roz
dzielczoci niezbdna jest korekta kodu i usunicie problemu.

Testy zgodnoci kodu ze specyfikacj


Ostatnim i najwaniejszym z testw jest sprawdzenie kodu pod wzgldem zgodnoci ze
specyfikacj, z ktrej korzystalimy podczas tw orzenia strony. W moim przypadku
sprawdzimy, czy witryna zostaa poprawnie stworzona na podstawie XHTML 1.0 Strict.

Tworzenie stron WWW w praktyce

248

Danowski - MoziHa Fi:


Pbk

Edycja

Widok

Historia

Zakadki

Narzdzia

Pomo

'.,

Heiion

'Danowski

s Disabter . Cookies

Hardwarf
. CSS*

Vt*

Wiadomo&i

j Forms*

Pozycjonowanie ; FV Google Reader

Images'

Information''

Miscellaneous*,.

B arto sz D anow ski

l i t e r a t u r a i nf or mat yczna
! S t r o n a g w n a jj Ksiki j A rtykuy

ING OrAnt

Outline*

Resize*

Tools-

Stowmlu

View Source*

Program)
Options* /

_______________

O mnie

Prz y jaz n e s tr o n y

D anow ski.pl

K on ta k t

S klep |

Szukaj
| Szukaj ni

ABC sam optymalizuj komputer


1 2 .0 7 .2 0 0 7

P N ie m a k o m e n tarz y E d y tu j

Kategorie

"ABC s a m o p ty m a liz u j k o m p u t e r to
p rz y st p n y p o radnik dla o s b , k t re c h c
moliwie n a jlepiej p rz y g o to w a sw o jeg o
p e c e ta d o w y d a jn e j i k o m fo rto w ej p ra c y .
Dziki te j k si c e n a u c z y sz s i sk u te c z n ie

A ktualnoci
* Ciekaw e program y
Mozilla

o p ty m alizo w a dziaanie k o m p u tera,


o dpow iednio k o nfigurujc u sta w ien ia
B IO S-u, sy ste m u o p e ra c y jn e g o i u ry w a n y c h
program w . Z o b ac zy sz, ja k podzieli dyski i

Nero
Nie n a te m a t
O goszenia

ro zp la n o w a p rze ch o w y w an ie d a n y c h .
D ow iesz si ta k 2 e , jak z w ik sz y b e z p ie c z e stw o s y s te m u i k t re
e lem e n ty k o m p u te ra w a rto w ym ieni, jeN zaw io d in n e sp o so b y
p o p raw y w y d ajn o ci.

P orady
* P o zy cjo n o w anie stro n
Prgierz

C z y ta j c a o

* S tro n y WWW i in te r n e t

Noc pozycjonerw

Matenety ksiaZki ..

2 4 .0 6 .2 0 0 7

W anie p isz

Nie m a k o m e n tarz y Edytuj

Tym raz em n a szyb ko i ty p o w o inform acyjnie. W s o b o t i niedziel


. /.m .n R -J lI.m rn d h fflriB u n i nnolnonnlsJc* N n r n a n i n n o m i w .............

Opinie czytelnikw

P*pn* Compt* Q 3 372,

{( 0

Rysunek 5 .2 6 . Widok strony w rozdzielczoci 1024 x 768


dyqa

Widok

Hison*
&

Helion

Dmowski

gaktodlo

Naotdiia

Pomoc

.IS hp:'/dnojki.pl/

. Hwdwwe . J Wiadomoci

/Pozycjonowani*

i Disable- & Cookier* _j CSS- ' . Porm* ' Images* ii! Information*

Google Rtadar

Mrscl*neoirt*

ING Online

i Melenely kuii

Sowniki

Outline- . , Rewie* ... Tooh* yt, View Source*

; Programy
Options* /

Potyciki.pl - Debetuj o iJ WKZADYZAMKA- Op...


Hf

Bartosz Danowski

literatura informatyczna

i | l>yj:i.e strony { K ontakt

Sklep

Danowsla.pl

ABC sam optymalizuj komputer


5 ! 12 07.2007 'Nw ma kom entarzy Edytuj
ABC s a m o p ty m a liz u j k o m p u te r to
przystpny poradnik dla osb. ktre c h c
moliwie najtpiej przygotow a swojego
p e c e ta do w ydajnej i komfortowej pracy
Dziki tej ksice nauczysz si sk u te cz n e
optymalizowa dziaanie komputera,
odpowiednio konfigurujc ustaw ienia
BIOS-u. sy stem u operacyjnego i uywanych
programw. Z obaczysz, jak podzieli dyski i
rozplanowa przechow yw anie danych.
Dowiesz si tak e, jak zwikszy b ezpieczestw o system u i ktre
elem enty kom putera w arto wymieni, jeli zaw iod inne sposoby
popraw y wydajnoci.
Czytaj c ao *

Noc pozycjonerw
* 29.06.2007 /

Nie ma kom entarzy Edytuj

Tym razem na szybko i typow o informacyjnie. W so b o t i niedziel


(30.0 6 -0 1 .0 7 ) odbdzie si ! oglnopolska Noc jjozycjonerw .
O rganizatorzy przygotowali szereg niespodzianek i juz nie mog
si d oczeka spotkania...
W rd patronw imprezy znajduj si O net.pl, Helion.pl, Home.pl,
IAB, Netspnnt.pl.
Osoby zainteresow ane nabyciem ksiki Pozycjonowanie i
optymalizacja stro n WWW. Jak to si robi w promocyjnej cenie
(jedyne [ ..]

Opinie czytelnikw
Ostatnio zakupiem
Pana fantastyczn
ksik o programie
Przeczytaem j
ca.

C zytaj c ao

Bogi

Plagiat
*28.0 6.2007

Komentarzy: 7 Edytuj

Poradnik w ebm astera


)

Rysunek 5 .2 7 . Widok strony w rozdzielczoci 1280*1024

C<*T*M $

3.372s

Rozdzia 5. Praktyczny projekt. Moja strona domowa

249

Testy moemy przeprowadzi na dwa sposoby. Podczas tworzenia kodu w edytorze


kED warto skorzysta z wbudowanego narzdzia do analizy poprawnoci kodu. Wystar
czy, e po zapisaniu pliku na dysku wybierzesz z menu Plik opcj Sprawd poprawno
dokumentu.
Jeeli test przebiegnie pomylnie i nie zostan znalezione bdy, to w dolnej czci
ekranu pojawi si stosowana informacja (rysunek 5.28).
kED 2.1.4.0 - C:\Users\Bartek\Desktop\Strona WWW\danowski.pl\sktep.html
Plik

Edycja

Szukaj

J - -

m M i ) I J
i a J A,

XHTML

PHP

JavaScript

Opcje

Pomoc

aj I d l I ar* *1 X i a U > t > a | < t


B II! /

A A' x x . ! H

H 13 1

0 mdex.html (ISO)Q 0 Wep.htm (ISO) Q i

8
9

10
11

<t xml v e r s i o n = 1 .0 " e n c o d in g - 1' Ts o - 8 6 59 - 2 >


< 1DOCTYPE htm l PUBLIC -//W 3C//D TD XHTML 1 . 0 S t r 1 c t / / E N " " D T D / x h t m ll- S t H C t . d td">
<html x m ln s h ttp ://w w w . w B .o rg /1 9 9 9 / x h tm l" x m l: l a n g - " p V la n g " p l" >
<head>
<meta h t t p - e q u iv " c o n t e n t - t y p e " c o n t e n t - a p p lic a t io n / x h t m l+ x m l; c h a r s e t is o - 8 8 5 9 - 2 "
<meta name D e s c r ip t io n " c o n t e n t " S t r o n a a u t o ra k s i e k i a r t y k u w o te m a ty c e
in fo r m a t y c z n e j. B io g r a f ia , p u b lik a c j e , o p in ie c z y t e ln ik w . " />
<meta name K e yw o rd s" c o n t e n t " B a r t o s z D a n o w s k i, L i t e r a t u r a in f o r m a t y c z n a , spam,
n e ro , b io s , m onta k o m p u te ra , i n s t a l a c j a w indow s" />
cm eta name A u th o r " c o n t e n t " B a r t o s z D an o w sk i" />
<meta name" G e n e r a t o r " c o n t e n t " kED" />

/>

< t it le > L it e r a t u r a in f o r m a t y c z n a - B a r t o s z D a n o w s k i< /t1 tle >

12

13
14
15

20

21

< lin k r e l " s t y le s h e e t " h r e f "d a n o w s k i. c s s " t y p e 't e x t / c s s " />


</head>
<body>
< d iv id "n a g lo w e k ">
<a h r e f " / " x im g s r c " o b r a z k i/ lo g o . png a lt " B a r t o s z D anow ski - l i t e r a t u r a
in fo r a m t y c z n a " t i t le = " B a r t o s z Danow ski - l i t e r a t u r a in f o r m a t y c z n a " / x / a >
i . <ul>
< l i x a h r e f " in d e x . h t m l"> s tro n a g w n a < / a x / li>
<1 i ><a h r e f ='' k s i a z k i . h t m l" >k s i k i </a></1 i >
< l i x a h r e f " a r t y k u ly . htm l " > A r t y k u y < / a x / l i>

J j Kod
Ukryj

Zapisz..

jj Sprawd poprawno dokumentu... |j 3 $

Infn- uncuat m a u a t lnftk..3.k&


B-JyTML

1 .0

T ra n s itio n a l

No w a rn in g s o r e r r o r s w ere fo u n d

To l e a r n more a b o u t HTML T id y s ee h t t p : / / t i d y . s o u r c e f o r g e . n e t
P le a s e send bug r e p o r t s t o h t m l - t id y d w 3 .o r g
HTML and CSS s p e c i f i c a t i o n s a r e a u a i l a b l e fro m h t t p : / / w w w . w 3 . o r g /
Lobby y o u r company t o j o i n W3C, s ee h t t p : //w w w .w 3 .o r g /C o n s o r t iu m

INS

NUM Rozmiar 3873 B (3,78 KB)

f c l,W : l

Rysunek 5 .2 8 . Strona bez bdw

Dla porwnania rysunek 5.29 przedstawia sytuacj, w ktrej kod strony zawiera
kilka bdw.
Po przeanalizowaniu komunikatu moemy stwierdzi, e kod zawiera sze bdw.
W takiej sytuacji za pom oc suwaka widocznego po prawej stornie dolnego okna mu
simy cao przewin do gry, aby znale dokadne informacje o bdach i ich lokali
zacji. Poniej zamieciem fragment komunikatu.

Tworzenie stron WWW w praktyce

250

( lcD 21.4.0 - C:\Users\Bartek\Deslctop\Strona WWW\danow5ki.pl\5tciep.html


Plik

Edycja

J * a

Szukaj

XHTML

PHP

* A * J i at

t a ( j psi a

JavaScript

Opcje

<% i X % !

ii, w

z? i H

3J *M J l iJ I s l B

A X1 * 1

A"

0 indexhtm! i lS 0 ) O
7

&

8
\ '*

31

9
10
11
12
13
14
15
16

17
18

19
20
21
22
23
24
25
26
27
J j Kod

sklep html (ISO) Q |

i in fo r m a ty c z n e j. B i o g r a f i a / p u b l i k a c j e , o p in ie c z y t e ln ik w ." />
<m eta name= K eyw ords" c o n t e n t - 'B a r t o s z D a now ski, L i t e r a t u r a in fo r m a ty c z n a , spam,
i n e ro , b io s , m onta k o m p u te ra , in s t a l a c j a w indow s" / >
<m eta n a m e = "A u th o r" c o n te n t= " B a rto s z D a now ski" / >
<m eta name=" G e n e ra to r" c o n te n t-" k E D " / >
< t it le > L it e r a tu r a

in fo r m a ty c z n a - B a rto s z D a n o w s k i< / title >

< l i n k r e l - " s t y l e s h e e t " h r e f - " d a n o w s k i. c s s " t y p e = " t e x t / c s s " / >


< /head >
<body>
< d iv id -" n a g lo w e k " >
<a h r e f " / " x i m g s r c - " o b r a z k i / l o g o . p ng " a lt " B a r t o s z Danowski - l i t e r a tu
in fo r a m ty c z n a " t i t l e " B a r t o s z Danowski - l i t e r a t u r a in f o r m a ty c z n a " x /a >
< u l>
< l i x a h r e f - ' in d e x , h tm l " > s tro n a g w n a < /a > < /li>
< lix a
h r e f - ' k s i a z k i . h tm l " > K s i k i < / li>
< lix a
h r e f " a r t y k u l y . h tm l " > A r t y k u y < / a x / l i >
< lix a
h r e f "o m n ie . h tm l ">o m n i e < / a x / l i >
< lix a
h r e f * " l i n k i . h tm l " > P rz y ja z n e s t r o n y < / a x / l i >
< lix a
h r e f - " k o n t a k t . h tm l " > K o n t a k t < / a x / li >
< lix a
h r e f = " s k le p . h t m l" > s k l e p < / a x / l i >
| < / u l>
i < / d iv >

Podgktd
Zapisz..

~T

j 4 a jj
i^

Pomoc

13*

Sprawd popraw no dokumentu

I n f n - D n rn n p n t r n n t . p t In n k s l i k e XHTMI
6 w a r n in g s , 0 e r r o r s w ere foun d? I

1 .0

T r a n s itio n a l

To l e a r n more a b o u t HTML T id y see h t t p : / / t i d y . s o u r c e f o r g e . n e t


P le a s e send bug r e p o r t s t o h t m l - t id y d w 3 .o r g
HTML and CSS s p e c i f i c a t i o n s a r e a o a i l a b l e fro m h t t p : / / w w w . w 3 . o r g /
Lobby y o u r company t o j o i n W3C, s ee h t t p : //w w w .w 3 .o r g /C o n s o r t iu m

INS

NUM Rozmiar 3867 B (3,78 KB)

K: 35, W: 20

Rysunek 5 .2 9 . Strona z bdami


lin e 17 column 13 - Warning: <img> element not empty or not closed
lin e 20 column 5 - Warning: missing </a> before < /li>
lin e

21column 5 - Warning: inserting im p lic it <a>

lin e

21column 5 - Warning: missing </a> before <a>

lin e

21column 5 - Warning: inserting im p lic it <a>

lin e

21column 5 - Warning: missing </a> before <a>

Pierwszy bd pojawi si w siedemnastej linii i jest nim brak zamknicia znacznika


<img>. W takiej sytuacji zerkamy do okna edytora, szukamy siedemnastej linii i spraw

dzamy, ktry znacznik nie jest zamknity. Nastpnie poprawiamy odpowiedni bd


(rysunek 5.30).
Po skorygowaniu bdu i zapisaniu pliku sprawdzamy dokument ponownie za pomoc
opcji Plik/Sprawd poprawno dokumentu. Dziaanie takie jest niezbdne, ponie
wa bardzo czsto jeden drobny bd wywouje lawin innych, zalenych od niego.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

25 1

,,P kED 2.1.4.0 - C:\Users\Bartelc\Desktop\Strona WWVWdarvowski.pl\slclep.html


Plik

Edycja

Szukaj

j * -

XHTML

- *

PHP

&

fja a jr tS M f:

JavaScript

Opcje

Pomoc

x
u . w m . 1 1
r a* x*
i-i g jn jia s-< > |& 3 S S |e i=

0 index.hM (tSO)Q klep html (ISO) Q I


in fo r m a ty c z n e j. B io g r a f Ta ~ pubYT&ac J e , o p in ie c z y t eT rnkw . * / >
<meta name- Keyw ords" c o n t e n t - 'B a r to s z Danowsk i , L i t e r a t u r a in fo r m a ty c z n a , spam,
n e ro , b io s , m onta k o m p u te ra , in s t a l a c j a w indow s" / >
cmeta nam e*"A u th o r " c o n te n t= B a rto s z D a now ski" / >
croeta n a m e *"G e n e ra to r" c o n te n t= "k E D " / >

<title>Literatura informatyczna - Bartosz Danowski</title>

12

< l in k r e l * " s t y l e s h e e t h r e f - " d a n o w s k i. c s s " t y p e - t e x t / c s s / >


</head>
<body>

13
14

15

rtiiM Idniuaiii

<a h r e f " / >SS1


fmg src*'r0bfakT,Togo. pnT aTt-"Bartbs Da nowsfcT - T T ter atura
inforamtycznai title*"Bartosz Danowski - literatura i n f o r m a t y c z n a " ^ .

< lix a
< 1 ix a
: c lix a
I <11 x a
< lix a
I < lix a
i < lix a
r < / u l>
: < /d 1 v>

19

20

21
22

23
24

25

h r e f " in d e x , h t m l > s tro n a q w n a < / a x / H >


h r e f " k s i a z k i. h t m l"> K s i z k i < / l i >
h r e f " a r t y k u y , h tm l " > A r t y k u y < / a x / l i >
h r e f "o m n ie . h tm l" > o m n i e < / a x / l i >
h r e f " l i n k i . h tm l " P rz y ja z n e s t r o n y < / a x / H >
h r e f " k o n t a k t , h tm l " > K o n t a k t < / a x / li >
h r e f - '"s k le p . h tm l" > s k le p < /a x /li>

Kod I Po<i9M
Ukryj

Zapisz

Sprawd popraw no dokumentu...

W y n ik i w a l i d a c j i :
lin e
lin e
lin e
lin e
lin e
lin e
In fo :
In fo :

17 colum n 13 - W a rn in g : <im g> e le m e n t n o t em pty o r n o t c lo s e d


2 0 colum n 5 - W a rn in g : m is s in g < /a > b e f o r e < / l i >
21 colum n 5 - W a rn in g : i n s e r t i n g i m p l i c i t <a>
21 colum n 5 - W a rn in g : m is s in g < /a > b e fo r e <a>
21 colum n 5 - W a rn in g : i n s e r t i n g i m p l i c i t <a>
21 colum n 5 - W a rn in g : m is s in g < /a > b e f o r e <a>
D o c ty p e g iu e n i s " - //W 3 C //D T D XHTML 1 . 0 S t r i c t / / E N "
Document c o n te n t lo o k s l i k e XHTML 1 . 0 T r a n s i t i o n a l
INS

NUM Rozmiar 3867 B (3,78 KB)

K: 143, W: 17

Rysunek 5 .3 0 . Odnajdywanie i poprawianie bdw

Tak wanie jest w moim przypadku. Zwr uwag na drugi z wytknitych bdw
linia 20., brak zamknitego znacznika <a>. Jeden drobiazg pociga za sob szereg
kolejnych bdw.
Zgodnie z powysz zasad niezbdne jest usunicie wszystkich bdw. To jednak
nie wystarczy po naprawieniu kodu za pom oc edytora kED sugeruj skorzystanie
z jeszcze jednego narzdzia. Mam tutaj na myli walidator (narzdzie do analizy po
prawnoci kodu) udostpniony przez konsorcjum W3C na stronie http://validator.w3.org.
Zasada korzystania z tej strony jest stosunkowo prosta i ogranicza si do podania adresu
strony, ktra ma zosta sprawdzona. Odpowiedni adres wklejamy w polu Address i kli
kamy przycisk Check. Rysunek 5.31 przedstawia wynik analizy mojej strony gwnej.
Akurat na przykadowym rysunku wida, e strona nie zawiera bdw. Natomiast w sy
tuacji gdy zostan wykryte jakie pomyki, zostaniesz o nich powiadomiony w podobny
sposb, jak w edytorze kED. Zasada usuwania usterek jest identyczna z t, ktr przed
stawiem w opisie korzystania z podobnego narzdzia wbudowanego w edytor kED.

252

Tworzenie stron WWW w praktyce

V\ R

Q ^ u j . M a r k u p V a l i d a t i o n S e r v ic e y o ? 4
DUMB

Home

At>oul

News

Result:
Address:
Encoding:
Doctype:
Root Namespace:

Revalidate ]:

Docs

Help & F A Q

___

m ?

Feedback

Jump To:

Passed validation

Results

htip://danowski pi/

utf-8

(detect automatically)

XHTML 1.0 Strict

(detect automatically)

http://www w3.org/1999/xhtml

! Show Source
Q Validate error pages

03 Show Outline
Verbose Output

Help

on

th e

options

available

Note The Validator XML support has some limitations

This P ag e Is Valid XH TM L 1.0 Strict!


Tip Of The Day

Use headings to structure your document

The document located at <http //danowski pl/> was checked and found to be valid XHTML 1 0 Strict This means that the
resource in question identified itself as "XHTML 1 0 Strict" and that we successfully performed a formal validation using
an SGML or XML Parser (depending on the markup language used)
W3C ?
0 show your readers ,hat yu have taken the
to create an interoperable Web page, you may display
------^ this icon on any page that validates Here is the HTML you could use to add this icon to your Web page
<P>
<a

h r e f= " h t t p : / / v a l i d a t o r . w 3. o r g /c h e c k ? u r i= r e fe r e r " X im g
s rc = " h t t p : //w w w .w 3 .o r g /Ic o n s /v a lid -x h tm llO "
a l t = " V a l i d X HTM L 1 . 0 S t r i c t " h e i g h t = " 3 1 " w i d t h = " 8 8 " / X / a >

< /p >

ff you like, you can download a copy of this image (in PNG or GIF format) to keep in your local web directory, and change
the HTML fragment above to reference your local image rather than the one on this server
A full list of icons, with links to alternate formats and colors, is also available
If you use CSS in your document, you should also check it for validity using the W3C CSS Validation Service
If you would like to create a link to this page (i.e., this validation result) to make it easier to revalidate this page in the
future or to allow others to validate your page, the URI is
<http //validator w3 org/check<?uri=http%3A%2F%2Fdanowski pl%2F> (or you can just add the current page to your
bookmarks or hotlist)

W3C ( T O 7*

W3C Valldator Team

Rysunek 5 .3 1 . Wynik analizy strony gw nej za pom oc narzdzia dostpnego


na stronie http://validator.w3.org

Zalet walidatora dostpnego na stronie http://validator.w3.org jest to, e moe on


sprawdza rwnie pliki znajdujce si na dysku komputera. Wystarczy, e na gwnej
stronie, w sekcji Validate by File Upload, klikniesz przycisk Przegldaj, a nastpnie
wskaesz odpowiedni plik. Sprawdzanie rozpocznie si po klikniciu przycisku Check.
Pomylne wyniki walidacji strony za pom oc narzdzia udostpnionego przez W3C
s gwarancj, e kod Twojej strony jest w stu procentach zgodny z zaleceniami wybra
nej przez Ciebie specyfikacji.

Rozdzia 5. Praktyczny projekt. Moja strona domowa

253

Wnioski
Strona jest ju gotowa i mona przystpi do jej publikacji w sieci (odpowiedni opis
znajdziesz w jednym z nastpnych rozdziaw). Jednak zanim przejdziesz do kolejnych
zagadnie, warto przypomnie o kilku wanych zasadach, ktre wypunktowaem poniej.
Dbaj o jako publikowanych tekstw i pamitaj, e powinny by one zwarte
i jasno napisane. Internauci nie lubi zbyt duo czyta, wic staraj si
w minimalnej iloci tekstu zawrze maksimum treci.
Dbaj o poprawno kodu i jego zgodno ze specyfikacjami. Dziki temu
unikniesz problemw z dziaaniem strony w rnych przegldarkach.
Sprawdzaj gotowy projekt w kilku przegldarkach i rnej rozdzielczoci.
Staraj si, aby strona wygldaa i poprawnie dziaaa w najpopularniejszych
przegldarkach i w rnej rozdzielczoci.
Uywaj kaskadowych arkuszy stylw do kontroli wygldu strony, a jzyka
HTML (XHTML) do nadawania struktury.
Pamitaj o konsekwencji w tworzeniu nazw oraz znaczeniu duych i maych
liter. Dziki temu unikniesz problemw zwizanych ze znalezieniem
odpowiedniej podstrony lub niedziaajcym odnonikiem. Do wszystkich
wewntrznych odsyaczy uywaj odwoa wzgldnych.
Staraj si nie naduywa grafiki i innych efektw specjalnych. Dziki temu
strona bdzie szybciej dziaa nawet na wolnych czach.
Optymalizuj publikowan na stronie WWW grafik. Zdjcia publikuj
w formacie JPG.
Ucz si, podgldajc innych projektantw. To nic zego, e zerkasz do kodu
innych stron i podpatrujesz uyte tam rozwizania. Takie dziaanie pozwoli Ci
lepiej pozna moliwoci jzyka i tworzy ciekawsze strony WWW.

254

Tworzenie stron WWW w praktyce

Rozdzia 6.

Praktyczny projekt.
Strona firmowa
Tym razem jako przykad strony firmowej posuy mi witryna, ktra ma sta si uzu
penieniem forum o komputerach przenonych. W tej chwili forum dziaa na stronie
http://forum.laptopy.info.pl. Natomiast strona, ktr wsplnie zaprojektujemy pojawi si
pod adresem http://laptopy.info.pl.
Tworzona strona bdzie miaa charakter mini portalu i internauci znajd na niej naj
nowsze informacje, testy i artykuy z dziedziny komputerw przenonych. Cao w po
czeniu z forum ma by jednym z waniejszych miejsc dla wszystkich potencjalnych
jak i aktualnych uytkownikw laptopw. Tak si skada, e forum ju zdobyo miano
najwikszego i najlepszego w polskiej sieci. Teraz dziki stronie informacyjnej bd
stara si dotrze go kolejnej grupy potencjalnych goci.

Po co i dla kogo ta strona?


Strona dostpna pod adresem http://laptopy.info.pl jest uzupenieniem dziaajcego od
dwch lat forum powiconego tej samej tematyce. Poniej w kilku punktach wymieni
em najwaniejsze zaoenia, jakie mi przywiecay podczas prac nad nowym projektem.
Strona ma mie charakter informacyjny i znajd si na niej najnowsze
wiadomoci ze wiata komputerw przenonych oraz mobilnych akcesoriw.
Poza krtkimi notkami o nowociach mam w planach publikacj
zaawansowanych testw rnych modeli laptopw oraz zwizanych z nimi
dodatkw.
Szata graficzna oraz rozwizania nawigacyjne m aj by moliwie najprostsze,
a przy tym odmienne od tego, co oferuje wiele rnych portali o tematyce
komputerowej.

Tworzenie stron WWW w praktyce

256

Nie mam zamiaru tworzy kolejnego wielkiego portalu o wszystkim i o niczym.


Dlatego skupiam si wycznie na tematyce laptopw. W przypadku forum
wska specjalizacja pokazaa, e to szansa na sukces. Forum w chwili obecnej
przegonio konkurencj i jest najwikszym i najpopularniejszym miejscem
tego typu w polskim kawaku sieci.
Strona w niedalekiej przyszoci ma generowa zyski. Moliwoci zarabiania
widz w publikacji reklam, sponsorowanych artykuach, wsppracy z liczcymi
si dystrybutorami sprztu oraz sprzeday laptopw i zwizanych z nimi rzeczy.
Jak widzisz, strona bdzie miaa charakter informacyjny, a forum skupi si na roli miej
sca do dyskusji, wymieniania pogldw oraz niesienia sobie wzajemnej pomocy.
Odbiorcami treci publikowanych na stronie z ca pewnoci bd obecni i przyszli
uytkownicy komputerw przenonych. Licz na spore zainteresowanie wrd obecnych
uytkownikw forum. Nie wykluczam rwnie czstych odwiedzin przez ludzi zainte
resowanych testami, nowinkami oraz sensacjami ze wiata komputerw mobilnych.

Zbieramy materiay
W przypadku omawianej strony zbieranie materiaw niezbdnych do jej przygotowa
nia ograniczy si do minimum. Dokadniej mwic, aby rozpocz prac nad projek
towaniem, potrzebne s nastpujce informacje:
dwie lub trzy przykadowe wiadomoci o komputerach przenonych,
przykadowy artyku,
przykadowy test,
zawarto strony z informacjami o firmie prowadzcej portal,
zawarto strony kontaktowej.
Caa reszta treci bdzie dodawana w chwili, gdy strona zostanie ju zaprojektowana
i uruchomiona. Innymi sowy, podczas projektowania wystarczy minimum treci do
stworzenia ukadu prezentowanych elementw. Dopiero po zakoczeniu budowy strony
i przed jej oficjaln prezentacj warto doda kilkanacie wiadomoci oraz kilka arty
kuw. Dalej pozostaje ju tylko dba o to, aby na stronie nowe treci pojawiay si
regularnie. Nie moe by tak, e jednego dnia dodamy pi wpisw, a pniej przez
kolejne dwa ani jednego.
Podczas przygotow yw ania wszystkich materiaw zarwno tych potrzebnych na
pocztek, ja k i tych, ktre m aj by dodawane po uruchomieniu portalu trzymamy
si nastpujcych zasad:
Kada wiadomo powinna si skada z krtkiego wprowadzenia widocznego
na stronie gwnej, rozwinicia widocznego na dedykowanej podstronie
oraz zdjcia prezentowanego produktu.

Rozdzia 6. Praktyczny projekt. Strona firmowa

257

Kady artyku powinien by dzielony na kilka podstron, tak by korzystanie


z niego byo wygodniejsze.
Wszystkie teksty powinny by pisanie w sposb zwizy z zachowaniem
szczeglnej dbaoci o przystpn form oraz zaciekawienie czytelnika we
wstpie i zatrzymanie go podczas lektury rozwinicia.
Ze wzgldu na tematyk strony nie ma potrzeby zwracania specjalnej uwagi
na stosowanie fraz i sw kluczowych. Si rzeczy teksty bd nasycone
odpowiednimi sowami i stosunkowo szybko zajm wysokie pozycje w wynikach
wyszukiwania. N aley jednak zwraca uwag na zawarto nagwkw,
ktre bezwzgldnie powinny by sugestywne i nasycone sowami kluczowymi
dla prezentowanego zagadnienia.

Struktura strony
Uznaem, e struktura mojej nowej strony ma by maksymalnie uproszczona. Im mniej
zakamarkw, tym prociej co znale. W skrcie caa witryna zostanie podzielona na
nastpujce dziay:
Strona gwna wszystkie wiadomoci (aktualnoci, testy, artykuy, etc.)
w skrconej postaci.
Aktualnoci wycznie aktualnoci.
Testy wycznie testy.
Artykuy wycznie artykuy.
FAQ odpowiedzi na najczciej zadawane pytania.
Kontakt wszystkie dane kontaktowe.
Wszystkie wymienione wyej dziay trafi do grnego menu nawigacyjnego. Strona nie
bdzie zawiera dodatkowego bocznego menu.

Tworzymy poszczeglne podstrony


Pora zaj si projektowaniem strony. Tym razem zmieniem sposb prezentacji pro
jektu i najpierw opisz w kilku sowach, co chc uzyska, nastpnie przedstawi od
powiedni kod i na kocu zamieszcz rysunek prezentujcy ostateczny wynik.

Uwaga

Prezentowany w tym rozdziale projekt w oryginalnej wersji zosta przeze mnie zam
wiony w firmie CRE8, a nastpnie poprawiony przeze mnie tak, by odpowiada moim
potrzebom.

Tworzenie stron WWW w praktyce

258

Szablon strony
Ukad strony gwnej, a co za tym idzie, wszystkich podstron, bdzie taki sam. Poza
nagwkiem i stopk witryny cao zostanie podzielona na dwie kolumny. Lewa ko
lumna zajmie 2/3 dostpnego obszaru i bdzie zawiera publikowane treci. Natomiast
po prawej stronie znajd si moduy z wykazem ostatnio dodanych testw oraz recenzji.
Dlatego zanim zaczniemy tworzy poszczeglne podstrony, warto przygotowa ogl
ny szablon.

Etap pierwszy nagwek


Tworzenie projektu zaczniemy od przygotowania nagwka, w ktrym umieszczone
zostanie menu nawigacyjne, wyszukiwarka oraz jaki element graficzny. Menu nawi
gacyjne zostanie podzielone na dwie czci i dodatkowo zrnicowane rozmiarem. Gw
ne menu znajdzie si na dole nagwka i bdzie zauwaalnie wiksze. Natomiast menu
dodatkowe znajdzie si na samej grze nagwka i bdzie mniejsze. Dodatkowe menu
bdzie zawiera odnoniki do strony z kontaktami, informacjami o redakcji i kilka innych
potrzebnych elementw.
Kod nagwka musimy podzieli na trzy czci. Dodatkowo cao powinna by za
mknita pomidzy znacznikami <div></div>, dziki czemu atwiej bdzie kontrolowa
cao. Zwr uwag, e obie czci menu nawigacyjnego zbudowaem, wykorzystujc
listy wypunktowane, a nastpnie sformatowaem je za pomoc CSS. rodek nagwka
to motyw graficzny oraz wyszukiwarka. Stosowny kod XHTML gotowego nagwka
zamieciem poniej.
<div id="naglowek">
<ul id="menugora">
<li><a href="feed">RSS Wiadomoci</a></li>
<1 i><a href="mapa-strony.html">Mapa strony</a></li>
<li><a href=''redakcja.htnil">Redakcja</a></li>
<1i><a href="kontakt.html">Kontakt</a></li>
</ul>
<div id="menusrodek">
<a href="/"><img src="obrazki/laptop.jpg" /></a>
<a href='7''><img src="obrazki/logo.gif" /></a>
<form method="get" id=''searchform" action="h ttp ://la p to p y .in fo .p l">
<input type="text" value='"' name="s" id="s" class="pole" />
<input type="submit" id="searchsubmit" value="Szukaj" />
</form>
</div>
<ul id="menudol">
<1 i ><a href="/ ">Aktualnoci </a></li >
<1 i><a href="/testy">Testy</a></li>
<1 i ><a href="/ arty k u ly ">Artykuy< /a></1i >
<1 i ><a href="/ faq">FAQ</a></1i >
<1 i ><a href="h ttp : //forum . 1aptopy. i n fo .pl">Forum</a></li>
</ul>
</div>

Rozdzia 6. Praktyczny projekt. Strona firmowa

2 59

W tej chwili niezbdne jest signicie do kaskadowych arkuszy stylw w celu nada
nia stworzonym elementem odpowiedniego wygldu i naleytej pozycji.
Na pocztku warto ustawi kilka globalnych waciwoci strony. Mam tutaj na myli
wyczenie marginesw, dopenienie oraz okrelenie koloru ta. Odpowiednie wpisy za
mieciem poniej.
body
{
margin:0:
paddi ng: 0:
background-color:whi t e :

Dopiero teraz moemy zaj si nagwkiem witryny. Powinnymy zacz od okrele


nia szerokoci oraz waciwoci dolnej krawdzi dla bloku tworzonego przez znacznik
<di v i d=" nagi owek "></di v>. Odpowiednie deklaracje stylw maj nastpujc posta:
div#naglowek
{
width:100;
border-bottom:solid 5px #518AB5;

Nastpny krok to zmiana waciwoci obu list wypunktowanych wystpujcych w na


gwku strony. Listy musimy przeksztaci na elementy liniowe oraz okreli lewy
margines. Zwr uwag, e dziki uyciu selektora potomka style bd odnosi si
wycznie do list znajdujcych si pomidzy znacznikami <div id = ' naglowek ></div>.
div#naglowek l i
{
d isp la y:in lin e ;
margin-left:15px:

Nie moemy zapomnie o okreleniu wygldu odsyaczy znajdujcych si w menu.


Dla wszystkich odsyaczy ulokowanych w nagwku strony wyczamy podkrelenie,
ustawiamy kolor na biay oraz wczamy doln krawd obramowania. Wane jest, aby
krawd miaa taki sam kolor jak to belki menu. Nastpnie dla odsyaczy, nad kt
rymi znajdzie si kursor, okrelamy szary kolor czcionki i szary dla dolnej krawdzi
obramowania. W obu przypadkach korzystamy z selektora potomka.
div#naglowek a
{
text-decorati on:none;
col o r:white:
border-bottom:solid 5px #518AB5;
}
div#naglowek a:hover
{
col o r:s il ver:
border-bottom:sol id white 3px:

260

Tworzenie stron WWW w praktyce

Czas zaj si dodatkowym menu nawigacyjnym. W swoim projekcie wyczyem mar


ginesy, okreliem wysoko caego paska dodatkowego menu, ustawiem kolor ta
i wyczyem listy. Uzupenieniem caoci jest wymuszenie stosowania czcionki ma
szynowej z rodziny monospace.
ul#menugora
{
margin:0;
height:30px;
background-color:#518AB5;
1i s t- s ty le :none:
fo n t- fam11y :monospace;
}

Kolejne zmiany dotycz rodkowej czci nagwka strony. Poniej znajduje si listing
zastosowanych stylw wraz z moim komentarzem.
div#menusrodek
{
height: 150px:
}

W tym miejscu okreliem wysoko rodkowej czci nagwka.


div#menusrodek img, div#menusrodek a
{
border:0:
}

W yczyem obramowanie dla obrazkw i odnonikw znajdujcych si w nagw


ku strony.
div#menusrodek i mg
{
ve rtical-align:m id d le ;

Skorzystaem z wyrwnania w pionie i wymusiem, aby wszystkie obrazki ustawiy si


w na rodku dostpnego obszaru.
div#menusrodek form
{
positlom absolute;
right:10px:
top:lp x:

Za pomoc funkcji pozycjonowania ustawiem formularz wyszukiwania w prawym gr


nym naroniku.
div#menusrodek in p u t.pole
{
background-colo r :si 1ver;
border:lpx solid white:
width:150px;
paddi ng:0:
margin:0:

261

Rozdzia 6. Praktyczny projekt. Strona firmowa

W tym miejscu zajem si zm ian wygldu pola formularza. Zmieniem kolor ta,
wczyem obramowanie, ustawiem rozm iar pola i w yczyem m arginesy oraz do
penienie.
Ostatnim elementem grnego nagwka jest jego dolna cz. Poniszy listing ustawia
to, wycza marginesy, wymusza lewy margines, ustala wysoko elementu, wyrodkowuje tekst, powiksza rozmiar czcionki i przeksztaca j w due litery.
ul#menudol
{
background-c o lo r:#518AB5;
margi n:0 ;
margi n-1e f t :300px;
hei ght:40px:
te xt-align:center:
font-size:large:
text-transform:uppercase;

Na rysunku 6.1 przedstawiem widok kompletnego nagwka mojej strony. Przekre


lony obszar zostawiem pusty z m yl o tym, aby w tym miejscu umieci banner
reklamowy.
SS W iadomoci

Mapa s tr o n y

R sd alrcja

K o r.takt

ksai

LAPTOPY

profesjonalne centrom informacyjne

AKTUALNOCI TESTY ARTYKUY F.A.Q. FORUM

Rysunek 6.1 . Gotowy nagwek witryny

Etap drugi podzia na dwie kolumny


Po zakoczeniu pracy nad nagwkiem strony pora zaj si centraln czci witryny.
Zaplanowaem, e strona zostanie podzielona na dwie kolumny. Lewa cz bdzie
zajmowa mniej wicej 2/3 ekranu i ma zawiera publikowane treci. Natomiast po
prawej stronie, w wszej czci, znajd si dwa moduy z list ostatnio dodanych re
cenzji oraz artykuw.
Do utworzenia obu kolumn wykorzystamy znaczniki <div></div> wraz z odpowied
nimi identyfikatorami. Poniej zamieciem przykadowy kod, ktry powinien trafi
do tworzonego dokumentu bezporednio przed zamykajcym znacznikiem </body>.
<div id="zawartosc">
</div>
<div id="nawigacja">
</div>

Tworzenie stron WWW w praktyce

2 62

Ukad kolumnowy przygotujemy w caoci za pomoc kaskadowych arkuszy stylw.


W tym celu do arkusza naley doda ponisze deklaracje. Kady z selektorw zo
sta przeze mnie dodatkowo skomentowany. Dziki temu atwiej bdzie Ci zrozumie,
o co chodzi.
div#nawigacja
{
positlom absolute;
r ig h t:0;
top:15em;
width:300px;
paddi ng:0:
margin:0;

Pierwszy z wpisw dotyczy wszej kolumny. Na pocztku ustawiem blok tak, by


znalaz si przy prawej krawdzi przegldarki i poniej nagwka strony. Skorzystaem
z jednostki em, dziki czemu ukad strony bdzie elastyczny i niezaleny od rozdziel
czoci. Nastpnie okrelamy szeroko prawej kolumny i wyczamy marginesy i do
penienie.
div#zawartosc
{
margin-right:20em:
m argin-left:lem ;

W tej chwili prawa kolumna znalaza si na swoim miejscu, ale reszta tekstu j przy
krywa. W zwizku z tym naley dla szerszej kolumny ustawi prawy i grny margines
tak, by ten element pasowa do reszty.
N a rysunku 6.2 przedstawiem gotowy projekt z podziaem na dwie kolumny. Dodat
kowo dla uatwienia poszczeglne bloki m aj ustawione rne ta.
RSS W iadom oci

R e d akcja

K o n ta k t

LAPTOPY

profesjonalna centrum informocyjne

AKTUALNOCI TESTY ARTYKIXY F.A.Q. EORUM

Lorem ipsum dolor sit amet, consectetur adipisicing dit, sed do dusrnod tempor incididunt ut labore et dolore
magna aqua U t anm ad minim veruam qins nostrud exercitation uamco laboris nisi ut ahquip ex ea commodo
consequat Duis aute irure dolor m reprehenderit invohiptate veto esse chirn dolore eu fgiat nulla pariatur
Excepteur sint occaecal cupidatat non proident sunt in cuipa qui officia deserunt mollit anim id est laborum
Lorem ipsirni dolor sit amet, consectetur adipisicing et, sed do etusmod tempor incididunt ut labore et dolore
magna aqua U t emm ad minim veniam, quis nostrud exercitation uflamco laboris nisi ut abquqp ex ea commodo
consequat. Duis aute inire dolor in reprehenderit in voluptate vet esse dlium dolore eu fugiat nulla pariatur
Excepteiv sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt moQit anim id est laborum

Rysunek 6 .2 . U kad kolumnowy strony

Pozycja numer jeden


Pozycja numer jeden
Pozycja numer jeden
Pozycja numer jeden

Szukaj

Rozdzia 6. Praktyczny projekt. Strona firmowa

263

Jak widzisz uzyskanie dwch kolumn byo bardzo proste i ograniczyo si zaledwie
do kilku prostych wpisw w arkuszu stylw.

\
Uwaga

Aby zamieni miejscami obie kolumny, wystarczy wsz rubryk pozycjonowa do


lewej krawdzi okna przegldarki. Nastpnie dla szerszej kolumny naley okreli
lewy margines.

Etap trzeci stopka


W tej chwili moemy zaj si stopk witryny. W moim projekcie stopka bdzie bardzo
prosta i bdzie jedynie zawiera informacje o prawach autorskich oraz autorze strony.
Kod stopki bdzie skada si ze znacznika <div id="stopka></div> oraz trzech li
nijek tekstu. Listing widoczny poniej powinien znale si kodzie strony bezpored
nio przed zamykajcym znacznikiem </body>.
<div id=stopka">
<p>Wszelkie prawa zastrzeone. Copyright 2005-2006 <a href= /">Laptopy</a>.</p>
<p>Strona stworzona przez:<a href="http://www.cre8.pl/">CRE8 - tworzenie stron</a></p>
<p><a href="sitemape.xml">XML SiteMap</a></p>
</div>

Stopka w postaci widocznej na listingu wymaga dodania odpowiednich wpisw do


arkusza stylw. Musimy zadba o kolor ta, wygld tekstu oraz wymiary caego elemen
tu. Dodatkowo bardzo wane jest to, aby stopka zawsze znajdowaa si na dole ekra
nu. Musisz bowiem wiedzie, e umieszczana jest ona zawsze pod treci strony. Jeeli
treci jest na tyle duo, e wypenia ca widoczn cz ekranu, to stopka znajduje
si na kocu. Natomiast w przypadku gdy treci jest mao, stopka moe znale si na
przykad w poowie ekranu. Na szczcie problem ten moemy rwnie rozwiza,
stosujc odpowiednie style.
Poniej zamieciem listing z odpowiednimi wpisami do arkusza stylw oraz moimi
komentarzami. Mam nadziej, e dziki temu atwiej bdzie Ci zrozumie, w jaki spo
sb trwale powiza stopk z doln krawdzi okna przegldarki.
body. html, #zawartosc
{
mi n-height: 100^:
hei g h t: 100*:
}

W pierwszej kolejnoci dla selektorw body, html oraz dla identyfikatora #zawartosc,
ktry jest przypisany do szerszej kolumny, ustawiem wysoko rwn 100% oraz mi
nimaln wysoko rwn 100%.
html>body, html>body fzawartosc
{
height:auto;
}

Nastpnie, korzystajc z selektorw dziecka, ponownie okreliem wysoko dla body


oraz #zawartosc. Jednak tym razem wysoko zostaa ustawiona jako auto.

264

Tworzenie stron WWW w praktyce

div#stopka
{
width:100*;
height:40px:
background:#EEEEEE u r l( o b r a z k i/tlo .g if) :
padding-top:10px;
padding-bottom:10px;
position:absolute;
bottom:0:}

Dla znacznika stopki ustawiem szeroko, wysoko, kolor ta, grne i dolne dope
nienie oraz cay element usytuowaem na sztywno przy dolnej krawdzi okna prze
gldarki.
div#stopka p
{
margi n:0;
paddi ng-1 eft:20px;
font-size:sm aller;
}

Ostatnie zmiany dotycz tekstu umieszczonego w stopce. Dziki ustawieniu zerowego


marginesu zmniejszyem odstpy pomidzy poszczeglnymi liniami. Dodatkowo zde
finiowaem lewe dopenienie, aby odsun tekst od krawdzi. Na koniec pomniejszy
em czcionk.
Na rysunku 6.3 zamieciem widok stopki oraz pozostaych elementw strony. Zwr
uwag, e stopka mimo maej iloci tekstu znajduje si na samym dole.
RSS K ia a a n o s i

Mapa a r r o n y

R ed a k c ja

Kenn ale:

LAPTOPY

profesjonalna ceni rum informacyjne

Hm i
Lorian ipsum dolor sit amet, consectetur adiptsicmg efe, sed do etusmod tempor beididunt ut labore et dolore
magna afiqua. Ut enim ad mmim vemam, quis nostrud exercitation ullamco laboris nisi ut afiquip ex ea commodo
consequat Duis aute trure dolor in reprehender in 'ohrptafe vefe esse ciDum dolore eu fugtat ufla pariatur
Excepteur sint occaecat cupidatat non proident, sunt in cfca qt offida desenmt mofl anim id est laborum
Lorem ipsum dolor sit amet consectetur adtpisicing efe, sed do etusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aquip ex ea commodo
consequat. Duis aute trure dolor in reprehender in voiuptate vefe esse ciflum dolore eu fiigiat milla pariatur
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia desenmt mofl anim id est laborum.

W szelkie prawa zastrzeone. C op yright 2005-2006 Laptopy.


Strona stworzona przez; CRE8 - tworzenie stron w3c i optymalizacja
X M L StteMap

Rysunek 6.3. Podstawowa struktura strony

m wm

Pozycja numer jeden


Pozycja numer jeden
Pozycja numer jeden
* Pozycja numer jeden

Rozdzia 6. Praktyczny projekt. Strona firmowa

265

Etap czwarty moduy w prawej kolumnie


Uznaem, e prawa kolumna ma zawiera dwa moduy, w ktrych bd pojawia si
odnoniki do ostatnio dodanych artykuw oraz testw sprztu. Moduy maj by mak
symalnie proste i nieskomplikowane. W zwizku z tym skorzystaem z nagwkw
stopnia trzeciego, list wypunktowanych, a cao zostanie umieszczona pomidzy ist
niejcym ju znacznikiem <div id="nawigacja></d1 v>. Przykadowy kod znajduje
si poniej.
<h3>Artykuy</h3>
<ul>
<1 i><a href="artukuly/baterie">Baterie - prawda i m ity</a></li>
<1 i><a href="artukuly/recovery">Partycje i noniki recovery</a></li>
<1 i><a href="artukuly/n lite ">n L ite - integracja sterownikw</a></li>
</ul>
<h3>Testy</h3>
<ul>
<li><a href="testy/ibmt42">IBM ThinkPad T42</a></li>
<1 i><a href="testy/ibmt60">IBM ThinkPad T60</a></li>
<li><a href="testy/ibinx60">IBM ThinkPad X60</a></li>
</ul>

W pierwszej kolejnoci dla prawej kolumny ustawiem to oraz okreliem jej maksy
maln szeroko. Odpowiednie style powinny zosta wpisane do selektora div#nawigacja
zgodnie z poniszym przykadem.
div#nawigacja
{
position:absolute;
right:10px;
top:15em;
width:300px;
max-width:300px;
background-image:url(obrazki/tlol.png);
background -repeat:no -repeat;

padding:5px;
margin:0:
}

Nastpne zmiany dotycz ju bezporednio tekstu umieszczonego w prawej kolumnie.


Naley zaj si wygldem nagwkw oraz list wypunktowanych. Poniej znajduj si
przykadowe wpisy do mojego arkusza stylw.
div#nawigacja h3
{
margi n:0:
paddi ng:0:
font-weight:boid;
}
div#nawigacja ul
{
margin:3px:

Tworzenie stron WWW w praktyce

266

N a rysunku 6.4 zamieciem widok gotowego szkieletu strony. W tej chwili moemy
bra si do opracowywania poszczeglnych dziaw witryny.
RSS Wiadomoci

Mapa strony

Redakcja

Kont

LAPTOPY

profesjonalne centrum informacyjne

0
AKTUALNOCI TESTY ARTYKUY F.A.Q. FORUM

Lorem ipsum dolor sit amet, consectetur adipisicing eht, sed do dusmod tempor incididunt ut labore et
dolore magna aiiqua. U t enim ad minsn veniam, quis nostrud exercitation uilamco laboris nisi ut aliquot ex
ea commodo consequat Duis aute irure dolor in reprehenderit in voioptate veht esse cilhun dolore eu
fugjat nua pariatur Excepteur sint occaecat cupidatat non protdent; sunt in culpa qui officia deserunt
molht anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing et, sed do etusmod tempor incididunt ut labore et
dolore magna aiiqua U t enim ad minim veniam, quis nostrud exercitation uHamco laboris nisi ut ahquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in vohiptate veht esse ciBum dolore eu
fugjat nua pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
molht anim id est laborum

Artykuy
Baterie - praw da t mity
Partycje i noniki recovery
nLite - mtegracja sierowmkow

Testy
IBM Thm kPad 142
IB M ThinkPad T60
IBM ThinkPad X60

Wszelkie prawa zastrzeone Copyright 2005-2006 Laptopy.


Strona stw orzona przez: CR8 - tworzenie stron w3c t oprytsafazacja
X M L SiteMap

Rysunek 6 .4 . Widok gotowego szkieletu strony

Strona gwna
Strona gwna w centralnej czci bdzie przedstawia wiadomoci w skrconej po
staci. Kady wpis ma skada si z wprowadzenia, zdjcia oraz odnonika pozwalaj
cego na przejcie do kompletnej notatki. Innymi sowy, nie wymyliem tutaj nic od
krywczego.
Struktura pojedynczego wpisu bdzie stosunkowo prosta. Tytu zostanie przedstawio
ny jako nagwek stopnia drugiego, tre zamknie si pomidzy znacznikami <p></p>.
Uzupenieniem bdzie obrazek ustawiony w lewym grnym rogu i oblany tekstem.
Cao dodatkowo zostanie zamknita pomidzy znacznikiem <div id = 'w p is ''x /d iv > ,
dziki czemu atwiej bdzie kontrolowa cao. Poniej zamieciem kod przyka
dowego wpisu.
<div id=wpis">
<h2><a href="news01.html">Nowy Flybook VM</a></h2>
<p class=data"><strong>Data:</strong> 20.07.2007 <strong>Autor:</strong> Bartosz
Danowski</p>
<img src= "o bra zki/flybook.jpg" alt="Flybook MV" />
<p>Co pocztkowo wyglda na tuzinkowego laptopa, wcale nim nie je s t. Flybook VM
posiada ekran mogcy ustawi si w pozycji normalnego ekranu LCD. tak aby uytkownik
mi a? wygodniejsz pozycj podczas uytkowania komputera. Szczeglnie przydatne je s t

Rozdzia 6. Praktyczny projekt. Strona firmowa

267

to w czasie korzystania z laptopa w miejscach, gdzie mamy bardzo ma powierzchni


na pooenie notebooka, np. w samolocie.</p>
<p>Flybook VM moe wyglda jak normalny laptop, lecz w rzeczywistoci twrcy laptopa
maj aspiracje, aby ich produkt konkurowa z desktopami. Laptopa mona bdzie kupi
pod koniec miesica w cenie $2,899.</p>
<p class=''zrodlo''><a href=11news01.html">Wicej &#187;</a></p>
</div>

Poniej przestawiem fragment arkusza stylw, ktry odpowiada za kontrol wygldu


pojedynczego wpisu. Kady z selektorw zosta przeze mnie skomentowany.
div#wpis
{
padding-bottom:20px;
border-bottom:solid 2px s ilv e r;
margin-bottom:20px;

Dla caego moduu ustawiem dolny margines i dopenienie. Nastpnie wczyem dolne
obramowanie.
div#wpis img
{
f 1oat: 1e f t :
padding:2px;
border:solid 2px s ilv e r;
margin-right:5px;
marg in -bottom:5px;

Okreliem sposb oblew ania obrazkw przez tekst, w czyem dopenienie oraz
ramk. Poza tym zdefiniowaem prawy i dolny margines, aby wymusi odstp ob
razka od tekstu.
div#wpis p
{
margin-top:0,5em:
}

Ustawiem wikszy odstp pomidzy poszczeglnymi blokami tekstu.


div#wpis p.data
{
paddi ng;0 ;
margin:0;
font-size:sm aller;
c o lo r:s il ver;
margin-bottom:30px:
}

Dla dodatkowych informacji widocznych bezporednio pod nagwkiem wyczyem


marginesy i dopenienia. Nastpnie zmniejszyem czcionk i nadaem jej szary kolor.
Poza tym wczyem dolne dopenienie, aby zwikszy odstp pomidzy nagwkiem
i reszt wpisu.

268

Tworzenie stron WWW w praktyce

div#wpis p.zrodlo
{
te x t-a lig n :rig h t;
margin-top:30px;
cl ear:both;
}

Dla odnonika widocznego pod tekstem ustawiem wyrwnanie do prawej strony oraz
zdefiniowaem grny margines, aby odnonik wyranie oddzieli od tekstu. Poza tym
na wszelki wypadek zablokowaem moliwo oblania obrazka przez ten element.
div#wpis h2
{
margin:0:
padding:0;
}

Ostatnia zm iana w ycza m arginesy i dopenienie dla nagwkw stopnia drugiego.


Dziki temu tekst uzupeniajcy nagwek znajdzie si bezporednio pod nim.
Na rysunku 6.5 przedstawiem widok strony gwnej z kilkoma wpisami.
Rysunek 6.5.

H EJ

Widok strony gwnej


z kilkoma wpisami

LAPTOPY
AKTUALNOCI

TESTY

Nowy Flybook VM

A RTY K U Y

F .A .Q .

FO R U M

A rty k u y

C o pocztkowo wyglda na tuzinkowego laptopa, wcale nim nie


jest Flybook V M posiada ekran mogcy ustawi si w pozycji
normalnego ekranu L C D , tak, aby uytkownik mia wygodniejsz
pozycj podczas uytkowania komputera. Szczeglnie przydatne
jest to w czasie korzystania z laptopa w miejscach, gdzie mamy
bardzo ma powierzchni na pooenie notebook, np w samolocie

\rM

Flybook
moe wyglda jak normalny laptop, lecz w
rzeczywistoci twrcy laptopa maj aspiracje, aby ich produkt
konkiaowal z desktopami Laptopa mona bdzie kupie pod
koniec miesica w

Fujitsu LifcBook P7230


Fujitsu ogosi dostpno w U S A LifeBooka P7230, utaa-przenonego
laptopa t 10.6 matryc. Fujitsu LifeBook P7230 way poniej 1,4kg i ma ok
3cm gruboci Twierdzi si, e jest to najmniejszy i najlejszy notebook z
wbudowan zatok do obsugi nagrywarki D V D . czy drugiej baterii - zwiksza
ona czas pracy notebooka do prawie 10 godzin.
Notebook jest wyposaony w procesor Core Solo L'1400 P7230, opartym na chipsecie 945GM A
oraz w kart graficzn Intel Graphics Media Accelerator 950 Obsuguje do 2GB pamici R A M i
moe posiad dysk twardy do SOGB (4200rpm)

Wsrelfcie prawa rastrze:om Copyright 2005-2006 Laptopy.


Strona stworzona prze CRES - r orreme -.iron o jc i opiisuuzKf!
XM I SiteNLip_____________

Baterie praw da i nwty


Partycje i noniki r m w a y
ul ile - intcgracjs storo* takw

Testy
IBM ThinkPad T l 2
IBM ThinkPad T 60
IB M ThinkPad X6G

Rozdzia 6. Praktyczny projekt. Strona firmowa

269

Strona pojedynczego wpisu


Pora zaj si wygldem strony z pojedynczym wpisem. W tym przypadku skorzy
stamy z kodu XHTML skrconych wpisw na stronie gwnej i uzupenimy je o kilka
dodatkowych elementw oraz stylw.
<div id="wpis">
<h2><a href="news02.html">Fujitsu LifeBook P7230</a></h2>
<p class="data"><strong>Data:</strong> 22.07.2007 <strong>Autor:</strong> Bartosz
Danowski</p>
<img src= "obrazki/life b o o kjn in ia tu ra .jpg" alt="Lifebook P7230" />
<p>Fujitsu o gosi dostpno w USA LifeBooka P7230, ultraprzenonego laptopa
z matryc 10,6". F ujitsu LifeBook P7230 way poniej 1.4 kg i ma ok. 3 cm gruboci.
Twierdzi si. e je s t to najmniejszy i najlejszy notebook z wbudowan zatok
do obsugi nagrywarki DVD, czy drugiej b a te rii - zwiksza ona czas pracy notebooka
do prawie 10 godzin.</p>
<p>Notebook je s t wyposaony w procesor Core Solo U1400 P7230, oparty na chipsecie
945 GMA, oraz w kart graficzn Intel Graphics Media Accelerator 950. Obsuguje
do 2 GB pamici RAM i moe posiada dysk twardy do 80 GB (4200 rpm).</p>
<p>Fujitsu LifeBook P7230 je s t wyposaony w bezprzewodow kart sieciow Intel PRO/
Wireless 3945b/g. Posiada rwnie wbudowany modem, kart sieciow 1 GB oraz Bluetooth.
Fujitsu LifeBook P7230 je s t zaopatrzony w dwa porty USB, port IEEE 1394, port wideo,
port na karty I / I I PCMCIA i port do obsugi kart Memory S tick. Memory Stick PRO,
Secure D igital (SD).</p>
<p>Ultraprzenony laptop Fujitsu je s t dostpny w wersji z obudow pokryt czarn
lub bia skr. Mona wybra wersj z systemem Windows Vista Home Basic, Windows
Vista Business lub Windows XP Professional. LifeBook P7230 bdzie kosztowa od $1.699
za podstawow konfiguracj.</p>
<p class="obrazek"><img s rc = "o b ra z k i/lifebook_duzy.jpg" alt="LifeBook" /></p>
<p c la s s -obrazek"><img src="obrazki/lifebooks_duzyl.jpg" alt="LifeBook" /> </p>
<p class="zrodlo">rdo: <a href="http://laptoping.com">www.laptoping.com</a></p>
</div>

Dodatkowe wpisy do arkusza bd dotyczy wycznie dodatkowych obrazkw doda


nych do penej treci wiadomoci. Przykadowy wpis moe wyglda mniej wicej tak:
div#wpis p.obrazek
{
margin-left:5:
}

Rysunek 6.6 przedstawia gotow stron z pen treci wiadomoci.

Strona artykuu lub testu


Strona, na ktrej publikuj artyku lub test, niczym nie rni si od przykadowej
strony wpisu zbudowanej i opisanej w poprzednim podrozdziale. W zwizku z tym
uznaem, e nie ma potrzeby przygotowywa oddzielnego opisu. W dalszej czci za
mieciem jedynie kilka uwag, ktrych warto si trzyma, aby strona z du iloci
tekstu i grafiki bya funkcjonalna.

270

Tworzenie stron WWW w praktyce

M a pa s t r o n y

R e d a ic c j

S zu k a j

mmmmm

LAPTOPY

profesjonalno centrum informacyjne

AKTUALNOCI

TESTY

Fujitsu LifeBook P7230


Onia: 22.7 2'J' A u to r. H a rtoi

Fujitsu orosi dostpno w USA LifeBook-a P7230, uhra-przenonego


laptopa z 10.6 matryc Fujitsu LifeBook P7230 way poniej 1,4kg i ma ok
3cm gruboci-Twierdzi si. ie jest to najmniejszy i najlejszy notebook z
wbudowan zatok do obsugi nagrywarid DVD. czy drugiej baterii - zwiksza
ona czas pracy notebooka do prawie 10 godzin.
Notebook jest wyposaony w procesor Core Soo U 1400 P7230. opartym na chipsecie 945GMA
oraz w kart graficzn Intel Graphics Media Accelerator 950 Obsuguje do 2GB pamici RAM i
moe posiad dysk twardy do 80GB (4200rpm).
Fujitsu LifeBook P7230 jest wyposaony w bezprzewodow kart sieciow Intel PROWireless
3945b'g. Posiada rwnie wbudowany modem, kart sieciow 1GB oraz Bluetooth Fujitsu LifeBook
P7230 jest zaopatrzony w dwa porty USB. port IEEE 1394. port wideo, port na karty LU PCMCIA i
port do obsugi kart Memory Stick, Memory Stick PRO, Secure Digital (SD).
LTtraprzenony laptop Fujitsu jest dostpny w w-ersji z obudow pokryt czarn lub bia skr
Mona wybra wersj z systemem Windows Vista Home Basic. Windows Vista Business lub
Windows XP Professional LifeBook P7230 bdzie kosztowa od S I.699 za podstawow
konfiguracj

rdo: w w u laptopmg.com

Rysunek 6 .6 . Strona z pen treci wiadomoci

F.A.Q.

FORUM

Artykuy
Baterie - prawda i muy
Partycje i noniki recovery

s it

W szelkie prawa zastrzeone Copyright C 2005-2006 Laptopy.


Strona stworzona przez: C7t.ES - tworzenie stron w3e i optymalizacja
X M L SiteMap

A R lY K l'L Y

nLite - integracja sterow nikw

Test>
IBM ThinkPad T42

IBMThinkPad T60
IBMThinkPad X60

Rozdzia 6. Praktyczny projekt. Strona firmowa

27 1

Dziel due iloci tekstu na kilka mniejszych stron. Rozwizanie to pozwoli


skrci czas wczytywania strony oraz poprawi komfort korzystania z niej.
Dodatkowe menu nawigacyjne zamie na pocztku i na kocu strony,
aby mona byo szybko przej do nastpnej lub poprzedniej czci artykuu.
W treci publikuj mae zdjcia i twrz z nich odsyacze do wikszych kopii.
Dziki temu strona bdzie szybciej si wczytywa. Nie martw si o to,
e obrazki bd mniej czytelne, bo osoby nimi zainteresowane powiksz je,
klikajc w utworzony przez Ciebie odsyacz.
Staraj si pisa zwize artykuy, bo internauci nie lubi zbyt wiele czyta.
Pamitaj, e kady problem mona przedstawi w sposb zwizy. Jeeli jednak
poruszasz powane tematy i mimo szczerych chci nie jeste wstanie skrci
artykuu lub testu, zastanw si, czy nie mona go podzieli na dwa
oddzielne tematy.

Strona FAQ
Po dugich przemyleniach uznaem, e odnonik FAQ w chwili obecnej bdzie pro
wadzi do odpowiedniego dziau forum, ktry jest regularnie aktualizowany. Mam
jednak w planach stworzy odpowiedni stron i na niej publikowa najczciej zada
wane pytania wraz z odpowiedziami.
Najlepszym rozwizaniem dla FAQ jest wykorzystanie nagwkw oraz list. Za pomoc
nagwkw moemy podzieli cao na kilka czci, np. problemy sprztowe, proble
my z programowaniem. Natomiast listy bd zawiera wykaz odnonikw do stron, na
ktrych opisano dany problem. Pojedyncza strona bdzie zawiera powtrzenie pytania
oraz dokadny opis.

Strona redakcja
W przypadku mojego miniportalu wanym miejscem bdzie strona redakcja. To wa
nie w tym miejscu znajdzie si ca struktura redakcji wraz z informacjami na temat
poszczeglnych redaktorw. Poniej przedstawiem przykadowy kod odpowiedzialny
za publikacj treci w tym miejscu.
<p>Redakcj portalu <strong>Laptopy.info.pl</strong> tworz sami fachowcy doskonale
obeznani w tematyce komputerw przenonych oraz p u blikacji tre ci w internecie.
Kady z redaktorw wkada cae swoje serce w to . aby prezentowane przez niego
m ateriay byy ciekawe i zawsze aktualne. Niniejsza strona ma pozwoli na to .
aby mg b li e j pozna kadego z nas.</p>
<div id="redakcja">
<h2>Redaktor naczelny</h3>
<img src "obrazki/bd.jpg" alt="Bartosz Danowski - redaktor naczelny" />
<ul>
<li>Im i i nazwisko: <strong>Bartosz Danowski</strong></li>
<1 i >Stanowi sko: <strong>Redaktor naczelny/waci e l</strong></1i >
<li>Obowiazki: <strong>Kierowanie prac portalu, kontakt z klientami
i reklamodawcami</strong></li>
<1 i >Kontakt: <strong>danowski1aptopy. i nfo.p l</strong></1i >
< /ul >
</div>

272

Tworzenie stron WWW w praktyce

<div id="redakcja">
<h3>Redaktor dziau Wiadomoci</h3>
<img src="obrazki/xx.jpg" alt="Jan Nowak - redaktor dziau wiadomoci" />
<ul>
<1i>Imi i nazwisko: <strong>Jan Nowak</strong></li>
<li>Stanowisko: <strong>Redaktor dziau wiadomoci</strong></li>
<li>Obowiazki: <strong>Przygotowanie i publikacja wiadomoci ze wiata komputerw
przenonych.< /strong></li >
<1i>Kontakt: <strong>nowak@laptopy. in fo .pl</strong></li >
</ul>
</div>

W ygld strony m a by maksymalnie uproszczony, a co za tym idzie, nie bd tutaj


stosowa szczeglnie wyszukanego formatowania. Poniej zamieciem odpowiednie
style, z ktrych skorzystaem w tym przypadku. Dodatkowo kady z selektorw zosta
przeze mnie omwiony.
div#redakcja
{
padding:10px;
background-c o lo r:#FAFAFA:
margin-bottom:10px;
}

Informacja o kadym z autorw jest publikowana w oddzielnym module. Ustawiem


kolor ta, dopenienie oraz dolny margines.
#redakcja h2, h3
{
clear:both:

Dla nagwkw stopnia drugiego i trzeciego wyczyem moliwo oblewania nimi


innych elementw. Zwr uwag, e powyszy zapis tyczy si wycznie tych na
gwkw, ktre znajduj si wewntrz innego elementu posiadajcego identyfikator
#redakcja.
div#redakcja ul
{
paddlng:20px:
list-style -typ e :n o n e ;
}

Do prezentacji danych wykorzystaem listy. W yczyem punktory oraz ustawiem


dopenienie.
div#redakcja img
{
flo a t: le f t ;
border:2px solid s ilv e r;
padding:2px;
margin:5px;

Rozdzia 6. Praktyczny projekt. Strona firmowa

273

Wczyem oblewanie obrazkw przez tekst oraz ustawiem ramk, dopenienie i mar
ginesy.
div#redakcja p

{
cleanboth;

}
Na koniec dla wszystkich akapitw wystpujcych w znaczniku <d iv id = "re d a k c ja >
< /di v> wyczyem oblewanie obrazkw.
Rysunek 6.7 przedstawia przykadow stron z informacjami na temat redakcji. Oczy
wicie, w praktyce dzia ten bdzie rozrasta si w zalenoci od liczby pracownikw.
RSS W iadom oci

Mapa s t r o n y

R e d a k c ja

J^SzukajJS

K ontakt-

LAPTOPY

profesjonalne c e n tru m intonnocyjne

<

A K T U A LN O C I

TESTY

Redakcj portalu L apiopv.iiifo.pl tw orz sami fachowcy doskonale obeznani w tematyce


komputerw przenonych oraz publikacji treci w mternecie K ady z redaktorw wkada cae swoje
serce w to, aby prezentowane przez niego materiay byy ciekawe i zawsze aktualne Niniejsza strona
m a pozwoli na to, aby mg bEej pozna kadego z nas

ARTY KU Y

F .A .Q .

A rtykuy
Baterie - prawda i mity
Partycje i noniki recovery

nLite - integracja sterownikw

Testy
IBM Thaik?

R ed ak to r naczelny
Imi i nazwisko: B artosz D a no w s ki
Stanowsiko R edak tor naczelny w aciel
Obowizki: K ierow anie prac portalu, kontakt z klientam i i
reklamodawcami
K ontakt danow skitaiaptopy.info.pl

R ed ak to r dziau W iadom oci

Imi i nazwisko: Jan N ow ak


Stanowsiko. R edak tor dziaa wiadom oci
Obowizki: Przygotowanie i publikacja wiadom oci ze wiata
komputerw przenonych.
Kontakt: n ow ak0lap top y.info.p l

W szelkie prawa zastrzeone. C op yright C 2003-2006 Laptopy.


Strona stworzona przez; CR3 - tworzenie stron w3c i optymalizacja

Rysunek 6.7. Widok strony z informacjami na temat redakcji

FO R U M

IB M ThinkPad 16 0
IB M ThinkPad X60

Tworzenie stron WWW w praktyce

274

Strona kontakt
Strona kontaktowa w przypadku portalu powinna zawiera szersze informacje, ni miao
to miejsce w witrynie domowej. Dokadniej mwic, poza nazw i adresem firmy warto
umieci formularz kontaktowy, adres e-mail oraz numery telefonw i faksu.
Przygotowanie strony kontaktowej nie jest raczej skomplikowane i niewiele rni si
od tego, co robilimy przy okazji witryny prywatnej. W zwizku z tym szczerze wierz,
e uda Ci si ten problem rozwiza samemu.

Testowanie gotowego projektu


W przypadku strony firmowej szczeglnie istotnym elementem procesu tworzenia jest
bardzo staranne przetestowanie witryny. Bezwzgldnie musimy sprawdzi wygld strony
w rnych przegldarkach oraz podda analizie poprawno kodu. Caa procedura te
stowa zostaa bardzo dokadnie opisana w poprzednim rozdziale i w tym miejscu pragn
Ci tam odesa.

Wnioski
Projekt strony firmowej jest ju gotowy i moesz go opublikowa w sieci. Poniej za
mieciem jeszcze kilka istotnych uwag, ktre przydadz si podczas tworzenia wasnej
strony firmowej.
Staraj si uywa stonowanych kolorw. Strona firmowa powinna by spokojna
i przyjemna dla oka.
Unikaj zmuszania goci do zmiany przyzwyczaje. Dokadniej mwic, nie
stosuj rozwiza, ktre s nietypowe i zbyt innowacyjne. Niestety dziaania
takie spowoduj, e Twoi gocie m og czu si zagubieni i zamiast szuka
potrzebnych informacji, przenios si na konkurencyjn witryn.
Dbaj o to, aby strona szybko si wczytywaa. Spraw bardzo wan jest szybki
serwer oraz optymalizacja kodu i grafiki. Jestem zwolennikiem stron firmowych,
ktre s oszczdne, jeli chodzi o elementy graficzne. Dzisiaj dziki CSS
moesz zbudowa rewelacyjn i ciekaw stron praktycznie bez grafiki.
Pamitaj, e strona firmowa to praktycznie same obowizki. Dbaj o to,
aby publikowane inform acje zawsze byy aktualne. Poza tym regularnie
czytaj poczt i odpowiadaj na e-maile trafiajce do firmy. Staraj si,
aby czas odpowiedzi na e-mail nie by duszy ni 24 godziny.

Rozdzia 7.

Praca z szablonami
Rozdzia ten zawiera przykadowy opis pracy z szablonami stron WWW. Skorzystaj
z niego ci Czytelnicy, dla ktrych moliwoci czystego jzyka HTML (XHTML) s
zbyt skpe.
Czytajc kolejne podrozdziay, dowiesz si, czym s szablony, poznasz zalety i wady
pracy z szablonami, nauczysz si szuka darmowych szablonw w intemecie, stworzysz
wasne szablony oraz poznasz wybrane elementy jzyka PHP, dziki czemu tworzenie
stron WWW za pom oc szablonw stanie si dla Ciebie prawdziw przyjemnoci.
W tym miejscu chciabym podzikowa Tomkowi Wieliczce z firmy Xann Design
(,http://www.xann.pl), ktry przygotowa zestaw kilku szablonw zamieszczonych na
pycie CD doczonej do tej ksiki.
Wszystkich projektw zamieszczonych na pycie mona uywa bezpatnie do two
rzenia swoich stron WWW, jednak prosibym o zamieszczenie informacji, i autorem
projektu jest firma Xann Design. W ydaje mi si, e to niezbyt wygrowana cena za
uywanie gotowych, darmowych projektw.

Czym s szablony?
Niemal codziennie moemy si spotka z szablonami. Jednak nie wszyscy zdaj sobie
spraw, czym tak na prawd jest szablon, dlatego dalej przytoczyem sownikow de
finicj tego pojcia:
wzr, wedug ktrego wykonuje si tamowo identyczne przedmioty;
wykonanie czego w jednakowy sposb; take wzr do automatycznego
odtwarzania rysunkw, cyfr, kopia, wzornik;
bezmylne, mechaniczne dziaanie, mylenie wedug jakiego schematu.
Dla nas z ca pew noci przydatna okae si pierwsza definicja, a dokadniej jej
pocztek.

276

Tworzenie stron WWW w praktyce

W przypadku tworzenia stron WWW szablon jest uywany w celu uatwienia pracy
ze stron. Przypomnij sobie, jak wygldao tworzenie mojej strony firmowej. Wszystkie
podstrony miay identyczny wygld, a rnice polegay jedynie na zmianie zawartoci
centralnej czci ekranu. Wspomniaem po utworzeniu pierwszej strony, e mamy sza
blon, na ktrym bdziemy bazowa, tworzc nastpne strony.
Niestety, takie rozwizanie ma sporo wad. W yobra sobie, e musz doda jeszcze
jedn pozycj do menu. To z pozoru proste zadanie wymagaoby poprawek we wszyst
kich plikach, jakie wchodz w skad mojej strony. Ta z pozoru baha czynno w przy
padku duej liczby plikw moe by szalenie mczca.
W zwizku z tym, e nie mam za duo czasu na aktualizacj swojej strony, nie wyobra
am sobie, e powic kilka godzin na wprowadzenie tych zmian. Dlatego czytajc
nastpne strony, dowiesz si, jak rozwizaem ten problem.

Zalety pracy z szablonami


Jeeli zdecydujesz si na stworzenie strony WWW przy wykorzystaniu szablonu, to
z ca pew noci nie bdziesz tego aowa. Zaoszczdzisz sporo czasu, ktry nor
malnie musiaby powici na aktualizacj i tworzenie kolejnych podobnych do sie
bie stron.
O grom n zalet pracy z szablonami je st atwo cakowitej zmiany wygldu stro
ny. W ystarczy zm odyfikowa tylko wygld szablonu, a Twoja strona bdzie nie do
poznania.
Pamitaj, e dla jednej strony moesz utworzy kilka szablonw, co moe znacznie
podnie jej atrakcyjno. Ty natom iast nie stracisz wiele wicej czasu, ni gdyby
tworzy jedn stron przy wykorzystaniu sposobw tradycyjnych.

Jak to dziaa?
Do ju wychwalania zalet szablonw pora zaj si prac z nimi. Zanim jednak
to nastpi, musisz zainstalowa na swoim komputerze serwer z obsug PHP. Nic si
nie martw, wszystko jest na pycie doczonej do tej ksiki.
Musisz odszuka i zainstalowa program o nazwie VertrigoServ, ktry jest pocze
niem serwera HTTP, kompilatora PHP i bazy danych mySQL. Po instalacji swoj stron
moesz przechowywa w folderze lProgram Files\VertrigoServ\www lub zmieni usta
wienia serwera Apache i wskaza inny katalog.
Teraz moesz wczy serwer. W tym celu z menu Start wybierz opcj VertigoServ,
a nastpnie VertigoServ. Dopiero teraz bdziesz mg pracowa z PHP i szablonami
wykorzystujcymi ten jzyk.

Rozdzia 7. Praca z szablonami

Uwaga

277

Jeeli uywasz kom unikatora Skype, to przed wczeniem VertigoServ wycz go.
W przeciwnym wypadku mog w ystpi problem y z Inlcjallzacj serw era Apache.

Jako przykad do dalszych rozwaa posuy mi prosta strona, ktr przeksztac tak,
by wykorzystywaa szablon oraz PHP. Oto zmodyfikowany kod strony:
<body>
<div id="naglowek">
<ul id="menugora">
<li><a href="feed">RSS Wiadomoci</a></li>
<li><a href="mapa-strony.html">Mapa strony</a></li>
<1 i ><a href="redakcja.html">Redakcja</a></li>
<11><a href=''kontakt.html">Kontakt</a></li>
</ul>
<div id="menusrodek">
<a href="/"><img src="obrazki/laptop.jpg" alt="Laptop, notebooki, tab le ty" /></a>
<a href=7"><img src="obrazki/logo.gif" alt="Laptop. notebooki, ta b le ty /></a>
<form method="get" id= searchform" action=h ttp ://la p to p y .in fo .p l">
<input type="text" value="" name="s" id="s" class="pole" />
<input type="submit" id="searchsubmit" value="Szukaj" class="przycisk" />
</form>
</div>
<ul id="menudol">
<!--Kod PHP (staa tre)-->

</ul>
</div>
<div id="zawartosc">
<!- -Kod PHP (zmienna tre)->

</div>
<div id="nawigacja">
<!--Kod PHP (staa tre)-->

</div>
<div i d="stopka">
<p>Wszelkie prawa zastrzeone. Copyright &#169: 2005-2006 <a href="/">Laptopy</a>.</p>
<p>Strona stworzona przez: <a href="http://www.cre8.pl/">CRE8 - tworzenie stron w3c
i optymalizacja</a></p>
<p><a href="sitemape.xml">XML SiteMap</a></p>
</div>
</body>

Teraz do kodu strony naley doda polecenia jzyka PHP, dziki ktrym bdziemy
mogli dynamicznie tworzy strony po stronie serwera. W praktyce bdzie to wygl
dao tak, e zostanie otwarty szablon i w odpowiednie miejsca dynamicznie zostanie
wstawiony tekst ze wskazanego przeze mnie rda.
Najpierw bezporednio pod otwierajcym znacznikiem <body> musz wstawi nast
pujcy cig znakw:

278

Tworzenie stron WWW w praktyce

<?
/ / D o m y ln e u sta w ie n ia s tro n y g w n e j

$b="body":

?>
Jest to deklaracja domylnych ustawie strony. Chodzi o to, e jeeli otworzymy stron
bez dodatkowych parametrw, to zostan podstawione domylne elementy okrelone
w tym kodzie.
W praktyce bdzie to wygldao tak, e jeeli szablon zostanie otwarty bez dodatko
wych parametrw, to domylnie zostanie do niego doczony plik o nazwie body.
Teraz musz okreli miejsca, w ktre bd chcia wstawi dane. W przypadku mojej
strony postanowiem , e lewa kolum na bdzie dynamicznie wstawiana do szablonu
i podmieniana w zalenoci od potrzeb. Natomiast gwne menu nawigacyjne oraz lewa
kolumna zostan jedynie wstawione do kodu strony. W zwizku z tym zmodyfikowany
kod szablonu bdzie wyglda nastpujco:
<body>

<?
// Domylne ustawienia strony gwnej
$b="body";

?>
<div id="naglowek">
<ul id="menugora">
<li><a href="feed">RSS Wiadomoci</a></li>
<li><a href="mapa-strony.html">Mapa strony</a></li>
<1 i><a href="redakcja.html">Redakcja</a></li>
<1 i><a href="kontakt.html">Kontakt</a></l i >

</u1>
<div id="menusrodek">
<a href='7"><img src='o b ra z k i/laptop.jpg" alt="Laptop. notebooki, tablety" /></a>
<a href="/"><img src="obrazki/1ogo.gif alt="Laptop. notebooki, tablety" /></a>
<form method="get" id="searchform" action="h ttp ://la p to p y .in fo .p l">
<input type="text" value="" name="s" id -"s " class="pole" />
<input type="submit" id="searchsubmit" value="Szukaj" class="przycisk" />
</form>
</div>
<ul id="menudol ">
<?php include ('menu.inc'); ?>

</ul >
</div>
<div id="zawartosc">

<?
if($bo) {includeC'Sbo.inc");} else {include("$b.inc");}

?>
</div>

Rozdzia 7. Praca z szablonami

279

<div id=nawigacja">
<?php include C praw a.inc'); ?>
</div>
<div id="stopka">
<p>Wszelkie prawa zastrzeone. Copyright &#169; 2005-2006 <a href="/">Laptopy</a>.</p>
<p>Strona stworzona przez: <a href="http://www.cre8.pl/">CRE8 - tworzenie stron w3c
i optymalizacja</a></p>
<p><a href="sitemape.xml">XML SiteHap</a></p>
</div>
</body>

Aby trwale wstawi dane do strony z innego pliku, musimy skorzysta z funkcji i ncl ude.
Odpowiedni kod zam ieciem poniej. Efekt dziaania przykadowego wpisu bdzie
taki, e podczas wczytywania strony automatycznie i na stae wczytana zostanie za
warto pliku menu.inc.
<?php include O menu.in c ); ?>

W celu wstawiania, a nastpnie podmieniania jakiego elementu strony w zalenoci od


parametru niezbdny jest inny fragmentu kodu PHP, ktry zamieciem poniej.
<?

i f ( $bo) {in clude ("$ b o .inc");} else {in c lu d e ("$ b .in c "l:} ?>

Oznaczenie $bo to parametr, ktry bdziemy wywoywa w sytuacji, gdy zmianie bdzie
miaa podlega centralna cz strony. Natomiast druga cz else {in c lu d e ("$ b .in c ")
nakazuje w przypadku braku parametru wczyta w to miejsce domylne wartoci, ktre
zadeklarowalimy zaraz na pocztku <body>. Gotowy szablon musisz koniecznie zapisa
pod nazw index.php. W przeciwnym wypadku uyty kod PHP nie zadziaa.
Przygotowaem szablon, wic teraz pora zaj si plikami, ktre bd dynamicznie
wstawia do szablonu. Oczywicie, s to dokumenty tekstowe. W przypadku strony
gwnej postanowiem, e tekst na niej zawarty znajdzie si w pliku o nazwie body.inc,
menu zapisaem jako menu.inc, a zawarto prawej kolumny jako praw a.inc. Zwr
uwag na to, e pliki m aj rozszerzenie inc, ktre wystpowao rwnie przy kodzie
PHP w szablonie.
Poniej zamieciem przykadow zwarto pliku body.inc. Dziki temu bdziesz mg
zobaczy jego zawarto.
<div id="wpis">
<h2><a href="news01">Nowy Flybook VM</a></h2>
<p class="data"><strong>Data:</strong> 20.07.2007 <strong>Autor:</strong> Bartosz
Danowsk1</p>
<img src= "obra zki/flybook.jpg" alt="Flybook MV" />
<p>Co pocztkowo wyglda na tuzinkowego laptopa, wcale nim nie je s t. Flybook VM
posiada ekran mogcy ustawi si w pozycji normalnego ekranu LCD, tak aby uytkownik
mia wygodniejsz pozycj podczas uytkowania komputera. Szczeglnie przydatne je s t
to w czasie korzystania z laptopa w miejscach, gdzie mamy bardzo ma powierzchni
na pooenie notebooka, np. w samolocie.</p>
<p>Flybook VM moe wyglda jak normalny laptop, lecz w rzeczywistoci twrcy laptopa
maj aspiracje, aby ich produkt konkurowa z desktopami. Laptopa mona bdzie kupi
pod koniec miesica w cenie $2,899.</p>
<p class="zrodlo"><a href="http.7/www.notebookcheck.net">Wicej &#187;</a></p>
</div>

280

Tworzenie stron WWW w praktyce

<div id="wpis">
<h2><a href="news02.html">Fujitsu LifeBook P7230</a></h2>
<p class="data"><strong>Data:</strong> 22.07.2007 <strong>Autor:</strong> Bartosz
Danowski</p>
<img s rc = "o b ra z k i/lifebook_miniatura.jpg" alt="Lifebook P7230" />
<p>Fujitsu o g o s i dostpno w USA LifeBooka P7230. ultraprzenonego laptopa
z matryca 10.6". F ujitsu LifeBook P7230 way poniej 1,4 kg i ma ok 3 cm gruboci.
Twierdzi si. e je s t to najmniejszy i najlejszy notebook z wbudowan zatok
do obsugi nagrywarki DVD. czy drugiej b a te rii - zwiksza ona czas pracy notebooka
do prawie 10 godzin.</p>
<p>Notebook je s t wyposaony w procesor Core Solo U1400 P7230, oparty na chipsecie
945GMA, oraz w kart graficzn Intel Graphics Media Accelerator 950. Obsuguje do 2 GB
pamici RAM i moe posiad dysk twardy do 80 GB (4200 rpm).</p>
<p class="zrodlo"><a href="news02.html">Wicej &#187:</a></p>
</div>

Dodatkowo przedstawiem jeszcze zawarto pliku menu. inc.


<1 i><a
<li><a
<1 i ><a
<1 i><a
<1 i><a

href= /">Aktualnoci</a></l i >


href="/testy">Testy</a></li>
href="/ artykuly">Artykuy</a></1i >
href="/faq">F.A.Q.</a></li>
href="h ttp : //forum .1aptopy.in fo .pl">Forum</a></l i>

Jak widzisz na przykadach, wszystkie pliki z rozszerzeniem inc zawieraj fragmenty


kodu XHTML, ktry w poczeniu z index.php tworzy kompletn stron.
W tej chwili moesz umieci wszystkie pliki strony w katalogu serwera i sprawdzi,
czy strona dziaa prawidowo. W ystarczy, e w oknie przegldarki wpiszesz adres
127.0.0.1 i naciniesz Enter. Rysunek 7.1 przedstawia efekt dziaania strony zbudowa
nej dynamicznie.
Teraz poka, w jaki sposb tworzy odsyacze dynamicznie podmieniajce zawarto
wybranej czci strony. Po otwarciu szablonu domylnie zostay do niego wczytane
elementy zapisane w plikach body. inc, menu.inc oraz prawa.inc. Jeeli tak si nie stao,
znaczy to, e gdzie po drodze zosta popeniony bd. W takim przypadku sprbuj
przepisa moje przykady.
Odnonik mogcy zmieni pewien fragment szablonu w moim przykadzie lew
kolumn moe mie posta:
<a href="index.php?bo=news02" >Wicej</a>

Zwr uwag, e otwieram plik index.php (to szablon), a tu po nim znajduje si znak
zapytania oraz parametr bo, ktry zadeklarowaem w szablonie. Nastpnie po znaku
rwnoci znajduje si nazwa pliku, ktry chc wczyta do szablonu w miejsce, gdzie
znajduje si kod PHP z param etrem bo. Pamitaj, e podajc nazw pliku, pomijasz
rozszerzenie inc, gdy jest ono domylnie zadeklarowane w kodzie PHP szablonu.
Na rysunku 7.2 wida efekt dziaania strony, w ktrej szablon zosta wywoany wraz
z dodatkowym parametrem.

Rozdzia 7. Praca z szablonami

l_ ; Heion

Dm ow ski

w Oisable- *

Cookies-

H irdw are
.

281

W iadom oci

'

CSS- . O F o rm i-

j j Laptopy, notebooki, tablety - profe...

Imeges- 0

Pozycjonowanie

\ j Google Reader (_J iN G Online

Materiay M ia k i O

Sowniki

i Program

Information-

Laptopy, n o te b o o k i ta b lety - p r o f _ Q

LAPTOPY

p r o f e s jo n a ln e c e n t r o m in fo r m a c y jn e

AKTUA LN O CI

TESTY

N ow y F ly b o o k V M

ARTYKUY

___

FORUM

A rtvkntv
Baterie - p r a w d a i naty
Partycje i noniki recovery
C o pocztkow o wyglda n a tuzinkowego laptopa, wcae nim nie
jest. Flybook VM posiada ekran mogcy ustawi si w pozycji
normalnego ekranu LCD, tak, aby uytkownik mia wygodniejsz
pozycj podczas uytkowania kom putera Szczeglnie przydatne
jest to w czasie korzystania z laptopa w miejscach, gdzie mamy
bardzo ma powierzchni na pooenie notebook, np w samolocie.

nLite - integracja sterownikw

Testy
IB M ThinkPad T42
IB M ThinkPad T60
IBM ThinkPad X 60

Fybook V M moe wyglda jak normalny laptop, lecz w


rzeczywistoci twrcy laptopa maj aspiracje, aby ich produkt
konkurowa z desktopami. Laptopa mona bdzie kupi p o d koniec
miesica w cenie S2,899.

W icej

F u jitsu L ifeB o o k P 7 2 3 0

Daiii ? )' ?>*'Amm".itatbsDimwsld


j http://127.0X).l/f*q

P*9Rnk Compit

0 790s

Rysunek 7.1. Efekt dziaania strony dynamicznej

Skd mona pobra gotowe szablony?


Internet jest peny darmowych dodatkw oraz rozszerze, a take darmowych szablonw
stron WWW. W tym podrozdziale zamieciem kilka odnonikw do stron, z ktrych
moesz pobra darmowe szablony dla swojej strony:
http://szablony.stron.pl
http://szablonownia.atesites. com
http://tworzenie-stron.atticlab.pl
http://szablony.skryptoteka.pl
http://www.szablony.com
http://www.szablon.pl

282

Tworzenie stron WWW w praktyce

Laptopy, notebooki, tablety - profesjonalne centrum in form acji - Mozslla Firefox


Plik

Edycja

W idok

Histeria

4>L - H elion

D anow ski

Cookies-

Disable H
U

Zakadki

H ardw are

Pom oc

W iad o m o ci

CSS- V J Form s-

Laptopy, notebooki, tablety - profe...

R5S K i a c t o j s o c i

Narzdzia

h ttp ://1 2 7 .0 X l.l/t t/in d e d .p h p ? b o = n e w 5 0 2


P o zy cjo n o w an ie

Images- -.* Inform atio n-

j_j Laptopy, n otebo oki, ta blety - pr of

M apa s t r o n y

G o o g le Reader j M G O nline

M iscellaneous*

O utline-

M ateriay ksizki l J Sowniki

* Resize-

Tools- ; : View Source-

Program y
O ptions-

Fabryka Kurs CSS: Tabela porwna...

R e d a k c je

I B I ;

LAPTOPY

prfesjoalh^ c*nrum informcyjns

A K T l A N O SCI

TESTY

F u jits u L ife B o o k P 7 2 3 0

A R T Y K U Y

F .A .Q .

T O R l'M

Artykuy
Baterie - prawda i mity
P arty cje i noniki rec o v ery

Fujitsu ogosi dostpno w USA LifeBook-a P7230, utra-przenonego


laptopa z 10.6" matryc- Fujitsu LifeBook P 7230 way poniej l,4kg i m a ok
3 cm grubosci.Twierdzi si, e jest to najmniejszy i najlejszy' notebook z
wbudowan zatok do obsugi nagrywarl DVD. czy drugiej baterii - zwiksza
ona czas pracy notebooka do prawie 10 godzin.

nLite - integracja sterownikw


Testy
IBM ThinkPad T42
IBM ThinkPad T60
IBM ThinkPad X 60

N otebook jest wyposa om w procesor C ore Sok) U 1400 P 7230 opartvm na chipsecie 945GM A
oraz w kart graficzna Intel Graphics M edia Accelerator 950 Obsuguje do 2GB pamici RAM i
moe postadc dysk twardy do 80GB (4200rpm)
Fujitsu LifeBook P 7230 jest wyposaony w bezprzew odow kart sieciow Intel PR O Wireless
3945b g Posiada rwnie wbudow any modem, kart sieciow 1GB oraz Bluetooth Fujitsu LifeBook
P 7230 jest zaopatrzony w dw a porty USB, port IEEE 1394, port wideo, port na karty I II PCM C IA i
port do obsugi kart M emory Stick, M em ory Stick PRO . Secure Digital (SD)
Uhraprzenony laptop Fujitsu jest dostpny w wersji z obudow pokryt czarn lub bia skor
M ona wybra wersje z svstemem Windows Vista Home Basic W indows Vista Business ub
W indows XP Professional LifeBook P '2 3 0 bdzie kosztowa od S 1,699 za podstawow
konfiguracj

PgeRank. Compele

S c.! a-,

I"' i

Rysunek 7.2. E fekt dziaania strony dynamicznej p o wywoaniu szablonu z parametrem


Poza tym przypominam, e na dodanej do tej ksiki pycie CD znajdziesz kilka cie
kawych szablonw.

Wnioski
*
Wyobra sobie rozbudow strony WWW, ktra skada si z tysica podstron. W przy
padku zmiany wygldu caej witryny, ktra nie uywa szablonw, moesz liczy si
z tygodniami cikiej i mozolnej pracy. Teraz pomyl o tej samej stronie, ale zbudo
wanej z wykorzystaniem szablonu. Zwykle wystarczy zmiana jednego lub kilku plikw
odpowiedzialnych za wygld i po kopocie.
Podsumowujc, korzystanie z szablonw oraz jzyka PHP znacznie uatwia proces
budowy strony WWW. Opisany przeze mnie przykad opiera si na pobieraniu danych
z innych plikw, ale nic nie stoi na przeszkodzie, aby skorzysta z bazy danych i z niej
pobiera dane.

Rozdzia 8.

Darmowe usugi
dostpne w sieci
Rozpoczynajc pisanie tej ksiki, postanowiem nauczy Ci tworzenia stron WWW
w moliwe najprostszy sposb. Dlatego te skupiem si na jzyku HTML (XHTML)
i kaskadowych arkuszach stylw. Jeli chodzi o reszt spraw, chciabym, aby wiedzia,
e w zasadzie wszystko, co jest Ci potrzebne, znajdziesz w sieci i wystarczy z tego
umie skorzysta. Tak byo z szablonami pokazaem, jak mona z nich korzysta
bez znajomoci PHP. Wystarczy, e tylko nieznacznie zmodyfikujesz moje przykady
i ju moesz dziaa po stronie serwera.
W tym rozdziale chciaem Ci pokaza, jak skorzysta z popularnych wodotryskw,
ktre m og urozmaici stron. Oczywicie, bdziemy korzysta z darmowych usug
dostpnych w intemecie.

Statystyki
Stat.pl to polski system statystyk, ktry mona uzna za obowizujcy standard. W a
ciciele witryn utrzymujcych si z reklam, a take reklamodawcy uywaj rozwiza
dostpnych na stronie http://stat.pl do prowadzenia rozmw i przygotowywania kam
panii reklamowych.
Stat.pl udostpnia kilka wersji swoich statystyk, ktre rni si cen oraz oferowanymi
moliwociami. Na rysunku 8.1 przedstawiem tabel ze szczegowym porwnaniem
poszczeglnych wersji statystyk.
Usuga w wersji stat.pl/PBI jest oferowana bezpatnie wraz z pewnymi ograniczenia
mi. Osoby wybierajce darm ow wersj statystyk m usz pogodzi si z tym, e ich
witryna od czasu do czasu bdzie wywietla nowe okno z reklam. Poza tym darmowa
wersja statystyk pozwala kontrolowa ruch z rozbiciem na dwie strony. Chodzi o to,
e moemy niezalenie monitorowa cay serwis oraz jedn wybran podstron. Wersje

284

Rysunek 8.1.
Porwnanie
wersji statystyk
oferowanych przez
Stat.pl. Tabela
pochodzi ze strony
http://stat.pl

Tworzenie stron WWW w praktyce

1E l

&

100
500
. bez
bez
000 /miesic 000 /miesic limitu /cennik limitu /cennik

lim it odson

bez limitu

skrypty
zliczajce

2 skrypty 30 skryptw 50 skryptw

emisja ankiet
badawczych na
serwisie
logo na stronie
gwnej

100
skryptw

200
skryptw

*
+

administracja
prawa edycji
skryptw
usuwanie
odsyaczy

blokada
adresw IP

>

prawa dostpu
(dodawanie
loginw )

**

*
**

J
-*

LOGO
Inform acje o
koncie
Dane adresowe

lyV

>

ranking
liczniki

**

pozwala zlicza
strony HTML,
PHP, ASP...

<9

strony FLASH
kliknicia w URL

t
w

y
M

kliknicia w
elementy FLASH

wt

strony SSL

J #

s/

y>

y>

>

prezentacja danych

>

w ykresy
dane
tabelaryczne
kopiowanie
w artoci do
schowka
dane
podsumowujce

W
y*

y*

quick stats

odsony

a
j*
a

redni czas
trw ania odsony

rednia pozycja
w wizycie

liczba
pocztkw w izyt

liczba zakocze
w izyt

uytkownicy
W izyty

**

V
V*

y>
V

V*

Rozdzia 8. Darmowe usugi dostpne w sieci

285

patne umoliwiaj niezalen kontrol nawet do 200 podstron. Kolejnym mankamen


tem wersji darmowej jest obowizek umieszczenia logo Stat.pl na stronie, na ktrej
dziaaj statystyki.
Najwaniejsze ograniczenia dotycz liczby prezentowanych danych. Darmow wersj
statystyk cechuje w tym zakresie szereg ogranicze, ktre wida podczas analizy tabeli
z rysunku 8.1. Nie zmienia to faktu, e darmowe statystyki wystarczaj do zdobywa
nia informacji na temat zachowania si strony oraz jej goci. Patne wersje statystyk
mona testowa przez 14 dni. Dodatkowo powiniene mie na uwadze fakt, e istnieje
moliwo przejcia z bezpatnych statystyk na patne z zachowaniem zgromadzonych
do tej pory wynikw.

Instalacja darmowej wersji statystyk


Uznaem, e warto powici kilka sw instalacji i uruchomieniu darmowej wersji
statystyk udostpnionej przez firm Stat.pl. C a operacj zaczynamy od rejestracji
i zaoenia darmowego konta na stronie http://stat.pl/pl/oferta/rejestracja. Wystarczy,
e wypenisz dostpny na podanej przeze mnie stronie formularz widoczny na rysun
ku 8.2, a nastpnie klikniesz przycisk rejestruj.
Pamitaj, e obowizkowo musisz wypeni wszystkie pola oznaczone gwiazdk. Moim
zdaniem powiniene rwnie uzupeni te pola, ktre nie s obowizkowe, a odpo
wiadaj za opis strony, wybr podkategorii oraz dodanie strony do rankingu.
Po klikniciu przycisku rejestruj system sprawdzi, czy podane przez Ciebie dane s po
prawne. Jeeli wszystko bdzie si zgadzao, konto zostanie utworzone i ukae si
nowe okno z panelem administracyjnym statystyk (rysunek 8.3).
W grnej czci znajdziesz dwie pozycje: Strona gwna witryny oraz Podstrony. Po
zaznaczeniu jednej z wymienionych pozycji w dolnej czci okna pojawi si kod skryptu,
ktry musisz umieci na swojej stronie. Skrypt opisany jako Strona gwna witryny
powinien trafi do kodu strony gwnej. Natomiast drugi ze skryptw musi znale si
we wszystkich podstronach serwisu.

Uwaga

Skrypty wystarczy skopiowa i wklei do kodu strony midzy znaczniki <bodyx/body>.


Autorzy sta tystyk zalecaj, aby skrypt znalaz si przed zam ykajcym znacznikiem
</body>. Nie wprowadzamy adnych zmian, poniewa moe si to odbi negatywnie
na dziaaniu statystyk.

Po umieszczeniu kodu odpowiedzialnego za dziaanie statystyk w treci witryny pozo


staje ju tylko dopeni regulaminu. M am tutaj na myli dodanie kodu odpowiedzial
nego za wywietlanie maego znaczka z logo serwisu. Odpowiedni kod znajdziesz,
wybierajc opcj^Adm inistracja/Logo (rysunek 8.4).
Logo moe wystpowa w dwch postaciach. Pierwsza to animowany przycisk wyko
nany w technologii Adobe Flash. Jeeli wybierzemy ten wariant, moemy kontrolowa
kolory oraz rozmiar logo. Dmgie z rozwiza pozwala na skorzystanie ze zwyczajnego
pliku graficznego w formacie .gif.

Tworzenie stron WWW w praktyce

286

Rysunek 8.2.
Rejestracja
i zakadanie konta
z dostpem do usug
oferowanych
przez Stat.pl

mps strony

tonwfc?

stat24

login:
r

hasto:

zapamitaj mnie
i* Nie pamitam hasa

Rejestruj

'b-iC-sfe i3 !)o u a p .e .B

stat.pl
rejestracja statystyk

s ta tB iz n e s /
sta tB iz n e sP R O
s ta tO p tim u m /
s ta tO p tim u m P L U S

D a n e k o n ta

s ta t.p l/ P B I
s ta tR a p o r t
Z a s to s o w a n ie s t a ty s ty k

[G s ta t .p l/ P B I

U s u g a *

C e n n ik

s t a t O p t im u m

J a k d o k o n a o p a t

s ta t O p t im u m P L U S

R e je s t r a c ja

s t a t B iz n e s
s t a t B iz n e s P r o

P o r w n a n ie w e r s ji
s ta tD e m o
L o g o w an ie

zamw
bezpatn
konsultacj
I m i i n a zw isk o i

L o g in *

la p to p y in fo.pl

H a s o *

Powtrz haso*

E m a il

a d re s @ e m a il.c o m

A d r e s w it r y n y *

h ttp.//lapo py in fo.pl

W ersja jzyko w a*

j p d W a T ~ ]B

K a t e g o r ia w itr y n y *

j lrternet. kompiitefy ^

P o d k a t e g o n a w it r y n y

[ko m p u te ry

T y tu ( d o 2 5 z n a k w )

L a p to p y , notebo oki

O p is ( d o 1 0 0 z n a k w )

F o ru m p o w i c o n e k o m p u

e -m a ilr

T e le fo n
( z n r k ie ru n k o w y m )1

T e m a t r o z m o wy t
oferta partnerska

| |

T erm in ic o n te k tu :

25-10-2008

&

D o d a j m o j s t r o n d o r a n k m o .s t a t. D l

R e g u la m in w ia d c z e n ia u s u g m o n ito r o w a n ia
w it r y n y in t e r n e t o w e j
Rozdzia I.

Postanowienia oglne

Hi
iii

1. Definicje
a) Usuga bezpatna - statystyki
ogldalnoci witryny internetowej
udostpniane przez Usugodawc na
warunkach niniejszego regulaminu
zgodnie ze specyfikacj zamieszczon na
stronach internetowych stat24;
b) Klient - podmiot zlecajcy
Usugodawcy wiadczenie Usugi
bezpatnej poprzez wypenienie
elektronicznego formularza
rejestracyjnego dostpnego na stronach
internetowych http://www.stat.pl;
v
I*

A k c e p t u j p o w y s z y r e g u la m in "

Rozdzia 8. Darmowe usugi dostpne w sieci

287

stat.pl/PBI

W ceu m onitorowania w itryn y za


pomoc s ta ty styk s tat24
konieczne je s t umieszczenie
skryptw zliczajcych w kodzie
stron witryny.

W y k o rz y sta n e sk r y p ty : 2 /
ir

krypty

W tym celu naley w ykona


ponisze kroki:
U tw orzy nowy skrypt - w tym celu
naley klikn w przycisk dodaj nowy
sk ry p t
;

Dnito) nomy sk ry p i

Poda nazw d a nowego skryptu oraz


wybra typ skryptu, a nastpnie wcisn
przycisk 'zatw ierd'. Nazwa skryptu moe
mie maksymalnie 30 znakw oraz musi
by unikalna w ramach konta (czyli nie
jest moliwym zaoenie dwch skryptw
o takie) samej nazwie).dd

W zalenoci od w ersji s tatystyk,


mona definiowa typ:
htm l - skrypt do monitorowania odson
stron typu html (dotyczy zarwno stron
pisanych bezporednio w html, jak te
pisanych w jzykach skryptowych typu
php, a sp itp .)
klik h tm l - skrypt do monitorowania
klikni na inki (np. przeoerowama do
innego serwisu ki) pobranie pikw z
witryny)
fash - skrypt do monitorowania odson
stron stworzonych w technologii Flash
kkk flash - skrypt do monitorowania
kikrn na elementy wykonane w

<script type^text/javaicript*)
document.writeinCV+je rV ip t tvpe="teKt/(avasortpt !ro='htp.//s3hit.j1at.pl/-+(neuj
DateO).9etTimeO+Vcript)?tdfiprrqeLMCft9/ioOKP2MIYH2G?HINHUiEWCI3KrOr'.U?/lr11"></'+'or,+'lpl>');
</oript>

Rysunek 8.3. Panel administracyjny statystyk widoczny bezporednio p o zaoeniu konta

roacmueoTopy.inrojH

...

* (Wntinijt.-tK.io. * i
POMOI.

WIZYTY

* HW1INIS1RttC IB - IOOO

Zgodnie z Regulaminem usugi


stat.p l/PB I prosimy o u m ieszcze
na stronie g w nej Pastwa w itryny

Udostpniamy togo wykonane w


technologii flash oraz togo w form ade gif.

OOSONY

OOSYRCZE

GEaOKfltlZfiCW

Praw d doitpu Skrypty Losa * Blokada IP

TECHNICZNE

RflNKJNGI

KONWERSJA

h
I P o b lare logo ui p o s ta c i w e k to ro w e j

W ybiorz kolor:

4*
*

Logo w e flashu moe by statyczne lub

Dla flash toga istnieje mozfcwo wybrania


wiecoo toga oraz kolorw ta, napisu i
I ogo a nim ow ane.
Jedynym naoonym przez nas
ograreczenem je s t to i kolor napisu
stapT nie moe by taki sam jak kolor

Udostpniamy logo w gifie w kolorze


biaym lub czarnym.

R0MMSTIWC

i Wormacje o koncie Dane adresowe Ranking Licznik

13 tak

Ne
I i Po klikniciu przekieruj na witryn uiuicu.jtat.pl

Mona zdecydowa take czy po kttandu


n a togo internauta pow ruen zosta
p rkierow any na witryn sta t.p l, czy do
statystyk udostpnianych gociom.
Uwaga:
Istnieje moliwo udostpnienia
statystyk dla Goci poprzez kliknicie
przez rch w logo typ sta t.p l zamieszczony
na stro n www. Aby tak funkgonatoo
udostpni naley utworzy praw a
dostpu d a G ooa. Patrz: A dm m straga
> Prawa dostpu > Go. N a st^ m przy
wyborze wersji togo zaznaczy
przekierowywanie do statystyk dla g o .
Jeeli nie zdefiniujemy poziomu dostpu
d a god i umiecimy na stro n togo z

Rysunek 8.4. Przygotowanie kodu odpowiedzialnego za prezentacj logo Stat.pl

28 8

Tworzenie stron WWW w praktyce

Wystarczy wybra odpowiedni wersj logo i dopasowa j do swoich potrzeb. Majc


na uwadze to, e pozycjonujemy wasn stron, proponuj wyczenie opcji Po klik
niciu przekieruj na witryn www.stat.pl.
Teraz skopiuj kod, ktry zostanie automatycznie wygenerowany i udostpniony w dol
nej czci okna. Skopiowany fragment wklej do kodu strony. Zgodnie z regulaminem,
logo powinno by widoczne na gwnej stronie serwisu obsugiwanego przez staty
styki. Nie ma dodatkowych wytycznych na tem at samej lokalizacji logo, wic masz
tutaj w oln rk.
W tej chwili instalacja statystyk zostaa zakoczona i pozostaje ju tylko czeka na
pierwszych odwiedzajcych i pierwsze wyniki.

Dostpne informacje
Informujc o darmowej wersji statystyk, wspominaem, e m aj one pewne ograni
czenia. Jednak nie powinny stanowi one duej przeszkody w przypadku mniejszych
witryn i osb, ktrym nie przeszkadzaj pojawiajce si od czasu do czasu reklamy.
W tym podrozdziale opisalimy kilka najwaniejszych danych, do ktrych mamy dostp.

Uytkownicy
W sekcji Uytkownicy (rysunek 8.5) zawarte s dane na temat liczby uytkownikw
ogldajcych stron. Sposb badania liczby uytkownikw zakada, e kady go
odwiedzajcy stron uywa tylko jednej przegldarki i jednego ciasteczka cookie.
W uproszczeniu mona przyj, e zliczane s unikalne cookies. Darmowa wersja staty
styk daje jedynie dostp do podsumowania. Dane m og by prezentowane w zestawie
niu rnych okresw, np. ostatnie dwa lata albo poprzedni lub biecy rok.
Warto zwrci uwag, e dostpne wyniki rozbijaj uytkownikw na nowych i na
powracajcych. To cenne informacje, poniewa pozwalaj stwierdzi, czy podjte wy
siki majce na celu lepsze wypozycjonowanie strony przyniosy efekt. Napyw nowych
uytkownikw oraz zmiany, jakie w napywie tym zachodz, to wskanik obrazujcy
rezultat podjtych przez Ciebie dziaa. Natomiast dane na temat uytkownikw po
wracajcych przydaj si przy okrelaniu tego, czy witryna spenia pokadane w niej
oczekiwania. Jeeli liczba powracajcych uytkownikw jest dua, wiadczy to o tym,
e strona znalaza grup wiernych czytelnikw.

Wizyty
W sekcji Wizyty (rysunek 8.6) przedstawione zostay dokadniejsze dane na temat za
chowania uytkownika strony. Wizyta w rozumieniu prezentowanych statystyk oznacza
cig nastpujcych po sobie odson poszczeglnych podstron, wykonanych przez jed
nego uytkownika. Istotnym czynnikiem jest tutaj czas. Ot midzy poszczeglnymi
odsonami nie moe upyn wicej ni 30 minut. Jeeli czas ten zostanie przekroczony,
mamy ju do czynienia z kolejn wizyt.

Rozdzia 8. Darmowe ushigi dostpne w sieci

LPTOPYJMf O.Pl
podstrony
Strona louina witryny

289

0 0 0

1$

Z 117 865
2 036 7721
30 593

& pouiraoafccv

O nowi

O irednia na mieaac

i
m

Stycze

Luty

Marseo

Kwiecie

Maj

Czerwiec

Lipiec

Sierpie

2005

Wrzesie Padziernik Listopad

6 pwjjracajacs-

O now.

t5 750
13 V
250

Stycze

lu ty

Marzec

Kwieoie

Maj

Czerwiec

Upiec

Sierpie

Wrzesie Padzior

Rysunek 8.5. Panel administracyjny systemu Sta t.p l sekcja Uytkownicy

Rysunek 8.6. Panel administracyjny systemu Stat.pl sekcja Wizyty

Grudzie

: freama na misko

Tworzenie stron WWW w praktyce

290

Dziki danym o wizytach moemy wycign wnioski na temat tego, czy dana witry
na spenia swoje zaoenia. Cennym parametrem, do ktrego mamy dostp, jest dugo
wizyty obrazujca, ile podstron odwiedzi uytkownik podczas swojej bytnoci na stro
nie. Jeeli dodatkowo zestawimy te dane z czasem wizyty, moemy stwierdzi, czy go
strony zainteresowa si treci, czy te tylko poklika i poszed sobie.
Uzupenieniem s szczegowe dane na temat ostatnich 50 wizyt. Dziki nim moemy
dowiedzie si, skd pochodzi uytkownik, w jaki sposb trafi na stron i czego szu
ka. Dane te pozw alaj zebra wicej informacji na temat zachowa konkretnych
uytkownikw. Z punktu widzenia pozycjonera, szczeglnie cenne s informacje do
tyczce sw kluczowych, po wpisaniu ktrych uytkownik trafi na stron.

Odsony
W sekcji Odsony (rysunek 8.7) przedstawione zostay dane na temat wywietle ka
dej strony przez przegldark uytkownika. Parametr ten najwierniej prezentuje wzrost
lub spadek popularnoci witryny. W przypadku wersji bezpatnej moemy sprawdzi
liczb odson strony gwnej oraz wszystkich pozostaych podstron. Zrnicowanie
jest mae i nie pozwala zweryfikowa, jaka jest popularno poszczeglnych czci
witryny. Nie zmienia to faktu, e moemy wyrobi sobie zdanie na temat oglnych
tendencji panujcych na analizowanej witrynie.

RDMMSTfiflOft

LneroPVJNro.pl
H I podstrony
Strona qloamo mitryny

2 11/ 5
2 096 772
30 333

m
m

Rysunek 8.7. Panel administracyjny systemu Stat.pl sekcja Odsony

Rozdzia 8. Darmowe usugi dostpne w sieci

291

Odsyacze
W kolejnej sekcji, o nazwie Odsyacze (rysunek 8.8), zawarte zostay najcenniejsze
z punktu widzenia osoby zajmujcej si pozycjonow aniem stron informacje.
W podsumowaniu moemy uzyska informacje na temat udziau wej z wyszukiwa
rek, katalogw, zwykych stron i bezporednich wej.

BOB
a Zwykle witryny

. Wyszukiwarki Katalogi

**

Wrzesie 2006

Sierpie 2006 ...

Lipiec 2006

Padziernik 006

Ostatnia aktualizacja. 21 padziernika 2006, 030000


1

Miesic

0 bezpccreonie

V.

Padziernik 2006
Wrzesie 2006
Sier pie 2006
Lipiec 2006

19 SIS
25 186

58.3%
59.3%

Ulitryfiy
1 759
6 752

V.
m%
15.7%

i,IM w a r i. i

Katalogi

9 092
10 792

272%
25.1J4

113
0

1
O.HX
0X

Rysunek 8.8. Panel administracyjny systemu Sta t.p l sekcja Odsyacze/Podsumowanie

W podmenu Strony odsyajce (rysunek 8.9) mieci si wykaz stron, z ktrych miay
miejsce odwoania. Lista przedstawia 20 najpopularniejszych stron, ktre odsyay do
Twojej witryny. Tabele zawieraj dane o adresie strony, dugoci i czasie wizyty. Do
datkowo wyniki podzielono na strony polskie, zagraniczne i nierozpoznane.
Na szczegln analiz zasuguje podmenu Wyszukiwarki (rysunek 8.10), w ktrym za
prezentowane zostay dane na temat odwoa z wyszukiwarek. Dostpne dane przed
stawiaj nazw wyszukiwarki, liczb wej z polecenia danej wyszukiwarki oraz dugo
i czas trwania wizyty. W arto zauway, e poszczeglne wyszukiwarki s podzie
lone wedug silnikw. W naszym przykadzie z silnika Google korzystaj strony http://
www.google.pl,http://interia.pl i http://mysearch.com. Liczba wej z wyszukiwarki
Google jest prezentowana oglnie dla wszystkich witryn uywajcych silnika Google
oraz dla kadej oddzielnie. Dodatkowe dane na temat dugoci wizyty pozwalaj oceni
warto uytkownikw odsyanych przez konkretne wyszukiwarki. Dziki temu mo
emy na przykad intensyfikowa lub ogranicza dziaania majce na celu uzyskanie
lepszych pozycji w wynikach wyszukiwania.

Tworzenie stron WWW w praktyce

292

UYTKOWNCY

WCVTY

OOStNY

OOSYlftCZE

GEOLOKHUZROfl

TECWC2TC

RftfWNGI

KONWERSJA

- ' .
fiDTWSTRfiOfl

"

<

Podvumowanie trony odsytajqr. Wyszukiwarki Katalogi


STRONY OOSYtttJRCF.

POMOC

LIPIEC 2006

W2CSN 2006

3IEPPIEM 2006

H | podrtrony
EU Strona glowna witryny

2 086 772
30 593

' f ptrfOZIEP; K 2006

OD

2 1 1 ,9 6 5
j 1 tp

strony gdsytafta <iMtf pntifran)


WSZYSTKIE

LRPTOPY.INFO.PL

SKRYPTY

Kaaba w izyt

tr, osas trwania

S 853

dtugotf w zyty

ts

1 : B P o lsk a - H 676
forum.laptopy.info.pl <6> - 2 76H
W im iy top-IOO.pl <t) - 3HI
[p. forum.purepc pl <2> - IH3
- laptopyjnfo.pl <3> - 125
www fraipe.pl <6> - 99
[-0 forum ldg.pl <6> - 95
* WWWtotoi.pl <2 > -78
- www laptopy infopl ( 0 - 55
www cdrinfo.pl <6> - HI
pocztalO o2.pl <0 - HO
poczta.onot.pl <2> - 38
P www.myapplo.pl < 0 - 3 7
forumjnfojama.pl <1> - 31
fi twojopc.pl <3> - 31
poczta.wp.pl <6> - 30
S komputery.katalogi.pl <3> - 29
B forum.cdrinfo.pl <6) - 28
Si forum.gazota.pl <1> - 26
3 www.fkn.pl <3) - 25
iii wwwJaptopnews.pl <H) - 21

oo ;
8.3
10.9
12
6.2
123
6.6
51
13
13.3
12.0
6
8.8
33
13.7
7.9
10.7
H.6
9.7
12.8
10
16.8 .

I2m I9s
17m 36s
31s
7m Ws
13m 28s
9m 25s
5m 2k
Im 37s
16m 38$
10m 3Hs
8m19s
7m 56$
2m2s
1Hm HHs
Hm 7s
17m HHs
5m 19$
9m 27$
lim 33$
0$
Nm 32$
6m 3Hs
10$
16m 18$
6m 3s
1$
2m 58$
32m 31$
Os
H2m 32$

i~ Z a g r a n ic a - 79
T j www.iimiy.not <6> - 17
BI wwwJtaidto.org < 0-10
t my.opera.oom <1) - 10
* wwwgjrzomo org <0 - 5
- www.frozita.not <0 - H
:.t dolicio.ui <2) - 3
i www.p35-forum de <2> - 3
* forum.ostoskop.not <0 - 2

55
1.1
117
5.9
i2 :
2.0
32.3
1.0
205

Rysunek 8.9. Panel adm inistracyjny system u Stat.pl sekcja Odsyacze/Strony odsyajce

stat.pl/PBl
W m tm m m
* >.: ; ,
SKRYPTY

WIZYTY

ODStONY

* WYSZUKIWARKI

POMOC

| podstrony
I Strona gwna witryny

tVTKOWTCV

ODSYtfiCZE

RRNKNG

KONWERSJA

ROMKSSTRROfi

Podsumowani Strony odjytajgoe *

i- >>

Ms

ftecWoM

2 086 772
30 593
WSZYSTKIE - 9 025

7m

6.5

Googlo - 8 587
- googlo com <31) - 8 538
p lntorta.pl <28) - H7
aol.com <0 - 1
32 mysearch.com <0 - 1

7m 6s
7m 6s
6m 37$
0$
Os

6.5
6.5
8.0

N e tS p r ln t 253
- wp.pl <31) - 230
t komputorswiat.pl <5) - 10
' o2pl <5> - 5
notsprint.pl <5> - 5
- gery.pl <1) - 2
ti polska.pl <1) - 1

Hm lis
Hm 20$
Im 51$
0$
8m 31s
0$
15$

H.8
H.8
3.H
10
10.2
10

M o rfe o - 178
1% onet.pl <31) - 178

5m HHs
SmHHs

60
6.0

Y ah o o - 6
>: yahoo.com <3) - 6

Hm H8s
HmHSs

7.3
7.3

Os
0$

1.0

Szukacz- 1
3 szukaoz.pl <!> - 1

Rysunek 8 .1 0 . Panel administracyjny systemu Stat.pl sekcja Odsyacze/Wyszukiwarki

to
10

2.0

10

Rozdzia 8. Darmowe usugi dostpne w sieci

293

Po klikniciu znaku plusa widocznego przed nazw kadej z wyszczeglnionych wy


szukiwarek rozwinita zostanie lista sw kluczowych, po wpisaniu ktrych go trafi
na stron. Lista poza sowem bd fraz zawiera dane na temat liczby wej uzyska
nych na tego typu zapytania. To cenne informacje pozwalajce uzyska obraz sposobu,
w jaki ludzie konstruuj pytania, a ich dokadna analiza umoliwi jeszcze lepszy wybr
sw kluczowych.
Ostatnie podmenu nosi nazw Katalogi (rysunek 8.11) i zaprezentowane zostay w nim
dane na temat wej ze stron katalogw. Poza adresem katalogu znajdziesz tutaj dane
na temat liczby wej, dugoci i czasu trwania wizyty. Dane te pozw alaj spraw
dzi skuteczno dodawania odsyaczy do katalogw. Musisz jednak pamita, e lista
zawiera w ycznie najw iksze katalogi, ktre zostay pom ylnie zw eryfikow ane
przez Stat.pl.

stat.pl/PBI
UYTKO W CY

Od>yt<v
SKRYIMY

WIZYTY

ODSONY

ODSYACZE

GEOtOKALIZMCJA

TECHMCZ*

RflNKlNGl

KOHWeRSK

RDMWTROC

Podsumowanie Sfrony odsyajce


ODSYIHCZE - K H IH I001

POMOC

jQ H Strona glowna witryny

tece o6

sCrpc tm

worrseft ooo

is*$rifeii; :oo6 ;

O S E3

2 117 365
2m m
30 393
WSZYSTKIE - 113
1

P o ls k a - 113
- litalo.on*t.pl <3> - 39
prezost27.itartotuy.oom <D - M2

: UHiAU.qkueb.mfo <3> - 6
f.

.+;
'

uAuuj.tuebuAueb.pl 0> - 3
katatoq.reqotvoompl <t) - 1
uAUtu.QUtiazdor.pl <t> - 1
jzukaj onet.pl <0 - 1

S
Ora 9s
t n 57s
13m HOs
Ol
2m 3i

Ol
Ol
Oi

Z a g ra n ic a

Os

N iero z p o zn a n e p a stw o - O

Os

OB
3.0
IM
7.M
t.0
17

to
10
10

0.0
0.0

Rysunek 8.11. Panel administracyjny systemu S ta t.p l sekcja Odsyacze/Katalogi

Geolokalizacja
Odpowied na pytanie, skd przychodz Twoi gocie, znajdziesz w sekcji Geolokali
zacja (rysunek 8.12). Moesz sprawdzi kontynent i kraj pochodzenia, a w przypadku
polskich uytkownikw masz moliwo okrelenia wojewdztwa oraz orodka. Dane
geolokalizacyjne przydaj si podczas okrelania profilu goci strony oraz sprawdza
nia pozycjonowania witryn firm lub sklepw majcych swoje rzeczywiste siedziby.

Tworzenie stron WWW w praktyce

29 4

*
SKRYPTY

Podsyroou-ant* Kontynenty iw>ol Polrto -Wiayi2l\i<a PofcU POMOC

o<#'

* UYTKOUINICY Z ZHORHNICY - R7.K1 ftO Ntt KONTYNENTY

Padziernik 2006
Wrzesie 2006
Oglnie

910
I 21/
6 162

67.1%
6?.7%
59.8%

399
530
3 770

28.6%
28.8%
366%

35
35
208

26%
19%
21%

10
t/
8

0.8%
1%
09%

0
12
50

0.6%
0.7%
0.6%

1
3
31

0.3%
0.2%
01%

Rysunek 8 .1 2 . Panel administracyjny systemu Sta t.p l sekcja Geolokalizacja

Techniczne
Ostatnim elementem, na ktry chc zwrci Tw oj uwag, jest sekcja Techniczne (ry
sunek 8.13). Dane tutaj zebrane okazuj si szczeglne przydatne podczas optymali
zacji strony w celu uatwienia uytkownikom korzystania z niej. Moesz sprawdzi
nastpujce parametry:
rodzaj i wersja systemu operacyjnego,
rodzaj i wersja przegldarki stron WWW,
rozdzielczo ekranu,
liczba kolorw.
Dane te s przydatne nie tylko podczas optymalizacji strony, ale rwnie przy two
rzeniu profilu goci. Na przykad rodzaj systemu lub przegldarki wiadczy o stopniu
zaawansowania i wiadomoci uytkownika. Jeeli Twj go uywa Firefoksa, mona
to zinterpretowa tak, e wiadomie wybra alternatywne rozwizanie dla MS Internet
Explorera, ktry jest dostarczany domylnie w kadej wersji MS Windows. Oznacza
to, e taki uytkownik ma wiksze wymagania dotyczce bezpieczestwa i moliwoci
oferowanych przez przegldark, jest zatem bardziej wiadomy ni ten, ktry uywa
produktu firmy M icrosoft. Dziki tego typu informacjom moesz lepiej dostosowa
ofert i tematyk poruszan na stronie.

Rozdzia 8. Darmowe usugi dostpne w sieci

WIZYTY

iw topy tneo^K

LRPTOPYJNFO.PL

2 117 365

poditrony

2 086 772

frtrona glowna wiryny

30 593

u jy b ie r?

0D30NY

29 5

TECHNCZTC

RflMWW

KONVYERS

RCWMSTRflC

|j || J J J

Suma rozpoznanych ystomiw* 79,18

>
1
2
3
H
5
6
7
8
9
10
11
12
13
11
15
16
17
18
19

system
WlndoujsXP!;]
Wmdoujs98 0
WmdouK2000 :
Linux 2)
WindouK2OO30
WindouisME 13
WindowsNT Tj
MacOSXg]
Windoujs95 3
t-findoujsCE '/}
FretBSOCil
MacOSS:
SunOS 0
Symbian 0
HPUX0
PalmOS 0
BeOS H
NetBSOf!
OpenBSO

ui'/Uoujnicy
67 26S
3 57
3 821
2 203
871
701
216
188
61
27
17
10
3
3
2
2
1
1
1

81.623%
1.979%
1.808%
2772%
1.226%
0886%
0.31%
0.237%
0.077%
0.031%
0.022%
0.013%
0.007%
0.001%
0.003%
0.003%
0.002%
0.002%
0.002%

Rysunek 8.13. Panel administracyjny systemu Sta t.p l sekcja Techniczne

Licznik
Licznik jest jednym z najczciej wykorzystywanych gadetw na stronie WWW; jego
zadaniem jest zliczanie goci odwiedzajcych stron. W dalszej czci niniejszego pod
rozdziau opisaem, w jaki sposb w kodzie swojej strony umieci darmowy licznik
udostpniony na stronie http://www.stat.pl.

Uwaga

Aby skorzysta z licznika na stronie h t t p : / / w w w . s t a t . p l , niezbdna je s t rejestracja.


Cay proces zosta do ka dnie opisany w poprzednim podrozdziale.

Zakadam, e posiadasz ju odpowiednie konto na stronie http://www.stat.pl. W tej


chwili musisz si zalogowa do serwisu. W nowo otwartym oknie kliknij przycisk Admi
nistracja, a nastpnie Licznik. W centralnej czci okna pojawi si rozbudowany panel
konfiguracyjny licznika (rysunek 8.14).
W sekcji Typ wywietlanych danych okrel, co licznik ma pokazywa. Dokadniej
mwic, Twj licznik moe zlicza liczb uytkownikw, odson lub wizyt. Nastpnie
w sekcji Przedzia czasowy okrel czas, po jakim licznik ma si zerowa. Jeeli wy
bierzesz opcj Oglnie licznik bdzie pracowa w sposb cigy.

296

Tworzenie stron WWW w praktyce

stat.pl/PBI
KONWERSJA
Pr auta dcrtfpu Skrypty Logo

rWSTfMCJH

Wcw rr.ocj* o koncie Dan* adr*w

* ADMMlSTRRCM - LICZNIK
Liczniki s ta t2 4 prezentuj w izyty,
odsony lub u ytkow nikw
odwiedzajcych stron w
dowolnym rozbiciu czasowym: dzi,
wczoraj, w poprzednim miesicu.

Licznik graficzny:
sta t2 4 proponuje szeroki wybr
kolorowych licznikw prezentujcych dane
o ogldalnoci witryny dla rnych
przedziaw czasowych.

Typ w y w ie tla n y c h d a n y c h
O odsfony 0 wizyty 0 uytkownicy
P r z e d z ia c z a s o u iy
F I dzii 0 wczoraj 0 zoszty tydzie 0 zeszy miesic 0 oglni?

Witryna oglnie

2
3

Strona gwna witryny


podstrony

In stalacja:
Po wybraniu licznika oraz jego
param etrw naley umieoc kod licznika
na stronie www w miejscu, w ktrym
Bczniek ma by wywietlany.
Licznik tekstow y:
U cznk tekstow y mona atw o formatowa
w htmkj np. poprzez umieszczenie skryptu
np. w znaczniku < font color=*f:F0000'
siz e= 2face*'V erdan a> ... < /fo n t> .

C J E H E S E S a r-,C E H .t n D O E E I E E D

a n m 013112223 [ i e b s u ncmmESD
n c ta s a a a c*EBEaa

1,

Aby urweo kcznk n a strom e


internetow ej naley w ybra w zakadce
odpowiedni skrypt lub w za zbiorczy,
liczb znakw k znika oraz typ
wywietlanych danych.

u sM

123456

i
a /!! n

12
45
61
1
13
2
13
21
35
4;

S y s te m k c n i t

tl IOZ000-20M sta(2H.cwnlcountr - <drame sro>http>//ooonters.itat2S_com/itatcnt html?types1&id* WffiHfteFotOSsOeRrMuSyd^biygeaHusYHOwlDKK&timei&datas&laiigspl" iudthi88 height31


scrolHngs"no" iram eborder:'0"x/ifram e>

Rysunek 8.14. Panel konfiguracyjny licznika

O statni czynnoci je st wybranie szaty graficznej licznika. Autorzy przygotowali


kilkanacie rnych wersji, dziki czemu znajdziemy co odpowiedniego niemal dla
kadego projektu. Aby wybra odpowiedni styl licznika, kliknij w mae pole widoczne
obok niego.
W tej chwili pozostaje ju tylko skopiowa uzyskany kod, ktry jest widoczny w dolnej
czci okna, a nastpnie wklei go w odpowiednim miejscu witryny. Na rysunku 8.15
wida przykad licznika osadzonego na mojej stronie o laptopach.

Status usug Gadu-Gadu


oraz Tlen na stronie WWW
Jeeli chcesz zamieci status Gadu-Gadu na swojej stronie, wystarczy, e w wybra
nym miejscu wpiszesz nastpujcy kod:
<img src="http://www.gadu-gadu.pl/users/status.asp?id=XXXX" a lt="Bartosz Danowski

- GG:XXXXXX" />
W miejsce znakw XXXXXXX musisz wpisa swj numer Gadu-Gadu, w przeciwnym
razie usuga nie zadziaa.

Rozdzia 8. Darmowe usugi dostpne w sieci

RSS WiadoBsoiei

Mapa strony

R edakc}

297

XJ

;a k t

LAPTOPY

profesjonalne centrum informacyjne

A K T U A LN O C I

TESTY

N o w y F ly b o o k V M

A R T Y K U Y

F .A .Q .

FO RU M

Artykuy

C o pocztkow o wyglda na tazinkowego laptopa, wcale nim nie


jest Flybook V M posiada ekran mogcy ustawie si w pozycji
normalnego ekranu LCD, tak, aby uytkownik mia wygodniejsz
pozycje podczas uytkowania kom putera Szczeglnie przydatne
jest to w czasie korzystania z laptopa w miejscach, gdzie mamy
bardzo ma powierzchni n a pooenie notebook, np w samolocie

Baterie - p taw d a i mity


Partycje i noniki rec<
nLite - integracja sterownikw

Testy
IB M ThinkPad T42
IB M ThinkPad T60

IBM TrinkPad X60

Flybook V M moe wyglda jak normalny laptop, lecz w


rzeczywistoci twrcy laptopa m aj aspiracje, aby ich produkt
konkurow a z desktopam i L aptopa mona bdzie kupi p o d koniec
miesica w cenie $2,899.

Wicej

F u jitsu L ife B o o k P 7 2 3 0

Fujitsu ogos dostpno w U S A L ifeB ooka P7230, ultra-przenonego


laptopa z 10 6" matryc. Fujitsu LifeBook P 7230 way poniej 1,4kg i m a ok
3cm gruboci Twierdzi si, e jest to najmniejszy i najlejszy' notebook z
w budowan zatok do obsugi nagrywarki DVD , czy drugiej baterii - zwiksza
ona czas pracy notebooka do prawie 10 godzin.
N otebook jest wyposaony w procesor C ore Solo U 1400 P 7230, opartym na chipsecie 945G M A
oraz w kart graficzn Intel Graphics M edia A ccelerator 950 Obsuguje do 2GB pam ici R A M i
moe posiadc dysk twardy do 80GB (4200rpm).

Wicej

W szelkie prawa zastrzeone C op y right C 2005-2006 Laptopy.


Strona stworzona p rze CRES - tworzeni stron w je optymabzaqa
X M L SiteM ap______________________________________ _________

Rysunek 8.15. Przykad dziaajcego licznika

Do umieszczenia statusu komunikatora Tlen bdziesz musia uy generatora, ktry jest


dostpny na stronie domowej programu http://plus.tlen.pl. Wystarczy, e po otwarciu
strony klikniesz kursorem myszy odsyacz o nazwie Wskanik statusu kliknij tutaj.
Na nowo otwartej stronie musisz wybra jeden z typw statusu, a nastpnie wpisa
swj identyfikator w polu formularza. Po klikniciu przycisku Stwrz kod HTM L na
ekranie pojawi si odpowiedni fragment kodu. W moim przypadku ma on posta:
<img src="h ttp : //status.tlen.pl/?u=eathan& t=l" width="18 height='T8" border="0"
alt="Bartosz Danowski - Tlen />

298

Uwaga

Tworzenie stron WWW w praktyce

Na stronie h t t p : / / p l u s . t l e n . p l moesz znale jeszcze kilka innych generatorw,


dziki ktrym moesz stworzy np. panel komunikacyjny. Gocie odwiedzajcy Twoj
stron bd m ogli wysya do Ciebie w iadom oci bezporednio ze strony WWW.

Sonda
Jednym z bardziej przydatnych elementw strony jest sonda lub, jak kto woli, ankieta.
Zasada dziaania tego rozwizania jest bardzo prosta. Zdajemy pytanie, udostpniamy
kilka odpowiedzi, a internauci gosuj. Sonda moe zosta wykorzystana na przykad
do sprawdzenia, czy nowy projekt strony podoba si odwiedzajcym.
W dalszej czci niniejszego podrozdziau opisaem, w jaki sposb skorzysta z sond
oferowanych bezpatnie na stronie http://websonda.pl. Warto tutaj wspomnie, e wy
brany przeze mnie serwis nie wymaga rejestracji.
Po wejciu na stron http://websonda.pl wprowadzamy tytu sondy, okrelamy liczb
odpowiedzi i decydujemy, czy gosujcy m aj do czynienia z pojedyncz, czy wielo
krotn odpowiedzi (rysunek 8.16). Dodatkowo moemy zabezpieczy si przed nie
potrzebnym nabijaniem wynikw. Po wprowadzeniu niezbdnych danych, kliknij
przycisk dalej.
Rysunek 8.17 przedstawia nastpny etap, ktry wymaga wpisania odpowiedzi na zda
nie pytanie. Po wprowadzeniu odpowiednich danych kliknij przycisk dalej. Zwr
uwag, e po prawej stronie pojawi si podgld okna sondy.
Nastpny etap (rysunek 8.18) umoliwia zmian wygldu okna sondy. Dokadniej m
wic, m oesz zmieni kolory poszczeglnych elementw, nazwy opcji oraz sposb
prezentacji wynikw. Wszystkie zmiany bdziesz mg zobaczy na podgldzie. Po przy
gotowaniu idealnie wygldajcej sondy kliknij przycisk dalej.
Ostatni etap widoczny na rysunku 8.19 zawiera kod, ktry naley umieci na swojej
stronie. W zalenoci od potrzeb moesz uy zwartoci sekcji JavaScript, Wstaw sond
ja k o ramk oraz Link na Twojej strome. Pierwsze dwie opcje umieszcz modu sondy
na Twojej stronie. Natomiast ostatnia z opcji doda jedynie odsyacz do strony http://
www.websonda.pl, na ktrej znajduje si Twoja ankieta.

Biuletyn informacyjny
Biuletyn informacyjny, zwany inaczej list mailingow, jest bardzo przydatnym na
rzdziem w promocji strony. Dziki biuletynowi moemy wysya informacje o zmia
nach na stronie bezporednio do osoby, ktra je zamwi. Rozwizanie to lata wietnoci
ma ju za sob i obecnie ustpuje pola kanaom RSS. Jednak warto zauway, e nadal
wielu ludzi korzysta z biuletynw. Poza tym nie wszystkie strony s wyposaone w me
chanizmy RSS i w takim przypadku jedynym rozwizaniem moe by wanie biuletyn.

Rozdzia 8. Darmowe usugi dostpne w sieci

Rysunek 8.16.
Tworzymy sond
etap pierwszy

299

O H)sr*

O Facj

li Rwurn

O Potonjt

10 Kontakt

WEBSONDA
Logn:

0ARMf)VW HOSTING

Logu j

Haso:

f ORUM W6RMASTFRW

KATALOG STRON

OARMOWf DOMf.NY

Krok 1 Pytonie

wasna, niepowtarzalne

SONDA w4krokach:

Wprowad pytane / tytu sondy (dugo max. 255):


C z y p o d o b a C i s i nowy w y g ld strony?
Wybierz Jo opdpowedzi:

2a
Wybierz charakter odpov,vedr:

wymylasz in te rn u j c * pytanie
fwor/yj? odpowiedzi
dobierasz indywidualny fty l
wstawiasz kod no stron i wiesz ca m y k im l

(j N ajnow sze sondy

la k iego z ty c h p o k em o n w lubrw n a jb rird iie j ?

w*tokrotna odpowied

N ajpopularniejsze - osta tn ie 30 dn i

Ra k o g o g o so w a e 7

> Co sztM o m u nd u rk ac h ?

> Co cl s to w e m n ie p o d o b a
lub ch o cia widzieli;)

a pojedyncza odpowed

j Zabezpiecz przed powtrnym glosowaniem

R a ja d n e p z a

Tylko dbi ty c h k t rz y a

> Kto w o g le w y m y la t e pyta n ia? ?? ?

> Czy p o d o b a Cl s te now a s tr a n k a o rk ie s try ?

> K try z m oich blogw je s l n a jle p n y ? ? ?

K t re ogo w y b ie ra sz )ako o ficjalne logo na sz e g o

> Czy P o d o b a Ct Si php8B:i

> Kto t o j e s t \

> c zy lobtoty lesbijki

K try m ck Je s t n a jad n iejs zy ?


> AsiA J e s t CudOwMa 7
W icej
* W iece i

Statystyki
> (jruchomsamr nowy serwis z produktami
finansowymi m2m. yoyo.oi.

Mamy 1915 sond


W ostatrwh 24 godznach przybyto nam 24 sond
w ostatrwn tygodniu przybyto nam 95 sond

> Przekazalimy w rce wybranych


uzylko/.nkow serwis P o d a e M - nowy
serwis autorstwa ekipy TOTO.PC

z baczna do gosw w sondach; 17651 gosw

K atalog sond

' '

t t o NaitepHydannowyhosteigYOYO.Pt Forum d a Webmasterw WebT6.pi Darmowe domeny is to ty pocztowe w YT.pl

TAO

* Forom sSa webmastsrow - a <v ran porady,


iutoriate i gorce dyskusje o tworzeniu i
zarajdzariu stronami WWW.

O W ebSondzie *
j i --

P ro m u j WetrSonde

> Kog twrcw YOYO.PL r m m najnowsze


informacje o naszych planach, nowoo rse
ty to ..

K o n ta k t

..
a PodaeSzk - najlepsze wideo w b r a
L-.Ibgi Karty Kredytowe Konta Osobiste Kredyty samochodowe l okaty i obigacje Kredyty hipotecne Konta mtodaeowe
O firmie * Kasze serwisy Reklama Kontakt

TYOYO
;t. ragulnarui c :: peSyfclprywakKjeei

W niniejszym opisie skorzystam z darmowej usugi dostpnej w sieci pod adresem


http://www.sub.4free.pl. Zanim uruchomimy list mailingow, naley si zarejestrowa
w serwisie. Wystarczy, e klikniesz odnonik o nazwie Nie mam jeszcze konta. N a
stpnie naley wypeni formularz i czeka na e-mail z kodem aktywacyjnym konta.
Wydaje mi si, e procedura rejestracji w serwisie nie wymaga opisu, gdy ogranicza
si jedynie do wypenienia formularza.
Po zaoeniu konta na serwerze 4free bdziesz mia login i haso, ktre s potrzebne
do zalogowania si w serwisie. Haso i login musisz wpisa w odpowiednie pola
umieszczone w lewym grnym rogu okna przegldarki (rysunek 8.20). Nastpnie klik
nij przycisk Logowanie.

300

Tworzenie stron WWW w praktyce

Rysunek 8.1 7.
Tworzymy sond
etap drugi

ibnjeitnKj

WEBSONDA
logre
DARMOWY HOSTING

O forum

B ck j

iim

O Konbikl

Hasto:

FORUM W YBM ASIIRW

Krok 2. Odpowiedzi

lo g u ]

KATALOG STRON

DARMOWEUOMIMY

Podgld Twojej sondy

* T yto/pytane sondy:

Czy p o dob a Ci si now y


w ygld strony?

C zy p o dob a Ci st nowy w ygld 9trony?

# Tak
C ' Nie

OdpcKvd nr U
Tak

Goski
Zobacz wynik

or amatme cuoj* tar * .<drwoy r*b.

CESO
O WebSondzie Katalog sond Prom uj WebSonde f AQ K ontakt
-Na*eosr/daimowy hosbng YCr/OPl Forum (to Webmasterw WebDps.pi Darmowe t e e i a&asy pocztowe w *7.pi
tja r / s Podzielvk - rvepsze wwieo w se o
r v Karty Kredytorve <Konta Osobiste Kredyty s m tx irm rrr Lokaty! obligacje Kredyty ftpoteczne Konta modzieowe
0 firmie Nasze serwisy * Reklama Kontakt

"YOYO
* v-/ v -'

Rysunek 8.18.
Tworzymy sond
etap trzeci

WUm> a r taWtattm YW

(3 Rajolncj

WEBSONDA

to Fm

Lon:
UARMOWY HOSTING

FORUM WCBMASTt-ROW

O Forum

Q Po* ras

Hasto:

lo g u )

KATALOG STRON

DARMOWY. DOMt-NY

Podgld Twojej sondy

Krok i . W ygld sondy


K o lo ry sty k a
To nagwka i stopki:

#FFCC66

To sondy:

-FFFCC -

Kolor lira tabel:

# 606

Kotot pytane / tytuu sondy:

#990033

V-

Kotor opdowrede:

#330066

Kolor kresek wykresu:

mccoooo v

Kolor 'Krysttocn gosow":

#663366

Szeroko sondy;

150

C zy po dob a C i si now y
wygld strony?

Tak
V Nm

Gowi
Z obacz wyniki
poMitd by

Podgld okna w ynikw sondy

T ek st
Przydsfc grasowana:

G losuj

lok do wynikw;

Z o b a c z wyniki

WtrzysBcb gosow.

WszysSoch go s w

Czy po dob a Ci si nowy


w ygld strony?

W szystkich gosw: 14
ooear.d by WebSond.
(j
* Jzerowf pedgijek: i m kat* sond

Poka pasto w /kresu;

# Tak

itokaz wartoci procentowe:

* Tak

Chro przed wielokrotnym gosowaniem:

Tak

;.hw

aparwjta] moje ustowierea:

Tek

O f* *

ra e

I n fo rm a c je
* Twili m dl;
* Twoja strona www^itog/Tbrum:

bartek.danow3Ki@grr.ail com
hSp://danowski pl

Owiadczam, ze znam i akceptuje regulamin swwtso oraz poMyke Drywatnosc


8 3 Chce otrzymywa e-mailem informacj o noweciadi,

ceses
0 WebSondrie Katalog sond * Prom uj WebSone * FAQ K ontakt
ii's
Najlepszy darmowy hosting YOYO.Pl Foiom dla Webmasterw WebTpc.i Darmo itomeny l aiasy pocztowe w XT pi
Rn*- rs Poaeksk - najlepsze Mdeo w skro
1Arfuo Karty Kredytowe Korna Cstfwt* Kredyty samoctottor , lokaty obkgaeje Kredyty htpntoczne Konta mtodnetowe
0 firrwe Nasze serwis Reklama Kontakt

"^"YOYO*3

B Kontakt

ik': ' i1'"'v


lir - . _v

je fty - mgubnWw; -:.-j poNyk. prynwlnciis

Rozdzia 8. Darmowe usugi dostpne w sieci

Rysunek 8.19.
Tworzymy sond
etap czwarty

30 1

B ftejMTKja

O Faq

O Forum

U Bo<a o *

O Kontakt

WEBSONDA**
Login:

DARM OW Y M O S N tj

FOfUM W F B M A S IfcR G W

Krok 4. K o d n a Twoj stron

lo g u j

Hasto:

K A T A LO G STRON

D A R M O W I DOMENY

Podgld Twojej sondy

S o n d a n a T w o je) s tr o n ie
jeeli chcesz zobaczy swoj sond

k lik n ij tu ta )

J a v a S c rip t
< 1 - P o c z te k k o d u h a a l H v w .w e b e o n d a .p l >
< s c r i p t e t c " h t t p ; <Vwwvi..wb*onda p l 'p o ic * * * o iM to /1 9 1 7 /"
t y p e = t e x t / 3 s v a s c z i p s * * * / Mas i p c
< ! - K o.ni.ec k o d u ta tm l w v w .w e b e o n d a .p l >
W s t a w s o n d ja k o ra m k ( I f r a m e )
l e e l i n i e a o e e z w s ta w i a k o d u J e ir a S c r ip t: d o e w o je g o b o g a
l u b f o ru m d y a k .u a y jn a g o p r b u j u m i e * c l e e o r.d n a t t r o n i ja k o
raaO t, w k l e j 3 e p o n i s z y k o d HTML o r a z m o d y f ik u j c w y z o k o
ra m k i.
< ! P o c z te k k o d u h t j a l w w w .w e b s o n d e .p l >
< i f r e a e SEC " h t t p : //w w w .w e b so n d a p l/ p o k s z r a m k e 11 9 1 7 "
a t y l " v i d t i : 1 6 0 p x ;" s c r o l l n g " B C " a ie r g in w id th * " Q "
o u i r g in h ig h t " 0 " fr* a * b o rd e r-= * 0 " v p a c e " 0 hpece>="0"
< ! - K o n ie c k o d u ta tm l w w w .w 4 itaaan d a.p l
L in k n a T w o je j s tr o n ie
L in k d o s o n d y
(Normalny tak do sondy na stronie vzww.websor.da.pl)
< h r e f ' h t t p : / ' ,w w w . w e b s o n c l a . p l / y l o s o v * n i e / 1 9 1 7 / l i n k Z e g io 3 U j
w m o je j o n d * ie < / >
Skopiuj kod M m l i wklej na swoj stron.

O W ebSo n d a e

K atalo g s o n d *

01 (.'ibuwsic'(>.

P ro m u j W eb S o n d

FAQ

K o n ta k t

fiajtooszy darmowy hosting rOYO.Pl .Forum d a Webmasterw WebTips.pl i Darmowe domeny i atosy poczt! w XT.pl

ftoif cwHa PodzieirW - najlepsze wideo yt siea


. . .v Kaity Kredytowe Konta Osobiste Kredyty sar>ocftxtewe Lokaty i obfcgaeje Kredyty bipotectre Konta mtodaeiowe

O firm* Masze serwisy Reklama Kontakt

TYOYO*
* * v
Korr Ssmw ' ;" w. if-Mdi' akrseor rapubmino e r po*yki pcywabtoo

t 4 f r e e . P L ] :: SIJB > demo

SUBskrypcj
E -m a ilin g to n a js k u t e c z n ie js z a fo r m a p r o m o c ji i
r e k la m y w I n te rn e c ie . W y k o rz y s t a j j !

em h a s a
N ie m a m je s z c z e k o n ta

S tro n a g w n a 4f r e e .PL
a d m in is tr a c ja
s tro n a DEMO
FAQ - p y ta n ia i odp .

SUBskrypcj@ daje Ci moliwo tworzenia wasnej listy


mailingow ej. Twoi czytelnicy m og zapisa si z
form ularza na Tw ojej stronie. Ty atwo i szybko
rozelesz im przygotow an wiadomo.

P rzy k a d k o m p o n e n tu
Za list e-mailow. Bdziesz gromadzi adresy e-m ail osb zainteresowanych
Tw o j stron, produktem . Ze stron adm inistracji rozelesz jed n ym klikniciem
tysice wiadomoci!

Rysunek 8.20. Konfiguracja i uruchomienie biuletynu informacyjnego etap pierwszy

Gdy si zalogujesz, na ekranie pojawi si panel administracyjny Twojego konta klik


nij odnonik o nazwie Utwrz NOW SUBskrypcj (rysunek 8.21).

302

Tworzenie stron WWW w praktyce

S ta r t fr e e

/<$>

b U B s k r y p c ji

T w o je k o n t o

& & <& w

U s ta e m a ili

W ia d o m o c i

N o w a w ia .

P o b ie r z k o d

A d m in is trac ja SUB skrypcji


W ita m y na stronach ad m in istracji subskrypcji!

login: e a th a n
uid: 108541
@: e a th a n @ irc .p l

Nawigacj w systemie uatwi Ci grne menu ikonek.


Poniej s wszystkie dostpne dla Ciebie opcje systemu.
Masz pytania? Nie wiesz ja k dziaa jaka opcja? Kliknij w klawisz pomocy:

Z m ie d a n e | W y lo g u j si
S U B s k r y p c ji
S tro n a g w n a 4 fre e .P L
a d m in is tra c ja
s tro n a DEMO
FAQ p y ta n ia i odp .

^
T w o je k o n to

T w o je konto
Sprawd swoje konto.
Zobacz ile moesz jeszcze wysa wiadomoci.

U tw rz NO W A SU B skrypcje
rz swj nowy kom ponent - SUBsjs
Do TwojeJTTSty brdiopfsyw^cTi^czy te lnicy,
a Ty bdziesz im mg rozsya wiadomoci e-mailowe

> Co to je s t 4 fre e ?
^ Zapomniaem hasa!
0 Dlaczego za darmo ;-)
D> Regulamin
&> Masz problem - n a p is z

Rysunek 8.21. Konfiguracja i uruchomienie biuletynu informacyjnego etap drugi

W odpowiednie pola, widoczne na rysunku 8.22, musisz wpisa nazw swojej listy oraz
krtki opis, a nastpnie klikn przycisk Dalej.
Rysunek 8.22.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap trzeci

[4free.P L]:: SUB > nowa SUBskrypcja > krok 1

Start 4 free

S DSskrypct

ioje ko n t o

B m B S lffl S g ii

Lista emaili

Wiadomoci

N o w a wiad.

Pobierz ko

| n o w a S U B s k ry p c ja

NOWA s u b s k ry p c ja
T w o r z e n ie n o w e j lis t y e - m a ilo w e j

K ro k : 1 z 4

S u b s k r y p c ja - p a r a m e t r y p o d s ta w o w e
N a z w a s u b s k r y p c ji :

lwww.danowski.pl
bidzMi w y ry h r ,i w nt-gwku k t d tj wiadomoci, np "S ubskrypcji BiznoNtz"
O p is s u b s k r y p c ji :

opisz krtko Twoj SUBskrypcj, in fo rm te j* btdzio w y s y h n * nowym czytoinikom

Porzu |

< < < Powrt

|(T Dalej > > >

Kolejne okno (rysunek 8.23) suy do wpisania tekstu powitalnego dla uytkownikw,
ktrzy zdecyduj si dopisa do naszej listy. Jeeli uznasz, e domylny tekst jest nie
odpowiedni, moesz go zastpi innym. Nastpnie kliknij przycisk Dalej.

Rozdzia 8. Darmowe usugi dostpne w sieci

Rysunek 8.23.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap czwarty

3 03

NOWA subskrypcja
T w o r z e n i e n o w e j lis t y e - m a ilo w e j

Krok: 2 z 4

S u b s k r y p c ja

w ia d o m o p o w it a ln a

N a g w e k w ia d o m o c i p o w it a l n e j ( s u b j e c t ) : ___________________________
| w it a m y n a li c ie " N A Z W A "
Wiadomopo witalna dostanie czytelnik po zapisaniu si do Twojej subskrypcji

I d o stp n e kody:
s k o p iu j te kody w tre wiadomoci,
I program zastpi je prawidowymi
| wartociami (pamitaj o znakach @)

\ NAZW A
nazwa Twojej subskrypcji podana w
edycji parametrw oglnych
| O P IS
0pis subskrypcji podany w edycji
parametrw oglnych

T r e w ia d o m o c i p o w it a l n e j:
W ita j EM AIL !
Z a p is a le s s ie n a lis t N A Z W A
O d t e j p o ry j e s t e s c z e s c ia n a s z e j s p o e c z n o c i! B e d z ie s z o tr z y m y w a
w s z y s t k ie p r z y g o to w a n e p r z e z n a s w ia d o m o c i.
J e e li c h c e s z s ie s k o n ta k t o w a z a d m in is t r a t o r e m lis t y , n a p is z po d
a d re s : @ A D M IN _ EM A IL @
W k a d e j w ia d o m o c i o t r z y m a s z in fo r m a c je , j a k z re z y g n o w a z te j lis ty .

E M A IL
adres e-maii Twojego czytelnika
| @ A D M IN _ E M A IL @
Twj adres e-mai! podany przy
rejestracji konta 4free

w treci moesz korzysta z k odw podanych po lewej stronie

P o rz u |

<<< P o w r t

| C~ D a le j >>>

W oknie widocznym na rysunku 8.24 musisz wpisa tekst poegnalny dla goci, ktrzy
zrezygnowali z dalszego otrzymywania naszych informacji. W tym przypadku domylny
tekst moesz rwnie zastpi innym, bardziej odpowiednim. Po wprowadzeniu zmian
kliknij przycisk Dalej.
Rysunek 8.24.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap pity

NOW A subskrypcja
T w o r z e n i e n o w e j lis t y e - m a i l o w e j

Krok: 3 z 4

S u b s k r y p c ja

w ia d o m o p o e g n a l n a

N a g w e k w ia d o m o c i p o e g n a l n e j: _____________________________________
[ R e z y g n a c ja z lis t y N A ZW A "
wiadomo poegnaln dostanie czytelnik po wypisaniu si z Twojej subskrypcji

d o stp n e kody:
I s k o p iu j te kody w tre wiadomoci,
I program zastpi je prawidowymi
1 wartociami (pam itaj o znakach 9 )

\ @ N A ZW A @

T r e w ia d o m o c i p o e g n a l n e j:
W ita j E M A IL !
W a n ie z re z y g n o w a e z n a s z e j S U B s k r y p c ji " N A Z W A . O d t e j p o ry
n ie b e d z ie s z o t r z y m y w a n a s z y c h w ia d o m o c i. J e e li z m ie n is z z d a n ie s k o n ta k t u j s ie z n a m i p o d a d r e s e m : @ A D M IN _ E M A IL @

nazwa f w j ; ; subskrypcji podana w


edycji parametrw oglnych
| O P IS
opis s ub skrypcji podany w edycji
parametrw oglnych
| E M A IL
adres e-rnail Twojego czytelnika
| @ A D M IN _ E M A IL @
Twj adres e-mai!podany przy
rejestracji konta 4free

d
treci moesz korzysta z kodw podanych po lew ej stronie

P o rz u

< << P o w r t

D a le j > > >

Tworzenie stron WWW w praktyce

304

Ostatnie okno, ktre pojawi si na ekranie, ma charakter jedynie informacyjny, a opcje


tam opisane nie dziaaj w darmowej wersji listy mailingowej, dlatego od razu moesz
klikn przycisk Zakocz i utwrz.
Usuga zostaa utworzona, a na Twoim ekranie pojawia si strona, na ktrej masz
podgld dostpnych list. Za pom oc odsyaczy lista e-mail oraz dodaj e-mail moesz
przeglda list adresw e-mail oraz dodawa nowe pozycje (rysunek 8.25).
/<&

Start 4free SUBskrypci@


-------------

Twofe konto U s t a emaili


m........... ................................ '1

ty

<> { W

Wiadomoci

N o w a wiad. I Pobierz kod


l
i

L is ta Tw oich s u b s k ry p c ji z a d re sa m i e m ail
. :

Rysunek 8.25.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap szsty

-/

W a n a in f o r m a c ja J

G ra tu la c je !
Z m ia n y z o s t a y z a p i s a n e p r a w id o w o '
Je e li w k le ie ju k o d te g o k o m p o n e n tu n a s w o j s tro n w w w m e m u s is
w k le ja g o p o n o w n ie ' W s z y s t k ie z m ia n y s o d r a z u a u to m a t y c z n ie w id o c z n e
n a T w o je j s tro n ie w w w .
U lv r z n o w a

Lp
B 1.

nazw a
w w w .d a n o w s k l.D l

il o
c m a il - i
0

subskrvDcie

a k c ja
C ^ S i t a e - n n i l i 1 d o d a i e - n ia il~ T ^ d v c ia i w a c iw o c i. . .

Teraz przysza pora, by doda odpowiedni kod do naszej strony WWW, tak by gocie
mieli moliwo dodawania swoich e-maili do listy i usuwania ich. W tym celu kliknij
ikon o nazwie Pobierz kod, w idoczn na rysunku 8.25 w prawym grnym rogu.
M usisz zaznaczy list (rysunek 8.26), dla ktrej chcesz wygenerowa kod, a nastp
nie moesz wprowadzi zmiany w wygldzie elementu, ktry pojawi si na stronie.
Wydaje mi si, e nie ma wikszego sensu opisywanie poszczeglnych opcji i najlepiej
bdzie, jeli sam sprawdzisz, jak to dziaa. Kod zostanie wygenerowany po klikniciu
przycisku Generuj kod i pojawi si na kolejnej stronie. Musisz go skopiowa, a nastp
nie wklei na swojej stronie w miejscu, gdzie ma by widoczny.
W celu wysania wiadomoci do ludzi, ktrzy zapisali si na list mailingow, naley
si zalogowa na stronie http://www.sub.4jree.pl. W panelu administracyjnym pojawi
si nowe opcje. Musisz klikn odnonik Utwrz now wiadomo (rysunek 8.27). Na
nastpnej stronie pojawi si dwa okna formularza. Pierwsze suy do wpisania hasa,
natomiast drugie jest przeznaczone na tre wiadomoci.
Po wpisaniu caej wiadomoci musisz klikn przycisk Zakocz i utwrz. Na kolejnej
stronie zobaczysz list wiadomoci, jakie zostay utworzone; obok kadej z nich znaj
duje si odnonik o nazwie Rozelij. Po jego klikniciu pojawi si kolejna strona, na
ktrej bdziesz mg okreli, kiedy ma nastpi wysyka i do czonkw ktrej listy.
Wysyka rozpocznie si po klikniciu przycisku Rozelij wiadomo.

Rozdzia 8. Darmowe usugi dostpne w sieci

Rysunek 8.26.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap sidmy

30 5

L is ta d o s t p n y c h S U B s k ry p c ji

W y b ie r z s u b s k r y p c je , d la k t r y c h c h c e s z w y g e n e r o w a kod:
m oesz wygenerowa kod dl kitko subskrycji jednoczenie

"N,

11

nazw a: w w w .d a n o w s k i.p l
liczba a k tyw n ych e -m a ili: 0 (w ty m a kc e p tu je HTML: 0 )

P a r a m e t r y k o d u S U B s k ry p c ji
S z e ro k o :

|i6 Q pt -1
wybierz warto 1 0 0 %, rozcigniesz okienko na ca szeroko

Ram ka:

[J

T | k o lo r: # 0 0 8 0 0 0

ko)or. |#66oc99

N a g w e k :
T re *:

W y b ie r z k o lo r
W y b ie r z k o lo r

Zaznacz s u b skryp cje


Tre pokae si tytko wtedy, gdy wy b r a k wicej n i jedn subskrypcj

K o lo r ta :

j # eeffee

W y b ie r z k o lo r

O p cje " z a p is a n ie /w y p is a n ie " :


L ink w i c e j in fo r m a c ji" :

B rak

Lista ^ R adiobutton

w k o lo rz e : [# 0 0 9 9 0 0

W y b ie r z k o lo r

Me m u s is z nic zmienia, kolory i wygld s ju przygotowane d/a Ciebie

Rysunek 8.27.
Rozsyanie biuletynu

Start 4free

S UBskrypcji

G e n e ru j kod

Tw o j e k o n t o

U s t a emaili

W i aid
d oommooci
ci

N o w a wiad.
wla

Pobierz ko d

A d m in is tra c ja S U B s k ry p c ji
W ita m y na s tro n a c h a d m in is tr a c ji s u b s k ry p c ji!
lo g in : e a t h a n
u id : 1 0 8 5 4 1
@>: e a t h a n @ i r c . p l

N a w ig a c j w s y s t e m ie u a tw i C i g rn e m e n u ik o n e k .
P o n i e j s w s z y s t k ie d o s t p n e d la C ie b ie o p c je s y s t e m u .
M a s z p y t a n ia ? N ie w ie s z j a k d z ia a j a k a o p c ja ? K lik n ij w k la w is z p o m o c y :

Z m i e d a n e | W y l o g u j s i

S tr o n a g w n a 4 fr e e .P L
a d m in is t r a c ja
s tro n a DEM O
F A Q - p y t a n ia i o d p .

c e n tru m p o m o c y

C o to je s t 4 f r e e ?
D> Z a p o m n ia e m h a s a !

Twoje konto

/A
Lista emaili

vi

S p r a w d s w o je k o n t o .
Z o b a c z ile m o e s z j e s z c z e w y s a w ia d o m o c i.

Tw o je subskrypcj
P r z e g l d a j i z a r z d z a j T w o im i lis t a m i e - m a ilo w y m i.
A d r e s y e - m a il s p o g r u p o w a n e w s u b s k r y p c je .

U tw a rz jT o w w ia d o m o
S tw r z w ia d o m o , k t r r o z e le s z d o T w o ic h j * y t e ln ik w

C> D la c z e g o z a d a r m o ;- )
C> R e g u la m in
b M a s z p r o b le m - n a p i s z

P o b ie rz k o d
K o d H T M L S U B s k r y p c ji d o w k le je n ia n a T w o j s tr o n W W W

Wnioski
W intemecie znajdziesz wiele darmowych rozwiza, ktre pozwol Ci usprawni dzia
anie i funkcjonalno strony. W ystarczy tylko skorzysta z Google i poszuka. Dla
niecierpliwych zamieciem poniej adresy kilku stron, ktre oferuj darmowe dodatki
do stron WWW.

Tworzenie stron WWW w praktyce

306

http://www.4free.pl
http://free4web.pl
http://server.com
Decydujc si na korzystanie z darmowych dodatkw do stron, pamitaj, e czsto
m aj one pewne mankamenty, np. zawieraj reklamy. Z tego powodu darmowe dodatki
nie zawsze nadaj si do wykorzystania na profesjonalnych stronach WWW. Na szcz
cie w przypadku powanej firmowej strony moesz skorzysta z gotowych rozwiza,
ktre moesz samodzielnie zainstalowa na serwerze. Ogromna kolekcja tego typu
skryptw jest dostpna m.in. na stronach, ktrych adresy podaem poniej.
http://www.hotscripts.com
http://php.resourceindex.com
http://cgi.resourceindex. com

Rozdzia 9.

Przydatne skrypty,
ktrych mona uy
na stronie WWW
W tym rozdziale zamieciem opis kilku skryptw, ktrych mona uy na stronie WWW
w celu poprawy jej funkcjonalnoci i wygldu. Przykady pochodz z nastpujcych
serwisw WWW:
http://webmaster.helion.pl
http://www.hotscripts.com
http://www.CodeLifter.com

Nowe okno
Jest to jeden ze skryptw, ktrych si w sieci naduywa. Z pewnoci nie raz spotka
e si ze stronami zasypujcymi twj ekran lawin okienek. Pomimo to zdecydowaem
si opisa ten skrypt, za pom oc ktrego moesz otworzy nowe okno po klikniciu
odnonika. Mam jednak nadziej, e bdziesz go uywa z umiarem.
W celu dodania moliwoci otwierania nowego okna, wpisz w nagwku swojej strony
nastpujcy kod:
<SCRIPT>
<! -
function displayWindowturl. width, height) {
var Win = window.open(url, "displayWindow", 'w idth*' + width + ' .height
+ height + ,resizable=0.scrollbars=yes,menubar=no') ;

}
//-->
</SCRIPT>

'

308

Tworzenie stron WWW w praktyce

Natomiast odnonik otwierajcy okno musi mie posta:


<a href="javascript:displaywindow('p?77;./itm/ ,xxx.xxx)">strona l</a>

W odnoniku zamiast pl i k. ht ml musisz wpisa nazw pliku lub zdjcia, ktre ma zo


sta otwarte w nowym oknie. Natomiast zamiast XXX powiniene poda rozmiar okna
(wysoko i szeroko).

Zamykanie otwartego okna


Skoro wiesz, jak otworzy nowe okno, warto by zamieci w nim odnonik umoli
wiajcy jego zamknicie. Odpowiedni kod JavaScript ma posta:
<a href=javascript:window.c lose() ">Zamknij to okno</a>

Rollover
Efekt popularnie zwany rolloverem polega na dynamicznej podmianie obrazka po naje
chaniu na niego kursorem myszy. W zwizku z tym wymagane jest przygotowanie
dwch obrazkw nieznacznie si rnicych np. kolorem.
<a href "# onmouseover="if(document.images) document.aO.src=2.g if
onmouseout="if(document.images) document.a 0.src=i. g i f ;">
<img name="aO" s r c = " l.g if' width="184" height="181" border="0"></a>

Zamiast plikw l . g i f oraz 2 . g i f musisz podstawi odpowiednie nazwy swoich ob


razkw i to wszystko.

Drukowanie zawartoci strony


Za pom oc JavaScript nie mona rozpocz drukowania strony, jednak istnieje mo
liwo otwarcia okna waciwoci druku. Suy do tego podany skrypt.
W nagwku <head></head> musisz wstawi nastpujcy kod:
<script>
/ / (C) 2000 www.CodeLifter.com
/ / http://www.codelifter.com
/ / Free fo r a ll users, but leave in th is header
function printWindowt){
bV = parselnt(navigator.appVersion)
i f (bV >= 4) window.printO

}
</scrip t>

Rozdzia 9. Przydatne skrypty, ktrych mona uy na stronie WWW

309

Natomiast odnonik otwierajcy okno waciwoci drukowania ma posta:


<a href="javascript:printWindowO">Drukuj</a>

Zmiana zawartoci paska statusu


Pasek statusu w oknie przegldarki znajduje si w jej dolnej czci i w niektrych
przypadkach mona go wykorzysta np. do zamieszczenia dokadnego opisu danego
odnonika.
Jeeli chcesz, by zawarto paska statusu przegldarki zm ieniaa si po najechaniu
na odnonik, musisz go rozbudowa zgodnie z podanym przykadem.
<a href="plik.htm l" onMouseOver=''window. status'Zobacz stron': return true"
onHouseOut="window.status' ': return tru e >Zobacz moj stron</a>

Na pasku statusu pojawi si tekst Zobacz moj stron.

Dodawanie strony do Ulubionych


Z ca pew noci spotkae si ze stronami, na ktrych jednym klikniciem myszy
moge doda dan stron do Ulubionych. Jeeli chcesz zrobi co takiego na swojej
stronie, wstaw nastpujcy skrypt:
<a href="java script:vo id (0 ) onClick="window.e xternal,addFavorite(
' h ttp ://h e lio n .p l' . 'Wydawnictwo HELION')">Dodaj do Ulubionych</a>

Jak widzisz, skrypt musi zawiera adres strony, ktr chcesz doda, oraz krtki opis,
pod jakim ma by ona widoczna na licie ulubionych odsyaczy.

Strona startowa
Za pomoc JavaScript moesz utworzy odnonik, ktry ustawi Twoj stron jako
startow w przegldarce osoby, ktra go kliknie. Odpowiedni skrypt ma posta:
<a href"#" o n C lick= "th is.style .behavior'url(#default#homepage)':
th is .setHomePageCh ttp ://h e lion .p l/'):">U staw jako stron startow</a>

31 0

Tworzenie stron WWW w praktyce

Zmiana tia caiej komrki tabeli


Zmiana ta caej komrki nie jest taka prosta, jakby si to mogo wydawa. W celu
rozw izania tego problem u m oemy jednak sign po JavaScript oraz zdarzenia
OnMouseOver i OnMouseOut. Dalej zamieszczam prosty przykad zastosowania Java
Script do zmiany koloru ta w caej komrce tabeli.
<table width="300">
< tr>

<td>HELION</td>
<td cla ss= "tlo " OnMouseOver "this.style.background='#C0C0C0' ;
t h i s . s ty l e .c o lor='#FFFFFF'"
OnMouseOut="this.s t y le .background #FFFFFF ; t h is . s t y le .c o lor= #C0C0C0'">
<a href="http://www .helion.pl ">Wydawnictwo Flelion</a>
</td>
</tr>
<tr>

<td>COIG</td><td class="tlo" OnMouseOver="this.style.background '#COCOCO' :


th i s .sty1e .color=' #FFFFFF'" OnMouseOut="thi s .s ty le .background ' #FFFFFF1:
t h is . s ty le .col o r - #COCOCO'">
<a href="http://www.coig.pl">COIG S.A.</a>
</td>
</tr>
<tr>

<td>ONET</td><td class="tlo" OnMouseOver th is .s ty le .background '#COCOCO';


t h is . s ty le .color=1#FFFFFF'" OnMouseOut " th is .s ty 1e .background IFFFFFF';
t h is .s ty le .c o lor=' #COCOCO'">
<a href="http://www.onet.pl">Portal Onet.pl</a>
</td>
</tr>
</table>

Przyjrzyjmy si skryptowi, jaki znalaz si w komrce, ktrej to ma ulec zmianie.


<td cla ss= "tlo "
OnMouseOver="thi s .s t y le .background '#COCOCO ' ; t h is . s t y le .c o lor=' #FFFFFF ' "
OnMouseOut " t h is .s t y le .background 1#FFFFFF'; t h i s . s t y le .c o lor=' #COCOCO'">

Pierwszy wiersz skryptu wykorzystuje zdarzenie OnMouseOver, innymi sowy chodzi


o sytuacj, gdy kursor znajdzie si nad wybranym obszarem. Jeeli tak si stanie, to
kolorem #COCOCO zostanie zastpione to, ktrego domyln wartoci jest #FFFFFF.
Drugi wiersz korzysta ze zdarzenia OnMouseOut, czyli mamy do czynienia z sytu
acj, gdy kursor myszy zostanie usunity z wybranego obszaru. W takim przypadku
kolorem fFFFFFF zostanie zastpiony #COCOCO.

Rozdzia 9. Przydatne skrypty, ktrych mona uy na stronie WWW

31 1

Wczytywanie arkusza w zalenoci


od uywanej przegldarki
Od czasu do czasu zdarza si, e niektre style nie zawsze dziaaj poprawnie w nie
ktrych przegldarkach. Wygodnym rozwizaniem tego problemu jest przygotowanie
kilku arkuszy stylw dla rnych przegldarek. Oczywicie, pozostaje tylko problem,
w jaki sposb zmusi konkretn przegldark, by korzystaa ze swojego arkusza.
Tutaj z pomoc przychodzi JavaScript. Poniej zamieciem prosty skrypt, ktry roz
poznaje przegldark i wczytuje odpowiedni arkusz stylw.
Skrypt jest nieco zmodyfikowan wersj propozycji Pawa Wimmera, zamieszczonej na
stronie http://webmaster.helion.pl. Poniszy kod wystarczy umieci w nagwku strony.
<script language=JavaScript">

<!
document.write (navigator.appName);
// Rozpoznaje przegldark Netscape i wczytuje odpowiedni arkusz
i f (navigator.appName.indexOf("Netscape") != -1)

{
document.write ( '<1 i nk re i="stylesheet" type="text/css" href="nc.css">') ;

// Rozpoznaje przegldark Opera i wczytuje odpowiedni arkusz


eise i f (navigator.appName.i ndexOf("Opera") != -1)

{
document.write(' <1 i nk rel="stylesheet" type="text/css" href=''opera.css">'):

}
eise if(navigator.appName.indexOf("Microsoft ) != -1)

{
//Rozpoznajeprzegldark MS IE i wczytuje odpowiedni arkusz
document.write(' <1 i nk rel="stylesheet" type="text/css" h re f= ''ie .css"> ') ;

}
else

{
//Jeeli nie rozpozna przegldarki, wczytuje oddzielny arkusz
document.write( ' <1 i nk re i="stylesheet" type="text/css" href="inny.css">');

}
//-->
</script>

Zasada dziaania skryptu jest bardzo prosta. Na pocztku sprawdza on, czy ogldajcy
uywa przegldarki Netscape Navigator jeeli tak, to do dokumentu zostanie wczy
tany zewntrzny arkusz stylw o nazwie nc.css.
Nastpna cz skryptu wykonuje podobne zadanie, z tym e sprawdza, czy ogldajcy
uywa przegldarki Opera i w przypadku pozytywnego testu uruchamia arkusz o na
zwie opera. css.

312

Tworzenie stron WWW w praktyce

Jeeli skrypt rozpozna, e internauta uywa przegldarki Microsoftu, do formatowania


strony uyje arkusza o nazwie ie.css.
W sytuacji, gdy przegldarka ogldajcego nie zostanie rozpoznana, do wywietlenia
strony skrypt uyje arkusza o nazwie inny.css.

Rozdzia 10.

Publikacja
i utrzymanie strony
Po przygotowaniu strony przysza pora na to, aby si ni pochwali wiatu. Zadanie
to sprawia wiele problemw pocztkujcym twrcom stron WWW i z tego powodu
zdecydowaem si na dokadny opis caego procesu. Uznaem rwnie, e warto po
wici kilka stron na instrukcj zakadania patnego serwera oraz rejestracji wasnej
unikalnej domeny.

Uwaga

W ybraem patne konto, poniewa oferuje ono o w iele wicej m oliw oci ni jego
darmowy odpow iednik m .in. m oliw o rejestracji w asnej dom eny. Na te m a t
darmowego hostingu napisano ju bardzo wiele i bez problemu stosow ne inform acje
zajdziesz za pomoc wyszukiwarki. Jeeli chcesz skorzysta z bezpatnej moliwoci
udostpnienia strony WWW, odwied stron h t t p : / / r e p u b l ik a . o n e t . p l / o f e r t a . h t m l
i wybierz konto R e p u b lik a S ta r t. Na uwag zasuguje rwnie strona h t t p : / / w w w . f r e e -w e b h o s ts .c o m , na ktrej znajdziesz bardzo rozbudowany wykaz darmowych serwerw.

Wybr serwera hosting


Hosting to nic innego jak usuga firmy udostpniajcej serwery, na ktrych za sto
sown opat moemy przechowywa swoj stron W WW i pokazywa j wiatu. Na
rynku usug internetowych mamy ogromn konkurencj, a oferty poszczeglnych firm
bardzo si rni, dlatego w ybr odpowiedniego miejsca dla strony nie je st atwy.
Konieczna jest tutaj dokadna analiza wszystkich aspektw oraz dobranie oferty do
wasnych potrzeb.
Wybierajc odpowiedni hosting dla strony, naley bra pod uwag kilka kluczowych
czynnikw, ktre pozwoliem sobie wymieni poniej.

314

Tworzenie stron WWW w praktyce

Rozwizania technologiczne wykorzystywane przy budowie strony. Jeeli


korzystasz z baz danych, jzyka PHP, skryptw CGI lub potrzebujesz wasnej
dom eny albo kilku kont e-mail, powiniene wybra ofert, ktra sprosta
Twoim oczekiwaniom.
Popularno strony. Jeeli tworzysz stron, ktra bdzie cieszy si du
popularnoci, wybierajc odpowiedni hosting, musisz wzi pod uwag
limity transferu przypisane do danej oferty. Dokadniej mwic, chodzi o to,
e niemal kada firma ogranicza korzystanie ze swoich usug, nakadajc
miesiczne limity transferu. Musisz wiedzie, e kady odwiedzajcy Twoj
stron ciga jej zawarto na dysk, a pobrane dane zmniejsz Twj miesiczny
limit. Dla przykadu, moja strona domowa http://danowski.pl, ktra zawiera
gwnie tekst i zoptymalizowane obrazki, miesicznie potrzebuje 1 GB transfem.
Awaryjno serwera. To kolejny czynnik, majcy kluczowe znaczenie podczas
wyboru odpowiedniego serwera dla strony. Jeeli serwer usugodawcy ma
cige awarie, koniecznie poszukaj innej oferty. Pamitaj, e dla Twoich goci
cige problemy z dostaniem si na stron s wystarczajcym powodem do tego,
aby zrezygnowa z odwiedzin.
Szybko wczytywania si strony. Przecitny uytkownik intemetu oczekuje,
e ogldana przez niego strona zostanie wczytana w kilka sekund. Dlatego
zadbaj o to, by wybrane przez Ciebie konto dziaao szybko. Skorzystaj z usug
firmy, ktra pozwala na bezpatne przetestowanie oferty. Dziki temu sam
bdziesz mg sprawdzi, jak szybko dziaa strona. Warto rwnie poprosi
znajomych o sprawdzenie szybkoci testowanej usugi.
Pomoc techniczna. Nawet najlepszy usugodawca ma prawo do wpadek i awarii.
Dlatego naley zadba o wybr takiej firmy, ktra dysponuje sprawnym,
caodobowym serwisem. Dziki temu w razie wystpienia awarii zostanie
ona natychmiast zlokalizowana i usunita.
Jak widzisz, wymogw, jakie powinien spenia dobry hosting, jest cakiem sporo. Na
szczcie w sieci dostpne s rozwizania uatwiajce znalezienie odpowiedniego do
stawy usug.
Poszukiwania dobrego hostingu warto zacz od przejrzenia rankingu najwikszych
polskich firm z tej brany. Stosowne zestawienie znajdziesz na stronie http://toplOO.pl,
a podstaw do jego tw orzenia jest liczba domen utrzymywanych przez poszczegl
ne firmy.
Szybka analiza rankingu pozwala na wyonienie liderw rynku oraz umoliwia sprawne
przeniesienie si na stron usugodawcy celem sprawdzenia jego oferty. W ten sposb
moemy porwna propozycje poszczeglnych firm.
Pozycja w rankingu jest wyznacznikiem jakoci wiadczonych usug oraz wiarygod
noci, pamitaj jednak, e nie zawsze jest tak, i firma zajmujca dalsze miejsce jest
za. Wrcz przeciwnie, moemy mie do czynienia z mod firm, ktra dopiero zdo
bywa klientw i pnie si w rankingu. Sam swego czasu zdecydowaem si skorzysta

Rozdzia 10. Publikacja i utrzymanie strony

315

z usug firmy Progreso http://www.progreso.pl. Znajduje si ona co prawda mniej


wicej w poowie stawki, ale oferuje ciekawie dobrane konto, dostp do shella (co jest
wyjtkiem), a przy tym swoje usugi wycenia na rozsdnym poziomie.
Niezalenie od tego, z ktrej oferty chcesz skorzysta, warto zasign jzyka i do
wiedzie si, co sdz klienci danego operatora. W brew pozorom, nie jest to wcale
skomplikowane i wystarczy do tego komputer poczony z intemetem oraz wyszuki
warka Google. Za jej pomoc moemy przeprowadzi wyszukiwanie grup dyskusyjnych:
wpisujemy nazw wybranej firmy i klikamy przycisk Szukaj. Na rysunku 10.1 wida
wyniki wyszukiwania wiadomoci dostpnych na grupach dyskusyjnych, zawierajcych
w swojej treci sowa progreso i hosting.
Strona gwna grup Google | Pom oc | Zalogui
Ste

Grafika | G ru p y d yskusyjn e | Katalog

.progreso hosting'

Czonkowie

a to m

uytkownicy

Przycz
si

Szuka | a i i i i y t u g r r - s n i

Przeszukano wszystkie grupy

W ynikw 1 -1 0 z 204 dia p ro g re so h o stin g ( 0.30 sekund)


P o so rto w a n e w g istotn oci

Informacie o grupach
Google

si

w i c e j

Sortui wg daty

SUPERHOST - NAJGORSZY HOSTING

... dziaanie dostp i uptime serwera / sie c i / prdu ) pozdr - Adam Szendzielorz
adam [at] p ro g re so (kropka] pi G S F 600 S "03 (black)
p l.c o m p .w w w 31 S ie 2005 01 01 wg Adam Szendzielorz - 11 wiadomoci - 9
autoiow

hotnq?
... p r o g r e s o pl to dobry wybr, ale m y sie sto su n e k c e n y d o tran sferu tro c h e ich
dyskwalifikuje ja z e sw ojej stro n y m og polecic fr.pl -rwnie szy b k i i tam h o s tin g ...
p l.c o m p .w w w - 24 Kwi 2005 02 49 wg butel - 36 wiadomoci
14 autorw

Linki sponsorowane
H ostin g od 3.99 PLN
Do 6 G B powierzchni 900G B transferu
Domeny za 36 % ceny
www webd pl
W W W Hostin g
w pakiecie domena z a 1 z
pl eu com
www punkt pl

a d s l knux y s e rv id o r d e d n s p r o p io
... t cn ic o del otro un mail del uno. asi. al h a ce r m ovim ientos d e p r o g r e s o d e un ...
E so
m e p a s c u an d o mov' mi dominio d e s d e un h o s tin g a mi ADSL, (h ar c a s i ...
e s .c o m p - o s .li n u x .r e d e s - 24 G ru 2001 00 06 wg Xavier Montero - 9 wiadomoci 5
autorw

H ostin g - 9 lat na rynku


od 55 z/rok 5 G B transferu na m-c
domeny pl od 65 z
www e a s y S P pl

Hoting PHP

Serwery W W W od 2.5 z/m-c


Profesjonalny i stabilny h osting
Domeny od 15 zf. konta reseller
www.netatiefa.pl

- n a w e t 20 g i g a - c o p o l e c i c i e ?
... jeli m a s z d ziw na p o trze b e p o sia d an ia h ostingu w P o ls c e , to - stro n n ic zo (bo
koledzy)
http://www p r o g r e s o pl (ch o c m aja napraw d dobra oferte) - lub h ttp // k e i ...
p l.c o m p .la n g .p h p - 20 Marz 11:07 wg [sis] - 6 wiadomoci - 5 autorw
la p .p l

o d rad z am

Z obacz tu swoj wiadomo.

horting

Oma 20-03-2006, pon o godzinie 0 9 5 6 +0100. [sis] n ap isal(a) a o d n o nie hostingu,


ja w ybierabym p o m id zy 3 -m a - h ttp //www p r o g r e s o pl - http://kei.pl ...
p l.c o m p .w w w 21 M arz 19 45 wg [sis] - 26 wiadomoci - 11 autorw
m o d o c ia n y

hotinq

... T eraz realnie ? ,-) p ozdr - A d am S z end zielo rz, a d a m [at] p r o g r e s o [kropka] pl
h ttp //www p r o g r e s o pl h o s tin g - 0801 307 301 G S F 6 0 0 S 03 (black)
p l.in te m e t.p o lip - 10 Kw i 2006 10.00 wg Adam Szendzielorz - 77 wiadomoci - 25
autorw

Rysunek 10.1. Grupy dyskusyjne s nieocenionym rdem wiedzy na temat jakoci usug hostingowych

Jeeli nie lubisz grup dyskusyjnych, opinii na temat firm hostingowych moesz szu
ka na stronach i forach dyskusyjnych powiconych tematyce internetu i tworzenia
stron WWW.

Uwaga

Pam itaj, e przedstaw iona m etoda sprawdzania wiarygodnoci i solidn oci firm y
hostingowej je s t je d n z najskuteczniejszych i obiektyw nych. Jednak dla pewnoci
przed podjciem ostatecznej decyzji skorzystaj z bezpatnego okresu prbnego, ktry
oferuj w szystkie liczce si firm y.

3 16

Tworzenie stron WWW w praktyce

Zakadanie konta
Po wybraniu i zweryfikowaniu firmy hostingowej przysza pora na zaoenie konta.
Procedura wyglda mniej wicej podobnie, niezalenie od tego, z usug jakiej firmy
korzystamy, i ogranicza si do wypenienia stosownego formularza oraz wybrania
rodzaju usugi.

Uwaga

Jako przykad do dalszego opisu wybraem ofert firm y Progreso, poniewa uwaam
j za jedn z ciekawszych. Na mj wybr m ia rwnie wpyw okres testowy, z ktrego
mona skorzysta, zakadajc nowe konto. Polega on na tym , i bez zobowiza
m oesz spraw dzi ja k o oferow anych usug i dziki te m u na spo kojnie podj
decyzj.

Aby obejrze ofert firmy Progreso, klikamy przycisk Oferta, a nastpnie Serwery
wirtualne. Na ekranie monitora pojawia si wwczas przejrzyste zestawienie waciwo
ci poszczeglnych serwerw wirtualnych rysunek 10.2.
Rysunek 10.2.
Zestawienie
waciwoci
serwerw
wirtualnych

Serwer w irtualny to najpopularniejszy sposb na publikacj stron w sieci.


Przygotowalimy 2 plany hostingowe, ktre wychodz na przeciw potrzebom i
moliwociom finansowym naszych obecnych i przyszych klientw.
Wysoka przepustowo zwielokrotnionych cz i stabilne serwery pozwalaj nam
zapewni Tobie 9 9 ,5 % g w a r a n c j d o s t p n o c i utrzym ywanych stron WWW.
Sprawd nas - masz na to 14 d n i i jest to zupenie darmowe. Dziki systemowi
natychm iastowej aktyw acji tw j serwer bdzie gotowy do pracy w cigu kilku sekund'
T e ra z d o k a d e g o p la n u h o s tin g o w e g o d o m e n a .p l g ra tis !
Sprawd koniecznie nasze autorskie oprogram owanie, ktre dostpne jest tylko u nas
- potny i przyjazny e x tr a n e t dla klientw.

PLANY

BIZNES

pojemno
transfer roczny

BIZNES PLUS

5GB

10 GB

300 GB

600 GB

konta e-mail

bez ogranicze

bez ogranicze

konta ftp

bez ogranicze

bez ogranicze

domeny

bez ogranicze

bez ogranicze

subdomeny

bez ogranicze

bez ogranicze

bazy SQL

bez ogranicze

bez ogranicze
i

wasny adres IP
SSL (opcja)

shell

ii!

ii

domena .pl g ratis

ii

i)

domena .civ.pl gratis

ii

i)

jextraneti

ii

ii

sklep internetowy

ii

cena / 12 m-cy

250 PIN

500 PIN

cena / 6 m-cy

150 PN

300 PI N

;Xj - ceny netto

! - zobacz regulamin prom ocji

Rozdzia 10. Publikacja i utrzymanie strony

317

Pamitajc o wymogach technicznych strony, ktr chcesz opublikowa, wybierasz od


powiedni wersj usugi i klikasz przycisk Zamw. Kolejny etap wymaga oznaczenia
rodzaju klienta (osoba prywatna lub firma) oraz zaakceptowania regulaminu.
Nastpne etapy rejestracji i zakadania nowego konta polegaj na wypenieniu sto
sownych formularzy, ktre zostay pokazane na rysunkach 10.3, 10.4 i 10.5. Powiniene
wypeni wszystkie pola oznaczone czerwon gwiazdk. Aby przej do kolejnych
etapw, kliknij przycisk Dalej.
Rysunek 10.3.
Zakadanie
nowego konta
etap pierwszy

KROK 3. REJESTRACJA DANYCH (OSOBA PRYWATNA)


Wypenienie pl oznaczonych * jest niezbdne do pomylnego przeprowadzenia rejestracji.
imi i nazwisko: x Bartosz Danowski
adres zamieszkania: x
kod i miasto: x Katowice
Q powyszy adres jest adresem korespondencyjnym

..._ . . .

PE SE L:

NP:
dotychczasowy adres e-mail:

brt k@danpwski.pl

telefon: j [
1 'J J

Rysunek 10.4.
Zakadanie nowego
konta etap drugi.
Login i haso to
elementy niezbdne
do poczenia si
z serwerem w celu
dokonania zmiany
ustawie
i zarzdzania kontem.
Adres startowy to
tymczasowy adres
strony WWW,
ktry ulegnie zmianie
p o zarejestrowaniu
wasnej domeny

KROK 5. DANE SERWERA WIRTUALNEGO


Wypenienie pl oznaczonych * jest niezbdne do pomylnego przeprowadzenia rejestracji.
login: *

ksiazka

haso: *
haso (powtrz): *
adres startowy: *

ksiazka

.civ.p l

Swoj domen/y bdziesz mg skonfigurowa, przenie


wasna domena/y:
lub zarejestrowa w extraneae po aktywacji serwera.
plan hostingowy: *

abonament: x

0 biznes
Q biznes plus
0 roczny (12 miesicy)
O proczny (6 miesicy)

dodatkowe informacje / uwagi:

(sprawd kod)

kod promocyjny:
l i. l

Tworzenie stron WWW w praktyce

31 8

Rysunek 10.5.
Zakadanie nowego
konta etap trzeci

KROK 6. WERYFIKACJA DANYCH


To ju ostatni, weryfikujcy etap rejestracji serwera. Sprawd prosz raz jeszcze dane, ktre
podae. Jeeli co si nie zgadza - moesz je wygodnie poprawi.
Wypenienie pl oznaczonych * jest niezbdne do pomylnego przeprowadzenia rejestracji.
DANE KLIENTA
imi i nazwisko:* Bartosz Danowski
adres zamieszkania: * * * * * *
kod i miasto: * Katowice
NP:
P E S a:

dotychczasowy adres e-mail: bartekpdanow skLp


telefon:

(jbebb D
ADRES KORESPONDENCYJNY
adres:* * * * * * *
kod i miasto: * ka to wice
dopisek: nie podano

I p o p raw 1
DANE SERWERA
login:* * * * * * *
haso:* * * * * * *
adres startowy:* ksiazka.civ.pl
plan hostmgowy:* biznes
abonament:* 12 m -cy
cena netto / brutto: 2 S 0 .0 0 PLN / 3 0 5 . 0 0 PLN
kod promocyjny: nie podano
( pop ]

[ Akceptuj - rejestruj serwer! ]

Ostatni etap, widoczny na rysunku 10.5, zawiera zestawienie wszystkich wprowadzo


nych danych. Korzystajc z przycisku Popraw, moesz wprowadzi ostatnie zmiany.
W celu akceptacji zamwienia kliknij przycisk Akceptuj rejestruj serwer.
Po zakoczeniu rejestracji na ekranie Twojego monitora pojawi si komunikat z in
form acj o tym, e cay proces przebieg pomylnie rysunek 10.6. Poza tym strona
zawiera odnoniki do plikw, w ktrych znajduje si szczegowa konfiguracja serwera
oraz faktura pro forma. Dodatkowo potwierdzenie aktywacji zostanie wysane na adres
e-mail podany podczas rejestracji.
Od tej chwili moesz ju korzysta z nowo zaoonego konta i nic nie stoi na prze
szkodzie, aby wysa pliki strony na serwer.

319

Rozdzia 10. Publikacja i utrzymanie strony

Rysunek 10.6.
Potwierdzenie
zaoenia konta

T w j s e r w e r z o s ta a k ty w o w a n y . Moesz rozpocz korzystanie z niego.


Poniej znajdziesz isto tn e d a n e dotyczce korzystania z Tw o jego serwera wirtualnego. 5ugerujem y
zapisa te dokum enty tokaine na dysku k kajc p ra w y m przyciskiem myszy na odpow*edn*ej iko n
wybierajc z menu opcje Zapisz e le m e n t d o c e lo w y ja k o ...

(D
j j

dane konf. serwera (pdf, 64 KB)

faktura pro form a (pdf, 60KB)

TX^ dane konf. serwera (txt, 5 KB)


D zikujem y za wybranie naszej firm y. Masz teraz 14 d n i aby przetestowa swj
serwer. Jestemy przekonani, e nasza wsppraca bdzie owocna dla obu stron.
Cay czas suymy pomoc - do Tw ojej dyspozycji jest obszerna dokum entacja,
infolinia 0 80 1 307 301 , telefoniczna pomoc techniczna ( 3 2 ) 4 7 6 21 6 4 oraz system
pomocy w extranecie.
W cigu kilku dni z w y k p o c z t otrzymasz od nas p r b n faktur pro forma oraz
wypenione polecenie przelewu/wpaty, dziki ktrem u w razie zdecydowania si na
nasze usugi bdziesz mg opaci swj serwer.
Za nasze usugi moesz zapaci nie ruszajc si z domu - dla Tw ojej wygody
uruchomilimy system p a tn o c i o n - lin e autoryzowany przez firm E-card.
Patno moesz wykona bezporednio z extranetu.

Moesz teraz pierwszy raz zalogowa si do e x tr a n e tu i skonfigurowa swj serwer.

Publikacja strony
Skoro konto zostao ju zaoone, moesz miao poczy si z serwerem i opubli
kowa uprzednio przygotowan stron WWW.
Do wykonania tego zadania bdziesz potrzebowa dodatkowego programu klienta
FTP. W dalszym opisie zdecydowaem si wykorzysta darm ow FileZill, ktr
mona pobra ze strony http://sourceforge.net/projects/filezilla. Program ten dostpny
jest w polskiej wersji jzykowej, a jego obsuga jest bardzo prosta.

Uwaga

Ciekaw alternatyw dla FileZilli je s t specjalna w tyczka do przegldarki M ozilla


Firefox o nazwie F ire F T P h t t p : / / f ir e f t p . m o z d e v . o r g . Dziki tem u rozwizaniu nie po
trzebujesz dodatkowego programu i wszystko masz wbudowane w swoj przegldark.

Instalacja jest prosta i nie sprawi nikomu najm niejszych problemw. Po wczeniu
programu zobaczysz okno podobne do tego z rysunku 10.7.
W pierwszej kolejnoci kliknij ikon oznaczon na rysunku 10.7 strzak. Nastpnie
w kolumnie widocznej poniej strzaki odszukaj dysk i folder, w ktrym znajduj si
pliki przeznaczone do wysania na serwer.
Do pl Adres, Uytkownik i Haso wpisz odpowiednie dane. Jeeli zapomniae danych,
jakie podae podczas rejestracji, skorzystaj z pliku PD F z danymi konta lub sprawd
e-mail, ktry trafi do Ciebie po jego aktywacji. Po wpisaniu wszystkich danych (pa
mitaj, e wielko liter ma znaczenie) kliknij przycisk Szybko pocz i zaczekaj, a
zostanie nawizane poczenie z serwerem patrz rysunek 10.8.

3 20

Tworzenie stron WWW w praktyce

F ile Z illfl v e rsi n


Plik Edycja

Transfer

2.2.1 8
Kolejka

Serwer

Widok

Pomoc

> a s a 1r * r ?

a*

twrt | DAMoje dokumentyV - HEUONV W trakcie ptaaniaYI ABC_twexzeraa_aron_WWW'p v


a O przykady
3 obrazki
3 2.N agrywana pyt. Przewodnie lustrowany
t:~~j 3.Bementarz montau komputera. P
- . 1 4.Pozyc)onowanie i opumakzaja stron. Jak to zrobi
<3 Hardware, leksykon poj sprztowych. Wydanie n
ii (3 Komputer - kolor
R oznar...

Nazwa pMcu
O O obrazki
:3j| lll.htm i
!3l|cssl.css

530
98
400

sE 2E S E 3
3 ) forrmJarz-nekon.html
3 i| ksiazka. css
3 | hstaodnosrskow. css
3 j pisalionas.css
33| przyidad-formularz.html
przyWad-ksazka.html
S ili* ! * )

2KB
887
208
336

2006-07-07 09:57
2006-07-07 12:06
2006-07-06 18:01
2006-07-09 22:29

PBeHTML
Kaskadowy ark...
Kaskadowy ark...
Kaskadowy ark...
PkkHTML
PkkHTML

2006-07-05 10:53
2006-07-10 22:01
2006-07-10 22:10
2006-07-07 10:29

Roznar

Uprawni-

Zmodyfikowany

Typ
Folder pkkw
PkkHTML
Kaskadowy ark...
Kaskadowy arie...

2KB
4KB
2KB .PSkHTML

Nazwa pkku lokalnego

Czas

. .....

2006-07-09 22:29
2006-0709 18:09
2 0 0 6 0 7 0 6 18:38

Prze zna...

<, ............

Nazwa picu na serwerze

Sotowy

Rysunek 10.7. Wysyamy stron na serwet etap pierw szy


*?. F ile Z illa
Edycja

P o d c zo n y d o k s ia z k a .c iv .p l
Transfer

Kolejka

Serwer

Widok Pomoc

T-lfH^iiB '. o r t
Odpowied:
Komenda
Odpowied
Komenda
Odpowied
Odpowiedz
s:

Adres

Uiytkowr*

k siazkaa

anowsla12 H asio:

200 Type set to A


PASV
227 Entenng Passive Mode (85 219 199 120 192.245)
LIST
150 Opermg ASCII mode d.
226 Transfer complete
Wyfcstowarue katalogu powiodo ae

Wient: j DAMoje dokumentyV1 HELIONA! W trakcie pisantaM .ABCJworzona_stron_WWWNp y


- _ j przykady
i A obrazki
lr~A 2.Nagrywar*e pyt. Przewodnie lustrowany
3.Bementarz montau komputera. Przewodnik ilustrowany
Q 4. Pozycjonowanie i optumalizaja stron. Jak to zrobi
Hardware. Leksykon poj sprztowych. Wydarte n
Komputer - kolor
irA Dane osobowe

-s

Folder pkkw
Folder pikw

|i

Zmodyfikowany

530
98
400
2KB
887
208
3 przyHad-fbrmiiarz.html
| przyklad-kslazka.html

Pr?ytod%tapdnosr*o.u
Nazwa pHcu lokalnego

Folder plikw
PkkHTML
Kaskadowy ark...
Kaskadowy ark...
PkkHTML
Kaskadowy ark...
Kaskadowy ark...

336 Kaskadowy ark...


2KB Pic HTML
4KB PSkHTML

2JS^SJ1ML_
R oznar

20064)7-07 09:57
2006-07-07 12:06
2006-07-06 18:01
2006-07-09 22:29
2006-07-05 10:53
2006-07-10 22:01
2006-07-10 22:10
2006-07-07 10:29
2006-07-09 22:29
2006-07-09 18:09
2006-07-06 18:38

Przezna...

Nazwa piku n

2
Rysunek 10.8 . Wysyamy stron na serw er etap drugi

2006-07-18 1S:S6
2006-07-18 15:56

<kwx~x

Rozdzia 10. Publikacja i utrzymanie strony

32 1

Po nawizaniu poczenia w prawej czci okna zobaczysz zawarto swojego konta


znajdujcego si na serwerze. W przypadku firmy Progreso stron umieszczamy w ka
talogu public html. Oczywicie, w przypadku innych firm hostingowych katalog moe
mie inn nazw lub moe go nie by wcale.
Aby wysa pliki na serwer, w pierwszej kolejnoci musisz otworzy folder public_
html. W tym celu kliknij dwukrotnie nazw katalogu, widoczn w prawej czci gw
nego okna programu. Po chwili powinna zosta wywietlona zawarto folderu.
Teraz moesz przesa pliki na serwer. Jeeli postpujesz zgodnie z moimi instruk
cjami, w lewej kolumnie powiniene widzie pliki strony, a w prawej otwarty folder
public_html. Wystarczy zaznaczy pliki w lewym oknie, nacisn lewy przycisk myszy
i przecign kursor do prawej kolumny, tak jak to pokazuje strzaka na rysunku 10.9.
Kopiowanie plikw rozpocznie si po zwolnieniu przycisku myszy.
f? FileZilla - Podczony do ksiazka.civ.pl
Plik

Edycja

Transfer

Kolejka

Serwer

ki iW Q iH El
iwied:
Komenda
Odpowiedz
Komenda:
Odpowied
Odpowied:
Status

Widok
&

Pomoc
''

ks<azkaciv.pl

Uytkownik: anow ski12

H aso:

200 Type set to A


PASV
227 Entering Passive Mode (85.219,195.120.195.57).
U ST
150 Opening ASCII mode data connection for file Ust
226 Transfer complete
Wyhstowanie katalogu powiodo st

Wient ! D:\Moje dokumentyV - HEUONV W trakcie pisaniaM .ABC _t worzenia _stron_ W W W 'p v
S

przykady
-(3) obrazki

S erw er /p u b S cJitm i/
N azwa pliku

2 ) 2 .N agrywanie p y t. Przewodnik ilustrow any

R o z m ia r...

Typ

D ata

Czas

Uprawnu

< P usta Bsta ka talogu >

jr~A 3 .Elementarz montau kom putera. Przewodnik ilustrow any


y~*i 4.Pozycjonowanie i o p tu m aizaja stro n . Jak to zrobi
2 H ardw are. Leksykon poj sprztow ych. W ydanie n

Komputer - kolor
i D ane osobow e
Rozmiar...
400

Zmodyfikowany
Kaskadowy a rk ...

2 006-07-09 22:29

2 KB

Plik HTML

2 006-07-05

887

Kaskadowy a rk ..,

208

Kaskadowy a rk .,

1KB

Plik HTML

2006-07-06 17:32

969

Plik HTML

2 0 06-07-07 10:22

266

Kaskadowy a rk ...

2006-07-06 17:37

Zaznaczono 13 pikw z 17382 bajtami.


Nazwa pbku lokalnego

Rozmiar

Pr ze z n a ...

N azwa pBoi n a serw erze

Kolejka: 0 b ajty

Rysunek 10.9. Wysyamy stron na serw er etap trzeci

Na rysunku 10.10 wida zawarto folderu public_html po wysaniu wszystkich pli


kw strony.
W tej chwili wszystkie pliki znalazy si ju na serwerze i korzystajc z przegldarki,
moesz zobaczy efekt swojej pracy. Wystarczy, e w pasku adresu przegldarki wpi
szesz adres swojej strony, np. http://danowski.pl.

322

Tworzenie stron WWW w praktyce

F ile Z illa - P o d c z o n y do k s ia z k a .c iv .p l
I Pfik

Edycja

1 :'
Odpowied
Komenda.
O dpow ied
Komenda
Odpowied
O dpow ied
Stalus

Transfer

Kolejka

fefQI

Serwer

Widok

Pomoc

O& R

El

Adres

l^ gbkojm lgzjv

jksazkaovpl

200 Type set to A


PASV
227 Entering Passive Mode (85.219.199 120.194.61).
LIST
150 Opening ASCII m ode d a ta conn ectio n for fie 1st
226 Transfer com plete
Wyttsfowame katalogu powiodo si

Klient ID:\Moje dokumentyV - H E U O N V W trakcie pisaniaM ABC_tworzenia_stn>n_WWWNp

CJ przykady
O

a 1 2.Nagrywanie pyt. Przewodnik ilustrowany

jf ~1 3.Elementarz montau komputera. Przewodnik ilustrowany

4.Pozycjonowanie i optumaizaja stron.

Jak to zrobi

a T Hardware. Leksykon poj sprztowych. Wydanie II


da
Komputer - kolor
T Dane osobowe
Rozmiar...

i f

R ozm iar.,.

).
i lll.h tm l

517

Sdlcssl.css

93

33! formularz.css
3! formularz-hefcon.html

365
2190

Typ

Data

Czas

Uprawni

Pik HTML

2006-07-18

19:54

-rw -r-r-

Kaskadowy...

2006-07-18

19:54

rw-f-r-

Kaskadowy...

2006-07-18

19:54

-fw -r-r

Pik HTML

2006-07-18

19:54

-rw -r-r-

Siiksiazka.css

821

Kaskadowy...

2006-07-18

19:54

-rw -r-r-

i3 | listaodnosnkow .css

189

Kaskadowy...

2006-07-18

19:54

-rw -r-r-

306

Kaskadowy...

2006-07-18

19:54

-rw -r-r-

2695

Pik HTML

2006-07-18

19:54

-rw-r-r

4975

PSk HTML

2006-07-18

19:54

-rw -r-r-

Pik HTML

2006-07-18

19:54

-rw -f-r-

Pik HTML

2006-07-18

19:54

-rw -r-r-

2006-07-18

19:54

-rw -r-r-

2006-07-18

19:54

-rw -r-r-

Typ

Zmodyfikowany

Kaskadowy ark...

2006-07-09 22:29

2KB

Pik HTML

2006-07-05 10:53

887

Kaskadowy ark...

2006-07-10 22:01

3! przykad-Sstaodnosnko...

2482

208

Kaskadowy ark...

2006-07-10 22:10

,331przydad-tistatop.html

1081

336

Kaskadowy ark...

2006-07-07 10:29

;23] przyklad-pisalionas.html

949

P ik HTML

2KB

P ik HTML

2006-07-09 22:29

243

Kaskadowy..

4KB

Pik HTML

2006-07-09 18:09

400

2KB

P ik H T M

2006-07-06 18:38

1KB

Plik HTML

2006-07-06 17:32

969

Pik HTML

2006-07-07 10:22

266

Kaskadowy ark...

2006-07-06 17:37

Zaznaczono 13 plikw z 17382 bajtami.


Nazwa piku lokalnego

Serwer: j/pu blc _html/


Nazwa piku

obrazki

;S3) ptsahonas.css
.23! przyklad-formularz.htjl

2i| przykad-ksazka.html

1531style.css

13 pikw z 16906 bajtami.


Rozmiar

Pr ze zna...

Nazwa piku na serwerze

Kolejta: 0 bajty

Rysunek 1 0 .1 0 . Wysyamy stron na serw er etap czwarty

Uwaga

Jeeli za m ia st strony widzisz lis t plikw , to znaczy, e brakuje pierwszego pliku


strony. Zapam itaj, e pierwszy plik strony zawsze m usi mie nazw in d e x .h tm lub
in d e x . h t m l czy in d e x .p h p .

Rejestracja domeny
Jeli udao Ci si ju zaoy konto, uruchomi wirtualny serwer oraz opublikowa
pliki strony, pora dowiedzie si czego na temat wasnej domeny.
Zacznijmy od wyjanienia pojcia domeny. Kady komputer podczony do internetu
ma wasny, unikalny adres. To podstawa dziaania kadej sieci komputerowej, w prze
ciwnym razie nie byoby moliwe zidentyfikowanie poszczeglnych maszyn oraz prze
syanie midzy nimi informacji. Adres internetowy wystpuje w dwch postaciach:
numerycznej oraz symbolicznej, czyli literowej. Ta pierwsza jest uywana przez kom
putery, ktre, jak wiadomo, nie rozumiej niczego innego poza cyferkami. Adres
numeryczny, zwany inaczej adresem IP, skada si z czterech 8-bitowych liczb i wy
glda np. tak: 217.97.150.194.

Rozdzia 10. Publikacja i utrzymanie strony

323

O tym, jakie konkretnie liczby pojawiaj si na poszczeglnych miejscach, decyduj


do skomplikowane reguy. Maj one charakter czysto techniczny i dlatego nie bdzie
my si tu zajmowali tym zagadnieniem. Istotne jest to, e zapamitanie adresw IP
byoby dla ludzi raczej trudne, poza tym takie adresy nic nikomu nie mwi. W zwizku
z tym jeszcze podczas powstawania intemetu postanowiono, e kady adres bdzie mia
swj odpowiednik symboliczny, czyli literowy. Adresy w tej postaci s po pierwsze
atwe do zapamitania, a po drugie m og stanowi np. nazw firmy, nazw usugi,
slogan reklamowy itd. Dziki temu zamiast posugiwa si szeregami nic nieznaczcych
cyfr, operujemy adresami typu www.yahoo.com ,w ww .whitehouse.gov,www.interia.pl
itd. Wszystko proste, wszystko jasne.
Podczas zakadania konta na serwerze zazwyczaj dostajesz jaki adres, jest on jednak
dalece odlegy od Twoich potrzeb. Dlatego wielu dostawcw usug hostingowych daje
moliwo rejestracji wasnej domeny i powizania jej z zaoonym kontem.
Sam proces rejestracji nie jest skomplikowany i najwygodniej go przeprowadzi za po
moc mechanizmw udostpnionych przez firm, z ktrej usug korzystamy. W przy
padku firmy Progreso musimy zalogowa si do panelu administracyjnego, ktry do
stpny jest pod adresem http://extranet.progreso.pl. Dane niezbdne do logowania to
te same, ktrych uywae przy poczeniu z serwerem w celu wysania strony.
Po zalogowaniu si do panelu administracyjnego w menu dostpnym, po lewej stro
nie, odszukaj sekcj o nazwie Domeny, kliknij j i z menu wybierz opcj Zamwienie
patrz rysunek 10.11.
e x lra n t | p ro g re so

pom oc tech. O 8 0 1 3 0 7 301

Po zmianie zawartoci okna w sekcji Sprawd domen rysunek 10.12, wpisz adres
domeny, ktr chcesz zarejestrowa. Odpowiedni skrypt sprawdzi, czy jest ona wolna,
a przy okazji poda list innych propozycji, zblionych do Twoich oczekiwa.

324

Tworzenie stron WWW w praktyce

extranet | progreso

H e lp d e s k 2 4 / h

K a ta lo g i i p lik i

S tro n y w w w

P o c z ta

FTP

B a z y d a n y c h (S Q L )

P ia n h o s tin g a w y

zamwienie

T:

z a m w ie n ie

a l o g o w a n y u y tk o w n ik ; d a n o w s k i l 2 ( w y lo g u j)

z a m w ie n ie

k o le jk a (0 )

W r a m a c h p r o m o c j i p r z y s u g u j e Ci j e d n a w y b r a n a d o m e n a g r a t i s , n a o k r e s j e d n e g o r o k u .
Z a p o m o c p o n i s z e g o f o r m u l a r z a m o e s z d o k o n a j e j w y b o ru .
D o m e n a z o s ta n ie z a r e je s tr o w a n a a u to m a t y c z n ie p o o p a c e n iu se rw e ra *

S p ra w d d o m e n :
n a z w a / d o m e n a : jd a n o w s io 2

f if

182233

i n n e d o m e n y / p o k a g lo w n

nazw a d om eny

s ta n

c e n a n e tto / r e k

d o s t p n a

BO PLN

1 1 d a n o w B k iZ .c o m

d o s t p n a

5 0 PLN

1 1 d a n o w s k iX 2 .n e t

d o s t p n a

5 0 PLN

Billing
D O M ENA PO L SK A
D om eny
a d fe

d a n o w s k ii2 .p l

a d m in is tra c ja
D O M E N Y G L O B A LN E

z a m w ie n i
tra n s fe r
z m i a n a d e l e g a c ji

d a n a w s k ii2 .o r g

n i e d o s t p n a w p r o m o c ji

D O M E N Y FU N K C JO N A L N E
O

d a n a w s k il2 .c o m .p l

d o s t p n a

6 0 PLN

d a n o w s k i X 2 . n e t. p l

d o s t p n a

6 0 PLN

1 1 d a n o w s k i l 2 . o r g . p!

d o s t p n a

6 0 PLN

0EE231

Rysunek 1 0 .1 2 . Rejestracja wasnej dom eny etap drugi

Jeeli wybrae odpowiadajc Ci domen, kliknij may kwadrat widoczny obok jej
nazwy, a nastpnie nacinij przycisk Dalej.
W kolejnym oknie, ktre jest widoczne na rysunku 10.13, sprawd poprawno danych
do faktury i jeeli wszystko si zgadza, kliknij przycisk Zamw.
Akurat w moim przykadzie domena nic nie kosztuje, poniewa trafiem na promo
cj w przypadku wykupienia konta i opacenia abonamentu otrzymam bezpatnie
domen na rok. Dopiero po upywie tego czasu bd paci za jej utrzymanie. Oczywi
cie, w przypadku gdy promocja si skoczy, odpowiednie ceny pojawi si w oknie
przedstawionym na rysunku 10.3.
Gdy ju wylesz wniosek rejestracyjny, spokojnie czekaj. W przypadku promocji, na
ktr trafiem, domena zostanie zarejestrowana po opaceniu konta. Natomiast w sytu
acji, gdyby bya zamawiana w zwyky sposb, zostaaby zarejestrowana po jej opace
niu. Dane niezbdne do dokonania patnoci znajdziesz w panelu administracyjnym.

V
Uwaga

Korzystajc z opcji dostpnych w panelu adm inistracyjnym , moesz przenie do


meny z innego serw era lub przypisa je do odpow iednich katalogw na serwerze.
Dziki tem u, majc jedno konto, moesz prowadzi kilka pozornie niezalenych witryn.

325

Rozdzia 10. Publikacja i utrzymanie strony

extranet | progreso

H elp d esk 2 4 /h

K a t a l o g i i p lik i

S tro n y w w w

:J
-

P o c z ta

Ti

zamwienie

& 1- zamwienie

~vj

z a o g o w a n y u y tk o w n ik ; d a n o w s k i l 2 (w y lo g u j)

z a m w ie n ie

W r a m a c h p ro m o c ji p r z y s u g u je Ci je d n a w y b ra n a d o m e n a g r a tis , n a o k r e s je d n e g o r o k u .
Z a p o m o c p o n i s z e g o f o r m u l a r z a m o z e s z d o k o n a j e j w y b o ru .
D o m e n a z o s ta n ie z a r e je s t r o w a n a a u t o m a t y c z n ie p o o p a c e n iu s e rw e ra *

FTP

B a z y d a n y c h (S Q L )
a dom eny
P la n h o s tin g o w y

pl

e C o m m e rc e

B iffing

D om eny

ty p

s ta n

p o ls k a

d o s t p n a

o k r e s r e je s tr a c ji
( 1

St~l r o k / l a t
s u m a n e tto :

d a n e d o f a k tu ry :

B a rto s z D an o w sk i

a d re s k o re sp o n d e n c y jn y :

B a rto s z D an o w sk i

cen a n e tto
0 PLN
0 .0 0 P I H

a d m in is tra c ja
z a m w ie n ie
tra n s fe r
z m i a n a d e le g a c ji

U w a g a * J e e l i p o w y s z e d a n e s n ie p r a w id o w e n i e d o k o n u j
n a m i c e l e m ic h z m i a n y !

d a m e n ( y ) . s k o n t a k t u j s i n a jp ie r w z

Rysunek 10.1 3. Rejestracja wasnej dom eny etap trzeci

Na koniec zapamitaj, e w przypadku patnego hostingu strony moesz ze swoimi


problemami zgosi si do pomocy technicznej. Dobra firma utrzymujca serwery po
siada caodobowy serwis, ktry je st po to, aby Ci pomc. Dlatego warto korzysta
z tej moliwoci.

326

Tworzenie stron WWW w praktyce

Rozdzia 11.

Promocja serwisu
Kady twrca strony chce, by po jej publikacji bya ona oblegana przez tumy odwie
dzajcych. Niestety, w praktyce sprawa odwiedzin oraz popularnoci strony nie wygl
da tak dobrze. Aby rozpropagowa swoj witryn, musisz sign po wiele rozwiza
i sztuczek, ktre postanowiem opisa poniej w zwizej formie.

Uwaga

Jeeli interesuje Ci te m a t pozycjonowania i optymalizacji stron WWW, odwied moj


stron i poszukaj tam stosownych inform acji i porad. Zainteresuj si rwnie ksi
k P o z y c jo n o w a n ie i o p ty m a liz a c ja s t r o n W W W . J a k to s i r o b i h t t p : / / h e l i o n . p l /
k s ia z k i/p o z o p t. h tm .

Popularne sposoby promocji strony


W niniejszym podrozdziale opisaem kilka prostych i popularnych sposobw promo
cji strony. Wikszo przedstawionych rozwiza nie wymaga specjalnej wiedzy oraz
duego nakadu pracy. Dziki temu wietnie nadaj si one na start.

Podpis poczty elektronicznej


Najprostszym sposobem reklamy strony jest dodanie do wysyanej poczty e-mail odpo
wiedniej stopki lub podpisu, zawierajcego adres serwisu. Jeeli wysyasz duo e-maili,
to z ca pewnoci w bliskiej przyszoci taka forma promocji odniesie skutek.
Dalej zamieciem przykad swojej stopki, ktra jest czci kadego listu wysyanego
z komputera.
Bartosz Danowski :: http://danow ski.pl ::
Jak walczy ze spam-em - http://danowski.pl/ksiazka/spam

Tworzenie stron WWW w praktyce

328

W swoim przykadowym podpisie poza imieniem i nazwiskiem zamieciem adres


strony internetowej oraz reklam losowo wybranej ksiki.

V
Uwaga

Tworzc s to p k poczty, m usisz p a m i ta o tym , by nie zaw ieraa ona wicej ni


cztery wiersze w przeciwnym razie moesz spotka si z krytyk takiego dziaania
ze strony innych uytkownikw internetu.

Grupy dyskusyjne
Moliwa jest take promocja strony na grupach dyskusyjnych, w tym celu powstaa
specjalna grupa o nazwie pl.com p.www.nowe-strony. Tam moesz bez obaw wysya
informacje o swojej stronie i o tym, gdzie si ona znajduje.
Poza wspomnian grup moesz take sprbowa zareklamowa stron na innych gru
pach tematycznie zwizanych z zawartoci witryny. Jednak pamitaj, e nie wszdzie
jest to mile widziane i zanim polesz wiadomo, postaraj si zapozna z zasadami
panujcymi na wybranej przez Ciebie grupie dyskusyjnej.

Listy mailingowe
Promocja strony WWW czy te usug oferowanych w internecie za pomoc poczty
elektronicznej jest tak stara, jak sam internet. Decydujc si na ten sposb promocji
strony, musisz pamita o kilku wanych rzeczach.
Moim zdaniem najwaniejsz spraw jest grono adresatw poczty. Nie powiniene
wysya poczty elektronicznej do grupy ludzi, ktrych adresy znalazy si w bazie
danych, bdcej w Twoim posiadaniu. Takie dziaanie zazwyczaj spotyka si z wro
goci odbiorcw, bowiem czsto okazuje si, e ich adresy e-mail trafiy do takiej bazy
bez ich wiedzy i zgody.

V
Uwaga

Zanim zdecydujesz si rozsya e-maile z reklam am i swojej strony, koniecznie zapo


znaj si z ksik S p a m . P ro fila k ty k a i o b ro n a h t t p : / / d a n o w s k i. p l/ k s ia z k a / s p a m .

Dlatego skorzystaj z systemw do prowadzenia biuletynw informacyjnych i umoliw


swoim czytelnikom dopisywanie swoich adresw do Twojej bazy. Dziki temu unik
niesz problemw z posdzaniem o spamowanie.

Inne formy promocji


Do innych form promocji mona zaliczy zamieszczenie adresu strony na papierze fir
mowym, wizytwkach, folderach reklamowych oraz w branowych magazynach.
Dziki temu o Twojej stronie dow iedz si ludzie, ktrzy s zainteresowani tym, co
robisz lub co oferujesz.

Rozdzia 11. Promocja serwisu

329

Pozycjonowanie stron
w wyszukiwarkach
Zdecydowanie najlepszym sposobem na wzrost popularnoci Twojej strony jest jej
optymalizacja, przygotowanie do indeksacji przez wyszukiwarki oraz zdobywanie wy
sokich pozycji w wynikach wyszukiwania.

Uwaga

Porady zamieszczone poniej potraktuj ja k o w st p do pozycjonowania stron WWW,


gdy te m a t ten je s t na tyle obszerny, e wym aga osobnej ksi ki. Nie zm ienia to
fa k tu , e n ie kt re rady tu zam ieszczone s na tyle u n iw e rsalne i ponadczasow e,
e ich stosow anie w niczym nie zaszkodzi, a czsto przyniesie podany e fe kt w po
staci dobrych m iejsc w w ynikach wyszukiwania.

Podstawy
Na samym pocztku przeanalizuj tre swojej strony i na tej podstawie wybierz kilka
sw kluczowych. Powinny to by sowa lub frazy, ktre najlepiej oddaj zawarto
strony i s wykorzystywane przez ludzi szukajcych informacji w sieci. Aby praw i
dowo wykona to zadanie, warto wczu si w rol osoby szukajcej, a nie pozycjo
nujcej stron.
Analizujc zwarto mojej strony, doszedem do wniosku, e kada z podstron oma
wiajcych ksiki korzysta z innych sw i fraz kluczowych. Dlatego jako przykad
do dalszych rozwaa posuy mi strona jednej z ostatnich ksiek Nero 7. Nagrywanie
pyt CD i DVD. wiczenia praktyczne http://danowski.pl/ksiazka/cwner7. Wytypo
wane przeze mnie sowa kluczowe wypisaem poniej.
Nero
Nagrywanie pyt
Nero Buming ROM
Wypalanie pyt
Pyty CD DVD
Kopiowanie pyt.
Majc wybrany zestaw kluczowych fraz i sw, moesz zabra si do optymalizacji
kodu strony. W pierwszej kolejnoci musisz zadba o odpowiednie opisane znacznikw
<meta />. Poniej zamieciem przykad odpowiednich znacznikw wraz z wpisanymi
sowami kluczowymi. Pamitaj, e oba elementy m usz znajdowa si w nagwku
strony pomidzy znacznikami <head></head>.
<meta name="keywords" content="nero, nagrywanie p y t, nagrywanie p y t. kopiowanie
p y t. kopiowanie p y t. wypalanie p y t. wypalanie, p y ty CD DVD " />
<meta name="description" content="Poznaj moliwoci pakietu Nero i naucz si
nagrywa pyty CD oraz DVD />

Tworzenie stron WWW w praktyce

330

Zwr uwag, e sowa kluczowe znacznik keywords rozdzielone s przecinka


mi, a te z wyrazw, ktre zawieraj polskie znaki profilaktycznie zostay powtrzone.
Postaraj si nie dodawa zbyt wielu sw kluczowych, bo wyszukiwarki i tak nie
uwzgldniaj wszystkich.
Drugi z przedstawionych znacznikw zawiera opis strony, ktry przez niektre wy
szukiwarki jest przedstawiony wraz z wynikami wyszukiwania. Opis powinien by
zwizy i na temat, bo w duej mierze od niego zaley, czy dany go poczuje si za
chcony do bliszego zapoznania si z Twoj stron. Staraj si w opisie wykorzystywa
sowa kluczowe.
Nastpnym istotnym elementem jest tytu strony. Przypomn tylko, e jest on tworzo
ny za pom oc znacznika < title > < /title > . Dobrze zbudowany tytu strony powinien
zawiera informacje o jej zawartoci oraz pozycjonowane frazy lub sowa kluczowe.
Zdecydowanie zym pomysem jest tworzenie tytuu zawierajcego np. nazw mao
znanej firmy produkujcej okna. Mao kto bdzie szuka producenta okien po nazwie
firmy. Poniej przedstawiem dobrze skonstruowany tytu strony.
<t1tle>Nero - nagrywanie p y t CD i DVD</title>

Kolejnym istotnym elementem, ktry musi znale si w kodzie strony, jest znacznik
<meta name="robots" />, ktry informuje robota wyszukiwarki o tym, co mona in
deksowa na stronie. Poniej znajduje si przykadowy wpis, pozwalajcy na pen
indeksacj wszystkich podstron serwisu.
<meta name="robots" content="index,follow" />

Oczywicie, w zalenoci od potrzeb wartoci wpisane do atrybutu content mog


przybiera inn posta, np.:
' i ndex' strona powinna by zaindeksowana,
' noi ndex' strona nie powinna by zaindeksowana,
' fol 1ow1 linki z tej strony powinny by zaindeksowane,
' nofol 1ow' linki z tej strony nie powinny by zaindeksowane,
' a l l ' rwna si 'index, follow ' warto domylna,
'none' rwna si 'noindex, nofol low'.
Uwaga, wszystkie opisane w niniejszym podrozdziale znaczniki jzyka HTML (XHTML)
powinny znale si w nagwku kadej z podstron serwisu.
Po zmianach kodu strony przysza pora na to, aby przyjrze si treci pozycjonowanej
strony. Poprawnie napisany tekst przeznaczony do prezentacji na stronie WWW powi
nien spenia kilka surowych kryteriw, dziki ktrym bdzie trafia do czytajcego oraz
wpynie na popraw wynikw wyszukiwania.
Tekst powinien by moliwie krtki i zwarty.
Najwaniejsze elementy powinny by umieszczone na pocztku tekstu.
Wewntrz tekstu powinny zosta umiejtnie wplecione frazy i sowa kluczowe,
ktre zostay wybrane do pozycjonowania.

Rozdzia 11. Promocja serwisu

331

Tekst powinien by napisany poprawn polszczyzn i w pierwszej kolejnoci


kierowany do osoby czytajcej, a dopiero pniej do robotw wyszukiwarek.
Staraj si uywa w treci strony nagwkw. Pamitaj, e nagwek stopnia
pierwszego moe wystpi tylko raz na stronie. W miar moliwoci nagwki
powinny zawiera w sobie pozycjonowane frazy lub sowa kluczowe.
Uywaj znacznikw odpowiedzialnych za wyrnianie tekstu. W yrnienia
powinny dotyczy pozycjonowanych fraz lub sw kluczowych. Wane jest
jednak, aby wyrnia z umiarem i tylko to, co faktycznie jest istotne.

Prawidowa indeksacja strony


Po dobraniu sw kluczowych, prawidowym opisie istotnych znacznikw w kodzie
strony i optymalizacji tekstw przysza pora na to, aby zadba o naleyt indeksacj
strony przez wyszukiwarki. Zanim jednak przejdziemy do konkretw, kilka wanych
informacji na temat tego, w jaki sposb dziaaj roboty wyszukiwarek.
W duym uproszczeniu robot wyszukiwarki jest samodzieln przegldark, ktra anali
zuje zawarto strony i wyniki swoich obserwacji przesya do bazy danych. Robot po
wypuszczeniu z klatki zaczyna swoj wdrwk po sieci i przemieszcza si pomi
dzy indeksowanymi stronami dziki odnonikom. Dlatego bardzo wanym elementem
jest prawidowe poczenie wszystkich stron w serwisie. Robot musi mie swobod
skakania ze strony na stron, tak by zapozna si ze wszystkimi czciami serwisu.
Niestety robot sieciowej wyszukiwarki w zalenoci od tego, z jakim serwisem ma
cierzystym jest powizany, ma szereg brakw i ogranicze, ktre musimy bra pod
uwag podczas tworzenia strony.
Zacznijmy od najwaniejszego ograniczenia. Ot wikszo robotw nie potrafi anali
zowa stron wykorzystujcych technologi Adobe Flash (dawniej Macromedia Flash)
lub robi to nieudolnie. Efektem tych ogranicze moe by zerowa lub szcztkowa in
deksacja Twojej strony.
W przypadku mojej strony domowej (starej wersji) boczne menu nawigacyjne zostao
wykonane za pomoc programu Adobe Flash rysunek 11.1, co zaowocowao w pierw
szej fazie problemami z indeksacj strony.
Niestety, roboty indeksoway wycznie stron gwn oraz podstrony, do ktrych
odnoniki znajdoway si w kolumnie aktualnoci i w gwnej treci strony. cznie
w indeksie znajdowao si zaledwie kilkanacie procent caego serwisu.
Opisany powyej problem mona rozwiza przynajmniej na trzy sposoby, ktre po
zwoliem sobie szerzej opisa poniej.
Najszybszym rozwizaniem jest dodanie drugiego, tekstowego menu nawigacyjnego,
przeznaczonego gwnie dla robotw. W przypadku mojej strony domowej takie menu
pojawio si w stopce strony rysunek 11.2.

Tworzenie stron WWW w praktyce

332

3
> WITAM SERDECZNIE
Teraz moesz by legalnym
bez w ydaw ana pienidzy
Uaktualnienia

Witaj nieznany wdrow cze w mojej skromnej oazie smutku, radoci


oraz spokoju Skoro trafie na t stron to z ca pewnoci
musiay Ci w tym pomc moje ksiki, artykuy lub wyszukiwarka

Tsss&sw sm

Strona powstaa jako przykad dla ksiki p t:T warzenie stron WWW
w praktyoe", ale z czasem okazao si, e odwiedza mnie wielu
goci a z tymczasowoci powstao ciao stae Obecnie witryna
spenia istotn funkcj informacyjn i prezentuje moje
dotychczasowe osignicia

SrttkBtS
8 Mnie

le s /ta

'

find Snany

k o n ia k i

Moje kstki o MoziA w


pakiecie OpenOffice firmy
UXjH

L ite ra tu ra in fo rm a tyczn a mojego autorstwa porusza nastpujce


zagadnienia nagrywanie pyt (CO i DVD), tworzenie stron WWW
(HTML, CSS, Java Script), monta i budowa komputera PC, modding i
tuning PC, wyciszanie podzespow komputerowych, monta
wideo, Neostrada, konfiguracja BIOS a take opisuje programy Nero,
Ghost, Drive Image, Excel, Front Page, Easy CD Creator, WinOnCD,
Gadu Gadu, Tlen, Ulead Video Studio, MoziBa Firefox, Mozilla
Thunderbird i wiele innych

553555^25553515351515
Fotografia cyfrow a | Przeczytaj t ksik, je ili
! chcesz zachowa pen
: kontrol nad kolekcj
I cyfrowych zdj_______

Rysunek 1 1 .1 . System nawigacji oparty na Adobe Flash jest zym rozwizaniem z punktu widzenia
pozycjonowania stron

rit/Cu

UAWUH.WWAi ARTYKUY O M KK SiClEP ; S E S T M

! P K T O K N Z 8W0KV | KONTAKT | *>* STOOWV,

Rysunek 1 1 .2 . Dodatkowe tekstowe menu nawigacyjne wpywa na lepsz indeksacj strony


Drugim rozwizaniem, ktre wymaga odrobin wicej zachodu, jest utworzenie mapy
strony. W praktyce taka mapa jest wykazem odnonikw do wszystkich podstron
serwisu. Rysunek 11.3 przedstawia przykadow map mojej strony domowej.
Tworzc map strony, warto skorzysta z list wypunktowanych lub numerowanych,
a gotow podstron bezwzgldnie naley podpi do gwnej strony serwisu za pomoc
tekstowego odnonika. Na przykadowej witrynie odnonik do mapy strony znajdziesz
w tekstowym menu nawigacyjnym, umieszczonym w stopce rysunek 11.2.

V
Uwaga

Liczce si w yszukiwarki ud ostp niy specjalne narzdzie do tworzenia map oraz


zarzdzania nim i. Dziki tem u strony maj by jeszcze lepiej i dokadniej indekso
wane. Przykadem takie go rozwizania moe by G o o g le S ite m a p h t t p : / / w w w .
g o o g le . c o m / w e b m a s t e r s / s it e m a p s .

Rozdzia 11. Promocja serwisu

Rysunek 11.3.
Mapa strony bardzo
dobrze wpywa
na lepsz indeksacj
strony

333

MAPA STRONY
Strona gwna
A rchiw um wiadom o
Wanie pisz
Napisane ksiki

Seria - wiczenia
Seria - ABC
Seria - Standard
Seria - Kurs
Seria - Po prostu
Tumaczenia

Pena lista ksiek


Uaktualnienia do napisanych ksiek
A rtykuy i poradniki publikow ane w prasie

Publikacje Publikacje Publikacje Publikacje -

CYBER
Magazyn INTERNET
CDRinfo.pl
CHIP

Inform acje o autorze


Rne inform acje - nagrody, wyrnienia, wyjazdy

Nagroda "Najlepszy z Najlepszych"


100.000 sprzedanych ksiek
Wyjazd do Zotego Potoku
Skok na bunge z 62 metrw
Spotkanie z Kevinem Mitnickiem

Przyjazne strony
Dane kontaktow e
Regulamin

Ostatnim i chyba najbardziej wymagajcym rozwizaniem jest zmiana systemu nawi


gacji strony i zastpienie go lepszym oraz nowoczeniejszym rozwizaniem, jakim s
kaskadowe arkusze stylw. Na rysunku 11.4 wida alternatywne menu nawigacyjne
mojej strony domowej, wykonane za pom oc CSS.
Rysunek 11.4.
Za pom oc CSS
mona utworzy
rwnie atrakcyjne,
a przy tym
funkcjonalne menu
nawigacyjne

S t ro n a g w n a
K s i k i
A r t y k u y
B log
W a n ie p is z
U a k t u a ln ie n ia
O m n ie
S k le p
R e s z ta
C ie k a w e s t r o n y
K o n ta k t

Tworzenie stron WWW w praktyce

334

Powyszy projekt nigdy nie zosta wykorzystany na stronie, poniewa zdecydowaem


o zmianie jej charakteru i wygldu, o czym sam moesz si przekona, odwiedzajc
j. Nie zm ienia to faktu, e przykadowe menu jest wygodne w codziennym uyciu,
dziaa poprawnie w rnych przegldarkach i wietnie wsppracuje z robotami
wyszukiwarek.
Poniej zamieciem przykadowy arkusz stylw oraz kod strony WWW z prezentowa
nym menu. Mam nadziej, e dziki informacjom zawartym w poprzednich rozdziaach
niniejszej ksiki poradzisz sobie z przygotowaniem podobnego systemu nawigacji.
Kod XHTML
<div id="menu">
<ul id="danowski">
<11><a href="#l" t i t l e = Strona gwna">Strona gwna</a></li>
<li><a href="#2 t i t l e = Napisane ksi ki>Ksiki</a></11>
<li><a href="#3" title="A rtykuy">A rtykuy< /a> </li>
<li><a href="http://danow ski.blogspot.com title="Blog">Blog</a></li>
<1 i><a href="#4 title="W anie pisz">Wanie pisz</a></li>
<li><a href "#5" title="Uaktualnienia">Uaktualnienia</a></li>
<1 i><a href="#6" title = " 0 mnie">0 mnie</a></li>
<li><a href="#7" title="Sklep">Sklep</a></li>
<li><a href="#8" title="Reszta">Reszta</a></li>
<li><a href="#9" title="P rzyjazne strony">Ciekawe strony</a></li>
<li><a href="#10" title="Kontakt">Kontakt</a></li>
</ul>
</div>

Arkusz stylw
ulfdanowski

{
lis t - s ty le : none;
margin: 0;
padding: 0;

}
#menu

{
width: 150px:
border-style: so lid so lid none s o lid ;
border-color: #F4F4F4;
border-size: lpx;
border-width: lpx;
margin: 10px;

}
#menu l i a

{
height: 32px;
voice-fam ily:
voice-fam ily: in h e rit;
height: 24px;
text-decoration: none:
o u tlin e -s ty le : none:

Rozdzia 11. Promocja serwisu

335

#menu l i a: 1i nk. #menu l i a :v is ite d

{
color: #404040:
display: block:
background: url(images/menul.g if) ;
padding: 8px 0 0 10px;
o u tlin e -style : none;

}
#menu l i a:hover

{
color: #26370A:
background: url(images/menul.g if) 0 -32px;
padding: 8px 0 0 10px:

}
#menu l i a:active

{
color: I26370A;
background: url(images/menul.g if) 0 -64px;
padding: 8px 0 0 10px;

}
Na rysunku 11.5 wida obrazek wykorzystany do przygotowania menu.
Rysunek 11.5.
Zmylna konstrukcja
obrazka powoduje,
e animacja menu je s t
pynna niezalenie
od posiadanego cza

Szalenie wanym czynnikiem poprawiajcym dokadn indeksacj strony jest system


wewntrznych odnonikw pomidzy stronami. Innymi sowy, w miar moliwoci
zadbaj o to, aby poszczeglne strony byy powizane midzy sob. Zwr uwag, e na
przykadowej stronie gwnej mona np. znale odnonik do strony o ksice omawia
jcej program Nero. Po otwarciu odpowiedniej podstrony pod opisem ksiki znajdziesz
kilka kolejnych odnonikw do innych ksiek na ten sam temat rysunek 11.6.
Tworzc system wzajemnych powiza, staraj si wykorzystywa w odsyaczach sowa
kluczowe wybrane do pozycjonowania strony.

Uwaga

Jeeli z ja kich powodw dany odsyacz ma nie by analizowany przez robota wy


szukiwarki, mona skorzysta z atrybutu re l= "n o fo l Iow".

<a href="http://danow ski.pi" rel=nofollow>Ten odsyacz nie zostanie


sprawdzony przez robota</a>

Musisz wiedzie, e wszystkie zmiany w wyszukiwarkach wymagaj czasu i co za tym


idzie, efekty Twojej pracy mog by widoczne dopiero po kilku tygodniach, a w szcze
glnych przypadkach nawet po kilku miesicach.

Tworzenie stron WWW w praktyce

336

Rysunek 11.6.
Zadbaj o wzajemne
pow izania
poszczeglnych stron

seria

Po prostu Hero 7
Strona domowa ksiki
ISBN: 83-246-0001 -9
Format: B5. stron: 280
Data wydania: 02/2006

Cena ksiki: 34.90 z

S B

mmmm

W cigu ostatnich 10 lat flagowa aplikacja firmy Nero AG - Nero


B u rn in g ROM zyskaa w ia tow popularno i miano najlepszego
oprogramowania do nagrywania pyt CD i DVD. Jej najnowsza edycja
- N e ro 7 P re m iu m to uniwersalny pakiet multimedialny do obsugi
pikw audio, foto, wideo oraz ogldania telewizji. Zawiera absolutn
now o - H e ro H om e - rozbudowany program czcy
funkcjonalno peceta i telewizora, umoliwiajcy uytkownikowi
zarzdzanie plikami multimedialnymi przechowywanym i na twardym
dysku nawet przy uyciu zwykego pilota Pakiet wyposaono w
wiele nowych narzdzi i funkcji, a te, ktre byy znane z poprzednich
wersji, zostay rozbudowane i udoskonalone
Ksika Po p ro s tu Nero 7 to bardzo dobrze opracowany
przewodnie. W czasie lektury poznasz wszystkie tajemnice
tytuowego produktu Nauczysz si instalowa i konfigurowa
skadniki pakietu N e ro 7, nagrywa pyty CD, VideoCD i DVD,
odtwarza pliki multimedialne, testowa napdy i projektowa okadki
pyt Kade zagadnienie przedstawione jest w postaci bogato
ilustrowanych sekwencji czynnoci, co bardzo uatwia zrozumienie
prezentowanych treci.

Instalacja pakietu i nakadki polonizujcej


Uruchamianie aplikaqi z poziomu Nero StartSmart
Nagrywanie pyt za pomoc Nero Express
Konfiguracja programu Nero Burning ROM
Nagrywanie pyt hybrydowych
Przygotowywanie pyt ze zdjciami
Nagrywanie pyt DVD i VideoCD za pomoc Nero Vision
Kopiowanie pyt CD i DVD
Projektowanie okadek pyt
Obrbka plikw multimediakiych

Poznaj najpopularniejszy pakiet aplikacjij p


archiwizowania danych.

:cych do zapisywania i

Inn e k s i k i o N ero

Nero 7 Nagrywanie
iDVD. wiczenia praktyczne
Nero 6 Nagrywanie pyt CD i DVD wiczenia praktyczne
Nero Burning ROM Nagrywanie pyt CD wiczenia praktyczne
Po prostu Nero 6

Kontrola stopnia indeksacji witryny jest moliwa za pomoc specjalnych polece,


ktre moemy wpisa w okno wyszukiwarki. Na przykad w przypadku najpopular
niejszej sieciowej wyszukiwarki Google, polecenie ma nastpujc posta:
s ite :http://danow ski.pl

Bezporednio po poleceniu s ite : podajemy adres strony, ktra ma zosta sprawdzo


na. Rysunek 11.7 przedstawia przykadowe wyniki dla mojej strony domowej.
W chwili wykonywania testu liczba zindeksowanych stron w bazie Google wynosia
9440. Pamitaj o tym, e wyniki dla zapytania s ite : nigdy nie pokazuj stu procent
stanu faktycznego i kadego dnia m og by inne to normalne.

Zdobywanie pozycji
Skoro kod strony zosta poprawiony a konstrukcja poszczeglnych podstron zopty
malizowana tak, by poprawnie bya analizowana i indeksowana przez roboty wyszu
kiwarek, moemy zaj si zdobywaniem pozycji.

Rozdzia 11. Promocja serwisu

337

Rysunek 11.7.
Wynik dziaania
polecenia site:

_t

Sie

Google
V?

Grafika

Grucv dvskusvine

Kataloa

w iecei *

"...'.s o k t

# Szukaj w Internecie Szukaj na stronach kategorii jzyk polski

S ie

1 Rezultaty od 1 -10 z okoo 9,440 z danowski.pl | wczonym (Znaleziono w 0.20 sek )

Bartosz Danowski - 10odwiedzin -12 bo


Strona autora ksiek i artykuw o tematyce informatycznej. Biografia, publikacje, opinie
czytelnikw
danowski pP 22k -17 Lip 2007 - Kopia - Podobne strony - Zanotuj

Skleo Bartosz Danowski


Koszty wysyki. Kraj. 0,00 z - patno kart kredytow., 3.50 z - wysyka zwyk poczt za
pobraniem., 11.99 z - wysyka poczt kuriersk Zagranica ...
danowski.pi/sklep - 18k - Kogg - Podobsttgny - Zanotuj

Kuba Danowski Home


Home Login Kuba Oanowski. Internetowa galeria Album list Last uploads Last
comments Most viewed Top rated My Favontes Search ...
kuba danowski pu - S4k - Kopia - Podobne strony - Zanotuj

Bartosz Danowski 2 odwiedzin - is Mar


Tym razem na szybko i typowo informacyjnie W sobot i niedziel (30.06-01.07) odbdzie si
I oglnopolska Noc pozycjonerow....
danowski pWeed/ - 30k - Konwi - Podobne strony - fonohn
Porady Bartosz Danowski
Kategone Aktualnoci Ciekawe programy Mozills - Nero Nie na temat Ogoszenia
Porady Pozycjonowanie stron Prgierz Strony WWW i internet...
danowski.pl/pwady - 15k - Konia - Podobne stropy - Znotyi
Kontakt Bartosz Danowski
Opinie czytelnikw Komputer PC wiczenia praktyczne Wydanie II Zdecydowaam si do
Ciebie napisa poniewa bardzo spodobaa mi si konwencja ksiki ...
danowakLpl/kontaMr - l i k - Kp - Podobne.strony - Zanotui

Artykuy Bartosz Danowski


Opinie czytelnikw Monta komputera PC Ilustrowany przewodnik. Chciaem panu
serdecznie podzikowa za lo co pan robi tzn wydaje ksiki i poradniki o ...
danowski p/kategone/artykuly/ - 22k - Kwia -

Bartosz Danowski
Kategone. Aktualnoci Ciekawe programy Mozilla - Nero - Nie na temat Ogoszenia
Porady Pozycjonowanie stron Prgierz Strony WWW i internet ...
danowski.fi/page/12/ - 24k - Konta - Podobna strony - Zanotuj

Mapa strony Bartosz Danowski


Opinie czytelnikw ABC sam skadam komputer Bardzo dzikuj za ksik pt. "ABC sam
skadam komputer". Dziki tej pozycji mogem samodzielnie przygotowa ...
oanowski.pl/mapa-strony/ - 34k - Koga Podobne strony - Zanotuj

Aktualnoci Bartosz Danowski


Kategorie Aktualnoci Ciekawe programy Mozilla Nero Nie na temat Ogoszenia
Porady Pozycjonowanie stron Prgierz Strony WWW i internet...
danowski pl/kaiegone/akiualnosc/ - 20k - Koena - Podobne strony - Zanotuj

stmna

G o o o o o o o o o o g i e
1 2 3 4 5 6 7 8 9 10 N a s te o n a

site danowski pl

Szukai w wynikach 1Narzdzia iezvkowe 1Wskazwki wyszukiwania

Strona Gwna Gooole - Prooramv reklamowe - Wszystko o Gooole


2007 Google

Ze wzgldu na pogldowy charakter tego opisu skupi si tutaj wycznie na wyszu


kiwarce Google. Pamitaj jednak, e konkurencja stara si naladowa lidera rynku,
wic adna z opisanych poniej metod Ci nie zaszkodzi, a moe jedynie pomc.
Pod pojciem zdobywania pozycji rozumiem to, e dla konkretnego zapytania zada
nego wyszukiwarce zwrci ona adres Twojej witryny na moliwie najwyszym miejscu.
Osobicie uwaam, e zadowalajcym rezultatem jest pierwsza podstrona wynikw.
Ostatnie miesice pokazuj, e do zdobycia wysokiej lokaty w wynikach wyszukiwania
wystarczy odpowiednia liczba odsyaczy prowadzcych do strony z innych witryn.
Odnoniki takie m usz mie nastpujc posta:
<a href="http://danowski,pl/ksiazka/ppner7" target="_blank">Nero</a>
<a href="http://danowski ,pl/ksiazka/ppner7 target='_blank>Ksika Nero</a>
<a href="http://danowski .pl/ksiazka/ppner7 target=''_blank"><img
src="obrazki/nero.gif" a1t= Nero title = "N e ro /></a>

338

Tworzenie stron WWW w praktyce

Szczeglnie istotnym elementem odsyacza prowadzcego do strony jest pozycjono


wana fraza lub sowo kluczowe. Na pocztku zdecydowaem, e pozycjonowa bd
stron ksiki o Nero, wic trudno o lepszy odnonik.
W aciwie w tym miejscu mona by zakoczy wywd stwierdzeniem, e naley
zdobywa moliwie najwicej odnonikw prowadzcych do strony i to wystarczy do
osignicia wysokiej pozycji. Niestety, prawda jest troch inna i dlatego zachcam do
lektury dalszej czci tego podrozdziau.
Zdobywajc odnoniki prowadzce do Twojej strony, musisz pamita o kilku wanych
rzeczach. Pozwoliem sobie wypisa w podpunktach najwaniejsze czynniki, jakie maj
tutaj znaczenie.
Pamitaj, e warto m a tylko jeden odnonik z danej strony. Jeeli znajomy
doda u siebie kilka odnonikw do Twojej strony i kady z nich bdzie mia
inny opis, to nie wpynie to w znacznym stopniu na wyniki. Oczywicie,
kada podstrona serwisu znajomego moe zawiera odnonik o rnej treci.
Zadbaj o pozyskanie odnonikw z innych serwisw o podobnej tematyce.
Twrcy wyszukiwarek wiedz, e konkurencja nie wsppracuje ze sob
i ciko pozyska odnoniki z takich miejsc. Dlatego odsyacze tego typu maj
duo w iksz warto i w znaczcym stopniu wpywaj na Twoje notowania.
Unikaj zego ssiedztwa i nie publikuj odnonikw na stronach o treci
powszechnie uznanej za szkodliw. Mam tutaj na myli strony pornograficzne,
nazistowskie, etc. To samo tyczy si odnonikw wychodzcych z Twojej
witryny.
Zabiegaj o odnoniki ze stron o wysokim wspczynniku PageRank. Wicej
na temat tego elementu napisaem w dalszej czci niniejszego rozdziau.
Staraj si pozyskiwa po kilka odnonikw dziennie i pamitaj, e rne
magiczne systemy suce do zdobywania odnonikw, np. LinkVault,
m og Ci zaszkodzi. Zdarza si, e dodawanie zbyt duej liczby odnonikw
prowadzi do problemw i np. wykluczenia strony z wynikw wyszukiwania.
Zadbaj o to, aby informacja o Twojej stronie znalaza si w liczcych si
katalogach stron WWW. Osobicie uwaam, e warto zainteresowa si
nastpujcymi katalogami: http://www.webwweb.pl, http://katalog.onet.pl,
http://katalog.wp.pl oraz http://dmoz.org.
Jak widzisz, praca nad pozycj w duej mierze polega na zdobywaniu odnonikw do
strony. Dlatego uznaem, e dobrym pomysem jest przedstawienie kilku sposobw
na to, w jaki sposb zdobywa odsyacze.
Prowadzc stron o ciekawej zawartoci oraz duej popularnoci, nie musisz
si martwi o odsyacze, bo Twoi gocie sami bd stron poleca na swoich
witrynach. Przykadem takiej sytuacji jest CDRinfo.pl.
Umie na swojej stronie dzia z odnonikami do innych i staraj si wymienia
adresami. Przykad dobrze skonstruowanej strony z odnonikami moesz
zobaczy na rysunku 11.8.

Rozdzia 11. Promocja serwisu

339

Bartosz Danowski

M 3p a s t r o n y

1i t r t u ra i n t o r m a t y c z n a
[
T l?

'- f l

S t r o n a g w n a 11 K s i k i 11 A r t y k u y

If 0

m n ie

P rzyja zne s tro n y

D a n o w s k i.p l A B C t w o r z e n i a s t r o n w w w

P r z y ja z n e s tro n y
Pj

J e i e li c h c e s z a b y T w j o d n o n ik z n a la z s i n a t e j s tr o m e

K o n ta k t

II S k le p 1

S zukaj
| S z u k a j n a s tr o n ie .

musis2

u m ie c i o d w o a n ie d o m o je j w it r y n y o t r e c i w id o c z n e j p o n i 2ej.

N a s t p n ie p o w ia d o m m n ie o ty m i p r z y lij t r e o d s y a c z a .

O p in ie c z y te ln ik w
O s ta tn io m iaem

J- ; ca hrefhctp: Vdancvaici.pl"EuLctcsz Izanowska J literatura infomatycrsa - V9itki. artykuly</a>

p rz y je m n o
p rz e c z y ta tw o j
ksik "ABC

M O N T E R - T u m a c z e n ia p r o g r a m w

tw o rz e n ia s tro n

P o r y c jo n o w a m e

WWW". Ksika

W y c e n a N ie r u c h o m o c i

b ardzo m i si

R a fa K o c h a n o w s k i

spodobaa.

S a f e L o c k - p r o g r a m d o z a b e z p ie c z e C D
K a t a lo g C ie k a w y c h S t r o n

B ogi

4 M A X - s k le p in t e r n e t o w y

* P o r a d n ik w e b m a s t e r a

P o r t a l C D R in fo .p l - r d o w ie d z y o n a g r y w a n iu p y t C D / D V D
M a ja K ie r z k o w s k a
D z ie c k o w s ie c i

RSS
U l W s z y s t k ie w p is y

O il P e a k : r o p a n a ft o w a
P o r a d n ik w e b m a s te r a - P a w e W im m e r

K s i k i

A r t y k u y

P rze p ro w a d zk i
O t w a r t y K a t a lo g I n t e r n e t o w y
T w o je P C . p l - T w o je r d o in fo r m a c ji o S p r z c ie
H e lio n - L it e r a t u r a in f o r m a t y c z n a w n a jle p s z y m w y d a n iu
G r z e g o rz H a r a s im o w ic z

N e w s le tte r
Podaj e-mail
J e li c h c e s z b y p o w ia d a m ia n y o

Rysunek 1 1 .8 . Przykad strony z odnonikami. Zasada je s t prosta je e li chcesz umieci u mnie


adres swojej strony, umie u siebie odnonik do mnie. Warto poda dokadny kod, dziki czemu
masz gwarancj, e wszystkie odwoania bd m iay naleyt posta.

Jeeli dysponujesz budetem na promocj strony, warto pomyle o zakupie


wartociowych odnonikw. Miejscem pomocnym w dokonywaniu takich
transakcji jest strona http://forum.optymalizacja.com.
Moesz dodawa wpisy do darmowych katalogw lub Presell Page.
Spisy tego typu stron znajdziesz pod adresami; http://spis.presellpage.pl
i http://spis-katalogow.info.
Pora, aby si dowiedzie, w jaki sposb sprawdzi liczb stron odwoujcych si do
Twojej strony. Rwnie w tym przypadku do dyspozycji mamy specjalne zapytanie,
ktre w poczeniu z adresem strony wpisujemy na stronie wyszukiwarki.
lin k :h ttp : //hel i on.pl

Na rysunku 11.9 wida wyniki, jakie Google pokazao dla powyszego zapytania. Te
stowa strona posiada a 3520 odnonikw z innych witryn.
W tym miejscu pragn zwrci uwag na fakt, e odnoniki z innych witryn w po
czeniu z dobrze zbudowan stron daj piorunujce wraenie. Przykadem takiej sy
tuacji moe by podstrona mojego serwisu powicona ksice o Nero. Dla zapytania
o treci nero pojawia si ona na pierwszej stronie wynikw rysunek 11.10. N ie
skromnie pochwal si tym, e dla tego sowa kluczowego konkurencja jest bardzo
dua i Google ma ok. 66 milionw wynikw.

Tworzenie stron WWW w praktyce

3 40

Zalogui
S ie

G O O J le

G rafika

G rupy d y sk u sy jn e

Katalog

[lwicWp7/helion.p .....

w i c e j

l l Szukaj 1

S zu k a j w Internecie O

S zu k a j na stronach kategorii P o ls k i

S ie

W y n ik i 1 -1 0 z 3,520 poczone z h ttp ://h e lio n .p l (Znalezio no w 0,23 sek )

W ebpP c pl - Aktualnoci (Newsy) ze wiata komputerw Newsy na ...


Newsy ze wiata komputerw Aktualnoci z intemetu Newsy news
new s w ebpc pi/ - 4 3k - K op ia - Po dobn e strony

Intel Pentium Pro - Helionica


Z heioniki. wolnej encyklopedii informatycznej. (Przekierowano z Pentium Pro) Pentium mikroprocesor szstej generacji nalecy do rodziny x86 ...

helionica pi/index ph p/Pentium _Pro - 2 0 k - Kopia - Podobne strony

26 marca - Hehonica
Wydarzenia na wiecie stycze - luty - marzec - kwiecie - maj - czerwiec - lipiec - sierpie wrzesie - padziernik listopad - grudzie ...
helionica.pl/index pbp/26_m arca - 14k - Kopia - Podobne strony

QuickTim e - Helionica
Z heioniki. wolnej encyklopedii informatycznej (Przekierowano z Quicklime) QuickTime system multimediw firmy Apple Dla zwykych uytkownikw dostpny ...
helionica.pl/index php/Q uicktim e - 14k - K o p ia - Po dobn e strony

National Association of Systems Integrators - Helionica


Z heioniki wolnej encyklopedii informatycznej National Association of Systems Integrators
(NASI) - utworzona w 1991 r organizacja z siedzib w Falmouth. ...
helionica.pl/index p h p /N a tio na l_ A s90 ci3 tion _ of_S ystem sJn tegra io rs - 12k
Koma - Podobne strony

W eb Reporter.pl - [Flashl Jak sterowa pooeniem obiektw i ...


Profesjonalne porady i FAQ dla webmasterw CSS. JavaScript, PHP, XHTML Java. Flash
Linux. Windows Photoshop. MySQL, e-biznes Zobacz koniecznie!
web reporter pl/poradyi,'>id =000315 - 2 6k - K o p ia - Podobne strony

Books on Samba, by year


Home of Samba, the SMB file server ... search samba org | Choose A Mirror Australia
Australia. Australia. Austna Belgium Canada, China. Costa Rica ...
le sam ba oig/sam ba/books html - 2 2 k - K o p ia - Po dobn e strony

Rysunek 1 1 .9 . Przykad dziaania zapytania link:


Zalogui
_

Google
V /

S ie

G rafika

d y sk u sy jn e
G rupy *

S z u k jl^ K r a c t e

K a ta log

w i c e j

iI
O

S zu k a j 1

S zu k a j na stronach kategorii P o ls k i

Sie

W y n ik i 1 - 1 0 spord okoo 66,100,000 dla zapytan ia n e r o (Znalezio no w 0,24 sek )

Nero Buming Rom 7 2 3 2b - PROGRAMS.pl


N e ro Bu m in g R om to najn ow sza wersja a plikacji s u cej do nagryw ania pyt CD -R . C D -R W
D V D -R i D V D -R W ale ta k e edytor plikw W A V dekoder wideo M P E G -1 . ...
www program s pl/program,373 html - 5 3k - 1 7 Lip 2006 - K o p ia - Po dobn e strony

NeroPoftal fNero 7 Ultra Edition - Nero 6 Ultra Edition - Nero..


N e ro is a leading provider in digital m edia technology s e c to r and m em ber of the M P E G -4
Industry Forum (M P E G IF ) In the m eantim e, N e ro h as developed its ...
www n e ro .c o m / - 12k - K op ia - Po dobn e strony

NeroPortal {Nero 7 Premium - Nero 6 Reloaded - Nero Digital...


D ie N e ro A G ist fhrender An bieter im Bereich digitaler Medten-Technolo gie und M itglied im
M P E G - 4 Industry Forum (M P E G IF ) N e ro A G hat ihr preisgekrntes ...
www n ero.co m /d e/ - 14k - K opia - P o d obne strony

Nero 6 0-0 9 - Download IDG pl


Po b ierz z a darmo: Kom plet oprogramowania, u m oliw iajcy za pisyw a n ie pyt C D -R /RW .
uzn aw an y z a jeden z n a jle pszy ch wrd tego typu aplikacji
www.idg.pi/ftp/pc_835/Nero 6 0 0 9 htm l - 9 2k - Kopia - Podobne strony

Aktualnoci IDG pi - Nero 6 do pobrania


Firm a A h ea d producent znakom itej a plikacji do nagrywania pyt CD /D V D . z tygodniowym
opnieniem udostpni dugo oczekiw an, now wersj swojego produktu ...
www idg p/new s/57675 html - 9Qk - K o p ia - Po dobn e strony

Nero6 6 0 16

p b k i.p l

N e ro 6 6 0 16 N a jn ow sza edycja N e ro R eola


pliki pl - Twoje centrum downloadu U nas
z n a jd zie s z programy, s p o lsz c ze n ia , gry pliki, download i inne!
pliki.pl/n ero_ 6 _6 _ 0_ 1 6,17,91.58.download html
'

Bartosz Danowski - Ksika Po prostu Nero 6


B a rto s z D an ow ski - internetowa strona autora k s i e k i artykuw o tem a tyce inform atycznej
W itryna zaw iera informacje o p u blikacjach. ...
d an ow ski pl/ksiazka/ppner6 - 13k - K op ia - Po dobn e strony

Rysunek 1 1 .1 0 . Miejsce w pierwszej dziesitce dla popularnego sowa kluczowego

Rozdzia 11. Promocja serwisu

341

Na koniec pragn napisa kilka sw o wskaniku PageRank, o ktrym wczeniej wspo


minaem. Ot wskanik ten jest jednym z elementw dziaania wyszukiwarki Google
i na temat jego roli powstao wiele spekulacji. Ostatnio moemy zauway, e wpyw
PageRank na wyniki znacznie zmala, ale mino to wielu webmasterw dba o to, aby
by on jak najwyszy.
PageRank przybiera warto z przedziau od 0 do 10. Nowa strona zaczyna swoje ycie
ze wskanikiem o wartoci 0, a wraz ze wzrostem popularnoci PageRank ronie. Do
brze zoptymalizowana i popularna strona powinna mie PageRank na poziomie 5 lub 6.
Wysze wartoci tego wskanika uzyskuj tylko due i bardzo popularne strony. Na
przykad http://www.google.com ma PageRank o wartoci 10.
Za przyrost wartoci PageRank odpowiada dua liczba odsyaczy prowadzcych do
Twojej strony. Dlatego jeeli bdziesz stosowa si do porad zamieszczonych w ni
niejszym podrozdziale, masz szans na to, e wskanik ten zyska w iksz warto ni
domylne 0. Pamitaj jednak, e warto PageRank zmienia si stosunkowo rzadko
i na aktualizacj trzeba czeka nawet kilka miesicy.
Warto wskanika PageRank moesz sprawdzi na kilka sposobw:
Strona http://www.optymalizacja.com/pagerank.php,
Wtyczka do przegldarki M ozilla Firefox o nazwie SearchStatus
http://www.qmrk. biz/searchstatus.

Wnioski
Prawidowa promocja i pozycjonowanie strony ma wpyw na jej popularno. Wyso
ka pozycja w wynikach wyszukiwania wpywa na wzrost odwiedzin, a te z kolei
przekadaj si na wzrost dochodw z reklam bd sprzeday prowadzonej za pored
nictwem witryny. Dlatego w przypadku strony firmowej od samego pocztku zadbaj
o to, aby bya dobrze widoczna w intemecie.
Sporo przydatnych informacji na temat pozycjonowania i optymalizacji stron znajdziesz
w ksikach oraz na licznych stronach internetowych. Poniej zamieciem dwa cie
kawe odnoniki.
http://forum.optymalizacja.com
Pozycjonowanie i optymalizacja stron WWW. Jak to si robi
http://helion.pl/ksiazki/pozopt.htm

342

Tworzenie stron WWW w praktyce

Dodatek A
W dodatku tym zamieciem kilka ciekawych informacji, ktre nie znalazy si w gw
nej czci ksiki. Mam nadziej, e oka si one przydatne i pom og Ci w pracy
nad stron WWW.

Statystyki
Ten podrozdzia pierwotnie mia zawiera wykresy najwaniejszych trendw panuj
cych w intemecie. Jednak po przemyleniu wszystkich za i przeciw, postanowiem zre
zygnowa z tego zamiaru, poniewa w chwili publikacji ksiki i tak wikszo danych
byaby ju nieaktualna.
W zwizku z tym gorco polecam adres http://www.ranking.pl, pod ktrym znajduj
si w zasadzie wszystkie moliwe zestawienia na temat trendw panujcych w pol
skim intemecie.

Gegka
Gegka jest doskonaym narzdziem pozwalajcym konwertowa znaki pomidzy
rnymi stronami kodowymi. Dokadniej mwic, moemy stworzy stron w Notat
niku i uywa znakw w formacie W indow s-1250, a nastpnie za pom oc Gegki
zmieni je na zgodne z ISO 8859-2.
Po uruchomieniu programu kliknij prawym przyciskiem myszy centraln cz okna
i z podrcznego menu wybierz opcj Dodaj pliki (rysunek A .l). W nowym oknie od
szukaj i wska pliki, ktre chcesz podda konwersji. Po zaznaczeniu plikw kliknij
przycisk Otwrz.

344

Tworzenie stron WWW w praktyce

Rysunek A .l.
Zmiana
strony kodowej
etap pierw szy

Dodane pliki pojawi si na licie (rysunek A.2). W dolnej czci gwnego okna, w polu
widocznym przy lewej dolnej krawdzi, ustaw Automatyczny. Nastpnie na przycisku
po prawej stornie ustaw odpowiedni stron kodow, np. ISO 8859-2. Aby rozpocz
konwersj, kliknij przycisk Start.
Rysunek A.2.
Zmiana
strony kodowej
etap drugi

A ] Bez tytuu * - Gegka XP


Projekt

Edycja

Narzdzia

Pomoc

Plik / Folder
C: 'iJse rs^a rtekd e skto p \Strona WWWVaptopy.infoVndex.html

Potwierd zamiar wykonania konwersji. Wystarczy, e w nowym oknie klikniesz przy


cisk Tak. Po chwili na ekranie monitora pojawi si kolejne okno z komunikatem
informujcym o pomylnym zakoczeniu caej operacji.
Zmodyfikowany plik zostanie zapisany pod oryginaln nazw. Zwr uwag na to, e
obok oryginalnego pliku pojawi si rwnie drugi z kocwk bak\ to kopia oryginau
sprzed zmian.

345

Dodatek A

Zestawienie waciwoci
kaskadowych arkuszy stylw
Waciwoci tekstu
Poziome wyrwnanie tekstu
te xt-a lig n

Dostpne wartoci

l e f t | rig h t | center | ju s tify | in h e rit

Warto domylna

le f t

Przykad

p { te x t- a lig n :le ft;}

Dziedziczenie

tak

Pionowe wyrwnanie tekstu


v e rtic a l-a lig n

Dostpne wartoci

baseline | sub | super | bottom | text-bottom | middle | top | text-top


| warto liczbowa \ warto procentowa | in h e rit

Warto domylna

baseline

Przykad

p {ve rtic a l-a lig n :s u p e r;}

Dziedziczenie

nie

Wcicie tekstu
text-indent

Dostpne wartoci

warto liczbowa \ warto procentowa \ in h e rit

Warto domylna

Przykad

p {te x t-in d e n t:3 p t;}

Dziedziczenie

tak

Dekoracja tekstu
text-decoration

Dostpne wartoci

none | underline | overline | line-through | blink | in h e rit

Warto domylna

none

Przykad

p {text-decoration:underline;}

Dziedziczenie

nie

346

Tworzenie stron WWW w praktyce

Przeksztacanie tekstu
te x t- transform

Dostpne wartoci

ca p ita liz e | uppercase | lowercase | none | in h e rit

Warto domylna

none

Przykad

p {text-transform : uppercase;}

Dziedziczenie

tak

Odstpy pomidzy literami


letter-spacing

Dostpne wartoci

normal

Warto domylna

normal

Przykad

p {le tte r-sp a ci ng:3pt; }

Dziedziczenie

tak

| dugo | in h e rit

Odstpy pomidzy wyrazami


word-spacing

Dostpne wartoci

norma!

Warto domylna

normal

| dugo | in h e rit

Przykad

p{word-spaci ng:3 p t: }

Dziedziczenie

tak

Odstp midzy liniami


1ine-height

Dostpne wartoci

normal | wielokrotno wysokoci czcionki \ procent wysokoci czcionki


| in h e rit

Warto domylna

normal

Przykad

p{l i ne-height:100*: }

Dziedziczenie

tak

Pusta przestrze
white-space

Dostpne wartoci

normal | pre | nowrap | pre-wrap | p re -lin e | in h e rit

Warto domylna

normal

Przykad

p{whi te-space:nowrap;}

Dziedziczenie

tak

Dodatek A

34 7

Orientacja tekstu
direction

Dostpne wartoci

I t r 1 r t l 1 in h e rit

Warto domylna

Itr

Przykad

p {d ir e c tio n :r tl;}

Dziedziczenie

tak

Orientacja tekstu dla elementw zagniedonych


unicode-bidi

Dostpne wartoci

normal | embed | b id i-override | in h e rit

Warto domylna

normal

Przykad

p{unicode-bidi:embed;}

Dziedziczenie

nie

Waciwoci czcionki
Rodzaj czcionki
font-fam ily

Dostpne wartoci

nazwa czcionki | s e rif | sans-serif | monospace | fantasy | cursive


| in h e rit

Warto domylna

domylne ustawienie przegldarki ogldajcego witryn

Przykad

p {fo n t-fa m ily :a ria l. helvtica, verdana, sa n s-se rif;}

Dziedziczenie

tak

Rozmiar czcionki
font-size

Dostpne wartoci

rozmiar absolutny \ rozmiar wzgldny xx-small | x-small


smali
| medium | large | x-large | xx-large | smaller \ larger | in h e rit

Warto domylna

medium

Przykad

p{font-size:20pt;}

Dziedziczenie

tak

348

Tworzenie stron WWW w praktyce

Waga czcionki
font-wei ght

Dostpne wartoci

normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
| bolder | lig h te r | in h e rit

Warto domylna

normal

Przykad

p{font-w eight:bold:}

Dziedziczenie

tak

Styl czcionki
fo n t-s ty le

Dostpne wartoci

normal | i t a l ic | oblique | in h e rit

Warto domylna

normal

Przykad

p {fo n t-s ty le :i ta l i c ;}

Dziedziczenie

tak

Warianty czcionki
font-variant

Dostpne wartoci

normal | smali-caps | in h e rit

Warto domylna

normal

Przykad

p {fo n t-va ri a n t:smal-caps;}

Dziedziczenie

tak

Szeroko czcionki
font-stre tch

Dostpne wartoci

normal | wider | narrower | ultra-condensed | extra-condensed


| condensed | semi-condensed | semi-expanded | expanded | extra-expanded
I ultra-expanded | in h e rit

Warto domylna

normal

Przykad

p {fo n t-s tre tc h :u ltra -expanded;]

Dziedziczenie

tak

Proporcja czcionki
font-size-adjust

Dostpne wartoci

none | wspczynnik \ in h e rit

Warto domylna

none

Przykad

p{fo nt-size-adjust:0.58:}

Dziedziczenie

tak

Dodatek A

349

Zbiorczy zapis waciwoci czcionek


font

Dostpne wartoci

<font-style> | <font-variant> \ <font-weight> | <font-size> \


<line-height> \ <font-family>

Warto domylna

patrz: waciwoci poszczeglnych stylw

Przykad

p {fo n t: i t a lic small-caps 600 14pt/2 a r ia l; }

Dziedziczenie

tak

Waciwoci list
Typ listy
lis t-s ty le -ty p e

Dostpne wartoci

disc | c irc le | square | decimal | decimal-leading-zero | lower-roman


| upper-roman | lower-greek | lo w e r-la tin | upper-latin | armenian
j georgian | lower-alpha | upper-alpha | none | in h e rit

Warto domylna

disc

Przykad

ul {1is t-s ty le -ty p e :ci rc le :}

Dziedziczenie

tak

Sposb wypunktowania listy


1i st-style-image

Dostpne wartoci

url 1 none | in h e rit

Warto domylna

none

Przykad

ul {lis t-s ty le -im a g e :u rl(p u n k to .g if):}

Dziedziczenie

tak

Pozycje listy wzgldem wypunktowania


1is t-s ty le - position

Dostpne wartoci

inside | outside | in h e rit

Warto domylna

outside

Przykad

ul { lis t- s t y le - p o s itio n :in s id e :}

Dziedziczenie

tak

Tworzenie stron WWW w praktyce

350

Zbiorczy zapis waciwoci list


lis t - s ty le

Dostpne wartoci

< lis t-s ty le -ty p e > | < lis t-s ty le -p o s itio n > | <list-style-im age>

Warto domylna

Przykad

ul { lis t - s t y le ;url (p u n kto r.g if) in sid e ;}

Dziedziczenie

Kolor i to
Kolor elementu
color

Dostpne wartoci

nazwa lub warto koloru | in h e rit

Warto domylna

zaley od domylnych ustawie przegldarki

Przykad

p {color:#FF0000;}

Dziedziczenie

tak

Kolor ta
background-color

Dostpne wartoci

nazwa lub warto koloru | transparent | in h e rit

Warto domylna

transparent

Przykad

p {background-color:#FF0000:}

Dziedziczenie

nie

Element graficzny jako to


background-image

Dostpne wartoci

url | none | in h e rit

Warto domylna

none

Przykad

body {background-im age:url(tlo.jpg);}

Dziedziczenie

nie

Zatrzymanie graficznego ta
background-attachment

Dostpne wartoci

sc ro ll | fixed | in h e rit

Warto domylna

scro ll

Przykad

body {background-attachment; fix e d ;}

Dziedziczenie

nie

Dodatek A

35 1

Kontrola powielania graficznego ta


background-repeat

Dostpne wartoci

repeat | repeat-x | repeat-y | no-repeat | in h e rit

Warto domylna

repeat

Przykad

body {background- repeat: repeat- x :}

Dziedziczenie

nie

Pozycjonowanie graficznego ta
background-position

Dostpne wartoci

le f t | rig h t | center | top | bottom | wartoci liczbowe


\ wartoci procentowe | in h e rit

Warto domylna

0* 0

Przykad

body {background-position:center center:}

Dziedziczenie

nie

Zbiorczy zapis waciwoci ta


background

Dostpne wartoci

background-color> \ background-image> \ <background-repeat>


| background-attachment \ background-position>

Warto domylna

zalena od wartoci poszczeglnych opcji

Przykad

body {background:#E7E7E7 u r l( t lo l.jp g ) no-repeat 15* 15*}

Dziedziczenie

nie

Marginesy
Lewy margines
margin-left

Dostpne wartoci

warto liczbowa \ warto procentowa | auto | in h e rit

Warto domylna

Przykad

p {m argin-left:lcm ;}

Dziedziczenie

nie

3 52

Tworzenie stron WWW w praktyce

Prawy margines
margin-right

Dostpne wartoci

warto liczbowa \ warto procentowa \ auto | in h e rit

Warto domylna

Przykad

p {margi n- r i g h t:lcm:}

Dziedziczenie

nie

Grny margines
margin-top

Dostpne wartoci

warto liczbowa \ warto procentowa \ auto | in h e rit

Warto domylna

Przykad

p {m argin-topilcm ;}

Dziedziczenie

nie

Dolny margines
margin-bottom

Dostpne wartoci

warto liczbowa | warto procentowa \ auto | in h e rit

Warto domylna

Przykad

p {margin-bottom:lcm;}

Dziedziczenie

nie

Zbiorczy zapis waciwoci marginesw


margin

Dostpne wartoci

<margin-top> | <margin-right> | <margin-bottom> | <margin-left>

Warto domylna

zaley od indywidualnych wartoci poszczeglnych stylw

Przykad

p {margin:lcm 3cm;}

Dziedziczenie

nie

Dopenienie
Lewe dopenienie
padding-left

Dostpne wartoci

warto liczbowa \ warto procentowa \ in h e rit

Warto domylna

Przykad

p {padding-left:lcm ;}

Dziedziczenie

nie

Dodatek A

353

Prawe dopenienie
padding-right

Dostpne wartoci

warto liczbowa \ warto procentowa | in h e rit

Warto domylna

Przykad

p {padding-right: le n ;}

Dziedziczenie

nie

Grne dopenienie
padding-top

Dostpne wartoci

warto liczbowa \ warto procentowa | in h e rit

Warto domylna

Przykad

p {padding-top:lcm;}

Dziedziczenie

nie

Dolne dopenienie
padding-bottom

Dostpne wartoci

warto liczbowa | warto procentowa | in h e rit

Warto domylna

Przykad

p {padding-bottom:lcm;}

Dziedziczenie

nie

Zbiorczy zapis waciwoci dopenienia


padding

Dostpne wartoci

<padding-top> | <padding-right> | <padding-bottom> | <padding-left>

Warto domylna

zaley od indywidualnych wartoci poszczeglnych stylw

Przykad

p { padding: lcm 3cm;}

Dziedziczenie

nie

Obramowanie
Styl obramowania
border-top-style | border-right-style | border-bottom-style | b o rd e r-le ft-s ty le | border-style

Dostpne wartoci

none | hidden | dotted


dashed | so lid | double | dot-dash |
dot-dot-dash | wave | groove | ridge | inset | outset | in h e rit

Warto domylna

none

Przykad

p {border-top-style:dotted;}

Dziedziczenie

nie

354

Tworzenie stron WWW w praktyce

Szeroko obramowania
border-top-width | border-right-width | border-bottom-width | border-left-width | border -width

Dostpne wartoci

none | wartoci liczbowe


th ic k | in h e rit

Warto domylna

none

Przykad

p {border-top-width:5px;}

Dziedziczenie

nie

wartoci procentowe \ th in | medium |

Kolor obramowania
border-top-color | border-right-color | border-bottom-color | border-left-color | border--color

Dostpne wartoci

nazwa lub warto koloru \ transparent | in h e rit

Warto domylna

wg ustawie domylnego koloru dla dokumentu

Przykad

p {border-top-color:red:}

Dziedziczenie

tak

Zbiorczy zapis waciwoci obramowania


border-top | border-right | border-bottom | b o rd e r-le ft | border

Dostpne wartoci

<border-style> | <border-width> | <border-color>

Warto domylna

zalena od indywidualnych wartoci poszczeglnych stylw

Przykad

p {border-top:solid th ick red;}

Dziedziczenie

Wymiary elementw
Szeroko
width

Dostpne wartoci

warto liczbowa \ warto procentowa | auto | in h e rit

Warto domylna

auto

Przykad

p {wi d th :30X:}

Dziedziczenie

nie

Dodatek A

355

Minimalna szeroko
min-width

Dostpne wartoci

warto liczbowa \ warto procentowa \ in h e rit

Warto domylna

Przykad

p {mln-width:90px:}

Dziedziczenie

nie

Maksymalna szeroko
max-width

Dostpne wartoci

warto liczbowa \ warto procentowa | none | in h e rit

Warto domylna

none

Przykad

p {max-width:100px;}

Dziedziczenie

nie

Wysoko
height

Dostpne wartoci

warto liczbowa \ warto procentowa

Warto domylna

auto

Przykad

p { hei g h t :30^:}

Dziedziczenie

nie

auto | in h e rit

Minimalna wysoko
min-height

Dostpne wartoci

warto liczbowa \ warto procentowa

Warto domylna

Przykad

p {min-height :90px;}

Dziedziczenie

nie

in h e rit

Maksymalna wysoko
max-height

Dostpne wartoci

warto liczbowa \ warto procentowa | none | in h e rit

Warto domylna

none

Przykad

p {max-height:100px;}

Dziedziczenie

nie

356

Tworzenie stron WWW w praktyce

Tabele
Podpis tabeli
caption-side

Dostpne wartoci

top | bottom | le f t | rig h t | in h e rit

Warto domylna

top

Przykad

table {caption-side:bottom;}

Dziedziczenie

tak

Generowanie tabeli
table-layout

Dostpne wartoci

auto | fixed | in h e rit

Warto domylna

auto

Przykad

table {ta b le -la y o u t:fix e d ;}

Dziedziczenie

nie

Pojedyncze obramowanie
border-collapse

Dostpne wartoci

collapse | separate | in h e rit

Warto domylna

separate

Przykad

table {border-collapse:collapse:}

Dziedziczenie

tak

Odstpy we wntrzu tabeli


border-spacing

Dostpne wartoci

warto liczbowa | in h e rit

Warto domylna

Przykad

table {border-spacing:lcm 2cm;}

Dziedziczenie

tak

Kontrola pustych komrek


empty-cel 1s

Dostpne wartoci

show | hide | in h e rit

Warto domylna

show

Przykad

table {em pty-cells:hide:}

Dziedziczenie

tak

Dodatek A

357

Pozycjonowanie elementw
Rodzaj pozycjonowania
position

Dostpne wartoci

s ta tic | re la tiv e | absolute | fixed | in h e rit

Warto domylna

s ta tic

Przykad

p {posi t i on:absolute: }

Dziedziczenie

nie

Okrelanie pozycji
top

rig h t | bottom | le f t

Dostpne wartoci

auto | warto liczbowa \ warto procentowa \ in h e rit

Warto domylna

auto

Przykad

p {position:absolute; to p : 10px;}

Dziedziczenie

nie

Pywanie elementw
flo a t

Dostpne wartoci

l e f t | rig h t | none | in h e rit

Warto domylna

none

Przykad

img {float:right;}

Dziedziczenie

nie

Tamowanie elementw
elear

Dostpne wartoci

l e f t | rig h t | none | both | in h e rit

Warto domylna

none

Przykad

img {c le a r : r ig h t: }

Dziedziczenie

nie

Kolejno nakadanych elementw


z-index

Dostpne wartoci

auto | warto liczbowa okrelajca pozycj w stosie | in h e rit

Warto domylna

auto

Przykad

p {z-index:2;}

Dziedziczenie

nie

Tworzenie stron WWW w praktyce

358

Efekty wizualne
Sterowanie wymiarowanymi elementami
overflow

Dostpne wartoci

v is ib le 1 hidden | scroll | auto | in h e rit

Warto domylna

v is ib le

Przykad

p {overflow :scroll :}

Dziedziczenie

nie

Kadrowanie
c lip

Dostpne wartoci

rect (top, rig h t, bottom, le ft) 1 auto 1 in h e rit

Warto domylna

auto

Przykad

p { c lip : re c t(lOpx, 150px, 150px, lOpx,)}

Dziedziczenie

nie

Ukrywanie elementw
v i s ib ilit y

Dostpne wartoci

v is ib le 1 hidden | collapse | in h e rit

Warto domylna

v is ib le

Przykad

p { v is ib i'l ity :h id d e n :}

Dziedziczenie

tak

Zmiana sposobu wywietlania elementu


display

Dostpne wartoci

in lin e | block | lis t-ite m | run-in | in lin e -b lo ck | table | in lin e


-table | table-row-group | table-header-group | table-footer-group |
table-row | table-column-group | table-column | ta b le -ce ll | table-caption | none | in h e rit

Warto domylna

in lin e

Przykad

p{di splay :block: }

Dziedziczenie

nie

Dodatek A

359

Drukowanie
Tworzenie oddzielnych stylw dla wydruku
@media

Dostpne wartoci

a ll | b ra ille | embossed | handheld | p rin t | projection | screen |


speech | t t y | tv

Warto domylna
Przykad

@media p rin t { }

Dziedziczenie

amanie strony przed elementem


page-break-before

Dostpne wartoci

auto | always | avoid | l e f t | rig h t | in h e rit

Warto domylna

auto

Przykad

hi {page-break-before:always;}

Dziedziczenie

nie

amanie strony po elemencie


page-break-after

Dostpne wartoci

auto | always | avoid | l e f t | rig h t | in h e rit

Warto domylna

auto

Przykad

hi {page-break-after:always;}

Dziedziczenie

nie

amanie strony wewntrz elementu


page-break-inside

Dostpne wartoci

avoid | auto | in h e rit

Warto domylna

auto

Przykad

hi {page-break-inside:avoid;}

Dziedziczenie

nie

Wdowy
wi dows

Dostpne wartoci

warto liczbowa \ in h e rit

Warto domylna

Przykad

P {widows:4;}

Dziedziczenie

tak

360

Tworzenie stron WWW w praktyce

Sieroty
orphans

Dostpne wartoci

warto liczbowa \ in h e rit

Warto domylna

Przykad

P {orphans:4:}

Dziedziczenie

tak

Interfejs uytkownika
Kursory
cursor

Dostpne wartoci

auto | crosshair | default | pointer | move | e-resize | ne-resize


| nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize
| te x t | wait | help | progress

Warto domylna

auto

Przykad

a {cursor:help;}

Dziedziczenie

tak

Grubo konturu
outline-w idth

Dostpne wartoci

none | wartoci liczbowe \ wartoci procentowe | thin | medium | thick


| in h e rit

Warto domylna

medium

Przykad

a {outl i ne-wi d th :5px:}

Dziedziczenie

nie

Styl konturu
o u tlin e -s ty le

Dostpne wartoci

none | hidden | dotted | dashed | so lid | double | groove | ridge


| inset | outset | in h e rit

Warto domylna

none

Przykad

a {outline-style:dashed:}

Dziedziczenie

nie

Dodatek A

361

Kolor konturu
o u tlin e-color

Dostpne wartoci

d e fin ic ja koloru \ in ve rt | in h e rit

Warto domylna

Przykad

a {outline-color:green:}

Dziedziczenie

nie

Zbiorczy zapis waciwoci konturu


outline

Dostpne wartoci

<outline-color> | <outline-style> | <outline-width> | in h e rit

Warto domylna

sprawd indywidualne wartoci

Przykad

a {outline:green dashed 5px:}

Dziedziczenie

nie

Zawarto generowana i liczniki


Regua content
content

Dostpne wartoci

normal | none | "dowolna tre" | counter | open-quote | close-quote


| no-open-quote | no-close-quote | in h e rit

Warto domylna

normal

Przykad

h l:a fte r {content:"informacja widoczna przed nagwkiem :}

Dziedziczenie

nie

Cytowanie
quotes

Dostpne wartoci

none | "znak" "znak" | in h e rit

Warto domylna

wg ustawie przegldarki

Przykad

q:before {q u o te s:" " " " : }

Dziedziczenie

tak

Tworzenie stron WWW w praktyce

362

Resetowanie licznika
counter-reset

Dostpne wartoci

none | nazwa liczn ika | in h e rit

Warto domylna

none

Przykad

BODY {counter-reset:lic z n ik ;}

Dziedziczenie

nie

Okrelanie wielkoci wzrostu wartoci


counter-increment

Dostpne wartoci

none | nazwa liczn ika warto wzrostu | in h e rit

Warto domylna

none

Przykad

hi:before {counter-increment:!icznik 3;}

Dziedziczenie

nie

Zestawienie obsugi stylw


przez przegldarki
elem ent

Opera 6.0

Opera
6 .0 1

Mozilla
0 .9 8 PL

Firefox
1.5

IE 6

Opera
8.52

!important

tak

tak

tak

tak

tak

tak

@import

nie

nie

nie

tak

tak

tak

@media

tak

tak

tak

tak

tak

tak

background

tak

tak

tak

tak

tak

tak

background
-attachment

tak

tak

tak

tak

tak

tak

background-color

tak

tak

tak

tak

tak

tak

background-image

tak

tak

tak

tak

tak

tak

background-position

tak

tak

tak

tak

tak

tak

background-repeat

tak

tak

tak

tak

tak

tak

border

tak

tak

tak

tak

tak

tak

border-bottom

tak

tak

tak

tak

tak

tak

border-bottom-color

tak

tak

tak

tak

tak

tak

border-bottom-style

tak

tak

tak

tak

tak

tak

border-bottom-width

tak

tak

tak

tak

tak

tak

border-collapse

tak

tak

nie

tak

tak

tak

border-color

tak

tak

tak

tak

tak

tak

Dodatek A

element

border-left

363

Opera 6.0

tak

Opera
6 .01

tak

Mozilla
0 .9 8 PL

Fi refox
1 .5

IE 6

tak

tak

Opera
8 .52

tak

tak

border-left-color

tak

tak

tak

tak

tak

tak

border-left-style

tak

tak

tak

tak

tak

tak

border-left-width

tak

tak

tak

tak

tak

tak

border-right

tak

tak

tak

tak

tak

tak

border-right-color

tak

tak

tak

tak

tak

tak

border-right-style

tak

tak

tak

tak

tak

tak

border-right-width

tak

tak

tak

tak

tak

tak

border-spacing

tak

tak

tak

nie

tak

tak

border-style

tak

tak

tak

tak

tak

tak

border-top

tak

tak

tak

tak

tak

tak

border-top-color

tak

tak

tak

tak

tak

tak

border-top-style

tak

tak

tak

tak

tak

tak

border-top-width

tak

tak

tak

tak

tak

tak

border-width

tak

tak

tak

tak

tak

tak

bottom

nie

nie

tak

tak

tak

tak

caption-side

nie

nie

tak

nie

tak

nie

clear

tak

tak

tak

tak

tak

tak

tak

tak

tak

tak

tak

tak

tak

tak

clip

nie

nie

color

tak

tak

content

tak

tak

tak

nie

tak

tak

counter-increment

tak

tak

nie

nie

tak

tak

counter-reset

tak

tak

nie

nie

tak

tak

cursor

nie

nie

tak

tak

tak

tak

empty-cells

nie

nie

nie

nie

tak

nie

float

tak

tak

tak

tak

tak

tak

font

tak

tak

tak

tak

tak

tak

font-family

tak

tak

tak

tak

tak

tak

font-size

tak

tak

tak

tak

tak

tak
nie

font-size-adjust

nie

nie

nie

nie

tak

font-stretch

nie

nie

nie

nie

nie

nie

font-style

tak

tak

tak

tak

tak

tak

font-variant

tak

tak

tak

tak

tak

tak

font-weight

tak

tak

tak

tak

tak

tak

height

tak

tak

tak

tak

tak

tak

left

tak

tak

tak

tak

tak

tak

letter-spacing

tak

tak

tak

tak

tak

tak

36 4

elem ent

Tworzenie stron WWW w praktyce

Opera 6.0

Opera
6 .0 1

Mozilla
0 .9 8 PL

Fi refox
1.5

IE 6

Opera
8.52

line-height

tak

tak

tak

tak

tak

tak

link

tak

tak

tak

tak

tak

tak

list-style

tak

tak

tak

tak

tak

tak

list-style-image

tak

tak

tak

tak

tak

tak

list-style-position

tak

tak

tak

tak

tak

tak

list-style-type

tak

tak

tak

tak

tak

tak

margin

tak

tak

tak

tak

tak

tak

margin-bottom

tak

tak

tak

tak

tak

tak

margin-left

tak

tak

tak

tak

tak

tak

margin-right

tak

tak

tak

tak

tak

tak

margin-top

tak

tak

tak

tak

tak

tak

max-height

tak

tak

tak

nie

tak

tak

max-width

tak

tak

tak

nie

tak

tak

min-height

tak

tak

tak

nie

tak

tak

min-width

tak

tak

tak

nie

tak

tak

open type

tak

tak

nie

tak

nie

nie

orphans

tak

tak

nie

nie

nie

tak

outline

nie

nie

nie

nie

tak

tak

outline-color

nie

nie

nie

nie

tak

tak

outline-style

nie

nie

nie

nie

tak

tak

outline-width

nie

nie

nie

nie

tak

tak

overflow: auto

nie

nie

tak

tak

tak

tak

overflow: hidden

tak

tak

tak

tak

tak

tak

overflow: scroll

nie

nie

tak

tak

tak

tak

overflow: visible

tak

tak

tak

tak

tak

tak

padding

tak

tak

tak

tak

tak

tak

padding-bottom

tak

tak

tak

tak

tak

tak

padding-left

tak

tak

tak

tak

tak

tak

padding-right

tak

tak

tak

tak

tak

tak

padding-top

tak

tak

tak

tak

tak

tak

page-break-after

tak

tak

nie

tak

tak

tak

page-break-before

tak

tak

nie

tak

tak

tak

page-break-inside

tak

tak

nie

tak

tak

tak

position: absolute

tak

tak

tak

tak

tak

tak

position: fixed

tak

tak

tak

nie

tak

tak

position: relative

tak

tak

tak

tak

tak

tak

position: static

tak

tak

tak

tak

tak

tak

Dodatek A

element

36 5

Opera 6.0

Opera
6 .0 1

Mozilla
0 .9 8 PL

Fi refox
1.5

IE 6

Opera
8.52

pseudoelement:after

tak

tak

tak

nie

tak

tak

pseudoelement
:before

tak

tak

tak

nie

tak

tak

pseudoelement
:first-letter

tak

tak

tak

tak

tak

tak

pseudoelement
:first-line
pseudoklasa
:first-child

tak

tak

tak

tak

tak

tak

nie

nie

nie

nie

tak

tak

tak

tak

tak

tak

tak

tak

pseudoklasa :active
pseudoklasa :focus

nie

nie

tak

nie

tak

tak

pseudoklasa :hover

tak

tak

tak

tak

tak

tak

pseudoklasa :lang

nie
tak

nie

nie

nie

tak

tak

pseudoklasa :link

tak

tak

tak

tak

tak

pseudoklasa :visited

tak

tak

tak

tak

tak

tak

quotes

tak

tak

tak

nie

tak

tak

right

nie

nie

tak

tak

tak

tak

selektor atrybutu

nie

nie

nie

nie

tak

tak

selektor dziecka

tak

tak

tak

nie

tak

tak

selektor potomka

tak

tak

tak

tak

tak

tak

selektor rodzestwa

tak

tak

tak

nie

tak

tak

table-layout

nie

nie

nie

tak

tak

tak

text-align:center

tak

tak

tak

tak

tak

tak

text-align:justify

tak

tak

tak

tak

tak

tak

text-align:left

tak

tak

tak

tak

tak

tak

text-align:right

tak

tak

tak

tak

tak

tak

text-decoration:
line-through

tak

tak

tak

tak

tak

tak

text-decoration: blink

tak

tak

nie

tak

tak

text-decoration:
overline

tak

tak

nie
tak

tak

tak

tak

text-decoration:
underline

tak

tak

tak

tak

tak

tak

text-indent

tak

tak

tak

tak

tak

tak

text-transform:
capitalize

tak

tak

tak

tak

tak

tak

text-transform:
lowercase

tak

tak

tak

tak

tak

tak

text-transform:
upperrcase

tak

tak

tak

tak

tak

tak

366

elem ent

Tworzenie stron WWW w praktyce

Opera 6.0

Opera
6.0 1

Mozilla
0.9 8 PL

Fi refox
1.5

IE 6

Opera
8.52

top

tak

tak

tak

tak

tak

tak

true doc

nie

nie

tak

tak

tak

nie

vertical-align

tak

tak

tak

tak

tak

tak

visibility: collapse

tak

tak

tak

nie

tak

tak

visibility: hidden

tak

tak

tak

tak

tak

tak

visibility: visible

tak

tak

tak

tak

tak

tak

white-space:normal

tak

tak

tak

tak

tak

tak

white-space:nowrap

tak

tak

tak

tak

tak

tak

white-space:pre

tak

tak

tak

tak

tak

tak

white-space :pre-line

nie

nie

nie

nie

nie

tak

white-space:pre-wrap

nie

nie

nie

nie

nie

tak

widows

tak

tak

nie

nie

nie

tak

width

tak

tak

tak

tak

tak

tak

word-spacing

tak

tak

tak

tak

tak

tak

z-index

tak

tak

tak

tak

tak

tak

Podsumowanie
Tutaj koczy si nasza wsplna przygoda z praktycznym tworzeniem stron WWW
zgodnych z najnowszymi standardami. Mam nadziej, e nie nudzie si, czytajc ko
lejne rozdziay i zmagajc si z kodem.
Moim zamiarem byo pokazanie moliwie prosto i przystpnie, jak stworzy wasn
stron WWW. Staraem si przedstawi wszystko w taki sposb, by nawet osoba po
cztkujca znalaza w tej ksice co dla siebie, a po przeczytaniu jej staa si posia
daczem swojej pierwszej internetowej witryny.
Jak zapewne zauwaye, skupiem si na najwaniejszych elementach, ktrych zna
jom o jest niezbdna podczas tw orzenia stron WWW. Poza tym opisaem, w jaki
sposb korzysta z gotowych rozwiza dostpnych w intemecie oraz jak opublikowa
i wypromowa stron.
Mam nadziej, e zdobye cho troch wiedzy na temat tworzenia stron WWW. Pa
mitaj jednak, e to zbyt mao, by tworzy due komercyjne witryny w celach zarob
kowych. Zanim bdziesz mg zarabia na projektowaniu stron WWW, musisz zdo
by dowiadczenie, pozna dodatkowe jzyki skryptowe, nauczy si pracowa po
stronie serwera czy wreszcie pozna Flash. W szystko zatem przed Tob. Doskonaym
sposobem nauki jest podgldanie pracy innych. Nie bj si zaglda do kodu stron,
ktre Ci zaciekawi, i staraj si dochodzi do tego, w jaki sposb je zbudowano.
W tym miejscu chciaem serdecznie podzikowa za zakup ksiki i zaufanie, jakim
mnie obdarzye. Mam nadziej, e si nie zawiode. Jeeli masz jakie uwagi lub pro
pozycje zwizane z t ksik napisz do mnie. Twj list na pewno nie pozostanie bez
odpowiedzi.
1 bybym zapomnia zagldaj na m oj stron http://danowski.pl.

Bartosz Danowski
bartek@danowski.pl
http://danowski.pl

36 8

Tworzenie stron WWW w praktyce

Skorowidz
&nbsp;, 48
:active, 153
:after, 155
:before, 155
.first-child, 153
rfirst-letter, 154
:first-line, 155
:hover, 151, 225
dang, 153
dink, 150
:visited, 151
@media, 359
blank, 61
parent, 61
self, 61, 92
top, 61
<!- > , 40
<!DOCTYPE>, 32
<a>, 59
href, 59
target, 61
title, 61
<area>, 62, 64
<base>, 38
<blockquote>, 44
<body>, 39
<br />, 46
<caption>, 79
<code>, 47
<dd>, 51
<div>, 42, 48
<dl>, 51
<dt>, 51
<em>, 47
<form>, 84
action, 84
method, 84

<frame>, 91
<frameset>, 90
<head>,33
<html>, 32
<hx>,42
<img>, 55
alt, 55
height, 55
src, 55
width, 55
<input>, 84
maxlength, 85
name, 85
size, 85
type-'button", 85
type="checkbox",
type="file", 85
type="hidden", 85
type="password",
type="radio", 85
type="reset", 85
type="submit", 85
type="text", 84
value, 85
<li>, 50
<link>, 38, 136
<map>, 62, 64
<meta>, 36, 329
<ol>, 50
<option>, 86
<p>, 43
<pre>, 165
<q>, 45
<script>, 307
<select>, 86
<span>, 47, 220
<strong>, 47

Tworzenie stron WWW w praktyce

370

<sub>, 46
<sup>, 46
<table>, 72
<tbody>, 78
<td>, 72
<textarea>, 87
<tfoot>, 78
<th>, 72
<thead>, 78
<title>, 35, 330
<tr>, 72
<ul>, 50
1st Page 2006, 18

A
a:active, 153
a:hover, 151
a:link, 150
a:visited, 150
absolute, 197
action, 84
Adobe Flash, 116
adres
autor witryny, 38
bezwzgldny, 66
e-mail, 60
FTP, 60
grupa dyskusyjna, 60
IP, 23
URL, 60, 66, 131
wzgldny, 66
akapity, 42, 43
aktywne obszary obrazka, 63
alt, 55
alternatywny tekst, 55
analiza poprawnoci kodu, 249
animowany GIF, 102
antyaliasing, 117, 118
arkusz programu MS Excel, 82
Artykuy, 235
atrybuty, 28, 30
wartoci, 31
automatyczne odwieanie dokumentu, 37
autor strony, 36
awaryjno serwera, 314

B
background-attachment, 180
background-color, 143, 178, 183, 194
background-image, 178, 180, 183
background-position, 181
background-repeat, 180

baza danych, 276


biuletyn informacyjny, 298
blink, 164
bold, 170
bolder, 170
border, 72, 189, 190
border-bottom, 189
border-bottom-color, 194
border-bottom-style, 191
border-bottom-width, 193
border-color, 193
border-left, 189
border-left-color, 193
border-left-style, 191
border-left-width, 193
border-right-color, 194
border-right-style, 192
border-right-width, 193
border-style, 190
border-top, 189
border-top-color, 193
border-top-style, 191
border-top-width, 193
border-width, 192
bottom, 161, 182, 204

c
capitalize, 164
cel tworzenia strony WWW, 207
cellpadding, 75
cellspacing, 75
center, 160, 181
ciao dokumentu, 39
cicie grafiki, 129
circle, 174
class, 149
clear, 201, 204
clip, 358
cm, 138
color, 143, 152, 177
cols, 91
colspan, 76, 77
content, 37, 361
coords, 62
counter-increment, 362
counter-reset, 362
CSS, Patrz kaskadowe arkusze stylw
CSS1, 27
CSS2, 27, 140
CSS2.1,27
cudzysowy, 30
cursive, 168
cursor, 360
CVS, 81

Skorowidz

371

cytaty, 42, 44, 361


czcionki, 152, 166,172, 347
rodzaj, 167
rozmiar, 168
styl, 171
waga, 170
wariant, 172

D
darmowe usugi, 283
dashed, 190
decimal, 174
deklaracja kotwicy, 65
dekoracja tekstu, 163
description, 35
display, 358
displaywindow(), 308
DNS, 23
DOCTYPE, 32, 90
dodawanie strony do Ulubionych, 309
dokumenty XHTML, 17,31
akapity, 43
ciao, 39
formularze, 84
grafika, 53
hipercza, 58
komentarze, 40
listy, 50
nagwek strony, 33, 36
nagwki, 42
prolog, 31
ramki, 88
ramy, 32
strona kodowa, 33
struktura, 31
tabele, 69
tytu, 35
zgodno ze specyfikacj, 31
doczanie zewntrznych plikw, 38
domena, 23
rejestracja, 322
dopenienie, 186, 352
dostawca usug internetowych, 21
dotted, 190
double, 191
DrawPlus 4, 20
Dreamweaver, 19
drukowanie, 359
zawarto strony, 308
drzewo katalogw, 67
dziedziczenie, 157
problemy, 158

E
edytor grafiki, 19
edytor tekstu, 18
efekt rollover, 126, 308
efekty wizualne, 358
elementy blokowe, 225
elementy witryny, 212
em, 137
e-mail, 60
etykieta, 20
ex, 138

F
fantasy, 168
FAQ, 271
FileZilla, 319
FireFTP, 319
fixed, 197
Flash, 116
float, 200, 204
font-family, 167, 168
font-size, 143, 152, 153, 168, 169
font-style, 171
font-variant, 172
font-weight, 170
formatowanie, 134
czcionki, 166
listy, 53, 173
tekst, 48, 160
wielojzyczne dokumenty, 153
formaty graficzne, 54, 93, 116
FormMail, 88
formularz wyszukiwania, 260
formularze, 84
akcja, 84
elementy, 84
metoda wykonania, 84
przesyanie treci, 87
przycisk wykonania, 85
ramy, 84
FTP, 60

G
Gadu-Gadu, 296
GET, 84
GIF, 95, 131
animacja, 102
przeplot, 102
redukcja palety kolorw, 108
transparentno, 97

Tworzenie stron WWW w praktyce

372

GIMP, 20
gbia kolorw, 98
Google, 336
grafika, 53, 93
Adobe Flash, 116
alternatywny tekst, 55
cicie, 129
formaty plikw, 54, 93, 95
GIF, 95
gbia kolorw, 98
JPG, 110
mapa odsyaczy, 132
osadzanie, 56
PNG, 113
przeplot, 102
przyciski, 120
rastrowa, 118
redukcja rozmiaru, 113
rozdzielczo, 98
sieciowa, 19
SVG, 117
transparentno, 97
wielko obrazka, 55
wygadzanie krawdzi, 117
gromadzenie materiaw, 209
groove, 191
grubo konturu, 360
grupowanie
selektory, 156
znaczniki, 48
grupy dyskusyjne, 60, 328
Gegka, 343

H
height, 55, 73, 198, 204
hidden, 190
hipercza, 58
graficzne, 61
kotwice, 65
tekstowe, 59
hosting, 313
href, 59, 62
HTML, 13,25,29
http-equiv, 37
http-equiv="content-type'', 38
http-equiv="creation-date", 38
http-equiv="refresh", 37
http-equiv=reply-to", 38

I
identyfikatory, 148
in, 138
indeksacja strony, 331

indeksy, 42, 46
informacje
autor strony, 36
prawa autorskie, 37
input, 84
inset, 191
inside, 176
interfejs uytkownika, 360
internet, 9, 13
Internet Explorer, 243
ISO 8859-2, 33
italic, 171

J
JavaScript, 307, 308
jednostki miar, 137
jzyk
HTML, 14,25
PHP, 277
XHTML, 14, 25
JPG, 110, 131
stopie kompresji, 111
justify, 161

K
kadrowanie, 358
kaskada stylw, 159
kaskadowe arkusze stylw, 26, 133, 345
@media, 359
background-attachment, 180
background-color, 178
background-image, 178, 180
background-position, 181
background-repeat, 180
border, 189, 190
border-bottom, 189
border-bottom-color, 194
border-bottom-style, 191
border-bottom-width, 193
border-color, 193
border-left, 189
border-left-color, 193
border-left-style, 191
border-left-width, 193
border-right, 189
border-right-color, 194
border-right-style, 192
border-right-width, 193
border-style, 190
border-top, 189
border-top-color, 193
border-top-style, 191
border-top-width, 193

Skorowidz

border-width, 192
budowa stylu, 142
class, 149
clear, 201
color, 177
content, 361
counter-increment, 362
counter-reset, 362
cursor, 360
czcionki, 152, 166, 172, 173, 347
dekoracja tekstu, 163
dopenienie, 186, 189, 352
drukowanie, 359
drzewo hierarchii, 157
dziedziczenie, 157
efekty wizualne, 358
float, 200
font-family, 167
font-size, 168
font-style, 171
font-variant, 172
font-weight, 170
formatowanie wielojzycznych
dokumentw, 153
grupowanie selektorw, 156
identyfikatory, 148
interfejs uytkownika, 360
jednostki bezwzgldne, 138
jednostki miar, 137
jednostki wzgldne, 137
kaskadowo, 157, 159
klasy, 149
kolejno nakadanych elementw, 202
kolor elementw, 176
kolor obramowania, 193
kolory, 137, 139, 177, 350
kolory systemowe, 140
kontrola pustej przestrzeni, 165
left, 198
letter-spacing, 163
licznik, 361
line-height, 162
list-style-image, 175
list-style-position, 175
list-style-type, 174
listy, 173, 177, 349
margin, 184
margin-bottom, 184
marginesy, 184, 188,351
marginesy wewntrzne, 186
marginesy zewntrzne, 184
margin-left, 184
margin-right, 184
margin-top, 184

373

metody pozycjonowania, 196


nazwy kolorw, 137, 139
obramowanie, 189, 196, 353
obsuga stylw przez przegldarki, 362
odstpy, 162
odstpy midzy elementami
na stronie WWW, 185
odsyacze, 151
okrelanie pozycji, 198
orphans, 360
outline, 361
outline-color, 361
outline-style, 360
outline-width, 360
padding, 186
padding-bottom, 186
padding-left, 189
padding-right, 189
padding-top, 186
page-break-after, 359
page-break-before, 359
page-break-inside, 359
pionowe wyrwnanie, 161
pywanie elementw, 200
powielanie ta, 179
pozycjonowanie elementw, 196, 357
pozycjonowanie graficznego ta, 181
pozycjonowanie listy wzgldem punktora, 175
problemy z dziedziczeniem, 158
pseudoelementy, 154
pseudoklasy, 150
quotes, 361
relacje, 136
selektor, 142
styl obramowania, 190
style lokalne, 135, 136
style wewntrzne, 135, 136
style zagniedone, 135
style zewntrzne, 135
tabele, 195, 356
tamowanie elementw, 200
tekst, 160, 166, 345
text-align, 160
text-decoration, 164
text-indent, 162
text-transform, 164
to, 350
to elementw, 176
to graficzne, 178
top, 198
tworzenie arkusza stylw, 203
ukrywanie elementw, 358
umieszczanie stylw w dokumencie, 135
vertical-align, 161

Tworzenie stron WWW w praktyce

37 4

kaskadowe arkusze stylw


wcicie pierwszego wiersza akapitu, 162
white-space, 165
widows, 359
width, 198, 199
wielko liter tekstu, 164
word-spacing, 163
wymiarowanie elementw, 198, 354
wyrwnanie tekstu, 160
zatrzymanie ta, 179
zawarto generowana, 361
z-index, 202
kaskadowo, 157, 159
kED, 18
analiza poprawnoci kodu, 249
arkusze stylw, 203
formatowanie tekstu, 48
hipercza, 67
listy, 52
osadzanie grafiki, 56
tabele, 79
tworzenie szkieletu strony, 40
keywords, 35, 330
klasy, 149
klient FTP, 319
kod strony WWW, 18
kod XHTML, 27
kodowanie znakw, 31
kolejno nakadanych elementw, 202
kolor, 139, 350
elementy, 176
kontury, 361
obramowanie, 193
przezroczysty, 97
transparentny, 101
kolumny, 261
kolumny tekstu, 71
komentarze, 40
kompresja LZW, 96
Kontakt, 240
kontrola pustej przestrzeni, 165
konwersja strony kodowej, 34
kotwice, 65
Ksiki, 228
kursory, 360
kursywa, 47

L
large, 169
larger, 169
left, 160, 181, 198, 204
legenda, 234
letter-spacing, 163

licznik, 295
konfiguracja, 296
lighter, 170
line-height, 162
line-through, 164
LinkVault, 338
lista wyboru, 86
listing kodu programu, 47
list-style-image, 175
list-style-position, 175
list-style-type, 174
listy, 50, 349
definicji, 51
kaskadowe arkusze stylw, 173
numerowane, 50
pozycjonowanie wzgldem punktora, 175
punktor graficzny, 175
typ, 173
wypunktowane, 50
zagniedone, 51
listy mailingowe, 328
lower-alpha, 174
lowercase, 164
lower-roman, 174
LZW, 95

amanie
strona, 359
wiersz, 46

M
mailto:, 60
mapa odsyaczy, 62, 132
mapa strony, 332
margin, 184
margin-bottom, 184
marginesy, 184, 351
wewntrzne, 186
zewntrzne, 184
margin-left, 184, 186
margin-right, 184
margin-top, 184
maxlength, 85
medium, 169
menu, 225
method, 84
middle, 161
mm, 138
model RGB, 139
monospace, 167,260

375

Skorowidz

overflow, 358
overline, 164
owalne przyciski, 120

Mozilla Firefox, 243


MS Front Page, 19
MS GIF Animator, 104
multiple, 86
MySQL, 276

P
N

nagwek strony, 33
nagwki, 42
name, 37, 62, 85
narzdzia do tworzenia stron WWW, 17
nazwy
domena, 23
kolory, 137
pliki, 242
no-repeat, 180
noresize, 91
normal, 165, 170
notatki, 227
nowe okno, 307
nowrap, 165

O
O mnie, 236
oblique, 171
obramowanie, 189, 196,260, 353
kolor, 193
styl, 190
szeroko, 192
tabela, 72
obsuga stylw przez przegldarki, 362
odnajdywanie bdw, 251
odnoniki, 58
odstpy, 162
odsyacze, 59, 60
OnMouseOut, 310
OnMouseOver, 310
Opera, 243
opis strony, 35, 330
orphans, 360
osadzanie grafiki, 56
otwieranie
nowe okno przegldarki, 307
odnonik w nowym oknie przegldarki, 61
outline, 361
outline-color, 361
outline-style, 360
outline-width, 360
outset, 191
outside, 176

padding, 186
padding-bottom, 186
padding-left, 189
padding-right, 189
padding-top, 186
page-break-after, 359
page-break-before, 359
page-break-inside, 359
PageRank, 338, 341
Paint Shop Pro, 93, 98
antyaliasing, 118
informacje na temat obrazka, 114
kolor transparentny, 101
Kreator kawakowania obrazka, 132
Kreator mapy obrazka, 132
mapa odsyaczy, 132
narzdzia, 99
Optymalizacja plikw JPEG, 112
Optymalizator plikw GIF, 109
Optymalizuj pliki PNG, 113
redukcja palety kolorw, 108
rysowanie, 98
tworzenie rysunku, 98
zmiana rozmiaru grafiki, 115
Paint.NET, 20
pasek statusu przegldarki, 309
pc, 138
PHP, 276
pica, 138
pionowe wyrwnanie, 161
pliki, 242
CVS, 81
pywanie elementw, 200
PNG, 113, 131
pochylenie tekstu, 47
podpis poczty elektronicznej, 327
pogrubienie tekstu, 47
pola formularza, 84
pole tekstowe, 84
polskie znaki, 33, 34
pomoc techniczna, 314
poprawianie bdw, 251
popularno strony, 314
position, 204
absolute, 197
fixed, 197
relative, 197

376

POST, 84
powielanie ta, 179
pozycjonowanie
elementy, 196, 357
graficzne to, 181
lista wzgldem punktora, 175
pozycjonowanie strony w wyszukiwarkach, 329
<meta>, 329
indeksacja strony, 331
LinkVault, 338
mapa strony, 332
opis strony, 330
PageRank, 338, 341
sowa kluczowe, 330
system wewntrznych odnonikw pomidzy
stronami, 335
zdobywanie pozycji, 336
prawa autorskie, 20, 37
pre, 165
Presell Page, 339
prezentacja tekstu, 43
procenty, 138
program do przygotowywania grafiki sieciowej, 19
projektowanie stron WWW, 9
prolog dokumentu XHTML, 31
promocja serwisu, 327
grupy dyskusyjne, 328
listy mailingowe, 328
podpis poczty elektronicznej, 327
sposoby, 327
promocja strony w wyszukiwarkach, 35
prostoktne przyciski, 120
przegldarki, 243
przeplot, 102
przesyanie treci formularza, 87
przycisk wykonania formularza, 85
przyciski, 85
nieregularne ksztaty, 126
owalne, 120
prostoktne, 120
Przyjazne strony, 236
pseudoelementy, 154
pseudoklasy, 150
PSPad, 19
pt, 138
publikowanie strony, 313, 319
hosting, 313
klient FTP, 319
przegrywanie plikw na serwer, 319
rejestracja domeny, 322
serwer, 313
zakadanie konta, 316
punktor, 173
graficzny, 175
puste atrybuty, 31
px, 137

Tworzenie stron WWW w praktyce

Q
quotes, 361

R
ramki, 88
deklaracja wygldu, 90
suwaki, 91
ramy dokumentu XHTML, 32
ramy formularzy, 84
redukcja palety kolorw, 108
redukcja rozmiaru grafiki, 113
rejestracja domeny, 322
rei, 136
relative, 196
repeat, 180
repeat-x, 180
repeat-y, 180
resetowanie licznika, 362
RGB, 139
ridge, 191
right, 160, 181,204
robots, 38, 330
rodzaj czcionki, 167
rollover, 126, 308
rows, 91
rowspan, 76, 77
rozdzielczo
ekran, 244
obrazek, 98
rozmiar czcionki, 168
rozszerzenia plikw, 26

s
Safari, 243
sans-serif, 167
scrolling, 91
selektor, 142
atrybutu, 147
dziecka, 146
grupowanie, 156
potomka, 145
prosty, 143
rodzestwa, 146
uniwersalny, 143
serif, 167
serwer, 313
HTTP, 276
serwisy indeksujce, 35
shape, 62, 64
sieroty, 360
size, 85
skalowanie obrazka, 55

377

Skorowidz

Sklep, 238
skrypty, 307
dodawanie strony do Ulubionych, 309
drukowanie zawartoci strony, 308
nowe okno, 307
rollover, 308
strona startowa, 309
wczytywanie arkusza w zalenoci
od uywanej przegldarki, 311
zamykanie otwartego okna, 308
zmiana ta caej komrki tabeli, 310
zmiana zawartoci paska statusu, 309
sowa kluczowe, 35, 330
smali, 169
smaller, 169
solid, 190
sonda, 298
square, 174
src, 55, 91
Stat.pl, 283
dostpne informacje, 288
Geolokalizacja, 293
instalacja darmowej wersji statystyk, 285
licznik, 295
Odsony, 290
Odsyacze, 291
rejestracja, 286
Techniczne, 294
Uytkownicy, 288
Wizyty, 288
zakadanie konta, 286
static, 196
status usug Gadu-Gadu oraz Tlen, 296
statystyki, 283, 343
stopka, 263
Strona firmowa, 255
artykuy, 269
formularz wyszukiwania, 260
materiay, 256
moduy w prawej kolumnie, 265
nagwek, 258
podzia na kolumny, 261
stopka, 263
strona kontakt, 274
strona redakcja, 271
strona artykuu lub testu, 269
strona FAQ, 271
strona gwna, 258, 266
strona pojedynczego wpisu, 269
struktura strony, 257
szablon strony, 258
testy, 269
ukad strony gwnej, 258
wpisy, 269

strona gwna, 213, 266


lewa kolumna, 219
menu, 225
nagwek, 216
notatki, 227
pojedynczy wpis, 226
prawa kolumna, 222
stopka, 216
struktura strony, 213
strona kodowa, 33,38
strona startowa, 309
strona WWW, 14, 25, 207
dziay, 209
formularze, 84
grafika, 53
hipercza, 58
mapy odsyaczy, 62
opis strony, 35
ramki, 88
sowa kluczowe, 35
tabele, 69
tekst, 210
tytu, 35
struktura dokumentu XHTML, 31
struktura witryny, 210
styl czcionki, 171
styl konturu, 360
styl obramowania, 190
style CSS
lokalne, 135, 136
wewntrzne, 136
zagniedone, 135
stylesheet, 136
SVG, 116, 117
szablony stron, 258, 275
elementy strony, 279
PHP, 277
pobieranie gotowych szablonw, 281
VertigoServ, 276
zalety stosowania, 276
szeroko obramowania, 192
szkielet strony, 40

T
tabele, 69, 72, 356
arkusz programu MS Excel, 82
cellpadding, 75
cellspacing, 75
ciao, 78
colspan, 76
importowanie tekstu, 82
kaskadowe arkusze stylw, 195
nagwek, 78

37 8

Tworzenie stron WWW w praktyce

tabele
niesymetryczne, 76
obramowanie, 72
podpis, 79
rowspan, 76
stopka, 78
wstawianie, 72
wymiarowanie, 73
zagniedanie, 77
tamowanie elementw, 200
target, 61, 92
tekst, 42,210, 345
akapity, 43
cytaty, 44
formatowanie, 160
indeksy, 46
amanie wierszy, 46
nagwki, 42
twarda spacja, 47
wyrnianie, 47
testowanie projektu, 243, 274
testy rozdzielczoci, 244
testy w rnych przegldarkach, 243
testy zgodnoci kodu ze specyfikacj, 247
text-align, 160
textarea, 87
text-decoration, 152, 153, 164
text-indent, 162
text-transform, 164
title, 61, 62
Tlen, 296
to, 350
elementy, 176
graficzne, 178
top, 161, 182, 198, 204
TopStyle Lite, 19
transparentno, 97
twarda spacja, 47
tworzenie
animowany GIF, 104
arkusze stylw, 203
hipercza, 67
listy, 52
okno, 307
przyciski, 121
szkielet strony, 40
tabele, 79
tytu dokumentu, 35

U
ukrywanie elementw, 358
Ulubione, 309
umieszczanie stylw w dokumencie, 135

underline, 164
Unicode, 34
Unikod, 34
upper-alpha, 174
uppercase, 164
upper-roman, 174
URL, 60, 66
usugodawca, 21
UTF-16, 34
UTF-7, 34
UTF-8, 34
utrzymanie strony, 313

V
value, 85
vertical-align, 161
VertrigoServ, 276
visibility, 358

W
W3C, 25
waga czcionki, 170
wariant czcionki, 172
wcicie pierwszego wiersza akapitu, 162
wczytywanie arkusza w zalenoci od uywanej
przegldarki, 311
wdowy, 359
webmaster, 93
white-space, 165
widows, 359
width, 55,73, 198, 199, 204
wielko liter tekstu, 164
wielko obrazka, 55
window.close(), 308
w indw .external .addFavorite(), 309
Windows 1250, 33
witryna, 14
word-spacing, 163
wprowadzanie hasa, 85
wybr dostawcy usug internetowych, 21
wybr serwera, 313
wygld strony w rnej rozdzielczoci, 244
wygadzanie krawdzi, 117
wymiarowanie
elementy, 198, 354
tabele, 73
wyrwnanie tekstu, 160
wyrnianie tekstu, 47
wysyanie strony na serwer, 320
wyszukiwarki, 35

379

Skorowidz

X
XHTML, 13,25,29
XHTML 1.0, 25
XHTML 1.0 Strict, 40, 247
x-large, 169
x-small, 169
xx-large, 169
xx-small, 169

z
zagniedanie
tabele, 77
znaczniki, 29
zakadanie konta, 316
zamykanie otwartego okna, 308
zamykanie znacznikw, 29, 30
zatrzymanie ta, 179
zbiorczy zapis waciwoci konturu, 361
zgodno kodu ze specyfikacj, 247
z-index, 202, 204
zmiana
rozmiar grafiki, 115
to caej komrki tabeli, 310
zawarto paska statusu, 309
znaczniki, 26, 28
<a>, 59
<area>, 62
<base>, 38
<blockquote>, 44
<body>,39
<br />, 46
<caption>, 79
<code>,47
<dd>,51
<div>, 48
<dl>, 51
<dt>, 51
<em>, 47

<form>, 84
<frame>, 91
<frameset>, 90
<head>,33
<html>, 32
<hx>, 42
<img>, 55
<input>, 84
<li>, 50
<link>, 38, 136
<map>, 62
<meta>, 36
<ol>, 50
<option>, 86
<p>, 43
<pre>, 165
<q>, 45
<select>, 86
<span>, 47
<strong>, 47
<sub>, 46
<sup>,46
<table>, 72
<tbody>, 78
<td>, 72
<textarea>, 87
<tfoot>, 78
<th>, 72
<thead>, 78
<title>, 35, 330
<tr>, 72
<ul>, 50
atrybuty, 28, 30
grupowanie, 48
nazwy, 30
zagniedanie, 29
zamykanie, 29, 30
znaczniki amania, 42
znaki specjalne, 31

You might also like