HTML 5 – Lekce 4
V dnešní lekci se zaměříme jen a pouze na hlavičku. Jak již víme, hlavička se zapisuje do párového tagu <head>.
Stručný přehled mluvnice:
<title> – párový – Slouží k zadání titulku stránky
<meta> – nepárový – Slouží především k informacím pro webové aplikace
Nejprve se podíváme na párový tag <title>. Do tohoto párového tagu napište titulek stránky. Titulek stránky má několik zajímavých vlastností:
1) Zobrazuje se v panelu stránky u prohlížeče
2) Zobrazuje se jako nadpis ve vyhledávačích
3) Je prioritní při indexování stránky vyhledávacími roboty
4) Mnoho aplikací jej používá jako hlavní odkaz
Proto opravdu doporučuji titulek psát. Do titulku úvodní stránky byste měli napsat název webu. Názorný příklad titulku:
<html>
<head>
<title> Titulek je důležitý </title>
</head>
</html>
Nepárový tag <meta> je dalším informačním tagem, především pro vyhledávače a webové aplikace. Tag <meta> má spoustu atributů které vám zde vypíši:
name – Druh uživatelské informace – Jeho hodnoty vám vypíši později
http-equiv – Ekvivalent http hlavičky – Jeho hodnoty vám vypíši též později
property – Něco jako name – Jakákoliv, u facebooku např. fb:admins
content – Vlastní informace o obsahu- Hodnotou je vaše informace
charset – určuje sestavu znaků ve kterých je stránka -Hodnotami jsou různé sady – o tom později
Abych vše upřesnil, atribut name má spoustu hodnot, které vám zde vypíši. Na jeho hodnotě závisí informace atributu content. Meta tag může obsahovat buďto atribut name a nebo atribut http-equiv, oba najednou nikoliv!
Hodnoty atributu name:
keywords – Dnes je tato hodnota bezcenná, sloužila klíč. slov. pro vyhledávací stroje
description – Popis stránky pro vyhledávací stroje
author – Informace o autorovi stránky
robots – Indexování nebo sledování odkazů vyhledávacími roboty
Zde vám napíši hodnoty atributu http-equiv, ale nebudeme je nějak dále rozebírat, zaměříme se na atribut name:
content-type – MIME specifik. + informace o kódování
content-language – Informace o jazyce obsaženým ve webu
refresh – Přesměrování na jinou adresu po určitém čase
cache-control – způsob takzvaného cacheování (ukládání na klientech)
a spousta dalších….
Nyní, jak jsem sliboval, se podíváme na atribut name a jeho hodnoty. První hodnotou atributu name je hodnota keywords. Dnes už tuto hodnotu nemá cenu psát, protože se prakticky nevyužije. Sloužila dříve k zadání klíčových slov pro vyhledávací stroje. Nejproslulejší vyhledávače Google a Seznam tyto klíčová slova zcela ignorují, ale není špatně je tam napsat. Klíčová slova se oddělují čárkami (za čárkou může být mezera). Dále se touto hodnotou nebudeme zaobírat.
Další hodnotou je hodnota description, Pomocí této hodnoty můžete určit popis vaší stránky, který budou potřebovat vyhledávací roboti k vyhledání vašich stránek. V tomto popisu by mělo být stručné shrnutí obsahu stránky. Myslím, že na tom není nic složitého, ale přes to zde uvedu názorný příklad:
<html>
<head>
<meta name=“description“ content=“Váš popis“>
</head>
</html>
Hodnota author je dalším na řadě. Dnes je též v podstatě k ničemu. Ale myslím, že jestli se chcete stát slavnými pisálky 🙂 tak je už jen z pravidla nutné tuto hodnotu použít. Tato hodnota by měla pojednávat o autorovi. Pokud však chceme informaci o autorovi brát trochu seriózněji, je nejlepší dát k příspěvku link k autorově profilu na sociální síti Google Plus. Tak totiž docílíme toho, že se ve vyhledávači Google zobrazí vedle naší stránky i naše jméno a fotka. Toho docílíme takto:
<html>
<head>
<link rel=“author“ href=“odkaz_na_nas_g+profil“>
</head>
<html>
Tak že mělo by být v atributu content vloženo minimálně jméno autora…., nejlépe však nějaký stručný popis. Názorný příklad zde:
<html>
<head>
<meta name=“author“ content=“Jmenuji se Tomáš Trejbal, je mi 18 let a rád píši
různé články o programování.“>
</head>
</html>
Poslední hodnotou je hodnota robots. U této hodnoty bude v atributu content hodnota buďto index a nebo noindex (další může být follow a nebo nofollow). Hodnota noindex znamená, že vyhledávací roboti tuto stránku nemají vyhledávat. Hodí se to, například, když píšete nějaký soukromý dokument atd…. Zde názorný příklad:
<html>
<head>
<meta name=“robots“ content=“noindex“> – Tato stránka nebude vhledávána
</head>
</html>
Ještě bych rád dodal, že tagů meta může být na jedné stránce několik. Zde máte tedy příklad jak může vypadat celá hlavička:
<html>
<head>
<title> Náš web, pojednávající o Autech, Letadlech, atd… </title>
<meta name=“keywords“ content=“Auto, Ford, Lodě, Letadla“>
<meta name=“description“ content=“Tato stránka je o autech značky Ford, o lodích
a letadlech“>
<meta name=“author“ content=“ Jmenuji se Tomáš Trejbal a studuji na
SPŠ“>
<meta name=“robots“ content=“index“>
</head>
</html>
To je k hlavičce asi vše, od teď jí už nemusíme nechávat prázdnou. Doufám, že se vám tato lekce líbila a přeji příjemné programování v HTML.