HTML pro začátečníky aneb jak začít psát web

Používání značkovacího jazyka HTML patří mezi ty nejzákladnější dovednosti webových developerů. I přesto se však netýká pouze vývoje. Základní HTML tagy a principy jejich fungování by měli ovládat i designéři, manažeři, blogeři nebo správci webů ve WordPressu. O HTML pro začátečníky pak hovoří následující řádky, které poradí, jak web začít psát a také základní poučky pro jeho správu.

Co je HTML?

HTML, z anglického Hypertext Markup Language, je hypertextový značkovací jazyk určený k vytváření jednoduchých webových stránek. Byl představený na přelomu 80. a 90. let minulého století, odkud se vyvinul až do své aktuální podoby – HTML 5. Spolu s ním vznikl také protokol http zajišťující komunikaci mezi servery a přenos souborů.

Původním smyslem HTML bylo vytváření, formátování a stylování zdrojových dokumentů internetových stránek. Postupem času se ovšem zmíněné stylování přesunulo pod křídla takzvaných kaskádových stylů, které nabízejí mnohem více možností nejen z pohledu designu, ale i animací. Kód stránek je navíc nyní čistší a snazší na editaci. Například úpravu všech nadpisů H2 je totiž možné provést pouze na jednom řádku kódu.

Co jsou HTML tagy a k čemu je používáme?

HTML používá definované značky, nazývané tagy. Tagům přiřazujeme atributy a hodnoty, jež jednotlivým prvkům stránky přikládají určitou roli. Prostřednictvím HTML tagů tak například určujeme, kde budou odkazy a kam budou odkazovat nebo kde bude obrázek a odkud je bude prohlížeč čerpat.

Tagy uzavíráme do špičatých závorek <tag> a dělíme je na párové/nepárové. Párové tagy musejí být ukončeny lomítkem a původním tagem, opět ve špičatých závorkách - </tag>. Většina HTML tagů je párových, existují ovšem výjimky, jako například <img> čili značka pro obrázek. Používání tagů a jejich validita je ovlivněna normami či doporučeními nezávislého konsorcia W3C. Na stránkách konsorcia můžeme nalézt i validátor, který kód zkontroluje a napoví nám, zda v něm nemáme chyby.

Z výše uvedeného vyplývá, že tvorba webu v HTML hojně vyžaduje používání špičatých závorek. Proto se nám mohou hodit následující klávesové zkratky: pro levou závorku pravý ALT+? a pro pravou pravý ALT+ - viz ilustrace níže.

Text, například nadpis, můžeme obalit i více HTML tagy. Je ovšem důležité nejprve ukončit vnořenou značku a až poté první v pořadí: <p><strong>tučný text</strong></p>. Pokud bychom pořadí otočili, tak se obsah nemusí zobrazit správně. Stejně tak je důležité každý párový tag ukončit.

HTML dokument/soubor

Zdrojový soubor webové stránky je ve své podstatě textový dokument. Tvoříme jej tedy podobně, jako běžný soubor ve Wordu, avšak s využitím zmíněných HTML tagů a atributů. Ty si pak internetový prohlížeč (Opera, Chrome) zvládne přeložit a zobrazit z nich požadovaný obsah – obrázky, odkazy, grafy, tabulky atd.

K tomu, aby si prohlížeč zdrojový soubor zvládl správně přeložit je ovšem zásadní dodržovat správnou syntax – ostatně stejně jako u dalších programovacích jazyků, jako je PHP, C# i psané podoby mateřského jazyka.

Zbytek už je v podstatě stejný jako u dalších textových dokumentů. K vytváření webové stránky pak typicky využíváme speciálních editorů, jež nás upozorňují na chyby v textu a napovídají tagy. V případě nouze nebo pro ukázku lze ovšem využít i Poznámkový blok, který je standardní součástí Windows.

Název dokumentu by měl být bez diakritiky a bez mezer (nazev_dokumentu) a uložený s koncovkou .html (nazev_dokumentu.html). Pro domovskou stránky se obvykle používá označení index.html, jelikož ji prohlížeče automaticky vyhodnocují jako homepage a současně spouští jako první ze zdrojového adresáře.

Pro každou stránku webu (kontakty, o nás, reference, naše služby atd.) bychom pak měli vytvořit jeden HTML soubor. Všechny soubory následně umístíme do jedné složky a tu pak na server, odkud z ní prohlížeče čerpají. Pro účely testování ovšem poslouží i plocha počítače, kde lze HTML soubor otevřít a testovat i bez připojení k internetu nebo před zakoupením domény.

Struktura HTML dokumentu

Každý ze zmíněných HTML dokumentů by měl zachovávat alespoň základní strukturu:

• !DOCTYPE html – deklarace typu dokumentu,
• html – kořenový element, který zastřešuje celý dokument,
• head – neboli hlavička určující metadata pro dokument, typicky obsahuje, scripty, kusy JavaScript kódu, odkaz na CSS či titulek,
• meta – kódování (UTF-8 zajišťuje podporu české diakritiky),
• title – titulek stránky, který se následně zobrazuje v záložce prohlížeče,
• body – obsah dokumentu.

V čem tvořit webové stránky

Předchozí odstavce již zmínily, že můžeme k tvorbě HTML dokumentu využít i běžný Poznámkový blok ve Windows. Pokud však chceme použít sofistikovanější řešení, máme v zásadě na výběr ze dvou typů editorů – WYSIWYG a textových.

Editory What You See Is What You Get (WYSIWYG) – česky dostaneš co vidíš, přinášejí okamžitou představu o podobě webové stránky. Může se jednat například o předpřipravená řešení typu WordPress, kde k tvorbě stránek nutně nepotřebujeme znalost HTML ani CSS. Takový kód je ovšem plný „balastu“ a elementů, jež editor vygeneroval, aniž bychom je skutečně potřebovali. Výsledek pak vždy nemusí zcela odpovídat původnímu očekávání.

S využíváním textových editorů máme zkrátka vše více ve vlastních rukách. Sami volíme HTML tagy, ručíme za jejich validaci i vhodné použití. Příkladem textových editorů určených pro tvorbu webu mohou být bezplatné programy PsPad, Sublime Text nebo Komodo. Komerčním řešením pak třeba Adobe Dreamweaver, který navíc disponuje WYSIWYG modulem, přičemž si můžeme vybrat, zda chceme stránky přímo kódovat či nikoli.

Základní HTML tagy

Když jsme si ujasnili, co vlastně HTML je, k čemu se používají HTML tagy, jak a v čem vytvořit HTML soubor, přichází na řadu to nejhlavnější – výčet základních HTML tagů. HTML značky členíme na:

• strukturální,
• popisné,
• stylistické.

Strukturální řeší strukturu dokumentu neboli který text bude figurovat jako nadpis, který jako odkaz nebo odstavec. Popisné značky řeší obsah prvku a stylistické jeho vzhled – například tučné písmo. Přičemž bychom měli stylistické značky brát s rezervou a snažit se je, v co možná největší míře, nahradit kaskádovými styly. Mezi základní HTML tagy tedy řadíme:

• h1-h6 – nadpisy jejichž velikost se se zvyšujícím číslem snižuje,
• hr – horizontální čára,
• ul – odrážkový seznam,
• li – jedna položka na seznamu,
• ol – číslovaný seznam,
• br – zalomení řádku,
• <!--!--> - komentář.

Tagy pro stylování textu:

• b – tučný text,
• i – text psaný kurzívou,
• u – podtržený text,
• sub – dolní index,
• sup – horní index.

Zvláštní kapitolou jsou pak odkazy a obrázky. Odkazy mohou být buď absolutní, nebo relativní. Absolutní nás odkazují na danou webovou stránku, zatímco relativní na cestu ke konkrétnímu souboru – pokud chceme zadat pouze název souboru, tak jak je na ilustračním obrázku níže, musíme soubor umístit do stejné složky jako zdrojové HTML.

To stejné platí pro práci s obrázky, kde využíváme tag <img>. Atribut alt používáme jako popis obrázku a usnadňujeme tak práci googlebotům, kteří jim tímto způsobem lépe porozumí.

Pokud potřebujete s tvorbou webových stránek nebo jejich vylepšením pomoct, tak nás neváhejte kontaktovat, rádi vám poradíme a postaráme se o kompletní realizaci. K tvorbě webu mimo HTML a CSS používáme také javascriptové frameworky, které stránkám dodají patřičný šmrnc, dynamiku i pokročilé funkce.