# Lektion 1 — HTML-introduktion

Web-sporets første lektion: kom godt i gang med HTML og dit udviklingsmiljø.

## Forberedelse

Det forventes, at du har forberedt dig til undervisningen — freeCodeCamp *Basic
HTML* til og med *Understanding the HTML Boilerplate* (ca. 1 time).

[Forberedelse til Lektion 1](forberedelse.md)

## Program (4 timer)

| Tid | Blok | Indhold |
|---|---|---|
| 20 min | Kursusintro | Kursets opbygning, spor og delafleveringer. Undervisere. AI-politik (kort) |
| 25 min | Hvor står vi? | Spørgeskema (sprog, Git, IDE — bruges også til gruppedannelse) + kort quiz om programmering, databaser og UML fra 1.–2. semester |
| 15 min | [Øvelse 0](oevelser.md) | VS Code op at køre: mappe, `index.html`, åbn i browser |
| 40 min | Gennemgang | Opsamling på forberedelsen (tags, attributter, `img`, `a`/`href`, void elements, boilerplate) + det der mangler til Cat Photo App: `target`, billede som link, lister, `section`/`main`/`footer`, `figure`/`figcaption`, `em`/`strong`, kommentarer og nesting. Derudover: relative vs. absolutte stier og links til sektioner (`#id`). Browserens DevTools |
| 50 min | [Øvelse 1](oevelser.md) | **Cat Photo App** (freeCodeCamp, 42 trin) — styret øvelse |
| 40 min | [Øvelse 2](oevelser.md) | **Login-side** til jeres kommende sundhedsapp — freestyle i VS Code: find selv ud af tekstfelt og knap, link tilbage til en forside, inspicér med DevTools. (Formularer gennemgås rigtigt i Lektion 3) |

Pauser lægges ind undervejs.

## Slides

[Forelæsningsslides](forelaesning.md?show=slide)

## Øvelser

De tre øvelser står samlet her, med mere uddybning end på slidesne:

[Øvelser til Lektion 1](oevelser.md)

## Efter lektionen kan du

- oprette og redigere en HTML-fil i VS Code og åbne den i en browser
- forklare et HTML-dokuments grundstruktur og skrive korrekt boilerplate
- anvende tags og attributter korrekt, herunder nesting og void elements
- strukturere indhold med overskrifter, afsnit, lister og sektioner
- indsætte billeder med alt-tekst og forklare forskellen på relative og
  absolutte stier
- linke mellem sider og til sektioner på samme side
- inspicere en side med DevTools og finde/rette simple HTML-fejl