Till Startsidan
JavaScript.nu / HTML-kurs / Listor, punktlistor och numrerade listor

Listor, punktlistor och numrerade listor

I detta kapitel:
Listor
Startnummer
�ndra enstaka nummer
Romerska siffror
Bokst�ver
Blanda
Cirklar
Test


I HTML kan man ha listor som visas nedan:

  1. Bryn sm�ret.
  2. Blanda mj�lken med mj�let.
  3. Blanda smeten med den finhackade l�ken.

  • Mj�lk
  • �gg
  • 3 paket kakor.

F�r att f� en lista som numeriskt listar posterna skriver man:
<OL>
<LI>Ett namn.
<LI>Ett annat namn.
<LI>Ett tredje namn.
</OL>

F�r att f� en lista som onumeriskt listar posterna skriver man:
<UL>
<LI>Ett namn.
<LI>Ett annat namn.
<LI>Ett tredje namn.
</UL>

UL
UL st�r f�r "Unordered List" (=oordnad lista) och skapar en lista med punkter.
Attribut
TYPE   Giltiga v�rden: circle, disc samt square

OL
OL st�r f�r "Ordered List" (=ordnad lista) och skapar en numrerad lista.
Attribut
TYPE   Giltiga v�rden: A, a, I, i samt 1
START   Ange ett tal som blir listans f�rsta v�rde.

LI
LI st�r f�r "LIst" (=lista) och skapar en post i en lista.
Attribut
TYPE   Giltiga v�rden om listan �r punktad: circle, disc, square
Giltiga v�rden om listan �r numrerad: A, a, I, i, 1
VALUE   S�tter postens v�rde. Kan endast anv�ndas om listan �r numrerad.

Du kan ocks� v�lja att ordningen ska vara annorlunda, allts� att talf�ljden b�rjar med t.ex. talet 4. D� skriver du s�h�r:
<OL START="4">
<LI>Ett namn.
<LI>Ett annat namn.
<LI>Ett tredje namn.
</OL>

Resultatet blir d�:

  1. Ett namn.
  2. Ett annat namn.
  3. Ett tredje namn.

Du kan ocks� �ndra enstaka v�rden, genom s�tta in en VALUE-attribut i LI-taggen.
Allts� skriva:
<OL>
<LI>Ett namn.
<LI VALUE="14">Ett annat namn.
<LI>Ett tredje namn.
<LI>Ett fj�rde namn.
<LI>Ett femte namn.
</OL>

Resultatet blir d� s�h�r:

  1. Ett namn.
  2. Ett annat namn.
  3. Ett tredje namn.
  4. Ett fj�rde namn.
  5. Ett femte namn.

Som du ser �ndras ALLA tal efter det som �ndrats.
Om man bara vill �ndra ETT tal f�r man ange en VALUE-attribut i n�sta LI-tagg ocks�, allts� skriver man:
<OL>
<LI>Ett namn.
<LI VALUE="14">Ett annat namn.
<LI VALUE="3">Ett tredje namn.
<LI>Ett fj�rde namn.
<LI>Ett femte namn.
</OL>

Resultatet blir d�:

  1. Ett namn.
  2. Ett annat namn.
  3. Ett tredje namn.
  4. Ett fj�rde namn.
  5. Ett femte namn.

Om man f�redrar att skriva v�rdena i romerska siffror skriver man TYPE="I" i OL-taggen.

Man skriver allts�...:
<OL TYPE="I">
<LI>Ett namn.
<LI>Ett annat namn.
<LI>Ett tredje namn.
<LI>Ett fj�rde namn.
<LI>Ett femte namn.
</OL>

...F�r att detta ska komma fram:

  1. Ett namn.
  2. Ett annat namn.
  3. Ett tredje namn.
  4. Ett fj�rde namn.
  5. Ett femte namn.

F�redrar man sm� bokst�ver (inte STORA) s� �ndrar man I:et i TYPE="I" mot ett litet i. Resultatet blir allts�:

  1. Ett namn.
  2. Ett annat namn.
  3. Ett tredje namn.
  4. Ett fj�rde namn.
  5. Ett femte namn.

TYPE-attributens v�rde kan ocks� �ndras till "a" eller "A".
Resultatet f�r "a" blir d�:

  1. Ett namn.
  2. Ett annat namn.
  3. Ett tredje namn.
  4. Ett fj�rde namn.
  5. Ett femte namn.

Resultatet f�r "A" blir d�:

  1. Ett namn.
  2. Ett annat namn.
  3. Ett tredje namn.
  4. Ett fj�rde namn.
  5. Ett femte namn.


Man kan ocks� byta "skrivs�tt" mitt i en uppradning, exemplet nedan visar hur:
<OL TYPE="I">
<LI>Ett namn.
<LI>Ett annat namn 2.
<LI TYPE="1">Ett annat namn 3.
<LI>Ett annat namn 4.
<LI VALUE="45">Ett annat namn 5.
<LI>Ett annat namn 6.
<LI TYPE="i">Ett annat namn 7.
<LI>Ett annat namn 8.
<LI>Ett annat namn 9.
<LI VALUE="2" TYPE="I">Ett annat namn 10.
<LI>Ett annat namn 11.
<LI>Ett annat namn 12.
<LI>Ett annat namn 13.
</OL>

Hur resultatet blir visas nedan:

  1. Ett namn.
  2. Ett annat namn 2.
  3. Ett annat namn 3.
  4. Ett annat namn 4.
  5. Ett annat namn 5.
  6. Ett annat namn 6.
  7. Ett annat namn 7.
  8. Ett annat namn 8.
  9. Ett annat namn 9.
  10. Ett annat namn 10.
  11. Ett annat namn 11.
  12. Ett annat namn 12.
  13. Ett annat namn 13.

Nu har du l�rt dig att redigera "<OL>-listan". Men �ven "<UL>-listan" kan �ndras. Skriv t.ex TYPE="square" f�r att f� fyrkanter ist�llet f�r runda cirklar (TYPE="circle").
Vill du nu ha ifyllda cirklar skriver du TYPE="disc".

Anv�nder du TYPE-attributet i en LI-tagg s� g�ller den f�r just den posten, dvs. f�r den pricken. Anv�nder du ist�llet TYPE-attributet i en UL- eller OL-tagg s� g�ller den f�r samtliga poster.

Nedan finns ett exempel jag gjort efter att ha skrivit:
<UL>
<LI>Inget angivet.
<LI TYPE="circle">TYPE="circle" angivet.
<LI TYPE="disc">TYPE="disc" angivet.
<LI TYPE="square">TYPE="square" angivet.
</UL>

Resultatet blir d�:

  • Inget angivet.
  • TYPE="circle" angivet.
  • TYPE="disc" angivet.
  • TYPE="square" angivet.

Observera att i Internet Explorer s� fungerar inte detta om du skriver "circle", "disc" och "square" med stora bokst�ver. H�r �r det allts� skillnad p� stora och sm� bokst�ver.

Test
I slutet av varje kapitel i HTML-kursen finns n�gra fr�gor som du ska svara p� f�r att testa dina kunskaper inom HTML. Om du har f�tt alla r�tt s� �r det bara att g� vidare, fast har du haft n�got fel kan det kanske vara klokt att f�rs�ka lista ut vad som kan ha varit fel. Givetvis kan du g� vidare �ven om du inte svarar r�tt p� alla fr�gor.
Hur skapar du en numrerad lista?
OL
UL
LI

Hur skapar du en onumrerad lista?
OL
UL
LI

Hur skapar du en post i en numrerad lista?
OL
UL
LI

Hur skapar du en post i en onumrerad lista?
OL
UL
LI

Hur m�nga olika v�rden kan TYPE ha i en numrerad lista?
3
5
8







Copyright © Omid Rouhani 1997-2022; Alla r�ttigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]