V tejto časti HTML tutoriálu sa pozrieme na to, ako čo najlepšie vyplniť hlavičku html dokumentu - tag head
V hlavičke HTML dokumentu sa nachádzajú všeobecné informácie o stránke, ktoré sa priamo nezobrazujú návštevníkom (nie sú viditeľné v prehliadači na rozdiel od obsahu stránky). Slúžia len pre webový prehliadač ako pomocné informácie pre spracovanie HTML dokumentu. Vedieť správne vytvoriť hlavičku pre HTML dokument je dôležité až vo fáze, keď sa chystáme web reálne nasadiť na internet a očakávame návštevníkov. Preto sa zvyčajne stačí s ňou oboznámiť až neskôr, keď už poznáme základy tvorby HTML stránok.
V hlavičke HTML dokumentu vieme zadefinovať napríklad:
Na ukážke nižšie je zjednodušená verzia hlavičky čiastočne prebraná z tohto webu, telo sme pre jednoduchosť nechali takmer prázdne.
Slovenský jazyk
Anglický jazyk
Ukrajinčina (ukrajinský jazyk)<!DOCTYPE html>
<html lang="sk">
<head>
<base href="https://www.eduself.sk/">
<meta charset="utf-8">
<meta name="keywords" content="html, tutoriál, vedomostné kvízy, testy">
<meta name="description" content="Vedomostné kvízy na testovanie svojich vedomostí z HTML.">
<meta name="author" content="web">
<meta name="robots" content="follow,index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#428bca">
<title>Tutoriál HTML</title>
<link rel="icon" type="image/png" sizes="192x192" href="https://www.eduself.sk/public/favicons/android-icon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.eduself.sk/public/favicons/apple-icon-180x180.png">
<link rel="stylesheet" type="text/css" href="https://www.eduself.sk/public/css/bs.css?v=2021">
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://www.eduself.sk/rss.php?v=2021">
</head>
<body>
Vitajte na stránke :)
</body>
</html>Jednotlivé elementy HTML hlavičky si teraz postupne vysvetlíme.
Pomocou tagu base definujeme, ako sa majú v celom HTML dokumente správať hypertextové odkazy a linky na iné dokumenty (napr. obrázky).
Keďže v rámci linkovania je výhodné využívať relatívne cesty, potrebujeme mať niekde zadefinovanú cestu k hlavnému priečinku. To je taký, v ktorom
sa nachádzajú všetky dokumenty.
Ak máme všetky dokumenty umiestnené na serveri s názvom www.eduself.sk/, je výhodné túto informáciu napísať len raz do hlavičky
HTML dokumentu, a potom v tele dokumentu HTML už stačí používať len relatívnu cestu (cesta začínajúca za lomítkom).
Na nastavenie hlavnej URL slúži parameter href, a taktiež môžeme cez parameter target nastaviť preddefinovaný spôsob otvárania odkazov v celom dokumente.
Na ukážke nižšie vidíme, ako vyzerá odkaz vytvorený pomocou relatívnej adresy a ako vyzerá odkaz na stránku v podobe absolútnej adresy. Keďže v hlavičke sme tiež nastavili parameter target na _blank, všetky odkazy sa budú otvárať v novom okne.
<html lang="sk">
<head>
<base href="https://www.eduself.sk/" target="_blank">
</head>
<body>
<a href="trening">Odkaz na tréning pomocou relatívnej adresy</a>
<br>
<a href="https://www.eduself.sk/trening">Odkaz na tréning pomocou absolútnej adresy</a>
</body>
</html>Asi najdôležitejšou časťou hlavičky HTML dokumentu sú metadáta (tiež nazývané ako metaúdaje).
Metadáta sú dáta o dátach. To znamená, že sú to dáta, ktoré hovoria o tom, aké dáta sú v dokumente :)
Vieme si to predstaviť tak, že metadáta pomáhajú prehliadaču pochopiť, čo je na stránke aj bez toho, aby musel čítať telo dokumentu.
Metadáta sa uchovávajú v tagu meta, ktorý obsahuje atribúty
name (pre názov dát),
content (pre popis dát) a niekedy
http-equiv (čo sú doplňujúce informácie pre protokol HTTP).
Opis najviac používaných metatagov v hlavičke HTML dokumentu uvádzame v zozname nižšie:
<meta name="keywords" content="HTML, tutoriál, kvízy">
<meta name="description" content="Tutoriál, pomocou ktorého sa naučíte vytvoriť jednoduchú stránku v jazyku HTML.">
<meta name="author" content="eduself.sk">
<meta name="robots" content="nofollow">
<meta name="theme-color" content="#428bca">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset = UTF-8">
<meta http-equiv="refresh" content="text/html; charset = UTF-8">
<meta http-equiv="refresh" content="100">
<meta http-equiv="expires" content="Mon, 15 Sep 2021 10:00:00 GMT">Poznámka k HTML ukážke: ako ste si možno všimli z ukážky, po prepnutí do tabu "Ukážka" sa nezobrazí nič. Je to samozrejme preto, že v hlavičke nie je žiadny obsah, a preto sa nemá čo zobraziť :)
V predchádzajúcom HTML kóde sme ukázali, ako nastaviť v hlavičke automatickú obnovu stránky po 100 sekundách (riadok 7).
Tento tag sa často nepoužíva, keďže málokedy chceme pravidelne obnovovať obsah stránky v prehliadači. (Má to zmysel
napríklad pri komentovaní online zápasov, ale dnes už na tento účel existujú modernejšie spôsoby, kedy nedochádza k obnove
celej stránky, ale len časti ako napr. okna s výsledkom).
Tento metatag má však ešte jednu schopnosť: vieme na koniec pridať informáciu o URL adrese, ktorá sa má zobraziť
po uplynutí času. To je výhodné, keď chceme používateľovi odkázať, že táto stránka už neexistuje, nová je na inej adrese a na túto
adresu dôjde k presmerovaniu automaticky po 5 sekundách (v čase čítania týchto riadkov už je pravdepodobne načítaná nová adresa).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stránka je zmenená</title>
<meta http-equiv="refresh" content="5;url=https://www.eduself.sk">
</head>
<body>
<p>Táto stránka je už na novej adrese. Za chvíľu dôjde k presmerovaniu :)</p>
</body>
</html>Poznámka k HTML ukážke: keďže v hlavičke stránky je nastavené presmerovanie na úvodnú stránku webu eduself.sk po 5 sekundách od načítania, tak pravdepodobne už vidíte web eduself.sk :)
Pomocou metatagu s názvom robots vieme určiť robotom, či majú obsah stránky indexovať a ako pristupovať k odkazom v rámci stránky.
<meta name="robots" content="nofollow">Čo sú to webové roboty? Webový robot (niekedy aj bot) je systém, ktorý chodí automatizovane po webe (navštevuje rôzne URL adresy). Keď nájde v obsahu stránky nejaký odkaz, uloží si ho do zoznamu a neskôr navštívi aj ten. Nejde teda o skutočného návštevníka stránky, ale o naprogramovaný skript. Odhaduje sa, že viac ako jednu tretinu zobrazení stránky sú práve automatizované systémy, a nie reálny človek. Existuje viacero druhov robotov. Niektoré monitorujú web, iné sťahujú obsah. Ich cieľ je zvyčajne zistiť, čo sa na ktorých stránkach nachádza. Takéto roboty používajú napríklad vyhľadávače webov (robot Googlebot od firmy Google). Priebežne chodia na stránky, sťahujú si ich obsah k sebe a vďaka tomu je možné túto stránku nájsť vo vyhľadávači (napr. spomínaný vyhľadávač Google).
Základné hodnoty pre parameter robots sú:
Treba však spomenúť, že dodržiavanie odporúčaní pre roboty, ktoré sú uvedené v meta tagu, je na zvážení samotných systémov. Záleží ako sú naprogramované. Môže sa stať, že roboty nebudú tento tag zohľadňovať. Napríklad robot od firmy Google (tzv. Google Bot) sa zvykne riadiť samostatným súborom s názvom robots.txt, ktorý sa odporúča vložiť na server ku stránke. Viac informácií o robotoch firmy Google nájdete tu: robots
Do hlavičky sa tiež vkladajú odkazy na ďalšie zdroje (súbory), ktoré sú potrebné pre korektné načítanie stránky alebo sú nejakým spôsobom dôležité pre túto stránku. Na to slúži tag link, ktorý môže mať niekoľko atribútov:
href cesta k súboru (URL)
type MIME typ súboru
rel vzťah HTML dokumentu k súboru, resp. význam tohto súboru pre stránku
sizes rozmery súboru, ak je to relevantné (môžeme mať viac rovnakých súborov a pre každé rozlíšenie inú verziu)
hreflang jazyk
a niekoľko ďalších
Atribútom rel (ktorý je povinný) určujeme, aký je vzťah medzi linkovaným a aktuálnym dokumentom. Zariadenie podľa toho vie, či má tento dokument tiež siahnuť. Možností máme veľa, uvedieme len tie najčastejšie používané.
<link rel="stylesheet" type="text/css" href="https://www.eduself.sk/public/css/bs.css?v=202106a">
<link rel="stylesheet" type="text/css" href="public/css/style_main.css?20204b">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.eduself.sk/public/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://www.eduself.sk/public/favicons/android-icon-192x192.png">
<link rel="alternate" type="application/rss+xml" title="RSS: eduself.sk" href="https://www.eduself.sk/rss.php" />| Hodnota atribútu rel | vysvetlenie |
|---|---|
| icon | favicon | shortcut icon | Ikonky, ktoré sa zobrazujú napr. v lište, po stiahnutí obsahu na disk a pod. |
| stylesheet | odkaz na CSS súbor pre štýlovanie HTML dokumentu |
| alternate | Odkaz na alternatívny dokument (napr. RSS export pre čítačky, alebo verzia obsahu v inom jazyku, alebo verzia pre tlač). |
| next | prev | Odkaz na nasledujúcu (next) resp. predchádzajúcu (prev) stránku. Toto sa používa vtedy, keď máte na stránke vlastné stránkovanie (obsah rozdelený na viac podstránok). |
| canonical | kanonická URL adresa - adresa, ktorou sa viete vyhnúť duplicitám (ak máte duplicitné adresy, ich kanonická adresa by mala byť rovnaká) |
| author | odkaz na autora (jeho stránku) |
| preload | označenie, že tento dokument sa musí načítať predtým, ako sa načíta stránka |
| help | odkaz pre nápoveď |
Informácií sa do hlavičky HTML stránky zmestí veľa. Zvyknú sa tam dávať aj odkazy na písma (fonty) alebo odkazy na skripty (javascriptové súbory).
O tomto sa vedú často spory medzi programátormi, či je vhodné takéto súbory dávať hneď do hlavičky alebo až na koniec HTML dokumentu.
To, čo je v hlavičke, sa zvyčajne načíta skôr ako obsah stránky. Mnohí vývojári webových stránok
preto dávajú menej dôležité skripty (ako načítanie reklám, zobrazenie lišty o súboroch cookie či uloženie návštevy do štatistík) až na koniec HTML stránky,
aby sa najskôr načítal obsah.
Avšak, keď sú tieto skripty potrebné pre chod stránky, potom sa môže stať, že stránka síce bude načítaná rýchlejšie, ale niektoré jej časti budú fungovať až po doťahaní ostatných zdrojov.
Môžeme si to všimnúť napríklad vtedy, keď sa stránka načíta s nejakým typom písma a až keď sa stiahne súbor s písmom, tak sa potom typ písma zmení. Takáto zmena počas čítania môže pôsobiť rušivo.
Rovnako, keď sa reklama načíta až dodatočne a posunie obsah článku. Tieto javy začínajú byť zo strany vyhľadávačov a hodnotiteľov kvality webov penalizované.
V tejto kapitole HTML tutoriálu sme sa naučili, na čo slúži hlavička HTML dokumentu, a že v nej môžeme nájsť napríklad:
Titulok webovej stránky
Informácie o kódovaní webovej stránky, jazyku stránky, dátumu exspirácie...
Meta informácie o webovej stránke: kľúčové slová, popis stránky, meno autora ...
Informácie pre webové roboty, najmä ako majú pristupovať k indexovaniu vašej webovej stránky
Odkazy na ďalšie relevantné dokumenty potrebné pre webovú stránku a jej korektné zobrazenie, napríklad:
Odkazy na súbory CSS
Odkazy na alternatívne jazykové verzie stránky
Odkazy na alternatívne verzie ako RSS feed alebo verziu pre tlač stránky