Lister: ordnede og uordnede
Opprett nummererte lister og punktlister
Lister: ordnede og uordnede er en gratis leksjon i HTML for Kids på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML for Kids, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML for Kids inneholder totalt 4 leksjoner.
Lister: ordnede og uordnede
Velkommen til neste leksjon! I dag skal vi lære å lage lister i HTML. Lister hjelper med å organisere informasjon og gjør den lettere å lese.
Hva er lister?
Lister er en flott måte å samle relaterte elementer på. HTML har to hovedtyper lister:
- Ordnede lister: Elementene er nummererte (1, 2, 3 …).
- Uordnede lister: Elementene vises med punktmerking.
La oss lære å lage begge typene!
Opprette en ordnet liste
En ordnet liste opprettes ved hjelp av <ol>-tagen. Hvert element i listen legges til ved hjelp av <li>-tagen (listeelement).
Eksempel:
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
Opprette en uordnet liste
En uordnet liste opprettes ved hjelp av <ul>-tagen. Hvert element legges til ved hjelp av <li>-tagen, akkurat som i ordnede lister.
Eksempel:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Nestede lister
De kan opprette en liste inni en annen liste. Dette kalles en nestet liste. De kan neste ordnede og uordnede lister i hverandre.
Eksempel:
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Lister med beskrivelser
HTML lar Dem også opprette beskrivelseslister ved hjelp av taggene <dl>, <dt> og <dd>:
<dl>: Definerer listen.<dt>: Definerer begrepet (tittelen).<dd>: Definerer beskrivelsen.
Eksempel:
<dl>
<dt>HTML</dt>
<dd>The language used to create web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>Legge til stil i lister
De kan bruke CSS til å endre utseendet på listene. De kan for eksempel endre typen punktmerking eller tall.
Eksempel:
<style>
ul {
list-style-type: square; /* Changes bullets to squares */
}
ol {
list-style-type: upper-roman; /* Changes numbers to Roman numerals */
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
Prøv selv
La oss opprette en enkel nettside med ordnede og uordnede lister. Her er et eksempel:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>My To-Do List</h1>
<h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Brush my teeth</li>
<li>Have breakfast</li>
</ol>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
Godt jobbet!
Gratulerer! De har lært å opprette ordnede og uordnede lister, nestede lister og beskrivelseslister. Dette er nyttige verktøy for å organisere informasjon på nettsidene Deres. I neste leksjon lærer De hvordan De kan legge til lenker for å koble sammen ulike sider og nettsteder. Gjør Dem klar for mer moro!
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 16
- Leksjoner
- 35
Ofte stilte spørsmål
Er leksjonen «Lister: ordnede og uordnede» gratis?
Ja – hele teksten i «Lister: ordnede og uordnede» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av HTML for Kids-kurset, kan du oppgradere til CoddyKit PRO. Kurset i HTML for Kids inneholder totalt 4 leksjoner.
Hva lærer jeg i «Lister: ordnede og uordnede»?
Opprett nummererte lister og punktlister Du øver på HTML for Kids med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML for Kids?
Ingen tidligere erfaring er nødvendig. HTML for Kids på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Lister: ordnede og uordnede»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML for Kids-leksjonen?
Ja. Alle HTML for Kids-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Overskrifter og avsnitt
- Lister: ordnede og uordnede
- Lenker: Slik kobles nettet sammen
- Bilder: Legg til bilder på siden