
Specializovaný týdeník o výpočetní technice
o Internetu (CW 27/97)
Vytváříme si domovskou stránku
Formátování podruhé
Jiří Kosek ml.
Mnoho společností, které si přejí vytvořit prezentaci své firmy na Webu, je často zpočátku velmi rozčarováno. Je to tím, že si myslí, že WWW je něco jako nějaký DTP program -- chtějí vzájemnou pozici objektů na stránce nastavovat s přesností blížící se vlnové délce světla. Jejich požadavkem je, aby HTML stránka vypadala pokud možno stejně jako list z jejich katalogu vyvedeného na křídovém papíře. Vzhled má být samozřejmě stoprocentně shodný ve všech prohlížečích. Oba požadavky jsou samozřejmě v rozporu se základní myšlenkou, na které byl Web vystavěn -- WWW je nezávislý na platformě a jde o obsah prezentovaných informací -- ne o jejich přesné a precizní grafické vyjádření. I přes své původní záměry podlehla dnešní verze HTML komerčním tlakům a nabízí několik prostředků, jak dosáhnout lepší kontroly nad formátováním. Právě o těchto možnostech si dnes povíme.
Způsob zarovnání textu
Každý, kdo někdy pracoval s nějakým textovým procesorem, se setkal s funkcí, která umožnila měnit zarovnávání odstavce. Většinou jsou k dispozici tři způsoby zarovnávání: doleva (nejběžnější), doprava a na střed (slovníkem typografů se prvnímu způsobu říká zarovnání na levý praporek a tomu druhému na pravý praporek). V HTML lze způsob zarovnání určit pomocí atributu ALIGN. Tento atribut může nabývat tří hodnot: LEFT, RIGHT a CENTER. Atribut lze použít u elementů pro nadpisy (Hn) a pro odstavce (P). Určuje pak způsob zarovnání nadpisu nebo celého odstavce. Vycentrovaný nadpis tedy získáme např. takto:
<H1 ALIGN=CENTER>Já jsem krásně uprostřed</H1>
Pokud chceme zarovnat delší úsek textu nestandardním způsobem, můžeme u každého tagu P uvést způsob zarovnání:
<P ALIGN=RIGHT>
První odstavec je zarovnán vpravo...
<P ALIGN=RIGHT>
Druhý odstavec taky...
<P ALIGN=RIGHT>
A třetí jakbysmet...
Tento postup je pracný nejen při prvním psaní, ale i v případě následného požadavku na změnu zarovnání. Proto v HTML existuje element DIV, kterým lze označit libovolný úsek textu a nastavit mu některé společné atributy, mezi které patří právě zarovnání. Předchozí ukázku proto můžeme zkrátit na:
<DIV ALIGN=RIGHT>
<P>
První odstavec je zarovnán vpravo...
<P>
Druhý odstavec taky...
<P>
A třetí jakbysmet...
</DIV>
Nezapomeňte, že ke každému tagu <DIV> musí existovat odpovídající ukončovací tag </DIV>, který slouží k označení konce úseku dokumentu s pozměněným zarovnáváním.
TIP: Místo <DIV ALIGN=CENTER>...</DIV> lze psát <CENTER>...</CENTER>. Tag <CENTER> je pozůstatkem z doby, kdy Netscape zavedl nadstandardní značky. Použití tagu se tak rozšířilo, že je v HTML 3.2 zachován i přesto, že má stejný účinek jako tag DIV s příslušným atributem.
Atribut ALIGN je použitelný i u některých dalších elementů. O jeho použití si povíme při výkladu těchto elementů.
Optické oddělování částí dokumentu
Pokud potřebujeme opticky oddělit dvě části stránky, může nám k tomu s výhodou posloužit tag <HR>, který slouží k zobrazení vodorovné čáry na stránce. Čára je normálně stejně široká jako stránka, ale lze to změnit pomocí atributu WIDTH. Jako parametr je možno udat požadovanou šířku v pixelech nebo procento, které vyjadřuje šířku čáry vůči celé šířce stránky v prohlížeči:
<HR>
<HR WIDTH=250>
<HR WIDTH=33%>
Výsledek ukázky je na obrázku 1. První čára je stejně široká jako celá WWW stránka, druhá čára má šířku přesně 250 bodů a třetí čára má třetinovou šířku oproti šířce stránky.
Jak je z ukázky vidět, jsou čáry umisťovány na střed stránky. Pokud chceme toto zarovnání změnit, můžeme použít atribut ALIGN se stejným významem jako u odstavců.
Pokud se vám nelíbí, jak jsou čáry vyvedeny se stínem, můžete použít atribut NOSHADE.
Poslední atribut, který lze použít, je atribut SIZE, kterým lze určit výšku horizontální čáry. Výška může být zadána opět absolutně počtem pixelů nebo jako procento, které určuje výšku jako poměrnou část výšky okna prohlížeče, ve kterém je stránka zobrazena.
Vše si shrneme v malé ukázce (výsledek v prohlížeči je na obr. 2):
<HR WIDTH=250 ALIGN=LEFT NOSHADE>
<HR WIDTH=50% SIZE=30%>
<HR NOSHADE SIZE=10 ALIGN=RIGHT WIDTH=100>
Seznamy
V jednom z předešlých dílů jsme se seznámili s elementy pro vytváření seznamů (OL, UL a DL). U seznamů lze opět pomocí atributů měnit některé jejich vlastnosti.
U nečíslovaných seznamů lze pomocí atributu TYPE měnit vzhled odrážky (puntíku), který je zobrazen před položkou seznamu. Atribut lze použít buď přímo v tagu <LI>, nebo v tagu pro celý seznam <UL>. V prvním případě je druh odrážky platný pouze pro konkrétní položku seznamu, ve druhém případě platí pro celý seznam. Atribut může nabývat jednu ze tří hodnot: DISC, SQUARE a CIRCLE:
<UL>
<LI TYPE=DISC>První
<LI TYPE=SQUARE>Druhý
<LI TYPE=CIRCLE>Třetí
</UL>
<UL TYPE=SQUARE>
<LI>Praha
<LI>Hradec Králové
<LI TYPE=CIRCLE>Brno
<LI>Bratislava
</UL>
Všimněte si, že pro druhý seznam je použita nejprve čtvercová odrážka a ta je poté pro zbytek seznamu změněna použitím atributu TYPE u tagu <LI>, jak vidéme na obr. 3.
Atribut TYPE lze použít i u číslovaných seznamů, kde však vyjadřuje způsob číslování. Způsoby číslovaní shrnuje tabulka 1.
U číslovaných seznamů lze použít i atribut START, kterým lze určit počáteční hodnotu odrážky první položky seznamu. Číslo položky může být měněno i průběžně, pokud u tagu <LI> použijeme atribut VALUE. Vše nám přiblíží následující ukázka (výsledek je na obrázku 4):
<OL TYPE=I START=3>
<LI>Svačina
<LI>Spacák
<LI VALUE=10>Nůž
<LI TYPE=1>Mapa
<LI>Dobrá nálada
</OL>
Kromě již zmíněných atributů lze u všech druhů seznamů použít atribut COMPACT. Tím sdělíme prohlížeči, že chceme seznam zobrazit ve zhuštěnější podobě. Valná většina dnešních prohlížečů však tento atribut ignoruje.
Za čtrnáct dní si ukážeme, jak v HTML měnit barvy -- písma, pozadí, odkazů...
|