skriv ut »

Listor - definition lists

Punktlistor, numrerade listor och definitionslistor har bra stöd i HTML och du kan även gruppera listobjekten i undernivåer.

Definitionslistor

Definitionslistor anges med märket <DL> och kan vara användbara när man behöver lista många ord med tillhörande beskrivningar. Avståndet mellan styckena blir mindre än normalt och texten i beskrivningen blir indraget:

Koden som ger listan i exemplet:

<dl>
<dt>HTML</dt>
<dd>Hypertext markup language, ett sidbeskrivningsspråk för webbsidor som tolkas av webbläsaren</dd>
<dt>Browser<dt>
<dd>webbläsare, program som behövs för att läsa webbsidor via Internet eller Intranet</dd>
<dt>WYSIWYG-editor</dt>
<dd>What you see is what you get, du ser resultatet av det du redigerar direkt utan att behöva förgranska.
</dd>
</dl>

 

 

ÖVNING 3: LISTOR

En lista där varje del är markerad med en symbol kallas för punktlistor <UL> (unordered list/onumrerad lista). Punktlistan startas med märket <UL> och varje del i listan skrivs inom <LI> (listelement).

  1. Lägg till följande kod för punktlista efter din förra text:

    se färdigt exempel »

    <p>Här är en punktlista:</p>
    <ul>
    <li>    1:a kvartalet</li>
    <li>    2:a kvartalet</li>
    <li>    3:e kvartalet</li>
    <li>    4:e kvartalet</li>
    </ul>

    Förgranska i webbläsaren:

  2. En lista där varje del är markerad med en siffra kallas för numrerad lista <OL> (ordered list/numrerad lista). Punktlistan startas med märket <OL> och varje del i listan skrivs inom <LI> (listelement).

    Lägg till följande kod för en numrerad lista efter din förra text:

    se färdigt exempel »

    <p>Här är en numrerad lista:</p>
    <ol>
    <li>    Vår</li>
    <li>Sommar</li>
    <li>    Vinter</li>
    <li>    Höst</li>
    </ol>

    Förgranska i webbläsaren:

 

Listor i flera nivåer

En lista där varje del även har en undernivå får du genom att lägga till en extra <OL> eller <UL> före eller efter <LI> (listelement).

  1. Lägg till följande kod för en numrerad lista efter din förra text:

    se färdigt exempel »

    <p>Här är en punktlista i två nivåer:</P>
    <ul>
    <li>    1:a kvartalet
    <ul>
    <li>    Januari</li>
    <li>    Februari</li>
    <li>    Mars</li>
    </ul>
    </li>
    <li>    2:a kvartalet
    <ul>
    <li>    April</li>
    <li>    Maj</li>
    <li>    Juni</li>
    </ul>
    </li>
    </ul>

    Förgranska i webbläsaren:

 

Symboler i punktlistor

Vill du ha andra symboler i dina punktlistor än de som är standard kan du ange:

Exempel på symbolen "fyrkant" (square):

<p>Här är en punktlista med fyrkant:</p>
<ul type="square">
<li>1:a kvartalet</li>
<li>2:a kvartalet</li>
<li>3:e kvartalet</li>
<li>4:e kvartalet</li>
</ul>

Exempel på de olika symbolerna:

 

Gå vidare: Bilder »