Listat - järjestyksessä vai ei?

WWW-sivuilla voimme käyttää kolme erilaista listaa: järjestettyä, järjestämätöntä ja määritelmälistaa. Listoilla määrittelemme WWW-sivuilla erilaisia luetteloita. Järjestämätöntä listaa käytämme silloin, kun listan alkioilla ei ole selkeää järjestystä. Vastaavasti järjestettyä listaa käytämme, kun asioiden järjestys on selvästi pääteltävissä. Määritelmälistalla määritellään selkeitä määritelmiä.

Järjestämätön lista

Järjestämättömän listan määrittelemme ul-elementillä (Unordered List). Elementillä merkitsemme listan alkamis- ja loppumiskohtat, kun taas varsinaiset lista-alkiot merkitsemme li-elementillä (List Item). Seuraavassa esimerkki järjestämättömän listan käytöstä.

Järjestämättömän listan alkiot näkyvät selainikkunassa listamerkillä erotettuina

Kuva 6. Järjestämätön lista selainikkunasta katsottuna.

<ul>
<li>Lista-alkio 1</li>
<li>Lista-alkio 2</li>
<li>Lista-alkio 3</li>
</ul>

Graafisissa HTML-editoreissa järjestämättömän
listan merkitsemiseen kannattaa käyttää Luettelomerkeillä varustettua lista (engl. Bulleted List) -tyyliä tai Järjestämätön lista (engl. List Bullet) -tyyliä. Tyylien käyttö lisää automaattisesti WWW-sivuun listan aloitus- ja lopetusmerkit sekä lista-alkiomerkit.

Järjestetty lista

ol-elementillä (Ordered List) määrittelemme järjestetty lista, jossa lista-alkiot voidaan asettaa (numeroidaan) tiettyyn järjestykseen. Elementillä merkitsemme listan alkamis- ja loppumiskohta, kun taas varsinaiset lista-alkiot merkitsemme käyttäen li-elementtiä (List Item).

Järjestetyn listan alkiot erottuvat järjestysnumerolla

Kuva 7. Järjestetty lista selainikkunasta katsottuna.

<ol>
<li>Ensimmäinen lista-alkio</li>
<li>Toinen lista-alkio</li>
<li>Kolmas lista-alkio</li>
</ol>

Graafisissa editoreissa järjestämättömän listan merkitsemiseen kannattaa käyttää Numeroitu luettelo (engl. Numbered List) -tyyliä tai Järjestetty lista (engl. List Number) -tyyliä. Tyylien käyttö lisää automaattisesti WWW-sivuun listan aloitus- ja lopetusmerkit sekä lista-alkiomerkit.

Määritelmien listaaminen

Määritelmälista (Definition List) tarkoittaa listaa, jossa on erillinen termi (Denition Term) ja sitä vastaavaa kuvaus (Definition Description). Listaa käytetään nimensämukaisesti määritelmä- tai käsitelistojen tekemiseen, joten jokainen ei sitä tarvitse.

Esimerkissä on määritelty kaksi termiä XHTML ja URL. Selain muotoilee automaattisesti määritelmälistan termin ikkunan vasempaan reunaan ja tekee määritelmän eteen pienen sisennyksen.

<dl>
  <dt>XHTML</dt>
    <dd>WWW-dokumentin rakenteen kuvaamiskieli,
    joka noudattaa XML:n kielioppia.</dd>
  <dt>URL</dt>
    <dd>WWW-sivun osoite.</dd>
</dl>
Määritelmälistan termit ja määritelmät erotetaan toisistaan erilaisien sisennyksien avulla selainikkunassa.

Kuva 8. Määritelmälista.

Sisäkkäiset listat

Voimme määritellä listoja myös sisäkkäisiksi. Sisäkkäisten listojen määrittäminen voi tuntua aluksi ongelmalliselle, mutta oikeilla sisennyksillä voimme helpottaa listan hahmottamista. Sisäkkäisten listojen tekemisessä kannattaa muistaa, että sisempi lista tulee aina jonkin lista alkion sisään. Tällöin ulomman lista-alkion lopetus tulee vasta sisemmän listan jälkeen. Esimerkissä järjestetty lista on oikeasti kokonaan toisella tasolla toisena olevan lista-alkion sisällä.

Sisäkkäiset listat näkyvät selainikkunassa erilaisin sisennyksin listan tason mukaisesti.

Kuva 9. Esimerkin sisäkkäinen lista selainikkunassa.

<ul>
<li>Ensimmäisen tason alkioita
  <ul>
    <li>Toisen tason alkioita</li>
    <li>Toisen tason alkioita
      <ol>
        <li>Kolmannen tason ensimmäinen alkio</li>
        <li>Kolmannen tason toinen alkio</li>
        <li>Kolmannen tason kolmas alkio</li>
      </ol>
    </li>
    <li>Toisen tason alkioita</li>
  </ul>
</li>
<li>Ensimmäisen tason alkioita</li>
<li>Ensimmäisen tason alkioita</li>
</ul>

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/wwwsivu/index8.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-11-10 10:21:28
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto