Ga naar hoofdinhoud

Intro tot HTML

Wat ga je leren?​

HTML is de taal waarin een webpagina is opgeschreven. Na deze les ken je de basisstructuur en zet je zelf tekst op een pagina.

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.

Klein extra: <strong>, <em>, <br>, <hr>​

Een paar veelgebruikte mini-tags:

  • <strong> — belangrijke, vetgedrukte tekst. Ziet eruit als <b>, maar vertelt screenreaders en zoekmachines er ook bij dat het belangrijk is.
  • <em> — benadrukte, cursieve tekst. Ziet eruit als <i>, met dezelfde extra betekenis: dit woord krijgt klemtoon.
  • <br> — een regeleinde. Zelfsluitend, dus geen </br>. Gebruik hem spaarzaam; meestal is een nieuwe <p> beter.
  • <hr> — een horizontale lijn tussen twee secties. Ook zelfsluitend.
<p>Dit is <strong>belangrijk</strong> en dit is <em>benadrukt</em>.</p>
<p>Eerste regel<br>Tweede regel</p>
<hr>
<p>Een stuk verderop op de pagina.</p>

Vuistregel: kies <strong> boven <b> en <em> boven <i> zodra je betekenis wilt overbrengen, niet alleen visuele opmaak.

Notities in je code: comments​

Met <!-- ... --> schrijf je een comment — tekst die wel in je code staat, maar niet op de pagina te zien is. Handig om jezelf (of een klasgenoot) iets uit te leggen:

<!-- Dit is een comment. De browser laat dit niet zien. -->
<p>Deze tekst zie je wel.</p>

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:

  • Verander <h1> in <h3>. Hoeveel kleiner wordt de kop?
  • Verwijder de sluitingstag </h1>. Wat doet de browser met de rest van de pagina?
  • Zet ergens <i>tekst</i> neer en kijk wat er met dat woord gebeurt.

Modify​

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

Editor laden...
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>-tags voor informatie of een leuk weetje.

Editor laden...
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.