001 | <!--opdracht 1: maak de opdracht conform de dia. |
002 | Maak van de antwoorden van hoofdstuk 6 één index.html. --> |
003 |
004 | <!DOCTYPE html> |
005 | <html lang="nl"> |
006 |
007 | <head> |
008 | <meta name="description" content="Koop hier al uw producten online!"> |
009 | <meta name="keywords" content="Product 1, Product 2"> |
010 | <meta name="author" content="PTH"> |
011 | <title>Webwinkel</title> |
012 | <link rel="stylesheet" type="text/css" href="style.css"> |
013 |
014 | <script type="text/javascript"> |
015 | function toonVerberg(divID) { |
016 | var keuze1 = document.getElementById("a1"); |
017 | var keuze2 = document.getElementById("a2"); |
018 | var keuze3 = document.getElementById("a3"); |
019 | var keuze4 = document.getElementById("a4"); |
020 |
021 | var item = document.getElementById(divID); |
022 |
023 | if (item.id == "a1") { |
024 | keuze1.className = "toon"; |
025 | keuze2.className = "verberg"; |
026 | keuze3.className = "verberg"; |
027 | keuze4.className = "verberg"; |
028 |
029 | } |
030 | if (item.id == "a2") { |
031 | keuze1.className = "verberg"; |
032 | keuze2.className = "toon"; |
033 | keuze3.className = "verberg"; |
034 | keuze4.className = "verberg"; |
035 | } |
036 | if (item.id == "a3") { |
037 | keuze1.className = "verberg"; |
038 | keuze2.className = "verberg"; |
039 | keuze3.className = "toon"; |
040 | keuze4.className = "verberg"; |
041 | } |
042 | if (item.id == "a4") { |
043 | keuze1.className = "verberg"; |
044 | keuze2.className = "verberg"; |
045 | keuze3.className = "verberg"; |
046 | keuze4.className = "toon"; |
047 | } |
048 |
049 | }; |
050 | </script> |
051 |
052 | </head> |
053 |
054 | <body> |
055 |
056 | <div id="kop"> |
057 |
058 | <h1>Webpagina</h1> |
059 |
060 | </div> |
061 |
062 | <div id="a1" class="toon"> |
063 |
064 | <div id="menu"> |
065 |
066 | <ul> |
067 |
068 | <li> |
069 |
070 | <a class="active" href="javascript:toonVerberg('a1');">Opdracht 1</a> |
071 | <a href="javascript:toonVerberg('a2');">Opdracht 2</a> |
072 | <a href="javascript:toonVerberg('a3');">Opdracht 3</a> |
073 | <a href="javascript:toonVerberg('a4');">Opdracht 4</a> |
074 |
075 | </li> |
076 |
077 | </ul> |
078 | </div> |
079 |
080 | <div id="inhoud"> |
081 |
082 | <table> |
083 | <tr> |
084 | <td class="opmaak2" colspan="3">Broeken</td> |
085 | </tr> |
086 | <tr> |
087 | <td class="opmaak3">S</td> |
088 | <td class="opmaak3">M</td> |
089 | <td class="opmaak3">L</td> |
090 | </tr> |
091 | <tr> |
092 | <td>43</td> |
093 | <td>56</td> |
094 | <td>88</td> |
095 | </tr> |
096 | <tr> |
097 | <td>23</td> |
098 | <td>12</td> |
099 | <td>23</td> |
100 | </tr> |
101 | <tr> |
102 | <td>12</td> |
103 | <td>76</td> |
104 | <td>14</td> |
105 | </tr> |
106 | <tr> |
107 | <td>18</td> |
108 | <td>34</td> |
109 | <td>67</td> |
110 | </tr> |
111 | <tr> |
112 | <td>45</td> |
113 | <td>19</td> |
114 | <td>43</td> |
115 | </tr> |
116 | </table> |
117 |
118 | </div> |
119 |
120 | </div> |
121 | <div id="a2" class="verberg"> |
122 | <div id="menu"> |
123 |
124 | <ul> |
125 |
126 | <li> |
127 |
128 | <a href="javascript:toonVerberg('a1');">Opdracht 1</a> |
129 | <a class="active" href="javascript:toonVerberg('a2');">Opdracht 2</a> |
130 | <a href="javascript:toonVerberg('a3');">Opdracht 3</a> |
131 | <a href="javascript:toonVerberg('a4');">Opdracht 4</a> |
132 |
133 | </li> |
134 |
135 | </ul> |
136 | </div> |
137 |
138 | <div id="inhoud"> |
139 |
140 | <table> |
141 | <tr> |
142 | <td class="opmaak1" colspan="7">Voorraad</td> |
143 | </tr> |
144 | <tr> |
145 | <td class="opmaak2" colspan="3">Broeken</td> |
146 | <td class="opmaak2" colspan="2">T-shirts</td> |
147 | </tr> |
148 | <tr> |
149 | <td class="opmaak3">S</td> |
150 | <td class="opmaak3">M</td> |
151 | <td class="opmaak3">L</td> |
152 | <td class="opmaak3">M</td> |
153 | <td class="opmaak3">L</td> |
154 | </tr> |
155 | <tr> |
156 | <td>43</td> |
157 | <td>56</td> |
158 | <td>88</td> |
159 | <td>34</td> |
160 | <td>53</td> |
161 | </tr> |
162 | <tr> |
163 | <td>23</td> |
164 | <td>12</td> |
165 | <td>23</td> |
166 | <td>44</td> |
167 | <td>23</td> |
168 | </tr> |
169 | <tr> |
170 | <td>12</td> |
171 | <td>76</td> |
172 | <td>14</td> |
173 | <td>48</td> |
174 | <td>12</td> |
175 | </tr> |
176 | <tr> |
177 | <td>18</td> |
178 | <td>34</td> |
179 | <td>67</td> |
180 | <td>19</td> |
181 | <td>21</td> |
182 | </tr> |
183 | <tr> |
184 | <td>45</td> |
185 | <td>19</td> |
186 | <td>43</td> |
187 | <td>11</td> |
188 | <td>18</td> |
189 | </tr> |
190 | </table> |
191 |
192 | </div> |
193 | </div> |
194 | <div id="a3" class="verberg"> |
195 | <div id="menu"> |
196 |
197 | <ul> |
198 |
199 | <li> |
200 |
201 | <a href="javascript:toonVerberg('a1');">Opdracht 1</a> |
202 | <a href="javascript:toonVerberg('a2');">Opdracht 2</a> |
203 | <a class="active" href="javascript:toonVerberg('a3');">Opdracht 3</a> |
204 | <a href="javascript:toonVerberg('a4');">Opdracht 4</a> |
205 |
206 | </li> |
207 |
208 | </ul> |
209 | </div> |
210 |
211 | <div id="inhoud"> |
212 |
213 | <table border="1" width="100%"> |
214 | <tr> |
215 | <td class="opmaak1" colspan="7">Voorraad</td> |
216 | </tr> |
217 | <tr> |
218 | <td></td> |
219 | <td class="opmaak2" colspan="3">Broeken</td> |
220 | <td class="opmaak2" colspan="2">T-shirts</td> |
221 | </tr> |
222 | <tr> |
223 | <td></td> |
224 | <td class="opmaak3">S</td> |
225 | <td class="opmaak3">M</td> |
226 | <td class="opmaak3">L</td> |
227 | <td class="opmaak3">M</td> |
228 | <td class="opmaak3">L</td> |
229 | </tr> |
230 | <tr> |
231 | <td class="opmaak3">Amsterdam</td> |
232 | <td>43</td> |
233 | <td>56</td> |
234 | <td>88</td> |
235 | <td>34</td> |
236 | <td>53</td> |
237 | </tr> |
238 | <tr> |
239 | <td class="opmaak3">Alkmaar</td> |
240 | <td>23</td> |
241 | <td>12</td> |
242 | <td>23</td> |
243 | <td>44</td> |
244 | <td>23</td> |
245 | </tr> |
246 | <tr> |
247 | <td class="opmaak3">Haarlem</td> |
248 | <td>12</td> |
249 | <td>76</td> |
250 | <td>14</td> |
251 | <td>48</td> |
252 | <td>12</td> |
253 | </tr> |
254 | <tr> |
255 | <td class="opmaak3">Rotterdam</td> |
256 | <td>18</td> |
257 | <td>34</td> |
258 | <td>67</td> |
259 | <td>19</td> |
260 | <td>21</td> |
261 | </tr> |
262 | <tr> |
263 | <td class="opmaak3">Den Haag</td> |
264 | <td>45</td> |
265 | <td>19</td> |
266 | <td>43</td> |
267 | <td>11</td> |
268 | <td>18</td> |
269 | </tr> |
270 | </table> |
271 |
272 | </div> |
273 | </div> |
274 | <div id="a4" class="verberg"> |
275 | <div id="menu"> |
276 |
277 | <ul> |
278 |
279 | <li> |
280 |
281 | <a href="javascript:toonVerberg('a1');">Opdracht 1</a> |
282 | <a href="javascript:toonVerberg('a2');">Opdracht 2</a> |
283 | <a href="javascript:toonVerberg('a3');">Opdracht 3</a> |
284 | <a class="active" href="javascript:toonVerberg('a4');">Opdracht 4</a> |
285 |
286 | </li> |
287 |
288 | </ul> |
289 | </div> |
290 |
291 | <div id="inhoud"> |
292 |
293 | <table border="1" width="100%"> |
294 | <tr> |
295 | <td class="opmaak1" colspan="7">Voorraad</td> |
296 | </tr> |
297 | <tr> |
298 | <td></td> |
299 | <td></td> |
300 | <td class="opmaak2" colspan="3">Broeken</td> |
301 | <td class="opmaak2" colspan="2">T-shirts</td> |
302 | </tr> |
303 | <tr> |
304 | <td></td> |
305 | <td></td> |
306 | <td class="opmaak3">S</td> |
307 | <td class="opmaak3">M</td> |
308 | <td class="opmaak3">L</td> |
309 | <td class="opmaak3">M</td> |
310 | <td class="opmaak3">L</td> |
311 | </tr> |
312 | <tr> |
313 | <td class="opmaak2" rowspan="3">Noord Holland</td> |
314 | <td class="opmaak3">Amsterdam</td> |
315 | <td>43</td> |
316 | <td>56</td> |
317 | <td>88</td> |
318 | <td>34</td> |
319 | <td>53</td> |
320 | </tr> |
321 | <tr> |
322 | <td class="opmaak3">Alkmaar</td> |
323 | <td>23</td> |
324 | <td>12</td> |
325 | <td>23</td> |
326 | <td>44</td> |
327 | <td>23</td> |
328 | </tr> |
329 | <tr> |
330 | <td class="opmaak3">Haarlem</td> |
331 | <td>12</td> |
332 | <td>76</td> |
333 | <td>14</td> |
334 | <td>48</td> |
335 | <td>12</td> |
336 | </tr> |
337 | <tr> |
338 | <td class="opmaak2" rowspan="2">Zuid Holland</td> |
339 | <td class="opmaak3">Rotterdam</td> |
340 | <td>18</td> |
341 | <td>34</td> |
342 | <td>67</td> |
343 | <td>19</td> |
344 | <td>21</td> |
345 | </tr> |
346 | <tr> |
347 | <td class="opmaak3">Den Haag</td> |
348 | <td>45</td> |
349 | <td>19</td> |
350 | <td>43</td> |
351 | <td>11</td> |
352 | <td>18</td> |
353 | </tr> |
354 | </table> |
355 |
356 | </div> |
357 | </div> |
358 |
359 | <div id="voet"> |
360 | Copyright |
361 | <script> |
362 | document.write(new Date().getFullYear()) |
363 | </script> |
364 | </div> |
365 |
366 | </body> |
367 |
368 | </html> |
Download hier het bestand.
001 | table { |
002 | width: 100%; |
003 | } |
004 |
005 | table, td, tr { |
006 | border: 1px solid black; |
007 | } |
008 |
009 | td.opmaak1 { |
010 | font-weight: bold; |
011 | text-align: center; |
012 | background-color: green; |
013 | } |
014 |
015 | td.opmaak2 { |
016 | background-color: lightblue; |
017 | } |
018 |
019 | td.opmaak3 { |
020 | background-color: lightgrey; |
021 | } |
022 |
023 | h1 { |
024 | color: blue; |
025 | font-weight: bold; |
026 | } |
027 |
028 | p { |
029 | color: green; |
030 | } |
031 |
032 | * { |
033 | margin: 0px; |
034 | padding: 0px; |
035 | } |
036 |
037 | html, body { |
038 | height: 100%; |
039 | } |
040 |
041 | #kop { |
042 | background-color: #666; |
043 | padding: 5px; |
044 | text-align: center; |
045 | font-size: 35px; |
046 | color: white; |
047 | } |
048 |
049 | #menu { |
050 | margin: 0; |
051 | float: left; |
052 | width: 15%; |
053 | background-color: #f1f1f1; |
054 | height: 100%; |
055 | } |
056 |
057 | #menu ul { |
058 | margin: 0; |
059 | padding: 0; |
060 | list-style-type: none; |
061 | } |
062 |
063 | li a { |
064 | display: block; |
065 | color: #000; |
066 | padding: 8px 16px; |
067 | text-decoration: none; |
068 | } |
069 |
070 | li a.active { |
071 | background-color: #4CAF50; |
072 | color: white; |
073 | } |
074 |
075 |
076 | li a:hover:not(.active) { |
077 | background-color: #555; |
078 | color: white; |
079 | } |
080 |
081 | #inhoud { |
082 | float: left; |
083 | width: 85%; |
084 | background-color: #f1f1f1; |
085 | height: 100%; |
086 | } |
087 |
088 | #voet { |
089 | color: white; |
090 | text-align: center; |
091 | background-color: #666; |
092 | } |
093 |
094 | #a1.verberg, #a2.verberg, #a3.verberg, #a4.verberg { |
095 | display: none; |
096 | } |
097 |
098 | #a1.toon, #a2.toon, #a3.toon, #a4.toon { |
099 | display: block; |
100 | height: 50%; |
101 | } |
Download hier het bestand.