
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