Lister: Ordnet og uordnet
Opret nummererede lister og punktopstillinger
Lister: Ordnet og uordnet er en gratis HTML for Kids-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i HTML for Kids, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML for Kids-kurset indeholder 4 lektioner i alt.
Lister: ordnede og uordnede
Velkommen til den næste lektion! I dag lærer du at oprette lister i HTML. Lister hjælper med at organisere oplysninger og gør dem nemmere at læse.
Hvad er lister?
Lister er en god måde at samle relaterede elementer på. HTML har to hovedtyper af lister:
- Ordnet liste: Elementerne er nummererede (1, 2, 3...).
- Uordnet liste: Elementerne vises med punkttegn.
Lad os lære at oprette begge typer!
Opret en ordnet liste
En ordnet liste oprettes ved hjælp af tagget <ol>. Hvert element i listen tilføjes ved hjælp af tagget <li> (listeelement).
Eksempel:
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
Opret en uordnet liste
En uordnet liste oprettes ved hjælp af tagget <ul>. Hvert element tilføjes ved hjælp af tagget <li>, ligesom i ordnede lister.
Eksempel:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Indlejrede lister
Du kan oprette en liste inde i en anden liste. Det kaldes en indlejret liste. Du kan indlejre ordnede og uordnede lister i hinanden.
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 giver også mulighed for at oprette beskrivelseslister ved hjælp af taggene <dl>, <dt> og <dd>:
<dl>: Definerer listen.<dt>: Definerer begrebet (titlen).<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>Tilføj typografi til lister
Du kan bruge CSS til at ændre udseendet af dine lister. Du kan for eksempel ændre typen af punkttegn eller tal.
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
Lad os oprette en enkel webside 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 gået!
Tillykke! Du har lært at oprette ordnede og uordnede lister, indlejrede lister og beskrivelseslister. Det er gode værktøjer til at organisere oplysninger på dine websider. I næste lektion lærer du, hvordan du tilføjer links, der forbinder forskellige sider og websteder. Gør dig klar til mere sjov!
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 16
- Lektioner
- 35
Ofte stillede spørgsmål
Er lektionen “Lister: Ordnet og uordnet” gratis?
Ja — hele teksten til “Lister: Ordnet og uordnet” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af HTML for Kids-kurset, skal du opgradere til CoddyKit PRO. HTML for Kids-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Lister: Ordnet og uordnet”?
Opret nummererede lister og punktopstillinger Du øver dig i HTML for Kids med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML for Kids?
Der kræves ingen tidligere erfaring. HTML for Kids på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Lister: Ordnet og uordnet”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML for Kids-lektion?
Ja. Alle HTML for Kids-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Overskrifter og afsnit
- Lister: Ordnet og uordnet
- Links: Forbindelser på nettet
- Billeder: Føj billeder til din side