HTML Učebnice - základy HTML

Základy HTML

Kostra HTML dokumentu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>titulek</TITLE>
</HEAD>

<BODY>

</BODY>
</HTML>

Takhle by měla správně vypadat kostra HTML dokumentu. První řádka <!DOCTYPE ...> určuje používanou verzi HTML (v tomto případě verzi 4.0). <HTML>...</HTML> vymezuje celý HTML dokument a <BODY>...</BODY> tělíčko dokumentu. <HEAD>...</HEAD> je hlavička dokumentu, která obsahuje titulek stránky - <TITLE>...</TITLE>. Je vhodné používat co nejkratší titulek (max. 20 znaků). Z těchto základních elementů se skládá HTML dokument. Nejvyšší úroveň má element HTML, který se skládá z hlavičky HEAD a tělíčka BODY. Takže většinu zdrojového kódu budeme psát mezi tagy BODY.

Členění textu

<P>První odstavec <P>Druhý odstavec <P>třetí odstavec </P>

K oddělení odstavců se používá tag <P>. Před zobrazením odstavce, prohlížeč převádí všechny konce řádků na mezery. Pokud je za sebou více mezer, nahradí je jednou mezerou - mezi slovy můžeme psát mezer kolik chceme, nakonec se zobrazí mezera jediná. Další věcí je, že se text zarovnává podle aktuální velikosti okna, takže dokument lze zobrazit v různých rozlišeních. Někdy však potřebujeme, aby se text zalomil na určitém místě. To dosáhneme pomocí tagu <BR> :

Nějaký text<BR>
a další text<BR>
a ještě jeden text<BR>

Další element <Hx> (x=1,2,3,4,5,6) slouží k vytváření nadpisů v šesti úrovních. Největším a nejvýraznějším písmem je zobrazován text s elementem <H1>. Ostatní elementy H(2-6) se postupně zmenšují.

<H1>nadpis</H1>
<H2>podnadpis</H2>

Další elementy jsou v tabulce Formátovací značky.

Typy písma

V HTML dokumentech můžeme používat písma tučná, různě velká, kurzívu, použít jiný font, zvýraznit text nebo dát textu např. jinou barvu. Prostě můžeme s textem dělat to, co umožňují textové editory.

<STRONG>nadpis</STRONG>
<FONT COLOR="BLACK" FACE="Arial">text</FONT>

V tomto příkladě jsem pomocí tagu <STRONG> ... </STRONG> zvýraznil nadpis a elementem <FONT>...</FONT> zvolil font Arial a textu dal černou barvu.

Přehled dalších tagů najdete v tabulce Typografické značky

Odkazy

Co to vůbec odkaz je? Je to zvýrazněná část textu, ve které se skrývá adresa dalších stránek (URL). Po kliknutí na tento odkaz prohlížeč otevře okno s touto adresou. Odkaz vložíme do dokumentu následujícím způsobem :

<A HREF="http://www.odkaz.cz">text odkazu</A>

<A HREF="url"> slouží k určení adresy, kam odkaz po aktivaci vede. Odkaz nemusí být jen text, ale i obrázek. Někdy potřebujeme, aby odkaz odkazoval do nějaké části dokumentu (třeba doprostřed). K tomu slouží tag <A NAME="neco">. Stačí jen tento tag umístit doprostřed dokumentu a k odkazu připsat :

<A HREF="mojestranky.html#001">druhá část</A>
...
...
<A NAME="001">
druhá část

Seznamy

V HTML dokumentech můžeme používat různé typy seznamů. Členíme je do třech základních typů - číslované, nečíslované a definiční. U číslovaných seznamů je před každou položku automaticky umisťováno číslo. Jednotlivé položky se uvozují tagem <LI>. Můžeme definovat styl odrážky <OL TYPE=A/a/I/i/1>...</OL>. (A pro velká písmena, a pro malá písmena, I pro římské číslování, 1 pro arabské číslování) Ukázka číslovaného seznamu :

<OL>
<LI>položka č. 1
<LI>položka č. 2
</OL>

Stejně se vytváří nečíslovaný seznam. Akorát místo OL napíšeme UL. Stejně jako u číslovaných seznamů, můžeme měnit styl odrážky <UL TYPE=DISC/CIRCLE/SQUARE>...</UL>

Definiční seznamy jsou odlišné od předchozích dvou. Můžeme s ním vytvořit např. slovníček pojmů, který obsahuje termíny a jejich vysvětlení. Uvozuje se tagem <DL> a jednotivé položky pak <DT> a <DD>

<DL>
<DT>název 1
<DD>text
<DT>název 2
<DD>text
</DL>