HTML & CSS for nybegynnere (Del 06): Lister.

Det er ulike listetyper i HTML. Først er det punktlister. I denne listetypen blir hver listeoppføring utstyrt med et punkttegn, kalt bullet.

Punktlister introduseres via ul-elementet. Hver listeoppføring er merket med li-elementet.

<p>Aktuelle temaer fra forumet</p>
<ul>
  <li>CSS blir ikke videre utført</li>
  <li>Showroom Hollywood-stil fra 40-tallet</li>
  <li>Klapp-ut-liste CSS</li>
  <li>PHP tilkobling/frakobling</li>
  <li>Min lille showroom - Nybegynner spør om tips!</li>
</ul>

Her er resultatet i nettleseren:

Før hver oppføring settes det inn et punkttegn. Hvordan dette ser ut som standard, bestemmes av nettleseren. Det er attributter som kan påvirke hvordan lister vises, men disse skal ikke lenger brukes. CSS-egenskaper bør brukes i stedet.

Punktlister kan også være innebygd. Ta først en titt på illustrasjonen nedenfor:





Dette viser hvordan en slik innbygging fungerer.

Syntaksen for dette ser slik ut:

<ul>
  <li>Tutorials
    <ul>
      <li>2D</li>
      <li>3D</li>
      <li>Web</li>
    </ul>
  </li>
  <li>Videotrainings
    <ul>
      <li>3D</li>
      <li>Mediedesign</li>
      <li>Web</li>
    </ul>
  </li>
  <li>Tips</li>
  <li>Butikker</li>
</ul>

Innenfor en listeelement kan det være en annen liste. Det trenger ikke nødvendigvis å være en punktliste. Faktisk kan også andre listetyper - som vil bli presentert i denne opplæringen - settes inn.

Forresten, i HTML5 er det ikke alltid nødvendig med lukkende </li>-tag. Men for bedre lesbarhet anbefaler jeg alltid å lukke den. Syntaktisk korrekt ville det vært slik:

<p>De aktuelle temaene fra forumet</p>
<ul>
  <li>CSS blir ikke videre utført
  <li>Showroom Hollywood-stil fra 40-tallet
  <li>Klapp-ut-liste CSS
  <li>PHP tilkobling/frakobling
  <li>Min lille showroom - Nybegynner spør om tips!
</ul>

Nummererte lister

I tillegg til punktlister kan det også defineres nummererte lister. Igjen vises bilder først, som viser hva som egentlig er tanken bak slike nummererte lister.

Sifrene nummereres foran hver listeoppføring. Nummererte lister introduseres via ol-elementet.

Det følgende eksempelet viser hvordan dette elementet kan brukes.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>XML</li>
</ol>

Liksom med punktlister, merkes hver oppføring her med li-elementet.

Teoretisk sett kan også punktlister være innebygd.

<ol>
  <li>Tutorials
    <ol>
      <li>2D</li>
      <li>3D</li>
      <li>Web</li>
    </ol>
  </li>
  <li>Videotrainings
    <ol>
      <li>3D</li>
      <li>Mediedesign</li>
      <li>Web</li>
    </ol>
  </li>
  <li>Tips</li>
  <li>Butikker</li>
</ol>

Resultatet i nettleseren er imidlertid skuffende.





Dette oppnår ikke en nummerering etter følgende skjema:

1. Tutorials 2D

1.1 3D

1.2 Web

2. Videotrainings 3D
   
   2.1 Mediedesign
   
   2.2 Web
3. Tips
4. Butikker
   
   Dette er ikke mulig med ren HTML. Faktisk må man bruke CSS for å la innhold automatisk nummereres etter et slikt skjema.
   
   

Definisjonslister

En annen variant av lister er såkalte definisjonslister. Her er et eksempel på hvordan en slik liste ser ut i nettleseren:





Hovedbruksområdet for definisjonslister er ordbøker. Her er syntaksen som fører til den tidligere viste utdataen:

<dl>
   <dt>AM</dt>
      <dd>AM - Air Mail</dd>
      <dd>AM - Air Marshal</dd>
      <dd>AM - Amberg</dd>
      <dd>AM - Americium</dd>
      <dd>AM - Amstetten</dd>
   <dt>AN</dt>
      <dd>AN - above named</dd>
      <dd>AN - Access Node</dd>
      <dd>AN - Ancona</dd>
</dl>

Ved definisjonslister har man alltid å gjøre med tre elementer. Listene innledes av dl-elementet. Dette er med andre ord den ytre strukturen. Uttrykket som skal defineres er merket med et dt-element. Dette er til syvende og sist definisjonsbegrepet. Definisjonsbeskrivelsen angis igjen ved hjelp av dd-elementet.

Det er for øvrig også mulig med innfelte definisjonslister. Dette fungerer på samme måte som vist med de andre listen-varianter.

Hvordan definisjonslister ser ut som standard bestemmes igjen av nettleseren. Til syvende og sist kan du imidlertid selv sette opp det ønskede utseendet via CSS.

I tidligere HTML-versjoner fantes det også meny- og kataloglister. Elementene som ble brukt for dette var menu og dir. dir-elementet er ikke lenger inkludert i HTML5. Annerledes er det med menu. Dette elementet ble implementert på nytt og skal kunne brukes i fremtiden for kontekstmenyer og verktøylinjer. Her er et eksempel på hvordan W3C forestiller seg en typisk menu-applikasjon:

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">New...</button>
   <button type="button" onclick="fopen()">Open...</button>
   <button type="button" onclick="fsave()">Save</button>
   <button type="button" onclick="fsaveas()">Save as...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">Copy</button>
   <button type="button" onclick="ecut()">Cut</button>
   <button type="button" onclick="epaste()">Paste</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Help</a></li>
   <li><a href="about.html">About</a></li>
  </menu>
 </li>
</menu>

I øyeblikket støttes dette imidlertid ikke i denne formen av noen nettleser.





Derfor bør "menu" på nåværende tidspunkt heller ikke brukes.

Utforming av lister

Et annet tips angående lister. På mange nettsider brukes passende HTML-attributter for å designe lister. Slik kan du for eksempel via <ul type="square"> sørge for at rektangler vises før oppføringene i punktlister.





På samme måte kan du for nummererte lister angi nummereringsmetoden.

<ol type="A">

Men her gjelder det å ikke bruke alt som tilbys. Mer egnet er de tilsvarende CSS-egenskapene. Du bør derfor faktisk bruke disse for å tilpasse listene etter dine ønsker. Det vil bli gitt utdypende informasjon om CSS i løpet av denne serien.