Kostra XHTML dokumentu
Kostra XHTML dokumentuPo nezbytném teoretickém úvodu se počínaje tímto dílem vrhneme po hlavě do tvorby první XHTML stránky. Dnešní díl bude poněkud delší a já se pokusím naučit vás základní postupy tvorby stránky bez tabulek. Na konkrétní ukázce si probereme jednotlivé prvky, ze kterých budeme skládat výslednou podobu jednoduché webové stránky. Nebudu se příliš rozepisovat a zabíhat do podrobností, ale u každé části tvorby vám poskytnu odkazy na odborné servery nebo profesionální blogy, kde se o jednotlivých tématech můžete dozvědět mnohem více a pochopit lépe základy a principy, na kterých stojí beztabulkový web.
Ukažme si nyní prakticky, jak vypadá základní kostra správného XHTML dokumentu:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta name="Description" content="Název webu" />
<meta name="Keywords" content="klíčová slova pro vyhledávače" />
<meta name="robots" content="all, follow"/>
<meta name="author" content="Design a kod: Plavacek, http://www.plavacek.net " />
<link rel="stylesheet" href="default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<title>Kostra HTML stránky</title>
</head>
<body>
<h1>Moje první XHTML stránka</h1>
<h2>Hele mámo, jde to samo</h2>
<p>Právě jsem stvořil svou první XHTML stránku</p>
<address>Plaváček, vlastní klávesnicí</address>
</body>
</html>
Probereme si jednotlivé položky jednu podruhé a o každé si řekneme, jaký má význam (mimochodem, můžete si tuto kostru uložit jako šablonu a nebudete muset základ stránky ťukat pokaždé znovu).
Definice typu dokumentu aneb DTD
<!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">
Jedna z nejdůležitějších definic, která prohlížeči říká, jak se má postavit ke čtení kódu. Všechny moderní prohlížeče se totiž podle zvolené definice přepínají do různých módů a drží se (nebo se o to alespoň snaží) stanoveného DTD. Co to vlastně je DTD? Laicky řečeno je to souhrn pravidel, která říkají, jaké tagy (lépe elementy) a jejich atributy (neboli vlastnosti) je možné ve stránce při zvolené definici použít. Pokud použijete element nebo jeho atribut (kupříkladu align=center, jež je počínaje normou XHTML Strict zakázán), který se v dané definici nenachází, nebudete schopni stvořit správný a tedy validní dokument. Ostatně slovo validita se dnes a denně skloňuje všude, kam se podíváte, ale začínající tvůrci mají zhusta velmi mlhavou představu o co jde anebo ji přisuzují větší význam, než ve skutečnosti má. Pokusím se uvést problém validity na pravou míru.
Sám o sobě správný a validní kód vám totiž nikdy nezaručí, že bude stránka všude vypadat stejně. Co vám ale garantovat může je, že vaše stránka se zobrazí na všem, co je schopno správně interpretovat danou definici dokumentu a to včetně dost exotických zařízení jako jsou hlasové čtečky pro nevidomé a podobně. Jinak řečeno - definice typu dokumentu a validita spolu úzce souvisí a jedno bez druhého nefunguje. Navíc validní kód je vizitkou autora a důkazem, že tvůrce ví, co dělá.
XHTML normy dnes existují čtyři, tři ve verzi 1.0 a jedna značená jako 1.1. O třech prvních se jenom letmo zmíním, protože už v úvodu seriálu jsme přistoupili na to, že budeme tvořit weby, které budou co nejčistším spojením jednoduchého kódu a kaskádových stylů.
XHTML 1.0 Transitional - je řečeno lidově nejměkčí normou a slůvko Transitional značí, že je pouze normou přechodnou. Byla určena tabulkovým webdesignerům pro snadnější přechod z HTML do XHTML, takže obsahuje možnosti, které jsou v přísnějších normách už zakázány
XHTML 1.0 Frameset - jak je znát z názvu, dává tvůrcům možnost i v rámci XHTML použít rámcovou strukturu (frames) při tvorbě webu. Protože však rámce jdou proti filozofii XHTML (a potažmo XML), zůstala k dispozici zřejmě proto, že některé aplikace se bez rámců prostě neobejdou (typickou ukázku je webový online chat nebo intranetové aplikace)
XHTML 1.0 Strict - nejtvrdší norma z celé rodiny 1.0 norem, která jde téměř do důsledků a zakazuje v podstatě jakékoliv formátování stránky v kódu dokumentu. Oproti nové normě XHTML 1.1 se příliš neliší, takže není příliš důvodů ji používat a my rovnýma nohama vkročíme tam, kam spěje budoucnost internetu a jejímž předvojem budiž norma:
XHTML 1.1 - jak vidíte v ukázce kódu, tuto normu jsme zvolili a jí se také budeme držet. Všechno, čím jste dosud řídili vzhled webové stránky je zakázáno (v dané definici DTD) a veškeré formátování přebírají CSS styly. Z XHTML 1.1 bohužel zmizela i jedna užitečná věc, a tou je target=_blank, neboli otvírání odkazů do nového okna. Já osobně jsem tomu rád, protože nejsem šťasten, když se mi nová okna otvírají kdy chce autor webu a ne já. Znám ale spoustu lidí, kteří nad touto ztrátou uronili hořkou slzu.
Podrobnější informace o DTD naleznete zde:
http://www.sovavsiti.cz/c01242.html
http://www.sovavsiti.cz/c01043.html
http://www.sovavsiti.cz/c01341.html
Pro svou další tvorbu budete používat stále tuto definici a tím se vyhnete možným problémům se zobrazováním v různých prohlížečích. Vše, co vás budu učit, bude se týkat výhradně normy XHTML 1.1, s čímž je spojeno i chování prohlížečů a postupy při psaní CSS kódu.
Hlavička HEAD
Po definici typu dokumentu následuje hlavička, která by měla obsahovat minimálně následující definice:
Definice kódové stránky
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
nebo
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Volba kódové stránky je jednou ze zásadních věcí, kterou hlavička obsahovat musí a měla by se nacházet hned na jejím začátku. Říkáte tím prohlížeči, po jaké jazykové sadě má sáhnout. Jinak řečeno - donutíte prohlížeč k tomu, aby české stránky zobrazil hezky česky. V současné době máte k dispozici pro češtinu v podstatě tři použitelné znakové sady. Již zmíněná Windows-1250, ISO 8859-2 a UTF-8. Povětšinou se dnes používají první dvě zmíněné a já osobně dávám přednost sadě ISO 8859-2 (což je znaková sada pro středoevropské jazyky). Domnívám se ale, že volbou kódování Windows-1250 nic nezkazíte, a to přesto, že se nejedná o de facto standard, ale o rozšíření znakové sady z dílny Microsoftu. Někdy je jeho použití nezbytné, zvláště pokud tvoříte web klientovi, který si ho sám aktualizuje a texty si připravuje třeba ve Wordu.
Podrobnější informace o kódových stránkách a češtině na webu naleznete zde:
http://www.jakpsatweb.cz/cestina.htm
Meta tagy Description, Keywords, Robots
<meta name="Description" content="Název webu" />
<meta name="Keywords" content="klíčová slova pro vyhledávače" />
<meta name="robots" content="all, follow"/>
<meta name="author" content="Design a kod: Plavacek, http://www.plavacek.net " />
Tyto tři takzvané meta elementy (meta tagy) slouží především pro vyhledávače, aby vaše stránky našly. Jejich význam ovšem s příchodem Google poněkud upadá a pokud vím, tak jediný, který je zatím bere v úvahu, je česky vyhledávač Jyxo. Přesto nic nezkazíte, pokud je uvedete a vyplníte. Z ukázky je vše patrné, Description vesměs obsahuje název webu, Keywords pak takzvaná klíčová slova, která zajistí snadnější nalezení vašeho webu vyhledávačem (souvisí také se SEO, o kterém bude řeč v průběhu seriálu). Robots říká vyhledávačům, že si mají stránku zaindexovat (uložit do databáze). Meta tag Author je zde umístěn jen pro zvednutí vašeho ega, aby každý hned viděl, jací jste borci :) Jiný význam nemá.
Podrobnější informace o meta tazích: http://www.jakpsatweb.cz/meta_tagy.htm
Připojení externího stylového předpisu (CSS)
<link rel="stylesheet" href="default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Tímto zápisem dodáte svému webu vzhled. Vše, co si ve stylovém předpisu pod mým vedením nadefinujete, se tímto připojí k dokumentu a vykreslí ho tak, jak vy si přejete. První řádek načte styl určený pro monitor (screen, zobrazovací zařízení), druhá řádka je jiný styl, který se použije pro tiskový výstup. Pokud jste již někdy prohlíželi zdrojové kódy stránek, jistě vám neuniklo, že pro připojení stylu se používá i metoda @import. Tento způsob hřeší na nedostatky prohlížečů čtyřkových verzí (Internet Explorer 4, Netscape 4), které nedokázaly správně se styly pracovat a tak se tímto způsobem takzvaně odstřihly od stylů a uživateli se zobrazila čistá textová verze. Já tento způsob nepoužívám ze dvou důvodů. Za prvé - čtyřkové prohlížeče jsou již nějakou dobu na vymření a za druhé, načtení stylů pomocí @import sebou nese v Internet Exploreru jednu nepříjemnou vlastnost - styl se neukládá do cache (vyrovnávací paměti, neboli k uživateli na disk) a načítá se tak s každou novou stránkou z webového serveru znovu. Což je mrzuté a nepraktické.
Title
<title>Kostra HTML stránky</title>
Další z povinných a důležitých částí hlavičky stránky. Je nedílnou součástí schématu navigace webem a určitě by neměl chybět. Vše, co napíšete v tomto elementu se zobrazí v okně prohlížeče a dává tak návštěvníkovi rychlou informaci, kde se ve struktuře webu právě nachází. Ideální řešením je zvolit title takto: Název webu - Název stránky. Případně naopak: Název stránky - Název webu. Názory profesionálů se liší a každý si zvolil svůj přístup, takže ať už si vyberete kteroukoliv variantu, neprohloupíte. Každopádně platí základní pravidlo - obsah elementu title odpovídá názvu stránky. Kupříkladu - Můj nový web:hlavní stránka, Můj nový web:stáhněte si a tak dále a tak podobně.
Praktická zkouška
Na závěr si nyní zkuste výše uvedený zdrojový kód zkopírovat, vložit do svého oblíbeného editoru a uložit jako index.html. Zkuste si ho nyní otevřít v prohlížeči a uvidíte takto (http://www.plavacek.net/jaknacss/) jednoduchý, správně strukturovaný text, ke kterému v příštím díle začneme připojovat styly a tím mu dodávat elegantnějšího vzhledu.
Příště: Základní pojmy - dědičnost, specifičnost, praktické ukázky
Autor: Plaváček
2024 ©