HTML + CSS (web-grundlag)
Kommunikation og IT C · HTX · C-niveau · Programmering basis
💻 HTML + CSS — webgrundelaget
HTML (HyperText Markup Language) = strukturen.
```html
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<title>Min Side</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Min hjemmeside</h1>
<nav><a href="/">Hjem</a> <a href="/om">Om</a></nav>
</header>
<main>
<article>
<h2>Artikel-overskrift</h2>
<p>Brødtekst her.</p>
<img src="billede.jpg" alt="Beskrivende tekst">
</article>
</main>
<footer>© 2025 Mit Navn</footer>
</body>
</html>
```
CSS (Cascading Style Sheets) = udseendet.
```css
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f5f5f5;
}
h1 {
color: #333333;
font-size: 2rem;
}
.kort {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
.kort { padding: 10px; }
}
```
Læringsmål
- Lave en korrekt struktureret HTML-side med semantiske elementer
- Designe med CSS: farver, typografi, boksmodel
- Gøre en side responsiv med mediaqueries
- Validere HTML/CSS med W3C-validatoren
Sådan kan du arbejde med emnet
- Lav en simpel HTML-side med en overskrift, et billede og en liste
- Forklar forskellen mellem HTML og CSS, og hvad hver af dem bruges til
- Tilføj CSS, der ændrer farve, skrifttype og baggrund på din HTML-side
Træningsforslag
- Byg din personlige hjemmeside med HTML og CSS
- Genskab et simpelt design fra en kendt hjemmeside
- Brug Chrome DevTools til at inspicere og rette CSS
Øv dette emne med AI — quizzer, forklaringer og feedback tilpasset dit niveau.
Prøv Fagportalen gratis