Lekce 2 - Struktura HTML stránky
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 Úvod
do HTML. V prohlížeči uvidíme náš první web. Bude
vypadat jako obrázek níže
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.
Perfektní! Tady je kompletně přepracovaná a vyvážená verze podkapitoly, která:
- uvádí Live Preview jako první,
- zahrnuje informaci o nutnosti instalace obou pluginů,
- je stručná, jasná a přehledná.
Bonus – Rozšíření pro zobrazení webu
Na závěr si ukažme ještě takový bonus.
Abychom si mohli rychle a pohodlně zobrazit, jak naše stránka vypadá ve webovém prohlížeči, můžeme využít tzv. pluginy pro živý náhled. Díky nim se změny v HTML nebo CSS projeví hned, často i bez ručního obnovování stránky.
Tyto funkce je potřeba do VS Code nainstalovat jako rozšíření. Jsou zcela zdarma, ale protože nejde o vestavěnou součást editoru, jejich fungování se může mírně lišit v závislosti na konkrétní verzi VS Code nebo dalších nainstalovaných pluginech.
Dva nejčastější pluginy pro živý náhled ve VS Code jsou Live Preview a Live Server. Každý funguje trochu jinak a hodí se pro jiné situace:
| Live Preview (od Microsoftu) | Live Server | |
| Kde se zobrazí náhled? | V panelu uvnitř VS Code | Ve výchozím webovém prohlížeči |
| Aktualizace náhledu | Automaticky při psaní (i bez uložení) | Při uložení souboru |
| Vhodné pro | Jednoduché HTML/CSS projekty | Složitější projekty, více stránek |
-
Live Preview – Postup instalace
Otevřeme si Visual Studio Code. V levém panelu klikneme na ikonu Rozšíření:
Do vyhledávacího pole napíšeme "Live Preview". Kliknutím vybereme stejnojmenné rozšíření:
Klikneme na tlačítko Install a nainstalujeme jej do našeho Visual Studia:
Po instalaci můžeme živý náhled otevřít přímo v HTML souboru pomocí ikony s lupou v pravém horním rohu, nebo kliknutím pravým tlačítkem myši na daný HTML soubor v levém sloupci a výběrem možnosti Show Preview:
Náhled se zobrazí v novém panelu přímo ve VS Code. Jakmile provedeme změnu v kódu, náhled se automaticky aktualizuje:
-
Live Server – Postup instalace
Kliknutím na poslední ikonu čtverečků v levém svislém menu otevřete nabídku rozšíření (Extensions):
Do vyhledávacího pole napíšeme "Live Server" a toto rozšíření nainstalujeme.
Po instalaci můžeme náhled spustit kliknutím pravým tlačítkem myši na soubor
index.htmla výběrem možnosti Open with Live Server. Stejnou možnost najdeme i v menu, které vyvoláme kliknutím pravým tlačítkem do editoru s tímto souborem:
Obě rozšíření mohou výrazně zpříjemnit a zrychlit práci s HTML a CSS. Doporučujeme vyzkoušet obě a rozhodnout se podle toho, které vám bude víc vyhovovat.
V příští lekci, Základní HTML tagy, si uvedeme základní HTML tagy, které budete pro váš web potřebovat.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 1350x (854 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.