I když jste pravděpodobně nikdy web netvořili, zkratku HTML jste již mohli někde vidět nebo o ní slyšet. Není divu, HTML patří k základům webu a web je základ všeho viditelného internetu.
Nemusíte znát anglický význam zkratky HTML 1, třebaže to neuškodí.
Ono se popravdě hodí, když trochu anglicky umíte…, pak to člověku dává větší smysl – všechny zkratky jsou odvozeny od anglických slov.
HTML je nejzákladnější typ `kódu` 2 a také patří k těm nejjednodušším 3 🙂
Ale abyste nebyli moc pyšní, až se naučíte používat pár značek, pamatujte, že
1. HTML není programovací jazyk
HTML je značkovací jazyk. Pomocí značek vymezujeme oblasti (například v textu) a definujeme tak jejich smysl a účel:
Co je nadpis, co je odstavec, co je důležité a co méně.
2. Zavři za sebou!
HTML značky jsou párové! 4 Jejich základní podoba (bez atributů 5) je stejná; zavírací značka má navíc lomítko.
Nezapomínejte ke každé otevírací značce mít jednu zavírací. Zkuste nejprve napsat obě značky, a pak dovnitř doplnit obsah. Nebo naopak – napište obsah a pak jej `obalte` značkami – jednu dopředu, jednu dozadu.
Ať tak či tak, věnujte pozornost tomu, že většina HTML značek je párových.
3. HTML není omalovánka!
V pravěku mělo HTML ještě jeden účel: upravovat vzhled. Mohli jste snadno měnit barvy písma a pozadí, určovat velikost buněk v tabulce a dokonce dělat blikající text! Ale to už dávno neplatí. Více jak 20 let už t máme CSS. Ne že by to nyní nešlo, stále můžete do HTML napsat <font color="red">barva dobrá?</font>, ale je to prasárna všeobecně považováno za `bad practice`.
HTML slouží pro sémantiku 6. Pro definici vzhledu (barva, velikost, pozice, eventálně animace) tu máme CSS.
4. Nesmí se to křížit!
K čemu bychom jen HTML a jeho způsob noření značek přirovnal? Znáte matrjošky? Česky bábušky. Anebo lépe, představte si sadu papírových krabic. Všechny mají víko. V té největší máme dvě menší. V každé menší je další krabice, ještě menší. A tak dál. Někde dokonce jsou v krabici dvě menší, stejně velké malé.
V této analogii spodek krabice je otevírací HTML značka, a víko zavírací HTML značka. A je jasné, že každou krabici můžete uzavřít jen k ní příslušným víkem. A nemůžete žádnou krabici, ani tu malou, nechat bez víka, a zároveň nemůžete nikde nechat samotné víko.
Vše bude jasnější, až budeme probírat konkrétní příklad. Při HTML (nejen, totéž platí i pro další značkovací normy, dokonce i pro programovací jazyky) dochází k noření do dalších úrovní (stále menší a menší krabice) opravdu často. Aby se v tom člověk vyznal, vymyslel si vizuální pomůcky – nejčastější je tzv. odsazení. Každá úroveň se odlišuje od předchozí tím, že začíná o několik mezer dále od levého kraje. Ale to už opravdu předbíháme…
Chci to konečně vidět!
Kde je to HTML? Jak vypadá? Jak se to píše? Chci to konečně vidět!
Chápu. Na závěr tohoto článku si ukážeme pár nejpoužívanějších HTML značek (anglicky: `tag`).
| značka (tag) |
význam |
|---|---|
| <html> | kořenový element. vše ostatní je uvnitř |
| <head> | hlavička. `neviditelná`, ale důležitá |
| <title> | titulek. Název stránky, viditelný na panelu okna prohlížeče a např v záložkách, ale také ve výpisu vyhledávání googlu. (více v SEO) |
| <body> | Určuje tělo dokumentu. Všechen viditelný obsah patří dovnitř této značky. |
| <h1> | Nadpis stránky. Ten nejdůležitější nadpis. |
| <p> | Odstavec. Je dobrým zvykem psát odstavce textu do této značky. |
| <a> | Hyperlink. Použijte pro tvorbu ‘klikacích’ odkazů. |
| <img> | Slouží k vložení obrázku do webové stránky. |
| <div> | |
| <span> |
Kam dál?
Tady: najdete vaše první HTML.
A tady zase seznam všech značek.
Vyberte si a hodně štěstí 🙂
- HTML = HyperText Markup Language
- Jasně, ty puristo. Pro tebe tenhle článek není. Tak nevyrušuj.
- Třeba takový Markdown je ještě jednodušší a obsah se s ním píše rychleji, ale pro použití na webu stejně bývá konvertován do HTML.
- Existuje pár výjimek. Například br, hr, img, link, …
- O atributech si musíme určitě taky říct, ale teď ne, až za chvilku.
- https://cs.wikipedia.org/wiki/Sémantika