Stránka o základech HTML

Základní HTML dokument
Editace textu
Úprava textu pomocí značek
Hypertextový odkaz
Barvičky
Seznamy
Tabulky
Rámečky
Obrázky
Meta

Co je to HTML?
HTML je základem všech internetových stránek. Není to programovací jazyk v pravém slova smyslu jako např. Java nebo C++, ale je to soubor značek, kterým se říká tagy.

V čem se HTML tvoří?
Vaše internetové stránky můžete tvořit buď v editorech typu WYSIWYG, což znamená, že stránku vidíte tak jak ji uvidí uživatel, takže to celé připomíná obyčejný Word. Hlavní nevýhodou těchto programů je nepodporování některých složitějších funkcí např. rámů, ovšem pro začátečníka jsou jako stvořené. Druhá možnost je použít obyčejný Notepad nebo nějaký specializovaný editor např. CuteHTML, který je naprosto zdarma. V těchto editorech píšete vaše stránky přímo ve zdrojovém kódu. Na tuto kategorii se hlavně zaměřím.

Základní HTML dokument
Základem HTML dokumentu je tag <HTML>, který je párový, což znamená, že musí mít ukončévací tag </HTML>. Tento tag bude vždy první a jeho ukončovací tag v dokumentu. Dalšími základními tagy jsou <HEAD> a <BODY>. Tyto tagy jsou párové, takže musí mít i ukončovací tag. <HEAD> definuje záhlaví stránky a <BODY> vlastní tělo dokumentu, tedy to co vidíme na obrazovce.
Zde si dovolím malou odbočku, je jedno jestli napíšete <HEAD> nebo <Head> nebo <head> všechny tyto zápisy jsou správně.
Zákadní struktura HTML dokumentu vypadá takto:
<HTML>
<HEAD>
<TITLE>Základní HTML dokument</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Mezi tagy <TITLE> a </TITLE> se píše název stránky tak jak ho vidíme v hlavičce stránky. Nyní si do našeho dokumentu něco vpíšem:
<HTML>
<HEAD>
<TITLE>Základní HTML dokument</TITLE>
</HEAD>
<BODY>
<H1>Nadpis první kategorie</H1>
<H3>Nadpis třetí kategorie</H3>
<P>Obyčejný výpis textu</P>
</BODY>
</HTML>

Mělo by to vypadat nějak podobně:


Jedním z nejdůležitějších tagů je <br>. Jedná se o tag nepárový, takže tag </br> neexistuje. Slouží k zalomení textu na další řádku.

Teď si prozkoumáme tag <BODY>
Do tagu <BODY> můžeme napsat mnoho vlastností. Například barvu pozadí nebo barvu hypertextových odkazů. Následuje příklad:
<HTML>
<HEAD>
<TITLE>Základní HTML dokument</TITLE>
</HEAD>
<BODY Bgcolor="blue" link="red" vlink="navy" alink="yellow" text="white">
</BODY>
</HTML>

Na této stránce bude mít pozadí modrou barvu, hypertextový odkaz barvu červenou, navštívený odkaz barvu námořnickou, aktivní odkaz barvu žlutou a text bílou.

Editace textu
Pokud chcete text zarovnat text doprostřed obrazovky musíte použít vlastnost align. Viz příklad:
<HTML>
<HEAD>
<TITLE>Základní HTML dokument</TITLE>
</HEAD>
<BODY>
<P Align="center">Tento text je uprostřed stránky.<P> </BODY>
</HTML>

Výsledek vypadá následovně:


A jak změním barvu textu?
Jednoduše pomocí tagu <font>, je to tag párový a může mít mnoho atributů: Viz příklad:
<HTML>
<HEAD>
<TITLE>Font</TITLE>
</HEAD>
<BODY Bgcolor="blue" link="red" vlink="navy" alink="yellow">
<p><font color="yellow" size="8" style="Arial">Ahojte.</font></p>
</BODY>
</HTML>

Výsledek bude následující:

Všichni doufám pocopili, že color ovlivňuje barvu písma size výšku a style typ písma. Ovšem text lze upravovat i jinak, pomocí malých párových značek.

Úprava pomocí značek v textu
Tyto zančky se do textu umisťují následovně:
Toto je normální text,<tag> toto je text ovlivněý tagem.</tag>
Těchto tagů je mnoho a proto zde vypíši jen nejdůležitější z nich:

Tag Popis tagu Ukázka
<b> Napíše text tučně Ukázka
<i> Vypíše text kurzívou Ukázka
<u> Vypíše podtržený text Ukázka
<tt> Neproporciální písmo Ukázka
<strike> Přeškrtnutý text Ukázka
<big> Větší písmo Ukázka
<small> Menší písmo Ukázka
<sub> Dolní index Ukázka
<sup> Horní index Ukázka
<cite> Citace, vypadá podobně jako kurzíva Ukázka
<em> Zvýraznění určité části, jako kurzíva Ukázka
<strong> Silné písmo Ukázka
<dfn> Písmo pro termín, který je právě definován Ukázka

No vidíte, že toho není mnoho a je to lehké.

Já chci odkazy na cizí stránky
No jistě, již umíme pracovat s textem, ale ještě neumíme vytvořit hypertextové odkazy, to musíme napravit. Hypertextový odkaz vytvoříme pomocí značky <a> a atributu href. Nyní si vytvoříme odkaz na seznam.
<HTML>
<HEAD>
<TITLE>Hypertextový odkaz</TITLE>
</HEAD>
<BODY>
<p>Zde je hypertextový odkaz na <a href="www.seznam.cz">seznam</a>.
</BODY>
</HTML>
To, co napíšete mezi tagy <a> a </a> se zobrazí jako text hypertextového odkazu.

Relativní odkaz
Problém ovšem je, když chcete udělat odkaz na svoji stránku a nevíte na jaký server bude umístěna. Proto se používá takzvaný relativní odkaz:
Pokud máte svoji stránku umístěnou na serveru "sweb.cz" může váš odkaz vypadat následovně:<a href="www.sweb.cz/jakub.htm">Váš odkaz</a>; nebo kratčeji následovně:<a href="jakub.htm">Váš odkaz</a>.Co je podle vás přehlednější?

Nyní si trochu pohrajeme s obrázky a barvičkami všeobecně
Jistě jste si domysleli, že bez barevného oživení vašich stránek by se asi moc lidem nelíbily. Přece jenom je mnohem zábavnější číst si graficky pěkně upravené stránce(pozor ne přeplácané stránce) než v obsahově lepší, ale pouze textové stránce.

Tak rychle já chci mít super stránky
Základem jsou názvy barev, které můžete zadávat. Správně byste je měli zadávat v šestnáckové soustavě, ale to nikoho nebaví, takže zde jsou názvy barev "normálně":

Barva Česky Ukázka
blue modrá Ukázka
red červená Ukázka
green zelená Ukázka
yellow žlutá Ukázka
black černá Ukázka
white bílá Ukázka
pink růžová Ukázka
purple fialová Ukázka
orange oranžová Ukázka
silver stříbrná Ukázka
navy námořnická modř Ukázka
aqua světle modrá Ukázka
lime světle zelená Ukázka

Nyní si vytvoříme pěknou stránku:
<HTML>
<HEAD>
<TITLE>Využití barviček/TITLE>
</HEAD>
<BODY Bgcolor="lime" link="white" vlink="red">
<h1><font color="blue">Tento nadpis je napsán modře.</font></h1>
<p align="center"><font size="5" color="black">
Tento text je uprostřed má velikost 5 a barvu černou.
Nenavštívený odkaz na <a href="www.seznam.cz">seznam.</a>,
navštívený odkaz na <a href="www.quick.cz">Quick</a></font></p>
</BODY>
</HTML>


Tak vidíte jak je to jednoduché u BODY definujete barvu pozadí a odkazů. Poté pomocí align a font s atributy color a size doděláte zbytek. Není to nic složitého, zvládne to každý a výsledek je nesmírně efektní.

Jak na seznamy
Nyní již umíte vytvořit nejjednodušší HTML stránky. Nyní si ukážeme další užitečné funkce HTML např. seznamy. Pokud chcete vytvořit základní, nečíslovaný seznam musíte napsat toto:
<UL>
<LI> Petr
<LI> Hana
<LI> Jana
</UL>

Výsledek bude následující:

Chcete-li číslovaný seznam musíte tag ul vyměnit za ol. Stejný příklad bude s použitím číslovaného seznamu vypadat následovně:
  1. Petr
  2. Hana
  3. Jana

Není problém seznamy do sebe vnořovat:
  1. Kluci
    1. Petr
  2. Holky
    1. Hana
    2. Jana

Pro méně chápavé zde je zdrojový kod:
<OL>
<LI>Kluci
<OL>
<LI> Petr
</OL>
<LI>Holky
<OL>
<LI> Hana
<LI> Jana
</OL>
</OL>

Následující definiční seznam se hodí, vytváříte-li například slovníček pojmů, je trochu složitější, ale o to efektnější.
<DL>

<DT> Alfa
<DD> Alfa je první písmeno řecké abecedy.
</DD>
<DT> Beta
<DD> Beta je druhé písmeno řecké abecedy.
</DD>
<DT> Gama
<DD> Gama je třetí písmeno řecké abecedy.
</DD>
</DL>
Výsledek bude podobný:
Alfa
Alfa je první písmeno řecké abecedy.
Beta
Beta je druhé písmeno řecké abecedy.
Gama
Gama je třetí písmeno řecké abecedy.


Jak jste již jistě pochopili dl znamená začátek seznamu, dt název pojmu a dd vysvětlení pojmu.

Tabulky
Tabulky se do textu vkládají pomocí párového tagu <Table> jež může mít atributy width=šířka, border=rámeček, bordercolor=barva rámečku. Každá řádka tabulky se definuje párovým tagem <tr> a jednotlivá buňka párovým tagem <td>. Zde je příklad jednoduché tabulky:
<table border="2" bordercolor="yellow" width="350">
<tr>
<td align="center"><u>Třída</u></td>
<td align="center"><u>Průměr známek </u></td>
</tr>
<tr>
<td align="center">G1</td>
<td align="center">1,25</td>
</tr>
<tr>
<td align="center">G2</td>
<td align="center">1,15</td>
</tr>
</table>

Vypadalo by to asi takto:
Třída Průměr známek
G1 1,25
G2 1,15

Chcete-li se o tabulkách dozvědět více doporučím vám Kosekovy stránky. Zde se problematikou tabulek zabývají podrobněji.

Na některých stránkách jsem viděl stránky rozdělený na několik částí, jak to udělat?
Jde to jednodušše pomocí příkazu <frameset>. Ten může mít dva atributy,rows a cols. Rows vytváří vodorovné rámy a cols zase svislé. K těmto atributům ještě musíte přidat percentuální velikost daného rámu. Základní syntaxe můře vypadat takto:
<frameset rows="100"> <frameset cols="30%,70%">
Zapomněl jsem vám říct, že velikost rámu můžete určit i přímo v pixelech, viz předchozí případ. Ovšem příkaz frameset vám sice vytvoří rám a určí jeho velikost, popřípadě pomocí atributu frameborder určí velikost okraje rámu, ale to je asi tak všechno na co se zmůže. Pokud chcete definovat obsah rámu musíte pod tag frameset napsat tag <frame>, ten může mít mnoho atributů, zde je seznam nejdůležitějších:

Zdrojový kód stránky s rámy může vypadat takto:
<HTML>
<HEAD>
<TITLE>Stránka s rámy</TITLE>
<BODY text="white" link="red" vlink="aqua" alink="lime">
<FRAMESET rows="75,*" frameborder="0">
<FRAME name="titulek" src="top.GIF" noresize marginwidth="1" marginheight="0" scrolling="no">
<FRAMESET cols="70%,30%" frameborder="0">
<FRAME name="seznam" src="seznam.htm" noresize marginwidth="0" marginheight="0" scrolling="no">
<FRAME name="hlavni" src="uvod.htm" noresize marginwidth="2" marginheight="1" scrolling="yes">
</FRAMESET>
</FRAMESET>
</BODY>
</HTML>

Jistě se ptáte, k čemu je vám jméno rámu. Je důležité, že pokud chcete aby se hypertextový odkaz v jednom rámu zobrazil v jiném musíte použít atribut target="jmenoramu". Viz příklad:
<a href="www.stranka.cz" target="hlavni">

Existují ještě jiné, specielní názvy rámů:

Obrázky
Jak by asi vypadali vaše stránky bez obrázků. Velice nudně a fádně, to právě obrázky dodají vašim stránkám ten pravý šmrnc. Každý obrázek se vkládá pomocí tagu <img>. Tento tag může mít řadu atributů:

Nyní si tedy ukážeme zdrojový kód obrázku:
<img src="obrazek.jpg" name="obr1" alt="Super obraz" border="0" align="top" width="500" height="500">
To b mělo k obrázkům stačit, máte-li někdo nějaký dotaz mailujte.

Další drobnosti, abyste mohli vytvořit ty nejlepší stránky pod sluncem
Jak jsem si teď uvědomil, ještě jsem vám vůbec nepověděl o tagu <meta>. Vpisuje se do hlavičky dokumentu a jsou v něm obsaženy informace například pro internetové vyhledávače. Tag meta má atribut name a jeho atribut contect. Zdrojový kód může vypadat následovně:
<HEAD>
< Meta name="description" content="Popis této stránky">
< Meta name="keywords" content="Klíčová slova této stránky">
< Meta name="generator" content="CuteHTML">
</HEAD>
Po description byste měli psát stručný popis své stránky opět používané ve vyhledávačích. Po keywords byste měli psát heslovitě popis svých stránek např.: content="html,Javascript". Po generator se píše název generátoru ,v kterém jste tvořili svoje stránky např.:"Notepad".