Lekce 2 - Základní struktura HTML II. část
V minulé lekci, Základní struktura HTML, jsme se seznámili se strukturou HTML dokumentu.
Ukázali jsme si tagy <html>, <title>,
<head>, jeho atributy a další.
Vítejte u další lekce kurzu HTML 5, kde se společně podíváme na
zbývající tagy z minulé lekce. Těmito tagy jsou <base>,
<link>, <style>,
<script>, <noscript> a už i zmíněný
tag <body>.
<base>
Tag <base> umožňuje nastavit kořenovou složku pro
relativní odkazy v dokumentu. Její nastavení tak ovlivní
např. odkazy, obrázky a další prvky, u kterých je specifikováno
relativní umístění.
Tag může být umístěn pouze v sekci <head> a to jen
jednou. Je nepárový.
Atributy
Tag <base> má dva atributy:
- href - Specifikuje kořenovou složku pro všechna relativní URL v dokumentu.
- target - Specifikuje cílové umístění pro všechny odkazy.
Ukázka použití
Nejdříve 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 výše můžeme zjednodušit pomocí 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žití ovlivní relativní umístění všech elementů na stránce!
Tag se často využívá pro realizaci tzv. pretty URL. V tomto případě
má atribut href na každé stránce hodnotu /. Tak se
zajistí, že pro stránku www.mujweb.cz/clanek/muj-pes bude
kořenová složka stejná, jako by se HTML stránka nacházela přímo na
www.mujweb.cz.
<link>
Tag <link> se používá k provázání dokumentu s
externím souborem. Nejčastěji se tak k dokumentu připojují CSS styly. Smí
být také obsažen pouze v hlavičce a to klidně i několikrát. Nemá obsah,
má pouze atributy a je nepárový.
Atributy
Mezi jeho atributy patří:
- href - Specifikuje umístění připojovaného souboru (dokumentu).
- hreflang - Specifikuje jazyk připojovaného dokumentu.
- media - Specifikuje typ zařízení, pro které je
připojovaný dokument určen (jedná se o pravidlo
@media).
- rel - Specifikuje vztah mezi dokumenty. Nejčastější
hodnoty jsou
stylesheetaicon, existuje jich ale mnohem víc. - sizes - Umožňuje specifikovat velikost ikony (pouze pro
rel="icon"), žádný prohlížeč tento atribut ale nepodporuje. - type - MIME typ připojovaného souboru (dokumentu).
Nejčastěji
text/css.
Ukázka použití
Ukázka připojení CSS souboru k dokumentu:
<head> <title>Titulek stránky</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
CSS jsou kaskádové styly, díky kterým naše stránka získá barvičky, různé písma, animace a další. Více se můžeme dočíst o CSS v tomto kurzu.
Ikonku na stránky připojíme takto:
<head> <title>Titulek stránky</title> <link rel="icon" href="favicon.ico" /> </head>
V HTML 5 lze toto připojení ikony přes tag <link>
nepoužít a místo toho umístit do kořenové složky s webovými stránkami
ikonu pod názvem favicon.ico. Prohlížeč si ji pak najde
sám.
Ikonku by měla mít každá webová stránka, pokud si například nějakou stránku uložíme jako odkaz na plochu v telefonu, měli bychom mít onu ikonku. Ikonka se nám zobrazuje také v prohlížečích. Existují lidé, co mají otevřeno tisíc listů zároveň a jediné, co vidí, jsou právě ikonky:
<style>
Element <style> slouží k vložení stylování přímo
do HTML dokumentu. Příliš se nevyužívá, jelikož se styly preferují v
externím souboru.
Atributy
U elementu můžeme uvést následující atributy:
- type - Specifikuje typ stylu, jako hodnotu uvedeme
text/css. - media - Specifikuje typ zařízení, pro který je styl optimalizován. Atributem se nyní nebudeme zabývat.
- scoped - Pokud je atribut uveden, může tag stát mimo
hlavičku. Styluje
<div>, jehož ID je hodnotou tohoto atributu. Element style je poté součástí tohoto divu.
Ukázka použití
Ukažme si, jak by se přímo v hlavičce nastylovaly všechny nadpisy
<h1> na modrou barvu písma:
<head> <title>Titulek stránky</title> <style type="text/css"> h1 { color: blue; } </style> </head> <body> <h1>Modrý nadpis</h1> </body>
Na webové stránce uvidíme následující modrý nadpis:
<script> a
<noscript>
Tyto tagy se využívají pro skriptovací jazyk JavaScript, přesněji řečeno, je k tomu využíván pouze jeden, ten druhý se využije v případě, když není JavaScript v prohlížeči povolen.
Uveďme si jednoduchý příklad:
<script> document.write("Ahoj světe!"); </script> <noscript> Váš prohlížeč nepodporuje JavaScript! </noscript>
Tento kód způsobí vypsání hlášky Ahoj světe! do prohlížeče:
Když si nyní tuto stránku spustíme v prohlížeči s vypnutým JavaScriptem (nebo s prohlížečem, který JavaScript nepodporuje), vyskočí na nás tato hláška:
<body>
Do těla stránky již patří tagy, které se uživateli zobrazí - to jsme si už i vyzkoušeli, ale pro kompletnost si to ještě zmíníme. Jsou to např. odstavce s textem, obrázky, tabulky, seznamy a podobně. Tyto tagy jsou ještě uloženy v tzv. layoutu, o kterém si však povíme až v dalších lekcích.
Uveďme si tedy příklad jednoduché 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 jako výsledek v prohlížeči bude toto:
To by pro dnešní lekci už bylo vše 
V další lekci, Rozložení stránky v HTML (layout), si ukážeme HTML 5 layout webové stránky, který bychom měli dodržovat.
