Listor

När man skall presentera information vill man ibland ha med en lista, till exempel en lista över böcker som rekommenderas eller en lista som steg för steg visar hur en uppgift skall utföras. Du har träffat på många sådana listor i HTML-skolan och de har vanligen sett ut så här:

• Första punkten på listan
• Andra punkten på listan
• Och så vidare ...

En sådan uppräkning kallas en oordnad lista eller punktlista.

<UL>
<LI>Första punkten på listan</LI>
<LI>Andra punkten på listan</LI>
<LI>Och så vidare ...</LI>
</UL>

Hela listan omsluts av taggarna <UL> ... </UL>

Varje enskild post på listan omsluts av taggarna <LI> ... </LI>

Den avslutande LI-taggen kan uteslutas, men det gör koden svårare att läsa.

1. Sträck fram höger hand med handflatan vänd åt vänster
2. Fatta motpartens högra hand i ett fast grepp
3. För handen upprepade gånger i vertikal riktning

Det här är en ordnad eller numrerad lista.

<OL>
<LI>Sträck fram höger hand med handflatan vänd åt vänster</LI>
<LI>Fatta motpartens högra hand i ett fast grepp</LI>
<LI>För handen upprepade gånger i vertikal riktning</LI>
</OL>

Kodningen är alltså exakt densamma som för en oordnad lista, men med <UL> ... </UL> utbytt mot <OL> ... </OL>. Även här kan man utesluta den avslutande LI-taggen.

Ett annat sätt att göra denna ordnade lista:

1. Sträck fram höger hand med handflatan vänd åt vänster
2. Fatta motpartens högra hand i ett fast grepp
3. För handen upprepade gånger i vertikal riktning

Den enda skillnaden mellan de båda listorna är att den inledande taggen skrivs <OL type="A">.

Så här:

	Se nedan Nedan är det håll åt vilket saker faller
	Se ovan Ovan är det håll åt vilket saker inte faller

Vi använder alltså en egen bild i stället för de punkter som annars visas. Radbrytningen åstadkommer du som vanligt med <BR>.

<UL IMAGESRC="bilder/din_bild.gif">
<LI>Se nedan<BR>Nedan är det håll åt vilket saker faller</LI>
<LI>Se ovan<BR>Ovan är det håll åt vilket saker inte faller</LI>
</UL>

För att göra en lista i flera nivåer lägger du helt enkelt in "kod i koden", till exempel så här - indragen behövs inte, utan är bara till för att det skall bli lättare att se vad som hör vart.

<UL>
<LI>Måndagar</LI>
     <UL>
     <LI>Vika servetter</LI>
     <LI>Skrynkla örngottsband</LI>
          <UL>
          <LI>Vita band skrynklas på längden</LI>
          <LI>Färgade band skrynklas på tvären</LI>
          </UL>
     <LI>Virka antimakassar</LI>
     </UL>
<LI>Tisdagar</LI>
     <UL>
     <LI>Putsa skosulor</LI>
     <LI>Städa dammsugaren</LI>
     </UL>
<LI>Onsdagar</LI>
     <UL>
     <LI>Stämma i bäcken</LI>
     <LI>Dämma i ån</LI>
     </UL>
</UL>

Resultatet av denna osedvanligt fåniga lista blir:

• Måndagar
• Vika servetter
• Skrynkla örngottsband
• Vita band skrynklas på längden
• Färgade band skrynklas på tvären
• Virka antimakassar
• Tisdagar
• Putsa skosulor
• Städa dammsugaren
• Onsdagar
• Stämma i bäcken
• Dämma i ån

Läs mer här om hur du anger utseende på markeringen i olika nivåer.

Med hjälp av JavaScript kan du göra en mer komplicerad lista i flera nivåer, där du klickar fram de olika nivåerna ungefär som i Utforskaren. Detta skall du få lära dig i avsnittet om JavaScript, men du kan redan nu titta på en sådan lista.

Övningsuppgifter
Kunskapstest

© SupportData.Net