Web (HTML, CSS basis)

Informationsteknologi C · HHX · C-niveau · Programmering (intro)

💻 Web — HTML og CSS basis

HTML og CSS er de to grundlæggende sprog, alle hjemmesider er bygget af.

HTML — strukturen

HTML (HyperText Markup Language) beskriver indholdet og opbygningen af en side — overskrifter, tekst, billeder, links osv.

```html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Velkommen</h1>

<p>Dette er min første hjemmeside.</p>

<a href="https://dr.dk">Besøg DR</a>

</body>

</html>

```

Almindelige HTML-tags

<h1> til <h6>: overskrifter (størst til mindst)
<p>: afsnit/tekst
<a>: link
<img>: billede
<ul>/<li>: punktlister
<div>: opdeling/sektion af siden

CSS — udseendet

CSS (Cascading Style Sheets) styrer, hvordan HTML-indholdet ser ud — farver, skrifttyper, afstande og layout.

```css

h1 {

color: navy;

font-size: 32px;

text-align: center;

}

p {

font-family: Arial, sans-serif;

line-height: 1.5;

}

```

Hvordan de hænger sammen

HTML = hvad der vises (struktur og indhold)
CSS = hvordan det vises (udseende og layout)
(JavaScript, som I også har stiftet bekendtskab med, styrer adfærd — hvad der sker, når man klikker, scroller osv.)

Responsivt design

Moderne hjemmesider skal se godt ud på både computer, tablet og mobil — det opnås med CSS-teknikker som media queries og fleksible layouts (flexbox, grid).

Læringsmål

Opbygge en simpel HTML-side med overskrifter, tekst, links og billeder
Style en HTML-side med CSS (farver, skrifttype, layout)
Forklare forskellen på HTML, CSS og JavaScripts roller
Forstå grundtanken bag responsivt webdesign

Sådan kan du arbejde med emnet

Lav en simpel HTML-side med en overskrift, et billede og et afsnit tekst
Forklar forskellen mellem HTML og CSS, og hvad hver af dem bruges til
Tilføj CSS til din HTML-side, der ændrer farve og skriftstørrelse på overskriften

Træningsforslag

Byg en simpel personlig hjemmeside med HTML og CSS (brug fx W3Schools "Try it Yourself")
Undersøg en hjemmesides opbygning med "Vis sidekilde" eller browserens udviklerværktøjer
Eksperimentér med at ændre farver og layout på en side, du selv har lavet

Øv dette emne med AI — quizzer, forklaringer og feedback tilpasset dit niveau.

Prøv Fagportalen gratis