Každý HTML soubor by měl mít určitou základní strukturu. Představme si to jako základní stavební bloky, které jsou vždycky stejné. Vždycky začneme s těmito řádky:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Název naší úžasné stránky!</title>
</head>
<body>
</body>
</html>pojďme si vysvětlit, co jednotlivé části znamenají:
<!DOCTYPE html>Tohle je úplně první řádek. Říká prohlížeči: "Dobrý den, jsem webová stránka a jsem napsaná v nejnovější verzi HTML, což je HTML5!" Je to jako úvodní pozdrav pro prohlížeč.
<html lang="cs"> ... </html>Toto je kořenový element naší webové stránky. Všechno ostatní, co napíšeme, musí být uvnitř těchto značek. Je to jako obrovská krabice, ve které je celá naše webová stránka. Atribut lang="cs" říká, že jazyk stránky je čeština, což je dobré pro vyhledávače.
<head> ... </head> (Hlava stránky – to, co nevidíme přímo)Sekce <head> je jako hlava člověka. Obsahuje důležité informace o
stránce, ale tyto informace se nezobrazují přímo na samotné webové stránce. Jsou to spíše
"instrukce pro prohlížeč" nebo "informace pro vyhledávače".
<meta charset="UTF-8">Tato značka říká prohlížeči, jak má správně zobrazovat písmenka a speciální znaky (jako jsou české háčky a čárky: ř, č, ž, ý, á, í, é, ů). Kdybychom ji tam neměli, mohly by se nám místo krásných českých písmenek objevit divné klikyháky!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tohle je kouzelná značka pro telefony a tablety! Říká jim: "Hele, přizpůsob se velikosti obrazovky!" Díky tomu se naše stránka bude dobře zobrazovat na počítači, ale i na malém mobilu.
<title>Náš první web!</title>Tohle je název naší stránky, který se zobrazí v záložce (liště) našeho webového prohlížeče. Je to jako jméno naší knihy, aby ji lidé našli!
<body> ... </body> (Tělo stránky – to, co vidíme!)Sekce <body> je jako tělo člověka – zde se nachází VŠECHEN obsah,
který návštěvníci naší webové stránky uvidí! Všechny texty, obrázky, videa, tlačítka,
odkazy – prostě všechno, co je vidět na stránce, patří sem.
Úkol: otevřme soubor index.html ve VS Code a zkopírujme do něj celou
základní kostru, kterou jsme si právě probrali. Změňme název stránky v <title> na
něco, co se nám líbí (např. "Můj Super Web").
Pak uložme soubor (Ctrl+S nebo Command+S). Klikněme pravým tlačítkem myši na soubor
index.html v Průzkumníkovi VS Code a vyberme "Open with Live Server". Měla by se
otevřít prázdná stránka v prohlížeči, ale v záložce uvidíme svůj název!
V HTML mluvíme o značkách (tags) a elementech (elements). Zní to podobně, ale je v tom malý rozdíl, který je dobré pochopit.
Jsou to ta "kouzelná slova" uzavřená v lomených závorkách, například <h1> nebo
<p>. Většinou existují ve dvojicích:
<p> (říká: "Tady začíná odstavec!")</p> (všimněme si lomítka! Říká: "Tady odstavec
končí!")Některé značky jsou ale samouzavírací (také se jim říká "prázdné značky") a nemají
uzavírací značku, protože do sebe nic neobsahují. Například <img> (pro
obrázky) nebo <br> (pro zalomení řádku).
Element je všechno dohromady: otevírací značka, obsah a uzavírací značka.
<p>Tohle je celý element odstavce.</p>
Zde je <p> otevírací značka,
Tohle je celý element odstavce. je obsah a </p> je
uzavírací značka. Všechno dohromady tvoří element.
Samouzavírací značky jsou také elementy, i když nemají oddělenou uzavírací značku. Například
<img src="koala.jpg" alt="Roztomilá koala"> je celý element obrázku.