Dominantnou sucastou HTML dokumentov je text, kedze poskytuje informacie. O obsahovu stranku textu sa musi postarat Vasa fantazia, ale strukturu a styl textu mozete menit pomocou prikazov HTML, ktore si ukazeme v tejto casti. Prikazy som rozdelil do troch casti.
Prikazy na formatovanie textu umoznuju jeho rozdelovanie na casti. Pomocou nich dokazete vytvorit v dokumente nadpisy a rozne odstavce a tym dosiahnete vysoku prehladnost. Na zaciatok Vam dam jednu radu: vo vasich dokumentoch nepouzivajte prilis dlhe odstavce - tazko sa citaju, lebo su prilis "huste" a to sa prejavi este vacsmi, ak cely odstavec tvori jedna priserne ale fakt priserne dlha veta podobna tejto.
Naopak, kratke odstavce dokazu vyjadrit hlbku problemu doraznejsie.
Ovela doraznejsie.
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
H1 | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <H1> ...nadpis... </H1> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ALIGN = | ("left" | "right" | "center" | "justify") | left | Netscape 3 a Mozilla M15- nepodporuju "justify" |
ALIGN=
|
|||
Priklady | |||
<H1 ALIGN="center">Moja osobna stranka</H1> <P>Vitam vas na svojej stranke! Snad tu najdete vela zaujimaveho... |
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
P | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <P> ...text odstavca... </P> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ALIGN = | ("left" | "right" | "center" | "justify") | left | Netscape 3 a Mozilla M15- nepodporuju "justify" |
ALIGN=
|
|||
Priklady | |||
<P>tento text je v odstavci a zarovnany vlavo</P> <P align="center"> tento text je v odstavci zarovnany do stredu <P>tento text je opat zarovnany vlavo |
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
BR | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <BR> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
CLEAR = | ("right" | "left" | "all" | "none") | none | - |
CLEAR=
|
|||
Priklady | |||
For long you live<BR> And high you fly<BR> And smiles you'll give and tears you'll cry<BR> And all you touch and all you see<BR> Is all your life will ever be<BR> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
PRE | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <PRE> ...text predformatovaneho odstavca... </PRE> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
WIDTH = | "velkost" | - | pravdepodobne iba Mozilla |
WIDTH=
|
|||
Priklady | |||
<PRE> For long you live And high you fly But only if you ride the tide And balanced on the biggest wave You race towards an early grave </PRE> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
CENTER | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <CENTER> ...centrovany blok... </CENTER> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<CENTER> Vsetko v tomto bloku by malo byt v strede obrazovky <IMG SRC="picture.gif" ALT=""> </CENTER> |
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
DIV | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <DIV> ...blok... </DIV> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ALIGN = | ("left" | "right" | "center" | "justify") | left | Netscape 3 a Mozilla M15- nepodporuju "justify" |
ALIGN=
|
|||
Priklady | |||
<DIV align="center"> tento text je zarovnany do stredu, ale inak to momentalne nema velky vyznam </DIV> <DIV align="center"> <IMG SRC="picture.gif" ALT=""> <P align="left">text je zarovnany vlavo, obrazok do stredu</P> </DIV> |
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
BLOCKQUOTE | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <BLOCKQUOTE> ...odsadeny blok... </BLOCKQUOTE> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
CITE = | "uri" | "" | pravdepodobne nepodporuje nijaky prehliadac |
CITE=
|
|||
Priklady | |||
<BLOCKQUOTE>tento text je odsadeny</BLOCKQUOTE> <BLOCKQUOTE>tento text je odsadeny a<BR> <BLOCKQUOTE>tento este viac!</BLOCKQUOTE> </BLOCKQUOTE> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
HR | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <HR> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ALIGN = | ("left" | "right" | "center") | center | - |
NOSHADE | |||
SIZE = | "velkost" | - | - |
WIDTH = | "velkost_p" | 100% | - |
ALIGN=
|
|||
Priklady | |||
<P>Potrebujeme trochu oddelit zvysok textu:</P> <HR> <P>Nestacilo?</P> <HR SIZE="5"> |
|||
Poznamky | |||
HTML umoznuje vlozit do Vasich stranok zoznamy, ako to poznate z roznych textovych procesorov. Zoznamy su silnym nastrojom na strukturovanie textu a mozno vyuzit bud cislovane alebo odrazkove typy zoznamov. Specialnym typom je zoznam definicii. Vsetky zoznamy mozu byt aj vnorene a mozete ich navzajom kombinovat.
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
OL | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <OL> ...polozky zoznamu... </OL> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
TYPE = | ("1" | "a" | "A" | "i" | "I") | 1 | - |
START = | "cislo" | 1 | - |
COMPACT | pravdepodobne nepodporuje nijaky prehliadac | ||
TYPE=
|
|||
Priklady | |||
HTML ma napriklad tieto vlastnosti: <OL TYPE="a"> <LI> umoznuje vyjadrit strukturu dokumentu <LI> umoznuje vlozit obrazky <LI> umoznuje vlozit odkazy na ine dokumenty </OL>Vysledok:
Prikazy z tejto kapitoly mozeme rozdelit na: <OL TYPE="a"> <LI> prikazy na formatovanie textu <LI> prikazy na zoznamy (tymto si ukazeme aj vnoreny zoznam) <OL TYPE="i"> <LI> cislovane zoznamy <LI> zoznamy s odrazkami <LI> zoznamy definicii </OL> <LI> prikazy na definovanie stylov textu </OL>Vysledok: Prikazy z tejto kapitoly mozeme rozdelit na:
|
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
UL | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <UL> ...polozky zoznamu... </UL> </BODY> </HTML> |
||
Parametre | Hodnoty | Default | Kompat./Pozn. |
TYPE = | ("circle" | "disc" | "square") | disc | - |
COMPACT | pravdepodobne nepodporuje nijaky prehliadac | ||
TYPE=
|
|||
Priklady | |||
HTML ma napriklad tieto vlastnosti: <UL TYPE="circle"> <LI> umoznuje vyjadrit strukturu dokumentu <LI type="disc"> umoznuje vlozit obrazky <LI type="square"> umoznuje vlozit odkazy na ine dokumenty </UL>Vysledok:
|
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
LI | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <UL> | <OL> <LI> ...polozka zoznamu... </UL> | </OL> </BODY> </HTML> |
||
Parametre | Hodnoty | Default | Kompat./Pozn. |
VALUE = | "cislo" | zavisi od typu zoznamu a predch. polozky | - |
TYPE = | ("circle" | "disc" | "square" | "1" | "a" | "A" | "i" | "I") | zavisi od typu zoznamu | - |
VALUE=
|
|||
Priklady | |||
Cislovany zoznam: <OL type="1"> <LI> polozka c. 1 <LI> polozka c. 2 <LI> polozka c. 3 <LI type="I" value="10"> polozka c. X <LI> polozka c. XI <LI type="1"> polozka c. 12 </UL> <UL> <LI type="circle"> prva odrazka <LI type="disc"> druha odrazka <LI type="square"> tretia odrazka </UL>Vysledok:
|
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
DL | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <DL> ...polozky zoznamu... </DL> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
Zoznam definicii: <DL> <DT>http: <DD>hypertext transfer protocol <DT>ftp: <DD>file transfer protocol <DT>www: <DT>web: <DD>World Wide Web </DL>Vysledok:
|
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
DT | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <DL> <DT> ...definicia pojmu... </DL> </BODY> </HTML> |
||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
DD | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <DL> <DT> <DD> ...opis pojmu... </DL> </BODY> </HTML> |
||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
Poznamky | |||
Nasledujuce prikazy umoznuju nastavit textu rozne vlastnosti, ktore sa prejavia v zmene jeho stylu (nemylit si s kaskadovymi stylmi!). Moznosti je vela a casto ich vsetky ani nevyuzijete. Urcite si tiez vsimnete, ze rozdiel medzi niektorymi stylmi je velmi jemny (napr. tucne a zvyraznene pismo sa zobrazuju vacsinou rovnako); v takom pripade sa rozhodnite pre styl, ktory lepsie vyjadruje to, co chcete povedat. Ak chcete nieco zvyraznit, pouzite zvyraznenie, ak chcete iba tucne pismo a nic ine, pouzite tucne pismo.
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
B | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <B> ...tucne pismo... </B> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Vitajte a <B>citte sa ako doma!</B></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
I | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <I> ...kurziva... </I> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Vitajte a <I>citte sa ako doma!</I></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
U | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <U> ...podciarknute pismo... </U> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
Priklad:<P>Vitajte a <U>citte sa ako doma!</U></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
EM | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <EM> ...zvyraznene pismo... </EM> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Vitajte a <EM>citte sa ako doma!</EM></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
STRONG | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <STRONG> ...zvyraznene pismo... </STRONG> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Vitajte a <STRONG>citte sa ako doma!</STRONG></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
SMALL | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <SMALL> ...zmensene pismo... </SMALL> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Mam skutocne <SMALL>malo miesta na disku!</SMALL></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
BIG | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <BIG> ...zvacsene pismo... </BIG> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Vitajte a <BIG>citte sa ako doma!</BIG></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
TT | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <TT> ...neproporcialne pismo... </TT> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P><TT>simulacia pisacieho stroja</TT></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
FONT | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <FONT> ...pismo s inymi vlastnostami... </FONT> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
SIZE = | "velkost" | aktualna velkost pisma | - |
COLOR = | "farba" | aktualna farba pisma | - |
FACE = | "nazov1,nazov2,...,nazovN" | aktualny typ pisma | - |
SIZE=
|
|||
Priklady | |||
<FONT SIZE="+1" COLOR="#f00000" FACE="Arial,Tahoma">Ahojte!</FONT> <FONT COLOR="#f00000">Som genius!</FONT> <FONT COLOR="green">Prikazy na zmenu pisma mozu byt aj vnorene. <FONT FACE="Arial">Teraz pisem napriklad zelenym pismom typu Arial</FONT> a teraz uz len zelenym pismom.</FONT> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
BASEFONT | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <BASEFONT> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
SIZE = | "velkost" | aktualna velkost pisma | - |
COLOR = | "farba" | aktualna farba pisma | - |
FACE = | "nazov1,nazov2,...,nazovN" | aktualny typ pisma | - |
SIZE=
|
|||
Priklady | |||
<BASEFONT SIZE="10" COLOR="#00f0f0"> <FONT SIZE="+1" COLOR="#f00000" FACE="Arial,Tahoma">Ahojte!</FONT> <FONT COLOR="#f00000">Tento text je rovnaky ako v BASEFONT, ale cerveny.</FONT> |
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
SUP | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <SUP> ...horny index... </SUP> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>E=mc<SUP>2</SUP></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
SUB | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <SUB> ...dolny index... </SUB> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Kyselina sirova: H<SUB>2</SUB>SO<SUB>4</SUB></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
CODE | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <CODE> ...zdrojovy text... </CODE> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P><CODE>int main (int argc, char *argv[]) </CODE></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
SAMPLE | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <SAMPLE> ...priklad... </SAMPLE> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P><B>Priklad:</B> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
DFN | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <DFN> ...text definicie... </DFN> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P><DFN>HTML je HyperText Markup Language</DFN></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
CITE | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <CITE> ...citat... </CITE> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P><CITE>Mozete ma citovat,</CITE> povedal</P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
KBD | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <KBD> ...pismo symbolizujuce text zadavany z klavesnice... </KBD> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P><B>Vase meno: </B><KBD>Peter Junak</KBD> </P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
VAR | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <VAR> ...pismo symbolizujuce hodnotu premennej... </VAR> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P><B>Hodnota parametra ALIGN = </B> <VAR>left | right | center | justify</VAR> </P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
S | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <S> ...preciarknute pismo... </S> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Som tu <S>nie som tu</S>, nehodiace sa skrtnite. </P> |
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
STRIKE | vsetky okrem textovych prehliadacov | ||
Kontext: |
<HTML> <BODY> <STRIKE> ...preciarknute pismo... </STRIKE> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<P>Som tu <STRIKE>nie som tu</STRIKE>, </P> |
|||
Poznamky | |||
|
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
Q | Mozilla M15+ obaluje citaty uvodzovkami, v inych pravdepodobne nefunguje vobec | ||
Kontext: |
<HTML> <BODY> <Q> ...citat... </Q> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
URI = | "uri" | "" | - |
URI=
|
|||
Priklady | |||
<P> Peter povedal: <Q>No a co ma byt?</Q></P> |
|||
Poznamky | |||
Prikaz | Kompat./Pozn. | ||
---|---|---|---|
ADDRESS | vsetky prehliadace | ||
Kontext: |
<HTML> <BODY> <ADDRESS> ...adresa... </ADDRESS> </BODY> </HTML> |
||
|
|||
Parametre | Hodnoty | Default | Kompat./Pozn. |
ziadne | |||
Priklady | |||
<ADDRESS>(c) VIX, 1999, vix@deja-vix.sk</ADDRESS> |
|||
Poznamky | |||
Predchadzajuca tema: | Pribuzne temy: | Nasledujuca tema: |
---|---|---|
Struktura HTML dokumentu | Sprievodca vytvaranim stranky krok za krokom Abecedny zoznam prikazov HTML |
Objekty a linky |