2. diel - Štruktúra HTML stránky
V dnešnom tutoriále kurzu Statického webu si ukážeme, akú štruktúru má HTML stránka a vysvetlíme si elementárne potrebné tagy. Spoločne s predstavením štruktúry si začneme tvoriť obsah našej prvej stránky, ktorý si nakoniec prezrieme vo webovom prehliadači.
Štruktúra HTML stránky
Môže byť prekvapením, že HTML stránka obsahuje okrem obsahu pre používateľov aj ďalšie informácie pre prehliadač a vyhľadávače. Preto má určitú štruktúru, ktorá tieto informácie oddeľuje od nášho obsahu.
<!DOCTYPE>
Na začiatok súboru vložíme tzv. DOCTYPE. Pridáme
riadok:
Tým definujeme, že
textový súbor je HTML dokumentom. Výkričníka si nevšímajte,
jednoducho sa tam píše 
Hlavička <head> a telo
<body>
Ďalej definujeme samotný HTML dokument. Ten je rozdelený na 2 časti:
- Hlavičku - Tá obsahuje informácie pre prehliadač a vyhľadávače.
- Telo - Tu nájdeme samotný obsah webovej stránky.
Najprv otvárame tag
<html>. Tým oznamujeme, že odtiaľ bude začínať naša
HTML stránka. Nasleduje hlavička, ktorá je vložená medzi
tagy <head> a </head> a ďalej
telo medzi tagmi <body> a
</body>. Nakoniec ukončíme aj samotnú HTML stránku
pomocou </html>.
Párové tagy
Všimnite si, že koniec hlavičky </head> sa od začiatku
hlavičky <head> líši lomítkom /. Takto sa
píšu tzv. párové tagy. Párové preto, že sú dva
(začiatok a koniec) a medzi nimi je vložený ich
obsah, tu konkrétne za moment vložíme obsah hlavičky. Rovnako to
máme aj s telom (tag <body>), kde definujeme jeho začiatok
a koniec s lomítkom a celá HTML stránka je potom uzavretá v
<html> a </html>.
Ukončovaciu lomku píšeme vždy po prvej lomenej zátvorke,
nie na konci. Častá chyba začiatočníkov je písať chybne napr.
<body/> namiesto </body>.
Atribúty tagov
Niektoré tagy vyžadujú zadať aj atribúty, čo sú doplňujúce
parametre. Vkladáme ich do otvárajúceho tagu a ich hodnotu píšeme do
úvodzoviek "" za znak =. Pri tagu
<html> si všimnite atribút lang="cs-cz",
ktorý definuje jazyk stránky. Tu hovorí, že HTML stránka je v slovenčine.
Ak by sme chceli špecifikovať, že sa jedná o slovenčinu, hodnota by bola
sk. K atribútom sa ešte vrátime.
Odsadzovanie
Keď vkladáme jeden element do druhého,
odsadíme riadok pomocou klávesu Tab alebo 4
medzier. Odsadzovanie nemá na funkčnosť žiadny vplyv, ale pomáha nám jasne
vidieť, že je <head> a <body> zľava
odskočené, a teda patrí do výšky otvoreného <html>
elementu.
Obsah hlavičky
Presuňme sa do hlavičky, kam teraz pridáme ešte niekoľko informácií.
Kódovanie
Medzi <head> a </head> vložme
informáciu o kódovaní. Robí sa to tagom
<meta> (metadáta) s nasledujúcim atribútom:
Prehliadači sme týmto
oznámili, že je stránka kódovaná v UTF-8, bude tak vedieť,
ako zobraziť špeciálne znaky ako č. Tu je nutné dodať, že
toto je iba informácia pre prehliadač a je nutné stránku v UTF-8 naozaj
uložiť (čo za nás rieši VS Code). Hlavičku sme tiež roztiahli na viac
riadkov, pretože do nej budeme ešte pridávať elementy. Opäť si všimnite
ďalšie odsadenie elementu <meta ...> zľava.
Nepárové tagy
Všimnime si aj lomítka na konci tagu
<meta charset="utf-8" />. Takto sa môžu ukončovať
nepárové tagy. To sú tie, ktoré nemajú dve časti
(začiatok a koniec), ale píšu sa iba raz. Medzi ne práve
tag <meta ... > patrí. Pri každom tagu si počas kurzu
povieme, či je párový alebo nepárový.
Uzatváranie nepárových tagov lomítkom na
konci nie je povinné a či ho písať je otázka preferencií.
Výhody sú, že je na prvý pohľad vidieť, že tag nemá nikde ďalej v kóde
uzatváraciu značku a tiež, že je dokument kompatibilný s XML, kde sa
všetky značky musia uzatvárať. Pokiaľ vám táto praktika nesedí, je
možné písať len napr. <meta charset="utf-8">.
Párové tagy je samozrejme nutné uzatvárať vždy, inak by nebolo
poznať, kde končí. V kurze budeme uzatvárať aj nepárové tagy, aby sme sa
vždy zamysleli nad uzatváraním tagov.
Titulok <title>
Ako ďalší riadok pridajme do hlavičky titulok. Jedná sa o párový tag s
názvom <title>, dovnútra tagu napíšeme text titulku:
Celkový kód našej stránky teraz vyzerá takto:
Otvorenie stránky v prehliadači
Aby sme sa mohli pozrieť, ako naša stránka v skutočnosti vyzerá vo webovom prehliadači, môžeme využiť takzvaný live server. Ten umožní, že aj keď nemáme zatiaľ zaplatený vlastný server, dokážeme využiť služby tohto bezplatného živého servera na zobrazenie nášho projektu. Túto službu musíme ale do programu Visual Studio Code inštalovať ako rozšírenie (je úplne zadarmo). Postupujeme takto:
- Otvoríme ponuku rozšírenia Extensions (posledná ikona štvorčekov v ľavom zvislom menu).
- Do vyhľadávacieho poľa zadáme heslo "Live Server" a toto rozšírenie nainštalujeme.
index.html. Rovnakú možnosť nájdeme v menu, ktoré vyvoláme
kliknutím pravým tlačidlom myši priamo do stránky index.html
vo VS Code, kam píšeme kód:
Keď súbor teraz otvoríme vo webovom prehliadači, uvidíme náš prvý web. Bude vyzerať ako obrázok nižšie:) Všimnite si aj náš titulok v texte záložky:
PRO tip: Napísaním výkričníka na samostatný riadok a stlačením Enter nám VS Code HTML štruktúru samo vygeneruje. To nám určite ušetrí veľa času s vytváraním nových stránok. Táto štruktúra sa však môže líšiť s každou verziou VS Code, môže mať rôzne veci navyše a môže v nej byť potrebné prepísať atribút "lang" na "sk", aby bol obsah vyhľadávača chápaný ako slovenský.
HTML stránku je možné definovať aj inak a určite sa
stretnete s odlišnými definíciami. Tá uvedená v dnešnej lekcii je však
najstručnejšia a najmodernejšia. Pokiaľ do stránky neuvediete hlavičku
alebo napr. element <body>, nebude validný a nemusí sa vo
všetkých prehliadačoch vykresliť správne.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 564x (854 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.