Co je HTML

00:00:00

Každá stránka, kterou kdy vidíte na internetu, začíná u HTML. Je to základ, bez kterého by web neexistoval. A přitom je HTML jedno z nejjednodušších „jazyků“, se kterými se v programování setkáte. Tato lekce vám ukáže, co HTML vlastně je, k čemu slouží a jak vypadá – úplně od začátku, bez předchozích znalostí.

Co je HTML?

HTML je zkratka z anglického HyperText Markup Language – česky bychom to mohli přeložit jako hypertextový značkovací jazyk. Zní to složitě, ale ve skutečnosti je to jednoduché:

  • HyperText znamená, že stránky mohou být propojeny navzájem pomocí odkazů – kliknete na odkaz a přejdete na jinou stránku nebo jiné místo. Právě proto se web jmenuje web (pavučina).
  • Markup (značkování) znamená, že text „označujete“ – říkáte prohlížeči, co je nadpis, co je odstavec, co je seznam a co je odkaz.
  • Language (jazyk) – jde o sadu dohodnutých pravidel a značek, jimž prohlížeč rozumí.

HTML tedy není programovací jazyk v tradičním smyslu – HTML nic „nepočítá“ a nemá žádnou logiku. Je to jazyk pro popis struktury a obsahu webové stránky.

K čemu HTML slouží?

HTML říká prohlížeči, co na stránce je – ale ne to, jak to vypadá. To je důležitý rozdíl:

  • HTML určuje, že něco je nadpis, odstavec, obrázek, odkaz nebo seznam.
  • Vzhled (barvy, písma, rozvržení) řeší CSS – to se naučíme v dalších lekcích.
  • Chování (animace, interaktivita) řeší JavaScript – to přijde ještě později.

Jak HTML vypadá?

Každý HTML příkaz se jmenuje tag. Píšeme ho do lomených závorek: <tag>. Většina tagů má otevírací a uzavírací část – uzavírací začíná lomítkem:

<p>Toto je odstavec textu.</p>
<h1>Toto je hlavní nadpis stránky.</h1>
<a href="dalsi.html">Toto je odkaz.</a>

Obsah stránky – tedy vše, co uvidí uživatel v prohlížeči – se vkládá mezi tagy. Prohlížeč pak tyto tagy přečte a zobrazí obsah formátovaný podle jejich smyslu.

Základní kostra každé stránky

Každý HTML soubor musí začínat tzv. kostrou – minimální sadou tagů, bez kterých by prohlížeč nevěděl, jak soubor zpracovat:

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <title>Název stránky</title>
</head>
<body>
  <h1>Ahoj světe!</h1>
  <p>Toto je moje první stránka.</p>
</body>
</html>

Tento kód stačí zkopírovat do textového editoru, uložit jako index.html a otevřít v prohlížeči. Uvidíš nadpis a odstavec textu – to je tvoje první webová stránka.

Co jsou atributy?

Některé tagy přijímají doplňující informace – říkáme jim atributy. Atribut se píše přímo do otevíracího tagu a skládá se z názvu a hodnoty oddělených rovnítkem:

<a href="kontakt.html">Kontakt</a>
<img src="foto.jpg" alt="Popis obrázku">
<input type="text" placeholder="Zadej své jméno">

V prvním příkladu je href atribut tagu <a> a říká, kam má odkaz vést. Ve druhém jsou dva atributy – src (cesta k obrázku) a alt (popis pro odečítač). Atributy jsou volitelné nebo povinné podle konkrétního tagu.

Tip od Zdeňka

Zdeněk radí: Neboj se HTML. Je to nejjednodušší z trojice HTML–CSS–JavaScript a přitom je to základ, na kterém stojí vše ostatní. Začni psát kód hned – nejlépe tu kostru výše. Ulož ji jako test.html a otevři v prohlížeči. Pak měň texty, přidávej tagy, vidíš okamžitý výsledek. Žádné kompilování, žádné spouštění – prohlížeč je tvoje okamžitá zpětná vazba. A pokud se v kódu ztratíš, vzpomeň si na základní otázku: co je to za obsah? Nadpis, odstavec, seznam, odkaz? Pak stačí použít správný tag.