Heddas logga

Webb­utveckling

Heddas logga

Listor

Det är ganska ofta som man vill lista upp saker. Bl. a. när du har ett recept, eller när du bara vill rabbla saker du har i din samling. Du kan också använda sig utav listor när du vill presentera dagens uppgifter till en lektion.

Numrerad lista <ol>

En numrerad lista, eller ordered list på engelska (alternativt till och med enumerated list), är en lista där varje punkt är numrerad. Du skapar en numrerad lista med <ol>

  1. Det första du ska tänka på när du gör en lista är att listan får inte ligga i ett <p>-element. Hemsidan kommer att fungera, men det är fel att göra så.
  2. Sen när du har skrivit dina <ol>- och </ol>-taggar så skapar du varje list-element med <li> som står för list item.
  3. Text som står innanför <li>- och </li>-taggarna ska inte ha <p>-taggar runt sig.

Punktlista <ul>

Du skapar en punktlista med taggarna <ul> och </ul>. ul står för unordered list, i motsats till ordered list.

Listor i listor

Om du programmerar så är listor i listor ofta besvärligt och kontraintuitivt. I HTML är listor i listor inget konstigt alls, om än kanske lite bökigt. Om du vill ha en underpunkt i en lista så skapar du den genom att du skapar en ny lista inne i li-elementet.

Exempel

<h5>Mina favoritsaker</h5>

<ol>
  <li>Lov
    <ol>
      <li>Sommarlov</li>
      <li>Jullov</li>
      <li>Höstlov</li>
      <li>Påsklov</li>
      <li>Sportlov</li>
    </ol>
  </li>
  <li>Snabbmat
    <ol>
      <li>Pizza
        <ol>
          <li>Kebabpizza m. pommes</li>
          <li>Vezuvio m. béarnaisesås</li>
        </ol>
      </li>
      <li>Dumplings</li>
    </ol>
  </li>
  <li>Sova</li>
</ol>
Mina favoritsaker
  1. Lov
    1. Sommarlov
    2. Jullov
    3. Höstlov
    4. Påsklov
    5. Sportlov
  2. Snabbmat
    1. Pizza
      1. Kebabpizza m. pommes
      2. Vezuvio m. béarnaisesås
    2. Dumplings
  3. Sova

Definitionslista

En definitionslista skiljer sig ganska så dramatiskt från de andra två listorna i HTML. Dels är det en visuell skillnad, men också en skillnad i hur du skriver dem. Du startar en definitionslista med <dl> som då står för definition list. Sen använder du <dt> (definition term) för termen som ska definieras. Och <dd> (definition description) för att skriva ut definitionen.

DNS
Domain Name Server
DHCP
Dynamic Host Configuration Protocoll

Utseende

När du vill förändra utseendet på din sida så ska du som regel använda dig utav CSS. Men just när det gäller listor finns det lite granda du kan göra utan CSS.

Numrerade listor

Bokstäver

Om du vill att din lista ska använda sig utav bokstäver istället för siffror kan du lägga till attributet type i din öppningstagg till listan och ge det värdet "A" om du vill ha stora bokstäver eller "a" om du vill ha små: 

<ol type="A">
	<li>Hej</li>
	<li>Hejsan</li>
	<li>Tja</li>
</ol>
  1. Hej
  2. Hejsan
  3. Tja
<ol type="a">
	<li>Hej</li>
	<li>Hejsan</li>
	<li>Tja</li>
</ol>
  1. Hej
  2. Hejsan
  3. Tja

Romerska siffror

Sätter du type till bokstaven "I" eller "i" så får du med romerska siffror istället. 

<ol type="I">
	<li>Alea</li>
	<li>Iacta</li>
	<li>Est</li>
</ol>
  1. Alea
  2. Iacta
  3. Est
<ol type="i">
	<li>Alea</li>
	<li>Iacta</li>
	<li>Est</li>
</ol>
  1. Alea
  2. Iacta
  3. Est

Vanliga siffror

De vanliga siffrorna dyker upp om man inte anger någon type. Men om du ändrat på någon regel och vill ha siffror på bara en lista kan du ange type="1" så får du med vanliga siffror.

Startvärde

Ibland vill du inte starta på 1 utan du vill börja på kanske 17. Då kan man ange startvärde för sin lista med attributet start="17". 

<ol start="17">
	<li>Primtal nummer 7</li>
	<li>Delbart med 2, 3, 6, 9</li>
</ol>
  1. Primtal nummer 7
  2. Delbart med 2, 3, 6, 9

Detta du man enkelt kombinera med type, utan att behöva veta vilken bokstav eller romerskt tal du landar på: 

<ol start="6" type="a">
	<li>Primtal nummer 7</li>
	<li>Delbart med 2, 3, 6, 9</li>
</ol>
  1. En bokstav efter e
  2. En bokstav efter f
<ol start="17" type="i">
	<li>Det finns säkert en Pokémon med det namnet</li>
	<li>Det är utvecklingen</li>
</ol>
  1. Det finns säkert en Pokémon med det namnet
  2. Det är utvecklingen

Övningar

  1. Skriv en hemsida med ett recept på ditt favoritbakverk
    • Ingredienserna ska vara i punktform
    • Stegen i receptet ska vara numrerade
  2. Vilket café/vilken butik säljer bäst version av ditt bakverk?
  3. Lägg till en bild på bakverket (finns i kapitel fem eller här)