XHTML a CSS je budúcnosť webu, ktorá prináša mnoho vylepšení a novinek od zastaralého
HTML. Medzi HTML a XHTML nie je veľký rozdiel a preto nebude ťažké zvyknúť si na
novú syntax, ktorá sa líši len drobnosťami. CSS je taktiež jednou z technológií, ktorú bude tento seriál zahŕňať.
Cieľom tohoto seriálu bude naučiť vás vytvárať "moderný" web pomocou CSS - kaskádových šablón, XHTML dokumentov a rovno vám môžem povedať, že na tag <table>, na ktorý ste si určite zvykli môžete zabudnúť. Sú to zastaralé technológie, ktoré už pomaly vypadávajú z internetu. XHTML sa od HTML odlišuje v mnohých smeroch ale štruktúra zápisu zostala rovnaká. XHTML je teraz vo validite trochu prísnejšie ale keď tvoríte web v
XHTML tak to určite nebude v editore FrontPage ale musíte ho písať ručne. Snáď
taký menší nezvyk prinesie XHTML tým, ktorí si zvykli písať tagy veľkými
písmenami, ale myslím, že to nie je až taký problém sa preorientovať na malé
písmená. Všetky tagy sa v XHTML píšu malými písmenami, inak by validátor bral
tagy písané veľkými písmenami ako chybný zápis. Prejdime k písaniu stránky.
Zápis DTD
Strict - táto norma zakazuje formátovanie dokumentu. Zápis je zhodný s HTML 4 až
na odlišnosti medzi XML a SGML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
Transitional - táto norma nepoužíva framy a je pre začínajúcich webdesignerov,
ktorí chcú začať s XHTML. Oproti iným normám je táto najmenej prísna.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
Frameset - táto norma je určená pre webdesginerov, ktorí chcú stránku vyvíjať
cestou vo framoch. Je to málo používaná forma, ktorá ale má svoje opodstatnenie.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
Doteraz najnovšia norma, ktorá všetko formátovanie preberá s CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Teraz keď je popis ukončený, ukážeme si zápis XHTML dokumentu, ktorý
použijeme v našom príklade s normou XHTML.
<!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">
Teraz by sme skončili s naším zápisom DTD a prešli by sme k hlavičke webu
a to je známe <head>. Do hlavičky musíme zapísať "minimálne" aspoň kódovanie stránky. Ako prvé sa v XHTML zapíše XML deklarácia - jej verzia a kódovanie.
<?xml version="1.0" encoding="iso-8859-2"?>
Kódovaní je takmer nespočetné množstvo a je len na vás akú sadu
znakov si zvolíte. Medzi najpoužívanejšie u nás patria iso-8859-2, UTF-8 alebo windows-1250. Sú tu aj iné možnosti ale po tých už pátrajte sami :-). Tieto dve kódovania odporúčam
z hľadiska dekódovania slovenských aj českých znakov. Kódovanie iso-8859-2 je viac upredostňované pred windows-1250.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
Ako vidíte, vyššie v kóde je uvedený Content-Type (text/html)
a následne za ním je uvedené kódovanie. Ďalej nasleduje zápis autora (nie je povinné!), popisu stránky a pod. Všetko si povieme ale najprv si pozrite zápis týchto metatagov.
<meta name="robots" content="follow, all" />
<meta name="author" content="www.PaBi3.com" />
<meta name="Keywords" content="XHTML, CSS, PaBi3" />
<meta name="description" content="Toto je stránka v XHTML,
ktora vyuziva kaskadove sablony CSS." />
<meta http-equiv="imagetoolbar" content="no" />
<title>Nadpis stranky v XHTML.</title>
Všetkých 5 meta-tagov má svoj význam ale niektoré sú aj čisto zbytočné.
Meta-tag robots prikazuje vyhľadávačom aby si vašu stránku uložili do databázy.
Meta-tag autor je prakticky zbytočný, pretože jeho funkcia je bezvýznamná. Je to viacmenej iba taká vizitka, pomocou ktorej sa niekto dozvie kto je autor vytvoreného webu.
Keywords sú kľúčové slová, ktoré stránka obsahuje. Description už podľa názvu bude jasná každému. Je to popis stránky, ktorý sa objaví vo vyhľadávači. Description odporúčam používať určite, pretože sú to 2 najdôležitejšie metatagy pre vyhľadávače.
Image Toolbar je tam ako malý príklad a slúži na to, aby v prehliadači MSIE pri podržaní kurzoru nad obrázkom
nebolo žiadne menu pre uloženie obrázka. Taktiež ho odporúčam používať. Posledný je tu titulok
a je v ňom nadpis stránky. Je veľmi dôležité ho vyplniť
Ďalší zápis bude súvisieť s cestou k CSS - kaskádovým štýlom.
<link rel="stylesheet" href="style_s.css" type="text/css" media="screen"
/>
<link rel="stylesheet" href="style_p.css" type="text/css" media="print" />
Tag <link> pripája CSS k stránke (v našom prípade pri rel='stylesheet'). Obe cesty sú rovnaké
ako vidíte ale mohli ste si všimnúť súčasť tagu "media". Screen sa používa na
vidietľné definície v CSS, ktoré si sami určíte. Typ "print" slúži ako tlačový
výstup. Ak by ste chceli mať rovnaké CSS šablóny aj pre tlačový výstup alebo viditeľný
obraz v prehliadači stači namiesto dvoch <link> napísať len jeden a nastaviť media na "all". Media typov je viac druhov.
Hlavičku ukončíme </head> a teraz je všetko hotové.
Ešte jedna možnosť pripojenia CSS k XHTML dokumentu je takáto:
<style type="text/css" media="screen">@import "style.css";</style>
Má rovnakú funkciu ako <link rel="style…>, len s tým rozdielom, že funguje aj na starších prehliadačoch. Má však aj svoje nevýhody, ktoré je zbytočné menovať, pretože ako som povedal na začiatku článku, "CSS a XHTML je budúcnosť". Prečo sa vracať do minulosti? Tento výber nechám na vás. Odporúčam <link>
Na záver ešte taká malá ukážka hotového kódu:
<?xml version="1.0" encoding="iso-8859-2"?>
<!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=iso-8859-2" />
<meta name="robots" content="follow, all" />
<meta name="author" content="www.PaBi3.com" />
<meta name="Keywords" content="XHTML, CSS, PaBi3" />
<meta name="description" content="Toto je stránka v XHTML, ktora vyuziva kaskadove sablony CSS." />
<meta http-equiv="imagetoolbar" content="no" />
<title>Nadpis stranky v XHTML.</title>
</head>
<body>
<div>
Toto je stranka v XHTML a CSS.
</div>
</body>
</html>
Ukončenie obsahu stránky vykonáme pomocu tagu <body> a jeho ukončenie </body> + ukončenie celého dokumentu pomocou </html>.
Komentáre
echo "<?xml version="1.0" encoding="ISO-8859-2"?>n";
?>
[laugh]