<!-- oefening 1 -->
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="description" content="Koop hier al uw producten online!">
<meta name="keywords" content="Product 1, Product 2">
<meta name="author" content="PTH">
<title>Webwinkel</title>
<style>
table {
width:100%;
}
h1 {
color: blue;
font-weight: bold;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>Menu</h1>
<p>Maak een keuze:</p>
<table>
<tr>
<td><a href="#">Home</a></td>
<td><a href="klanten.html">Klanten</a></td>
<td><a href="bestellingen.html">Bestellingen</a></td>
</tr>
</table>
<h2>Home</h2>
<p>Druk op de bovenstaande link om weer terug te keren naar deze pagina.</p>
<h2>Klanten</h2>
<p>Druk op de bovenstaande link om naar het overzicht van de klanten te gaan.</p>
<h2>Bestellingen</h2>
<p>Druk op de bovenstaande link om naar het overzicht van de bestellingen te gaan.</p>
</body>
</html>
Download hier het bestand.
<!-- oefening 2 -->
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Klanten</title>
<style>
table {
width:100%;
}
td.opmaak1 {
background-color:yellow;
font-weight: bold;
}
h1 {
color: blue;
font-weight: bold;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>Menu</h1>
<p>Maak een keuze:</p>
<table>
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="#">Klanten</a></td>
<td><a href="bestellingen.html">Bestellingen</a></td>
</tr>
</table>
<br><br>
<table border="1">
<tr>
<td class="opmaak1" width="25%">Klantnummer</td>
<td class="opmaak1" width="25%">Naam</td>
<td class="opmaak1" >Woonplaats</td>
</tr>
<tr>
<td>k1</td>
<td>Floris</td>
<td>Rotterdam</td>
</tr>
<tr>
<td>k2</td>
<td>Gert Jan</td>
<td>Utrecht</td>
</tr>
<tr>
<td>k3</td>
<td>Marinda</td>
<td>Den Haag</td>
</tr>
<tr>
<td>k4</td>
<td>Sjon</td>
<td>Amsterdam</td>
</tr>
</table>
</body>
</html>
Download hier het bestand.
<!-- oefening 3 -->
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Bestellingen</title>
<style>
table {
width: 100%;
}
td.opmaak1 {
background-color: yellow;
font-weight: bold;
}
td.opmaak2 {
font-weight: bold;
text-align:center;
background-color:cyan;
}
h1 {
color: blue;
font-weight: bold;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>Menu</h1>
<p>Maak een keuze:</p>
<table>
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="klanten.html">Klanten</a></td>
<td><a href="#">Bestellingen</a></td>
</tr>
</table>
<br>
<br>
<table border="1">
<tr>
<td class="opmaak2" colspan="3">Overzicht</td>
</tr>
<tr>
<td class="opmaak1" width="25%">Bestelnummer</td>
<td class="opmaak1" width="25%">Datum</td>
<td class="opmaak1">Klantnummer</td>
</tr>
<tr>
<td>b1</td>
<td>16-4-2010</td>
<td>k1</td>
</tr>
<tr>
<td>b2</td>
<td>25-10-2014</td>
<td>k1</td>
</tr>
<tr>
<td>b3</td>
<td>25-6-2011</td>
<td>k3</td>
</tr>
<tr>
<td>b4</td>
<td>17-11-2011</td>
<td>k4</td>
</tr>
</table>
</body>
</html>
Download hier het bestand.