Listor

1. Listor

Nu finns det olika typer av listor och dessa är Definitionslista, Punktlista och Numrerad lista. De ser ut på lite olika sätt och vi går igenom var och en av dem.



2. Definitionslista

Med en definitionslista kan vi skapa något som ser ut som en rubrik eller nyckelord och under detta text med indragen vänstermarginal. Denna teknik lämpar sig fint för ordlistor eller för varje form av "rubrik" med förklarande text till.

Koden för en definitionslista ser ut så här: <dl>, <dt> och <dd> samt avslutningskoden </dl>. <dl> anger att vi tänker skapa en definitionslista. I <dt> anger vi något som vi kan kalla rubrik för stycket och i <dd> skriver vi själva stycket. Automatiskt ordnar sig texten efter en viss struktur, med en rubrik och texten lite mer indragen.

Vi skapar en definitionslista:

<html>
<head>
<title>Lista 1</title>
</head>
<body bgcolor="#ffffff">


<dl>

<dt>
<b>Definitionslista</b>
<dd>
DL betyder definition list (definitionslista på svenska) och ger texten en speciell layout. I dt anger vi rubriken och i dd skriver vi texten som följer.

<dt>
<b>Birka</b>
<dd>
Birka var en stad vid mälardalen. Det var dit som kristendomen för första gången på allvar nådde det vi idag kallar Sverige. Det var strax innan 1000-talet som Ansgar och det som kom att kallas Ansgarmissionen som missionen kom att bedrivas på ett mer genomtänkt sätt...

<dt>
<b>Ansgar</b>
<dd>
Ansgar var av frankiskt ursprung och han föddes och växte upp på kontinenten. Det var Sveakonungen Björn som skickade sändebud till Kejsar Ludvig och utbad sig präster och missionärer. Detta uppdrag kom att gå till just Ansgar. Han uppförde bland annat en kyrka i Birka, som skall vara den första i "Sverige"...
</dl>
</body>
</html>



Här har jag angivit orden Definitionslista, Birka och Ansgar i fet stil för att de skall markeras mer än den förklarande texten.



3. Resultatet

Så här blev definitionslistans utseende såsom den ser ut ovan:

Definitionslista
DL betyder definition list (definitionslista på svenska) och ger texten en speciell layout. I dt anger vi rubriken och i dd skriver vi texten som följer.
Birka
Birka var en stad vid mälardalen. Det var dit som kristendomen för första gången på allvar nådde det vi idag kallar Sverige. Det var strax innan 1000-talet som Ansgar och det som kom att kallas Ansgarmissionen som missionen kom att bedrivas på ett mer genomtänkt sätt...
Ansgar
Ansgar var av frankiskt ursprung och han föddes och växte upp på kontinenten. Det var Sveakonungen Björn som skickade sändebud till Kejsar Ludvig och utbad sig präster och missionärer. Detta uppdrag kom att gå till just Ansgar. Han uppförde bland annat en kyrka i Birka, som skall vara den första i "Sverige"...




4. Punktlista

Punktlistor är lite vad det låter, ord eller siffror som dessutom kan ha punker, cirklar eller fyrkanter framför sig. Detta bestämmer vi i attributen till <ul>. Punklistans koder är <ul> som talar om att vi skapar en punktlista, <li> där vi skriver in text samt avslutningskoden </ul>.

Vi kan ange olika attribut till <ul> och skriva <ul type=disc, circle eller square>. I tur och ordning skapar vi framför texten en punkt, en cirkel eller en fyrkant.

<html>
<head>
<title>Lista 2</title>
</head>
<body bgcolor="#ffffff">


<b>Årtal</b>
<ul type=disc>
<li>1998
<li>1999
<li>2000
</ul> <br><br>

<b>Facktermer</b>
<ul type=circle>
<li>HTML
<li>XML
<li>CSS
</ul> <br><br>

<b>Städer</b>
<ul type=square>
<li>Stockholm
<li>Göteborg
<li>Malmö
</ul>
</body>
</html>



Det är i koden <li> vi skriver in information och där dessa punker, cirklar och fyrkanter markeras.



5. Resultatet

Detta blev resultatet av koden för punktlistan som vi kikade på ovan.

årtal
  • 1998
  • 1999
  • 2000


Facktermer
  • HTML
  • XML
  • CSS


Städer
  • Stockholm
  • Göteborg
  • Malmö




6. Numrerad lista

Så har vi då de numrerade listorna. Dess koder är <ol> som talar om att vi skall skapa en numrerad lista, <li> där vi skriver in text som samt avslutningskoden </ol>.

Till de numrerade listorna kan vi också ange attribut till <ol>. Om vi inte vill att datan skall numreras med 1, 2, 3 o.s.v., vilket är den förvalda inställningen, kan vi ange attributen <ol type=a, a, I eller i>. I tur och ordning ger koderna en punktlista angiven med stora bokstäver, små bokstäver, stora romerska siffror och slutligen små romerska siffror före den text de står.

Vi kan också ange det nummer eller värde som punktlistan skall börja på. Om vi vill att punktlistan skall börja från bokstaven D, skriver i HTML koden <ol type=a start=d>. Samma system gäller när vi anger siffror eller romerska siffror.

Nedan följer några exempel på numrerade listor:

<html>
<head>
<title>Lista 3</title>
</head>
<body bgcolor="#ffffff">


<b>Numrerad lista 1</b>
<ol>
<li> Vinnare: Mats Andersson
<li> Anders Hansson
<li> Håkan Bengtsson
</ol>

<b>Numrerad lista 2</b>
<ol start=5>
<li> Maj
<li> Juni
<li> Juli
</ol>

<b>Numrerad lista 3</b>
<ol type=i>
<li> Bilaga A
<li> Bilaga B
<li> Bilaga C
</ol>

<b>Numrerad lista 4</b>
<ol type=A>
<li> Adam
<li> Bertil
<li> Cesar
</ol>

</body>
</html>




7. Resultatet

Här ser du resultatet av den numrerade lista vi gjorde ovan. Ett bra sätt att presentera resultat från tävlingar?

Numrerad lista 1
  1. Vinnare: Mats Andersson
  2. Anders Hansson
  3. Håkan Bengtsson
Numrerad lista 2
  1. Maj
  2. Juni
  3. Juli
Numrerad lista 3
  1. Bilaga A
  2. Bilaga B
  3. Bilaga C
Numrerad lista 4
  1. Adam
  2. Bertil
  3. Cesar




8. Nestlade listor

Med nestlade listor menar vi att man kombinerar olika typer av listor och så kan vi uppnå vissa effekter. En listas kod finns med andra ord inuti en annan lista eller i en lista av samma slag.

Först skall vi skapa två numrerade listor inuti en numrerad lista och som avslutning skapar vi punktlistor inuti numrerade listor. Det låter väl spännande!

Numrerade listor inuti en numrerad lista:

<html>
<head>
<title>Lista 4</title>
</head>
<body bgcolor="#ffffff">

<b>UPPFÖLJNING</b>
<ol start=1998>
<li> FÖRSÄLJNING

<ol type=A>
<li> Finland
<li> Sverige

<ol type=i>
<LI> Göteborg
<li> Malmö
<li> Umeå
</ol>

</ol>

<li> FÖRSÄLJNING

</ol>

</body>
</html>




9. Resultatet

Då ser vi resultatet av koden den nestlade listan som vi gjorde.

UPPFöLJNING
  1. FöRSäLJNING
    1. Finland
    2. Sverige
      1. Göteborg
      2. Malmö
      3. Umeå
  2. FöRSäLJNING




10. Punktlistor inuti numrerade listor

Visst kan man skapa punktlistor inuti numrerade listor!

<html>
<head>
<title>Lista 5</title>
</head>
<body bgcolor="#ffffff">

<b>Fotbollsklubbar</b>

<ol>
<li> Fotbollsklubbar i Göteborg

<ul type=circle>
<li>GAIS
<li>ÖIS
<li>IFK
<li>m.fl.
</ul>

<LI>Fotbollsklubbar i Stockholm

<ul type=circle>
<li>AIK
<li>Hammarby
<li>m.fl.
</ul>

</ol>

</body>
</html>




11. Resultatet

Slutligen har vi då utseendet för punktlistan inuti den numrerade listan.

Fotbollsklubbar
  1. Fotbollsklubbar i Göteborg
    • GAIS
    • öIS
    • IFK
    • m.fl.
  2. Fotbollsklubbar i Stockholm
    • AIK
    • Hammarby
    • m.fl.




 
portfolio
infoga bilder
dagens bibelord
ge hemsidan färg
infoga länkar
bildväxling för menyer i JavaScript
Kodförteckning för html 4.0
Var med och rösta i en fototävling
  kontakt © Stefan Dahlén Torsdag 23:e oktober 2014