XHTML - zoznamy

Peter Druska  /  15. 12. 2006, 00:00

Ak ideme do obchodu, napíšeme si zoznam položiek, ktoré máme kúpiť. Takéto zoznamy existujú aj na internete a jeho webových stránkach. Dnes si ukážeme, ako taký zoznam vytvoriť.

V hypertextových značkovacích jazykoch existujú tri druhy zoznamov. Zoznam nečíslovaný, číslovaný a definičný. Píšu sa do elementu <body>..</body>.

Párové značky nečíslovaného zoznamu ul a li

Značky zoznamu sa používajú spoločne a naraz. Telo nečíslovaného zoznamu tvorí párová značka ul, kde sa do jeho vnútra vkladá potrebný počet párových značiek vyjadrujúcich položky zoznamu li. Príklad:

<ul>
    <li>položka 1</li>
    <li>
položka 2</li>
    <li>položka 3</li>
    <li>položka 4</li>
</ul>

Vykreslenie:

  • položka 1
  • položka 2
  • položka 3
  • položka 4

Odrážky nečíslovaného zoznamu sú bodky (základný tvar), ktoré sa pomocou CSS dajú zmeniť na iný tvar, či dokonca nami zvolený obrázok.

Párové značky číslovaného zoznamu ol a li

Číslovaný zoznam je presne to isté, ako zoznam nečíslovaný, len s jedným rozdielom. Na hlavné telo zoznamu sa používa značka ol. Tento zoznam sa niekedy nazýva aj usporiadaný, ordinálny. Inak sa značky položiek zoznamu li používajú rovnako, ako pri nečíslovanom zozname – vkladajú sa do tela zoznamu v potrebnom množstve, ako párové značky s obsahom. Napríklad:

<ol>
    <li>
položka 1</li>
    <li>
položka 2</li>
    <li>
položka 3</li>
    <li>
položka 4</li>
</ol>

Vykreslenie:

  1. položka 1
  2. položka 2
  3. položka 3
  4. položka 4

Aj odrážky položiek tohto, číslovaného, zoznamu sa dajú pomocou CSS zmeniť. Dokonca aj na odrážky rovnakého tvaru, ako má nečíslovaný zoznam.

Párové značky definičného zoznamu dl, dt a dd

Definičný zoznam je na prvý pohľad najkomplikovanejší. To preto, lebo sa skladá z troch značiek, nie z dvoch, ako tomu bolo u číslovaného a nečíslovaného zoznamu.

Hlavnou značkou definičného zoznamu je párová značka dl, do ktorej tela sa uzatvárajú jednotlivé položky.

Položky sú dvojakého druhu. Prvá je tvorená párovou značkou dt, ktorá obsahuje termín určený na vysvetlenie. Daný termín sa vysvetľuje v položke tvorenej párovou značkou dd. Príklad napovie viac:

<dl>
    <dt>internet</dt>
        <dd>
medzinárodná počítačová sieť umožňujúca neobmedzený prístup k informáciam </dd>
    <dt>
e-mail</dt>
        <dd>
elektronická pošta</dd>
</dl>

Vykreslenie:

internet
medzinárodná počítačová sieť umožňujúca neobmedzený prístup k informáciam
e-mail
elektronická pošta

Ako vidíme, text označený značkou dt (termín) sa vykreslí povedzme „normálne“ a text označený značkou dd (vysvetlenie termínu) sa vykreslí odsadený od ľavého okraja vzhľadom na „normálnosť“.

Je zbytočné komplikovať takto jednoduchú tému, preto to na dnes uzavrieme. Písanie zoznamov je dobré si vžiť, pretože v mnohom uľahčujú prácu pri neskoršom písaní stránok.

Ďakujem za pozornosť.

Neprehliadnite: