sivut.web

ohjeita web-sivuston tekijälle

etusivu html javascript perl php grafiikka sivusto palvelin sanasto info palaute

HTML-opas: Listat

Yleisesti

Koska HTML-kieli luotiin alusta alkaen tehokkaaksi tavaksi jakaa tietoa, on sillä varsin yksinkertaista toteuttaa informatiivisia listoja. Tässä kappaleessa tutustutaan niistä tärkeimpiin, eli järjestämättömään ns. mylbyrälistaan ja järjestettyyn numerojärjestettyyn listaan.

Järjestämätön lista

Erittäin käyttökelpoinen ja helppo tehdä. Rakenne:

<ul>
<li>asia yksi
<li>asia kaksi
<li>asia kolme
</ul>

Valmiina selaimessa lista näyttää seuraavalta:

Huomaa, että tarvetta <p>- ja </p>- tai <br>-tageille ei ole. Jotkut selaimet saattavat näyttää listan myös ranskalaisilla viivoilla:

- asia yksi
- asia kaksi
- asia kolme

Järjestetty, numeroitu lista

Teknisesti hyvin samankaltainen, mutta ulkoasultaan ja käyttökohteiltaan erilainen.

<ol>
<li>asia yksi
<li>asia kaksi
<li>asia kolme
</ol>

Ainoa ero on <ul>:n muuttuminen <ol>:ksi (unordered vs. ordered)

Esimerkki näyttää selaimessa seuraavalta:

  1. asia yksi
  2. asia kaksi
  3. asia kolme

Määritelmälista

Silloin tällöin tarvitaan listaa, jonka ensimmäisellä rivillä oleva termi selostetaan sitä seuraavilla, sisennetyillä, riveillä. Listaa voidaan käyttää myös sisällysluettelon luomiseen.

HTML:llä tämä luodaan käyttämällä <DL>-tagilla luotavaa määritelmälistaa. Perusrakenne on seuraava:

<DL>
<DT>Otsikko, eli termi joka selostetaan
<DD>Selitys
</DL>

Luodaanpa nyt dokumentti, jossa käytetään kaikkia edellä esiteltyjä listatyylejä:

<HTML>
<HEAD>
<TITLE>Listat</TITLE>
</HEAD>
<BODY>

<H1>Listojen käyttäminen HTML:ssä</H1>

<p>Järjestämätön lista:</p>

<ul>
<li>asia yksi
<li>asia kaksi
<li>asia kolme
</ul>

<P>Järjestetty lista:</p>

<ol>
<li>asia yksi
<li>asia kaksi
<li>asia kolme
</ol>

<p>Määritelmälista:</p>

<DL>
<DT>Ensimmäinen otsikko
<DD>Selitys otsikon aiheelle
<DT>Toinen otsikko
<DD>Selitys otsikon aiheelle
</DL>

</BODY>
</HTML>

Selain näyttää dokumentin seuraavasti:

esimerkit/listat.html

Listat ovat erittäin tehokas ja käyttökelpoinen tapa jakaa informaatiota. Käytä niitä mielummin kun epäselviä <br>-tagilla muodostettuja listoja.

Seuraava sivu: Taulukot.

Käyttäjien kommentit

8.1.2005 12:19
Petteri <petterizitting@luukku.com>

Moikkelis! Miten oikeen saan oman tekstini exploreriin se on tämmöinen:
<html>
<title>omat.html</title>
</html>
<body bgcolor="#oo8ooo">

<h1 align=center>Tää otsikko on keskellä VAUU!!!</h1>

<p>Katos tehään <a href="http://www.freewebs.com/liuskakala">LINKKI</a><br>Tai lähetä vaikka <a href="mailto:petterizitting@luukku.com">Mailia mulle.</p>

<p>Tähän asioita</p>

<ol>
<li>Jee
<li>Vautsi!
<li>Vau
</ol>
<ul>
<li>Jee!
<li>Vautsi
<li>Vau!
<li>COOLIA!
</ul>

<p>Määritelty</p>

<dl>
<dt>VAU
<dd>hianoa
<dt>Vau
<dd>hienoa
</dl>

<p align=right> katos tää tekstikappale<br>oikeesee tasattu</p>

<p> tehään vaikka <b>VAHVISTUSTA</b> tai vaikka <i>kursivoitua</i><br>Ja kun kirjotat tt jne. <tt>niin saat kirjotuskone tyylii...</tt></p>

<p> <font size=20> Taikka vaikka ISOO TEKSTII!!!</font><br>Tai vaikka <font color="#rrggbg">Värillistä</font></p>

<p>Miksei vaikka <font size=10>I</font>so<font size=15>A</font></p>

<p>Tai tee vaikka &reg iimi
<h1>Tos on Bodyn juttujaa...</h1>


<h3>Ja näin ikään saatiin väliotsikko</h3>

<h2>Ja nyt saatiin pienempää kokoo tätä väliotsikkoo...:D</h2>

<p>Ja nyt kun laitan br nii tää katkee<br>Eikö vaan???</p>


<p>Elikkäs... aloita vaikkapa title (<>) ja loppupääte on / kauttamerkki</p>


<p>Ja noin kun laitettiin se p ja /p lopuksi NIIN SAATIN KAPPALE</p>

<p>Tähän kuva: <img src="ollo.jpg">Näetkö??</p>


</body>


</html>



Se ei aukea explorerissa kuin TÄNÄ SAMANA TIEDOSTONA (teksti)!!!!!!!!!!! Mitä tehdä? Mailaa mulle.

19.3.2005 23:43
kati

Määritelmän mukaan <li>-tagit kuuluu sulkea (</li>), vaikka ne toimivat sulkemattakin. Eli aivan validisti nuo listasi olisivat esim.
<ul>
<li>asia yksi</li>
<li>asia kaksi</li>
<li>asia kolme</li>
</ul>

9.11.2005 03:15
juuse

miten saa oman kuvan listan merkiksi?

9.11.2005 09:47
Juha-Pekka Järvenpää <jp@sivut.org>

Omia kuvia listamerkeiksi saa CSS:llä.

<ul style="list-style-image: url('pallo.png');">
<li>merkintä</li>
<li>toinen</li>
</ul>

1.3.2007 15:46
moi

moi kaikki

5.3.2007 12:31
apina

miten helkutissa näit tehää????

7.3.2007 19:44
auttaja

^^ Yleensä ihan tyhjällä tekstitiedostolla aloitetaan koko homma. :]

17.4.2007 14:33
Johis

Mites sitten kun haluaa, että listan kohtaa klikkaamalla aukeaa uusi alavalikko? Saako tehtyä HTML:llä vai pitääko käyttää jotain muuta?

13.6.2007 14:48
Mikko (1st-target)

Sun täytyy pistää linkki just listaan että se voi avata uuden paikan.

16.8.2007 09:13
w <dd>

hjä hjä hjää

4.11.2007 13:42
Hazuu

Mitenkäs sitte tota väriä muutetaa noihi teksteihi?

9.1.2008 08:16
asf

asdf

9.1.2008 08:29
Lepistö

asd

17.1.2008 08:58
wa-shine <h.l@jippii.fi>

nii just!

28.1.2008 09:43
jelp

Hazuu, tekstien väri määräytyy tekemäsi tyylitiedoston pohajlta, voit toki myös laittaa eteen <font=#värikoodi">tekstit tähän</font>

23.2.2008 15:32
Miksi

Miksi on tehty mahdolliseksi tuollainen späm. Tämä keskustelu on pian täynnä "asfasdfasdf-kamaa"

18.3.2008 21:38
spämmeri <späm@späm.sp>

SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM SPÄM

Lisää oma kommentti

Tatu Jaakkola
tatu@jaakkola.net
http://tatu.jaakkola.net/