NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.

Hlavička HTML dokumentu - Český HTML 5 manuál

Hlavička je první částí HTML dokumentu a obsahuje informace hlavně pro prohlížeč. Můžeme do ní vložit následující tagy:

<title>

<title> je párový tag a obsahuje titulek stránky. Každá HTML stránka ho musí v hlavičce obsahovat a je velmi důležitý pro vyhledávače z hlediska SEO. Titulek by měl obsahovat klíčová slova a zobrazí se jako nadpis záložky v prohlížeči.

Hlavička s titulkem by mohla vypadat např. takto:

<head>
    <title>Titulek stránky</title>
</head>

<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.

U elementu můžeme uvést nasledující atributy:

  • type - Specifikuje typ stylu, jako hodnotu uvedeme text/css.
  • media - Sepecifikuje 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.

Ukažme si, jak by se přímo v hlavičce nastyloval nadpis h1:

<head>
    <title>Titulek stránky</title>
    <style type="text/css">
        h1 {color:blue}
    </style>
</head>

<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 obsažen pouze v hlavičce a to i několikrát. Nemá obsah, má pouze atributy.

Atributy:

  • 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.
  • rel - Specifikuje vztah mezi dokumenty. nejčastějši hodnoty jsou stylesheet a icon.
  • sizes - Umožňuje specifikovat velikost ikony (pouze pro rel="icon").
  • type - MIME typ připojovaného souboru (dokumentu). Nejčastěji text/css.

Ukázka připojení CSS souboru k dokumentu:

<head>
    <title>Titulek stránky</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Ukázka připojení ikony stránky:

<head>
    <title>Titulek stránky</title>
    <link rel="icon" href="/favicon.ico" />
</head>

<meta>

Tag <meta> poskytuje tzv. metadata. Jedná se o informace vložené do HTML dokumentu, které se nezobrazí uživateli, ale jsou určeny zejména vyhledávačům. Jistě si domyslíte, že jsou důležité pro SEO optimalizaci stránky.

<meta> musí být vždy umístěn v hlavičce stránky. Kromě vyhledávačů ho používají i webové prohlížeče a webové služby.

Tag má následující atributy:

  • charset - Specifikuje znakovou sadu dokumentu. Nejčastěji obsahuje hodnotu UTF-8. Jedná se o nový HTML 5 atribut, který zjednodušuje minulou specifikaci znakové sady.
  • content - Specifikuje parametr pro atributy name a http-equiv.
  • name - Specifikuje jméno metadat, viz. ukázky níže.

Můžeme určit autora webové stránky:

<meta name="author" content="Jan Novák" />

Dále můžeme vyhledávačům předat klíčová slova, kterých se obsah webu týká.

<meta name="keywords" content="itnetwork, HTML, kurz" />

Nejdůležitější je však popis stránky pro vyhledávače.

<meta name="description" content="Kurzy pro tvorbu webu v HTML a CSS." />

Další dvě jména metadat jsou generator a application-name. V prvním případě je v content název aplikace, která generovala HTML kód (např. Microsoft Frontpage). V druhém případě je to název aplikace, kterou webová stránka reprezentuje, např. itnetwork.

  • http-equiv - Umožňuje simulovat hlavičku http odpovědi. Dříve se používal k nastavení kódování.

Lze přes něj např. nastavit automatické obnovení stránky:

<meta http-equiv="refresh" content="30" />

Kód výše obnoví dokument každých 30 vteřin.

<script> a <noscript>

O elementech <script> a <noscript> vypovídá samostatný článek Klientské skripty (JavaScript) .

<base>

<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.

<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í <base> pro zjednodušení relativní cesty:

<body>
    <img src="http://www.mujweb.cz/obrazky/obrazek.jpg" alt="Obrázek" />
    <a href="http://www.mujweb.cz/obrazky/psi.htm">Obrázky psů</a>
</body>

Kód výše můžeme zjednodušit pomocí <base>. Pozor, jeho použití ovlivní relativní umístění všech elementů na stránce.+

<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.htm">Obrázky psů</a>
</body>

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.


 

Všechny články v sekci
HTML struktura - Český HTML 5 manuál
Článek pro vás napsal David Hartinger
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity