Lekce 2 - Struktura HTML stránky Nové
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 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>
...
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>
Otevření stránky v prohlížeči
Abychom se mohli podívat, jak naše stránka ve skutečnosti vypadá ve webovém prohlížeči, můžeme využít takzvaného live serveru. Ten umožní, že i když nemáme zatím zaplacený vlastní server, dokážeme využít služby tohoto bezplatného živého serveru pro zobrazení našeho projektu. Tuto službu musíme ale do programu Visual Studio Code instalovat jako rozšíření (je zcela zdarma). Postupujeme takto:
- Otevřeme nabídku rozšíření Extensions (poslední ikona čtverečků v levém svislém menu).
- Do vyhledávacího pole zadáme heslo "Live Server" a toto rozšíření nainstalujeme.
Jakmile máme rozšíření instalované, můžeme kliknout na možnost
otevřít s live serverem (Open With Live Server), kterou najdeme jako
první možnost po kliknutí pravým tlačítkem myši na soubor
index.html. Stejnou možnost najdeme v menu, které vyvoláme
kliknutím pravým tlačítkem myši přímo do stránky index.html
ve VS Code, kam píšeme kód:
Když soubor nyní otevřeme ve webovém 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:
PRO tip: Napsáním vykřičníku na samostatný řádek a stisknutím Enter nám VS Code HTML strukturu samo vygeneruje. To nám určitě ušetří spoustu času s vytvářením nových stránek. 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ý.
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ě.
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 48x (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.