30 besökare online
Drömvävaren webbshop
6 kunder online

webdesign och HTML

« Text och specialtecken | Grundkod för HTML-sidor  »

Listor

OBS! Innan du fortsätter arbeta med ditt dokument ska du ange vilken teckenkodning eller "charset" som din sida använder. Att använda en standardiserad teckenkodning är en förutsättning för att dina sidor ska visas likadant oberoende av vilket dator eller program som används. När du använder svenska tecken i dina sidor kan vissa tecken visas felaktigt i webbläsaren. För att du inte ska behöva använda specialtecken (eng. entities) för åäöÅÄÖ som å ä ö Å Ä Ö så använder vi teckenkodningen ISO 8859-1.
Du kan läsa mer detaljerat om vad detta innebär i guiden Teckenkoder - charset »

Kopiera eller skriv koden nedan. Ange den efter <HEAD> och före <TITLE>:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>

Notepad++

 

Punktlistor

Punktlistor, numrerade listor och definitionslistor har bra stöd i HTML och du kan även gruppera listobjekten i undernivåer. En lista där varje listobjekt är markerad med en symbol kallas för punktlista eller "onumrerad lista" (unordered list) och anges med märket<UL>. Varje del i listan skrivs inom ett "listelement"<LI>.

  1. Lägg till koden nedan i ditt dokument för att skapa en punktlista:

    <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>

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Numrerad lista

  1. En lista där varje del är markerad med en siffra kallas för "numrerad lista" (ordered list) och anges med märket <OL>. Varje del i listan skrivs inom ett "listelement" <LI>.

    Lägg till koden nedan för en numrerad lista:

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

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

 

Listor i flera nivåer

En lista där varje listobjekt ä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 koden nedan för en punktlista med undernivåer:

    <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>
    <li>    3:e kvartalet
    <ul>
    <li>    Juli</li>
    <li>    Augusti</li>
    <li>    September</li>
    </ul>
    </li>
    <li>    4:e kvartalet
    <ul>
    <li>    Oktober</li>
    <li>    November</li>
    <li>    December</li>
    </ul>
    </li>
    </ul>

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

 

Symboler i punktlistor

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

  • <ul type="square">
    för fylld kvadrat.
  • <ul type="circle">
    För ofylld cirkel
  • <ul type="disc">
    För fylld cirkel

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å listor med de olika symbolerna:

 

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:

Exempel på definitionslista:

<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>

 

Nästa guide: Grundkod för HTML-sidor »