Hlavička dokumentu
Žádná z informací uvedených v hlavičce se nezobrazí ve formě textu na výsledné stránce. Obsahují různé informace o samotné stránce, které jsou určeny jak pro uživatele, tak pro prohlížeče a prohledávací roboty.
<html>
<meta http-equiv=“content-type“ content=“text/html;charset=windows-1250″>
<title>Titulek stránky</title>
<link rel=“stylesheet“ href=“styly/muj-styl.css“ type=“text/css“>
<body>
… zde pokračuje dokument
Tagy, které patří do hlavičky dokumentu (mezi značky <head> a </head>):
- title: titulek stránky
- base: základ odkazů
- link: nezobrazované propojení
- meta: informace o dokumentu
Contents
title
Titulek stránky. Párový tag. Mezi značkami <title> a </title> je text, který bude chápán jako titulek. Titulek má několik málo známých funkcí, například:
- zobrazuje se v záhlaví okna a na hlavním panelu jako nadpis aplikace
- zobrazuje se jako nadpis ve vyhledávačích
- je prioritní při indexování stránky vyhledávacími roboty
- mnoho softwaru ho používá jako nativní odkaz
Obsahem elementu může být pouze obyčejný text bez tagů.
Kdo titulek používá
- Vyhledávače, když se snaží uhodnout, o čem stránka je. To je asi hlavní pravidlo optimalizace pro vyhledávače.
- Čtenář, když se ve vyhledávači rozhoduje, zda na titulek klikne.
- Když si čtenář chce stránku uložit, objeví se titulek jako automaticky nabízené jméno souboru (což většina lidí nemění).
- Složitější HTML editory pro tvorbu struktury stránky a pro automatické odkazy.
Pravidla pro tvorbu titulku
Musí být výstižný. „Další stránka“ je špatně. Měl by být výstižný i z globálního hlediska. Titulek „kontakt“ je špatně, protože není jasné, na koho je to kontakt. „Kontakt na FIRMU“ je dobře.
Čtenář může titulek používat i pro pochopení struktury serveru. Naopak když budou mít všechny stránky serveru titulek stejný (jako hlavní stránka), tak čtenář o tuhle možnost orientace přijde.
Titulek by měl být stručný. Deset slov už je moc, optimum jsou tři čtyři. Limit pro užitečnou délku titulku se často uvádí jako 200 znaků.
Titulek a nadpis stránky
Nadpis stránky je to, co je vidět nahoře v textu, většinou je to tag <h1>. Titulek <title> není součástí textu. Nic se ale nezkazí, když titulek a nadpis mají stejný obsah.
HTML pravidla pro titulek
Uvnitř tagu <title> se nedají použít žádné další html tagy.
Doporučuju v titulku nezalamovat řádky. Myslím si, že Internet Explorer čte přijímaný soubor po řádcích a pokud při pomalejším připojení dostane jenom řádek s počátečním tagem <title>, tak do titulkového proužku titulek nevypíše. Následující zápis je prostě nešikovný:
Text titulku
</title>
Také se doporučuje případnou deklaraci češtiny meta tagem umisťovat ještě před titulek:
<title>Text titulku se žluťoučkou diakritikou</title>
Kdyby byl meta tag až za titulkem (kdyby se prohodily řádky), mohlo by se v Exploreru stát, že se stránka s čárkovaným písmenem v titulku vůbec nezobrazí. Někdy se ovšem i v tom případě zobrazí dobře.
base
Základní umístění nebo zacílení. Nepárový tag. Vyskytuje se pouze v hlavičce.
Atributy tagu <base>
- href: základní umístění, od kterého se odvozují všechny relativní odkazy, hodnoty: URL složky
- target: jméno rámu, ve kterém se zobrazují odkazy (pokud u nich není stanoveno jinak), hodnoty: jméno rámu | _blank | _top | _parent | _self
Tag <base> se využívá málo, hlavně slouží pro ulehčení práce. Obvykle se pracuje pouze s jedním z atributů.
Internet explorer do verze 6 dovoluje nestandardní víceré použití tagu <base> v jedné stránce (uvnitř tagu <body>). Base uvedená v dokumentu později přehlušuje původní base. Když například máte na stránce oddíl odkazů, které potřebujete všechny otevírat do nového okna, hodíte před ně tag <base target=“_blank“>. Potom, má-li pokračovat stránka s normálními odkazy, stačí opět použít <base target=“_self“>. Celou tuto konstrukci nedoporučuji používat, protože je nestandardní (tedy nevypočitatelná), funguje jenom v Exploreru a v Exploreru 7 prý už fungovat nebude.
Osobně tag base používám ve chvíli ladění, když si z webu stáhnu nějakou stránku s relativními odkazy, u kterých potřebuju, aby při ladění fungovaly, ale nechci je všechny přepisovat.
Tag <base> je potřeba ve zdrojovém kódu uvést před všemi relativními odkazy, které má ovlivnit (tedy třeba i před odkazem na stylopis nebo skripty).
link
Spojitost s jiným souborem, neviditelný vztah. Nejčastěji se užívá pro propojení s externím CSS stylem. Nepárový tag, vyskytuje se pouze v hlavičce. Atributy tagu <link>:
- rel: vztah k linkovanému souboru, hodnoty: stylesheet | teoreticky i další
- rev: zpětný vztah, prakticky nefunguje
- href: cesta k linkovanému souboru, hodnoty: URL
- type: MIME typ souboru (nepovinné), hodnoty: MIME specifikace (např. „text/css“)
- media: omezení na typ výstupu, hodnoty: all | screen | print | a další
- disabled: zrušení platnosti (kvůli skriptům), bez hodnoty
Link prošel celkem dramatickým vývojem, dnes se využívá pouze v několika málo případech
Příklad připojení stylu:
Příklad připojení oblíbené ikony:
Příklad informace o rss kanálu:
Příklad určení statické kanonické adresy dokumentu pro vyhledávače:
Atributy tagu<link>
- rel: vyjadřuje typ vztahu. V praxi se používá pouze zápis rel=“stylesheet“. Znám je ještě např. rel=“shortcut icon“ pro připojení ikony k dokumentu (jde o nestandardní, ale funkční hodnotu).
HTML tag <link rel=“prefetch“ href=“stranka.html“> způsobí v prohlížečích typu Gecko (Mozilla, Firefox apod.) přednačtení uvedeného souboru (nejčastěji stránky). Stránka se načítá neviditelně, používá se to v případech, kdy je téměř jisté, na co uživatel klikne, aby to pak už měl v keši. Podobné přednačítání možná způsobuje <link rel=“next“…>, který normálně vyjadřuje v pořadí další stránku (a normálně to nic nedělá).
Meta tagy
META tagů je spousta, my si popíšeme postupně ty nejdůležitější. Mají celkem jednoduchou syntaxi, ale nemá cenu si je pamatovat. Stačí je vždy zkopírovat z nějaké starší stránky a upravit informace.
Kodování stránky
Říká prohlížeči, v jakém kódování (neboli charsetu) je daná stránka. Proto kdybychom tuto metu neuvedli, mohlo by se snadno stát, že by se stránka stala nečitelnou kvůli špatnému zobrazení háčků a čárek.
Pro češtinu jsou prakticky k dispozici tři možnosti pro nastavení charsetu:
- windows-1250: preferováno na Windowsech. Jeho obliba na webových stránkách spočívá zejména kvůli tomu, že jej většina editorů na Windowsech používá jako základní kódování, např. FrontPage, HomeSite nebo Notepad (poznámkový blok).
- iso-8859-2: kódování standardnější, používané na Unixu a na Linuxu, ale i v mnoha windowsáckých programech. Někdy se označuje jako Latin 2, ISO Latin 2. Microsoft jej nazývá takto: „Středoevropské jazyky (ISO)“.
- utf-8: nejčastějším zápisem znakové sady Unicode. Unicode je narozdíl od výše zmíněných znakových sad určeno pro všechny světové jazyky najednou. Jde o nejmodernější kódování. Všeobecná podpora Unicode je teprve hudbou budoucnosti, ale už lze bez problémů používat stránky kódované v UTF-8. UTF-8 je v prohlížečích podporované dobře.
Dané kodování vždy musí podporovat editor, ve kterém html kod editujete a daný soubor musíte vždy v daném kodovaní uložit.
Indexování stránky vyhledávacími roboty
Tento tag říká všem robotům, aby si naši stránku zaindexovali. Většinou to bývá zapnuté automaticky, proto je to víceméně zbytečné na stránku dávat.
Toto je pravý opak předchozího, nyní zakazuji robotům, aby si mě uložili. K čemu to může být dobré? Já to používám třeba pro články zformátované pro tisk, protože nechci, aby vyhledávače primárně zobrazovali uživatelům ořezané články bez zbytku webu.
Autor, popis stránky
V tomto se většinou uvádí autor stránky či název firmy. Nemá to žádný význam, zobrazí se to pouze ve vlastnostech stránky
<meta name=’copyright‘ content='(c) Silvie Bečvářová‘>
Sem můžete napsat stručný popis dané stránky. Některé vyhledávače toho využívají a zobrazují to ve výsledcích.
Načtení čerstvé verze stránky
Tyto mety nám zaručují to, aby ze serveru byla vždy načtena čerstvá verze stránky. Ne vždy to ale funguje.
<meta http-equiv=’Cache-Control‘ content=’no-cache‘>
<meta http-equiv=’Expires‘ content=‘-1′>
Klíčová slova
Do keywords lze uvést klíčová slova, podle kterých by si vás mohli uživatelé najít. Pravděpodobně tomu ale vyhledávače přílišnou váhu nedávají, protože je to snadno zneužitelné. Každý si tam může napsat co chce.