HTML – struktura a syntaxe

HTML je tzv. značkovací jazyk a skládá se ze značek, tzv. tagů. Tagy slouží k tomu, abychom jimi mohli obalovat text, a tak mu dávat určitý význam (např. „toto je důležitý text“, „toto nadpis“, „seznam“, „tabulka“). Pro tento účel slouží obvykle otevírající a ukončovací/uzavírací tagy, kterými ohraničíme danou oblast a přidělíme jí tak význam. Těmto tagům se potom říká párové.

HTML není programovací jazyk, protože neumožňuje provádět žádné logické operace, slouží pouze k sestavování dokumentů. Dříve se HTML používalo i na designování stránek, ale protože vzniklý kód byl pak nepřehledný, oddělil se design do samostatného souboru a v HTML řešíme pouze obsah stránky.

Tag vs. element

Tagy se píší do špičatých závorek, např. <title>.Velmi specifickým tagem je odkaz, který umožňuje procházet mezi jednotlivými stránkami, a tak je provázat. Od toho zkratka HTML (HyperText MarkUp Language = odkazovací a značkovací jazyk).

V HTML se budeme setkávat také s pojmem element, čímž se myslí prvek, který na stránku pomocí tagů vkládáme. Tagy jsou tedy textové značky, pomocí kterých definujeme elementy. Např. pomocí tagů <title> a </title> definujeme element <title>. Pomůckou může být, že tag vždy referuje na kód, zatímco element na výsledný prvek ve stránce jako v dokumentu.

Syntaxe jazyka HTML

Jazyk html má určitou syntaxy, která by se měla dodržovat, některé chyby prohlížeče tolerují a některé ne.

Tagy

Tagy se zapisují mezi znaky < >, některé jsou párové a některé nejsou.

Zápis nepárového tagu:<tag>
Zápis párového tagu: <tag>Nějaký text</tag>

Atributy

Atributy se zapisují přímo do tagu.

<tag atribut=“hodnota“>
<tag atribut=“hodnota“>Párový tag s atributem.</tag>

Zákaz křížení tagů

Tagy se mohou do sebe vkládat, nesmějí se však křížit.

Chybný zápis: <b><i>Tučná kurzíva</b></i>
Správný zápis:<b><i>Tučná kurzíva</i></b>

Velikosti písmen

V html na velikosti písmen nezáleží můžete tedy psát <TAG>, nebo <tag> je to jedno, ale v xhtml, což je vlastně novější verze html, se už musí psát tagy i atributy jen malými písmeny.

Pozor v url je nutné zachovat velikost písmen, např. SOUBOR.html nerovná se soubor.html.

Mezery v kódu

Všechny mezery za sebou se převedou na jedinou mezeru, nový řádek se převede na jednu mezeru. Pokud potřebujete udělat více mezer za sebbou musíte použít entitu.

Správná struktura HTML stránky

Každá html stránka by měla mít určitou strukturu.

Kostra stránky

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head>
<title>Titulek html stránky</title>
</head>
<body>
Obsah html stránky.
</body>
</html>

zobrazit výsledek

První řádka kódu určuje podle jaké specifikace je psána html stránka. Celý dokument je uzavřen mezi značky <html> </html>. Dále obsahuje hlavičku <head> a tělo <body>. V hlavičce je ještě titulek <title>, ten se zobrazuje v horní liště prohlížeče a je velmi důležitý pro vyhledavače.

Další kostra stránky

Tato kostra je vylepšena o dva meta tagy, první meta tag říka, že stránka je psána v češtině a druhý meta tag se stará o to aby se správně zobrazovaly znaky jako: ěščřž.

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head>
<meta http-equiv=“Content-Language“ content=“cs“>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<title>Titulek html stránky</title>
</head>
<body>
Obsah html stránky.
</body>
</html>

Naše první webová stránka

HTML stránku je velmi jednoduché vytvořit, je to vlastně jen textový dokument. Soubory s HTML kódem mají obvykle příponu .html nebo někdy i jen .htm. Úvodní soubor webové stránky je zvykem pojmenovávat index.html. Právě tento soubor bude potom internetový server hledat jako první, když naše stránky nahrajeme na internet a někdo na ně vstoupí.

Pojďme si tento soubor nyní vytvořit a v něm jednoduchou stránku s úvodním textem.

Vytvoření HTML souboru

Spusťme si textový editor a vytvořte nový soubor index.html

Je velmi důležité dodržet přesné názvy souborů, protože při nahrání na linuxový server může tento server rozlišovat velká a malá písmena. Všechna písmena v názvu souboru jsou proto malá.

V některých editorech je potřeba nastavit způsob kódování (nejen) českých znaků, k čemuž v dnešní době slouží moderní univerzální kódování UTF-8. Visual Studio Code bere UTF-8 jako výchozí, a proto se s nastavováním nemusíme trápit. Pokud se však chcete ujistit, že opravdu používáte UTF-8, na dolní liště byste kromě informace o tom, kde se nacházíte v kódu nebo jaký jazyk používáte, měli vidět právě UTF-8. Je velmi důležité, abyste své stránky editovali pouze v editorech, co UTF-8 podporují, jinak dojde k rozbití diakritiky. Například je špatný nápad vytvořit stránky ve VS Code a poté do nich něco dopsat v Poznámkovém bloku.

Struktura HTML stránky

Může být překvapením, že HTML stránka obsahuje kromě obsahu pro uživatele také další informace pro prohlížeč a vyhledávače. Proto má určitou strukturu, která tyto informace odděluje od našeho obsahu.

`<!DOCTYPE>`

Na začátek souboru vložíme tzv. DOCTYPE. Přidáme řádek:

<!DOCTYPE html>

Tím definujeme, že textový soubor je HTML dokumentem. Vykřičníku si nevšímejte, prostě se tam píše

Hlavička `<head>` a tělo `<body>`

Dále definujeme samotný HTML dokument. Ten je rozdělen na 2 části:

Hlavičku – Ta obsahuje informace pro prohlížeč a vyhledávače.
Tělo – Zde nalezneme samotný obsah webové stránky.

Vložme nyní hlavičku a tělo do našeho dokumentu. Hlavičku si necháme zatím prázdnou, do těla vložíme text, který na své stránce chceme mít. Bude to vypadat takto:

<!DOCTYPE html> 
<html lang="cs-cz">     

<head></head>     

<body>Vítejte na mé stránce!
</body>
</html>

Prvně otevíráme tag <html>. Tím sdělujeme, že odtud bude začínat naše HTML stránka. Následuje hlavička, která je vložena mezi tagy <head> a </head> a dále tělo mezi tagy <body> a </body>. Nakonec ukončíme i samotnou HTML stránku pomocí </html>.

Párové tagy

Všimněte si, že konec hlavičky </head> se od začátku hlavičky <head> liší lomítkem /. Takto se píší tzv. párové tagy. Párové proto, že jsou dva (začátek a konec) a mezi nimi je vložen jejich obsah, zde konkrétně za moment vložíme obsah hlavičky. Stejně to máme i s tělem (tag <body>), kde definujeme jeho začátek a konec s lomítkem a celá HTML stránka je pak uzavřena v <html> a </html>.

Ukončovací lomítko píšeme vždy po první lomené závorce, ne na konci. Častá chyba začátečníků je psát chybně např. <body/> namísto </body>.

Atributy tagů

Některé tagy vyžadují zadat také atributy, což jsou doplňující parametry. Vkládáme je do otevírajícího tagu a jejich hodnotu píšeme do uvozovek "" za znak =. U tagu <html> si všimněte atributu lang="cs-cz", který definuje jazyk stránky. Zde říká, že HTML stránka je v češtině. Pokud bychom chtěli specifikovat, že se jedná o slovenštinu, hodnota by byla sk. K atributům se ještě vrátíme.

Odsazování

Když vkládáme jeden element do druhého, odsadíme řádek pomocí klávesy Tab nebo 4 mezer. Odsazování nemá na funkčnost žádný vliv, ale pomáhá nám jasně vidět, že je <head> a <body> zleva odskočené a tudíž patří do výše otevřeného <html> elementu.

Obsah hlavičky

Přesuňme se do hlavičky, kam nyní přidáme ještě několik informací.

Kódování

Mezi <head> a </head> vložme informaci o kódování. Dělá se to tagem <meta> (metadata) s následujícím atributem:

...
<head>         
    <meta charset="utf-8" />     
</head> 
...

Prohlížeči jsme tímto sdělili, že je stránka kódována v UTF-8, bude tak vědět, jak zobrazit speciální znaky jako např. č. Zde je nutné dodat, že toto je pouze informace pro prohlížeč a je nutné stránku v UTF-8 opravdu uložit (což za nás řeší VS Code). Hlavičku jsme také roztáhli na více řádek, protože do ní budeme ještě přidávat elementy. Opět si všimněte dalšího odsazení elementu <meta ...> zleva.

Nepárové tagy

Všimněme si i lomítka na konci tagu <meta charset="utf-8" />. Takto se mohou ukončovat nepárové tagy. To jsou ty, které nemají dvě části (začátek a konec), ale píší se pouze jednou. Mezi ně právě tag <meta ... > patří. U každého tagu si během kurzu řekneme, jestli je párový nebo nepárový.

Uzavírání nepárových tagů lomítkem na konci není povinné a zda jej psát je otázka preferencí. Výhody jsou, že je na první pohled vidět, že tag nemá nikde dále v kódu uzavírací značku a také, že je dokument kompatibilní s XML, kde se všechny značky musí uzavírat. Pokud vám tato praktika nesedí, lze psát jen např. <meta charset="utf-8">. Párové tagy je samozřejmě nutné uzavírat vždy, jinak by nebylo poznat, kde končí. V kurzu budeme uzavírat i nepárové tagy, abychom se vždy zamysleli nad uzavíráním tagů.

Titulek `<title>`

Jako další řádek přidejme do hlavičky titulek. Jedná se o párový tag s názvem <title>, dovnitř tagu napíšeme text titulku:

...     
<head>         
<meta charset="utf-8" />
<title>Moje první webová stránka</title>     
</head> 
...

Otevření stránky v prohlížeči

Celkový kód naší stránky nyní vypadá takto:

<!DOCTYPE html> 
<html lang="cs-cz">     
     <head>         
         <meta charset="utf-8" />
         <title>Moje první webová stránka</title>
     </head>
     <body>Vítejte na mé stránce!</body> 
</html>

HTML stránku lze definovat i jinak a jistě se setkáte s odlišnými definicemi. Ta uvedená v dnešní lekci je však nejstručnější a nejmodernější. Pokud do stránky neuvedete hlavičku nebo např. element <body>, nebude validní a nemusí se ve všech prohlížečích vykreslit správně.

Cvičení

C1 – první html stránka

Vytvořte v PSPad jednoduchou stránku, využijte základní kostru vytvořenou programem.

Změnte kódování z charset=windows-1250 na charset=utf-8.
Zadejte element titulek: Moje první stránka s češtinou.
V těle dokumentu si vyzkoušejte
- odstavec <p> … </p>,
- odřádkování … <br/>,
- nadpisy úrovně 1 až 6 <h1> … </h1> až <h6> … </h6>.

Na adrese Služba ověřování značek W3C si ověřte, je-li váš kód validní.

Zdroje: