
HTML: základy

Pomocí HTML můžeme označovat význam a zobrazení textu, například takto:
Toto je <b>tučný</b> text. A toto <i>kurzíva</i>.
Přehled běžných značek:
| h1–h6 | headline | nadpis 1. až 6. úrovně | ano | 
| p | paragraph | odstavec | ano | 
| pre | preformatted | předformátovaný text | ano | 
| b | bold | tučné písmo | ano | 
| i | italics | kurzíva (skloněné písmo) | ano | 
| strong | strong | důležitý text | ano | 
| em | emphasis | zdůrazněný text | ano | 
| code | code | kód (neproporcionální písmo) | ano | 
| a | anchor | odkaz | ano | 
| img | image | obrázek | ne | 
| br | break | zalomení řádku | ne | 
| hr | horizontal rule | vodorovná čára | ne | 
Některé značky udávají význam textu, např. <strong> a <em>, zatímco jiné udávají pouze způsob zobrazení, např. <b> a <i>. Typické zobrazení <strong> a <em> je tučné písmo a kurzíva, to však lze upravit pomocí kaskádových stylů (CSS).
Párové značky lze zanořovat, například tučnou kurzívu zapíšeme <b><i>takto</i></b>. Značky nelze „křížit“, tj. před uzavřením značky musíme vždy nejprve uzavřít všechny zanořené značky. Nepárové značky nemají žádný obsah ani ukončovací značku, např. <br>.
Mezery a nové řádky
Libovolné množství mezer a nových řádků v HTML kódu se zobrazí jako jedna mezera. Pokud potřebujeme nový řádek, použijeme značku <br>. Pokud chceme zachovat přesné počty mezer a nových řádků, použijeme značku <pre>:
<pre>
10x +  2y  =  16
 5x +   y  =   8
</pre>
Značky h1–h6, p, pre a hr jsou blokové, což znamená, že se před nimi i za nimi zalomí řádek. Například každý odstavec začne na novém řádku, i pokud ve zdrojovém kódu nový řádek není:
<p>První odstavec.</p> <p>Druhý odstavec.</p>
Atributy
Některé značky mají atributy, které ovlivňují jejich zobrazení či chování. Například u odkazů potřebujeme určit jejich adresu (atribut href z anglického hypertext reference) a volitelně, zda se má odkaz otevřít v novém okně (atribut target). U obrázků určujeme cestu k souboru (src), alternativní text (alt), který se vypíše, pokud obrázek nemůže být zobrazen, a volitelně velikost v pixelech (width, height). Atributy zapisujeme do úvodní značky a hodnoty obalujeme do uvozovek:
<a href="https://www.umimeto.org/">Umíme to</a>
<img src="celer.png" alt="celer" width="400">
Zavřít