Je eerste HTML-pagina

Elke website die je ooit bezocht, bestaat uit HTML. HTML (HyperText Markup Language) is geen programmeertaal: je geeft er geen opdrachten mee, je beschrijft wat iets is. "Dit is een kop." "Dit is een alinea." "Dit is een link." De browser leest die beschrijving en toont de pagina.

In deze les schrijf je je eerste complete HTML-pagina: een digitaal visitekaartje. Je hebt alleen een teksteditor en een browser nodig.

Wat je nodig hebt

• Een teksteditor voor code. We gebruiken Visual Studio Code (gratis, code.visualstudio.com). Kladblok of TextEdit kan ook, maar die helpen je niet met kleuren en inspringen.
• Een browser: Firefox, Chrome, Edge of Safari.

Maak een map visitekaartje en daarin een bestand index.html. De naam index.html is een afspraak: als je een map opent op een webserver, toont die automatisch dit bestand.

Het skelet van een HTML-pagina

Typ dit over in index.html (overtypen leert meer dan plakken):

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <title>Visitekaartje van Sam de Vries</title>
  </head>
  <body>
    <h1>Sam de Vries</h1>
    <p>Student HBO-ICT in Utrecht.</p>
  </body>
</html>

Sla op en open het bestand in je browser (dubbelklikken, of slepen naar een browservenster). Je ziet een grote kop en een regel tekst. De tekst Visitekaartje van Sam de Vries staat bovenin het tabblad.

Wat betekent elke regel?

Elementen, tags en attributen

   openingstag          sluittag
   ┌────┴────┐          ┌──┴──┐
   <p class="intro">Hallo!</p>
      └──┬──┘ └─┬─┘
     attribuut  waarde
   └────────── element ─────────┘

• Een element is een onderdeel van de pagina, zoals een alinea.
• Het begint met een openingstag <p> en eindigt met een sluittag </p> (met een schuine streep).
• Tussen de tags staat de inhoud.
• Een attribuut geeft extra informatie, altijd in de openingstag: naam="waarde".

Sommige elementen hebben geen inhoud en dus geen sluittag, zoals <meta charset="utf-8"> en straks <img>. Die heten lege elementen (void elements).

Nesten

Elementen mogen binnen andere elementen staan. Je sluit ze in omgekeerde volgorde:

<p>Dit is <strong>heel</strong> belangrijk.</p>      <!-- goed -->
<p>Dit is <strong>heel belangrijk.</p></strong>      <!-- fout -->

Het tweede voorbeeld zie je vaak bij beginners. De browser probeert het te repareren, maar het resultaat is onvoorspelbaar.

<!-- ... --> is commentaar: de browser negeert het. Handig voor notities.

Inspringen

Het maakt de browser niet uit hoe je inspringt of hoeveel witregels je gebruikt; meerdere spaties worden één spatie. Inspringen is voor jou: zo zie je in één oogopslag welk element binnen welk element staat. Spring elk genest element 2 spaties in. VS Code doet dat voor je met Format Document (Shift+Alt+F of Shift+Option+F).

Voorspel: hoe ziet dit eruit in de browser?

<p>Hallo
       wereld,     hoe
  gaat het?</p>

Antwoord: Hallo wereld, hoe gaat het? op één regel. Witruimte en regeleinden in de code worden één spatie. Een nieuwe alinea maak je met een nieuwe <p>.

Uitgewerkt voorbeeld: een visitekaartje

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sam de Vries · visitekaartje</title>
  </head>
  <body>
    <h1>Sam de Vries</h1>
    <p>Student HBO-ICT · webontwikkeling</p>
    <p>
      E-mail: <a href="mailto:sam@example.nl">sam@example.nl</a><br>
      Woonplaats: Utrecht
    </p>
    <p><strong>Op zoek naar:</strong> een stageplek vanaf februari.</p>
  </body>
</html>

Nieuw hierin:

• <meta name="viewport" ...> zorgt dat de pagina op een telefoon niet piepklein wordt getoond. Zet hem er altijd in; in les 14 lees je waarom.
• <a href="mailto:..."> maakt een link die je mailprogramma opent. Links komen in de volgende les uitgebreid aan bod.
• <br> is een regeleinde binnen een alinea. Gebruik het spaarzaam, voor regels die echt bij elkaar horen (zoals een adres).
• <strong> betekent "belangrijk"; de browser toont het vet.

Valideren

Een validator controleert of je HTML klopt. Ga naar validator.w3.org, kies Validate by Direct Input, plak je code en klik Check. Zonder fouten zie je: Document checking completed. No errors or warnings to show.

Een veelvoorkomende melding:

Error: End tag "strong" seen, but there were open elements.

Je hebt tags in de verkeerde volgorde gesloten. De validator noemt het regelnummer.

Typische fouten

Oefeningen

Oefening 1. Wat is in <a href="mailto:sam@example.nl">Mail mij</a> het element, de tag, het attribuut en de inhoud?

Oefening 2. Vind de drie fouten:

<html>
  <head><title>Mijn pagina</head></title>
  <body>
    <p>Welkom op <strong>mijn pagina</p>
  </body>

Oefening 3. Voeg aan je visitekaartje een regel toe met je opleiding en een regel met je hobby's, elk in een eigen alinea.

<p>Opleiding: HBO-ICT, Hogeschool Utrecht</p>
<p>Hobby's: fietsen, koken en bordspellen</p>

Lab: een visitekaartje-pagina

Samenvatting

• HTML beschrijft wat iets is; de browser bepaalt hoe het eruitziet.
• Elk document: <!doctype html>, <html lang>, <head> (met charset, viewport, title) en <body>.
• Een element = openingstag + inhoud + sluittag; attributen staan in de openingstag.
• Sluit geneste elementen in omgekeerde volgorde. Spring in voor jezelf.
• Valideer met validator.w3.org.

Volgende les: koppen, tekst, links en afbeeldingen.