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áli 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 takzvaný 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ík 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čka - 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"> <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 lomkou /. Takto sa
píšu takzvané 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 chvíľu vložíme aj obsah hlavičky. Rovnako
to máme aj s telom (tag <body>), kde definujeme jeho
začiatok a koniec pomocou lomky 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áracieho tagu a ich hodnotu píšeme do
úvodzoviek "" za znak =. Pri tagu
<html> si všimnite atribút lang="en", ktorý
definuje jazyk stránky. Ten 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ču sme týmto oznámili, že stránka je kódovaná v
UTF-8, a 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 lomku 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 lomkou na
konci nie je povinné a jej písanie je otázkou preferencie.
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 dokument je kompatibilný s XML, kde sa
všetky značky musia uzatvárať. Ak 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čia. 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="en"> <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
Ak 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. Ak 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 Visual Studio 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. Jej konkrétna podoba sa môže medzi jednotlivými
verziami Visual Studio Code mierne líšiť a môže obsahovať aj ďalšie
prvky. Keďže v tomto kurze vytvárame webové stránky v angličtine,
ponecháme v atribúte lang hodnotu "en". Ak by sme
však vytvárali stránku v slovenčine, zmenili by sme ju na "sk",
aby bol jazyk stránky správne rozpoznaný.
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 na zobrazenie webu
Na záver si ukážme ešte taký bonus.
Aby sme si mohli rýchlo a pohodlne zobraziť, ako naša stránka vyzerá vo webovom prehliadači, môžeme využiť tzv. pluginy na živý náhľad. Vďaka nim sa zmeny v HTML alebo CSS prejavia hneď, často aj bez ručného obnovovania stránky.
Tieto funkcie je potrebné do VS Code nainštalovať ako rozšírenia. Sú úplne zadarmo, ale keďže nejde o vstavanú súčasť editora, ich fungovanie sa môže mierne líšiť v závislosti od konkrétnej verzie VS Code alebo ďalších nainštalovaných pluginov.
Dva najčastejšie pluginy na živý náhľad vo VS Code sú Live Preview a Live Server. Každý funguje trochu inak a hodí sa na iné situácie:
| Live Preview (od Microsoftu) | Live Server | |
| Kde sa zobrazí náhľad? | V paneli vo vnútri VS Code | Vo východiskovom webovom prehliadači |
| Aktualizácia náhľadu | Automaticky pri písaní (aj bez uloženia) | Pri uložení súboru |
| Vhodné pre | Jednoduché HTML/CSS projekty | Zložitejšie projekty, viac stránok |
-
Live Preview – Postup inštalácie
Otvoríme si Visual Studio Code. V ľavom paneli klikneme na ikonu Rozšírenia:
Do vyhľadávacieho poľa napíšeme "Live Preview". Kliknutím vyberieme rovnomenné rozšírenie:
Klikneme na tlačidlo Install a nainštalujeme ho do nášho Visual Studia:
Po inštalácii môžeme živý náhľad otvoriť priamo v HTML súbore pomocou ikony s lupou v pravom hornom rohu, alebo kliknutím pravým tlačidlom myši na daný HTML súbor v ľavom stĺpci a výberom možnosti Show Preview:
Náhľad sa zobrazí v novom paneli priamo vo VS Code. Hneď ako vykonáme zmenu v kóde, náhľad sa automaticky aktualizuje:
-
Live Server – Postup inštalácie
Kliknutím na poslednú ikonu štvorčekov v ľavom zvislom menu otvoríte ponuku rozšírení (Extensions):
Do vyhľadávacieho poľa napíšeme "Live Server" a toto rozšírenie nainštalujeme.
Po inštalácii môžeme náhľad spustiť kliknutím pravým tlačidlom myši na náš
.htmlsúbor a výberom možnosti Open with Live Server. Rovnakú možnosť nájdeme aj v menu, ktoré vyvoláme kliknutím pravým tlačidlom do editora s týmto súborom:
Obe rozšírenia môžu výrazne spríjemniť a zrýchliť prácu s HTML a CSS. Odporúčame vyskúšať obe a rozhodnúť sa podľa toho, ktoré vám bude viac vyhovovať.
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é 427x (531 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.