XHTML – tělo dokumentu, kontejnery a odstavce

23. prosince 2002

•

V dnešním článku se podíváme na element body, sloužící k uzavření obsahu stránky, kontejnery div a span, jež nám umožňují dělit obsah na specifické oblasti, a element p, který vytváří odstavce.

Element body – tělo dokumentu

Povolený obsah: %Block;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
onload %Script; #IMPLIED: Tato událost se aktivuje ve chvíli, kdy je celá stránka nahrána do prohlížeče. Lze ji použít pouze u elementů body a frameset (tím se budeme zabývat v části o rámcích).
onunload %Script; #IMPLIED: Tato událost se aktivuje ve chvíli, kdy je stránka odstraněna z okna prohlížeče, např. zavřením okna nebo přechodem na jinou stránku. Stejně jako událost onload ji lze použít pouze u elementů body a frameset.

Element body v XHTML 1.0 Strict DTD

Element body uzavírá celý obsah stránky. Ten může být reprezentován různými způsoby – vizuálně na obrazovce počítače, hlasově pomocí čtečky obrazovky nebo může být třeba vytištěn na braillovské tiskárně.

Element body je povinný pro každý XHTML dokument. Jeho obsahem mohou být elementy z parametrické entity %Block;, kterou si představíme později. Prozatím nám bude stačit, že nemůžeme do body vložit přímo text, ale musíme ho obalit ještě do nějakého jiného elementu.

Také bych vás rád upozornil na zajímavou možnost, a sice jednoznačně pojmenovat element body:

Možná se teď ptáte, k čemu je to dobré, vždyť element body se může na stránce vyskytovat jen jednou a není ho proto třeba pojmenovávat. Je to kvůli uživatelským stylům (to jsou styly, které definuje uživatel a prohlížeč je potom aplikuje na každou navštěvovanou stránku). Tím, že svoje stránky takto pojmenujete, umožníte uživateli, aby do svých uživatelských stylů zařadil speciální pravidla pouze pro vaši stránku, a mohl si ji tak maximálně přizpůsobit svým potřebám. Tento jev se nazývá CSS signatures a zatím se nejedná o žádný standard, spíše nápad. Pokud se jej rozhodnete využívat, obsahem vašeho id by měla být adresa stránky, kde převedete tečky na spojovníky (-).

Elementy div a span – kontejnery

Element div

Povolený obsah: %Flow;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class,style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick,onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element div v XHTML 1.0 Strict DTD

Element span

Povolený obsah: %Inline;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class,style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick,onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element span v XHTML 1.0 Strict DTD

Elementy div a span slouží jako kontejnery – můžete s nimi označit nějaký blok obsahu a přiřadit mu určité vlastnosti, například pomocí CSS a skriptů (v tomto případě pravděpodobně využijete atributy class a id k identifikaci bloku), nebo nastavit pro tento blok odlišný jazyk než v kterém je psán dokument.

Oba elementy nemají žádný sémantický význam. To znamená, že jejich použitím neříkáte nic o významu obsahu, který je do nich uzavřen. Slouží pouze jako kontejnery.

Oba elementy se od sebe liší vcelku zásadně. Element div je blokový element a jeho povolený obsah %Flow; nám říká, že do něj můžeme vkládat text a další blokové i řádkové elementy v jakémkoliv pořadí (k parametrické entitě %Flow; se ještě dostaneme). Naproti tomu span je řádkový element a může obsahovat pouze řádkové elementy a text (to nám říká parametrická entita %Inline;, kterou se také ještě budeme zabývat). Příklad použití:

<?xml version=’1.0′ encoding=’UTF-8′?>
<!DOCTYPE html
PUBLIC ‚-//W3C//DTD XHTML 1.0 Strict//EN‘
‚http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd‘>
<html xmlns=’http://www.w3.org/1999/xhtml‘ xml:lang=’cs‘ lang=’cs‘>
<head>
<meta http-equiv=’content-type‘ content=’text/html; charset=UTF-8′ />
<meta http-equiv=’content-language‘ content=’cs‘ />
<title>XHTML stránka</title>
</head>
<body>
<div id=’page‘>
Tady je český text. Nyní budeme přidávat trochu anglického textu: Here isthe English text.
</div>
</body>
</html>

Element p – odstavec

Povolený obsah: %Inline;

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class,style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick,onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

Element p v XHTML 1.0 Strict DTD

Element p slouží k vytvoření odstavce. Může obsahovat pouze text a řádkové elementy, nelze do něj uzavřít například tabulku, formulář, element div, nadpis, nebo další element p. Ke kompletnímu popisu entity %Inline;, která reprezentuje jeho obsah, se ještě v seriálu dostaneme.

Ačkoliv to DTD nezakazuje, neměli byste používat odstavce bez jakéhokoliv obsahu (). Tyto odstavce by měly být interprety XHTML ignorovány.

Odstavce jsou v drtivé většině vizuálních prohlížečů formátovány jako samostatné bloky s vertikálními okraji zarovnané vlevo. Například tento text…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis volutpat. Duis leo. Donec laoreet iaculis quam. Vivamus ipsum. Vestibulum feugiat, neque pretium aliquet pulvinar, nunc diam fringilla mi, sit amet pulvinar nibh enim vel ipsum.
Nulla a nibh nec turpis ornare tempus. In commodo. Morbi eu velit. Vivamus euismod, tortor nec varius lobortis, purus tellus vestibulum libero, ut sagittis mauris sapien in tellus. Integer nec eros eu quam fringilla rhoncus. Vestibulum pulvinar.

…bude formátován asi takto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis volutpat. Duis leo. Donec laoreet iaculis quam. Vivamus ipsum. Vestibulum feugiat, neque pretium aliquet pulvinar, nunc diam fringilla mi, sit amet pulvinar nibh enim vel ipsum.
Nulla a nibh nec turpis ornare tempus. In commodo. Morbi eu velit. Vivamus euismod, tortor nec varius lobortis, purus tellus vestibulum libero, ut sagittis mauris sapien in tellus. Integer nec eros eu quam fringilla rhoncus. Vestibulum pulvinar.

Zobrazení odstavců můžete změnit pomocí stylů, ale nedoporučuji vám formátovat odstavce bez zmiňovaných vertikálních okrajů. Weboví uživatelé neradi čtou dlouhé bloky textu (a odstavce bez okrajů vypadají jako dlouhý blok textu) a raději je přeskakují. Také byste měli dodržovat pravidlo „jedna myšlenka = jeden odstavec“ – text se na obrazovce čte hůře než na papíru, proto bychom to měli uživatelům co nejvíce ulehčit jeho vhodným strukturováním.