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ä.
<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).
<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.
dl
-elementti määrittää määritelmälistan aloituskohdan. Määritelmälistan kaikki termit ja kuvaukset tulevat yhdendl
-elementin sisään.dt
-elementillä määrillään termi, jolle halutaan antaa kuvaus.dd
-elementillä määritellään kuvaus, joka kuvaa edellädt
-elementissä annettua termiä.
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>
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ä.
<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