You are on page 1of 22

Zosta webmasterem!

Autor: Pawe Wimmer


ISBN: 83-87211-85-0
Format: B5, stron: 280
Zawiera CD-ROM

SPIS TRECI

PRZYKADOWY ROZDZIA

Nie musisz pozosta na zawsze jedynie biernym uczestnikiem spoecznoci


internetowej.
Moesz zaistnie jako jej aktywny wsptwrca projektujc wasne witryny WWW
w jzyku HTML!
Wystawienie w Sieci stron WWW wymaga kilku czynnoci: ich napisania, sprawdzenia
poprawnoci i wysania na serwer. W podrczniku zaprezentowane wic zostan nie
tylko jzyk HTML, ale i rozmaite czynnoci i narzdzia webmasterskie.
Celem podrcznika jest zademonstrowanie caej procedury budowania serwisu WWW
i prezentowania go we waciwy sposb w Internecie. Jzyk HTML jest tylko
skadnikiem tej procedury -- bardzo wanym, ale nie jedynym. Takie praktyczne
podejcie wyrazi si zatem pokazaniem caej gamy dziaa i odpowiednich narzdzi.
Tak wic:
opiszemy jzyk HTML jako najwaniejszy budulec stron WWW
okrelimy podstawowy kanon czynnoci i narzdzi webmasterskich
przedstawimy szczeglnie wartociowe oprogramowanie, z uwzgldnieniem
potrzeb polskiego uytkownika
pokaemy praktyczne sposoby umieszczania witryny w Sieci
zamiecimy odpowiednie oprogramowanie na pycie, dziki czemu czytelnik
bdzie mg szybko przystpi do pracy

"
"
"
"
"

Dziki temu kompleksowemu podejciu czytelnik bdzie mg atwo pozna wszystkie


istotne elementy webmasterskiego puzzla. Nie bdzie te musia studiowa
najdrobniejszych szczegw jzyka, gdy nie s mu one na co dzie potrzebne.
Cay podrcznik jest podporzdkowany naczelnej zasadzie prostoty i praktycznoci.

Wstp ................................................................................................................................... 8
HTML w piguce............................................................................................................... 10
Czym jest dokument HTML?......................................................................................... 10
Ramy dokumentu ........................................................................................................... 11
Ciao dokumentu ............................................................................................................ 12
Tytuy ................................................................................................................................ 12
Akapity.............................................................................................................................. 13
Wiersze.............................................................................................................................. 14
Pozioma linia..................................................................................................................... 15
Grafika............................................................................................................................... 15
Wykazy ............................................................................................................................. 16
Atrybuty czcionki.............................................................................................................. 17
Wielko i kolor czcionki ................................................................................................. 18
Odsyacze .......................................................................................................................... 20
Cz nagwkowa dokumentu...................................................................................... 21
Tytu strony ....................................................................................................................... 22
Strona kodowa dokumentu ............................................................................................... 22
Struktura witryny ........................................................................................................... 23
Problem schykowych znacznikw ................................................................................ 23
Koniec wieczy dzieo ................................................................................................... 25
Struktura dokumentu....................................................................................................... 26
HTML a sprawa polska.................................................................................................. 26
Podstawowe elementy dokumentu ................................................................................. 27
Wicej szczegw o Head ............................................................................................ 28
Wicej szczegw o Body ............................................................................................ 32
Kilka uwag o wlewaniu tekstu.......................................................................................... 34
Czcionki ............................................................................................................................. 35
Znaczniki fizyczne atrybuty ........................................................................................ 36
Znaczniki logiczne style.............................................................................................. 37
Kolory czcionki.............................................................................................................. 37
Wielko czcionki .......................................................................................................... 38
Zmiana kroju czcionki.................................................................................................... 39
Elementy blokowe............................................................................................................. 44
Specyfika bloku.............................................................................................................. 44
Wyrwnywanie blokw ................................................................................................. 45
Przeamanie wiersza i parametr clear............................................................................. 47
Pozioma linia.................................................................................................................. 48
Blok preformatowany..................................................................................................... 50
Blok cytowany ............................................................................................................... 51
Cytat w wierszu.............................................................................................................. 51
Adres .............................................................................................................................. 52
rodkowanie................................................................................................................... 53
Komentarz...................................................................................................................... 53
Wycinek dokumentu Div ............................................................................................... 53
Wycinek dokumentu Span ............................................................................................. 54
Obramowanie Fieldset ................................................................................................... 55
Wykazy .............................................................................................................................. 56
Wykaz nieuporzdkowany ............................................................................................. 56

Wykaz uporzdkowany.................................................................................................. 58
Lista definicji ................................................................................................................. 61
Odsyacze........................................................................................................................... 62
Istota odsyaczy.............................................................................................................. 62
Odsyacze do etykiet ...................................................................................................... 63
Odsyacze do stron ......................................................................................................... 64
Odsyacze do innych witryn........................................................................................... 65
Odsyacze absolutne i wzgldne .................................................................................... 66
cieki dostpu .............................................................................................................. 66
Odwoania do innych dokumentw................................................................................ 68
Publikacje elektroniczne w formacie Adobe PDF ............................................................ 70
Odsyacze do poczty elektronicznej............................................................................... 71
Odsyacze do innych usug sieciowych.......................................................................... 75
Odsyacze do ramek ....................................................................................................... 78
Mapy odsyaczy na obrazkach ....................................................................................... 78
Grafika............................................................................................................................... 81
Uwagi oglne ................................................................................................................. 81
Wstawianie grafiki do dokumentu ................................................................................. 81
Ikona przy adresie .......................................................................................................... 91
Multimedia ........................................................................................................................ 93
Stare sposoby zagniedania multimediw.................................................................... 93
Plik RealAudio lub RealMedia ......................................................................................... 94
Plik Macromedia Flash ..................................................................................................... 95
Plik Apple QuickTime ...................................................................................................... 96
Nowe sposoby zagniedania multimediw .................................................................. 96
Flash .................................................................................................................................. 98
QuickTime ........................................................................................................................ 98
RealMedia ......................................................................................................................... 99
Tabele............................................................................................................................... 100
Szkielet tabeli............................................................................................................... 100
Obramowanie ............................................................................................................... 101
Pozycjonowanie tabeli i jej zawartoci ........................................................................ 103
Kolory tabeli ................................................................................................................ 106
Podpisy i nagwki kolumn.......................................................................................... 108
czenie komrek i zagniedanie tabel...................................................................... 110
Nagwek, ciao i stopka tabeli .................................................................................... 112
Sterowanie obramowaniem .......................................................................................... 113
Grupy kolumn .............................................................................................................. 118
Ramki............................................................................................................................... 120
Oglna struktura strony................................................................................................ 120
Informacje o Frameset.................................................................................................. 123
Informacje o Frame ...................................................................................................... 124
Odsyacze ..................................................................................................................... 125
Urozmaicenia ............................................................................................................... 126
Ramki w kolumnach i wierszach ................................................................................. 129
Informacje o Noframes ................................................................................................ 131

Pywajce ramki ............................................................................................................. 133


Podstawowa definicja................................................................................................... 133
Urozmaicenia ............................................................................................................... 134
Polecenie Object .......................................................................................................... 136
Formularze ...................................................................................................................... 140
Oglne informacje........................................................................................................ 140
Ramy formularza.......................................................................................................... 141
Rodzaje pl formularza ................................................................................................ 142
Pola Input ..................................................................................................................... 143
Typ Text .......................................................................................................................... 143
Typ Checkbox ................................................................................................................. 144
Typ Radio........................................................................................................................ 145
Typ Submit i Reset.......................................................................................................... 146
Pola Select.................................................................................................................... 147
Pole Textarea................................................................................................................ 149
Podsumowanie ............................................................................................................. 151
Przykad zbiorczy:........................................................................................................... 151
Znaki specjalne ............................................................................................................... 155
Kolory .............................................................................................................................. 157
Style.................................................................................................................................. 158
Czym jest styl? ............................................................................................................. 158
Budowa stylu................................................................................................................ 159
Wstawianie stylw ....................................................................................................... 160
Kaskadowo stylw.................................................................................................... 163
Klasy selektorw.......................................................................................................... 164
Wasnoci czcionek...................................................................................................... 165
Wasnoci tekstu .......................................................................................................... 169
Kolor i to ..................................................................................................................... 172
Marginesy..................................................................................................................... 175
Obramowania ............................................................................................................... 177
Wykazy ........................................................................................................................ 180
Suwaki.......................................................................................................................... 184
Kursory ........................................................................................................................ 187
Drukowanie.................................................................................................................. 188
Jednostki miary ............................................................................................................ 191
Selektory pseudoklas.................................................................................................... 192
Selektory pseudoelementow......................................................................................... 193
Znacznik Div................................................................................................................ 195
Znacznik Span.............................................................................................................. 196
Znacznik @import ....................................................................................................... 196
Narzdzia webmasterskie............................................................................................... 198
Kanon narzdzi ............................................................................................................ 198
Polskie litery ................................................................................................................ 200
Edytory HTML ............................................................................................................ 202
WebPager Express .......................................................................................................... 203
ezHTML.......................................................................................................................... 204
Website Pro ..................................................................................................................... 205

Porwnanie edytorw ..................................................................................................... 206


Style ............................................................................................................................. 210
TopStyle Lite................................................................................................................... 210
Edytory nagwkw ..................................................................................................... 211
MetaWizard..................................................................................................................... 211
Metty ............................................................................................................................... 212
Edytory kolorw dokumentu........................................................................................ 213
HTMLcolor ..................................................................................................................... 213
ColorDetector.................................................................................................................. 214
Cicie i mapowanie grafiki .......................................................................................... 215
Map This! ........................................................................................................................ 215
MapMakerPro LITE........................................................................................................ 216
GeoHTML....................................................................................................................... 217
CoffeeCup Free Viewer Plus .......................................................................................... 218
Sprawdzanie poprawnoci kodu................................................................................... 219
CSE HTML Validator Lite ............................................................................................. 220
TagCheck ........................................................................................................................ 221
Sprawdzanie poprawnoci odsyaczy........................................................................... 222
CheckURL ...................................................................................................................... 222
Xenu Link Sleuth ............................................................................................................ 223
LinkProver ...................................................................................................................... 224
Tworzenie grafiki ......................................................................................................... 224
IrfanView ........................................................................................................................ 226
PhotoPlus ........................................................................................................................ 227
Flash ............................................................................................................................. 228
FlashToolSet ................................................................................................................... 229
Pobieranie grafik z Internetu ........................................................................................ 230
Aaron's WebVacuum ...................................................................................................... 231
Katalogowanie grafik ................................................................................................... 232
FotoAlbum ...................................................................................................................... 232
Tworzenie dwiku ...................................................................................................... 233
Audacity .......................................................................................................................... 234
dbPoweramp.................................................................................................................... 234
Zakadanie witryny i wysyanie stron .......................................................................... 236
Onet.pl............................................................................................................................. 236
Wirtualna Polska ............................................................................................................. 241
Inne techniki wysyania stron....................................................................................... 244
SendToFTP ..................................................................................................................... 244
Web Publishing Wizard .................................................................................................. 246
FTPEdit ........................................................................................................................... 247
Wasny serwer WWW.................................................................................................. 248
Promocja stron ............................................................................................................. 248
MrKrax URL Submitter .................................................................................................. 248
Etykieta webmastera ...................................................................................................... 250

Podstawowe przykazanie webmastera ......................................................................... 250


Uwagi ideologiczne .................................................................................................. 251
Uwagi techniczne ......................................................................................................... 252
I co dalej? ........................................................................................................................ 255
Spis ilustracji................................................................................................................... 261
Skorowidz ........................................................................................................................ 269

Dobrym zwyczajem, spotykanym czsto w podrcznikach dla pocztkujcych, jest przedstawienie opisywanych zagadnie w postaci krtkiego szkicu, ktry da pogld na cao
problematyki. W biecym rozdziale zaprezentujemy wic podstawowe informacje o budowaniu dokumentu HTML. Po uwanym przestudiowaniu treci tego rozdziau, co zajmie niewiele czasu, kady bdzie potrafi sporzdzi prosty dokument, a nawet nazwa si
webmasterem.
Pozostae rozdziay bd stanowiy rozwinicie tematyki. Warto je przeczyta po opanowaniu i przewiczeniu informacji zawartych w tym rozdziale. Okae si, e ich zrozumienie nie nastrczy wikszych trudnoci, gdy bd logicznie wynikay z tego zasobu wiedzy, ktry czytelnik pozna w pierwszym rozdziale.
Bierzmy si zatem do pracy.

Czym jest dokument HTML?


Dokument HTML jest zwykym plikiem tekstowym. Mona go redagowa w najprostszym edytorze tekstw nawet tak prostym, jak znany wszystkim Notatnik w Windows.
Oczywicie, programici wymylili specjalne edytory, ktre znakomicie uatwiaj redagowanie takich dokumentw, ale warto w tym miejscu podkreli, e dokument HTML
nie jest czym tajemniczym i niezrozumiaym.
Zauwamy od razu, e plik z dokumentem ma charakterystyczne rozszerzenie .htm lub
.html. To wiedz chyba wszyscy. Gdy klikniemy podwjnie na takim pliku, od razu zgosi
si domylna przegldarka internetowa (np. Internet Explorer) i wczyta plik, prezentujc
jego zawarto na ekranie.
I w tym miejscu naley wyranie powiedzie, e dokument HTML tworzony w edytorze
oraz to, co zobaczymy w przegldarce, s cile ze sob powizane, jak awers i rewers tej
samej monety. Wynika to std, e dokument zawiera specjalne znaczniki, ktre s interpretowane przez przegldark. Inaczej mwic, znaczniki s poleceniami dla przegldarki,
aby poszczeglne fragmenty dokumentu wywietlia w nakazany sposb. Redagowany
przez nas dokument jest rdem, ktre ulega przetworzeniu przez przegldark.
Przykadowo, znacznik <b> powie przegldarce, aby tekst nastpujcy po nim wywietlia
w pogrubieniu (b=bold). Znacznik <p> nakae przegldarce wywietli nastpujcy po
nim tekst, jako kolejny akapit (p=paragraph).

Rysunek 1 - Przykad tekstu pogrubionego i akapitu

Wszystkie znaczniki tworz jzyk HTML. Zostay one skodyfikowane przez jedn z najwaniejszych instytucji wspczesnego wiata World Wide Web Consortium
(http://www.w3.org). To grupa pracujcych spoecznie specjalistw, ktrzy w drodze dyskusji wypracowali obowizujcy standard jzyka HTML.
Jak wic wida, trzeba si nauczy kilkunastu czy kilkudziesiciu znacznikw, aby mona
byo budowa strony internetowe. Powiedzmy wicej nie trzeba si ich wcale uczy na
pami. Wystarczy je rozumie, a wyspecjalizowany edytor HTML uatwi nam ich wstawianie. Nie trzeba bdzie robi tego rcznie.
Na pocztku polecamy jednak uywanie Notatnika (czy jakiekolwiek innego edytora,
ktry potrafi zapisywa pliki jako zwyky tekst) i wstawianie znacznikw rcznie. To
znakomite wiczenie, ktre pozwoli lepiej wyczu istot znacznikw.

WANE: w osobnym rozdziale powiemy wicej o narzdziach webmastera. Okazuje


si, e w Sieci istnieje mnstwo darmowych programw, ktre pozwol nam tworzy
wszystkie niezbdne elementy strony WWW, nie wydajc na to ani grosza. Wiele narzdzi zamiecilimy na pycie CD doczonej do podrcznika.

Ramy dokumentu
Jak powiedzielimy, polecenie (znacznik, tag) HTML jest specjalnym cigiem znakw
objtym nawiasami ostrymi. Gdybymy, na przykad, chcieli zaznaczy jaki fragment
tekstu jako tytu, moglibymy obj go poleceniem <h1>tre tytuu</h1>. Wielko liter jest obojtna - znaczniki wpisane maymi i wielkimi literami s interpretowane
w ten sam sposb. Staranniej wykonane edytory HTML pozwalaj nawet zdefiniowa, czy
polecenia HTML bd wpisywane maymi, czy wielkimi literami. Polecamy stosowanie
maych liter.
Polecenia powinny si znale w pewnych standardowych ramach. Zostao przyjte, e
dokument HTML zawiera szkielet, ktry stanowi osnow dla wszystkich innych polece.
Spotyka si wprawdzie w Internecie strony, ktre szkieletu nie zawieraj (czasem tylko
jego cz), ale odradzamy tak praktyk, gdy w pewnych okolicznociach moe ona
zaowocowa niespodziewanymi efektami.

Cay dokument powinien by objty par znacznikw <html> </html>. Midzy nimi
powinna za si znale para znacznikw <head> </head>, ktra stanowi ramy dla
informacji nagwkowych. Pozostae informacje powinny by objte z kolei znacznikami
<body> </body>. Wyglda to nastpujco:
<html>
<head>
informacje nagwkowe
</head>
<body>
waciwa tre (ciao) dokumentu
</body>
</html>
Tak wanie wyglda dokument z lotu ptaka. Wszystkie te zadziwiajce rzeczy, ktre
widzimy na wielu stronach w Internecie, s umieszczane wanie w tych ramach. Przyjrzyjmy im si nieco bliej.

Ciao dokumentu
Dla czytelnika naszej strony najwaniejsze jest oczywicie ciao dokumentu, gdy zawiera
ono to wszystko, co zobaczymy w przegldarce. Umiecimy w nim tekst podzielony na
akapity, rdtytuy, tabele, obrazki, muzyk wszystko, co nam tylko przyjdzie do gowy
i na co pozwoli jzyk HTML. Poszczeglne elementy s umieszczane midzy znacznikami
<body> </body>.

Tytuy
Mianem tytuw okrelamy specjalnie wyrnione akapity, ktre nazywaj w jaki sposb
pewne fragmenty tekstu. Niektrzy uywaj okrelenia nagwki, inni mwi
rdtytuy, a sens jest taki sam. Na potrzeby naszego podrcznika przyjmijmy okrelenie
tytuy. Maj one rny stopie, od 1 do 6.
Aby wstawi tytu stopnia pierwszego (najwyszy w hierarchii), naley poda polecenie:
<h1>Tre tytuu</h1>
Widzimy od razu, e <h1> rozpoczyna oznaczanie tekstu jako tytuu pierwszego stopnia,
natomiast </h1> koczy. Wikszo znacznikw ma tak wanie konstrukcj. Zwrmy
uwag na ukonik wskazujcy zamknicie znacznika.
Analogicznie, tytuy niszych stopni tworzymy za pomoc h2, h3 itd.

I przykad:

Rysunek 2 - Tytuy szeciu stopni

Jak atwo zauway, tytuy s doskonaym narzdziem do rozdzielania logicznych fragmentw tekstu i hierarchizowania ich. Zachodzi tutaj pena analogia z ksikami, gdzie
spotykamy rozmaite stopnie rdtytuw, pozwalajce wydzieli bloki tekstu i pokaza
logik caej pracy.

Akapity
Tytuy s nazwami fragmentw tekstu, ale najwaniejsze s oczywicie akapity, gdy to
wanie w nich zawarta jest gwna tre naszego dokumentu.
Take i tutaj stosujemy znacznik wskazujcy otwarcie akapitu i jego zamknicie:
<p>Tre akapitu</p>
Zobaczmy ponownie, jak wygldaj akapity w przegldarce.

Rysunek 3 - Tytu i dwa akapity

Jak wida, oddzielne akapity s automatycznie rozdzielane. Co wicej, odlego midzy


nimi jest nieco wiksza ni midzy wierszami w ramach jednego akapitu. Przegldarka
zinterpretowaa tu w odpowiedni sposb nastpujcy kod:
<h1>Tytu stopnia pierwszego</h1>
<p>pierwszy akapit pierwszy akapit pierwszy akapit pierwszy
akapit pierwszy akapit pierwszy akapit pierwszy akapit
pierwszy akapit pierwszy akapit pierwszy akapit pierwszy
akapit pierwszy akapit pierwszy akapit pierwszy akapit
pierwszy akapit pierwszy akapit </p>
<p>drugi akapit drugi akapit drugi akapit drugi akapit drugi
akapit drugi akapit drugi akapit drugi akapit drugi akapit
drugi akapit drugi akapit drugi akapit drugi akapit drugi
akapit drugi akapit drugi akapit drugi akapit drugi akapit
drugi akapit drugi akapit </p>

Wiersze
Niekiedy zdarza si, e chcemy przeama tekst, nie wprowadzajc przy tym znaku koca
akapitu. Moemy wwczas zastosowa pojedyncze polecenie <br>, ktre przenosi tekst
o jeden wiersz w d, cho nie wprowadza dodatkowej interlinii. Nie stosuje si tutaj
znacznika zamykajcego.
To
To
To
To

jest
jest
jest
jest

pierwszy wiersz<BR>
drugi wiersz<BR>
trzeci wiersz<BR>
czwarty wiersz<BR>

Ilustracja pokae rnic midzy odstpami tworzonymi przez akapity i odstpami tworzonymi przez znaczniki przeamania wiersza.

Rysunek 4 - Przeamanie wiersza

Ponadto polecenie <br> ma jeszcze jedn zalet. Napisanie kilku kolejnych <br> pozwala zwikszy pionowy odstp midzy elementami.

Pozioma linia
Nastpnym, czsto spotykanym elementem jest pozioma linia, ktr wstawiamy za pomoc polecenia <hr> (ang. horizontal rule). Pozwala ono wywietli w dokumencie poziom
lini, na szeroko caej strony, rozdzielajc ni logiczne fragmenty tekstu, dziki czemu
strona jest bardziej przejrzysta. Ilustracja pokazuje oddzielenie tekstu od innych za pomoc dwch poziomych linii.

Rysunek 5 - Poziome linie

Grafika
Nie sposb wyobrazi sobie stron WWW bez grafiki. Moe to by zwyky ozdobnik, ale
take np. rodzinne zdjcia, obrazki z wakacji, domowe zwierzaki czy cokolwiek innego.
Coraz popularniejsze s cyfrowe aparaty fotograficzne, z ktrych moemy bezporednio
pobiera obrazki w internetowych formatach. Moemy te skanowa zwyke zdjcia za
pomoc skanera. Ponadto w Internecie znajdziemy ogromne zasoby darmowych grafik,
ktre moemy wykorzysta na swoich stronach (obszern list adresw znajdzie Czytelnik
na pycie CD).
W dokumentach HTML moemy umieszcza grafiki zapisane w formatach GIF, JPG lub
PNG. Szczeglnie popularne s te dwa pierwsze formaty. Aby w przegldarce pojawi si
obrazek, naley wpisa polecenie:
<img src=nazwa_obrazka>
Dla przykadu, wstawmy do dokumentu polecenie, ktre wywietli zdjcie zrobione doranie domowemu kotu za pomoc aparatu cyfrowego.

<img src=kot.jpg>

IMG oznacza image (obrazek), SRC to source (rdo), kot.jpg to oczywicie nazwa
pliku z obrazkiem. Plik ten powinien by umieszczony w katalogu razem z dokumentem
HTML. Dokument wywietlany w przegldarce odwouje si do tego pliku i przywouje
zawarto we wskazanym miejscu.

Rysunek 6 - Ilustracja na stronie WWW

Wykazy
Na stronach WWW powszechnie stosuje si wykazy (zwane te listami). S to po prostu
systematyczne wyliczenia jakich punktw, ktre w przeciwiestwie do tekstu o charakterze opisowym w skondensowany sposb prezentuj jak myl czy zesp zagadnie.
Uytkownicy edytorw tekstw spotykaj si z tym elementem - np. w polskiej wersji
edytora Word s one znane pod nazw list numerowanych i list wypunktowanych.
Aby utworzy szkielet wykazu nieuporzdkowanego, naley uy polecenia <ul>
</ul> (ang. unordered list). W ramach szkieletu znajd si poszczeglne punkty wykazu,
ktre wprowadzamy za pomoc polecenia <li>.
<p>aby wygra wojn, naley mie:<p>
<ul>
<li>po pierwsze, pienidze</li>
<li> po drugie, pienidze</li>
<li> po trzecie, pienidze</li>
</ul>
W efekcie uzyskamy:

Rysunek 7 - Wykaz nieuporzdkowany

Jest w zasadzie obojtne, czy uyjemy pojedynczego znacznika <li>, czy te zastosujemy dodatkowo znacznik zamykajcy </li>. Autorzy edytorw HTML stosuj rne
konwencje, a wynik w przegldarce WWW w obu przypadkach jest identyczny. Generalnie jednak zaleca si zamykanie znacznikw.
Gdy chcemy utworzy wykaz uporzdkowany, wwczas zamiast <ul> i </ul> moemy
zastosowa <ol> i </ol> (ang. ordered list). Uzyskamy wwczas list numerowan za
pomoc liczebnikw arabskich (w dalszej czci podrcznika pokaemy inne sposoby
numerowania).

Rysunek 8 - Wykaz uporzdkowany

Atrybuty czcionki
Aby tekst w przegldarce nie wyglda wszdzie tak samo, stosuje si dodatkowe atrybuty
czcionki - pogrubienie (bold), pochylenie (italic) i podkrelenie (underlined). Atrybuty
pozwalaj uwypukli jakie fragmenty tekstu, np. nazwy za pomoc kursywy, a waniejsze pojcia za pomoc pogrubienia:
To jest tekst normalny
<B>To jest tekst pogrubiony (bold)</B>
<I>To jest tekst pochylony (italic, kursywa)</I>
<U>To jest tekst podkrelony (underlined)</U>
Efekt dziaania tych polece:

Rysunek 9 - Podstawowe atrybuty czcionki

Wielko i kolor czcionki


Gdyby autorowi strony znudzi si tekst, w ktrym czcionka ma ten sam kolor i wielko,
zawsze moe si posuy dodatkowymi poleceniami, zmieniajcymi obie cechy. W dokumentach HTML stosuje si nieco inn definicj wielkoci czcionki, ni przyjta w edytorach tekstw. Podstawowa czcionka ma wielko 3 jednostek (nie myli z wielkoci
w punktach typograficznych) i jest zazwyczaj wywietlana w przegldarkach WWW jako
czcionka 10-12-punktowa. Przegldarki pozwalaj na og zdefiniowa, jaka warto
punktowa odpowiada czcionce o wielkoci 3. W dokumencie moemy stosowa czcionk
o wielkoci od 1 do 7. Im wiksza warto, tym wiksza czcionka w przegldarce.

Uwaga: Wielkoci czcionki w przegldarce WWW nie naley utosamia z wielkoci


czcionki, za pomoc ktrej redagujemy tekst w edytorze HTML! Czcionka w edytorze
nie ma adnego znaczenia dla postaci strony WWW. Moemy na przykad posugiwa
si czcionk System, a i tak w przegldarce pojawi si czcionki, ktre definiuje sam
dokument lub przegldarka.
<font size="x">tekst objty definicj</font>
x = 1...7
Widok w przegldarce:

Rysunek 10 - Czcionki o rnej wielkoci

W ten sposb moemy manipulowa wysokoci czcionki w tekcie, uwypuklajc jakie


fragmenty. Jest to wygodne, gdy moemy zmieni wielko czcionki wewntrz akapitu,
do czego nie nadaje si znacznik tytuu.
W analogiczny sposb moemy zmienia kolor czcionki. Posugujemy si tutaj poleceniem:
<font color="kolor">tekst objty poleceniem</font>
Kolory moemy definiowa w postaci tradycyjnej, a wic za pomoc wartoci szesnastkowych (np. kolor biay ma warto #FFFFFF, a czarny #000000), albo za pomoc ich
nazw. Wszystkie popularne przegldarki akceptuj wartoci heksadecymalne (w formacie
RRGGBB, gdzie RR - skadowa czerwona, GG - skadowa zielona, BB - skadowa niebieska), aczkolwiek ich wprowadzanie wymaga wspomagania w edytorze HTML. Niektre
z edytorw pozwalaj wybra barw za pomoc suwakw i wstawiaj odpowiedni kod do
edytora.
Internet Explorer i Netscape Navigator interpretuj rwnie nazwy kolorw. Pocztkowo
mona byo si posuy jedn z 16 barw, potem paleta rozszerzya si do 256 kolorw.
Najczciej jednak, przy definiowaniu koloru tekstu wystarczy 16 barw i mona przyj,
e posugiwanie si nazwami kolorw jest najwygodniejsz metod ich definiowania.
Oto lista szesnastu podstawowych barw ich nazwy wpisujemy w miejsce kolor.
black
maroon
green
navy

silver
red
lime
blue

gray
purple
olive
teal

white
fuchsia
yellow
aqua

Ich reprezentacja w przegldarce internetowej (w czarno-biaej ksice tego nie wida, ale
na pycie CD znajduje si przegld kolorw):

Rysunek 11 - szesnacie podstawowych kolorw

Odsyacze
Charakterystyczn cech Internetu jest obecno na stronach hipertekstowych odsyaczy
do innych stron, ktre znajduj si w wiatowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzie, gdzie znajduj si te strony - wane jest, aby mia do nich
atwy dostp. Na tym polega istota hipertekstu - jaki temat moe by opisany za pomoc
stron tworzonych przez rnych autorw, mieszkajcych w rnych krajach, nawet czsto
nie znajcych si wzajemnie. Gdy na zbudowanych przez nich stronach znajd si odsyacze, ich wsplne zainteresowania zostan zjednoczone za pomoc hipertekstu, ktry poczy te strony w jedn logiczn cao. Czytelnik jakiego dokumentu bdzie, po prostu za
pomoc klikni myszk na odsyaczach, przenosi si do rnych miejsc w Internecie,
skaczc np. z Polski do Japonii, z Japonii do USA, a stamtd do Francji. Z jego punktu
widzenia jest zupenie obojtne, gdzie strony si znajduj. Dla niego wany jest atwy
dostp do informacji.
W tym miejscu przedstawimy dwa szczeglnie wane odsyacze: odsyacze do innych
stron WWW i odsyacz uruchamiajcy poczt elektroniczn. S one bowiem najpowszechniej stosowane.
Odsyacz do innej strony jest tworzony za pomoc polecenia:
<a href="adres_strony_internetowej">Nazwa tej strony</a>
Przykadowy adres mgby wyglda nastpujco:
<a href="http://www.onet.pl">Portal Onet.pl</a>

Rysunek 12 - Typowy widok odsyacza internetowego

Ukonik (slash) na kocu adresu wymusza wczytanie strony domylnej, zazwyczaj o nazwie index.html (lub index.htm - zaley to od typu serwera WWW).

Uwaga: zalecamy nadawanie stronie gwnej serwisu nazwy index.htm lub index.html.
Jest to powszechnie przyjta praktyka w Internecie. W ostatnich latach stosuje si
take niekiedy default.htm lub default.html.
Na ekranie przegldarki wywietlany jest tekst, ktry znajduje si midzy znacznikami
<a href="... "> i </a>. Jest on domylnie wywietlany na niebiesko z podkreleniem (moemy to jednak zmieni). Gdy przesuniemy kursor myszki nad odsyacz,
w pasku stanu przegldarki zobaczymy kryjcy si pod tekstem adres internetowy.
Kliknicie na nim spowoduje skok do strony.
Zwrmy uwag na to, e adres internetowy jest podawany w cudzysowie. Dla dziaania
odsyacza nie jest to wprawdzie absolutnie konieczne, ale wymaga tego formalna poprawno skadni.
Drugim wanym odsyaczem jest adres poczty elektronicznej. Bardzo czsto autorzy stron,
ktrzy przecie dysponuj zazwyczaj swoim wasnym adresem, wstawiaj go na stronie,
proszc o uwagi czytelnika. Jest to dobry obyczaj, ktry daje czytelnikowi atwy kontakt
z autorem.
Stosujemy tutaj na przykad nastpujce polecenie:
<A HREF="mailto:autor@jego.adres">Imi i nazwisko</A>
Na przykad:
<A HREF="mailto:prwimmer@poczta.onet.pl">Pawe Wimmer</A>
Napis mailto daje sygna przegldarce WWW, e ma uruchomi poczt elektroniczn.
Navigator wywoa swj wasny modu pocztowy Mail, Internet Explorer za wywoa
Outlook Express (albo Outlook z pakietu MS Office, jeli jest on domylnym programem
pocztowym). Take i tutaj konsekwentnie stosujmy cudzysw w adresie. Fragment
w postaci:
Jeli masz jakie uwagi, napisz do <A HREF="mailto:
prwimmer@poczta.onet.pl">autora strony</A>
zostanie przedstawiony w przegldarce nastpujco:

Rysunek 13 - Przykad adresu poczty elektronicznej

Przesunicie kursora myszki nad tekst "autora strony" wywietli w pasku stanu adres
poczty elektronicznej, natomiast kliknicie myszk spowoduje uruchomienie moduu
pocztowego, w ktrym czytelnik strony bdzie mg zredagowa list do autora.

Cz nagwkowa dokumentu
W czci nagwkowej dokumentu mona umieci rozmaite informacje opisowe decydujce, jak nasza strona bdzie wywietlana, a take jak bd j postrzega sieciowe wyszukiwarki. Powiemy na ten temat wicej w innym rozdziale, a ju teraz zwrcimy uwag
na te elementy, ktre przydadz si pocztkujcemu uytkownikowi.

Tytu strony
Gdy otwieramy jak stron w przegldarce, w belce tytuowej widzimy zazwyczaj jej
tytu, np. Strona Jana Kowalskiego. Nie wolno zapomina o tym elemencie, gdy peni
on istotn rol informacyjn. Gdybymy o nim zapomnieli, w tym miejscu ukae si jedynie nazwa fizycznego pliku i jego adres (na dysku lub w Internecie). W czci nagwkowej Head wstawiaj wic zawsze tytu, na przykad:
<head>
<title>Strona Jana Kowalskiego</title>
</head>

Rysunek 14 - Tytu strony

Tytuu strony nie naley myli z tytuami (rdtytuami, nagwkami) wewntrz dokumentu, definiowanymi za pomoc H1, H2 itd.

Strona kodowa dokumentu


Waciw stron kodow dokumentu jest ISO-8859-2. Jest to midzynarodowy standard
przyjty przez stosowne ciaa kodyfikujce. W Windows standardem jest strona kodowa
Windows-1250. Powstaje zatem pytanie, co jest suszne.
Oczywicie ISO, ale w pocztkowej fazie nauki sugerujemy stosowanie Notatnika jako
edytora i wstawianie do nagwka dokumentu deklaracji Windows-1250. Tak bdzie porczniej w pierwszych prbach budowania dokumentw HTML, gdy w Notatniku wykorzystywany jest wanie ten standard, podobnie jak w wielu innych programach dla Windows, ktre uywamy na co dzie.
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
</head>
Deklaracj strony kodowej wstawiaj do kadego dokumentu HTML!
Dopiero po wykonaniu szeregu wicze i przejciu do systematycznej nauki warto bdzie
sign po wyspecjalizowany edytor i stosowa ju stron kodow ISO-8859-2. Ma ona
posta:
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
W niezbyt odlegej perspektywie wszyscy przejdziemy zapewne na standard Unicode,
ktry w jednej tabeli zawiera znaki nalece do wszystkich jzykw (dziki temu mona
bdzie atwiej pisa wielojzyczne dokumenty), ale na razie ograniczamy si do przyjtych powszechnie standardw.

Struktura witryny
Gdy stawiamy pierwsze kroki, tworzymy zazwyczaj pojedyncze dokumenty. Witryna
internetowa skada si jednak na og z wielu powizanych ze sob dokumentw. czymy je za pomoc odsyaczy, za gwny dokument zapisujemy w pliku index.htm lub
index.html. Inne mog mie dowolne nazwy, nawet wielowyrazowe. Ale uwaga, nie uywaj w nazwach plikw polskich liter i nie stosuj spacji. Tak wic nie twrz pliku kcik
humoru.htm, lecz kacik_humoru.htm. W wielowyrazowych nazwach cz wyrazy podkreleniem.
Na dalszym etapie nauczysz si tworzenia wielu stron i czenia ich ze sob, ale na pocztku warto przewiczy tworzenie pojedynczych dokumentw.

Bardzo wana uwaga: zapisuj zawsze pliki maymi literami. Nie Index.htm czy
INDEX.HTM, lecz index.htm. Wynika to std, e serwery internetowe pracuj zazwy-

czaj pod kontrol systemu operacyjnego Unix, ktry rozrnia wielko liter. Zatem
pliki takie s dla nich rnymi plikami, cho pozornie nazywaj si tak samo. Na lokalnym dysku nie ma to znaczenia, ale kopot moe si pojawi wanie na serwerze.
Konsekwentnie stosuj wic mae litery.
W rozdziale o narzdziach webmasterskich powiemy o sposobach posyania plikw na
serwer. Jednak ju teraz zapamitaj, e struktura witryny na lokalnym dysku powinna by
identyczna ze struktur na serwerze. W przeciwnym razie pojawi si kopoty z odsyaczami.

Problem schykowych znacznikw


World Wide Web Consortium uznao rozmaite znaczniki HTML, ktre pojawiay si we
wczeniejszych wersjach jzyka, za schykowe (deprecated). Oznacza to, e organizacja
zaleca sukcesywne rezygnowanie z ich stosowania w dokumentach HTML. Typowym
przykadem mog by znaczniki sterujce wywietlaniem czcionki, jak wielko, krj czy
kolor.
Nie oznacza to oczywicie, e na skutek jakiej arbitralnej decyzji tracimy nagle moliwo formatowania czcionek czy innych elementw. Starsze polecenia s po prostu zastpowane przez nowe w tym konkretnym przypadku definicje czcionki powinny by po
prostu zastpione przez polecenia okrelone w specyfikacji stylw. Dla przykadu, zamiast
starej definicji:
<p><font face=verdana color=red>Tre akapitu</font></p>
moemy uy nowej, stosujc style:
<p style="font-family: verdana; color: red">To jest jaki
akapit</p>
Efekt bdzie oczywicie ten sam.
Warto od razu powiedzie, e polski edytor Pajczek zawiera mechanizm wywietlajcy
przestarzae znaczniki , dziki czemu uytkownik moe si od razu zorientowa czy
warto zastosowa jakie polecenie, czy te moe rozway uycie nowoczeniejszej techniki. Jeli jaki znacznik jest wywietlany w edytorze z przekreleniem, oznacza to wanie, e ma status deprecated.

Rysunek 15 - Pajczek zaznacza schykowe znaczniki

Narzuca si zatem pytanie, po co uczy si starszych znacznikw, skoro deprecjonuje je


tak wana instytucja jak W3C. Wyraajc tutaj jedynie swoj wasn opini, pragn podkreli nastpujce okolicznoci, ktre przemawiaj za starszymi znacznikami.

Trudno sobie wyobrazi nauk jzyka HTML bez poznania tych intuicyjnie zrozumiaych i wygodnych w stosowaniu znacznikw. Byoby to tak, jak gdyby pocztkujcy adept rachunku prawdopodobiestwa zaczyna poznawanie tej pasjonujcej dyscypliny od aksjomatycznej definicji prawdopodobiestwa, a nie od
prostych wicze z rzucaniem kostk do gry, ktre kiedy natchny jakie genialne umysy do stworzenia caej teorii.

W wielu sytuacjach uycie starszych polece jest po prostu szybsze i wygodniejsze.

Mona by niemal pewnym (tak zreszt zaleca W3C), e przegldarki internetowe


bd zawsze interpretoway klasyczne znaczniki, gdy odejcie od tego oznaczaoby katastrof w niezliczonych milionach dokumentw opublikowanych dotychczas w Sieci. Nie sposb przecie skoni miliony osb do podjcia jakiej gremialnej akcji poprawiania stron zgodnie z nowymi zasadami. Pki co, nie mamy
jeszcze adnych automatycznie dziaajcych konwerterw, ktre w cudowny sposb zamieniyby stare na nowe.

Zalecajc oczywicie przenoszenie jak najwikszej iloci informacji do stylw, bynajmniej


nie warto straszy webmasterw tym, e uyte tu i wdzie polecenia <font>, <u> czy
<center> nagle przestan funkcjonowa. Mona si jedynie spodziewa, e powolutku,
w cigu wielu lat, coraz wicej osb bdzie wykorzystywa nowoczeniejsze techniki, za
udzia dokumentw sformatowanych w tradycyjny sposb bdzie sukcesywnie male.

Polecenie

Zamiennik

<applet>

<object>

<basefont>

Arkusze stylw

<center>

Align=center lub arkusze stylw

<dir>

<ul>

<font>

Arkusze stylw

<isindex>

<input>

<menu>

<ul>

<s>

Arkusze stylw

<strike>

Arkusze stylw

<u>

Arkusze stylw

Uwaga: Stosujc polecenia schykowe, warto zarazem stosowa prolog Transitional,


dziki ktremu przegldarka powinna wywietla nie tylko aktualne polecenia HTML
4, lecz i znaczniki ze statusem deprecated. Inna sprawa, e jak na razie przegldarki
s tolerancyjne i nie dyskryminuj tych znacznikw zalenie od uytego prologu.
Dokadniejsz informacj o prologu znajdzie Czytelnik w rozdziale Struktura dokumentu
(punkt Podstawowe elementy dokumentu strona Bd! Nie zdefiniowano zakadki..).

Koniec wieczy dzieo


Na zakoczenie tego rozdziau mam dla wszystkich czytelnikw dobr nowin. Jestecie
ju webmasterami! Moe jeszcze nie w kadym calu, ale pokazane wyej techniki w peni
wystarcz do sporzdzenia swojej internetowej wizytwki. Tak jak kiedy umiejtno
pisania i czytania staa si cywilizacyjnym wymogiem, tak dzisiaj umiejtno zapisywania informacji na wielkiej tablicy zwanej World Wide Web decyduje o przewadze nad
tymi, ktrzy tej sprawnoci jeszcze nie posiedli.
Polecam zatem przewiczenie opisanych technik wyprbowanie rozmaitych ukadw
elementw, zmian ich treci aby w peni panowa nad tworzeniem strony. Potem warto
bdzie przystpi do studiowania nastpnych rozdziaw, ktre poszerz nasz wiedz
o przydatne narzdzia.

You might also like