Jak se naučit HTML

2 Díly:Získání základů HTMLZvládnutí pokročilejšího 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
Získání základů HTML

  1. 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 SouborUlož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]
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

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

  1. 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. 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. 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. 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. 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.

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 <!--Sem vložte komentář --> 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]

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.

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ě)

Informace o článku

Kategorie: Používání webových aplikací

V jiných jazycích:

English: Learn HTML, Español: aprender HTML, Deutsch: HTML lernen, Português: Aprender HTML, Italiano: Imparare il Linguaggio HTML, Русский: выучить HTML, Français: apprendre le HTML, Bahasa Indonesia: Belajar HTML, Nederlands: HTML leren, العربية: تعلم لغة HTML, Tiếng Việt: Học Ngôn ngữ HTML, हिन्दी: HTML सीखें, 한국어: HTML 배우기, ไทย: หัดเขียนเว็บด้วย HTML

Stránka byla zobrazena 1 128 krát.

Byl tento článek přesný?