2. diel - Základná štruktúra HTML druhýkrát
Vitajte u ďalšej lekcie kurzu HTML 5, kde sa spoločne pozrieme na
zostávajúce tagy z minulej lekcie. Týmito tagy sú <base>,
<link>, <style>,
<script>, <noscript> a už aj spomínaný
tag <body>.
<base>
Tag <base> umožňuje nastaviť koreňovú zložku pre
relatívne odkazy v dokumente. Jej nastavenie tak ovplyvní
napr. Odkazy, obrázky a ďalšie prvky, pri ktorých je špecifikované
relatívna umiestnenie.
Tag môže byť umiestnený len v sekcii <head> a to len
raz. Je nepárový.
Atribúty
Tag <base> má dva atribúty:
- href - Špecifikuje koreňovú zložku pre všetky relatívnej URL v dokumente.
- target - Špecifikuje cieľové umiestnenie pre všetky odkazy.
Ukážka použitia
Najskôr si ukážeme dokument bez tagu <base>:
<body> <img src="http://www.mujweb.cz/obrazky/obrazek.jpg" alt="Obrázek" /> <a href="http://www.mujweb.cz/obrazky/psi.html">Obrázky psů</a> </body>
Kód vyššie môžeme zjednodušiť pomocou tagu
<base>:
<head> <title>Ukázka base</title> <base href="http://www.mujweb.cz/obrazky/" /> </head> <body> <img src="obrazek.jpg" alt="Obrázek" /> <a href="psi.html">Obrázky psů</a> </body>
Pozor: jeho použitie ovplyvní relatívna umiestnenie všetkých elementov na stránke!
Tag sa často využíva pre realizáciu tzv. Pretty URL. V tomto prípade má
atribút href na každej stránke hodnotu /. Tak sa
zabezpečí, že pre stránku www.mujweb.cz/clanek/muj-pes bude
koreňový priečinok rovnaká, ako by sa HTML stránka nachádzala priamo na
www.mujweb.cz.
<link>
Tag <link> sa používa na previazanie dokumentu s
externým súborom. Najčastejšie sa tak k dokumentu pripájajú CSS štýly.
Smie byť tiež obsiahnutý len v hlavičke a to pokojne aj niekoľkokrát.
Nemá obsah, má iba atribúty a je nepárový.
Atribúty
Medzi jeho atribúty patrí:
- href - Špecifikuje umiestnenie pripájaného súboru (dokumentu).
- hreflang - Špecifikuje jazyk pripojovaného dokumentu.
- media - Špecifikuje typ zariadenia, pre ktoré je
pripojovaný dokument určený (jedná sa o pravidlo
@media).
- rel - Špecifikuje vzťah medzi dokumentmi. Najčastejšie
hodnoty sú
stylesheetaicon, existuje ich ale oveľa viac. - sizes - Umožňuje špecifikovať veľkosť ikony (iba pre
rel="icon"), žiadny prehliadač tento atribút ale nepodporuje. - type - MIME typ pripájaného súboru (dokumentu).
Najčastejšie
text/css.
Ukážka pripojenia CSS súboru k dokumentu:
<head> <title>Titulek stránky</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
CSS sú kaskádové štýly, vďaka ktorým naša stránka získa farbičky, rôzne písma, animácie a ďalšie. Viac sa môžeme dočítať o CSS v tomto kurze.
Ikonku na stránky pripojíme takto:
<head> <title>Titulek stránky</title> <link rel="icon" href="favicon.ico" /> </head>
V HTML 5 je možné toto pripojenie ikony cez tag <link>
nepoužiť a namiesto toho umiestniť do koreňového priečinka s webovými
stránkami ikonu pod názvom favicon.ico. Prehliadač si ju potom
nájde sám.
Ikonku by mala mať každá webová stránka, ak si napríklad nejakú stránku uložíme ako odkaz na plochu v telefóne, mali by sme mať onú ikonku. Ikonka sa nám zobrazuje aj v prehliadačoch. Existujú ľudia, čo majú otvorené tisíc listov zároveň a jediné, čo vidí, sú práve ikonky:
<style>
Element <style> slúži na vloženie štýlovanie priamo
do HTML dokumentu. Príliš sa nevyužíva, keďže sa štýly preferujú v
externom súbore.
Atribúty
U elementu môžeme uviesť nasledujúce atribúty:
- type - Špecifikuje typ štýlu, ako hodnotu uvedieme
text/css. - media - Špecifikuje typ zariadenia, pre ktorý je štýl optimalizovaný. Atribútom sa teraz nebudeme zaoberať.
- scoped - Ak je atribút uvedený, môže tag stáť mimo
hlavičku. Štýlom
<div>, ktorého ID je hodnotou tohto atribútu. Element style je potom súčasťou tohto divu.
Ukážka použitia
Ukážme si, ako by sa priamo v hlavičke nastylovaly všetky nadpisy
<h1> na modrú farbu písma:
<head> <title>Titulek stránky</title> <style type="text/css"> h1 { color: blue; } </style> </head> <body> <h1>Modrý nadpis</h1> </body>
Na webovej stránke uvidíme nasledujúce modrý nadpis:
<script> a
<noscript>
Tieto tagy sa využívajú pre skriptovací jazyk JavaScript, presnejšie povedané, je na to využívaný iba jeden, ten druhý sa využije v prípade, keď nie je JavaScript v prehliadači povolený.
Uveďme si jednoduchý príklad:
<script> document.write("Ahoj světe!"); </script> <noscript> Váš prohlížeč nepodporuje JavaScript! </noscript>
Tento kód spôsobí vypísanie hlášky Ahojte všetci! do prehliadača:
Keď si teraz túto stránku spustíme v prehliadači s vypnutým JavaScriptom (alebo s prehliadačom, ktorý JavaScript nepodporuje), vyskočí na nás táto hláška:
<body>
Do tela stránky už patrí tagy, ktoré sa užívateľovi zobrazí - to sme si už aj vyskúšali, ale pre kompletnosť si to ešte zmienime. Sú to napr. Odseky s textom, obrázky, tabuľky, zoznamy a podobne. Tieto tagy sú ešte uložené v tzv. Layoutu, o ktorom si však povieme až v ďalších lekciách.
Uveďme si teda príklad jednoduchej validné HTML stránky:
<!DOCTYPE html> <html lang="cs"> <head> <title>itnetwork.cz - programátorská sociální síť</title> </head> <body> <h1>itnetwork.cz</h1> <p>Vítejte na programátorské sociální síti!</p> </body> </html>
A ako výsledok v prehliadači bude toto:
To by pre dnešné lekciu už bolo všetko:)
V ďalšej lekcii, Rozloženie stránky v HTML II. časť , si ukážeme HTML 5 tagy
<details>, <summary>,
<figure>, <time> a ďalšie.
