<!-- 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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="kop">
<h1>Webwinkel</h1>
</div>
<div id="menu">
<ul>
<li>
<a class="active" href="#">Home</a>
</li>
<li>
<a href="klanten.html">Klanten</a>
</li>
<li>
<a href="bestellingen.html">Bestellingen</a>
</li>
</ul>
</div>
<div id="inhoud">
<h2>Home</h2>
<p>Druk op de linker link om weer terug te keren naar deze pagina.</p>
<h2>Klanten</h2>
<p>Druk op de linker link om naar het overzicht van de klanten te gaan.</p>
<h2>Bestellingen</h2>
<p>Druk op de linker link om naar het overzicht van de bestellingen te gaan.</p>
</div>
<div id="voet">
Copyright 2019
</div>
</body>
</html>
Download hier het bestand.
<!-- oefening 2 --> <!DOCTYPE html> <html lang="nl"> <head> <title>Klanten</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="kop"> <h1>Webwinkel</h1> </div> <div id="menu"> <ul> <li> <a href="index.html">Home</a> </li> <li> <a class="active" href="#">Klanten</a> </li> <li> <a href="bestellingen.html">Bestellingen</a> </li> </ul> </div> <div id="inhoud"> <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> </div> <div id="voet"> Copyright 2019 </div> </body> </html>
Download hier het bestand.
<!-- oefening 3 --> <!DOCTYPE html> <html lang="nl"> <head> <title>Bestellingen</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="kop"> <h1>Webwinkel</h1> </div> <div id="menu"> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="klanten.html">Klanten</a> </li> <li> <a class="active" href="#">Bestellingen</a> </li> </ul> </div> <div id="inhoud"> <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> </div> <div id="voet"> Copyright 2019 </div> </body> </html>
Download hier het bestand.
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;
}
* {
box-sizing: border-box;
}
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#kop {
background-color: #666;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
}
#menu {
float: left;
background: #ccc;
padding: 20px;
width: 20%;
height: 50%;
}
#menu ul {
list-style-type: none;
padding: 0;
}
#inhoud {
float: left;
padding: 20px;
background-color: #f1f1f1;
width: 80%;
height: 50%;
}
#voet {
color: white;
background-color: #666;
text-align: center;
}
Download hier het bestand.