www.petr-kral.com - portál plný informací od dopravy po počasí

Aktuální zpravodajství a sport

HTML pro začátečníky 2.díl

Napsal Jan Radosta

Úterý, 01 červenec 2008

Internetové stránky většinou obsahují nějaké informace, které jsou vložené formou textu. Znamená to tedy, že uživatel navštěvuje stránky právě kvůli tomuto textu (informacím).

Někdo by sice mohl namítnout, že bez textu to jde taky a že dobrá grafika s nějakými těmi efekty taky přiláká uživatele. Ano, to je pravda, ale ke grafice později, mi si raději nejdříve probereme ten text.

Všechny texty, grafika a vše, co chcete aby bylo na stránce zobrazeno, musí být vloženo do těla HTML dokumentu (mezi tagy <BODY> a </BODY>). Teď už tedy víme, kam text vkládat. Jenže jak? Je to úplně jednoduché - stačí ho pouze napsat. Obyčejně napsaný text nám však asi stačit nebude, a tak si taky řekneme, jak tento text formátovat.

Odstavce

Odstavec je vlastně nějaký text oddělený od ostatního textu.

<P> - pomocí tohoto tagu vytvoříme odstavec, který bude mít nad sebou i pod sebou určité odsazení (jeden nebo dva řádky). Tento tag je párový, a proto ho musíme uzavřít </P>
<BLOCKQUOTE> - pomocí tohoto tagu můžeme odstavec zformátovat tak, že bude mít odsazení jak zprava a zleva, tak i zhora a zdola. Je to vlastně taková citace. Rovněž i tento tag je párový (musí tedy končit </BLOCKQUOTE>)
<DIV> - je označení související části textu (odstavce), pomocí kterého můžete tento text např. zarovnat. Tento tag je párový, musí být tedy zakončen </DIV>. Zarovnání odstavce určuje obecný atribut ALIGN, který má tyto hodnoty: RIGHT (vpravo), LEFT (vlevo), CENTER (na střed), JUSTIFY (do bloku).

Zalamování řádku

Pokud chcete v dokumentu zalomit řádek, nestačí to udělat ve zdrojovém kódu. Ve výsledku se to totiž zobrazí tak, jako kdyby tam byla pouze mezera. K zalomení řádku slouží nepárový tag <BR>. Při vložení kamkoliv do textu se nám text, který je za tímto tagem objeví na dalším řádku.

Měnění vzhledu písma

Chcete-li v dokumentu něco zvýraznit, musíte to rovněž vepsat do zdrojového kódu stránky. V následující tabulce najdete přehled tagů.

Ukázka syntaxe	Výsledný vzhled
<B>tučné písmo</B>	tučné písmo
<I>kurzíva</I>	kurzíva
<U>podtržený text</U>	podtržený text
<TT>psací stroj</TT>	psací stroj
<STRIKE>přeškrtnutý text</STRIKE>	~~přeškrtnutý text~~
<EM>Zvýrazněný text</EM>	zvýrazněný text
<STRONG>silně zvýrazněný text</STRONG>	silně zvýrazněný text
<CODE>ukázka kódu programu</CODE>	ukázka kódu programu
<ADDRESS>zvýraznění</ADDRESS>	zvýraznění (adresa autora)
<PRE>předformátovaný text</PRE>	předformátovaný text
<BIG>velké písmo</BIG>	velké písmo
<SMALL>malé písmo</SMALL>	malé písmo
text<SUB>dolní index</SUB>	text_{dolní index}
text<SUP>horní index</SUP>	text^{horní index}

Všechny tyto tagy můžete i navzájem kombinovat. Př:

text

Všiměte si pořadí ukončení tagů. U všech těchto tagů můžete rovněž použít i obecný atribut ALIGN (zarovnání).

Změna barvy, fontu a velikosti písma

<FONT> - je párový tag (musí končit </FONT>), jehož atributy nám umožňují měnit barvu, font a velikost písma. Atributy jsou zde:
COLOR  -  určuje barvu textu
SIZE  -  určuje velikost textu (číslo od 1 do 7)
FACE  -  určuje font písma

Příklad použití je zde:

<FONT COLOR="red" SIZE="5" FACE="Arial">texttexttext</FONT>
vypadá takto: texttexttext

Vložení čáry

<HR> - je nepárový tag, který slouží k vložení čáry do HTML dokumentu. Pokud vložíte do zdrojového kódu pouze tag <HR>, ve výsledku se vytvoří šedá čára přes celou stránku. To se někdy nehodí, proto má tento tag definované ještě některé atributy, pomocí kterých určíme vzhled čáry. Atributy jsou zde:
ALIGN - zarovnání čáry (left, right, center)
WIDTH - určuje šířku čáry (v pixelech nebo procentech)
COLOR - určuje barvu čáry
SIZE - určuje tloušťku čáry

Příklad: <HR WIDTH="80%" COLOR="green" SIZE="2" ALIGN="center">

A výsledná čára:

Nadpisy

Pro tvorbu nadpisů jsou v HTML definovány párové tagy <H1> až <H6>. Vzhled je v následující tabulce:

Syntaxe	Vzhled
<H1>nadpis prvního řádu</H1>	nadpis prvního řádu
<H2>nadpis druhého řádu</H2>	nadpis druhého řádu
<H3>nadpis třetího řádu</H3>	nadpis třetího řádu
<H4>nadpis čtvrtého řádu</H4>	nadpis čtvrtého řádu
<H5>nadpis pátého řádu</H5>	nadpis pátého řádu
<H6>nadpis šestého řádu</H6>	nadpis šestého řádu