Lektion 1 — Øvelser

Man lærer HTML bedst ved at prøve selv. Dette ark samler dagens tre øvelser med den uddybning, der ikke kan være på slidesne.

Hvis du ikke nåede forberedelsen, så start der — eller gør det parallelt med Øvelse 0.

Øvelse 0 — VS Code op at køre

Mål: En HTML-fil på din egen maskine, åbnet i browseren. Det er det udviklingsmiljø, vi bruger resten af kurset.

Sådan gør du

1. Opret en mappe til dagens arbejde, fx mit-site.
2. Åbn mappen i VS Code: File → Open Folder.
3. Opret filen index.html i mappen (File → New File, eller højreklik i filoversigten).
4. Skriv boilerplaten nedenfor i filen og gem.
5. Se siden:

• Hurtigt kig i VS Code: klik på globus-ikonet (Open in Integrated Browser) øverst til højre i editoren.
• I en rigtig browser: træk index.html over i et browservindue, eller dobbeltklik på filen i stifinderen. Det skal du alligevel, når vi senere åbner DevTools.

Boilerplate

<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min første side</title>
  </head>
  <body>
    <h1>Velkommen</h1>
    <p>Dette er min første webside.</p>
  </body>
</html>

Det er den grundstruktur, I så i forberedelsen: DOCTYPE, html, head (metadata, titel i fanen) og body (det synlige indhold).

Øvelsen er i hus, når siden vises i browseren med overskrift og afsnit.

Hvis du har ekstra tid

Eksperimentér i index.html — gem, og se browseren opdatere:

• Skift teksten i <h1> og <p>.
• Tilføj et <h2> og et afsnit mere.
• Tilføj et billede med en ekstern URL, fx:

<img src="https://www.publicdomainpictures.net/pictures/90000/velka/kitties.jpg" alt="To killinger">

Vi vender tilbage til billeder, links og stier i gennemgangen og i Øvelse 2.

Øvelse 1 — Cat Photo App

Mål: Få de HTML-elementer ind under huden, som gennemgangen dækkede, i et styret tempo. freeCodeCamp tjekker hvert trin, så du ved, om koden er rigtig.

Fortsæt i Basic HTML dér, hvor forberedelsen stoppede:

Responsive Web Design → kapitlet HTML → modulet Basic HTML → workshoppen Cat Photo App (42 trin).

Du skal være logget ind (gratis), ellers gemmes fremgangen ikke.

Det du øver

Gennemgangen nåede længere end forberedelsen. Cat Photo App samler det:

• billeder (img, src, alt) og links (a, href)
• target="_blank" — åbn link i nyt faneblad
• billede som link (img nested i a)
• lister: ul / ol og li
• semantisk ramme: main, section, footer
• figure og figcaption
• em og strong
• kommentarer (<!-- -->) og nesting (luk i omvendt rækkefølge)

Læs forklaringen på hvert trin — det er ikke et kapløb om at trykke Check.

Hvis du sidder fast

• Læs opgavens eksempel og den røde fejltekst. Den siger ofte præcis, hvilket tag eller hvilken attribut der mangler.
• Kig i browserens preview til højre: ser siden ud, som trinnet beskriver?
• Spring ikke trin over. Senere trin bygger på den HTML, du allerede har.
• Bed en sidekammerat eller underviseren om at kigge med. Vis koden, ikke bare fejlen.

Øvelsen er i hus, når du er igennem Cat Photo App — eller så langt, du når på tiden. Det, du ikke når, kan du færdiggøre efter lektionen.

Øvelse 2 — Login-side til jeres kommende sundhedsapp

Mål: Anvende det du har lært om HTML fra freeCodeCamp i dit eget projekt. Du skal selv finde ud af tekstfelt og knap. Formularer (<form>, action, method) gennemgås rigtigt i Lektion 3 — i dag er det nok, at siden ser ud som en login-side.

I har endnu ikke valgt projektcase (det sker i Lektion 2). Find på et kort navn til appen, fx Blodtryksdagbog eller Aftalesystem, og skriv en login-side til den. Det er øvelse — ikke den færdige D1-mockup.

Arbejd videre i samme mappe som Øvelse 0.

Det siden skal indeholde

Lav en ny fil login.html med korrekt boilerplate (lang="da", charset, viewport, <title>). På siden skal der være:

1. En overskrift med appens navn, og et kort afsnit der fortæller, at man skal logge ind.
2. Et tekstfelt og en knap. Find selv ud af de to elementer — søg fx efter HTML input og HTML button, eller kig på W3Schools' oversigt over input-typer.
3. Et link tilbage til forsiden (index.html).
4. Et billede eller logo med alt-tekst. Læg en billedfil i projektet og peg på den med en relativ sti (fx logo.png eller images/logo.png) — ikke en https://…-adresse. Så øver du det, gennemgangen sagde om relative vs. absolutte stier.
5. På forsiden index.html: et link hen til login.html, så de to sider hænger sammen.

Du behøver ikke CSS. Siden må gerne se enkel ud.

Tjek med DevTools

Når siden vises i browseren: højreklik → Inspicér. Find dit <input> og din <button> i DOM-træet. Tjek at attributterne er dem, du skrev — og at nesting ser rigtig ud.

Browseren gætter ofte videre, selv om koden er forkert. DevTools viser, hvad træet faktisk er.

Øvelsen er i hus, når login.html opfylder listen ovenfor, de to sider linker til hinanden, og du har kigget siden efter i DevTools.

Hvis du har ekstra tid

Byg videre på den samme side — stadig uden at gøre login "rigtigt":

• Et felt til adgangskode (type="password") ud over brugernavn.
• Gør logoet til et link (nest img i a), som i Cat Photo App.
• En liste over tre ting, appen kan — ul eller ol.
• Semantisk ramme: header, main, footer.
• En HTML-kommentar, der forklarer et valg, du har truffet.
• Juster billedets højde med attributten height (fx height="80"). I Lektion 3 gør vi det med CSS i stedet.

Hvis du er færdig med det: kig på projekteksemplerne fra forelæsningen (medicintracker, aftalesystem, blodtryksdagbog, …) og skitsér, hvad din login-side skulle rumme, hvis I vælger den case.