Valikko:

Listojen tekeminen

Listoja tarvitaan yleensä muotoilun vuoksi. Ne selventävät ja näyttävät käyttäjälle asiat jaoteltuna.

Aluksi tarvitsemme ul-tagin, jolla on myös lopetustagi. Tämä tagi kertoo selaimelle, mistä lista alkaa ja mihin se loppuu.
Se myös sisentää kaiken, mikä on aloitus- ja lopetus-tagien välissä. Li-tagin kertoo listan yksittäisen kohdan. Näitä yksittäisiä kohtia voi olla kuinka paljon vain tarvitaan.

Alla olevissa esimerkeissä on aina vasemmalla koodi ja oikealla se, mitä koodi saa aikaan.

    <ul>
      <li>Listan eka rivi</li>
      <li>Listan toka rivi</li>
      <li>Listan kolmas rivi</li>
    </ul>
  • Listan eka rivi
  • Listan toka rivi
  • Listan kolmas rivi

Joskus tarvisemme listoja esimerkiksi linkeiksi. Tällöin laitamme listan alkioksi kokonaisen linkin.

    <ul>
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.youtube.com">Youtube</a></li>
    </ul>

Listan alkion fonttia voi myös muuttaa. Alla on haluttu muuttaa vain linkkinä olevien sanojen ominaisuuksia.

    <ul>
      <li><a href="http://www.google.com"><font color="#f35656" size="6">Google</font></a></li>
      <li><a href="http://www.youtube.com"><font color="#565656">Youtube</font></a></li>
    </ul>

Listoja voi myös aina laittaa sisäkkäin haluamallaan tavalla. Esimerkissä "vain" kaksitasoinen lista.

    <ul>
      <li>Listan eka rivi
        <ul>
          <li>Toinen taso</li>
          <li>Toinen taso</li>
        </ul>
      </li>
      <li>Listan kolmas rivi</li>
    </ul>
  • Listan eka rivi
    • Toinen taso
    • Toinen taso
  • Listan kolmas rivi

Numeroituja listoja

Numeroidussa listassa ul-tagi korvataan ol-tagilla. Tämä kertoo selaimelle, että haluamme listan numerointia. Jos numeroinnin tyyppiä ei ole määritelty, selain numeroin 1. alkaen.

    <ol>
      <li>listan eka rivi</li>
      <li>listan toka rivi</li>
    </ol>
  1. listan eka rivi
  2. listan toka rivi
Parametreilla type ja start voimme määritellä ol elementille numeroinnin tyylin ja aloituskohdan.
Type parametrin arvoja ovat

A -suuraakkoset
a -pienaakkoset
I -roomalaiset numerot
i -roomalaiset numerot pienaakkosilla

Alla pari esimerkkiä käytöstä.

    <ol type="A">
      <li>listan eka rivi</li>
      <li>listan toka rivi</li>
    </ol>
  1. listan eka rivi
  2. listan toka rivi

    <ol type="I" start="3">
      <li>listan eka rivi</li>
      <li>listan toka rivi</li>
      <li>listan kolmas rivi</li>
    </ol>
  1. listan eka rivi
  2. listan toka rivi
  3. listan kolmas rivi


Tehtävä

Tee kotihakemistoosi lista.html -niminen tiedosto.
Voit esimerkiksi kopioida jonkin aikaisemmin tehdyn kotisivun ja nimetä sitten kopio uudestaan edellä mainitulla nimellä (ohje tässä).

Tee sivulle lista jommasta kummasta alla annetusta aiheesta.

Ruokalinkkini

Tee esim. alla oleva jaottelu ja etsi mukavat reseptit (vähintään 3 kohtaansa).
Alkuruoat
Pääruoat
Jälkiruoat

tai

Kaupunkini

Esittele kaupungista vähintään kymmenen kohdetta
listoihin jaoteltuna.
Esimerkiksi:

Turistikohteita:

Ruokapaikkoja:

Liikennelinkit: