Lektion 01 — Introduktion

Christian Budtz — chbu@dtu.dk

Program i dag

Kursusintro
Hvor står vi? Quiz + snak
Øvelse 0: VS Code op at køre
Gennemgang: HTML
Øvelse 1: Cat Photo App
Øvelse 2: Login-side

Pauser lægges ind undervejs.

Underviserne

Rolf Nordahl — metode, projekt, UML og UX (kursusansvarlig)
Birger Andersen — netværksteknologi
Christian Budtz — fullstack webudvikling

Digitale Systemer & Anvendelse

1. semester — én computer, ét program
1. semester — én computer, flere processer (Python, C#, SQL)
1. semester — flere computere, flere processer (HTML, CSS, JavaScript, servere, databaser)

Nu bliver det kompliceret!

Hybridkursus

1/2 fullstack-web
1/4 metode: projekt, UML og UX
1/4 netværksteknologi
Teori og øvelser.
Gennemgående gruppeprojekt.
- Grupper på 3-4.
- Gruppedannelse i Lektion 2. Et Kig på lektionsplanen

Projektet

Fullstack applikation - Sundhedsteknologisk case
Grupper af 3-4 studerende

Eksempler til inspiration

Medicintracker
Aftalesystem
Blodtryksdagbog
Migræne-/hovedpinedagbog
Patientspørgeskema
Visning af laboratorieresultater

Projektet — tre delafleveringer

D1 — forstudie og klikbar frontend-mockup med URL (uden backend)
D2 — MVP: frontend, backend/API, PostgreSQL, én central brugerhandling
D3 — fungerende system med login, deployment og færdig portefølje

I vælger selv en afgrænset sundhedsteknologisk case.

Der skal indgå alle elementer af fullstack i applikationen. Appen skal omhandle patienter.

Portefølje + website skal være godkendt for at I kan gå til eksamen.

Projektet — Afleveringer

Fast defineret rapportformat
HVORFOR i har gjort som i gjorde - Vi vil se jeres beslutninger
Minimalt med HVAD i har gjort - Det kan vi godt se selv
INGEN AI-slop tak!
Skal Godkendes
Danner basis for eksamen
Rapportformat gennemgås v/Rolf i de næste uger

Eksamen

Individuel mundtlig eksamen baseret på projektet.

Web samt netværk/metode
Alle hjælpemidler, inkl. internet
I medbringer porteføljen og adgang til det kørende website
I står til ansvar for det hele
Eksamenspræstationen afgør resultatet

AI-politik

AI-værktøjer (ChatGPT, Copilot, Cursor, …) er tilladt.

Al kode skal kunne forklares
AI-brug dokumenteres i porteføljen
Til den mundtlige eksamen skal I kunne gennemgå koden linje for linje

Hvis I ikke kan forklare det, ejer I det ikke.

Læringsmål i dag

Efter lektionen skal du kunne:

oprette en HTML-fil i VS Code og åbne den i en browser
forklare HTML-dokumentets grundstruktur
bruge tags, attributter og korrekt nesting
indsætte overskrifter, afsnit, billeder og links
skelne mellem relative og absolutte stier
inspicere HTML i DevTools

Hvor står vi?

Spørgeskema - Quiz

Sprog, Git og IDE.

Quiz!

Gå til /quiz og indtast koden fra tavlen.

Hvor står vi? — programmering, databaser, UML og Git fra 1. og 2. semester.

Pause

Øvelse 0 — VS Code

Lad os prøve det selv!

Frem med VS Code.

Vi gør det sammen nu:

Opret en mappe, fx mit-site
Åbn mappen i VS Code: File → Open Folder
Opret filen index.html
Skriv boilerplaten (næste slide)
Se siden: klik på globus-ikonet (Open in Integrated Browser) øverst i editoren — eller træk filen over i en rigtig browser (det skal vi alligevel, når vi åbner DevTools)

HTML-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>

Når siden vises i browseren, er Øvelse 0 i hus. Hvis du har ekstra tid - så eksperimentér gerne lidt.

Gennemgang — HTML

Web-teknologier

Frontend

HTML (Lektion 1 + 3)
CSS (Lektion 3)
JavaScript (Lektion 5 + 7)

Backend — senere i kurset

JavaScript på serveren (Node.js)
PostgreSQL

Frontend

HTML — sidens indhold og struktur (deklarativt)
CSS — sidens udseende (deklarativt)
JavaScript — sidens adfærd (imperativt)

HTML beskriver hvad indholdet er. Browseren fortolker strukturen.

HTML

HyperText Markup Language

En del af markup-sprogene
Deklarativt sprog
Definerer indhold og struktur
Dynamiske elementer - eks:<a href>, <form action="/somepage">, <button type="submit">,

Et eksempel

<html>
<head>
   <title> DTU Web Programmering
   <title>
</head>
<body>
<h1><b> Lektioner</b></h1>
<h2><i> E26 </i></h2>
<p>Lektion 1: Introduktion og HTML</p>
<p>Lektion 2: Projekt</p>
<p>Lektion 3: HTML 2 + CSS</p>
</body>
</html>

Kan du se syntaks-fejlen?

Hvad er konsekvensen?

Fejlen

title åbnes igen i stedet for at blive lukket:

<title>DTU Web Programmering</title>

Browseren gætter ofte videre — siden ser måske fin ud. Træet bliver alligevel forkert. Det giver ballade senere med CSS, JavaScript og tilgængelighed.

HTML-tags

Åbnings- og lukketag:

<tag>indhold</tag>

Hierarkisk — luk i omvendt rækkefølge:

<html>
  <body>
    Tekst
  </body>
</html>

Indre HTML:

<h1>Noget html</h1>

Attributter

Ekstra information i starttagget:

<img src="katter.jpg" alt="En kat i en kurv">
<p id="intro">Introduktion</p>

Attribut	Bruges til
`src`	placering af en ressource, fx et billede
`alt`	alternativ tekst til billedet
`href`	destinationen for et link
`id`	unik identifikator
`class`	kategori — bruges af CSS senere

Vigtige tags

Overskrifter: <h1>, <h2>, … <h6>

Afsnit — ekstra linje før og efter:

<p>Et afsnit med tekst.</p>

Billede — void element, intet lukketag:

<img src="katter.jpg" alt="En kat i en kurv">

Link:

<a href="https://www.dtu.dk">Besøg DTU</a>

Nesting

Elementer kan ligge inde i hinanden. Luk i den rigtige rækkefølge:

<p>Dette er <strong>vigtigt</strong>.</p>

HTML-kommentarer vises ikke på siden:

<!-- Dette er en kommentar -->

Links og stier

<a href="https://www.dtu.dk">Besøg DTU</a>
<a href="om-os.html">Om os</a>
<a href="#kontakt">Gå til kontakt</a>
<a href="https://www.dtu.dk" target="_blank">DTU i nyt faneblad</a>

<h2 id="kontakt">Kontakt</h2>

Absolut URL: hele adressen, https://…
Relativ sti: noget i projektet, om-os.html eller images/kat.jpg
#id: hop til et element på samme side
target="_blank": åbn i nyt faneblad

Billede som link

Hele billedet bliver klikbart, når <img> ligger inde i <a>:

<a href="https://www.dtu.dk">
  <img src="images/logo.png" alt="DTU-logo">
</a>

Relativ vs. absolut sti virker på samme måde for billeder:

<img src="images/kat.jpg" alt="En kat">
<img src="https://example.com/kat.jpg" alt="En kat">

Lister

<ul>
  <li>Kattefoder</li>
  <li>Garnnøgle</li>
</ul>

<ol>
  <li>Åbn VS Code</li>
  <li>Opret index.html</li>
</ol>

ul = unummereret. ol = nummereret. Hvert punkt er et li.

Semantisk HTML

Brug elementer efter deres betydning, ikke kun efter udseende:

<header>
  <h1>Min side</h1>
</header>
<main>
  <section>
    <h2>Om projektet</h2>
    <p>Projektets beskrivelse.</p>
  </section>
</main>
<footer>Kontakt os</footer>

header, main, section og footer erstatter ikke h1/p — de rammer indholdet ind.

figure, em og strong

<figure>
  <img src="images/kat.jpg" alt="En kat i en kurv">
  <figcaption>Maja i sin yndlingskurv</figcaption>
</figure>

<p>Katte er <em>pattedyr</em> og <strong>rovdyr</strong>.</p>

figure + figcaption: billede med billedtekst
em: eftertryk (typisk kursiv)
strong: stærk betydning (typisk fed)

Document Object Model — DOM

HTML bliver til et træ i browseren.

html
├─ head
│  └─ title
└─ body
   ├─ h1
   └─ p

Elementer kan have et id. Så kan man pege på dem med links (#kontakt) — og senere med JavaScript.

DevTools

Højreklik på siden → Inspicér.

Se DOM-træet
Find et elements attributter
Spot fejl i nesting

Når siden ser rigtig ud, men koden er forkert: kig i DevTools, ikke kun på skærmen.

Quiz!

Gå til /quiz og indtast koden fra tavlen.

Lektion 1–2: HTML — tags, attributter, boilerplate og nesting.

Pause

Øvelser

Man lærer bedst HTML ved at prøve selv!

Detaljerne — trin, tjekliste og ekstra tid — står i øvelsesarket.

Øvelse 1: Cat Photo App

freeCodeCamp, Cat Photo App (42 trin) — styret øvelse.

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

Fokus:

billeder, links og target
lister
section / main / footer
figure / figcaption
em / strong
kommentarer og nesting

Øvelse 2: Login-side

Freestyle i VS Code. En login-side til jeres kommende sundhedsapp.

overskrift og kort intro
et tekstfelt og en knap (find selv ud af det)
link tilbage til en forside
et billede eller logo med alt-tekst
inspicér med DevTools

Formularer gennemgås rigtigt i Lektion 3.