webdevh6.3

view source
print?
01<!--opdracht 1: maak de opdracht conform de dia.
02Ga zelf op zoek naar de juiste elementen. -->
03 
04<!DOCTYPE html>
05<html lang="nl">
06 
07    <head>
08        <title>Opdracht 1</title>
09        <link rel="stylesheet" type="text/css" href="style.css">
10        </head>
11 
12        <body>
13 
14            <div id="kop" >
15 
16                <h1>Webpagina</h1>
17 
18            </div>
19 
20            <div id="menu">
21                <ul>
22                    <li>
23                        <a class="active" href="#">Opdracht 1</a>
24                    </li>
25                    <li>
26                        <a href="antwoord2.html">Opdracht 2</a>
27                    </li>
28                    <li>
29                        <a href="antwoord3.html">Opdracht 3</a>
30                    </li>
31                    <li>
32                        <a href="antwoord4.html">Opdracht 4</a>
33                    </li>
34                </ul>
35            </div>
36 
37            <div id="inhoud">
38 
39                <table>
40                    <tr>
41                        <td class="opmaak2" colspan="3">Broeken</td>
42                    </tr>
43                    <tr>
44                        <td class="opmaak3">S</td>
45                        <td class="opmaak3">M</td>
46                        <td class="opmaak3">L</td>
47                    </tr>
48                    <tr>
49                        <td>43</td>
50                        <td>56</td>
51                        <td>88</td>
52                    </tr>
53                    <tr>
54                        <td>23</td>
55                        <td>12</td>
56                        <td>23</td>
57                    </tr>
58                    <tr>
59                        <td>12</td>
60                        <td>76</td>
61                        <td>14</td>
62                    </tr>
63                    <tr>
64                        <td>18</td>
65                        <td>34</td>
66                        <td>67</td>
67                    </tr>
68                    <tr>
69                        <td>45</td>
70                        <td>19</td>
71                        <td>43</td>
72                    </tr>
73                </table>
74 
75            </div>
76             
77            <div id="voet">
78                Copyright <script>document.write(new Date().getFullYear())</script>
79            </div>
80 
81        </body>
82 
83    </html>

Download hier het bestand.
view source
print?
01<!--opdracht 2: maak de opdracht conform de dia.
02Ga zelf op zoek naar de juiste elementen. -->
03 
04<!DOCTYPE html>
05<html lang="nl">
06 
07    <head>
08        <title>Opdracht 2</title>
09        <link rel="stylesheet" type="text/css" href="style.css">
10        </head>
11 
12        <body>
13 
14            <div id="kop" >
15 
16                <h1>Webpagina</h1>
17 
18            </div>
19 
20            <div id="menu">
21                <ul>
22                    <li>
23                        <a href="antwoord1.html">Opdracht 1</a>
24                    </li>
25                    <li>
26                        <a class="active" href="#">Opdracht 2</a>
27                    </li>
28                    <li>
29                        <a href="antwoord3.html">Opdracht 3</a>
30                    </li>
31                    <li>
32                        <a href="antwoord4.html">Opdracht 4</a>
33                    </li>
34                </ul>
35            </div>
36 
37            <div id="inhoud">
38 
39                <table>
40                    <tr>
41                        <td class="opmaak1" colspan="7">Voorraad</td>
42                    </tr>
43                    <tr>
44                        <td class="opmaak2" colspan="3">Broeken</td>
45                        <td class="opmaak2" colspan="2">T-shirts</td>
46                    </tr>
47                    <tr>
48                        <td class="opmaak3">S</td>
49                        <td class="opmaak3">M</td>
50                        <td class="opmaak3">L</td>
51                        <td class="opmaak3">M</td>
52                        <td class="opmaak3">L</td>
53                    </tr>
54                    <tr>
55                        <td>43</td>
56                        <td>56</td>
57                        <td>88</td>
58                        <td>34</td>
59                        <td>53</td>
60                    </tr>
61                    <tr>
62                        <td>23</td>
63                        <td>12</td>
64                        <td>23</td>
65                        <td>44</td>
66                        <td>23</td>
67                    </tr>
68                    <tr>
69                        <td>12</td>
70                        <td>76</td>
71                        <td>14</td>
72                        <td>48</td>
73                        <td>12</td>
74                    </tr>
75                    <tr>
76                        <td>18</td>
77                        <td>34</td>
78                        <td>67</td>
79                        <td>19</td>
80                        <td>21</td>
81                    </tr>
82                    <tr>
83                        <td>45</td>
84                        <td>19</td>
85                        <td>43</td>
86                        <td>11</td>
87                        <td>18</td>
88                    </tr>
89                </table>
90 
91            </div>
92             
93            <div id="voet">
94                Copyright <script>document.write(new Date().getFullYear())</script>
95            </div>
96 
97        </body>
98 
99    </html>

Download hier het bestand.
view source
print?
001<!--opdracht 3: maak de opdracht conform de dia.
002Ga zelf op zoek naar de juiste elementen. -->
003 
004<!DOCTYPE html>
005<html lang="nl">
006 
007    <head>
008        <title>Opdracht 3</title>
009        <link rel="stylesheet" type="text/css" href="style.css">
010        </head>
011 
012        <body>
013 
014            <div id="kop" >
015 
016                <h1>Webpagina</h1>
017 
018            </div>
019 
020            <div id="menu">
021                <ul>
022                    <li>
023                        <a href="antwoord1.html">Opdracht 1</a>
024                    </li>
025                    <li>
026                        <a href="antwoord2.html">Opdracht 2</a>
027                    </li>
028                    <li>
029                        <a class="active" href="#">Opdracht 3</a>
030                    </li>
031                    <li>
032                        <a href="antwoord4.html">Opdracht 4</a>
033                    </li>
034                </ul>
035            </div>
036 
037            <div id="inhoud">
038 
039                <table border="1" width="100%">
040                    <tr>
041                        <td class="opmaak1" colspan="7">Voorraad</td>
042                    </tr>
043                    <tr>
044                        <td></td>
045                        <td class="opmaak2" colspan="3">Broeken</td>
046                        <td class="opmaak2" colspan="2">T-shirts</td>
047                    </tr>
048                    <tr>
049                        <td></td>
050                        <td class="opmaak3">S</td>
051                        <td class="opmaak3">M</td>
052                        <td class="opmaak3">L</td>
053                        <td class="opmaak3">M</td>
054                        <td class="opmaak3">L</td>
055                    </tr>
056                    <tr>
057                        <td class="opmaak3">Amsterdam</td>
058                        <td>43</td>
059                        <td>56</td>
060                        <td>88</td>
061                        <td>34</td>
062                        <td>53</td>
063                    </tr>
064                    <tr>
065                        <td class="opmaak3">Alkmaar</td>
066                        <td>23</td>
067                        <td>12</td>
068                        <td>23</td>
069                        <td>44</td>
070                        <td>23</td>
071                    </tr>
072                    <tr>
073                        <td class="opmaak3">Haarlem</td>
074                        <td>12</td>
075                        <td>76</td>
076                        <td>14</td>
077                        <td>48</td>
078                        <td>12</td>
079                    </tr>
080                    <tr>
081                        <td class="opmaak3">Rotterdam</td>
082                        <td>18</td>
083                        <td>34</td>
084                        <td>67</td>
085                        <td>19</td>
086                        <td>21</td>
087                    </tr>
088                    <tr>
089                        <td class="opmaak3">Den Haag</td>
090                        <td>45</td>
091                        <td>19</td>
092                        <td>43</td>
093                        <td>11</td>
094                        <td>18</td>
095                    </tr>
096                </table>
097            </div>
098 
099            <div id="voet">
100                Copyright <script>document.write(new Date().getFullYear())</script>
101            </div>
102                 
103 
104        </body>
105 
106    </html>

Download hier het bestand.
view source
print?
001<!--opdracht 4: maak de opdracht conform de dia.
002Ga zelf op zoek naar de juiste elementen. -->
003 
004<!DOCTYPE html>
005<html lang="nl">
006 
007    <head>
008        <title>Opdracht 4</title>
009        <link rel="stylesheet" type="text/css" href="style.css">
010        </head>
011 
012        <body>
013 
014            <div id="kop" >
015 
016                <h1>Webpagina</h1>
017 
018            </div>
019 
020            <div id="menu">
021                <ul>
022                    <li>
023                        <a href="antwoord1.html">Opdracht 1</a>
024                    </li>
025                    <li>
026                        <a href="antwoord2.html">Opdracht 2</a>
027                    </li>
028                    <li>
029                        <a href="antwoord3.html">Opdracht 3</a>
030                    </li>
031                    <li>
032                        <a class="active" href="#">Opdracht 4</a>
033                    </li>
034                </ul>
035            </div>
036 
037            <div id="inhoud">
038 
039                <table border="1" width="100%">
040                    <tr>
041                        <td class="opmaak1" colspan="7">Voorraad</td>
042                    </tr>
043                    <tr>
044                        <td></td>
045                        <td></td>
046                        <td class="opmaak2" colspan="3">Broeken</td>
047                        <td class="opmaak2" colspan="2">T-shirts</td>
048                    </tr>
049                    <tr>
050                        <td></td>
051                        <td></td>
052                        <td class="opmaak3">S</td>
053                        <td class="opmaak3">M</td>
054                        <td class="opmaak3">L</td>
055                        <td class="opmaak3">M</td>
056                        <td class="opmaak3">L</td>
057                    </tr>
058                    <tr>
059                        <td class="opmaak2" rowspan="3">Noord Holland</td>
060                        <td class="opmaak3">Amsterdam</td>
061                        <td>43</td>
062                        <td>56</td>
063                        <td>88</td>
064                        <td>34</td>
065                        <td>53</td>
066                    </tr>
067                    <tr>
068                        <td class="opmaak3">Alkmaar</td>
069                        <td>23</td>
070                        <td>12</td>
071                        <td>23</td>
072                        <td>44</td>
073                        <td>23</td>
074                    </tr>
075                    <tr>
076                        <td class="opmaak3">Haarlem</td>
077                        <td>12</td>
078                        <td>76</td>
079                        <td>14</td>
080                        <td>48</td>
081                        <td>12</td>
082                    </tr>
083                    <tr>
084                        <td class="opmaak2" rowspan="2">Zuid Holland</td>
085                        <td class="opmaak3">Rotterdam</td>
086                        <td>18</td>
087                        <td>34</td>
088                        <td>67</td>
089                        <td>19</td>
090                        <td>21</td>
091                    </tr>
092                    <tr>
093                        <td class="opmaak3">Den Haag</td>
094                        <td>45</td>
095                        <td>19</td>
096                        <td>43</td>
097                        <td>11</td>
098                        <td>18</td>
099                    </tr>
100                </table>
101            </div>
102                 
103            <div id="voet">
104                Copyright <script>document.write(new Date().getFullYear())</script>
105            </div>
106 
107        </body>
108 
109    </html>

Download hier het bestand.
view source
print?
01table {
02    width: 100%;
03}
04 
05table, td, tr {
06    border: 1px solid black;
07}
08 
09td.opmaak1 {
10    font-weight: bold;
11    text-align: center;
12    background-color: green;
13}
14 
15td.opmaak2 {
16    background-color: lightblue;
17}
18 
19td.opmaak3 {
20    background-color: lightgrey;
21}
22 
23h1 {
24    color: blue;
25    font-weight: bold;
26}
27 
28p {
29    color: green;
30}
31 
32* {
33  margin: 0px;
34  padding: 0px;
35}
36 
37html, body {
38  height: 100%;
39}
40 
41#kop {
42  background-color: #666;
43  padding: 5px;
44  text-align: center;
45  font-size: 35px;
46  color: white;
47}
48 
49#menu {
50  margin: 0;
51  float: left;
52  width: 15%;
53  background-color: #f1f1f1;
54  height: 50%;
55}
56 
57#menu ul {
58  margin: 0;
59  padding: 0;
60  list-style-type: none;
61}
62 
63li a {
64  display: block;
65  color: #000;
66  padding: 8px 16px;
67  text-decoration: none;
68}
69 
70li a.active {
71  background-color: #4CAF50;
72  color: white;
73}
74 
75li a:hover:not(.active) {
76  background-color: #555;
77  color: white;
78}
79 
80#inhoud {
81  float: left;
82  width: 85%;
83  background-color: #f1f1f1;
84  height: 50%;
85}
86 
87#voet {
88  color: white;
89  text-align: center;
90  background-color: #666;
91}

Download hier het bestand.