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

HTML a CSS Manuál HTML struktura 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>

<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="devbook, HTML, tutoriál" />

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

<meta name="description" content="Tutoriály 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ř. devbook.

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


 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
HTML struktura - Český HTML 5 manuál

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!