Jak vytvořit HTML stránku

Stáhnout PDF
Spoluautorem článku je Pracovnící wikiHow

Reference

Stáhnout PDF

HTML (HyperText Markup Language) je základním jazykem pro vytváření webových stránek. Byl navržen jako jednoduchý flexibilní kódovací jazyk a kterákoliv internetová stránka byla vytvořena pomocí nějaké formy tohoto kódu (ColdFusion, XML, XSLT). Je snadné naučit se základy HTML, zvládnutí všech jeho funkcí však může být během na dlouhou trať. Jakmile se naučíte základy HTML, můžete začít objevovat také základy CSS, díky němuž budou vaše webové stránky barevnější a záživnější.

Část 1
Část 1 ze 4:

Vytvoření dokumentu

  1. Obrázek nazván Write an HTML Page Step 1
    1
    Otevřete si jednoduchý textový editor. Dobrou volbou je Poznámkový blok, který je k dispozici zdarma. HTML můžete psát ve většině textových editorů, pokročilejší software s automatickými formátovacími funkcemi vám však může ztížit strukturování HTML stránky.[1]
    • Nedoporučujeme používat program TextEdit, jelikož často ukládá soubory ve formátu, který váš internetový prohlížeč nerozpozná jako HTML.
    • Můžete také využít online HTML editor. Specializované HTML editory začátečníkům používat nedoporučujeme. [2]
  2. Obrázek nazván Write an HTML Page Step 2
    2
    Uložte si soubor jako webovou stránku. Klikněte na Soubor → Uložit jako v horním menu programu. Změňte formát souboru na „Webová stránka,“ „Web Page,“ „.html“ nebo „.htm“. Uložte si soubor na místo, kde jej snadno najdete.
    • Všechny čtyři možnosti uložení provedou v důsledku to samé.
  3. Obrázek nazván Write an HTML Page Step 3
    3
    Otevřete soubor ve webovém prohlížeči. Když na soubor dvakrát kliknete, měl by se automaticky otevřít v novém okně vašeho prohlížeče. Můžete také otevřít váš prohlížeč (například Firefox či Internet Explorer) a pomocí tlačítka Soubor → Otevřít soubor vybrat váš dokument.
    • Tato webová stránka není online, můžete ji proto zobrazit jen na svém počítači.
  4. Obrázek nazván Write an HTML Page Step 4
    4
    K zobrazení uložených změn v dokumentu obnovte internetovou stránku. Napište do vašeho prázdného dokumentu následující: <strong>Ahoj</strong>. Uložte dokument. Obnovte okno v prohlížeči. Na vršku stránky by se vám mělo zobrazit tučně vypsané slovo „Ahoj“. Kdykoliv budete chtít v průběhu tohoto návodu otestovat váš nový HTML kód, uložte soubor .html a pak obnovte okno ve vašem prohlížeči. Tak uvidíte, jak váš prohlížeč zobrazuje daný HTML kód.
    • Pokud se vám v prohlížeči zobrazují i slova „<strong>“ a „</strong>“, váš dokument není správně rozpoznán jako HTML. Zkuste použít jiný textový editor, nebo jiný prohlížeč.
  5. Obrázek nazván Write an HTML Page Step 5
    5
    Pochopte tagy. Instrukce HTML jsou zapsány v „tazích“ („tag“ = angl. „značka“), které říkají prohlížeči, jak interpretovat a zobrazovat vaši webovou stránku. Tagy jsou vždy <takto> zapsány mezi ostrými závorkami a na webové stránce se nezobrazují. Ve výše uvedeném příkladu jste je již použili:
    • <strong> je „počátečním“, nebo také „otevíracím“ tagem. Cokoliv, co napíšete za tímto tagem, bude definováno jako „zesílený text“ (na webové stránce obvykle vyznačený ztučněním).
    • </strong> je „ukončovacím“, nebo také „uzavíracím“ tagem, který poznáte díky symbolu / (lomítko). Tento symbol určuje, kde končí tučný text. Většina tagů (ačkoliv ne všechny) musí být ukončena uzavíracím tagem, proto pamatujte na jejich vkládání.
  6. Obrázek nazván Write an HTML Page Step 6
    6
    Vytvořte dokument. Smažte všechno napsané ve vašem HTML dokumentu. Začněte znovu a opište přesně následující text (odrážky vynechejte). Tento HTML kód říká prohlížeči, jaký typ HTML budete používat, a že veškerý váš HTML kód bude obsažen mezi tagy <html> a </html>.[3]
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • </html>
  7. Obrázek nazván Write an HTML Page Step 7
    7
    Přidejte tagy head a body. HTML dokumenty jsou rozděleny do dvou sekcí. Sekce mezi tagy „head“ (záhlaví stránky) slouží k umístění speciálních informací, jako je titulek stránky. Sekce mezi tagy „body“ (tělo stránky) obsahuje hlavní obsah webové stránky. Přidejte oba tyto tagy do vašeho dokumentu a nezapomeňte uvést uzavírací tagy. Nový text, který budete přidávat, je zobrazen tučně:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • </head>
    • <body>
    • </body>
    • </html>
  8. Obrázek nazván Write an HTML Page Step 8
    8
    Dejte své stránce titulek. Většinu tagů patřících do záhlaví stránky nemusíte jako začátečník znát. Použití tagu title je však jednoduché a určuje, co se zobrazí v okně nebo v záložce vašeho prohlížeče. Vložte otevírací a uzavírací tagy title do záhlaví stránky a mezi ně pak napište libovolný titulek:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>Má první HTML stránka.</title>
    • </head>
    • <body>
    • </body>
    • </html>
    Reklama
Část 2
Část 2 ze 4:

Formátování textu

  1. Obrázek nazván Write an HTML Page Step 9
    1
    Přidejte text do těla stránky. V této sekci návodu budeme pracovat pouze s částí kódu mezi tagy <body> a </body>. Zbytek textu ve vašem dokumentu se měnit nebude, proto budeme šetřit místem a nebudeme jej neustále opakovat. Zkuste něco napsat mezi tagy <body> a </body> a tento text se objeví jako vůbec první obsah vaší webové stránky. Například:
    • <body>
    • Učím se psát HTML stránky podle příručky na wikiHow.
    • </body>
  2. Obrázek nazván Write an HTML Page Step 10
    2
    Přidejte do textu nadpisy. Uspořádejte svůj text pomocí nadpisových tagů, které říkají prohlížeči, aby text mezi nimi zvětšil. Nadpisy jsou také používány vyhledávacími boty a dalšími nástroji k určení obsahu a struktury vaší stránky. <h1> </h1> je nadpisem nejvyšší úrovně, stejně pak můžete vytvářet nadpisy nižší úrovně až po <h6> </h6>. Vyzkoušejte je na vaší stránce:
    • <body>
    • <h1>Vítejte na mé webové stránce.</h1>
    • Učím se psát HTML stránky podle příručky na wikiHow.
    • <h3>Mé dnešní cíle:</h3>
    • <h5>Splněné cíle:</h5>
    • Naučit se používat nadpisy.
    • <h5>Nesplněné cíle:</h5>
    • Naučit se další tagy k formátování textu.
    • </body>
  3. Obrázek nazván Write an HTML Page Step 11
    3
    Naučte se další tagy k formátování textu. Už znáte tag „strong“, existuje ale spousta dalších způsobů, jak formátovat váš text. Zkuste si prohrát s následujícími tagy, nebo přidat několik tagů okolo jednoho řetězce textu. Nezapomeňte vždy přidat na konec ukončovací tag!
    • <strong> Důležitý text, v prohlížeči zobrazený tučně.</strong>
    • <em> Zdůrazněný text, v prohlížeči zobrazený kurzívou. </em>
    • <small> Mírně zmenšený text. Pokud jej použijete v nadpisu, velikost se automaticky přizpůsobí. [4] </small>
    • <del> Přeškrtnutý text, který už pozbyl platnosti, není relevantní. </del>
    • <ins> Text, který byl vložen dodatečně, zobrazuje se podtržený.</ins>
  4. Obrázek nazván Write an HTML Page Step 12
    4
    Pozicujte text na stránce. Nejspíš jste si všimli, že klávesa „enter“ nestačí k přesunutí textu na další řádek. Následující tagy vám pomohou srovnat váš text do odstavců, nastavit zalomení řádků a upravit jej dalšími způsoby.
    • <p> je zkratkou pro „paragraph“ (angl. „odstavec“) a dokáže udržet veškerý text mezi těmito tagy v jediném odstavci, odděleném od textu nad a pod ním<p>
    • <br> Tento tag provede zalomení řádku. Neexistuje k němu ukončovací tag, protože zalomení řádku nemění žádný jiný obsah dokumentu. Užívejte jej k řádkování adres či básní, ale ne pro oddělování odstavců. [5]
    • <pre> Pokud potřebujete určitý text zobrazit zcela přesně, tento tag nastaví text uvnitř na font s fixní šířkou (každé písmeno je stejně široké) a umožní vám vytvářet mezery i zalomení řádku stejně jako při běžném psaní. Nikoliv tedy pomocí tagů. [6] </pre>
    • <blockquote> Tento tag ohraničuje text citovaný z jiného zdroje.</blockquote> Zdroj následně můžete určit pomocí <cite> tagu „cite“ </cite> .
  5. Obrázek nazván Write an HTML Page Step 13
    5
    Přidejte do textu neviditelné komentáře. Komentáře nejsou na webové stránce zobrazeny. Umožňují vám vytvářet si v HTML dokumentu vlastní poznámky bez zásahu do obsahu webu. <!--- Do tohoto tagu zapište své komentáře.---> Nevkládejte žádný ukončovací tag.
    • Tagy, které se zapisují samostatně a bez ukončování nazýváme „prázdné“.
  6. Obrázek nazván Write an HTML Page Step 14
    6
    Teď vše spojte dohromady. Nejlepším způsobem, jak si tyto tagy zapamatovat, je použít je na vaší vlastní webové stránce. Zde vidíte příklad, který využívá tagy ze všech kroků, které jste se zatím naučili. Zkuste nejdříve hádat, jak bude výsledek vypadat v okně prohlížeče. Pak text zkopírujte do HTML dokumentu a své předpoklady ověřte.
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title> Má první HTML stránka.</title>
    • </head>
    • <body>
    • <h1> Vítejte na mé webové stránce.</h1>
    • Doufám, že se vám tato stránka líbí!<p><strong>Vytvořil jsem ji jen pro vás.</strong>
    • <h2>Část první: Jak jsem objevil HTML</h2>
    • <!---Soukromá poznámka: zapamatuj si, že „h1“ je větší nadpis než „h2“ --->
    • HTML se učím <del>jednu</del> <ins>dvě</ins>hodiny, takže už jsem expert.
    • </body>
    • </html>
    Reklama
Část 3
Část 3 ze 4:

Přidávání odkazů a obrázků

  1. Obrázek nazván Write an HTML Page Step 15
    1
    Naučte se používat atributy. Tak v sobě může obsahovat další informace, které nazýváme atributy. Ty se zobrazují uvnitř tagu samotného ve formátu jméno-atributu="specifická-hodnota". Téměř každý HTML tag může mít například atribut title:
    • <p title="Úvod">Zde je úvodní odstavec</p> nastavuje odstavci titulek „Úvod“, který se obrazí, pokud na webové stránce přejedete nad odstavcem myší.
  2. Obrázek nazván Write an HTML Page Step 16
    2
    Odkazujte na další webové stránky. Použijte <a> </a> tag k vytvoření odkazu na jinou webovou stránku. Vložte URL adresu odkazované webové stránky do odkazu pomocí atributu href. Následující příklad odkazuje na stránku, kterou právě teď čtete.
    • <a href="http://www.wikihow.com/Jak-vytvorit-HTML-stranku">Návštěvníci vaší stránky mohou kliknutím na tento odkaz přejít na odkazovanou stránku.</a>
  3. Obrázek nazván Write an HTML Page Step 17
    3
    Přidejte k tagům atribut id. Dalším atributem, který může obsahovat téměř každý HTML tag, je prvek "id". Napište id="priklad" nebo jakékoliv jiné slovo, které neobsahuje mezery a diakritiku, dovnitř libovolného tagu.[7] Vaši stránku to nijak viditelně neovlivní, ale v dalším kroku budeme tento atribut potřebovat.
    • Do vašeho dokumentu můžete přidat např. toto: <p id="priklad">Tento odstavec bude použit jako demonstrace funkce atributu id</p>
  4. Obrázek nazván Write an HTML Page Step 18
    4
    Odkažte na prvek s konkrétním id. Nyní můžeme použít hypertextový tag <a> </a> k odkazování na další místo v rámci jediné stránky. Namísto adresy URL použijeme symbol # s hodnotou id, na které odkazujeme. Například <a href="#priklad">Tento text odkazuje na odstavec s id "priklad".</a>
    • Všechny hodnoty HTML kódu jsou tzv. „case-insensitive“, nezáleží u nich tedy na velikosti písmen.[8] "#PRIKLAD" a "#priklad" odkazují na stejné místo.
    • Je-li vaše stránka dostatečně malá na to, aby se v prohlížeči zobrazila celá, nejspíše nepostřehnete žádnou změnu. Zmenšujte okno prohlížeče, dokud se nezobrazí posuvník, a pak zkuste na odkaz kliknout znovu.
  5. Obrázek nazván Write an HTML Page Step 19
    5
    Přidejte obrázek. Tag<img> je prázdným tagem, takže jej nemusíte nijak ukončovat. Veškeré informace, které prohlížeč potřebuje k zobrazení obrázku, přidáme pomocí atributů. [9] Následující příklad zajistí zobrazení loga wikiHow. Za ním následují vysvětlení pro jednotlivé atributy:
    • <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="wikiHow logo">
    • Atribut src=" " říká prohlížeči, kde má obrázek hledat. (Pamatujte, že zobrazování obrázků z cizí webové stránky se považuje za neslušnost. Obrázek navíc zmizí, pokud původní stránka zanikne či nebude dostupná.)
    • Atribut style=" " umožňuje provádět s obrázkem spoustu věcí, především se však používá k nastavení šířky a výšky obrázku v pixelech. (Druhou možností je použití samostatných atributů width=" " a height=" ", což ale může způsobovat problémy při použití CSS. [10] )
    • Atribut alt=" " obsahuje stručný popisek obrázku, který se uživateli zobrazí, pokud se obrázek nepodaří načíst. Tento atribut je velmi potřebný také pro funkci čteček obrazovky, používaných zrakově postiženými uživateli. [11]
    Reklama
Část 4
Část 4 ze 4:

Rozšiřování znalostí a zpřístupnění stránky online

  1. Obrázek nazván Write an HTML Page Step 20
    1
    Validujte své HTML. HTML validace hledá chyby ve vašem kódu. Pokud se vaše webová stránka nezobrazuje správně, validace vám může pomoci najít příčinu problému. Můžete pomocí ní také prohloubit své znalosti HTML, jelikož identifikuje kód, který se sice zobrazuje správně, avšak nevyhovuje doporučením dle inovovaných standardů HTML. Použití nevalidního HTML kódu neučiní vaši stránku nepřístupnou, může však způsobovat problémy či rozdílné zobrazení v různých prohlížečích.
    • Vyzkoušejte zdarma dostupnou online validační službu od webového konsorcia W3C, nebo si najděte jiný HTML 5 online validátor.
  2. Obrázek nazván Write an HTML Page Step 21
    2
    Naučte se další tagy a atributy. Existuje mnohem více HTML tagů a atributů; stejně tak i učebních příruček, kde se o nich dozvíte:
    • Navšivte w3schools a HTML Dog, kde najdete další návody a detailní seznamy tagů.
    • Vyberte si webovou stránku, jejíž vzhled se vám zamlouvá, a použijte v prohlížeči funkci „Zobrazit zdrojový kód stránky“ k nahlédnutí do jejího HTML kódu. Zkopírujte si kód do svého dokumentu a hrajte si s jeho úpravami – tak nejlépe zjistíte, jak funguje.
    • Přečtěte si články o vytváření HTML tabulek, využití meta tagů ke zlepšení viditelnosti pro vyhledávače, nebo o užívání tagů div a span při stylování pomocí CSS.
  3. Obrázek nazván Write an HTML Page Step 22
    3
    Zpřístupněte svou webovou stránku online. Vyberte si webhostingovou službu a nahrajte na svou osobní doménu tolik webových stránek, kolik se vám jen zlíbí. K tomu budete potřebovat software pro nahrávání na FTP, který však už rovnou poskytuje většina hostingových služeb.
    • Odkazujete-li na stránky či obrázky v rámci vašeho vlastního webu, nemusíte používat celou adresu. Pokud se například vaše doména jmenuje www.superzkusenyhtmlkoder.com, pak <a href="/denik/pondeli.html">text uvnitř těchto tagů</a> odkazuje na adresu "www.superzkusenyhtmlkoder.com/denik/pondeli.html"
  4. Obrázek nazván Write an HTML Page Step 23
    4
    Přidejte stylování pomocí CSS. Pokud vaše HTML stránka vyhlíží poněkud spartánsky, zkuste si osvojit základy CSS, pomocí nichž přidáte barvy i další fonty písma a získáte větší kontrolu nad rozmístěním prvků stránky. Propojení CSS stylesheetu (souboru s CSS atributy) s HTML stránkou získáte možnost rychle a automaticky upravovat styl veškerého textu opatřeného určitým tagem. Můžete si zkusit pohrát se základním stylesheetem přímo tady, nebo se ponořit do mnohem hlubšího návodu na stránkách HTML Dog's CSS guide.
  5. Obrázek nazván Write an HTML Page Step 24
    5
    Přidejte do vaší stránky JavaScript. JavaScript je programovací jazyk používaný k rozšíření funkcionality HTML stránek. Příkazy JavaScript se vkládají mezi otevírací a uzavírací tagy <script> </script> a mohou být využity pro vkládání interaktivních tlačítek, matematické výpočty a mnoho dalšího. Více se dozvíte na stránkách w3c examples.
    Reklama

Tipy

  • V tomto návodu využíváme doctype (deklaraci typu dokumentu) „loose HTML 4.0.1 transitional“, jelikož je pro začátečníky snadno pochopitelná. [12] Namísto ní byste měli používat doctype (<!DOCTYPE html>), který nutí prohlížeč interpretovat kód ve striktním HTML 5 formátování. Přestože zatím není široce rozšířen, jde o aktuálně doporučovaný standard.
Reklama

Varování

  • HTML je zamýšleno jako univerzální formát k uložení obsahu. Není určeno ke specifikaci zobrazení webu, jako je barva pozadí či přesné rozmístění prvků stránky. Ačkoliv HTML nabízí příslušné formátovací tagy, k vytváření snadno udržovatelného a upravitelného webu důrazně doporučujeme používat CSS.
Reklama

Věci, které budete potřebovat

  • Jednoduchý textový editor jako Poznámkový blok či TextEdit
  • Webový prohlížeč, například Internet Explorer nebo Mozilla Firefox
  • (Volitelně) HTML editor, jakým je třeba Adobe Dreamweaver, Aptana Studio či Microsoft Expression Web

Reference

  1. ↑ http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
  2. ↑ http://htmldog.com/guides/html/beginner/gettingstarted/
  3. ↑ http://www.w3.org/QA/Tips/Doctype
  4. ↑ HTML Tutorials
  5. ↑ http://www.w3schools.com/tags/tag_br.asp
  6. ↑ http://www.w3schools.com/tags/tag_pre.asp
  7. ↑ http://www.w3schools.com/tags/att_global_id.asp
  8. ↑ http://www.w3schools.com/tags/att_global_id.asp
  9. ↑ http://htmldog.com/guides/html/beginner/images/
  1. ↑ http://www.w3schools.com/html/html_images.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp
  3. ↑ http://www.htmlbasictutor.ca/doctype-declaration.htm

O tomto wikiHow

Pracovnící wikiHow
Spoluautorem článku je :
Pracovnící wikiHow
Spisovatel na wikiHow
Spoluatorem tohoto článku je tým zkušených editorů a badatelů, kteří ověřují jeho přesnost a srozumitelnost.

Na wikiHow je Tým manažerů obsahu který pečlivě sleduje práci editorů, aby se ujistili, že každý článek splňuje náš standart vysoké kvality. Tento článek byl zobrazen 5 547 krát
Kategorie: Materiál
V jiných jazycích
Stránka byla zobrazena 5 547 krát.

Pomohl vám tento článek?

Reklama