IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

ABC tworzenia stron

WWW. Wydanie II
Autor: Bartosz Danowski
ISBN: 83-246-0605-X
Format: B5, stron: 296

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Poznaj najnowsze metody projektowania stron WWW

Dzi posiadanie wasnej witryny WWW nie jest ju wycznie domen przedsibiorstw
promujcych w ten sposb swoj ofert. Coraz wicej uytkownikw sieci prezentuje na
wasnych stronach WWW wykonane przez siebie fotografie, relacje z wakacji, pierwsze
wasnorcznie napisane programy i wiele innych rzeczy. Firmy oferujce bezpatnie
miejsce na strony WWW udostpniaj rwnie gotowe szablony takich stron, ktre
wystarczy wypeni treci. Jednak na pewno wiksz satysfakcj przyniesie
samodzielne stworzenie witryny WWW.
ABC tworzenia stron WWW. Wydanie II to kolejne wydanie wietnego podrcznika
przedstawiajcego zagadnienia zwizane z projektowaniem witryn internetowych.
Dziki tej ksice, zaktualizowanej zgodnie z najnowszymi standardami sieciowymi,
poznasz jzyk XHTML i najnowsz specyfikacj kaskadowych arkuszy stylw.
Nauczysz si tworzy dokumenty skadajce si na witryn WWW, wstawia do nich
elementy graficzne i mechanizmy nawigacyjne. Dowiesz si, jak opublikowa witryn
na serwerze internetowym, i poznasz sposoby jej optymalizacji i pozycjonowania tak,
aby bya prawidowo rozpoznawana przez najwaniejsze wyszukiwarki, takie jak Google.
W ksice znajdziesz rwnie zestawienie wszystkich atrybutw stylw CSS.
Narzdzia do tworzenia stron WWW
Struktura dokumentu HTML
Umieszczanie na stronie elementw graficznych
Hipercza
Formatowanie tekstu za pomoc kaskadowych arkuszy stylw
Przygotowywanie grafiki na strony WWW
Rejestracja domeny i publikacja strony
Pozycjonowanie witryny w wyszukiwarkach

Wstp ............................................................................. 7
1

Wprowadzenie ................................................................. 9
Niezbdne informacje o HTML, XHTML, CSS i nie tylko ............... 9
Narzdzia potrzebne do dalszej pracy ........................................... 12
Edytory tekstowe ...................................................................... 12
Edytory graficzne ..................................................................... 14
Programy do przygotowywania grafiki sieciowej ................... 14
Przegldarki stron WWW ......................................................... 15
Polskie litery na stronie WWW ...................................................... 17
Odbiorca strony .............................................................................. 18

Tworzymy stron WWW. Podstawy jzyka HTML ......... 21

Podstawy i struktura dokumentu .................................................. 22
Nagwek dokumentu .............................................................. 26
Ciao dokumentu ....................................................................... 32
Komentarze ............................................................................... 33
Prezentacja tekstu .......................................................................... 34
Nagwki ................................................................................... 34
Akapity ...................................................................................... 34
Cytaty ........................................................................................ 36
Indeks grny i dolny ................................................................. 37
amanie wierszy ....................................................................... 38
Wyrnianie tekstu ................................................................... 39
Twarda spacja ........................................................................... 40
Znacznik DIV ............................................................................. 40

ABC tworzenia stron WWW

Listy ................................................................................................ 40
Lista wypunktowana ................................................................ 41
Lista numerowana .................................................................... 42
Lista definicji ............................................................................ 43
Zagniedanie list ..................................................................... 43
Umieszczanie grafiki na stronie WWW ........................................ 45
Hipercza ....................................................................................... 49
Hipercza tekstowe ................................................................. 50
Hipercza graficzne ................................................................. 53
Mapy odsyaczy ........................................................................ 54
Kotwice ..................................................................................... 58
Adresy wzgldne i bezwzgldne .............................................. 60
Tabele .............................................................................................. 61
Proste tabele ............................................................................. 64
Wymiarowanie tabel ................................................................ 66
Tabele niesymetryczne ............................................................. 69
Zagniedanie tabel .................................................................. 71
Dodatkowe elementy tabeli ..................................................... 72
Formularze ..................................................................................... 83
Pola typu input ......................................................................... 84
Pole typu select ......................................................................... 86
Pole typu textarea .................................................................... 87
Przesyanie treci formularza .................................................. 87
Ramki .............................................................................................. 92

Modyfikujemy stron WWW CSS ...............................97

Rnice pomidzy formatowaniem
za pomoc XHTML/HTML i CSS ................................................. 98
Umieszczanie stylw w dokumencie ............................................ 99
Jednostki miar i nazewnictwo kolorw stosowane w CSS ........ 101
Jednostki wzgldne ................................................................ 101
Jednostki bezwzgldne .......................................................... 102
Nazewnictwo kolorw uywane w CSS ................................ 103
Budowa stylu ................................................................................ 105
Selektory ................................................................................. 107
Identyfikatory ......................................................................... 113
Klasy ........................................................................................ 114
Pseudoklasy ............................................................................ 116
Pseudoelementy ...................................................................... 120
Grupowanie selektorw ......................................................... 122
Dziedziczenie i kaskadowo to klucz do potgi CSS ................. 123
Formatowanie wygldu tekstu .................................................... 126
Wyrwnanie tekstu ................................................................ 127
Pionowe wyrwnanie ............................................................. 128
Wcicie pierwszego wiersza akapitu ..................................... 129
Odstpy wiersze, wyrazy, litery ........................................ 129
Dekoracja tekstu ..................................................................... 131
Mae i due litery .................................................................... 134
Kontrola pustej przestrzeni .................................................... 135

Spis treci

Formatowanie wygldu czcionki ................................................. 136

Rodzaj czcionki ....................................................................... 136
Rozmiar ................................................................................... 138
Waga czcionki ......................................................................... 141
Styl czcionki ............................................................................ 142
Formatowanie wygldu list ......................................................... 145
Typ listy .................................................................................. 145
Wasny punktor graficzny ...................................................... 146
Pozycjonowanie listy wzgldem punktora ............................ 147
Kolor i to poszczeglnych elementw ........................................ 148
Kolor ........................................................................................ 148
To ............................................................................................ 149
Powielanie i zatrzymanie ta .................................................. 150
Pozycjonowanie graficznego ta ............................................. 152
Marginesy i dopenienie ............................................................... 153
Marginesy zewntrzne ........................................................... 153
Marginesy wewntrzne dopenienie ................................. 155
Obramowanie elementw ............................................................ 157
Styl obramowania ................................................................... 158
Szeroko i kolor obramowania ............................................. 160
Pozycjonowanie elementw ......................................................... 165
Okrelanie pozycji ................................................................... 167
Wymiarowanie elementw .................................................... 167
Pywanie i tamowanie elementw ......................................... 170

Przygotowywanie grafiki na potrzeby publikacji

na stronie WWW ........................................................ 177
GIF ................................................................................................. 178
Transparentno kolor przezroczysty ............................... 180
Przeplot ................................................................................... 184
Animowany GIF ...................................................................... 185
Redukcja palety kolorw ........................................................ 189
JPG ................................................................................................ 190
PNG ............................................................................................... 193
Pozostae formaty publikacji grafiki na stronie WWW .............. 194
Sposoby redukcji rozmiaru zdj i grafiki ................................... 196
Antyaliasing .................................................................................. 198
Cicie grafiki na mniejsze elementy ............................................ 201
Mapa odsyaczy ............................................................................ 204
Skanowanie i obrbka obrazw na potrzeby strony WWW ...... 205
Skanowanie ............................................................................. 205
Obrbka skanu ........................................................................ 208

Publikacja i utrzymanie strony .................................... 213

Wybr serwera hosting ........................................................... 214
Zakadanie konta .......................................................................... 216
Publikacja strony .......................................................................... 219
Rejestracja domeny ...................................................................... 222

ABC tworzenia stron WWW

Pozycjonowanie i promocja strony ..................................227

Popularne sposoby promocji strony ............................................ 228
Podpis poczty elektronicznej ................................................. 228
Grupy dyskusyjne ................................................................... 228
Listy mailingowe .................................................................... 228
Inne formy promocji ............................................................... 229
Pozycjonowanie stron w wyszukiwarkach ................................. 229
Podstawy ................................................................................. 230
Prawidowa indeksacja strony ............................................... 232
Zdobywanie pozycji ................................................................ 238

Dodatek ..................................................................................243
Zestawienie waciwoci kaskadowych arkuszy stylw ............ 243
Waciwoci tekstu ................................................................. 243
Waciwoci czcionki ............................................................. 246
Waciwoci list ...................................................................... 248
Kolor i to ................................................................................ 249
Marginesy ............................................................................... 251
Dopenienie ............................................................................. 252
Obramowanie .......................................................................... 253
Wymiary elementw .............................................................. 254
Tabele ...................................................................................... 256
Pozycjonowanie elementw ................................................... 257
Efekty wizualne ...................................................................... 258
Drukowanie ............................................................................ 259
Interfejs uytkownika ............................................................ 261
Zawarto generowana i liczniki ........................................... 262
Zestawienie obsugi stylw przez przegldarki .......................... 263
Wczytywanie arkusza w zalenoci
od uywanej przegldarki ......................................................... 266
Zabezpieczanie strony hasem ..................................................... 268
Opis skryptu FormMail ................................................................ 270
Pola niezbdne do dziaania formularza
opartego na FormMail .......................................................... 270
Pola poszerzajce dziaanie formularza ................................ 271
Wasny licznik .............................................................................. 273

Podsumowanie ........................................................................277
Skorowidz ..............................................................................279

ady twrca strony chce, by po jej publikacji bya

ona oblegana przez tumy odwiedzajcych. Niestety,
w praktyce sprawa odwiedzin oraz popularnoci strony nie wyglda tak dobrze. Aby rozpropagowa swoj
witryn, musisz sign po wiele rozwiza i sztuczek,
ktre postanowiem opisa poniej w zwizej formie.

Jeeli interesuje Ci temat pozycjonowania

i optymalizacji stron WWW, odwied
moj stron i poszukaj tam stosownych
informacji i porad. W chwili gdy czytasz
te sowa, na ukoczeniu powinna by
dedykowana ksika na temat
pozycjonowania stron WWW
oraz optymalizacji kodu.

ABC tworzenia stron WWW

W niniejszym podrozdziale opisaem kilka prostych i popularnych sposobw promocji strony. Wikszo przedstawionych rozwiza nie wymaga specjalistycznej 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
odpowiedniej 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://danowski.pl ::
Jak walczy ze spam-em - http://danowski.pl/ksiazka/spam

W swoim przykadowym podpisie poza imieniem i nazwiskiem zamieciem adres

strony internetowej oraz reklam losowo wybranej ksiki.

Tworzc stopk poczty, musisz pamita o tym, by nie zawieraa

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.comp.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
grupach 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.
228

Pozycjonowanie i promocja strony

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 wrogoci odbiorcw, czsto bowiem okazuje si, e ich adresy e-mail trafiy
do takiej bazy bez ich wiedzy i zgody.

Zanim zdecydujesz si rozsya e-maile z reklamami Twojej

strony, koniecznie zapoznaj si z ksik Spam. Profilaktyka
i obrona http://danowski.pl/ksiazka/spam.
Dlatego skorzystaj z systemw do prowadzenia biuletynw informacyjnych i umoliw swoim czytelnikom dopisywanie swoich adresw do Twojej bazy. Dziki temu
unikniesz problemw zwizanych z posdzaniem o spamowanie.

Inne formy promocji

Do innych form promocji mona zaliczy zamieszczenie adresu strony na papierze
firmowym, wizytwkach, folderach reklamowych oraz w branowych magazynach.
Dziki temu o Twojej stronie dowiedz si ludzie, ktrzy s zainteresowani tym,
co robisz lub co oferujesz.

Zdecydowanie najlepszym sposobem na wzrost popularnoci Twojej strony jest

jej optymalizacja, przygotowanie do indeksacji przez wyszukiwarki oraz zdobywanie wysokich pozycji w wynikach wyszukiwania.

Porady zamieszczone poniej potraktuj jako wstp

do pozycjonowania stron WWW, gdy temat ten jest na tyle
obszerny, e wymaga osobnej i grubej ksiki. Nie zmienia
to faktu, e niektre rady tu zamieszczone s na tyle uniwersalne
i ponadczasowe, e ich stosowanie w niczym nie zaszkodzi,
a czsto przyniesie podany efekt w postaci dobrych miejsc
w wynikach wyszukiwania.

229

ABC tworzenia stron WWW

Podstawy
Na samym pocztku przeanalizuj tre swojej strony i na tej podstawie wybierz
kilka sw kluczowych. Powinny by to sowa lub frazy, ktre najlepiej oddaj
zawarto strony i s wykorzystywane przez ludzi szukajcych informacji w sieci.
Aby prawidowo wykona to zadanie, warto wczu si w rol osoby szukajcej,
a nie pozycjonujcej stron.
Analizujc zwarto mojej strony, doszedem do wniosku, e kada z podstron
omawiajcych 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. Wytypowane przeze mnie sowa kluczowe wypisaem poniej.
Nero,
Nagrywanie pyt,
Nero Burning 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 wpisanym sowa kluczowymi. Pamitaj, e oba elementy musz znajdowa
si w nagwku strony pomidzy znacznikami <head></head>.
<meta name="keywords" content="nero, nagrywanie pyt, nagrywanie plyt,
kopiowanie pyt, kopiowanie plyt, wypalanie pyt, wypalanie, pyty CD DVD " />
<meta name="description" content="Poznaj moliwoci pakietu Nero i naucz si
nagrywa pyty CD oraz DVD" />

Zwr uwag, e sowa kluczowe znacznik keywords rozdzielone s przecinkami, 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
wyszukiwarki 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 zachcony do bliszego zapoznania si z Twoj stron. Staraj si
w opisie wykorzystywa sowa kluczowe.

230

Pozycjonowanie i promocja strony

Nastpnym istotnym elementem jest tytu strony. Przypomn tylko, e jest on

tworzony za pomoc 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.
<title>Nero nagrywanie pyt 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
indeksowa 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.:
'index' strona powinna by zaindeksowana,
'noindex' strona nie powinna by zaindeksowana,
'follow' linki z tej strony powinny by zaindeksowane,
'nofollow' linki z tej strony nie powinny by zaindeksowane,
'all' rwna si 'index, follow' warto domylna,
'none' rwna si 'noindex, nofollow'.

Uwaga, wszystkie opisane w niniejszym podrozdziale znaczniki jzyka XHTML/

HTML 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 powinien 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,

Tekst powinien by napisany poprawn polszczyzn i w pierwszej kolejnoci

kierowany do osoby czytajcej, a dopiero pniej do robotw wyszukiwarek.

231

ABC tworzenia stron WWW

Staraj si uywa w treci strony nagwkw. Pamitaj, e nagwek H1

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. Wyrnienia

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
analizuje zawarto strony i wyniki swoich obserwacji przesya do bazy danych.
Robot po wypuszczeniu z klatki zaczyna swoj wdrwk po sieci i przemieszcza
si pomidzy 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
macierzystym jest powizany, ma szereg brakw i ogranicze, ktre musimy bra
pod uwag podczas tworzenia strony.
Zacznijmy od najwaniejszego ograniczenia. Ot wikszo robotw nie potrafi
analizowa stron wykorzystujcych technologi Adobe Flash (dawniej Macromedia
Flash) lub robi to nieudolnie. Efektem tych ogranicze moe by zerowa lub szcztkowa indeksacja Twojej strony.
W przypadku mojej strony domowej (starej wersji) boczne menu nawigacyjne
zostao wykonane za pomoc programu Adobe Flash rysunek 6.1, co zaowocowao w pierwszej 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
pozwoliem sobie szerzej opisa poniej.

232

Pozycjonowanie i promocja strony

Rysunek 6.1.

System nawigacji zbudowany w oparciu o Adobe Flash jest zym

rozwizaniem z punktu widzenia pozycjonowania stron

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 6.2.

Rysunek 6.2.

Dodatkowe tekstowe menu nawigacyjne wpywa na lepsz

indeksacj strony

Drugim rozwizaniem, ktre wymaga odrobin wicej zachodu, jest stworzenie

mapy strony. W praktyce taka mapa jest wykazem odnonikw do wszystkich
podstron serwisu. Rysunek 6.3 przedstawia przykadow map mojej strony
domowej.
Tworzc map strony, warto skorzysta z list wypunktowanych lub numerowanych, a gotow podstron bezwzgldnie naley podpi na gwnej strony serwisu
za pomoc tekstowego odnonika. Na przykadowej witrynie odnonik do mapy
strony znajdziesz w tekstowym menu nawigacyjnym, umieszczonym w stopce
rysunek 6.2.
Ostatnim i chyba najbardziej wymagajcym rozwizaniem jest zmiana systemu
nawigacji strony i zastpienie go lepszym oraz nowoczeniejszym rozwizaniem,
jakim s kaskadowe arkusze stylw. Na rysunku 6.4 wida alternatywne menu
nawigacyjne mojej strony domowej, wykonane za pomoc CSS.

233

ABC tworzenia stron WWW

Rysunek 6.3.

Mapa strony bardzo dobrze wpywa na lepsz indeksacj strony

Liczce si wyszukiwarki udostpniy specjalne narzdzie

do tworzenia map strony oraz zarzdzania nimi. Dziki temu
strony maj by jeszcze lepiej i dokadniej indeksowane.
Przykadem takiego rozwizania moe by Google Sitemap
http://www.google.com/webmasters/sitemaps.

Rysunek 6.4.

234

Za pomoc CSS mona stworzy rwnie atrakcyjne, a przy tym

funkcjonalne menu nawigacyjne

Pozycjonowanie i promocja strony

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 zmienia 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 prezentowanym 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">
<li><a href="#1" title="Strona gwna">Strona
gwna</a></li>
<li><a href="#2" title="Napisane
ksiki">Ksiki</a></li>
<li><a href="#3" title="Artykuy">Artykuy</a></li>
<li><a href="http://danowski.blogspot.com"
title="Blog">Blog</a></li>
<li><a href="#4" title="Wanie pisz">Wanie
pisz</a></li>
<li><a href="#5"
title="Uaktualnienia">Uaktualnienia</a></li>
<li><a href="#6" title="O mnie">O 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="Przyjazne strony">Ciekawe
strony</a></li>
<li><a href="#10" title="Kontakt">Kontakt</a></li>
</ul>
</div>

Arkusz stylw
ul#danowski
{
list-style: none;
margin: 0;
padding: 0;
}
#menu
{
width: 150px;
border-style: solid solid none solid;
border-color: #F4F4F4;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

235

ABC tworzenia stron WWW

#menu li a
{
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
outline-style: none;
}
#menu li a:link, #menu li a:visited
{
color: #404040;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
outline-style: none;
}
#menu li a:hover
{
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu li a:active
{
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}

Na rysunku 6.5 wida obrazek wykorzystany do stworzenia menu.

Rysunek 6.5.

Zmylna konstrukcja obrazka powoduje, e animacja menu jest 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 omawiajcej program Nero. Po otwarciu odpowiedniej podstrony pod opisem ksiki znajdziesz kilka kolejnych odnonikw do innych ksiek
na ten sam temat rysunek 6.6.

236

Pozycjonowanie i promocja strony

Rysunek 6.6.

Zadbaj o wzajemne powizania poszczeglnych stron

Tworzc system wzajemnych powiza, staraj si wykorzystywa w odsyaczach

sowa kluczowe wybrane do pozycjonowania strony.

Jeeli z jakich powodw dany odsyacz ma nie by analizowany

przez robota wyszukiwarki, mona skorzysta z atrybutu
rel="nofollow".
<a href=http://danowski.pl 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 szczeglnych przypadkach nawet po kilku miesicach.
Kontrola stopnia indeksacji witryny jest moliwa za pomoc specjalnych polece,
ktre moemy wpisa w okno wyszukiwarki. Na przykad w przypadku najpopularniejszej sieciowej wyszukiwarki Google, polecenie ma nastpujc posta:
site:http://danowski.pl

Bezporednio po poleceniu site: podajemy adres strony, ktra ma zosta sprawdzona. Rysunek 6.7 przedstawia przykadowe wyniki dla mojej strony domowej.

237

ABC tworzenia stron WWW

Rysunek 6.7.

Wynik dziaania polecenia site:

W chwili wykonywania testu ilo zindeksowanych stron w bazie Google wynosia 856. Biorc pod uwag, e cay serwis w starej wersji mia okoo 1000 podstron, jest to wynik bardzo dobry. Pamitaj o tym, e wyniki dla zapytania site:
nigdy nie pokazuj stu procent stanu faktycznego i kadego dnia mog by inne
to normalne.

Zdobywanie pozycji
Skoro kod strony zosta poprawiony a konstrukcja poszczeglnych podstron zoptymalizowana tak, by poprawnie bya analizowana i indeksowana przez roboty
wyszukiwarek, moemy zaj si zdobywaniem pozycji.
Ze wzgldu na pogldowy charakter tego opisu skupi si tutaj wycznie na wyszukiwarce 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
zadanego wyszukiwarce zwrci ona adres Twojej witryny na moliwie najwyszym miejscu. Osobicie uwaam, e zadowalajcym rezultatem jest pierwsza
podstrona wynikw.
Ostatnie miesice utwierdziy mnie w przekonaniu, e do zdobycia wysokiej lokaty
w wynikach wyszukiwania wystarczy odpowiednia liczba odsyaczy prowadzcych
do Twojej strony z innych witryn. Odnoniki takie musz mie nastpujc posta:

238

Pozycjonowanie i promocja strony

<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 alt=Nero title=Nero /></a>

Szczeglnie istotnym elementem odsyacza prowadzcego do Twojej strony jest

pozycjonowana fraza lub sowo kluczowe. Na pocztku zdecydowaem, e pozycjonowa bd stron ksiki o Nero, wic trudno o lepszy odnonik.
Waciwie w tym miejscu mog zakoczy swj wywd stwierdzeniem, e naley
zdobywa moliwie najwicej odnonikw prowadzcych do swojej 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 ma 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 uzyskane przez Ciebie
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 wiksz 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.
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,

nic Ci nie dadz. Zdarzaj si przypadki, gdy dodawanie zbyt duej iloci
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.

239

ABC tworzenia stron WWW

Jak widzisz, praca nad pozycj w duej mierze polega na zdobywaniu odnonikw
do Twojej 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 6.8.

Rysunek 6.8.

Przykad strony z odnonikami. Zasada jest prosta jeeli chcesz

u mnie adres swojej strony, umie u siebie odnonik do mnie.
Warto poda dokadny kod, dziki czemu masz gwarancj,
e wszystkie odwoania bd miay 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.
Pora na to, aby dowiedzie si, 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.
link:http://helion.pl

Na rysunku 6.9 wida wyniki, jakie Google pokazao dla powyszego zapytania.
Testowa strona posiada a 3520 odnonikw z innych witryn.

240

Pozycjonowanie i promocja strony

Rysunek 6.9.

Przykad dziaania zapytania link:

W tym miejscu pragn zwrci Twoj uwag na fakt, e odnoniki z innych witryn w poczeniu z dobrze zbudowan stron daj piorunujce wraenie. Przykadem takiej sytuacji moe by podstrona mojego serwisu powicona ksice
o Nero. Dla zapytania o treci nero pojawia si ona na pierwszej stronie wynikw
rysunek 6.10. Nieskromnie pochwal si tym, e dla tego sowa kluczowego
konkurencja jest bardzo dua i Google ma ok. 66 milionw wynikw.
Na koniec pragn napisa kilka sw o wskaniku PageRank, o ktrym wczeniej
wspominaem. 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 mimo 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. Dobrze 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 ilo odsyaczy prowadzcych
do Twojej strony. Dlatego jeeli bdziesz stosowa si do porad zamieszczonych
w niniejszym podrozdziale, masz szans na to, e wskanik ten zyska wiksz
warto ni domylne 0. Pamitaj jednak, e warto PageRank zmienia si stosunkowo rzadko i na aktualizacj trzeba czeka nawet kilka miesicy.
241

ABC tworzenia stron WWW

Rysunek 6.10.

Miejsce w pierwszej dziesitce dla popularnego sowa kluczowego

Warto wskanika PageRank moesz sprawdzi na kilka sposobw:

Strona http://www.optymalizacja.com/pagerank.php
Wtyczka dla przegldarki Mozilla Firefox o nazwie SearchStatus

http://www.quirk.biz/searchstatus.

242