IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

ABC HTML
Autor: Maria Sok
ISBN: 83-7197-835-9
Format: B5, stron: 192

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

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

atwy start dla nowicjuszy, ktrzy w krtkim czasie staj si profesjonalistami oraz
przystpne wyjanienie najwaniejszych terminw: Internet, HTML, WWW.
Ksiki Marii Sok ciesz si podobnym zainteresowaniem i zdobywaj podobne opinie,
jak publikacje Laury Lemay (HTML 4. Vademecum profesjonalisty, Helion). I tym
razem polska autorka daje dowd umiejtnoci przekazywania wiedzy na trudne tematy.
W ksice z serii ABC, przeznaczonej dla pocztkujcych, zaprezentowaa m.in.
nastpujce zagadnienia:
Znaczniki HTML.
Kaskadowe arkusze stylw.
Osadzanie obrazw.
Tworzenie tabel.
Ramki i ukady ramek.
Rnice pomidzy jzykiem HTML, a now specyfikacj XHTML.

"
"
"
"
"
"

Wiedz teoretyczn doskonale uzupeniaj liczne przykady ilustrujce jzyk HTML.

Dziki nim szybko nauczysz si tworzenia stron WWW w czystym kodzie HTML.
Pniej pozostanie tylko rozwinicie skrzyde fantazji, by tworzy serwisy, ktre
zdobd uznanie i za ktre otrzymasz wymarzone honorarium.

Wstp ...............................................................................................5
Rozdzia 1. Informacje podstawowe......................................................................7
Zacznijmy od A...................................................................................................................7
Od historii do teraniejszoci ..............................................................................................9
Definicja typu dokumentu DTD...................................................................................10
Zapisywanie dokumentw HTML w edytorze i otwieranie w przegldarce......................11
Troch treningu .................................................................................................................13
Najwaniejsze informacje .................................................................................................13

Rozdzia 2. Internet, strona WWW i znaczniki HTML ...........................................15

World Wide Web i strona WWW .....................................................................................15
Znaczniki...........................................................................................................................16
Elementy dokumentu HTML ............................................................................................17
Kodowanie polskich znakw ............................................................................................20
Najwaniejsze informacje .................................................................................................21

Rozdzia 3. Znaczniki HTML formatujce tekst

i nadajce struktur dokumentowi HTML ..........................................23
Nagwki i akapity tekstu..................................................................................................23
Trzy rodzaje list.................................................................................................................34
Najwaniejsze informacje .................................................................................................40

Rozdzia 4. Podstawy kaskadowych arkuszy stylw ............................................43

Oglne informacje na temat kaskadowych arkuszy stylw ..............................................43
Komentarze CSS ...............................................................................................................49
Styl wpisany ......................................................................................................................50
Osadzony arkusz stylw....................................................................................................51
Zewntrzny arkusz stylw.................................................................................................57
Rozciganie stylu ..............................................................................................................59
Wydzielone bloki ..............................................................................................................62
Przykady stylw CSS dla ta strony WWW ........................................................................64
Atrybuty stylu odnoszce si do tekstu .............................................................................68
Najwaniejsze informacje .................................................................................................75

Rozdzia 5. Obrazy w dokumencie HTML.............................................................79

Najwaniejsze informacje .................................................................................................90

Rozdzia 6. Poczenia .......................................................................................93

Uniform Resource Locator................................................................................................93
Ulokowanie dokumentu a cieka dostpu .......................................................................94
Definiowanie pocze......................................................................................................96

ABC jzyka HTML

Definiowanie poczenia z inn stron..............................................................................99
Zakotwiczenia .................................................................................................................105
Wicej o obrazach penicych funkcj pocze.............................................................109
Poczenia z archiwami FTP ...........................................................................................115
Najwaniejsze informacje ...............................................................................................115

Rozdzia 7. Tabele HTML..................................................................................117

Elementy konstrukcyjne tabeli ........................................................................................132
Najwaniejsze informacje ...............................................................................................134

Rozdzia 8. Ramki i ukady ramek ....................................................................137

Najwaniejsze informacje ...............................................................................................149

Rozdzia 9. HTML a XHTML..............................................................................151

Dodatek A Znaczniki HTML i ich funkcje..........................................................157
Dodatek B Podstawowe moduy kodu HTML ....................................................181
Dodatek C Atrybuty standardowe ....................................................................185
Dodatek D Kolory w HTML ..............................................................................187

Rozdzia 2.

World Wide Web i strona WWW

Co to jest World Wide Web?
World Wide Web (w skrcie WWW) to sie komputerw nazywana popularnie Internetem. Tworz j komputery z caego wiata. Komputery te porozumiewaj si ze sob za
porednictwem protokou HTTP.

Jak to dziaa?
Wszelkie informacje umieszczone w sieci zapisane s w dokumentach zwanymi stronami
WWW. Strona WWW to dokument utworzony za pomoc jzyka HTML. Gotowe strony
WWW zapisywane s na specyficznym komputerze, ktry nazywamy serwerem.
Serwer to waciwie program, ale przyjo si okrela tym mianem take komputer,
na ktrym zainstalowano ten program. Serwer jest odpowiedzialny za realizacj dania
przesania dokumentw do tego komputera, ktry wystpi z takim daniem. Jest take
konieczny do publikowania dokumentw w Internecie. Internet z kolei stanowi sie
komputerw poczonych ze sob. Oczywicie nie fizycznie. Komputery mog jednak
komunikowa si ze sob i przesya sobie dane, czyli informacje. Strony WWW stanowi jedno ze rde informacji.

Co musisz zrobi, eby przeglda strony WWW?

Aby przeglda strony WWW, konieczne jest nawizanie poczenia z Internetem za
porednictwem modemu lub cza staego i uruchomienie specjalnego programu,
ktry nazywa si przegldark najpopularniejsze przegldarki to Netscape Navigator
i Internet Explorer. Przegldark naley poinformowa, gdzie ma szuka danych. Informacja ta zawarta jest w adresie URL.

16

ABC jzyka HTML

Co to jest adres URL?

URL to skrt od Uniform Resource Locator, co mona przetumaczy jako uniwersalny
identyfikator zasobw. Jego posta jest mniej wicej taka: http://www.dobrastrona.com/.
Adres ten wpisujesz najczciej w polu adresu przegldarki (patrz rysunek 2.1). Przegldarka wysya do komputera (serwera), ktrego adres podae, wiadomo zawierajc danie strony. Serwer pobiera odpowiednie dane i przekazuje je wystpujcemu
o nie komputerowi.
Rysunek 2.1.
Pole adresu
przegldarki
tu wpisujesz adres URL
strony, ktrej zawarto
chcesz wywietli
w przegldarce

Co przegldarka zrobi z danymi, ktre otrzyma od serwera?

Dane, ktre trafiy do Twojej przegldarki, s zakodowane w specjalny sposb s
zapisane w jzyku HTML. Przegldarce to nie przeszkadza potrafi ona interpretowa
ten kod, wic wywietla pobran stron na Twoim ekranie. Jzyk HTML informuje
przegldark, jak ma obsuy pobrane dane.
Tak wic sam widzisz, jak wany jest jzyk HTML. Dotrzemy teraz do jego istoty
zajmiemy si znacznikami tego jzyka.

Znaczniki
Jeli wywietlisz kod rdowy strony WWW, zobaczysz, e zawiera on szereg polece
jzyka HTML umieszczonych w nawiasach ktowych. Twory te nosz nazw znacznikw.

Jak wygldaj znaczniki?

Znaczniki stosowane s zazwyczaj w parach:

 

, np.



. Zwr uwag na ukonik (), ktry odrnia znacznik
zamykajcy od otwierajcego. Od zasady wystpowania znacznikw w parach istniej
wyjtki. Oto niektre z nich:

 znacznik akapitu. Wprawdzie istnieje znacznik zamykajcy (
),

ale pominicie go nie spowoduje bdu w dziaaniu strony; stosuj ten

znacznik, aby rozpocz nowy akapit.

  znacznik nowego wiersza.

  znacznik umoliwiajcy dodanie linii poziomej.

Par znacznikw (lub znacznik pojedynczy, jeli nie ma on znacznika zamykajcego)

nazywa si take elementem. Element pozbawiony znacznika zamykajcego nazywa
si pustym. Moe on zawiera jedynie atrybuty.

Rozdzia 2. Internet, strona WWW i znaczniki HTML

17

Jaka jest funkcja znacznikw?

Znaczniki informuj przegldark, jak wywietli stron na ekranie.

Wielkie czy mae litery w znacznikach?

Nie ma znaczenia, czy znaczniki zapisane s za pomoc maych, czy duych liter. Oznacza
to, e
  jest tym samym, co
. Warto jednak zacz przyzwyczaja si do
maych liter. S one zalecane w rekomendacji W3C dotyczcej specyfikacji HTML 4,
a w specyfikacji XHTML s wymagane.

Co to s atrybuty znacznikw i jaka jest ich funkcja?

Atrybuty znacznikw dostarczaj dodatkowych informacji o elementach strony, definiowanych poprzez znaczniki. Jeli na przykad chciaby, aby Twoja strona miaa to
w kolorze zielonym, wystarczy, e poinformujesz o tym przegldark, dodajc do
znacznika
  odpowiedni atrybut:
      . Atrybut definiowany
jest za pomoc pary: 
!
 
"# i zawsze jest umieszczany w znaczniku
otwierajcym danego elementu HTML. Wartoci naley podawa w cudzysowie pojedynczym (
) lub podwjnym (  $.

Elementy dokumentu HTML

Pewne znaczniki peni szczeglne funkcje. Tworz bowiem podstawowy szkielet dokumentu HTML.

Jaka jest podstawowa posta kodu dokumentu HTML?

Otwrz Notatnik lub edytor Webber i wpisz w nim nastpujcy tekst (wydruk 2.1) jest
to podstawowy, najprostszy szkielet dokumentu HTML:
Wydruk 2.1. Podstawowy szkielet dokumentu HTML



 
 










Zapisz plik pod nazw mojastrona.html, uruchom przegldark i otwrz w niej swj
plik (wybierz w menu File lub Plik w zalenoci od wersji jzykowej pozycj
Open, Open File lub Otwrz). W przegldarce wywietlone zostanie tylko zdanie To jest
moja pierwsza strona WWW. Reszta tekstu nie pojawi si, poniewa stanowi dla
przegldarki kod, ktry informuje j, co ma z dokumentem zrobi (patrz rysunek 2.2).

18

ABC jzyka HTML

Rysunek 2.2.
Zapisz dokument
HTML i otwrz
go w przegldarce
oto Twoja pierwsza
strona WWW

Jakie znaczenie maj poszczeglne wyraenia kodu z wydruku 2.1?

Pierwszym znacznikiem w Twoim dokumencie HTML jest znacznik

. Informuje
on przegldark, e jest to pocztek dokumentu HTML. Ostatnim znacznikiem kodu
jest znacznik

 jak ju wiesz, jest to znacznik zamykajcy i informuje on
przegldark, e na nim koczy si dokument HTML.
Znaczniki

 i

 informuj, e wszystko, co znajduje si midzy nimi stanowi dokument HTML. Now stron bdziesz zawsze rozpoczyna od znacznika


i koczy znacznikiem

.
Pierwszym elementem strony jest nagwek. Jego ramy wyznacza para

.
Midzy tymi znacznikami umieszczany jest kod definiujcy tytu strony. W adnym
wypadku nie naley tu umieszcza treci strony!
Zawarto nagwka nie jest wywietlana na stronie WWW. Zwr jednak uwag na
pasek tytuu okna przegldarki, w ktrym wywietlie swoj pierwsz stron WWW.
Tekst, ktry wpisae midzy znacznikami


 


, pojawia si na pasku
tytuu tego okna. Strona moe mie tylko jeden tytu, a ten z kolei moe zawiera tylko
tekst adne inne znaczniki nie s tu dozwolone. Tytu nie moe by zbyt dugi, bo
nie zmieci si na pasku tytuu, ale nie przesad te w odwrotn stron, aby da szans
przypadkowym czytelnikom zorientowa si, jaka jest tematyka strony.
Strona WWW ma oczywicie swoj zawarto. W przykadzie umiecilimy j midzy
znacznikami
 
 . One wanie wyznaczaj drugi element strony WWW
obszar treci.

Rozdzia 2. Internet, strona WWW i znaczniki HTML

19

Para
 
  wyznacza podstawow cz strony tu twrca strony WWW
umieszcza wszystko: tekst, obrazy, poczenia itd.
Elementy strony WWW czsto nazywa si (od angielskich nazw znacznikw) sekcj
head i sekcj body. Potrafisz ju je zdefiniowa i umiesz ju wywietli na ekranie
przegldarki tekst. Pora, aby pozna nowe znaczniki i nauczy si kontrolowa wygld
wywietlanego na ekranie tekstu oraz nadawa mu okrelon struktur.

Co to jest element meta?

Element  zawiera oglne informacje na temat dokumentu. Umieszczane s one midzy innymi w znaczniku

. Najczciej s to informacje przydatne przegldarkom lub sowa kluczowe, wykorzystywane przez serwisy wyszukujce (coraz rzadziej
jednak). W znaczniku

 mona na przykad umieci adres URL, pod ktry przegldarka ma si skierowa, aby wywietli now wersj strony WWW lub opis dokumentu.

Do czego su atrybuty znacznika <meta>?

Niektre serwisy wyszukujce korzystaj z atrybutw znacznika

 przy indeksowaniu dokumentw.
Atrybuty opisuj dokument i dostarczaj sw kluczowych. I tak, atrybut  okrela
sposb opisu dokumentu dostarczony w atrybucie  

.
Oto przykad elementu 
, ktry definiuje opis strony ( % 
  ):



    
!" # $  %$

Oto przykad elementu 

, ktry zawiera sowa kluczowe, charakteryzujce zawarto strony WWW (  % ):


$
 
&'()*&'()+!!),'(),&'()-.!  )/0!  

Poniej przedstawiony zosta przykad dokumentu HTML, w ktrym za pomoc elementu 

 umieszczono informacje o autorze strony, dacie ostatniej modyfikacji dokumentu oraz o stosowanym oprogramowaniu (patrz wydruk 2.2).
Wydruk 2.2. Atrybuty znacznika <meta>







-1$ 



. 


-1$ )23445


6



' %786
94





20

ABC jzyka HTML

:
;$


)#
 
$

66 




Jak wykorzysta element meta,

aby skierowa uytkownika pod inny adres URL?
Element 
 bdzie bardzo przydatny, jeli zmieni si adres URL, pod ktrym mona
byo oglda Twoj stron WWW. Na wydruku 2.3 znajdziesz kod HTML, ktry nie
tylko pozwoli poinformowa uytkownika, gdzie powinien Ci teraz szuka, ale nawet
sam skieruje go we waciwe miejsce.
Wydruk 2.3. Kierowanie uytkownika pod nowy adres URL




<
= .>
%


?@A
 




8
B-C

BDE>(
A

%A
  A
 


F$ $
$
$




-
" $ $"

C
 C?
$)$ $ ; 

B




Kodowanie polskich znakw

Jak wykorzysta znacznik <meta>, aby zdefiniowa stron/ kodow?
Poprawne zdefiniowanie kodowania znakw jest w dokumencie HTML bardzo podane.
Zaleca si, aby polskie strony byy kodowane w ISO-8859-2, bo tylko wtedy bd
poprawnie wywietlane.
Korzystajc z edytora Webber, nie musisz si martwi o poprawno kodowania samych
liter to jego zmartwienie musisz jednak pamita o wstawieniu odpowiedniego
nagwka

. Aby zapewni czytelno dokumentu HTML, moesz:

Rozdzia 2. Internet, strona WWW i znaczniki HTML

21

Zrezygnowa ze stosowania polskich znakw diakrytycznych takie

rozwizanie posiada wiele zalet: niezalenie od systemu zawsze wida znaki,

a poza tym wyrazy nie s podzielone dziwnymi znakami. Moe sowa nie s
poprawne ortograficznie, ale wzgldnie czytelne. Zdarza si, e potencjalni
czytelnicy nie posiadaj przegldarki czytajcej po polsku. Wikszo
przegldarek w Polsce zapewne ma polsk stron kodow, ale niekoniecznie
tak bdzie gdzie w wiecie. Dlatego te kodowanie bez polskich znakw
jest do dobrym rozwizaniem, poniewa nie wymaga adnych specjalnych
zabiegw.
Korzysta z kodowania Windows-1250 kodowanie Windows zapewnia

poprawne ogldanie strony uytkownikom systemu Windows, ale s przecie

inne systemy i inni uytkownicy. Niewtpliwie zalet tego sposobu jest to, e
uytkownicy polskiej wersji systemu Windows mog bez adnych problemw
pisa kod swoich stron, korzystajc z Notatnika. Gdy z jakich powodw
zechcesz zdefiniowa w dokumencie HTML stron kodow Windows-1250,
wpisz odpowiedni informacj:

A
<
= . 
<
 

G@ 
 <35?4 

Takie rozwizanie naley jednak odradza.

Zdefiniowa stron kodow ISO-8859-2 aby zdefiniowa w dokumencie HTML
t stron kodow, wpisz w elemencie 
:

<
= . 
<
 

G@ 
H!I<JJ?K<5

Jeli zadeklarujesz stron kodow w ten wanie sposb, musisz skorzysta z edytora,
ktry potrafi prawidowo kodowa polskie litery takim edytorem jest Webber (http://
www.magsoft.com.pl/~rsokol/). Gorco polecam takie wanie rozwizanie.

Najwa!niejsze informacje
World Wide Web (w skrcie WWW) to sie komputerw nazywana popularnie

Internetem.
Informacje dostpne s w Internecie w postaci dokumentw HTML, zwanych

stronami WWW.
Strony WWW umieszczane s na specyficznych komputerach, zwanych

serwerami.
Aby przeglda strony WWW, konieczne jest nawizanie poczenia z Internetem

za porednictwem modemu lub cza staego i uruchomienie specjalnego

programu, ktry nazywa si przegldark.
URL to skrt od Uniform Resource Locator, co mona przetumaczy jako

uniwersalny identyfikator zasobw. Jego posta jest mniej wicej taka: http://
www.dobrastrona.com/. Adres ten okrela ulokowanie strony WWW i jest
podawany w polu adresu przegldarki.

22

ABC jzyka HTML

Dane, ktre trafiy do Twojej przegldarki, s zakodowane w specjalny sposb

s zapisane w jzyku HTML. Jzyk HTML informuje przegldark, jak ma

obsuy pobrane dane informacje te zawarte s w znacznikach.
Znaczniki to polecenia jzyka HTML umieszczone w nawiasach ktowych.

Ich posta jest nastpujca:

  $
;    $$;  .

Wielko liter przy pisaniu znacznikw nie ma znaczenia.

Dokument HTML otwiera znacznik

, a zamyka znacznik

.

Elementy strony umieszczane s midzy tymi znacznikami.

Podstawowe elementy strony WWW to obszar nagwka i obszar treci

(sekcja head i sekcja body).

Obszar nagwka wyznaczaj znaczniki
i
.
Zawarto strony WWW tekst, obrazy, poczenia itp. jest umieszczana
midzy znacznikami
 
 . One wanie wyznaczaj drugi element

strony WWW obszar treci.

Element  zawiera oglne informacje na temat dokumentu. Umieszczane
s one midzy innymi w znaczniku

. Najczciej s to informacje

przydatne przegldarkom lub sowa kluczowe wykorzystywane przez serwisy

wyszukujce. W znaczniku

 mona na przykad umieci adres URL,
pod ktry przegldarka ma si skierowa, aby wywietli now wersj strony
WWW lub opis dokumentu. Mona take umieci nowy adres URL, pod
ktry uytkownik zostanie automatycznie skierowany po okrelonym czasie.
Stron kodow ISO-8859-2 (polskie litery!) definiuje si w elemencie 
:

<
= . 
<
 

G@ 
H!I<JJ?K<5