2. diel - Štruktúra HTML stránky
V minulej lekcii, Úvod do HTML , sme si nainštalovali editor Visual Studio Code, ukázali si HTML jazyk a vytvorili prvý html súbor.
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 musí obsahovať 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 index.html vložíme tzv. tag
DOCTYPE. Pokiaľ neviete, kde sa na slovenskej klávesnici píšu
špicaté zátvorky, je to pomocou Pravého Alt a nasledujúcich
klávesov:
Pridáme riadok:
<!DOCTYPE html>
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.
Vložme teraz hlavičku a telo do nášho dokumentu. Hlavičku si necháme zatiaľ prázdnu, do tela vložíme text, ktorý na svojej stránke chceme mať. Bude to vyzerať takto:
<!DOCTYPE html> <html lang="en-US"> <head></head> <body>Welcome to my website!</body> </html>
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>.
Kód si určite zaslúži ďalšie vysvetlenie, pusťme sa doň.
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="en-US",
ktorý definuje jazyk stránky. Tu hovorí, že HTML stránka je v angličtine.
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> (ako metadata) s nasledujúcim
atribútom:
...
<head>
<meta charset="utf-8" />
</head>
...
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
Visual Studio 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, pretože je teraz zanorený ako v
elemente <html>, tak v <head>.
Nepárové tagy
Možno ste zaregistrovali lomítko 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:
...
<head>
<meta charset="utf-8" />
<title>My first website</title>
</head>
...
Celkový kód našej stránky teraz vyzerá takto:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <title>My first website</title> </head> <body>Welcome to my website!</body> </html>
Ak nemáte aktívne automatické ukladanie, súbor uložíme klávesovou skratkou Ctrl + S.
Náš web v prehliadači
Pokiaľ máte stránku už otvorenú v prehliadači, stačí ju obnoviť
klávesovou skratkou Ctrl + R alebo F5.
Prípadne si súbor index.html v priečinku s projektom otvorte v
prehliadači znova. Ako na to sme si popisovali v lekcii Úvod do HTML. V 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:
Gratulujem, máte svoju prvú webovú stránku! 🏆
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.
Snippety Emmet
Visual Studio Code nám umožňuje uľahčiť si písanie zdĺhavých kódov pomocou predpripravených šablón.
Keď budeme chcieť nabudúce napísať podobnú HTML
štruktúru, môžeme si vo VS Code uľahčiť prácu napísaním výkričníka
! na samostatný riadok a stlačením klávesu
Enter:
Visual Studio Code nám potom HTML štruktúru samo
vygeneruje. Táto štruktúra sa však môže líšiť s každou
verziou Visual Studio 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ý.
Obsah vygenerovaný pomocou Visual Studio Code po odenterovaní výkričníka bude podľa verzie 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 aj nejaké veci, ktoré si vysvetlíme až v nadväzujúcom kurze. Avšak upraviť ho do našej podoby je ľahšie, než písať ho celý znova. U nejakej ďalšej stránky túto funkciu môžete použiť.
Bonus - Rozšírenie Live Server
Na záver si ukážme ešte taký bonus.
Aby sme sa mohli rýchlejšie pozrieť, ako naša stránka v skutočnosti vyzerá, môžeme využiť takzvaný live server. Ten umožní živé zobrazenie nášho projektu aj vo chvíli, keď meníme jeho kód bez toho, aby sme súbor museli ukladať. Túto službu musíme ale do programu Visual Studio Code inštalovať ako rozšírenie (je úplne zadarmo, ale nejde o oficiálnu funkčnosť a tak nie je garantované, že bude s každou verziou Visual Studio Code fungovať).
Pokiaľ si ho chcete skúsiť, postupujte nasledovne:
- Otvorte ponuku rozšírenia Extensions (posledná ikona štvorčekov v ľavom zvislom menu).
- Do vyhľadávacieho poľa zadajte heslo "Live Server" a toto rozšírenie nainštalujte.
Akonáhle máte rozšírenie nainštalované, môžete kliknúť na možnosť
otvoriť s live serverom (Open With Live Server), ktorú nájdete ako
prvú možnosť po kliknutí pravým tlačidlom myši na súbor
index.html. Rovnakú možnosť nájdete v menu, ktoré vyvoláte
kliknutím pravým tlačidlom myši priamo do stránky index.html
vo VS Code, kam píšeme kód:
V budúcej lekcii, Základné HTML tagy , si uvedieme základné HTML tagy, ktoré budete pre váš web potrebovať.
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é 594x (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.