<!--opdracht 1: maak de opdracht conform de dia.
Maak van de antwoorden van hoofdstuk 6 één index.html. -->
<!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">
<script type="text/javascript">
function toonVerberg(divID) {
var keuze1 = document.getElementById("a1");
var keuze2 = document.getElementById("a2");
var keuze3 = document.getElementById("a3");
var keuze4 = document.getElementById("a4");
var item = document.getElementById(divID);
if (item.id == "a1") {
keuze1.className = "toon";
keuze2.className = "verberg";
keuze3.className = "verberg";
keuze4.className = "verberg";
}
if (item.id == "a2") {
keuze1.className = "verberg";
keuze2.className = "toon";
keuze3.className = "verberg";
keuze4.className = "verberg";
}
if (item.id == "a3") {
keuze1.className = "verberg";
keuze2.className = "verberg";
keuze3.className = "toon";
keuze4.className = "verberg";
}
if (item.id == "a4") {
keuze1.className = "verberg";
keuze2.className = "verberg";
keuze3.className = "verberg";
keuze4.className = "toon";
}
};
</script>
</head>
<body>
<div id="kop">
<h1>Webpagina</h1>
</div>
<div id="a1" class="toon">
<div id="menu">
<ul>
<li>
<a class="active" href="javascript:toonVerberg('a1');">Opdracht 1</a>
<a href="javascript:toonVerberg('a2');">Opdracht 2</a>
<a href="javascript:toonVerberg('a3');">Opdracht 3</a>
<a href="javascript:toonVerberg('a4');">Opdracht 4</a>
</li>
</ul>
</div>
<div id="inhoud">
<table>
<tr>
<td class="opmaak2" colspan="3">Broeken</td>
</tr>
<tr>
<td class="opmaak3">S</td>
<td class="opmaak3">M</td>
<td class="opmaak3">L</td>
</tr>
<tr>
<td>43</td>
<td>56</td>
<td>88</td>
</tr>
<tr>
<td>23</td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td>12</td>
<td>76</td>
<td>14</td>
</tr>
<tr>
<td>18</td>
<td>34</td>
<td>67</td>
</tr>
<tr>
<td>45</td>
<td>19</td>
<td>43</td>
</tr>
</table>
</div>
</div>
<div id="a2" class="verberg">
<div id="menu">
<ul>
<li>
<a href="javascript:toonVerberg('a1');">Opdracht 1</a>
<a class="active" href="javascript:toonVerberg('a2');">Opdracht 2</a>
<a href="javascript:toonVerberg('a3');">Opdracht 3</a>
<a href="javascript:toonVerberg('a4');">Opdracht 4</a>
</li>
</ul>
</div>
<div id="inhoud">
<table>
<tr>
<td class="opmaak1" colspan="7">Voorraad</td>
</tr>
<tr>
<td class="opmaak2" colspan="3">Broeken</td>
<td class="opmaak2" colspan="2">T-shirts</td>
</tr>
<tr>
<td class="opmaak3">S</td>
<td class="opmaak3">M</td>
<td class="opmaak3">L</td>
<td class="opmaak3">M</td>
<td class="opmaak3">L</td>
</tr>
<tr>
<td>43</td>
<td>56</td>
<td>88</td>
<td>34</td>
<td>53</td>
</tr>
<tr>
<td>23</td>
<td>12</td>
<td>23</td>
<td>44</td>
<td>23</td>
</tr>
<tr>
<td>12</td>
<td>76</td>
<td>14</td>
<td>48</td>
<td>12</td>
</tr>
<tr>
<td>18</td>
<td>34</td>
<td>67</td>
<td>19</td>
<td>21</td>
</tr>
<tr>
<td>45</td>
<td>19</td>
<td>43</td>
<td>11</td>
<td>18</td>
</tr>
</table>
</div>
</div>
<div id="a3" class="verberg">
<div id="menu">
<ul>
<li>
<a href="javascript:toonVerberg('a1');">Opdracht 1</a>
<a href="javascript:toonVerberg('a2');">Opdracht 2</a>
<a class="active" href="javascript:toonVerberg('a3');">Opdracht 3</a>
<a href="javascript:toonVerberg('a4');">Opdracht 4</a>
</li>
</ul>
</div>
<div id="inhoud">
<table border="1" width="100%">
<tr>
<td class="opmaak1" colspan="7">Voorraad</td>
</tr>
<tr>
<td></td>
<td class="opmaak2" colspan="3">Broeken</td>
<td class="opmaak2" colspan="2">T-shirts</td>
</tr>
<tr>
<td></td>
<td class="opmaak3">S</td>
<td class="opmaak3">M</td>
<td class="opmaak3">L</td>
<td class="opmaak3">M</td>
<td class="opmaak3">L</td>
</tr>
<tr>
<td class="opmaak3">Amsterdam</td>
<td>43</td>
<td>56</td>
<td>88</td>
<td>34</td>
<td>53</td>
</tr>
<tr>
<td class="opmaak3">Alkmaar</td>
<td>23</td>
<td>12</td>
<td>23</td>
<td>44</td>
<td>23</td>
</tr>
<tr>
<td class="opmaak3">Haarlem</td>
<td>12</td>
<td>76</td>
<td>14</td>
<td>48</td>
<td>12</td>
</tr>
<tr>
<td class="opmaak3">Rotterdam</td>
<td>18</td>
<td>34</td>
<td>67</td>
<td>19</td>
<td>21</td>
</tr>
<tr>
<td class="opmaak3">Den Haag</td>
<td>45</td>
<td>19</td>
<td>43</td>
<td>11</td>
<td>18</td>
</tr>
</table>
</div>
</div>
<div id="a4" class="verberg">
<div id="menu">
<ul>
<li>
<a href="javascript:toonVerberg('a1');">Opdracht 1</a>
<a href="javascript:toonVerberg('a2');">Opdracht 2</a>
<a href="javascript:toonVerberg('a3');">Opdracht 3</a>
<a class="active" href="javascript:toonVerberg('a4');">Opdracht 4</a>
</li>
</ul>
</div>
<div id="inhoud">
<table border="1" width="100%">
<tr>
<td class="opmaak1" colspan="7">Voorraad</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="opmaak2" colspan="3">Broeken</td>
<td class="opmaak2" colspan="2">T-shirts</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="opmaak3">S</td>
<td class="opmaak3">M</td>
<td class="opmaak3">L</td>
<td class="opmaak3">M</td>
<td class="opmaak3">L</td>
</tr>
<tr>
<td class="opmaak2" rowspan="3">Noord Holland</td>
<td class="opmaak3">Amsterdam</td>
<td>43</td>
<td>56</td>
<td>88</td>
<td>34</td>
<td>53</td>
</tr>
<tr>
<td class="opmaak3">Alkmaar</td>
<td>23</td>
<td>12</td>
<td>23</td>
<td>44</td>
<td>23</td>
</tr>
<tr>
<td class="opmaak3">Haarlem</td>
<td>12</td>
<td>76</td>
<td>14</td>
<td>48</td>
<td>12</td>
</tr>
<tr>
<td class="opmaak2" rowspan="2">Zuid Holland</td>
<td class="opmaak3">Rotterdam</td>
<td>18</td>
<td>34</td>
<td>67</td>
<td>19</td>
<td>21</td>
</tr>
<tr>
<td class="opmaak3">Den Haag</td>
<td>45</td>
<td>19</td>
<td>43</td>
<td>11</td>
<td>18</td>
</tr>
</table>
</div>
</div>
<div id="voet">
Copyright
<script>
document.write(new Date().getFullYear())
</script>
</div>
</body>
</html>
Download hier het bestand.
table {
width: 100%;
}
table, td, tr {
border: 1px solid black;
}
td.opmaak1 {
font-weight: bold;
text-align: center;
background-color: green;
}
td.opmaak2 {
background-color: lightblue;
}
td.opmaak3 {
background-color: lightgrey;
}
h1 {
color: blue;
font-weight: bold;
}
p {
color: green;
}
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#kop {
background-color: #666;
padding: 5px;
text-align: center;
font-size: 35px;
color: white;
}
#menu {
margin: 0;
float: left;
width: 15%;
background-color: #f1f1f1;
height: 100%;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
#inhoud {
float: left;
width: 85%;
background-color: #f1f1f1;
height: 100%;
}
#voet {
color: white;
text-align: center;
background-color: #666;
}
#a1.verberg, #a2.verberg, #a3.verberg, #a4.verberg {
display: none;
}
#a1.toon, #a2.toon, #a3.toon, #a4.toon {
display: block;
height: 50%;
}
Download hier het bestand.