Struktura HTML dokumentu Vixova prirucka webelopera

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

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):

Dokument: komentar (mnemo: !--)
PrikazKompat./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.

ParametreHodnotyDefaultKompat./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)
PrikazKompat./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.

ParametreHodnotyDefaultKompat./Pozn.
ziadne     -
 
Priklady
 
Poznamky
 

Dokument: ohranicenie (mnemo: HTML)
PrikazKompat./Pozn.
HTML vsetky prehliadace
Kontext: <HTML>
  ...zvysok dokumentu...
</HTML>

Ohranicuje Vas HTML dokument, ktoreho prikazy sa nachadzaju v tele tohto prikazu.

ParametreHodnotyDefaultKompat./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)
PrikazKompat./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!

ParametreHodnotyDefaultKompat./Pozn.
ziadne     -
 
Priklady 
  <HTML>
    <HEAD>
      ..
    </HEAD>
  </HTML>
Poznamky
 

Dokument: nadpis (mnemo: Title)
PrikazKompat./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>

ParametreHodnotyDefaultKompat./Pozn.
ziadne     -
 
Priklady 
  <HTML>
    <HEAD>
      <TITLE>Vitajte na mojej stranke</TITLE>
      ..
    </HEAD>
  </HTML>
Poznamky
 

Dokument: nastavenie vlastnosti - metainformacie (mnemo: Meta)
PrikazKompat./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.

ParametreHodnotyDefaultKompat./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)
PrikazKompat./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>

ParametreHodnotyDefaultKompat./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)
PrikazKompat./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.

ParametreHodnotyDefaultKompat./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.



Predchadzajuca tema:Pribuzne temy:Nasledujuca tema:
Intro do HTML Sprievodca vytvaranim stranky krok za krokom
Abecedny zoznam prikazov HTML		 Uprava textu