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 ]