Vytváříme webové stránky – Dalších pár zlepšováků (část 8.)

Tak se náš seriál o základech psaní klasického xHTML pomalu chýlí ke konci. Snažil jsem se až na pár výjimek (na které jsem snad vždy upozornil) držet standardů a také občas uvést příklad, jak by se daná vlastnost dala nahradit kaskádovými styly, o nichž bude řeč od přístího dílu. Tento díl věnuji ještě jako stručné shrnutí a doplnění všeho, co již bylo v seriálu řečeno.

Pokud jste se dočetli až sem, měli byste měli:

  • Poznat nepárový tag od párového a umět je správně zapsat
  • Dodržovat základní zásady xHTML 1.1 (tagy malými písmeny, nekřížit párové tagy, atd.)
  • Mít připravenou šablonu pro html dokument (z příkladu z dílu 3)
  • Měnit titulek stránky a kódování
  • Psát texty a nadpisy, měnit jejich barvu a velikost, umět napsat aspoň pevnou mezeru pomocí entity
  • Umět vložit hypertextový odkaz, i tak aby se otevřel v novém okně
  • Vložit obrázek, nastavit mu velikost
  • Umět napsat netříděný a jednoduchý číslovaný seznam
  • Znát práci s tabulkami, nastavování velikosti a slučování buněk
  • Vědět, že tabulky a rámy jsou pro tvorbu rozvržení stránky nevhodné
  • Rozvhnout jednoduchý dotazník pomocí formulářů

Pokud všechny tyto body zvládáte, pak mi nezbývá než gratulovat. Pokud vás bude tvorba stránek bavit, určitě si budete nějaké tagy zkoušet sami. Vlastní tvorbou získáte cenné zkušenosti. A budete-li mít už zkušenností dostatek, můžete se klidně pyšnit označením začínající kodér HTML. A jistě také budete chtít pokračovat dál a získat další znalosti, třeba právě CSS, které bude záhy následovat.

Následující může víceméně sloužit jako nová šablona namísto té z dílu 3. Možná vyjma řádku s META tagem generator. Hodnotu stejnak nastavuje program, který stránku vygeneroval (třeba FrontPage, Nvu, HomeSite, apod.), nikoli uživatel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="content-language" content="cs" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="Klíčová slova,Oddělená čárkou bez mezery" /> 
<meta name="description" content="Popis stránek" />
<meta name="generator" content="Nazev_programu_ktery_stranky_vytvoril" />
<meta name="author" content="Jméno autora, případně kontakt" />
<meta name="copyright" content="Autorská práva" />
<meta name="robots" content="all,follow" />
<meta name="googlebot" content="noarchive" />
</head>
 
<body>
</body>
 
</html>

META hlavičky a omezení pro vyhledávací roboty
Zatím jsme si ukazovali jen jednu META hlavičku, a to právě tu, kde se nastavovalo kódování. Existuje víc druhů:

  1. Infromační (keywords, description, generator, author, copyright)
  2. Znakové (první dva v příkladu)
  3. Pro vyhledávače (robots, googlebot)
  4. Přesměrovávací (následující příklad)
  5. Kešovací
  6. Další..

Tento META tag přesměruje stránku na jinou. Příklad s nastavenou dobou 3 sekundy čekání před přesměrováním.

1
<meta http-equiv="Refresh" content="3;URL=http://www.seznam.cz" />

META tag keywords s klíčovými slovy dnes vyhledávače už přehlížejí, ale není na škodu ho na stránce mít. Jak zvolit ta správná klíčová slova spadá pod problematiku optimalizaci pro vyhledávače (SEO = Search Engine Optimalization). Měly by se uvádět oddělené čárkou bez mezery. V META tagu robots se nastavuje, jestli mají vyhledávače danou stránku indexovat (to znamená zařadit do seznamu stránek, hodnoty index/noindex) a dále pak se dá nastavit sledování odkazů (follow/nofollow). Zadání content=“all“ je v tomto META tagu ekvivalentní content=“index,follow“.

Zde jsou příklady na další a speciální. META hlavičky Kombinace prvních dvou meta-tagů zakáže prohlížet stránku offline tím, že se zakáže „kešování“ (což je spíš ke škodě než k užitku, navíc to nefunguje vždy). Třetí určuje vypršení platnosti stránky. Poslední pak zakáže zobrazení lišty pro práci s obrázky.

1
2
3
4
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="Wen 14 Dec 2011 17:16:43" />
<meta http-equiv="imagetoolbar" content="no" />

Zakázání sledování odkazu roboty přímo u odkazu:

1
<a href="http://www.nejakastrankakteranebudeslevovanaroboty.cz" rel="nofollow">Odkaz</a>

Robots.txt
robots.txt je soubor uložený v kořeni webu a zakazuje přístup všem vyhledávacím robotům najednou tak, jak v něm nastavíte (třeba jen do konkrétní složky). Nahradí to pak META-hlavičky, kde se to nastavuje pro každý soubor zvlášť. Napíše se v něm kdo (Googlebot, případně * značí všechny roboty) a pod to kam daný robot nesmí (disalow: a nic zamená může všude, disalow: / zmamená nesmí nikam a zápis dialow: /tajne/ znamená nesmí nikam v adresáři tajne). Kromě dialow existuje i konstrukce allow (povolit) s exkvivalentním významem. Ve výchozím nastavení je vše povoleno.

LINK REL
Další věc, kterou můžeme objevit v hlavičcce head, je nepárový tag link. Nejčastěji se setkáme se setkáme s těmito dvěma zápisy, z nichž jeden udává MIME typ CSS souboru a relativní cestu k souboru CSS a druhý přidá ke stránce ikonku. Ikonka se nám zobrazí, pokud si stránku uložíme do Oblíbených nebo třeba na lištu nahoře ve Firefoxu. Příkladů by se dalo najít i více, některé se moc nepoužívají a některé moc nefungují.

1
2
<link rel="stylesheet" type="text/css" href="styly.css" />
<link rel="shortcut icon" href="favicon.ico" />

Co se ještě může objevit v hlavičcce HEAD
Nyní jsme si uvedli, že se v hlavičce můžou objevit meta tagy a tag link. Dále se tu také může objevit definice kaskádových stylů (v příštím díle), ale také třeba javascipt.

Tělo dokumentu
Tím se posouváme od hlavičky k samotnému tělu dokumentu, elementu BODY. Možná už jste někdy chtěli na stránce změnit barvu textu, pozadí nebo odkazů (ať už navštívených nebo ne). V tomto případě opět lepší používat CSS namísto zastaralého zápisu do elementu body. Nejprve jak se to dělat nemá.

1
<body background="pozadi.jpg" bgcolor="silver" text="navy" link="red" vlink="grey" alink="white" bgproperties="fixed">

A teď jak by se to dělat mělo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<title>Titulek</title>
<style type="text/css">
<!--
body {
color: navy;
background-color: silver;
background-image: url('pozadi.jpg');
background-attachment: fixed;
}
 
a:link {color: red;}
a:visited {color: grey;}
a:active {color: white;}
a:hover {color: maroon;}
-->
</style>
</head>

Oba příklady by měly dělat totéž s jedním rozdílem. V CSS zápisu je ještě navíc a:hover, který udává, co se s odkazem stane, pokud nad ním právě stojíte myší (to u prvního zápisu není). link znamená odkaz, alink (zkratka active link) aktivní odkaz a vlink (visited link) navštívený odkaz. bgproperties a background-attachment může mít dvě vlastnosti, scroll a fixed. Fixed znamená, že pozadí je na stránce „napevno“. Nebude se posouvat společně s tím, jak budeme rolovat stárnku posuvníkem (bude se posouvat pouze obsah). Dále je také nastavena stříbrná barva pozadí a opakující se obrázek na pozadí pozadi.jpg. V CSS lze pak opakování, ať už jednom nebo obou směrech zakázat.

Závěr
Takže po dnešním dílu bychom měli nejen umět změnit kódování, ale také uvést informace o stránce a autorovi, nastavit sledování roboty, přidat si ke stránce ikonku, změnit barvu textu, pozadí, odkazů pomocí CSS a přidat obrázek na pozadí. Přístě bude následovat dlouho slibovaný díl o kaskádových stylech.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.