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).
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 | 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 og W3C-validator |
| 50 min | Øvelse 1 | Cat Photo App (freeCodeCamp, 42 trin) — styret øvelse |
| 40 min | Øvelse 2 | 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.
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