Skip to main content

Les 1 – Intro to HTML

Wat ga je leren?​

Je leert wat HTML is en hoe een webpagina is opgebouwd. Na deze les ken je de basisstructuur en kun je zelf tekst op een pagina zetten.

Theorie​

HTML staat voor HyperText Markup Language. Het is de taal die browsers begrijpen om een webpagina te bouwen. Je schrijft HTML met tags — woorden tussen punthaken:

<h1>Dit is een kop</h1>
<p>Dit is een paragraaf.</p>

Elke tag heeft een openingstag (<p>) en een sluitingstag (</p>). De inhoud staat er tussenin.

Een complete HTML-pagina heeft altijd deze structuur:

<!DOCTYPE html>
<html>
  <head>
    <!-- Informatie over de pagina, niet zichtbaar -->
  </head>
  <body>
    <!-- Alles wat je op de pagina ziet -->
  </body>
</html>

Predict​

Hieronder zie je een stukje code. Wat denk je dat er in de browser te zien is?

<b>Hallo!</b>
Klik hier voor het antwoord

De tekst "Hallo!" wordt vetgedrukt weergegeven. De tag <b> staat voor bold (vet).

Probeer het zelf!​

De editor hieronder bevat een complete HTML-pagina. Bekijk de code en de preview aan de rechterkant.

Editor laden...

Investigate​

Experimenteer met de code in de editor:

  • Wat gebeurt er als je <h1> verandert in <h3>?
  • Wat zie je als je de sluitingstag </h1> verwijdert?
  • Wat doet <i>tekst</i>?

Modify​

Opdracht: Voeg een tweede paragraaf toe aan de pagina met jouw naam erin.

Tip

Gebruik de <p> tag. Zet hem binnen <body>, onder de bestaande paragrafen.

Antwoord
<p>Mijn naam is Lisa.</p>

Voeg dit toe tussen de laatste </p> en </body>.

Make​

Opdracht: Bouw een simpele webpagina over jouw huisdier of favoriete dier. Gebruik een <h1> voor de naam van het dier en minimaal twee <p> attributen voor informatie of een leuk weetje.

Tip

Elke tag die je opent, moet je ook weer netjes sluiten (bijvoorbeeld </h1> en </p>).

Antwoord
<h1>Mijn hond Max</h1>
<p>Max is een golden retriever van 3 jaar oud.</p>
<p>Hij houdt heel erg van spelen met een bal buiten in het park.</p>

Er gaat iets mis​

Vergeten sluitingstag

<p>Dit is een paragraaf
<p>Dit is een tweede paragraaf</p>

Als je de sluitingstag </p> vergeet, werkt het soms nog — maar niet altijd. De browser probeert het te repareren, maar het kan onverwachte resultaten geven. Sluit altijd elke tag die je opent.