HTML-cursus

Geplaatst: 12 oktober 201014 jaren

Hallo, en welkom bij deze HTML-cursus. Dit is een rubriek van OWN. Echter, hij bleek daar niet heel erg populair te zijn, waarschijnlijk komt dit doordat de lezers van OWN plezier willen hebben, en geen moeilijke codes leren. In de 200e editie van OWN is er besloten om deze rubriek niet meer in de OWN te plaatsen, maar hier. Hier krijgt hij meer bezoekers die er echt iets mee willen doen.

Het heet dan wel HTML-cursus, maar hij loopt al zo lang dat het niet enkel HTML meer is. Ik ben begonnen met HTML, maar inmiddels is CSS ook al behandeld. Op het moment komen er leuke interessante codes van Javascript. Misschien dat jullie binnenkort ook wel weer nieuwe codes te zien krijgen, maar dat is nog niet helemaal zeker.

In de volgende post zie je een handig overzicht, waarin je kan doorlinken naar elke les apart. Veel plezier en succes met alles! Als je vragen hebt, kun je mij altijd een Persoonlijk Bericht sturen.

Kloep

Bewerkt: 20 december 201113 jaren door Kloep

Reacties 42
Bezichtigingen 35.5k
Created 14 jaren14 jaren
Laatste reactie 14 jaren14 jaren

Popular Days

Nieuw onderwerp starten

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736973

Les 30: Gebeurtenisafhandelingen

Gebeurtenisafhandelingen

Er zijn verschillende gebeurtenissen om aan te geven wanneer een script iets moet uitvoeren. Zoals het oplichten van een woord wanneer je er met je muis overheen gaat of het laden van een pagina in een nieuwe venster. Hieronder staan de meeste gebeurtenissen:

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736974

Les 31: Redirects

Redirect

Er zijn verschillende manieren hoe je een gebruiker naar een andere pagina kan sturen. Dit kan natuurlijk simpel met HTML door gewoon een link te plaatsen waar de gebruiker op kan klikken, maar dit kan ook met Javascript. Je kan altijd de standaard onderstaande code gebruiken:

<script type="text/javascript">
window.location.href="http://gtaforum.nl";
</script>

Echter, deze code wordt afgeraden, omdat je de "Vorige" knop uitschakeld. Gebruikers kunnen dus niet meer terug indien nodig. Daardoor is het handiger om deze code te gebruiken:

<script type="text/javascript">
window.replace("http://gtaforum.nl");
</script>

Nou heeft het hier natuurlijk weinig zin om één keer naar de vorige pagina te gaan, want dan stuurt je browser je meteen weer door naar de website die is aangegeven.

Redirect na een Formulier

Ook kun je de gebruiker na het versturen van een formulier doorsturen. Dit gaat met de volgende codes:

Head:

<script type="text/javascript">
function danku(){
location.replace("danku.html")}
</script>

Body:

<form method="post" onsubmit="alert('Er wordt een mail verstuurd.');">
Uw naam: <input type="text" name="naam" size="30" /><br />
<input type="submit" onclick="danku()" value="Versturen" />
<input type="reset" value="Annuleren" />
</form>

In dit geval is het natuurlijk nog wel even de bedoeling dat je de pagina danku.html schrijft. Dit is de pagina waar je naartoe wordt gestuurd. Hier kun je bijvoorbeeld een bedankje plaatsen, maar ook iets heel anders. De naam kun je uiteraard wijzigen.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736977

Les 32: Tekstgrootte aanpassen

Tekstgrootte automatisch wijzigen

Deze week leren we om bovenstaande afbeelding te maken met een simpel scriptje. Zie onderstaande code:

Body:

<script type="text/javascript">
var message="Welkom op onze site!";
var format=message.toUpperCase();
var size=1;
for (i=0;i<message.length;i++){
	document.write(format.charAt(i).fontsize(size).bold())
	if (size<7) {
		size++
	}
	else {
		size=1
	}
}
</script>

Plaats deze code in je BODY, en je krijgt de afbeelding. Zelf kun je natuurlijk dingen wijzigen. Zo kun bijvoorbeeld de tekst wijzigen. Hieronder zie je een afbeelding met een andere tekst:

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736978

Les 33: Blokjes maken

Blokjes in je browser maken.

Deze week leren we om bovenstaande afbeelding te maken met een simpel scriptje. Zie onderstaande code:

<html>
<head>
<style type="text/css">
#test {
float:right;
border:solid 1 px #000000;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (tel = 1; tel <= 5000; tel++) {
	document.write('<div id="test"> </div>')
}
</script>
</body>
</html>

Dit is de gehele pagina die je hierboven ziet. Het is natuurlijk ook mogelijk de code wat aan te passen indien je dit wilt. Daarom zal ik de belangrijkste aspecten uit de code uitleggen.

Als eerste begin ik met een korte uitleg over het for-statement. Dit statement is eigenlijk simpelweg een herhalingsopdracht. Hiermee kun je dus een opdracht geven (in dit geval de blokjes), en dit laten herhalen hoe vaak je maar wilt. Dit statement bestaat uit twee onderdelen:

Controle gedeelte; hier worden de herhalingen geregeld (in ons voorbeeld is dit (tel = 1; tel <= 5000; tel++))
Een opdracht; wat moet er herhaald worden? (in ons voorbeeld is dit ('<div id="test"> </div>'))

In de opdracht zie je in HTML de verwijzing naar het ID "TEST" staan, welke je bovenaan in de code kan vinden.

Eerst zie je in de HEAD een code staan. Dit is een CSS, en zou je eventueel ook in een extern blad kunnen voegen. Voor deze tutorial leek het me handiger om alles in één document te plaatsen. In deze CSS staat het ID "TEST". Dit geeft aan waar de blokjes moeten beginnen, hoe dik ze moeten zijn en hoe groot ze moeten zijn. Dit gaat door middel van CSS codes die we allemaal al eerder hebben behandeld.

Daaronder staat de Javascript waar het allemaal om draait. Eigenlijk hoef je in deze code maar één waarde te wijzigen als je dat wilt. Dat is de "<= 5000". De 5000 hier staat voor het aantal vierkantjes wat wordt gemaakt. Dit kun je dus ook wijzigen naar 1, dan wordt er slechts 1 vakje gemaakt.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736979

Les 34: Aantal woorden/tekens tellen

Aantal woorden/tekens tellen.

Deze week bekijken we een code waarmee je het aantal woorden/tekens kan berekenen van een tekst die je typt. Met onderstaande code bereken je het aantal woorden:

<form name="form1">
<textarea rows="12" id="commentaar" cols="38" wrap="virtual"></textarea><br />
<input type="button" value="Aantal woorden berekenen" onclick="countit()" />
<input type="text" id="telknop" size="20" />
</form>
<script type="text/javascript">
function countit(){
	if (document.getElementById) {
	var formcontent=document.getElementById("commentaar").value;
	formcontent=formcontent.split(" ");
	document.getElementById("telknop").value=formcontent.length;
	}
}
</script>

Hieronder zie je het resultaat van deze code:

Als je één regel hierbij weghaalt, kun je ook het aantal tekens inclusief de spaties tellen. Deze volledige code komt er dan zo uit te zien:

<form name="form1">
<textarea rows="12" id="commentaar" cols="38" wrap="virtual"></textarea><br />
<input type="button" value="Aantal tekens berekenen" onclick="countit()" />
<input type="text" id="telknop" size="20" />
</form>
<script type="text/javascript">
function countit(){
	if (document.getElementById) {
	var formcontent=document.getElementById("commentaar").value;
	document.getElementById("telknop").value=formcontent.length;
	}
}
</script>

Met onderstaand resultaat:

Zoals je kunt zien is de volgende regel weggehaald: formcontent=formcontent.split(" ");. De stringmethode die hier gebruikt wordt is dus split(). In het argument van deze string gebruiken we een spatie. Hiermee zorg je ervoor dat de tekst gesplitst word in afzonderlijke woorden. De eigenschap length in de laatste regel zorgt voor het optellen van de woorden/tekens.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736980

Les 35: Omrekentabel

Omrekentabel

Deze week gaan we een omrekentabel maken. Dit kun je natuurlijk met allerlei zaken doen. Je kunt alle soorten verschillende formules in je code plaatsen. Hieronder krijg je het voorbeeld te zien van een tabel die centimeters omrekent naar inches.

1. <table border="1" cellpadding="5" cellspacing="0">
2. 	<tr><td>Centimeter</td><td>Inch</td></tr>
3. 		<script type=""text/javascript">
4. 			for (centimeter = 1; centimeter <= 25; centimeter = centimeter + 1)
5. 		{
6. 		document.write("<tr><td>" + centimeter + "</td><td>" + ((centimeter) * 0.39) + "</td></tr>");
7. 		}
8. 		</script>
9. </table>

Onderstaand resultaat krijg je dan:

De code zul je redelijk snel doorhebben. Een aantal regels kennen we al. We weten nu inmiddels wel hoe je een tabel maakt. De eerste twee regels zijn dan dus al bekend. De derde regel hebben we ook al vaker gezien. Deze opent natuurlijk de javascript code.

Daarna komt het FOR-statement weer terug. Deze hebben we al eerder gezien in editie 190. Toen gebruikte we hem voor het tellen van hokjes, nu maken we er ook een rekensom mee.

Regel 4: Je ziet eerst dat we beginnen bij 1 en doorgaan tot 25. Daarna zie je dat we stappen van 1 nemen.

Regel 6: Hier gaan we weer naar document.write, die je ook al vaker hebt gezien. We beginnen dus gewoon met de tabel maken. In de eerste kolom krijg je de centimeters te zien. In de tweede kolom komt de rekensom. 1 Centimeter staat gelijk aan 0,39 inch. We nemen dus de waarde uit de eerste kolom (centimeter), en vermenigvuldigen deze met 0,39 (in de code wordt de , een .). Daarna is het slechts nog een kwestie van alles afsluiten.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736981

Les 36: Huidige datum en tijd

Huidige datum en tijd.

1. <script type="text/javascript">
2. 	var Nu = new Date();
3. 	document.write("Vandaag is het " + Nu.getDate()+ "-" + (Nu.getMonth()+1) + "-" + Nu.getFullYear() + ".<br />U kwam hier aan op: " + Nu.getHours() +":" + Nu.getMinutes() + " en " + Nu.getSeconds() +" seconden.");
4.</script>

Onderstaand resultaat krijg je dan:

Vandaag is het 28-8-2010.

U kwam hier aan op: 14:25 en 10 seconden.

De code ziet er lastig uit, maar dat valt reuze mee. Je ziet veel aanhalingstekens en haakjes. Denk eraan, op het moment dat je er 1 teveel of te weinig doet, doet je code helemaal niks meer en zie je een wit scherm. Let er dus goed op dat dit allemaal klopt.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736990

Les 37: Huidige tijd

Huidige tijd.

Vorige week hadden we een simpele code die je de huidige datum en tijd laad zien. Deze week bekijken we een lastigere code die de tijd aangeeft, in een dynamische tabel. Hieronder is het resultaat te zien, daaronder de code:

1. <div id="klok"></div>
2. <script type="text/javascript">
3. 	function showtime(){
4. 		if (!document.all && !document.getElementById) {
5. 			return
6. 		}
7. 		thelement = document.getElementById ? document.getElementById("klok") :
8. 		document.all.klok
9. 		var Digital = new Date()
10. 		var hours=Digital.getHours()
11. 		var minutes=Digital.getMinutes()
12. 		var seconds=Digital.getSeconds()
13. 		var dn = "PM"
14. 
15. 		if (hours < 12) {
16. 			dn = "AM"
17. 		}
18. 		if (hours > 12) {
19. 			hours = hours - 12
20. 		}
21. 		if (hours == 0) {
22. 			hours = 12
23. 		}
24. 		if (minutes <= 9) {
25. 			minutes="0" + minutes
26. 		}
27. 		if (seconds <= 9) {
28. 			seconds="0" + seconds
29. 		}
30. 	var ctime="<input class='klok' type='text' value='" + hours+"' /><input class='klok' type='text' value='"+minutes + "' /><input class='klok' type='text' value='" + seconds+"' />" + dn
31. 	thelement.innerHTML = "Tijd:" + ctime
32. 	setTimeout("showtime()" ,1000)
33. 	}
34. window.onload = showtime
35. </script>

Een lange code, en ook een redelijk lastige. In deze code wordt met AM en PM gewerkt, omdat ik gewoonweg niet weet hoe ik hierin een 24-uurs klok moet verwerken. :puh: Voor de duidelijkheid: AM = 's ochtends en PM is 's middags. In het voorbeeld staat er dus bij het aantal uren een 3, en er staat PM. Dit kun je dus lezen als 15:10 uur. Als je deze code invoert, en uittest, zul je zien dat de secondes veranderen. Zo heb je dus altijd de juiste tijd bij de hand. De code is nu zo ingesteld dat je het in vakjes krijgt (te herkennen aan <input>), natuurlijk kun je dit zelf wijzigen naar wat je zelf wilt. Puzzel er maar wat mee. Vragen kun je me natuurlijk altijd stellen.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736991

Les 38: Berekeningen

Berekeningen

Alle scholen zijn inmiddels wel weer begonnen, en in de statusupdates is duidelijk te zien hoe fijn iedereen dat weer vindt. Wiskunde is natuurlijk altijd een erg leuk vak. Hoe zou je het nou vinden als je op internet met onderstaand script snel bepaalde berekeningen kan maken? Leuk? Lees dan maar snel verder.

1. <script type="text/javascript">
2. function cent(amount) {
3. 	return (amount == Math.floor(amount)) ? amount + ',00' : (  (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
4. }
5. 
6. function update(form) {
7. 	if (document.getElementById) {
8. 		hoeveelheid=document.getElementById("quantity")
9. 		eenheid=document.getElementById("unitcost")
10. 		sub=document.getElementById("subtotal")
11. 		btw=document.getElementById("tax")
12. 		totaal=document.getElementById("total")
13. 		var subtotal = (hoeveelheid.value - 0) * (eenheid.value - 0);
14. 		subtotal = Math.floor(subtotal * 1000)/1000;
15. 		sub.value = '€' + cent(subtotal);
16. 		var tax = subtotal / 100 * (form.rate.value - 0);
17. 		tax = Math.floor(tax * 1000)/1000;
18. 		btw.value = '€' + cent(tax);
19. 		total = subtotal + tax;
20. 		total = Math.floor(total * 1000)/1000;
21. 		totaal.value = '€' + cent(total);
22. 		}
23. }
24. </script>
25. 
26. <form>
27. <table>
28. <tr><td align="right">Hoeveelheid:</td><td><input type="text" id="quantity" size="8"></td></tr>
29. <tr><td align="right">Kost per eenheid:</td><td><input type="text" id="unitcost" value=""size="8"></td></tr>
30. <tr><td align="right">BTW (%): </td><td><input type="text" id="rate" value="19"size="8"></td></tr>
31. <tr><td align="right">Subtotaal: </td><td><input type="text" id="subtotal"size="8"></td></tr>
32. <tr><td align="right">BTW: </td><td><input type="text" id="tax"size="8"></td></tr>
33. <tr><td align="right">Totaal: </td><td><input type="text" id="total"size="8"></td></tr>
34. <tr><td> </td><td><input type="button" onclick="update(this.form)" value="Bereken" /></td></tr>
35. </table>
36. </form>

De code doet veel zelf, maar natuurlijk niet alles. Jij moet alleen de bovenste twee invullen, en op Bereken klikken. Vervolgens krijg je het resultaat te zien. De code ziet er misschien erg lastig uit, maar dat komt voornamelijk door het grote aantal tekens. Bepaalde dingen moet je wel weten, zoals waar Math.floor() voor staat. Dit haalt namelijk de decimalen weg bij je getallen. Om het simpel te maken, hieronder een klein voorbeeld:

<script type=text/javascript>
var i = 21.4568
document.write(Math.floor(i))
</script>

Als resultaat krijg je 21.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736992

Les 39: Tekst veranderen

Tekst veranderen

Nu gaan we een script schrijven waarmee je een tekst kan wijzigen door op een link te klikken. Dit kan je gebruiken als je bijvoorbeeld een quiz maakt. Let wel, dit script onthoudt niet het aantal juiste en verkeerde antwoorden.

1. <html>
2. <head>
3. <script type="text/javascript">
4. 	function verander() {
5. 		document.getElementsByTagName("p")[0].innerHTML="<i>Leuke nieuwe verfrissende tekst</i>"
6. 	}
7. </script>
8. </head>
9. <body>
10. <p><b>Dit is de eerste tekst</b></p>
11. <a href="#" onclick="verander()">Verander bovenstaande tekst</a>
12. </body>
13. </html>

Hieronder is te zien wat je ervoor en erna hebt:

Voor:

Na:

Dit is weer eens een keertje geen moeilijke code. Gewoon een korte simpele code zonder al te veel toestanden. We maken de function 'verander' aan, en geven aan dat deze de tekst moet wijzigen. Daarna komt er alleen nog maar HTML bij kijken, wat we inmiddels toch allemaal wel zullen kunnen.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736993

Les 40: Kalender

Kalender

Nu gaan we eens kijken naar een lekkere lange code. We gaan namelijk een kalender fabriceren, die ook aangeeft welke dag het vandaag is. Normaal geef ik er ook regelnummers bij. Nou lijkt het mij handig als je deze code zo kunt kopiëren, dus ik geef ze er deze keer niet bij. Kijk eerst maar eens naar de code.

<html>
<head>
<style type="text/css">
.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: white;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
function buildCal(m, y, cM, cH, cDW, cD, brdr) {
var mn=['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','October','November','December'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
var oD = new Date(y, m-1, 1);
oD.od=oD.getDay()+1;
var todaydate=new Date()
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0
dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))|| (oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++) {
	t+='<td class="'+cDW+'">'+"ZMDWDVZ".substr(s,1)+'</td>';
}
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
	var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ' ';
	if (x==scanfortoday) {
		x='<span id="today">'+x+'</span>'
	}
	t+='<td class="'+cD+'">'+x+'</td>';
	if(((i)%7==0)&&(i<36)){
		t+='</tr><tr align="center">'
	};
}
return t+='</tr></table></div>';
}
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1
var curyear=todaydate.getFullYear()
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>
</body>
</html>

Hieronder is het resultaat te zien:

Je ziet dat het een redelijk ingewikkelde code is. Ik zal het hier dan ook zo goed en volledig mogelijk uitleggen. Je begint met een CSS, dit is nodig om aan te geven welke kleuren je gebruikt, en hoe je tabel eruit komt te zien. Ik heb gekozen voor zwarte randen, verschillende achtergronden en een zwarte tekst. De huidige dag wordt dikgedrukt en rood gemaakt. Hoe je wilt dat dit eruit komt te zien, is natuurlijk helemaal aan jezelf. Dit kan en mag je naar hartelust wijzigen.

Na de CSS krijgen we het script, waar het natuurlijk uiteindelijk om draait. Je ziet dat er een aantal variabelen worden gemaakt, met de juiste waardes erachter. Zo zie je bijvoorbeeld bij de eerste (variabele "mn") dat daarachter alle maanden worden weergeven. Let er op, tussen de javascriptcode die zichtbaar is, zie je ook regelmatig een HTML-code verschijnen. Dit is nodig om de tabel te krijgen.

Vorige week kreeg ik de vraag waar hij de informatie van bijvoorbeeld getFullYear vandaan haalt. Dit is een goede vraag, omdat dit nergens in deze code te zien is. Nu had ik werkelijk geen idee waar hij het precies vandaan haalt, maar het klopt wel dat je dit niet in je code hoeft aan te geven.

Wat lijkt op getFullYear is getYear. Deze zou ik zo goed als nooit gebruiken. Deze geeft namelijk niet het volledige jaartal mee, maar slechts 2 of 3 cijfers. Hij begint met tellen bij het jaar 1900. Het jaar 1999 laat hij dus zien als '99', 2010 als '110'. Ook doet hij wat leuks met het jaar 1890, hierbij krijg je het jaar '-10' te zien. Gebruik dus gewoon altijd getFullYear.

Geplaatst: 13 oktober 201014 jaren

Auteur

comment_1736996

Les 41: Styleswitch

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. :engel: 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.