Kodning for unge og voksne

Lær at kode med html

Kodning for unge og voksne. Lær html kodning og øv dig her på siden. Teknologiforståelse i folkeskolen

Teknologiforståelse

Lær kodning i folkeskolen og på gymnasiet

Lær html kodning for begyndere

HTML Grundforløb (Begynder)

Velkommen

Sådan bruger du widgetten: vælg en fane, læs trin, kopier kode, og se resultatet. Print/PDF gemmer kun denne widget.

Hvad er HTML, CSS og JavaScript?

HTML = indhold (overskrifter, tekst, billeder, links).

CSS = udseende (skrifttype, farver, størrelser, afstand).

JavaScript = reaktion (faner, kopierknap, vis/skjul).

Før / Before

<h1>Min side</h1>
<p>Dette er min tekst.</p>

Efter / After

<h1 class="big-blue">Min side</h1>
<p class="nice-text">Dette er min tekst.</p>
/* CSS (example) */
.big-blue{ font-size: 2rem; color:#274060; }
.nice-text{ font-size: 1.125rem; }

Din første webside

Facit (kode)

<h1>Hej verden!</h1>
<p>Jeg lærer HTML.</p>

Linjeskift & kommentarer

<p>Afsnit 1</p>
<p>Afsnit 2</p>
<!-- Kommentarer hjælper dig selv -->

Lister

<ul>
  <li>Mælk</li>
  <li>Brød</li>
  <li>Ost</li>
</ul>

Links

<a href="https://example.com">Besøg siden</a>

Billeder fra URL

Facit (kode)

<img src="https://example.com/photo.jpg" alt="Describe the image">

Video & indlejring

Facit (kode)

<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video" frameborder="0" allowfullscreen></iframe>

Typografi & farver

Eksempel

#html-begynder{
  --wb-font: "Roboto", Arial, system-ui, sans-serif;
  --wb-size: 1.25rem;
  --wb-bg: #E6F0FA;
  --wb-primary: #2F6FED;
}

Bokse og knapper

<div class="my-card">
  <h3>Velkommen</h3>
  <p>En pæn boks med lidt luft.</p>
  <button class="my-btn">Klik mig</button>
</div>
/* CSS */
.my-card{ background:#fff; border:1px solid #e5e7eb; padding:16px; border-radius:12px; }
.my-btn{ background:#2F6FED; color:#fff; padding:10px 14px; border-radius:12px; }

Velkommen

En pæn boks med lidt luft.

Tabeller

<table>
  <caption>Skoleskema</caption>
  <thead><tr><th scope="col">Dag</th><th scope="col">Fag</th></tr></thead>
  <tbody><tr><th scope="row">Mandag</th><td>Dansk</td></tr></tbody>
</table>

Fejlfinding (begynder)

  • Luk altid tags (fx </p>).
  • Brug meningsfulde linktekster.
  • Alt-tekst på billeder.
  • Hold styling i CSS (ikke spredt inline – undtagen i små øvelser).

Oversættelse (DA ↔ EN)

Al undervisningstekst skifter her. Kode er altid på engelsk.

Lær html kodning for fortsættere

HTML Fortsætterforløb

Genopfriskning & mål

Du kan nu: grundlæggende HTML, billeder/video, lister/links, farver/typografi, bokse/knapper, tabeller. Her bygger vi videre med semantik, formularer, metadata, faner, sprogskift og lidt JS.

Semantisk struktur & tilgængelighed

<header>...</header>
<main>
  <article>
    <h1>Titel</h1>
    <section><h2>Afsnit</h2><p>...</p></section>
  </article>
</main>
<footer>...</footer>

Metadata & head

<!doctype html>
<html lang="da">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Min side</title>
  <meta name="description" content="Kort beskrivelse">
</head>

Formularer: tekst & labels

<form>
  <label for="name">Navn</label>
  <input id="name" name="name" required>

  <label for="msg">Besked</label>
  <textarea id="msg" name="msg"></textarea>

  <button type="submit">Send</button>
</form>

Formularer: radio/checkbox/select

<fieldset>
  <legend>Vælg farve</legend>
  <label><input type="radio" name="color" value="blue"> Blå</label>
  <label><input type="radio" name="color" value="red"> Rød</label>
</fieldset>

<label><input type="checkbox" name="terms"> Jeg accepterer</label>

<label for="pet">Kæledyr</label>
<select id="pet" name="pet">
  <option>Hund</option>
  <option>Kat</option>
</select>

Faner i praksis

<div role="tablist" class="tabs">
  <button role="tab" aria-controls="sec-1" class="tab is-active">Fane 1</button>
  <button role="tab" aria-controls="sec-2" class="tab">Fane 2</button>
</div>
<section id="sec-1" role="tabpanel" class="panel is-active">Indhold 1</section>
<section id="sec-2" role="tabpanel" class="panel">Indhold 2</section>

Husk tastatur: Venstre/Højre, Home/End.

Sprogskift i hele widgetten

Brug data-lang="da"/data-lang="en" på alle brødtekster. Knapper herunder skifter alt.

Kopier/Print/PDF

Kopiknapper ved kodeblokke. Print/PDF skjuler resten af siden og viser kun denne widget.

Unikke klasser & globalt design

Brug et præfiks (fx wf-) så dine klasser ikke rammer temaet. “Globalt design” her betyder: stilreglerne gælder **kun** inden for widget-wrapperen.

Lille interaktivitet (JS)

<button id="toggle">Vis/skjul</button>
<div id="box">Hej!</div>
<script>
document.getElementById('toggle').addEventListener('click', ()=>{
  document.getElementById('box').classList.toggle('hidden');
});
</script>

Fejlfinding (fortsætter)

  • Overskrifts-hierarki: kun én <h1>.
  • Alle inputs har label + matchende for/id.
  • Faner: aria-controls matcher panel id.
  • Print: kontrollér at kun widgetten vises.

AI-forbedringer af kode

Brug AI til at forklare, rydde op, navngive klasser mere tydeligt og foreslå tilgængelighedsforbedringer. Vurder altid output kritisk.

Oversættelse (DA ↔ EN)

Klik for at skifte brødtekst. Kodesproget er altid engelsk.

Lær html kodning -lidt ekstra

Udvidelser & Playground

Tema & skrifttyper

Demo

Denne boks følger dine valg. Prøv at ændre font, størrelse og farver.

Skift billede & hover-effekt

Hover over billedet for at se effekt (lysning/skalering).

Demo
<img src="https://example.com/photo.jpg" alt="..." class="hover-bright">

Bokse & faner

<div class="card">
  <h3>Titel</h3>
  <p>Indhold</p>
</div>
<div class="tabs" role="tablist">
  <button role="tab" aria-controls="p-a" class="tab is-active">A</button>
  <button role="tab" aria-controls="p-b" class="tab">B</button>
</div>
<section id="p-a" role="tabpanel" class="panel is-active">Indhold A</section>
<section id="p-b" role="tabpanel" class="panel">Indhold B</section>

Oversættelse via fane

Dette afsnit demonstrerer, at sprogskift kan ligge på en separat fane.

Lær html kodning mens du prøver

Lær HTML trin for trin (kun denne widget)

Helt kort og simpelt

HTML er byggeklodserne: overskrifter, tekst, billeder og knapper.

CSS bestemmer udseende: skrifttype, størrelse, farver, mellemrum, kanter.

JavaScript gør det interaktivt: faner, knapper, kopiér, print m.m.

Før/efter: Hvad gør HTML og CSS?

Før / Before

<h1>Min side</h1>
<p>Dette er min tekst.</p>

Efter / After (med CSS)

<h1 class="big-blue">Min side</h1>
<p class="nice-text">Dette er min tekst.</p>
/* CSS (example) */
.big-blue{ font-size: 2rem; color: #274060; }
.nice-text{ font-size: 1.125rem; }

Pointen: HTML skaber indholdet. CSS gør det pænt.

Skriv din første HTML

Kopier “Før”-koden, eller skriv selv. Klik Vis resultat. Klik derefter Tjek svar.

Før / Before

<h1>Hej verden!</h1>
<p>Jeg lærer HTML.</p>

Efter / After (med lidt stil)

<h1 style="color:#274060">Hej verden!</h1>
<p style="font-size:1.125rem">Jeg lærer HTML.</p>

Dit resultat (visning)

Facit (kode)

<h1>Hej verden!</h1>
<p>Jeg lærer HTML.</p>

Skift skrifttype og tekststørrelse

Udfyld og klik Anvend. Det ændrer KUN denne widget.

Før / Before

<p>Standard font og størrelse.</p>

Efter / After

#learn-board{
  --lb-font-family: "Inter", system-ui, Arial, sans-serif;
  --lb-font-size-base: 1.25rem;
  --lb-line-height: 1.65;
}

Skift farver (med eksempler)

Vælg farver og klik Anvend farver. Eksempler: #E6F0FA, #F7E6EC, #CDE7DF, #274060, #2F6FED, #111111.

Før / Before

#learn-board{
  --lb-bg: #E6F0FA;
  --lb-surface: #FFFFFF;
  --lb-text: #111111;
  --lb-primary: #2F6FED;
  --lb-accent: #F6C945;
}

Efter / After (andre farver)

#learn-board{
  --lb-bg: #FFF7CC;
  --lb-surface: #FFFFFF;
  --lb-text: #1A1A1A;
  --lb-primary: #274060;
  --lb-accent: #6E2B3A;
}

Lav en boks (card) og en knap

Før / Before

<div>Indhold i en almindelig div</div>

Efter / After

<div class="my-card">
  <h3>En pæn boks</h3>
  <p>Nu med baggrund, kant og luft.</p>
  <button class="my-btn">Klik mig</button>
</div>
/* CSS (example) */
.my-card{ background:#fff; border:1px solid #e5e7eb; padding:16px; border-radius:12px; }
.my-btn{ background:#2F6FED; color:#fff; padding:10px 14px; border-radius:12px; }

Faner (tabs) – sådan bygger du dem

Skabelon du kan kopiere

<!-- TAB BUTTONS -->
<div class="tabs" role="tablist">
  <button class="tab is-active" role="tab" aria-controls="p-9">Efter 9. klassetrin</button>
  <button class="tab" role="tab" aria-controls="p-10">Efter 10. klassetrin</button>
</div>

<!-- PANEL 1 -->
<section id="p-9" class="panel is-active" role="tabpanel" aria-labelledby="tab-9">
  <h2>Efter 9. klassetrin</h2>
  <div class="block">
    <div class="head">
      <h3 style="margin:0;">Mundtlig kommunikation</h3>
      <span class="pill">Kompetencemål: Eleven kan deltage i længere...</span>
    </div>
    <div class="pair">
      <div class="phase">Lytning – Fase 1–3</div>
      <div class="cell"><div class="label">Færdighed</div>Eleven kan ...</div>
      <div class="cell"><div class="label">Viden</div>Eleven har viden ...</div>
    </div>
  </div>
</section>

Sprogskift i hele widgetten

Som udgangspunkt er al tekst på dansk (kode er altid engelsk). Skift sprog i fanen Oversættelse.

Kopiér / Print / Gem som PDF (kun denne widget)

  • Kopiér: Knap ved kodeblokke kopierer koden.
  • Print/PDF: Kun widgetten vises ved udskrivning. Vælg “Gem som PDF”.

Fejlfinding · tjekliste

  • 1) Luk HTML-tags korrekt.
  • 2) Samme id/klasse i HTML/CSS/JS.
  • 3) Hold design i CSS (ikke spredt inline).
  • 4) Test på mobil. Tjek kontrast.

Oversættelse / Translation

Udgangspunkt: Dansk i al undervisningstekst. Kode (HTML/CSS/JS) er altid på engelsk.

Dit valg huskes.

Billede & video fra URL

Billede: brug <img src="..." alt="...">. alt beskriver billedet (til skærmlæsere).
Video (MP4): brug <video controls><source src="..." type="video/mp4"></video>.
YouTube: brug et <iframe> med https://www.youtube.com/embed/VIDEO_ID.

Øvelse: Indsæt et billede (URL)

Dit resultat (visning)

Facit (kode)

<img src="https://example.com/photo.jpg" alt="Beskriv billedet her">

Øvelse: Indsæt video (MP4 eller YouTube)

Dit resultat (visning)

Facit (kode)

<!-- vælg MP4 eller YouTube og klik "Vis resultat" -->

Tip: Brug altid https://. Indsæt kun indhold, du har ret til at bruge.

“

Klog læring!

Børn og læring

Print PDF eBook