# Lektion 3 — HTML II og CSS

Web-sporets anden lektion: formularer og styling. I bruger CSS fra
forberedelsen på jeres egen side.

## Forberedelse

Det forventes, at du har forberedt dig til undervisningen — freeCodeCamp
*HTML Fundamentals* (uden `<script>`), tre *What is CSS*-lectures og *Cafe
Menu* til trin 28 (ca. 1 time).

[Forberedelse til Lektion 3](forberedelse.md)

## Program (4 timer)

| Tid | Blok | Indhold |
|---|---|---|
| 10 min | Gennemgang | HTML Fundamentals: `id` vs `class`, `div`, entiteter kort |
| 35 min | Gennemgang | Opsamling på Cafe Menu: stylesheet, type/class, `width`, `margin: auto`. Padding/box model (til jer der stoppede ved 28). `position: fixed` og enheder kort |
| 15 min | Quiz | HTML Fundamentals (`id`/`class`/`div`) + CSS fra Cafe Menu |
| 30 min | Gennemgang | `<form>`, `<input>`, `<label>`, `<button>` — nyt (ikke i forberedelsen); det, Lektion 1 lovede |
| 10 min | Quiz | Formularer — kort tjek før øvelsen |
| 40 min | [Øvelse 1](oevelser.md) | **Style jeres login-/formularside** i VS Code: eksternt stylesheet, class-selectors, farve, afstand. Ikke mere Cafe Menu |
| 40 min | [Øvelse 2](oevelser.md) | **Gruppearbejde: Mockup til D1** — style forsiden og skitsér 1–2 skærme mere med HTML + CSS. Hjælp rundt i grupperne |

Pauser lægges ind undervejs.

## Slides

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

## Øvelser

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

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

## Efter lektionen kan du

- forklare hvornår du bruger `id`, `class` og `div`
- forklare forskellen på HTML (indhold) og CSS (udseende)
- koble en HTML-side til en separat `styles.css`
- style med type- og class-selectors (`h1`, `.menu`)
- bruge `width`, farve, `margin` (inkl. `auto`) og padding
- bygge en formular med `<form>`, `<label>`, `<input>` og `<button>`
- anvende det på jeres projekts login- eller formularside