V minulé lekci, Úvod do HTML, jsme si nainstalovali editor Visual Studio Code, ukázali si HTML jazyk a vytvořili první html soubor.
V dnešním tutoriálu kurzu Statického webu si ukážeme, jakou strukturu má HTML stránka a vysvětlíme si elementární potřebné tagy. Společně s představením struktury si začneme tvořit obsah naší první stránky, který si nakonec prohlédneme ve webovém prohlížeči.
Struktura HTML stránky
Může být překvapením, že HTML stránka musí obsahovat 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 index.html vložíme tzv. tag
DOCTYPE. Pokud nevíte, kde se na české klávesnici píší
špičaté závorky, je to pomocí Pravého Alt a následujících
kláves:
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>.
Kód si jistě zaslouží další vysvětlení, pusťme se do něj.
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> (jako 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, protože je nyní zanořený jak v
elementu <html>, tak v <head>.
Nepárové tagy
Možná jste zaregistrovali lomítko 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>
…
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>
Pokud nemáte aktivní automatické ukládání, soubor uložíme klávesovou
zkratkou Ctrl + S.
Náš web v prohlížeči
Pokud máte stránku již otevřenou v prohlížeči, stačí ji obnovit
klávesovou zkratkou Ctrl + R nebo F5.
Případně si soubor index.html ve složce s projektem otevřete v
prohlížeči znovu. Jak na to jsme si popisovali v lekci
do HTML. V prohlížeči uvidíme náš první web. Bude
vypadat jako obrázek níže 
alt=)">
Všimněte si i našeho titulku v textu záložky:
Gratuluji, máte svou první webovou stránku! 🏆
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ě.
Snippety Emmet
VS Code nám umožňuje usnadnit si psaní zdlouhavých kódů pomocí
předpřipravených šablon.
Když budeme chtít příště napsat podobnou HTML strukturu,
můžeme si ve VS Code ulehčit práci napsáním vykřičníku !
na samostatný řádek a stisknutím klávesy Enter:
VS Code nám potom HTML strukturu samo vygeneruje. Tato
struktura se ovšem může lišit s každou verzí VS Code, může mít různé
věci navíc a může v ní být potřeba přepsat atribut lang na
"cs", aby byl obsah vyhledávači chápán jako český.
Obsah vygenerovaný pomocí VS Code po odenterování vykřičníku bude dle
verze podobný tomuto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Kód obsahuje i nějaké věci, které si vysvětlíme až v navazujícím
kurzu. Nicméně upravit jej do naší podoby je lehčí, než psát jej celý
znovu. U nějaké další stránky tuto funkci můžete použít.
Bonus – Rozšíření Live Server
Na závěr si ukažme ještě takový bonus.
Abychom se mohli rychleji podívat, jak naše stránka ve
skutečnosti vypadá, můžeme využít takzvaného live
serveru. Ten umožní živé zobrazení našeho
projektu i ve chvíli, kdy měníme jeho kód, aniž bychom soubor
museli ukládat. Tuto službu musíme ale do programu Visual Studio Code
instalovat jako rozšíření (je zcela zdarma, ale nejedná se
o oficiální funkčnost a tak není garantováno, že bude s každou verzí VS
Code fungovat).
Pokud si jej chcete zkusit, postupujte následovně:
- Otevřete nabídku rozšíření Extensions (poslední ikona čtverečků v levém svislém menu)
- Do vyhledávacího pole zadejte heslo „Live Server“ a toto rozšíření nainstalujte.
Jakmile máte rozšíření nainstalované, můžete kliknout na možnost
otevřít s live serverem (Open With Live Server), kterou najdete jako
první možnost po kliknutí pravým tlačítkem myši na soubor
index.html. Stejnou možnost najdete v menu, které vyvoláte
kliknutím pravým tlačítkem myši přímo do stránky index.html
ve VS Code, kam píšeme kód:
V příští lekci, Základní HTML tagy, si uvedeme základní HTML tagy, které budete
pro váš web potřebovat.
