Med listor kan man presentera information punktvis uppifrån och ned. I ordbehandlingsprogram brukar man ibland säga att man sätter bomber, eller punkter, framför de element som finns uppställda i listan.
I HTML kan man välja mellan fem olika typer av listor. För att skapa en lista skriver man först en starttagg (de är olika för alla fem listtyperna) och när listan är färdig skriver man respektive sluttagg. Mellan start- och sluttaggen skriver man de olika elementen som ska finnas i listan. Före varje listelement måste man (i fyra av de fem listyperna) skriva taggen <LI>, som betyder List Item. Men man behöver inte skriva någon sluttagg </LI> efter listelementet, eftersom web-läsaren avslutar det förra och påbörjar ett nytt när taggen <LI> dyker upp på nytt i HTML-koden.
Oordnade listor är de vanligaste listyppen. Det är den bästa typen av lista om man vill räkna upp ett antal element utan någon inbördes ordning. I oordnade listor föregås elementen av stora punkter. Märket man använder för att skapa en oordnad lista är <UL> (Unordned List) och för att avsluta skriver man </UL>.
<P>Du behöver följande ingredienser för att göra scones:</P> <UL> <LI>4 1/2 dl Mjöl <LI>2 tsk Bakpulver <LI>1/2 tsk Salt <LI>50 g Margarin <LI>2 dl Mjölk </UL> <P>Man behöver lite fett att smörja plåten med.</P>
Du behöver följande ingredienser för att göra scones:
Man behöver lite fett att smörja plåten med.
Märket <UL> kan ha två olika attribut. COMPACT anger att listan skall visas i kompaktform med så lite ytrymme som möjligt mellan raderna. De flesta webbläsare struntar i Compact. Attributet TYPE anger hur varje listelemnet ska markeras och kan ha tre olika värden:
Om man skriver stora strukturer med listor inutti andra listor kan man använda olika markeringar för listor på olika djup i strukturen.
Märket <LI> kan också ha attributet TYPE. Det kan användas om man vill ge ett visst listelement ett eget utseende.
<P>Potatis kan man tillaga på olika sätt, till exempel:</P> <UL COMPACT TYPE=SQUARE> <LI>Kokt <LI TYPE=DISC>Stekt <LI TYPE=CIRCLE>Friterad </UL>
Potatis kan man tillaga på olika sätt, till exempel:
Om elemten i listan har någon form av inbördes ordning är den ordnade listan bra att ha. Den kallas även numrerad lista, eftersom det framför varje listelement finns ett tal istället för en stor punkt. Taggen som används för att skapa en ordnad lista är <OL> (det betyder Ordered List) och sluttaggen är </OL>.
<P>Så här gör man pannkakor: (3-4 pers.)</P>
<OL>
<LI>Sätt ungen på 225°.
<LI>Smörj en plåt.
<LI>Blanda mjöl, bakpulver och salt. Tillsätt det kalla margarinet.
Finfördela med gaffel till en gynig massa. Tillsätt mjölken och
arbeta ihop degen snabbt.
<LI>Dela den i 2 delar som plattas ut till 1 1/2 cm tjocka, runda
kakor direkt på plåten. Skåra korsvis med mjölad kniv.
<LI>Grädda på mittenfalsen ca 10 minuter.
<LI>Brödet är godast nygräddat.
</OL>
<P>Servera med sylt och vispad grädde.</P>
Så här gör man scones: (3-4 pers.)
Servera med sylt och vispad grädde.
I standard-HTML visa alltid siffror framför ordnade listeelement. Men i utökade versioner kan man även välja romerska siffror eller vanliga bokstäver istället, som känns lite originellare än siffror. Sätt <OL><taggens attribut TYPE till i för att få små romerska siffror, I för att få stora romerska siffror, 1 för vanliga siffror, a för små bokstäver och A för stora bokstäver.
Dessutom kan man bestämma vilken siffra (eller motsvarande) som ska vara den första i den ordnade listan. Justera detta med attributet START. Exempelvis betyder <OL START=5> att listan ska börja med siffran 5.
Det går även bra att mitt i en lista ändra nummerordningen. Man talar helt enkelt om med vilket nummer listan ska fortsätta med hjälp av <LI>-taggens attribut VALUE. <LI VALUE=18> gör alltså att numret före listelementet blir 18. Därefter fortsätter numren som vanligt.
<OL TYPE=i START=3> <LI>Man kan numrera ordnade listor med Små romerska siffror! <LI>Här har vi bestämt att den ordnade listan ska börja med nummer 3. <LI>Därför skrev vi <OL TYPE=i START=3> </OL>
<OL TYPE=I START=6> <LI>Det går även att numrera ordnade listor med Stora romerska siffror! <LI>Här har vi bestämt att den ordnade listan ska börja med nummer 6. <LI>Därför skrev vi <OL TYPE=I START=6> </OL>
<OL TYPE=a START=3>
<LI>Det går även bra att numrera med bokstäver
<LI VALUE=15>TYPE=a ger små bokstäver, så vi skrev <OL TYPE=a START=3>
<LI>Man kan tala om med vilket nummer listan ska fortsätta. Vid
listelemntet ovan detta skrev vi <LI VALUE=15>, vilket ger
bokstaven o.
</OL>
<OL TYPE=A>
<LI>Stora bokstäver får man med TYPE=A.
<LI>Här skrev vi därför <OL TYPE=A>
<LI>Vanliga siffror får man med TYPE=1, eller genom att hoppa
över TYPE helt och hållet.
</OL>
En kataloglista ser nästan likadan ut som en oordnad lista. Poängen med den är att listelementen ska kunna presenteras på skärmen i spalter, men tyvärr finns det inte många web-läsare som gör det...Hur som helst, startaggen är <DIR> och sluttaggen <DIR>.
<H3>De stora rovdjuren.</H3> <DIR> <LI>Varg <LI>Björn <LI>Lo <LI>Järv </DIR>
Menylistor påminner också om oordnade listor, men tanken är att de ska presenteras på ett kompaktare sätt. Det är tyvärr lite si och så med...Starttaggen är <MENU> och sluttaggen </MENU>.
<H3>Tidningar</H3> <MENU> <LI>Svenska Dagbladet <LI>Dagens nyheter <LI>Aftonbladet <LI>Expressen </MENU>
Om man vill ge en mängd termer någon sorts förklaring (eller definition), är en definitionslista perfekt! Taggen som skapar en sådan lista är <DL> (betyder Definition List). Vill man ha en utrymmessnål lista ger man attributet COMPACT till <DL>. Vanligtvis innebär det att definitionen börjar på samma rad som själva termen istället för att börja på nästa rad. Sluttaggen är naturligtvis </DL>.
Lägg märke till att <LI> inte används i en definitionslista! istället skriver man <DT> före varje term som ska definieras och <DD> före själva definitionen.
<H3>Sminkgrepp</H3>
<DL>
<DT>Kajal
<DD>Ögonpenna, ofta svart,som man målar med runt ögat
<DT>Läppenna
<DD>Penna som förstärker läppens konturer
<DT>Mascara
<DD>Färgkräm att måla ögonfransarna med
<DT>Concealer
<DD>Hudfärgad kräm med vilken man döljer blemmor
</DL>
<H3>Klädesplagg</H3>
<DL COMPACT>
<DT>Hot pants
<DD>Korta åtsittande byxor i töjbart tyg
<DT>Omlottkjol
<DD>Kjol som man knyter runt sig
</DL>
Det är möjligt att lägga en typ av lista inuti en annan lista, så att listorna blir nästlade. Detta kan komma väl till pass när listorna börjar bli mer avancerade, och du känner att ett listelement borde ha en egen lista. Det vanligaste är att man har en oordnad lista inuti en ordnad eller tvärtom.
<H2>Köp av tapeter</H2>
<OL>
<LI>Välj ut ett tilltalande mönster
<LI>Ta reda på priset
<LI>Kontrollera
<UL>
<LI>Färgens hållbarhet i ljus
<LI>Tvättningsmöjligheter
<LI>Mönsterpassning
</UL>
</OL>
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999