OWN #200 - HTML-cursus

Artikel geplaatst door OWN 2 oktober 2010

261 bezichtigingen

https://gtagames.nl/blogs/entry/5179-own-200-html-cursus/

Volgers 0

Hoeveel procent heb je GTA Vice City uitgespeelt?
91 leden hebben gestemd

1. Hoeveel procent heb je GTA Vice City uitgespeelt?
- 10%
  
  5
- 20%
  
  6
- 30%
  
  1
- 40%
  
  2
- 50%
  
  11
- 60%
  
  6
- 70%
  
  4
- 80%
  
  7
- 90%
  
  40
- 100%
  
  0

This poll is closed to new votes

Deze rubriek is geschreven door Kloep!

Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek ga ik (Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar wat Javascript. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.

In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Chrome de codes anders weer als bijvoorbeeld Internet Explorer of Firefox.

Styleswitch

Deze week hebben we speciaal voor de 200e editie een extra lange en interessante editie van HTML-cursus. We gaan een code schrijven die ervoor zorgt dat we de CSS gemakkelijk kunnen wijzigen. Dit gaan we door drie manieren doen: via keuzerondjes, via een menu en via gewone links. In totaal krijgen we 5 verschillende documenten: 3 CSS-documenten, 1 JS-document en 1 HTML-document. Houd voor een goede werking van deze code de aangegeven namen aan!

kleur1.css

body {background-color:white};

kleur2.css

body {background-color:red};

kleur3.css

body {background-color:yellow};

styleswitch.js

1. function setStylesheet(title) {
2. 	var i, cacheobj
3. 	for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
4. 		if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
5. 			cacheobj.disabled = true
6. 			if(cacheobj.getAttribute("title") == title)
7. 			cacheobj.disabled = false
8. 		}
9. 	}
10. }
11. function chooseStyle(styletitle, days){
12. 	if (document.getElementById){
13. 		setStylesheet(styletitle)
14. 	}
15. }

styleswitch.html

1. <html>
2. <head>
3. 	<link rel="stylesheet" type="text/css" href="kleur1.css" />
4. 	<link rel="alternate stylesheet" type="text/css" media="screen" title="rood-thema" href="kleur2.css" />
5. 	<link rel="alternate stylesheet" type="text/css" media="screen" title="geel-thema" href="kleur3.css" />
6. 	<script src="styleswitch.js" type="text/javascript"></script>
7. </head>
8. <body>
9. 	<table cellpadding="10" border="1">
10. 		<tr>
11. 			<td>
12. 			<form>
13. 				<input type="radio" name="choice" value="none" onclick="chooseStyle(this.value)">Wit thema<br />
14. 				<input type="radio" name="choice" value="rood-thema" onclick="chooseStyle(this.value)">Rood thema<br />
15. 				<input type="radio" name="choice" value="geel-thema" onclick="chooseStyle(this.value)">Geel thema
16. 			</form>
17. 			</td>
18. 			<td> <form>
19. 				<select size="1" onchange="chooseStyle(this.options[this.selectedIndex].value)">
20. 					<option value="none" selected="selected">Wit thema</option>
21. 					<option value="rood-thema">Rood thema</option>
22. 					<option value="geel-thema">Geel thema</option>
23. 				</select>
24. 				</form>
25. 			</td>
26. 			<td>
27. 				<a href="javascript:chooseStyle('none')" checked="checked">Wit thema</a><br />
28. 				<a href="javascript:chooseStyle('rood-thema')">Rood thema</a><br />
29. 				<a href="javascript:chooseStyle('geel-thema')">Geel thema</a>
30. 			</td>
31. 		</tr>
32. 	</table>
33. </body>
34. </html>

Hieronder is het resultaat te zien:

Sommige zullen nu helemaal gek worden, maar doe maar rustig. Het komt allemaal wel goed.

Het is een ingewikkelde en uitgebreide code, dus het heeft weinig zin om dit helemaal uit te gaan leggen. Dan zijn we morgen nog niet klaar. Ik zeg het wel nogmaals dat het belangrijk is dat je de dikgedrukte benamingen gebruikt. In de overige codes staan links naar de overige bestanden. Mocht je nu echt deze namen niet willen, zorg er dan wel voor dat je alles wijzigt, en niet alleen de titel van het document. Verder heb ik in deze code geen uitgebreide interessante CSS-documenten gebruikt, maar je kunt natuurlijk voor jezelf wel uitgebreide codes gebruiken. Ook in de HTML kun je naar eigen verlangen aanpassen. Ik heb nu zowel keuzerondjes, een menu en gewone links gedaan, jij kunt er natuurlijk ééntje kiezen.