1. Tvorba webových stránek v jazyce
HTML

2. Anotace
Tento dokument zahrnuje popis základních HTML elementů, s jejichž pomocí může čtenář
vytvořit jednoduché webové stránky.
Klíčová slova
HTML, webové stránky, syntaxe, editor, zdrojový kód
Argumentace
Text jsem zvolil proto, že už jsem ho vytvořil na gymnáziu a mohl jsem ho použít, protože
na fakultě informatiky jsem zatím žádnou seminární práci nepsal. Práce se i tématicky hodí
k mému oboru – Aplikovaná informatika. Téma bylo zvoleno na základě velké podobnosti
s maturitní otázkou do předmětu Informatika a výpočetní technika.

3. Obsah
1. Základy ....................................................................................................................................... 4
1.1 Syntaxe ............................................................................................................................... 4
1.2 Jak psát kód HTML.............................................................................................................. 4
1.2.1 WYSIWYG ................................................................................................................... 5
1.2.2 Strukturní editory ....................................................................................................... 5
2. Začínáme programovat .............................................................................................................. 6
2.1 Nezbytné tagy .................................................................................................................... 6
2.2 Odstavce ............................................................................................................................. 6
2.3 Nadpisy ............................................................................................................................... 6
2.4 Seznamy ............................................................................................................................. 7
2.5 Odkazy ................................................................................................................................ 7
2.6 Obrázky............................................................................................................................... 8
2.7 Tabulky ............................................................................................................................... 8

4. 1. Základy
Před tím než se pustíme do programování stránek potřebujeme vědět několik důležitých
věcí o jazyce HTML. Jazyk HTML neboli Hypertext Markup Language je značkovací jazyk, což
znamená, že se stránky programují pomocí značek, které řeknou prohlížeči co je odstavec, co je
nadpis anebo co je odkaz.
1.1 Syntaxe
Zdrojový kód je uvozován úhlovými závorkami. Většina značek je párových, ale najdou se
i některé nepárové, pro příklad <hr> nebo <a>. Obecný zápis HTML vypadá takto: <značka>Obsah
značky</značka>. Uzavírací značka se vytvoří vložením lomítka před obyčejnou značku. Značky
můžeme do sebe také vnořovat, vždy ale musíme uzavřít dřív tu, kterou jsme otevřeli později.
V praxi to potom vypadá takto: <značka1>text<značka2>text, formátovaný značkou 1 i
2<značka2>text<značka1>.
1.2 Jak psát kód HTML
Obrázek 1: Prostředí PS Padu
Jsou 2 způsoby psaní webových stránek.

5. HTML Základy
1.2.1 WYSIWYG
Tato zkratka znamená What you see is what you get, v překladu co vidíš, to dostaneš.
Tento typ editorů nevyžaduje žádné znalosti HTML ani CSS. Jednoduše v něm skládáme všechny
prvky na stránku a hned vidíme výsledek. Velká nevýhoda je, že většinou není tento kód validní a
bývá dost nepřehledný. Mezi zástupce patří Microsoft Frontpage nebo Adobe Dreamweaver, který
však se však chová i jako strukturní editor a kombinuje oba 2 způsoby psaní HTML dohromady.
1.2.2 Strukturní editory
Tento způsob vyžaduje znalosti jazyka HTML, neboť stránky se tvoří přímým psaním
kódu. Výsledek si můžeme zobrazit až v prohlížeči, přímo ho nevidíme. Výhodou je, že tvoříme
vlastní přehledný a do jisté míry i validní kód. Typickým zástupcem je český program PS Pad nebo
už zmíněný Dreamweaver.
Obrázek 2: Prostředí Dreamweaveru
strana č. 5 z 9

6. Desatero tvorby webových stránek HTML
2. Začínáme programovat
2.1 Nezbytné tagy
Zdrojový kód webové stránky musí mít nějaké povinné značky, aby ho prohlížeč
vyhodnotil jako stránku a zobrazil ho.
Na začátek dokumentu patří značka <html>, naproti tomu na konci </html>. Značkou
<head> se uvozuje hlavička dokumentu, která se ve výsledku nezobrazuje, ale jsou v ní podstatné
informace o stránce. Například titulek stránky uvozený tagem <title>. Za hlavičkou už následuje
tělo stránky, do kterého se píše kód vlastní stránky. Tělo využívá tagu <body>.
2.2 Odstavce
Odstavec vznikne tak, že mezi značky <p> a </p> vložíme text odstavce. V prohlížeči se
zobrazí vložený text, který se chová jako odstavec. Text je automaticky zalamován podle velikosti
okna, proto není nutné používat konce řádků. Nicméně i to se někdy hodí. Slouží k tomu element
<br>, který je nepárový.
Tag <p> má, jako ostatně každý tag, několik atributů, které se dopisují k elementu do
úhlových závorek. Tag <p> má atribut align neboli zarovnání a hodnoty left, right, center a justify.
V praxi to potom vypadá takto: <p align=“center“>text</p>. Tento kód vypíše text zarovnaný
doprava
2.3 Nadpisy
Nadpisy v HTML můžou mít až 6 úrovní, lišících se velikostí a významem. Zapisují se
elementem <hx>, kde x je číslo od 1 do 6. Tag <h1> znamená hlavní nadpis a takto to jde sestupně
dolů. Nadpis je párový znak.

7. HTML Desatero tvorby webových stránek
Obrázek 3: Ukázka nadpisů
2.4 Seznamy
Jsou 2 typy seznamů, číslovaný a odrážkový. Chovají se naprosto totožně, rozdíl je jenom
v zobrazení čísla nebo odrážky. Pro číslovaný seznam je párová značka <ol>, pro odrážkový <ul>.
Položku seznamu vyjadřuje párový znak <li>. Pokud tedy budeme chtít číslovaný seznam, bude
kód vypadat nějak takto:
<ol><li>1. položka seznamu</li><li>2. položka seznamu</li></ol>
Dají se vytvořit také víceúrovňová číslování. A to vnořením dalších tagů <ol> nebo <ul>.
Typy seznamů se tak ve více úrovních mohou kombinovat. Pomocí seznamů se velmi často
vytvářejí menu webové stránky v kombinaci s odkazem.
2.5 Odkazy
Odkazy se tvoří pomocí elementu <a>. Nejčastějším atributem bývá href, který znamená
cíl odkazu. Použít se může buď absolutní nebo relativní odkaz. Pokud odkazujeme na nějakou
stránku našeho webu, vždy použijeme relativní odkaz, třeba v podobě <a
href=“obrazky/uvod.jpg“> Obrázek</a>. Tímto zápisem se nám zobrazí text Obrázek. Pokud na
něho klikneme, zobrazí se nám obrázek uvod.jpg ve složce obrazky.
Druhý atribut je name neboli záložka, pomocí tohoto atributu se můžeme odkázat na
nějakou záložku na téže stránce. Nejdříve ovšem musíme nějakou záložku vytvořit. Docílíme toho
pojmenováním třeba nadpisu. Například <h1 name=“nahore“>Nadpis</h1> vytvoří záložku
nazvanou nahore. Na tuto záložku můžeme poté vytvořit odkaz.
strana č. 7 z 9

8. Desatero tvorby webových stránek HTML
2.6 Obrázky
Aby byly naše stránky zajímavější, můžeme do nich vložit také nějaké obrázky. Je vhodné
použít nějaké obrázky s malou kapacitou, tedy s velkou kompresí. Nejčastěji se jedná o formáty
obrázků GIF, JPG nebo PNG.
Obrázky vkládáme pomocí elementu <img>, ale aby se obrázek zobrazil, musíme použít
parametr src a adresu URL. Adresa může být absolutní nebo relativní. Hotový tag pro zobrazení
obrázku uvod.jpg ve složce obrazky vypadá takto: <img src=“obrazky/uvod.jpg“ />. Zapomenout
nesmíme na uzavírací lomítko, protože značka img je nepárová.
2.7 Tabulky
Tabulky v HTML se podobají tabulkám v Excelu, také se zde používají řádky, sloupce a
buňky. Tvorbu tabulky začneme párovou značkou <table>, která prohlížeči sdělí, že se jedná o
tabulku. Poté definujeme řádky tabulky, k tomu slouží značka <tr>. Taktéž je to párová značka, což
znamená, že každý řádek vypadá takto: <tr>obsah řádku</tr>. Následně do každého řádku tabulky
vložíme buňky. Obsah jedné buňky se uzavře mezi párovou značku <td>.
Do buňky můžeme vložit cokoliv, ať už obyčejný text, odkaz, ale také i obrázek, čehož se
využívá při tvorbě jednoduchých webových galerií. Dříve se také tabulky používaly na tvorbu
layoutu webu, nyní se používá CSS. V tabulce také můžeme zvýraznit její záhlaví jako název
sloupce. Je to jednoduché, v prvním řádku se místo <td> použije značka <th>.
Obrázek 4: Podíl prohlížečů za rok 2012

9. HTML
Seznam použité literatury
[1] DOMES, Martin. Tvorba WWW stránek pro úplné začátečníky. Vyd. 1. Brno: Computer
Press, 2008, 246 s. ISBN 978-802-5121-603.
- Zdroj považuji za velmi vhodný k tématu, myslím, že kniha je dostatečně relevantní.
[2] NAVRCHOLU.CZ: Tisková zpráva: Téměř polovina počítačů využívá rozlišení obrazovky
1280x1024 pixelů, www.navrcholu.cz, Praha 2009
- Server Navrcholu je dlouhodobě známý a průzkumy internetu provádí už více let.
[3] JAK PSÁT WEB: HTML, jakpsatweb.cz
- Server Jak psát web je stálicí českého internetu a většina lidí se začíná učit právě na něm,
proto ho považuji za dostatečně kvalitní.
strana č. 9 z 9

10. HTML
Seznam Obrázků
Obrázek 1: Prostředí PS Padu ............................................................................................................. 4
Obrázek 2: Prostředí Dreamweaveru ................................................................................................. 5
Obrázek 3: Ukázka nadpisů ................................................................................................................ 7
Obrázek 4: Podíl prohlížečů za rok 2012 ............................................................................................ 8