<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <!-- Dit zijn wat gegevens voor je computer.
    Helemaal bovenaan deze pagina staat dat dit een XHTML pagina is. -->
  <title>Voorbeeld Tim</title> <!-- De naam (titel) van de pagina. -->
  <meta name="AUTHOR" content="Adriaan" /> <!-- Wie hem gemaakt heeft. -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Welke 'computer taal' gebruikt wordt (hier utf8). -->
</head>
<body>
  <!-- Hier begint de pagina. -->
  <h1>Voorbeeld HTML voor Tim</h1> <!-- Het onderwerp bovenaan de pagina. -->
  <img src="tim.png" alt="" width="600" height="600" usemap="#standaard" />
  <!-- De afbeelding krijgt de volgende 'opties' mee:
    <img                Dit betekent dat je een afbeelding gaat plaatsen.
    src="tim.png"       De gevonden kan worden in het bestand tim.png.
    width="600"         De afbeelding is 600 pixels breed.
    height="600"        De afbeelding is 600 pixels hoog.
    usemap="#standaard" Er zitten links in deze afbeelding. Die zijn opgeslagen in "#standaard". -->
  <map name="standaard">
  <!-- Dit element bevat de links voor de afbeelding:
    <map                Dit betekent dat je de links voor een afbeelding gaat plaatsen.
    name="standaard"    De naam waarnaar afbeeldingen moeten verwijzen is "standaard". -->
    <area shape="rect" coords="358,284,600,600" href="http://google.com?Onder" onclick="alert('Onder'); return false;" />
    <!-- Dit element bevat een link (in dit geval de link voor het blokje 'onder')
      <area             Dit betekent dat je een link gaat plaatsen (letterlijk: je gaat een gebied plaatsen).
      shape="rect"      Het vlak is rechthoekig
      coord="..."       Dit zijn de coördinaten van de recthoek.
        358             De linker bovenhoek, op de horizontale as.
        284             De linker bovenhoek, op de verticale as.
        600             De rechter onderhoek, op de horizontale as.
        600             De rechter onderhoek. op de verticale as.
      href="..."        De link waar deze rechthoek naar verwijst.
      onclick="..."     Dit is het programmatje dat het kleine venstertje geeft als je op een vlak klikt.
        alert('...');   Dit geeft het kleine venstertje.
        return false;   Dit zorgt er voor dat we niet naar Google toe gaan. -->

    <!-- Voor deze twee andere elementen (links) geldt dezelfde uitleg. -->
    <area shape="rect" coords="377,76,568,203" href="http://google.com?Boven" onclick="alert('Boven'); return false;" />
    <area shape="rect" coords="0,0,291,598" href="http://google.com?Links" onclick="alert('Links'); return false;" />
    <!-- Als je in dezelfde map nog een pagina met een plaatje maakt,
      kan je daarnaar verwijzen door bij href="" de naam van de andere pagina in te vullen. -->
  </map>

  <hr /> <!-- Vanaf hier mag je het negeren. -->
  <h2>Het programma</h2>
  <iframe src="index.source.html" width="600" height="600" />
</body>
</html>