Jak se naučit HTML

HTML je zkratkou pro Hyper Text Markup Language („hypertextový značkovací jazyk“). Jde o kód, neboli jazyk, který je využíván pro tvorbu webových stránek. Pokud jste dosud nic nekódovali, může na vás HTML působit trochu děsivě. Vyzkoušet si jej však můžete jen s pomocí běžného textového editoru a internetového prohlížeče. Možná dokonce poznáte některé části HTML, které jsou využívány ke změně textu na online fórech, v přizpůsobitelných internetových profilech či v článcích na wikiHow. HTML je užitečným nástrojem pro každého internetového uživatele a naučit se jeho základy vám zabere méně času, než byste si mohli myslet.

Část 1

Část 1 ze 2:
Získání základů HTML

1
Otevřete si HTML dokument. Pro psaní HTML dokumentů můžete použít většinu programů pro práci s textem, včetně Poznámkového bloku a Microsoft Word pro Windows, nebo TextEditu pro Mac. Otevřete si nový dokument a použijte tlačítko Soubor → Uložit jako z horního menu. Uložte dokument jako "Webová stránka", nebo změňte koncovku souboru z ".doc", ".rtf" či jakékoliv jiné na ".html" nebo ".htm".
- Může se vám zobrazit varovné sdělení, že bude váš dokument změněn z "rich textu" na "plain text", nebo že speciální formátování a obrázky nebudou správně uloženy. Toho si nevšímejte, HTML dokumenty tyto možnosti nevyužívají.
- Mezi .html a .htm soubory neexistuje žádný rozdíl, fungovat budou oba. ^{[1]
  X
  Zroj výzkumu}
2
Podívejte se na dokument v internetovém prohlížeči. Uložte prázdný dokument, pak v počítači najděte jeho ikonu a pro otevření souboru na ni dvakrát klikněte. Dokument by se měl otevřít jako prázdná stránka v prohlížeči. Když budete váš HTML dokument pomocí tohoto návodu upravovat, můžete pořád kontrolovat a pozorovat, jak se webová stránka mění.
- Uvědomte si, že takto ve skutečnosti nevytváříte online dostupnou webovou stránku. Stránka nebude pro ostatní lidi dostupná a vy pro její testování nepotřebujete internetové připojení. Nyní využíváte prohlížeč pouze k tomu, aby váš HTML dokument "přečetl" tak, jako by šlo o stránku na internetu.
3
Pochopte značkovací tagy. Značkovací tagy se na webové stránce nezobrazí jako obyčejný text. Namísto toho říkají vašemu prohlížeči, jak má stránku a její obsah zobrazit. "Počáteční tag" obsahuje instrukce, např. může říct prohlížeči, aby zobrazil text tučně. Budete také potřebovat "ukončovací tag", který dá prohlížeči najevo, na co se instrukce vztahují: v tomto příkladu bude veškerý text mezi počátečním a ukončovacím tagem tučný. Ukončovací tagy pište rovněž mezi ostré závorky, za první závorkou však začněte lomítkem.
- Počáteční tagy pište mezi ostré závorky: <sem patří počáteční tag >
- Ukončovací tagy pište mezi ostré závorky, za první závorku však vložte lomítko: </sem patří ukončovací tag >)
- Pokračujte ve čtení a naučíte se, jak zapisovat funkční značkovací tagy. Z tohoto kroku si stačí zapamatovat základní formát, v jakém se tagy píší: < > a </ >
- Pokud využíváte i další HTML příručky, můžete se setkat s tím, že jsou tagy nazývány "elementy" a text mezi tagy pak "obsah elementu".
4
Napište svůj první <html> tag. Každý html dokument začíná tagem <html> a končí tagem </html>. Tím říkáte prohlížeči, že vše mezi těmito tagy je HTML kód. Vložte tyto tagy do svého dokumentu:
- Na začátek dokumentu napište <html>
- Stiskněte několikrát za sebou tlačítko enter nebo return, čímž si vytvoříte prostor, a poté napište </html>
- Nezapomeňte vše ostatní z tohoto návodu psát mezi tyto dva tagy.
5
Vyplňte do dokumentu část <head>. Mezi tagy <html> a </html> napište počáteční tag <head> a ukončovací tag </head>. Udělejte si místo, abyste mohli psát mezi tyto dva tagy. Cokoliv, co je mezi nimi, se nakonec na samotné stránce nezobrazí. Zkuste zadat následující kód a podívejte se, kde se místo toho objeví:
- Napište mezi tagy <head> a </head> kód <title> a </title>
- Mezi tagy <title> a </title> napište Jak se naučit HTML - wikiHow.
- Dokument si uložte a otevřete jej v prohlížeči (nebo dokument uložte a okno prohlížeče pouze obnovte, máte-li v něm dokument už otevřený). Vidíte, co jste napsali na vršek okna prohlížeče nad adresní řádek?
6
Vytvořte sekci <body>. Celý zbytek tohoto jednoduchého dokumentu patří do sekce body, která se na webové stránce skutečně zobrazí. Za ukončovací tag </head>, ale zároveň před tag </html> napište <body> a </body>. Po zbytek tutoriálu přijde vše, co budete psát, právě mezi tagy body. Nyní by váš dokument měl vypadat takto (odrážky ignorujte):
- <html>
- <head>
- <title> Jak se naučit HTML - wikiHow </title>
- </head>
- <body>
- </body>
- </html>
7
Přidejte text s různým stylováním. Nyní je načase napsat něco, co v prohlížeči skutečně uvidíte! Cokoliv, co zapíšete mezi tagy body, se po uložení HTML dokumentu a obnovení stránky v prohlížeči zobrazí. Nepište teď nikam symboly < či >, jelikož by se je prohlížeč snažil interpretovat jako HTML instrukce, nikoliv jako obyčejný text. Zkuste napsat Ahoj světe! (nebo cokoliv jiného chcete), poté kolem tohoto textu zapište následující nové tagy a pozorujte, co se stane:
- <em>Ahoj světe!</em> se zobrazí jako "zvýrazněný text:" Ahoj světe!
- <strong>Ahoj světe!</strong> se zobrazí jako "ztučněný text:" Ahoj světe!
- <s> Ahoj světe!</s> se zobrazí s přeškrtnutím: ~~Ahoj světe!~~
- <sup>Ahoj světe!</sup> se zobrazí jako horní index: ^{Ahoj světe!}
- <sub>Ahoj světe!</sub> se zobrazí jako dolní index: _{Ahoj světe!}
- Zkuste následující kombinaci: jak bude vypadat <em><strong>Ahoj světe!</strong></em>?
8
Rozdělte text na odstavce. Když si zkusíte v HTML napsat pár řádků textu, všimnete si, že se v prohlížeči nezobrazí zalomení řádků. Musíte jej ručně nakódovat:
- <p>Toto je samostatný odstavec.</p>
- Za touto větou následuje konec řádku, <br> pak začíná tato věta.
  Toto je zároveň první tag z vám známých, který nevyžaduje ukončovací tag! Takovéto tagy se nazývají "nepárové".
- Vytvořte nadpisy pro zobrazení jmen částí stránek:
  <h1>text nadpisu</h1>: největší nadpis
  <h2>text nadpisu</h2> (nadpis druhého stupně)
  <h3>text nadpisu</h3> (nadpis třetího stupně)
  <h4>text nadpisu</h4> (nadpis čtvrtého stupně)
  <h5>text nadpisu</h5> (nejmenší nadpis)
9
Naučte se vytvořit seznam. Seznamy lze na vaši webovou stránku vypsat několika způsoby. Vyzkoušejte následující typy kódu a uvidíte, který se vám zalíbí. Všimněte si, že se jeden pár tagů nachází okolo celého seznamu (třeba tagy <ul> a </ul> pro "neuspořádaný seznam"), zatímco jednotlivé položky seznamu jsou uzavřeny do jiného páru tagů, např. <li> a </li>.
- Použijte tento kód k vytvoření seznamu s odrážkami:
  <ul><li>Jedna položka</li><li>Další položka</li><li>Další položka</li></ul>
- Nebo tento kód k vytvoření číslovaného seznamu:
  <ol><li>Položka 1</li><li>Položka 2</li><li>Položka 3</li></ol>
- Nebo tento kód k vytvoření seznamu se slovníčkem pojmů:
  <dl><dt>Coffee</dt><dd>- Horký nápoj</dd><dt>Leite</dt><dd>- Studený nápoj</dd></dl>
10
Vyšperkujte svou stránku zalomením řádků, vodorovnými čarami a obrázky. Nyní je načase zkusit přidat na vaši stránku i něco jiného než text. Vyzkoušejte si následující tagy. Budete potřebovat internetovou stránku, na které jsou uloženy obrázky, abyste získali adresu URL, kterou vložíte do tagu obrázku:
- Vložení řádku v HTML: <br> nebo <hr>
- Přidání obrázků: <img src="url_vašeho_obrázku">
11
Odkazujte na jiná místa na stránce. Tento kód můžete využít také k odkázání na další stránky a weby, prozatím se však (jelikož máte nejspíš pouze jedinou html stránku) zaměřme na "záložky", neboli konkrétní místa ve stránce, na která můžete odkazovat:
- Nejprve vytvořte záložku pomocí tagu <a> v bodě stránky, na který chcete odkazovat. Pojmenujte ji nějak popisně a zapamatovatelně:
  
  <a name="Tipy">Toto je text, kolem kterého umístíte záložku.</a>
- Pro odkázání na tyto záložky a jiné weby použijte <href>:
  
  <a href="url webové stránky, nebo jméno záložky na této stránce">Sem vložte text nebo obrázek, který se zobrazí jako odkaz. </a>
- Pro odkázání na záložku na jiné webové stránce přidejte za URL znak #, za kterým bude následovat jméno záložky. Například http://cs.wikihow.com/Jak-se-nau%C4%8Dit-HTML#Tipy odkazuje do sekce Tipy na této stránce.
Reklama

Část 2

Část 2 ze 2:
Zvládnutí pokročilejšího HTML

1
Naučte se používat atributy. Atributy se umisťují dovnitř samotných tagů a zajišťují další změny "obsahu elementu " mezi počátečním a ukončovacím tagem. Atributy se nikdy nepoužívají samostatně. Jsou zapisovány ve formátu jméno="hodnota", kde jméno je název atributu (např. "color" pro barvu) a hodnota udává konkrétní hodnotu (například "red" pro červenou barvu).
- S atributy jste se v podstatě setkali už dříve, pokud jste postupovali dle sekce se základním HTML v tomto návodu. Tagy <img> používají atribut src, záložky atribut name a odkazy atribut href. Vidíte, že tyto atributy dodržují formát ___="___"?
2
Experimentujte v HTML s tabulkami. K tvorbě tabulky či schématu je třeba několika různých tagů. Pohrajte si s těmito tagy, nebo si o tabulkách najděte detailnější informace.
- Začněte s tagy table, obklopujícími celou tabulku: <table></table>
- Tagy řádků okolo obsahu každého řádku: <tr>
- Nadpisy sloupců v prvním řádku: <th>
- Buňky v následujících řádcích:<td>
- Zde je příklad, jak tohle všechno společně funguje:
  
  <table><tr><th>Sloupec 1: Měsíc</th><th>Sloupec 2: Ušetřené peníze</th></tr><tr><td>Leden</td><td>100 Kč</td></tr></table>
3
Naučte se různé tagy ze záhlaví. Už jste se naučili tag <head>, který se objevuje na začátku každého dokumentu. Krom tagu <title> může tag záhlaví obsahovat následující druhy tagů:
- Meta tagy, které poskytují o webové stránce metadata. Tato data mohou být využita vyhledávači, když vyhledávací robot prochází a eviduje webové stránky. Aby byla vaše stránka pro vyhledávače lépe viditelná, použijte jeden či více počátečních tagů <meta> (ukončovací tagy nejsou třeba), každý právě s jedním atributem jména a jedním atributem obsahu, např.: <meta name="description" content="sem napište popis stránky">; nebo <meta name="keywords" content="sem napište klíčová slova, každé oddělené čárkou">
- Tagy <link> jsou využívány pro připojení jiných souborů do webové stránky. Většinou jsou využívány pro připojení souborů s CSS styly, které jsou vytvářeny pomocí jiného typu kódování, a využívány k úpravám vaší HTML stránky (pomocí přidání barev, zarovnání textu a spousty dalších věcí).
- Tagy <script> slouží ke spojení stránky s JavaScriptovými soubory, které dokážou měnit stránku na základě chování uživatele.
4
Pohrajte si s HTML, které najdete na webu. Nahlížení do zdrojového HTML kódu webových stránek je skvělým způsobem k rozšíření vašich znalostí. Můžete to udělat tak, že kliknete pravým tlačítkem na stránku, a poté vyberete „Zobrazit zdrojový kód“, „Zobrazit zdrojový kód stránky“, nebo podobnou možnost. Můžete také použít položku „Zobrazit“ v horním menu vašeho prohlížeče. Zkuste vyzkoumat, k čemu každý vám neznámý HTML tag slouží, nebo si jej vyhledejte.
- Přestože nemůžete upravovat webové stránky ostatních lidí, můžete si zkopírovat HTML, které najdete, do svého dokumentu. Pak si s ním už můžete hrát a zjišťovat, co která z možností dělá. Zapamatujte si však, že bez stylovacího souboru CSS odkazovaného na webové stránce nemůžete vidět kompletní barvy a formátování stránky.
5
Naučte se pokročilejší web design z detailních příruček. Na internetu existuje spousta zdrojů, ze kterých se můžete naučit řadu dalších HTML tagů, třeba W3Schools nebo Jak psát web. Také můžete najít instruktážní knihy o HTML, zkontrolujte ale, že byly vydány během posledních několika let, jelikož se v tomto odvětví čas od času odehrají změny a aktualizace. Ještě lepší je naučit se CSS, čímž získáte mnohem větší moc nad rozložením a vzhledem vašich webových stránek. Jakmile zvládnete CSS, dalším krokem je pro webové designery obvykle Javascript.

Reklama

Tipy

Mohlo by vás bavit vyhledávat si na internetu jednoduché webové stránky a hrát si s jejich kódem. Můžete zkoušet přesouvat text, měnit font, upravovat obrázky – nebo cokoliv se vám zlíbí!
Skvělým a zdarma dostupným programem je Notepad++, který se tváří jako běžný poznámkový blok, umožňuje však živé ukládání a testování kódu přímo v prohlížeči. (Zvládá také téměř jakýkoliv programovací jazyk: HTML, CSS, Python, Javascript, atd.)
Můžete si pořídit poznámkový blok a zapisovat si do něj všechny kódy. Když si na něco nebudete moci vzpomenout, jen blok otevřete a budete vědět. Jako užitečný rozcestník si můžete vytisknout tuto stránku.
XML a RSS se dnes stávají stále běžnější součástí webu. Jejich kód se může zdát být pro člověka těžko čitelný a srozumitelný, zvláště když si jej prohlížíte v souboru se zdrojovým kódem HTML. Tyto kódy však s kódem HTML jistým způsobem spolupracují.
Při kódování si dejte pozor na pečlivé strukturování kódu, aby byl snadno pochopitelný jak pro vás, tak pro ostatní. Používejte tagy  pro tvorbu HTML komentářů, které nezobrazují na samotné webové stránce, ale v pouze v jejím kódu.
U samotných značkovacích tagů v HTML na velikosti písmen nezáleží, za účelem standardizace a zajištění kompatibility s XHTML však silně doporučujeme používat malá písmena (tak jako na této stránce). ^{[2]
X
Zroj výzkumu}

Reklama

Varování

Některé tagy v posledních letech zastaraly a byly nahrazeny jinými, které umí udělat to samé a dokonce něco navíc, pokud to chcete.
Pokud vás zajímá validace vašich stránek, navštivte web W3 a naučte se validní HTML! Standardy HTML se časem mění a některé tagy jsou nahrazovány jinými, které v moderních prohlížečích fungují lépe.

Reklama

Věci, které budete potřebovat

Program na úpravu textu, např. Poznámkový blok (Windows), nebo TextEdit (Mac)
Papír/zápisník (volitelně)
Program na úpravu HTML, jako je Notepad++ (Windows) či TextWrangler (Mac) (volitelně)