Metatagy

Meta-tagy jsou dnes nezbytnou součástí každé WWW stránky, přestože se nijak nezobrazují. Pomocí nich říkáme prohlížeči, v jakém kódování je dokument napsán (speciálně češtinu je potřeba správně nastavit), kdo je jeho autorem, určujeme klíčová slova, popis stránky, což je důležité pro indexovací roboty (programy vyhledávačů) apod.

Meta-tagy se umísťují do hlavičky dokumentu, tedy mezi tagy <HEAD> a </HEAD>. Pokud je umístíte jinde, stránka se v prohlížeči zobrazí bez problému, ale obsah meta-tagů bude ignorován. Tag je nepárový, nemusí se tedy v HTML verze 4.0 ukončovat (v XHTML jej musíte ukončit), a je nepovinný.
Následuje příklad umístění tagu meta v jednoduché html stránce. Tag Meta umístěný za tag TITLE v tomto případě definuje typ souboru (text/html) a druh kódování (nastavuje češtinu). V našem případě se jedná o kodóvání Windows, znaková sada CP-1250 (nejobvyklejší možnost češtiny ve Windows). První řádek říká prohlížeči, který standard HTML byl k tvorbě stránky použit (není povinné).

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Popisek stránky</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta http-equiv="Content-Language" content="cs">
</head>
<body>
Obsah stránky
</body>
</html>
Pokud jsme k tvorbě stránek používali Notepad, je náš text právě v tomto kódování windows-1250, vhodném pro počítače s windowsovskými systémy. Pro jiné systémy (Unix, Linux) se používá druhý typ kódování češtiny:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
Kódování stránek může měnit i uživatel v prohlížeči (většinou nabídka Zobrazit - Kódování), pokud autor stránky neurčil správné kódování a čeština je špatně zobrazená, můžete ji zkusit nastavit právě v této nabídce Zobrazit - Kódování.
<meta http-equiv="Content-Language" content="cs"> - určuje jazyk, ve kterém je stránka napsána (cs = naše zlatá čeština)

U většiny dalších metatagů je jedním parametrem name - název metatagu a druhým content - vlastní obsah metatagu, pro ilustraci uvedu přímo konkrétní příklady některých nejpoužívanějších:

<meta name="description" content="Server zaměřený na tvorbu grafiky (Photoshop, Flash, Callisto), HTML, CSS, JavaScriptu, ASP, PHP."> - meta-tag pro popis obsahu vaší stránky, tento popis stránky by se měl objevit při hledání na vyhledávacích serverech.
<meta name="keywords" content="download,html,flash,photoshop,XML,XHTML,javaScript"> - definování klíčových slov na stránce, ta by měla co nejvýstižněji definovat obsah stránky, opět slouží vyhledávačům.
<meta name="author" content="Miroslav Kučera"> , <meta name="copyright" content="© 2000, ZONER software"> - metatagy určující autora a autorská práva (spíše pro profesionály :-) )
<meta name="generator" content="Microsoft FrontPage 4.0"> - položku generator vkládají do stránky například HTML editory, hodnotou je název programu, ve kterém byly stránky vytvořeny.

Nejzákladnější metatagy obsahuje následující shrnující ukázka:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Miroslav Kučera - webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta http-equiv="Content-Language" content="cs">
<meta name="description" content="Server zaměřený na tvorbu grafiky (Photoshop, Flash, Callisto), HTML, CSS, JavaScriptu, ASP, PHP, databází apod. Součástí webu je Download, obsahující velké množství programů.">
<meta name="keywords" content="download, html, flash, photoshop, XML, XHTML, javaScript">
<meta name="author" content="Miroslav Kučera">
</head>
<body>
Obsah stránky
</body>
</html>


Přehled meta-tagů najdete například na adrese http://jakpsatweb.cz/meta-tagy.html.

Validace

Tyto lekce obsahují základní znalosti pro tvorbu jednoduchých osobních stránek, další znalosti můžete načerpat na odkazech uvedených níže nebo ze zdrojů stránek, které se vám líbí. Pokud z prohlížeče stránku uložíte (Soubor - Uložit jako...), zpravidla se vytvoří ještě složka, ve které jsou uloženy například obrázky použité na stránce (také ty, které jsou použité třeba na pozadí divů nebo tabulek) a také hlavně styl stránky, ze kterého už teď snad můžete zhruba zjistit, jak byl základ stránky vytvořen. Ať už použijete (či zneužijete :-) ) kterýkoliv zdroj, je vždycky potřeba zkontrolovat správnou funkčnost stránek.

Správnost zdroje (html) nebo stylu (css) je možné zkontrolovat prostřednictvím validátoru World Wide Web Consortia. Na internetové stránce validator.w3.org nebo jeho české verzi validator.w3.cz zadáme postupně všechny svoje stránky. Pokud najdete na profesionálních stránkách uvedenou ikonku, mělo by to znamenat, že je zkontrolována (validována) a odpovídá standardům HTML a CSS.

Bohužel ani stránka, která projde validátorem úplně bez chybičky, se nemusí ve všech prohlížečích zobrazit správně (jak už jsme zjistili), protože různé prohlížeče a jejich různé verze mají ke standardům různý přístup :-). Proto je nutné vytvořené stránky otevřít minimálně ve dvou nejrozšířenějších prohlížečích (Microsoft Internet Explorer, Mozilla). Novější verze Mozilly obsahují také nabídku Nástroje - Kontrola Javascriptu, pomocí které zjistíte, co Mozille vadí ve vašem souboru se styly.

Freehosting

Ve chvíli, kdy máte vytvořenou svoji sqělou a bezchybnou stránku, budete ji chtít ukázat svým kamarádům, příbuzným, známým a celému světu :-). Dokud nazačnete vydělávat, budete se muset obrátit na servery, které poskytují takzvaný freehosting - umožní vám zdarma si u nich uložit a zveřejnit svoje stránky. Leckdy za to ale zaplatíte tím, že tento server na vaši stránku automaticky umístí nějaké reklamy, většinou je na nich omezený buď celkový objem dat nebo velikost jednoho souboru. Ty z vás, kdo pokročí dále, může zajímat, jestli se dají spouštět php, asp či jiné scripty. Některé servery vám zdarma poskytnout doménu takzvané třetí úrovně (moje doména.freeserver.cz, konkrétně třeba na webzdarma.cz), u jiných bude adresa vaší stránky například ve tvaru freeserver/www/mojestránky, podmínky se prostě liší, postup registrace a práce se soubory také, ale vždy je k dispozici návod, se kterým by vše měl zvládnout i běžný uživatel PC. Vždycky budete potřebovat nějakou hlavní stránku, zpravidla index.html nebo default.html (nebo htm), tak jak jsme ji tvořili během těchto lekcí.
Pro přenos souborů na server se využívá také FTP protokolu, k tomu mohou sloužit různí správci souborů (Windows Comander apod.), umí to i některé editory HTML, ale také průzkumník ve Windows XP.
Přehled freehostingových serverů, které tuto službu poskytují zdarma, najdete například na free.hostingy.cz .


Úkoly:

Úkol (2 body):

Doplň alespoň na svůj index vhodné metatagy.

Úkol (2 body):

Proveď validaci svého indexu a do textového souboru lekce23.txt zkopíruj zprávu o nalezených chybách.

Úkol (2 body):

Do souboru lekce23.txt doplň, který freehostingový server sis vybral (nebo by sis vybral) pro svoje stránky a proč.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_24_10B_tvorba www24
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.