Preco je HTML dokument strukturovany?
Prikazy HTML su vacsinou blokove, co sposobuje, ze HTML dokument pozostava z
blokov. Pouzitie blokov je vacsinou celkom intuitivne, napr. text je aj v
beznom zivote rozdeleny do odstavcov, obsahuje nadpisy roznej urovne; tabulky
zasa pozostavaju z riadkov a buniek. Bloky teda urcuju strukturu HTML
dokumentu. Aj samotny dokument je oznaceny ako blok.
Jednoduchy textovy dokument si mozete predstavit napriklad takto:
NADPIS
Toto je text prveho odstavca.
Toto je text druheho odstavca.
NADPIS
Toto je text prveho odstavca, ak pocitame odstavce od tohto nadpisu.
Toto je text druheho odstavca.
Toto je text tretieho odstavca.
Zlozitejsi dokument moze obsahovat viacero urovni nadpisov a zoznam:
NADPIS 1
Nadpis 1.1
Text odstavca 1.1
Nadpis 1.2
Text odstavca 1.2
- polozka zoznamu 1
- polozka zoznamu 2
- polozka zoznamu 3
NADPIS 2
Nadpis 2.1
Text odstavca 2.1
Ako vidite, kazdy dokument je nejakym sposobom strukturovany. Je to vec
bezna ako naramkove hodinky a po pridani prikazov HTML, obrazkov a liniek dostanete HTML dokument, ktory mozete
prezentovat na Internete.
Kontext
Niektore prikazy mozete pouzit iba v urcitych blokoch (v urcitom kontexte).
Napriklad je cira zlomyselnost pouzivat polozky zoznamu inde ako v zozname;
bunky tabulky sa nachadzaju v riadkoch a tie zasa v tabulke. V tejto
dokumentacii najdete pri kazdom prikaze aj informacie o tom, v akom kontexte
ich treba pouzit.
Zakladne bloky
Dva zakladne bloky HTML dokumentu su hlavicka (head) a
telo (body). Oba bloky maju odlisnu funkciu: hlavicka obsahuje
informacie o dokumente a telo predstavuje samotny obsah. Ako iste uhadnete,
vacsina prikazov HTML sa tyka tela dokumentu. Ak si zapamatate tych niekolko
prikazov, ktore su platne v hlavicke dokumentu, vsetky ostatne budete
automaticky pouzivat v jeho tele.
V tejto casti sa dozviete nieco o prikazoch, ktore vytvaraju zakladnu
strukturu HTML dokumentu, ako aj o prikazoch hlavicky.
Poznamka: vo velkej vacsine pripadov vystacite v hlavicke s prikazom
<TITLE>, ktory urcuje nazov dokumentu.
Vseobecna struktura HTML dokumentu vyzera takto (tucne bloky su
nevyhnutne; parametre prikazov tu neuvadzam):
- !-- -- komentar
- !DOCTYPE -- definicia typu dokumentu
- HTML -- ohranicenie
- HEAD -- hlavicka
- TITLE -- nadpis
- META -- nastavenie vlastnosti - metainformacie
- BASE -- zakladna adresa
- BODY -- telo
Dokument: komentar (mnemo: !--)
Prikaz | Kompat./Pozn. |
!-- |
vsetky prehliadace |
Kontext: |
<!-- akykolvek komentar -->
|
Komentar v HTML subore sa nachadza v poli parametrov tohto prikazu. Umoznuje
vlozit do HTML suboru komentar (napr. adresu autora, copyright, atd.) alebo
jednoducho docasne odstranit vybrane casti dokumentu. Ked si pozriete niektory
z tychto mojich suborov, objavite v nom aj komentare.
Komentar sa v prehliadaci ignoruje.
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne |
|
|
- |
|
Priklady |
<!-- toto je komentar -->
<IMG SRC="picture.gif" ALT="">
<!-- <A HREF="omne.html">Nieco o mne</A> -->
|
Poznamky |
- upozornenie: komentare nemozu byt vnorene. Priklad:
<!-- blablabla <!-- toto nikdy nepouzivajte! --> pretoze
od tohto momentu vam prehliadac prikazy uz interpretuje -->
- v komentari nepouzivajte po sebe iduce znaky "-" (---...).
|
Dokument: definicia typu dokumentu (mnemo: DOCument TYPE definition)
Prikaz | Kompat./Pozn. |
!DOCTYPE |
vsetky prehliadace |
Kontext: |
<!DOCTYPE>
<HTML>
</HTML>
|
Toto by mal byt prvy riadok dokumentu. Verzia HTML pomaha prehliadacu
urcit, podla akych pravidiel ma spracovavat jednotlive prikazy v dokumente.
Ak chcete vytvorit uplne kompatibilny a standardny dokument, mali by ste
urcit aj verziu HTML. Ta zavisi od typu dokumentu, ktory sa
urcuje pomocou DTD (document type declaration). Specifikacia 4.0 definuje tieto
verzie:
- HTML 4.0 Strict DTD - zahrna vsetky prikazy a parametre, ktore nie su oznacene
ako "deprecated" a neobsahuje okna (frames). Definicia:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
resp. skratene:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
- HTML 4.0 Transitional DTD - vsetko z predoslej definicie
plus "deprecated" prikazy a parametre. Definicia:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
resp. skratene:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- HTML 4.0 Frameset DTD - vsetko z predoslej definicie, plus
okna (frames) Definicia:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
resp. skratene:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
V praxi je asi najvhodnejsie pouzit druhy resp. treti sposob deklaracie.
Ja som po dlhe roky tento prikaz ignoroval a teraz ho pouzivam iba preto,
aby som mobol mat na stranke ikonku "Platne HTML 4.0". Prehliadace si
takmer na 100% poradia aj v pripade, ze neuvediete typ dokumentu.
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne |
|
|
- |
|
Priklady |
|
Poznamky |
|
Dokument: ohranicenie (mnemo: HTML)
Prikaz | Kompat./Pozn. |
HTML |
vsetky prehliadace |
Kontext: |
<HTML>
...zvysok dokumentu...
</HTML>
|
Ohranicuje Vas HTML dokument, ktoreho prikazy sa nachadzaju v tele tohto
prikazu.
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne |
|
|
- |
|
Priklady |
<HTML>
..
</HTML>
|
Poznamky |
- tip: ak zacnete pisat HTML dokument, vlozte do neho najprv ohranicenie
dokumentu (<HTML> .. </HTML>) a vsetky prikazy piste do vnutra
tohto bloku. Urcite sa Vam potom nestane, ze by ste na ukoncenie zabudli.
Tuto pomocku mozete prirodzene pouzit pri akomkolvek blokovom prikaze; ja
to robim pravidelne.
|
Dokument: hlavicka (mnemo: Head)
Prikaz | Kompat./Pozn. |
HEAD |
vsetky prehliadace |
Kontext: |
<HTML>
<HEAD>
...prikazy hlavicky...
</HEAD>
</HTML>
|
Ohranicuje hlavicku HTML dokumentu, ktora obsahuje informacie o dokumente,
umoznuje nastavenie jeho vlastnosti a moze obsahovat definiciu skriptov alebo
stylov. Je dolezite vediet, ze prikazy hlavicky neovplyvnuju vzhlad
Vasho dokumentu!
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne |
|
|
- |
|
Priklady |
<HTML>
<HEAD>
..
</HEAD>
</HTML>
|
Poznamky |
|
Dokument: nadpis (mnemo: Title)
Prikaz | Kompat./Pozn. |
TITLE |
vsetky prehliadace |
Kontext: |
<HTML>
<HEAD>
<TITLE>
...nadpis dokumentu...
</TITLE>
</HEAD>
</HTML>
|
Umoznuje urcit nadpis dokumentu, ktory sa zobrazuje mimo tela dokumentu
(v grafickych prehliadacoch napr. v liste okna, v textovych v pravom hornom
rohu obrazovky. Nadpis dokumentu nemozno formatovat pomocou HTML
prikazov.
Ak dokument obsahuje nadpis (odporuca sa, aby ho obsahoval kazdy dokument),
musi byt v tele prikazu <HEAD>
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne |
|
|
- |
|
Priklady |
<HTML>
<HEAD>
<TITLE>Vitajte na mojej stranke</TITLE>
..
</HEAD>
</HTML>
|
Poznamky |
|
Dokument: nastavenie vlastnosti - metainformacie (mnemo: Meta)
Prikaz | Kompat./Pozn. |
META |
vsetky prehliadace |
Kontext: |
<HTML>
<HEAD>
<META>
</HEAD>
</HTML>
|
Umoznuje nastavit vlastnosti dokumentu, ktore pomahaju vyhladavacim sluzbam
spravne zaradit vas dokument do databaz. Typickym prikladom je Altavista alebo Google.
Pomocou vlastnosti dokumentu mozno potom dokument jednoduchsie a presnejsie
vyhladat.
Tento prikaz sa musi nachadzat v tele prikazu <HEAD> a moze sa opakovat aj viackrat.
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
HTTP_EQUIV = |
"retazec" |
- |
- |
NAME = |
"retazec" |
- |
- |
CONTENT = |
"retazec" |
POVINNY |
- |
HTTP-EQUIV=
- retazec - umoznuje nastavit pri kazdom spristupneni Vasho
dokumentu hlavicku protokolu HTTP s hodnotou, ktoru specifikuje parameter
CONTENT. Zaujimave su napr.:
- Refresh - (pri CONTENT= "pocet_sekund[, uri]") prikaz na
"znovunahratie" aktualnej alebo urcenej stranky po uplynuti zadaneho
poctu sekund.
Pozor! IE 4 podporuje iba syntax CONTENT= "pocet_sekund[; URL=uri]"!
- Content-type - umoznuje urcit napr. aj kodovanie
(diakritiku) dokumentu (pri CONTENT= "mime_typ") - pozri priklady.
NAME=
- retazec - umoznuje zadefinovat premennu s menom "retazec", hodnotu
premennej specifikuje parameter CONTENT. Pouziva sa napr. na urcenie
mena autora dokumentu alebo definovanie klucovych slov pre vyhladavace
(Altavista atd.). Pri prezerani dokumentu sa hodnoty premennych
nezobrazuju.
CONTENT=
- retazec - umoznuje zadefinovat hodnotu premennej a hlavicky
HTTP protokolu
|
Priklady |
Priklad 1 (hlavicka HTTP):
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="120,http://fornax.sk">
<META HTTP-EQUIV="refresh" CONTENT="120;URL=http://fornax.sk">
<!-- po uplynuti 120 sekund sa nahra stranka http://fornax.sk -->
<!-- ten druhy priklad funguje aj v IE 4 -->
<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=ISO-8859-2">
<!-- nastavenie diakritiky Latin2 -->
<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=Windows-1250">
<!-- nastavenie diakritiky Windows 1250 -->
</HEAD>
Priklad 2 (nastavenie premennych):
<HEAD>
<META NAME="author" CONTENT="VIX">
<!-- takto oznacite autora dokumentu -->
<META NAME="keywords" CONTENT="www,hypertext,html,http">
<!-- zoznam klucovych slov -->
</HEAD>
|
Poznamky |
|
Dokument: zakladna adresa (mnemo: Base)
Prikaz | Kompat./Pozn. |
BASE |
vsetky prehliadace |
Kontext: |
<HTML>
<HEAD>
<BASE>
</HEAD>
</HTML>
|
Umoznuje urcit zakladnu adresu HTML dokumentu a pripadne aj meno cieloveho
okna (parameter TARGET, podobne ako v <A>).
To sa vyuzije pri vsetkych relativnych odkazoch a cestach k suborom. V
pripade, ze tento prikaz nepouzijete, relativne cesty sa uvazuju od
umiestnenia prave prezeraneho dokumentu. Ak dokument obsahuje tento prikaz,
musi byt v tele prikazu <HEAD>
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
HREF = |
"uri" |
POVINNY |
- |
TARGET = |
("text" | "_blank" | "_self" | "_parent" | "_top") |
_self |
IE 3+, Netscape 3+, Mozilla, Opera |
HREF=
- uri - urcuje zakladnu adresu dokumentu. Tento parameter je
povinny.
TARGET=
- text - urcuje okno (frame), do ktoreho sa po kliknuti zobrazi obsah
cieloveho dokumentu. Parameter ma vyznam iba pri pouzivani
okien (frames).
Okrem vlastnych mien okien mozete pouzit aj tieto specialne nazvy
okien (zacinaju podciarknikom):
- _blank - obsah dokumentu bude zobrazeny do noveho (prazdneho) okna.
- _self - obsah dokumentu bude zobrazeny do toho isteho
okna, v ktorom sa nachadza aktualny dokument. Toto je defaultne
nastavenie.
- _parent - obsah dokumentu bude zobrazeny do "rodicovskeho" okna
(pozri
<FRAMESET>).
- _top - obsah dokumentu bude zobrazeny do celeho okna prehliadaca.
|
Priklady |
Priklad:
<HTML>
<HEAD>
<TITLE>Vitajte na mojej stranke</TITLE>
<BASE HREF="http://fornax.sk/">
..
</HEAD>
</HTML>
|
Poznamky |
|
Dokument: telo (mnemo: Body)
Prikaz | Kompat./Pozn. |
BODY |
vsetky prehliadace |
Kontext: |
<HTML>
<HEAD>
</HEAD>
<BODY>
... prikazy tela dokumentu ...
</BODY>
</HTML>
|
Ohranicuje telo dokumentu, v ktorom sa nachadzaju vsetky prikazy, ktore
formatuju jeho vzhlad. Navyse umoznuje nastavit farby pre cely dokument.
Su to: farba textu, farba pozadia, tapeta pozadia a farby liniek.
|
Parametre | Hodnoty | Default | Kompat./Pozn. |
BGCOLOR = |
"farba" |
white |
vsetky graficke prehliadace |
BACKGROUND = |
"uri" |
ziaden subor |
vsetky graficke prehliadace |
TEXT = |
"farba" |
black |
vsetky graficke prehliadace |
LINK = |
"farba" |
blue |
vsetky graficke prehliadace |
ALINK = |
"farba" |
? |
vsetky graficke prehliadace |
VLINK = |
"farba" |
? |
vsetky graficke prehliadace |
BGCOLOR=
- farba - nastavuje farbu pozadia dokumentu. Pozri farby.
BACKGROUND=
- uri - urcuje adresu alebo cestu k suboru s obrazkom, ktory
bude pouzity ako tapeta na pozadie dokumentu. Obrazok sa na pozadi
objavi tolkokrat, aby zaplnil cele pozadie.
TEXT=
- farba - nastavuje farbu textu v dokumente. Pozri farby.
LINK=
- farba - nastavuje farbu liniek v dokumente. Pozri farby.
ALINK=
- farba - nastavuje farbu prave stlacenych liniek v dokumente.
Pozri farby.
VLINK=
- farba - nastavuje farbu navstivenych liniek v dokumente. To je
vhodne najma na to, aby pouzivatel mohol rychlo rozlisit, ci si uz nejaku
linku uz pozrel alebo nie. Pozri farby.
|
Priklady |
Priklad (cierny text, biele pozadie s tapetou "tapeta.jpg", zlte linky,
ostatne parametre default):
<HTML>
<HEAD><TITLE>Dokument</TITLE></HEAD>
<BODY TEXT="black" BGCOLOR="#f0f0f0" BACKGROUND="tapeta.jpg"
LINK="yellow">
..
</BODY>
</HTML>
|
Poznamky |
- upozornenie: prehliadace vacsinou umoznuju nastavit vlastne farby pri
zobrazovani stranok, takze Vase nastavenia sa v takom pripade
ignoruju! Ak sa zmeny Vasich farieb (napr. liniek) v dokumente vobec
neprejavuju, overte si to na inom dokumente a potom pripadne
skontrolujte nastavenie prehliadaca.
|