Každý HTML soubor by měl mít určitou základní strukturu. Představte 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 mé úž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íš 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: ř, č, ž, ý, á, í, é, ů). Kdybyste ji tam neměli, mohly by se vá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 vaše stránka bude dobře zobrazovat na počítači, ale i na malém mobilu.
<title>Můj první web!</title>Tohle je název vaší stránky, který se zobrazí v záložce (liště) vašeho webového prohlížeče. Je to jako jméno vaší knihy, aby ji lidé našli!
<body> ... </body> (Tělo stránky – to, co vidíš!)Sekce <body> je jako tělo člověka – zde se nachází VŠECHEN obsah, který návštěvníci vaší 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řete soubor index.html ve VS Code a zkopíruj do něj celou základní kostru, kterou jsme si právě probrali. Změňte název stránky v <title> na něco, co se Vám líbí (např. "Můj Super Web").
Pak uložte soubor (Ctrl+S nebo Command+S). klikněte pravým tlačítkem myši na soubor index.html v Průzkumníkovi VS Code a vyberte "Open with Live Server". Měla by se otevřít prázdná stránka v prohlížeči, ale v záložce uvidíte 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ěte 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.