<!--opdracht 1: maak de opdracht conform de dia. Ga zelf op zoek naar de juiste elementen. --> <!DOCTYPE html> <html lang="nl"> <head> <title>Opdracht 1</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="kop" > <h1>Webpagina</h1> </div> <div id="menu"> <ul> <li> <a class="active" href="#">Opdracht 1</a> </li> <li> <a href="antwoord2.html">Opdracht 2</a> </li> <li> <a href="antwoord3.html">Opdracht 3</a> </li> <li> <a href="antwoord4.html">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 id="voet"> Copyright <script>document.write(new Date().getFullYear())</script> </div> </body> </html>
Download hier het bestand.
<!--opdracht 2: maak de opdracht conform de dia. Ga zelf op zoek naar de juiste elementen. --> <!DOCTYPE html> <html lang="nl"> <head> <title>Opdracht 2</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="kop" > <h1>Webpagina</h1> </div> <div id="menu"> <ul> <li> <a href="antwoord1.html">Opdracht 1</a> </li> <li> <a class="active" href="#">Opdracht 2</a> </li> <li> <a href="antwoord3.html">Opdracht 3</a> </li> <li> <a href="antwoord4.html">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 id="voet"> Copyright <script>document.write(new Date().getFullYear())</script> </div> </body> </html>
Download hier het bestand.
<!--opdracht 3: maak de opdracht conform de dia. Ga zelf op zoek naar de juiste elementen. --> <!DOCTYPE html> <html lang="nl"> <head> <title>Opdracht 3</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="kop" > <h1>Webpagina</h1> </div> <div id="menu"> <ul> <li> <a href="antwoord1.html">Opdracht 1</a> </li> <li> <a href="antwoord2.html">Opdracht 2</a> </li> <li> <a class="active" href="#">Opdracht 3</a> </li> <li> <a href="antwoord4.html">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 id="voet"> Copyright <script>document.write(new Date().getFullYear())</script> </div> </body> </html>
Download hier het bestand.
<!--opdracht 4: maak de opdracht conform de dia. Ga zelf op zoek naar de juiste elementen. --> <!DOCTYPE html> <html lang="nl"> <head> <title>Opdracht 4</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="kop" > <h1>Webpagina</h1> </div> <div id="menu"> <ul> <li> <a href="antwoord1.html">Opdracht 1</a> </li> <li> <a href="antwoord2.html">Opdracht 2</a> </li> <li> <a href="antwoord3.html">Opdracht 3</a> </li> <li> <a class="active" href="#">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 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: 50%;
}
#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: 50%;
}
#voet {
color: white;
text-align: center;
background-color: #666;
}
Download hier het bestand.