Seznamy & spol.

Jiří Kosek ml.

V předchozích dílech seriálu jsme se naučili vytvářet jednoduché HTML-dokumenty. Ve složitějších dokumentech můžeme použít i další tagy, které nám umožní vytvářet různé seznamy, předformátované úseky textu a citace.

V HTML můžeme vytvářet tři základní druhy seznamů: nečíslované, číslované a definiční.

Pro vytvoření nečíslovaného seznamu je zapotřebí:

napsat tag, který zahájí seznam -- <UL>;
napsat patřičný počet položek seznamu; každé položce musí předcházet tag <LI>;
ukončit seznam tagem </UL>.

Jednoduchý seznam můžeme zapsat tedy takto:

<UL>
  <LI>Jablka
  <LI>Hrušky
  <LI>Švestky
  <LI>Banány
</UL>

Výsledek bude vypadat přibližně takto:

V jedné položce seznamu může být i text, který obsahuje více odstavců -- odstavce stačí oddělit tagem <P>.

U číslovaných seznamů je před jednotlivé položky místo značky odrážky umísťováno pořadové číslo položky v seznamu. Definice seznamu je stejná jako u nečíslovaných seznamů, pouze místo tagů <UL> a </UL> je nutné použít <OL> a </OL>. Pro větší názornost si předvedeme malou ukázku:

<OL>
  <LI>Jablka
  <LI>Hrušky
  <LI>Švestky
  <LI>Banány
</OL>

Výsledek bude vypadat přibližně takto:

Definiční seznam se od předchozích dvou poněkud odlišuje. Jeho uplatnění je v případech, kdy chceme do dokumentu zařadit např. slovníček, který obsahuje termíny a jejich vysvětlení. Postup při vytváření definičního seznamu je následující:

začátek seznamu označíme tagem <DL>;
před termín, jenž definujeme, napíšeme tag <DT>;
mezi termín a jeho definici umístíme tag <DD>;
opakujeme bod 2. a 3. pro všechny termíny v seznamu;
seznam ukončíme tagem </DL>.

Definice jednoduchého seznamu může být tedy následující:

<DL>
  <DT>HTTP
  <DD>Transportní protokol využívaný k přenosu souborů
obsahujících popis WWW-stránek v jazyce HTML.
  <DT>FTP
  <DD>Transportní protokol používaný k přenosu souborů.
  <DT>NNTP
  <DD>Transportní protokol používaný k přenosu news.
</DL>

V prohlížeči by tato ukázka mohla vypadat následovně:

Seznamy mohou být do sebe libovolně vnořovány, tj. položka jednoho seznamu může být tvořena celým jiným seznamem. HTML-dokument obsahující:

<UL>
  <LI>Evropa
  <UL>
    <LI>Německo
    <LI>Francie
    <LI>Velká Británie
    <LI>Česká republika
  </UL>
  <LI>Asie
  <UL>
    <LI>Korea
    <LI>Japonsko
    <LI>Indie
  </UL>
</UL>

se v prohlížeči zobrazí jako:

Předformátovaný text

Pokud chceme do dokumentu zařadit například zdrojový text programu nebo tabulku vytvořenou z textových rámečků, je výhodné potlačit automatické zarovnávání textu podle velikosti okna a přepnout do neproporcionálního písma. Tento režim interpretace textu je v HTML používán mezi tagy <PRE> a </PRE>. Pro zahrnutí výpisu jednoduchého programu do dokumentu můžeme použít následující postup:

<PRE>
#include &lt;stdio.h&gt;

long f (long n) {
        return( n==0 ? 1 : n * f(n-1) );
        }

main() {
        printf("%ld\n", f(10));
        }
</PRE>

Výsledné zobrazení je téměř identické se zápisem v HTML:

Pozorný čtenář si jistě povšiml drobné odlišnosti. Znaky `<' a `>' jsou v dokumentu nahrazeny výrazy (tzv. znakovými entitami) < a >. Je to z toho důvodu, že výše zmíněné znaky mají v HTML speciální význam a nemohou proto být použity ve svém původním významu. Podobně se musí zapisovat i znak `&', pro který existuje entita &. Pokud potřebujeme do hodnoty nějakého atributu (např. URL) vložit uvozovky, musíme použít jejich náhradu ".

V předformátovaném textu je omezena nabídka elementů, které můžeme používat. Bez obav však můžeme používat hypertextové odkazy (<A ...>).

Začleňování citátů

Dalším elementem, o kterém jsme se doposud nezmínili je <BLOCKQUOTE>. Obvykle se využívá, pokud do dokumentu zahrnujeme delší citaci nějakého díla. Text umístěný mezi <BLOCKQUOTE> a </BLOCKQUOTE> je od ostatního textu oddělen malou vertikální mezerou a je obvykle zleva (či z obou stran) odsazen:

Dílo B. Henryho je mnohdy velmi kontroverzní, jako například
<CITE>Zenonova aporie Achilles a želva</CITE>:
<BLOCKQUOTE>
Zenon ukazoval, že Achilles nedostihne želvu, i když běží
rychleji než ona.
<P>
Celá tisíciletí bylo toto zjištění chápáno jako paradox neboli
aporie. Nikdo si však neuvědomil skutečný paradox odtud
vyplývající: Achilles nedostihne želvu, která běží daleko
pomaleji než on, takže želva běžící před ním doběhne jeho.
<P>
PS. Zlí jazykové však tvrdí, že Achilles nedostihne želvu proto,
že nemá v pořádku achilovky.
</BLOCKQUOTE>

O významu elementu <CITE> si povíme za čtrnáct dní v dalším pokračování. Výsledek v prohlížeči bude vypadat přibližně takto:

Podpisy stránek

Element <ADDRESS> je obvykle používán pro specifikování e-mailové adresy autora dokumentu. Většinou se uvádí na konci dokumentu a bývá zobrazována kurzívou. Pokud bychom chtěli uvést úplnou adresu (tj. několik řádků s ulicí, městem atd.), je zapotřebí explicitně určit konce řádků pomocí tagu <BR>. Ukázka těchto dvou možností zápisu adresy následuje:

<ADDRESS>Jiří Kosek -- xkosj06@vse.cz</ADDRESS>
<ADDRESS>
Výzkumný ústav nesmyslů<BR>
Jana Hůrky 7<BR>
Dolní Lhota<BR>
321 98<BR>
e-mail: info@vun.cz
</ADDRESS>

Poslední příklad přibližující zápis adres v HTML je správný, ale ve skutečnosti by vypadal spíše následovně:

<ADDRESS>
<A HREF="mailto:xkosj06@vse.cz">Jiří Kosek</A></ADDRESS>
<ADDRESS>
Výzkumný ústav nesmyslů<BR>
Jana Hůrky 7<BR>
Dolní Lhota<BR>
321 98<BR>
e-mail: <A HREF="mailto:info@vun.cz">info@vun.cz</A>
</ADDRESS>

Použití odkazů zvýrazní slova Jiří Kosek a info@vun.cz. Pokud na ně klikneme myší, otevře se okno poštovního programu, kde můžeme napsat zprávu, kterou chceme poslat na adresu specifikovanou atributem HREF.

TIP: Pokud chceme, aby odkaz neodkazoval na jiný dokument, ale umožnil zaslání elektronického dopisu, použijeme u atributu HREF místo běžného URL konstrukci mailto:e-mailová adresa.