Björn Mattsson - Webben: Kapitel 4

Listor

Listor finns överallt, det är veckans inne- och utelista, en lista över vad som ska med på semestern eller en lista över hur man ställer in videon

Listor

Hittills i kursen har vi skrivit text i form av stycken, och utformat texten i huvudsak med hjälp av märkena och . Men det finns andra sätt att organisera text, till exempel som listor. Listor lämpar sig bra om man vill räkna upp något, till exempel en prislista eller en punktlista över saker man måste komma ihåg att göra.

Man kan ha listor som är numrerade eller bara markerade med punkter. Oavsett hur du vill att listan ska se ut konstruerar du listor på samma sätt. Det finns än så länge fem olika typer av listor:

Ordnade listor
Oordnade listor
Definitionslistor
Kataloglistor, <DIR> (Directory)
Menylistor, <MENU> (Menu)

Listor som nästan aldrig används

De två sista listtyperna används i princip aldrig eftersom de ger samma utseende som en vanlig oordnad lista (listobjekten föregås av en rund punkt). Använd bara de här märkena om du av någon anledning verkligen vill framhäva att det rör sig om en katalog eller meny. De definieras som <DIR> respektive <MENU> och listobjekten definieras med hjälp av märket <LI>. Se längre ner hur man skapar listor.

Bild 4.1 Två listor

Den översta listan som är ordnad, har ingen särskild utformning. För den undre oordnade listan har vi använt teckensnittet Tempus Sans ITC och storleken är satt till 4. Koden till ovanstående bild följer här nedan.

Exempel 4-1 "Två listor"
<HTML>
<HEAD>
<TITLE>Två listor</TITLE>
</HEAD>
<BODY>
<OL>
  <LI>Kalle Karlsson, 32 poäng</LI>
  <LI>Josefin Jansson, 29 poäng</LI>
  <LI>Hjalmar Hansson, 28 poäng</LI>
  <LI>Sofia Svensson, 23 poäng</LI>
  <LI>Anna Andersson, 22 poäng</LI>
</OL>
<FONT FACE="Tempus Sans ITC" SIZE="4">
<UL>
  <LI>Tält (kolla att alla pinnar finns</LI>
  <LI>Sovsäck, liggunderlag.</LI>
  <LI>Spritkök, T-sprit, tändstickor</LI>
  <LI>Bröd, smör, ost, prickig korv</LI>
</UL>
</BODY>
</HTML>

Text i listor påverkas av märket (teckensnitt, storlek, färg mm.) precis som vanlig text. Genom att använda -märket kan du till exempel ge siffrorna en färg och resten av texten en annan färg, se Bild 4.2.

Bild 4.2 Gröna siffror till numrering, oordnad lista med olikfärgade punkter

Den viktigaste delen av koden till exemplet ovan ser ut så här:

Exempel 4-2 "Färg i listor"
..
<OL>
  <B><FONT COLOR="green">
  <LI>
  </FONT></B>
      Kalle Karlsson, 32 poäng</LI>
  <B><FONT COLOR="green">
  <LI>
  </FONT></B>
      Josefin Jansson, 29 poäng</LI>
</OL>
..

Koden ovan börjar med märket för listan, <OL>. Därefter anger vi att texten ska vara fet och att färgen ska vara grön . På nästa rad sätter vi in märket för ett listobjekt, <LI>. Det är bara numreringen som ska anges med fet och grön text, därför sätter vi in avslutande märken för fet stil och teckensnitt direkt efter <LI>-märket. Sist skriver vi in texten till listobjektet. Upprepa detta för alla listobjekt i listan.

Som vanligt kan du skriva koden mer kompakt om du vill även om texten då riskerar att bli svårare att läsa. Ovanstående skulle kunna skrivas:

<OL>
  <B><FONT COLOR="green"><LI></FONT></B>Kalle Karlsson, 
    32 poäng</LI>
  <B><FONT COLOR="green"><LI></FONT></B>Josefin Jansson, 
    29 poäng</LI>
</OL>

Ordnade listor

Med ordnade listor avses numrerade listor. Den första posten i listan numreras med 1, nästa post med 2 o.s.v. Kan användas för t.ex. instruktioner som ska utföras i en viss ordning.

<OL>

En ordnad lista inleds med märket <OL> (ordered list) och avslutas med </OL>, se Exempel 4-1 ovan. Före märket läggs en tom rad in, vilket gör att det alltid finns ett avstånd mellan text och en lista. <OL> tar två olika argument: Type och Start

Type

Värden på Type är "A", "a", "I", "i" och "1".

"A" gör att listan "numreras" med hjälp av versaler: A, B, C, D och så vidare.
"a" numrerar listan enbart med gemena tecken: a, b, c, d och så vidare.
"I" skapar en lista numrerade med versala romerska siffror: I, II, III, IV och så vidare.
"i" numrerar listan med gemena romerska siffror: i, ii, iii, iv och så vidare
"1" behöver man normalt inte använda eftersom detta alternativ används som standard om ingen annat anges. Numreringen blir då 1, 2, 3, 4 och så vidare.

En lista med fem objekt, som definieras med <OL TYPE="a">, ger följande resultat:

Bild 4.3 Lista som numreras med TYPE="a"

Eftersom HTML har sitt ursprung i den anglikanska världen används inte de svenska tecknen "å", "ä" eller "ö" vid numrering.

Så vad händer om man har en lista med fler än 26 tecken då? Jo, efter "z" kommer "aa", "ab", "ac" och så vidare. Har du en riktigt stor lista kommer "az" så småningom att följas av "ba", men då har du nog skapat en väl lång lista.

Start

Värdet på Start anger helt enkelt med vilket värde listnumreringen börjar, och det måste vara ett numeriskt värde. Om du anger <OL START="5" TYPE="A"> kommer listan att börja med "E", en romerskt numrerad lista börjar med "V" och en icke definierad lista (eller definierad som TYPE="1") börjar med "5". Du kan ange numrering för enstaka listobjekt, se VALUE här nedan.

Om du av någon anledning måste avbryta en lista med annan text, eller bilder, kan du använda <OL START = "x"> för att fortsätta listan igen (x är ett valfritt positivt heltal).

<LI>

Varje objekt i listan definieras med hjälp av märket <LI> (list item) och avslutas med </LI>. Det är inte nödvändigt att använda </LI> men jag tycker att det är bra att vara konsekvent när man använder märken. Till <LI> finns attributen VALUE och TYPE.

Type

Se avsnittet Type ovan för de värden attributet kan anta. Typen ändras för det aktuella och alla efterföljande listobjekt.

Value

Används på samma sätt som Start, se avsnittet ovan. Numreringen för efterföljande listobjekt ändras med utgångspunkt från värdet du anger för Value. Bild 4.4 visar hur det kan se ut när man i punkt 3 byter från TYPE="a" till TYPE="1" och sätter VALUE för fjärde listobjektet till 15.

Du kan inte växla mellan en ordnad och oordnad lista. Listtypen definieras med hjälp av <OL> eller <UL> och kan inte ändras lokalt.

Bild 4.4 Lista där typen av numrering, liksom värdet ändras.

Oordnade listor

Oordnade listor är icke numrerade listor där varje post föregås av en punkt, cirkel eller fyrkant. Punkt är standard.

<UL>

En oordnad lista inleds med märket <UL> (unordered list) och avslutas med </UL>. Före märket läggs en tom rad in, vilket gör att det alltid finns ett avstånd mellan text och en lista. <UL> tar ett argument: Type.

Type

Type kan anta följande värden:

Disc är förvalt och skapar listobjekt med en punkt (fylld cirkel).
Circle skapar listobjekt med en cirkel.
Square skapar listobjekt med en fylld fyrkant.

<LI>

Precis som för ordnade listor definieras listobjekten för oordnade listor med hjälp av märket <LI>, men för oordnade listor tar det bara argumentet Type.

Type

Se Type i avsnittet ovan

Bild 4.5 En oordnad lista med Type satt till "circle", "square" och "disc".

Definitionslistor

Den tredje och sista listtypen kallas definitionslista. Den var ursprungligen avsedd för att definiera termer med tillhörande förklaring, där termen blir rubrik och definitionen dras in ett par centimeter. Men man kan till exempel använda den för att skapa indragen text eller listobjekt som föregås av en bild som du skapat själv.

Vissa webbläsare visar definitionslistan som två spalter där rubrik och definition står på samma rad.

<DL>

En definitionslista inleds med märket <DL> (definition list) och avslutas med </DL>. En blankrad läggs in ovanför det första listobjektet.

<DT>

Ett listobjekt i en definitionslista skapas med hjälp av märkena <DT> och <DD>. <DT> används för att ange ordet som ska förklaras. Ordet står som en rubrik ovanför texten som förklarar termen. Märket har inget argument.

<DD>

Används för den förklarande texten. Märket har inget argument.

Bild 4.6 En definitionslista.

Du anger den definierade termen och själva definitionen som vanlig text. Koden till bild 4.6 ser ut så här:

Exempel 4-3 "Definitionslista"
<HTML>
<HEAD>
<TITLE>Nästlad lista</TITLE>
</HEAD>
<BODY>
<FONT FACE="Tempus Sans ITC" SIZE="4">
<DL>
  <DT><B><FONT COLOR="purple">HTML</FONT></B></DT>
    <DD>Förkortningen står för HyperText Markup Language
  <DT><B><FONT COLOR="purple">Intranät</FONT></B></DT>
    <DD>En webbplats för internt bruk, inom företagets 
        väggar, kallas för intranät
  <DT><B><FONT COLOR="purple">Mosaic</FONT></B></DT>
    <DD>Den första grafiska webbläsaren, föregångare till 
        Netscape och Explorer
  <DT>
</DL>
</BODY>
</HTML>

Använda definitionslista för indrag

Som du kan se i Bild 4.6 skrivs definitionen med ett indrag på drygt 1,5 centimeter. Om du vill skriva en indragen text kan du använda en definitionslista. Strunta helt enkelt i att ange någon term med <DT>. Använd bara <DD>, så här:

<DL>
  <DD>Den här texten är indragen
</DL>

Du kan skriva så mycket text du önskar inom en och samma definition. Indraget sker automatiskt vid radbyte.

Lista med egna punkter

Kanske har du sett listor vars listobjekt föregås av en liten tredimensionell boll, eller punkt. Detta åstadkoms bland annat med hjälp av en definitionslista. Efter märket <DT> gör du ett anrop till en bild, och skriver sedan listobjektets text. Du kan utelämna <DD> helt. Det kan se ut så här:

<DL>
  <DT><IMG SRC="bullet.gif"> Den här texten föregås av en boll
</DL>

Naturligtvis kan du använda vilken bild som helst, kanske tycker du bättre om trekanter, blommor eller något annat användbart motiv. I Bild 4.7 har jag använt en liten boll framför varje <DT>-märke.

Bild 4.7 En definitionslista med bilder

Nästlade listor

Ibland kan det vara nödvändigt att använda listor i listor, och då brukar man tala om nästlade listor. Du kan blanda de olika listtyperna som du önskar. Här nedan har jag skapat en definitionslista som under en punkt har en ordnad lista, och under en annan punkt en oordnad lista.

Exempel 4-4 "Nästlad lista"
..
<DL>
  <DT><IMG SRC="bullet.gif"> Tält</DT>
    <DD><OL>
         <LI>Kolla att alla tältpinnar finns (24 st)
         <LI>Testa linorna (6 st)
         <LI>Se till att innertältet är rengjort
        </OL>
    </DD>
  <DT><IMG SRC="bullet.gif"> Sovgrejor</DT>
    <DD><UL TYPE="circle">
         <LI>Vädra sovsäckarna
         <LI>Packa med kudde och lakan
         <LI>Rulla ihop liggunderlagen
        </OL>
    </DD>
</DL>
..

Resultatet ser du i Bild 4.8 nedan.

Bild 4.8 En nästlad lista.

Bortsett från att du kan nästla listor med varandra kan du även sätta in till exempel en tabell som listobjekt, eller en horisontell linje <HR>. Det enda du behöver tänka på är att det du placerar i listan ska sitta mellan <LI> och </LI>. Testa dig fram.

Listobjekt i listor skrivs vanligtvis ut så kompakt som möjligt, d.v.s. att radavståndet är satt till ett minimum. Om du vill öka avståndet mellan listobjekt kan du lägga in -märken efter listobjekten.

Sammanfattning

Idag har vi kikat på de tre vanligaste typerna av listor som du kan behöva. Ordnade listor visar listobjekt numrerat. Du kan ändra typ av numrering och vilket nummer listan eller ett listobjekt ska börja på. Oordnade listor är inte numrerade, men du kan ange om listobjekt ska föregås av en cirkel, fylld cirkel eller en fyrkant. Slutligen gick vi igenom definitionslistor, där du bland annat kan ange att en bild ska vara punkt framför listobjekt.

Märken

Frågor

Vilka tre typer av listor är de vanligast förekommande, och vilka kännetecken har de?
Definiera en ordnad lista med fem objekt som är numrerad med versala romerska siffror.
Ange att listan i fråga 2 från och med objekt fyra ska numreras med vanliga siffror.
Definiera en oordnad lista som har fyrkanter som punkter.
Skapa en lista med tre objekt, som har bilden lila-punkt.gif som inledande punkt.
Skapa en nästlad lista som består av en ordnad huvudlista, vars två listobjekt består av oordnade listor.

Svaren på frågorna finns i Bilaga A.

Senast uppdaterad 99-08-09