HTML-lister
Skrevet av: GratisGuide.net
Det å dele opp teksten på en side i punktlister gjør det enklere å lese teksten. Kontinuerlige blokker med tekst gjør at stoffet virker uoverkommelig og sannsynligheten for at teksten leses er liten.
I HTML finnes det egne merker for å lage punktlister, som vi skal vise hvordan du lager. I hovedsak har HTML tre typer lister; sorterte, usorterte og definisjons-lister. Vi skal se på alle tre og hvordan de settes opp.
Lister kan nøstes, det vil si at du kan lage en liste inne i en annen. Det vi skal lage her er tre lister som er satt sammen. Resultatet, som er avhengig av nettleseren listene vises i - hvordan de bygges opp, ser slik ut:
Denne listen er satt sammen av alle de tre listetypene. Først skal vi se på de hver for seg. Vi begynner med en definisjonsliste. Dette er en listetype der en sette opp tekst uten bruk av grafiske eller tekst-punkter, så som prikker og tall.
En definisjonsliste består av merkene <DL> (definition list - definisjonsliste), <DT> (definition term - definisjonsbegrep) og <DD> (definition description - definisjonsbeskrivelse). La oss lage en slik liste som forklarer noen begrep:
<DL>
<DT>HTML
<DD>Et markeringsspråk for hypertekst
<DT>XML
<DD>Et utvidet generelt markeringsspråk
<DT>XHTML
<DD>Et utvidet markeringsspråk for hypertekst
</DL>
Vi har startet listen vår med merket <DL>. Deretter fortsetter vi med et begrep vi skal definere. Vi bruker merket <DT> og følger med begrepet. Så følger vi på med merket <DD> og definisjonen vår. Vi gjentar dette to ganger før vi avslutter listen. Merk det at merket <DL> må avsluttes (</DL>), mens det er valgfritt om du vil avslutte merkene <DT> og <DD>.
Ganske enkelt å lage en slik liste, alså. La oss fortsette med å lage en usortert liste; disse vises som regel med en svart sirkel, men det er opptil nettleseren å bestemme hvordan listen skal vises. (Du kan alltids bruke CSS for å påvirke listevisningen.)
<UL>
<LI>Kjøkkenrull
<LI>Håndsepe
<LI>Oppvaskkost
<LI>Søppelposer
<LI>Snickers
</UL>
Handlelisten vår over består av fem punkter. Disse fem punktene er lagt inn i merket <UL> (unordered list - usortert liste). Listepunktene våre lager vi med merket <LI> (list item - listepunkt).
Om vi vil ha listen over i sortert rekkefølge, nummerert fra 1 til 5, kan vi i stedet benytte merket <OL> (ordered list - sortert liste). Vi endrer da simpelthen merket <UL> til <OL> siden resten av listen er den samme.
<OL>
<LI>Kjøkkenrull
<LI>Håndsepe
<LI>Oppvaskkost
<LI>Søppelposer
<LI>Snickers
</OL>
Her vil listen starte med "1" for "Kjøkkenrull" og slutte med "5" for "Snickers". Hvordan nummereringen skjer avhenger av nettleseren som viser listen. Det er fullt mulig å bruke CSS (stilark) for å påvirke listevisningen.
Nå som alle tre listetypene er forklart, skal vi sette de sammen til eksempelet vi hadde innledningsvis.
Den listen er en definisjonsliste som inneholder en sortert og en usortert liste. Vi setter derfor våre sorterte og usorterte lister inn som definisjonsbeskrivelse (med merket <DD>).
Nedenfor ser du hele HTML-koden ferdig og korrekt oppstilt. Det er bare å klippe-og-lime og jobbe videre med den :)
<DL>
<DT>Ingredienser:</DT>
<DD>
<UL>
<LI>100 gr. mel</LI>
<LI>10 gr. sukker</LI>
<LI>1 kopp vann</LI>
<LI>2 egg</LI>
<LI>Salt, pepper</LI>
</UL>
</DD>
<DT>Fremgangsmåte:</DT>
<DD>
<OL>
<LI>Bland tørre ingredienser godt</LI>
<LI>Bland inn væske</LI>
<LI>Rør i ti minutter</LI>
<LI>Stek i en time på 150 grader.</LI>
</OL>
</DD>
<DT>Tips:</DT>
<DD>Du kan gjerne prøve med rosiner i blandingen</DD>
</DL>
Opphavsrett
Ønsker du å gjengi denne artikkelen eller noe fra den må du gjerne gjøre det, men ikke glem kildereferanse. For å lenke til denne artikkelen kan du bruke URL-en http://www.gratisguide.net/artikler/html/html-lister.html.
Tilbake til Artikler / HTML og CSS
