CSS a XHTML není žádná věda (1.díl)

Lehký úvod aneb trocha teorie nikoho nezabije

(seriál je určen jen těm, kteří to s tvorbou webu myslí vážně. Děláte-li si stránky pouze pro svou potěchu a radost svých kamarádů, zůstaňte u svých osvědčených postupů a můj seriál přeskočte)

CSS a XHTML není žádná věda Pokud jste až do této chvíle páchali weby pomocí tabulek a různě vychytrale vymyšlených rámců, zapomeňte na to. Moderní web se dnes tvoří jiným postupem, který se vznešeně nazývá oddělení formy od obsahu. Jinak řečeno - už nebudete používat tabulky (a nejlépe ani rámce) na definici vzhledu stránky, protože k této činnosti vám poslouží k tomu určené CSS kaskádové styly (cascading style sheet) a samotný obsah, tj. textová informace, bude dostupná i bez přítomnosti jakéhokoliv formátování.

Zásadní změnou pro ty, kteří si navykli na pohodlí různých editorů typu FrontPage bude, že CSS i XHTML kód se píše ručně, takže při jeho tvorbě neuvidíte okamžitý výsledek (FrontPage, Dreamweaver a podobně). Testování se tak provádí na jednotlivých prohlížečích, které si musíte nainstalovat (pro začátek postačí tři - Internet Explorer, Mozilla, Opera).

Hodláte-li tvořit plně přístupná a použitelná webová dílka, zapomeňte na chvíli na vše, co jste se dosud naučili a pojďte se pověnovat termínu, který jste už jistě mockrát zaslechli a kterému se říká sémantický web. Zní to přísně technicky, ale princip je jednoduchý. Jistě se shodneme, že základem každého dobrého webu jsou informace. Grafická podoba webu je věc podružná a slouží jako pověstná třešnička na dortu (můžete ovšem na druhou stranu informace podat graficky velmi elegantně). Jinými slovy - základem moderního webu je maximální dostupnost a čitelnost informací a nikoliv jeho grafická podoba. Všechny grafické prvky (ilustrační obrázky, pozadí, tlačítka atd.) jsou definovány mimo vlastní kód stránky v připojeném CSS stylu. Výsledkem je, že můžete provést třeba i zásadní změnu ve vzhledu svého webu úpravou jediného CSS souboru a výsledek se projeví okamžitě na celém webu bez jakéhokoliv zásahu do vlastního kódu stránky. Příkladem budiž tyto dva weby z mé dílny: www.hotel4u.info a www.discount4u.info. Zdrojové kódy stránek jsou totožné, odlišného vzhledu bylo dosaženo pouze a jenom změnou jediného stylového předpisu. Představte si, že máte web, který obsahuje desítky až stovky stránek v tabulkách. Rozhodnete-li se změnit vzhled, nadřete se jako koně a strávíte spoustu času novým budováním tabulek a přenosem textů z původního webu. Na druhou stranu mě změna vzhledu celého výše zmíněného webu trvala asi dvě hodiny čistého času. Úspora práce a času je myslím ten nejdůležitější argument, proč přejít na kaskádové styly a potažmo XHTML.

Co je to vlastně ta tolik diskutovaná sémantika? Představte si novinový článek. Vypadá nějak takto:

Mladá fronta Dnes (hlavní nadpis)
Bin Ládin byl zadržen! (nadpis článku)
Nejhledanější terorista světa dopaden na léčení v Karlových Varech (upřesňující nadpis)
V sobotu 15. května 2004 povedl se Polici České republiky husarský kousek. Nejhledanější zločinec světa byl zadržen při perličkové koupeli ve starobylém prostředí lázeňského domu Thermal (vlastní text článku - odstavec)

Na zadržení se podíleli: (seznam)

Policie České republiky

Městská policie v Karlových Varech

Komisař Rex

V kódu správně strukturovaného sémantického webu celý úryvek vypadal (ukázka - takto):

<h1>Mladá fronta Dnes</h1> (zdroj - neboli název webu)
<h2>Bin Ládin byl zadržen!) </h2> (nadpis článku, článků může být v rámci webu pochopitelně povícero)
<h3> Nejhledanější terorista světa dopaden na léčení v Karlových Varech </h3> (upřesňující nadpis u každého článku)
<p> V sobotu 15. května 2004 povedl se Polici České republiky husarský kousek. Nejhledanější zločinec světa byl zadržen při perličkové koupeli ve starobylém prostředí lázeňského domu Thermal </p> (odstavec, vlastní text článku)
<p> Na zadržení se podíleli</p>: (odstavec)
<ul>
<li>Policie České republiky </li>
<li>Městská policie v Karlových Varech </li>
<li>Komisař Rex </li>
</ul>


Vidíte sami, že kód je velmi jednoduchý a přehledný. Všimněte si také, že všechny tagy jsou uzavřeny a jsou psány malým písmem, což je nejdůležitější novinka oproti klasickému HTML. Tagem je například <h1>, <p> atd. Dvojici tagů <h1> </h1>, <p> </p> pak nazýváme element, kterýžto termín si zapamatujte, budeme ho často používat. Elementy se v rámci XHTML dělí na párové a nepárové. Nepárovým je kupříkladu element sloužící pro vložení obrázku do stránky <img> nebo přechod na další řádek <br>.

Zatím jsme vytvořili jednoduchý neformátovaný XHTML dokument, který se zhruba podobně zobrazí na každém prohlížeči včetně PDA nebo mobilním telefonu. Což je náš cíl. Grafickou podobu dodáme až pomocí CSS kaskádových stylů aniž bychom museli měnit kód stránky například takto.

Na závěr úvodní kapitoly si shrneme základní rozdíly mezi HTML a XHTML, na které si musíte zvyknout:

1. XHTML kód je takzvaný case sensitive, což jednoduše znamená, že zápis <H1> a <h1> nejsou totožné. V XHTML se zásadně všechny tagy zapisují malými písmeny
   
2. dva tagy (počáteční a koncový) tvoří takzvaný element a každý element musí být uzavřen. Čili toto je špatný zápis: <h1>Ahoj světe. Toto je naopak správně: <h1>Ahoj světe</h1>.
   
3. tagy se nesmějí křížit, jinak řečeno: toto je špatně: <p> <strong>Zdůrazněný text</p> </strong>, naopak toto je správný zápis: <p> <strong>Zdůrazněný text</strong> </p>
   
4. v XHTML je nutno uzavírat i elementy nepárové, jako jsou kupříkladu <img>, <br> a podobně. Nepárové elementy se pak uzavírají takto: <img />, <br />, přičemž se kvůli zpětné kompatibilitě doporučuje před lomítko vložit mezeru
   
5. všechny elementy určené výhradně pro formátování vzhledu stránky byly ve striktním XHTML již zrušeny (kromě normy XHTML Transitional a částečně XHTML Frameset, ale k tomu se dostaneme až v následujících kapitolách). Kupříkladu element <font&g; již nebudete používat, také zarovnání align=center, definice pozadí background nebo definice rámečků border už nelze definovat v XHTML stránce. Všechno formátování bylo odsunuto do CSS kaskádových stylů
   
6. V XHTML je třeba klást důraz na správnou sémantiku webu, takže je nutno používat pro jednotlivé části stránky elementy k tomu určené. Při vlastní tvorbě pak vystačíte s naprostým minimem elementů. Shrňme si ty základní:

h1 až h6 pro jednotlivé úrovně nadpisů, přičemž h1 je nadpis nejvyšší úrovně (typicky název webu, ale není to podmínka)

p pro jeden odstavec

ul a li pro nečíslované seznamy

ol a li pro číslované seznamy

br pro vynucený přechod na další řádek (užívá se minimálně)

address pro kontaktní adresy

div a span, které slouží především pro layout webu (tedy rozmístění jednotlivých prvků na stránce), budete je používat poměrně často

table neboli tabulky, sloužící ovšem výhradně k výpisu vzájemně souvisejících dat, nikoliv k tvorbě layoutu (rozložení) webu

img pro vložení obrázků

a pro vkládání odkazů

A pochopitelně spoustu dalších elementů, které si probereme postupně, jak budete pronikat do tajů beztabulkového webu. Ovšem jenom s těmito několika elementy už budete schopni postavit jednoduchou a funkční webovou stránku. Že to opravdu jde si můžete ověřit kupříkladu u webu www.dav-ova.cz.

Příště:
- v čem a jak psát CSS a XHTML kód
- jak na formátování písma
Autor: Plaváček