Mi-Soft.nl



avatar Errorcheck met de w3 validator. 29-09-2013
Hallo allemaal!
In deze tutorial gaan we het hebben over het vinden van fouten in een html pagina.

We gaan voor het controleren op fouten in ons bestand (en ja, die zijn er!) gebruik maken van de w3c validator.
We gaan op de website meteen drukken op de knop "Validate by Direct Input", zoals te zien in de volgende foto:
image
Vervolgens pak je alle tekst uit je document en kopieer je het naar het witte vak op de website.
We kunnen de errorcheck nu beginnen door simpelweg op "Check" te drukken.

Warnings

De 2 volgende warnings: komen altijd voor de dag als je "Direct Input" gebruikt, dit komt omdat een .html document normaliter wordt opgeslagen met een encodering(utf-8). Omdat wij echter de tekst hebben gekopieërd is er geen encodering meegegeven (die kan hij niet uit het bestand lezen, want er is geen bestand)

De 2de waarschuwing verteld je vervolgens dat hij er automatisch vanuit zal gaan dat er een utf-8 encodering is gebruikt.

De fouten

  1. Line X, Column X: document type does not allow element "b" here; missing one of

    Dit betekend dat we tussen de body tag geen <b> hadden mogen zetten. er moet iets als een <p> (paragraaf) tag of <div> tag omheen.

    We kunnen het dus vrij simpel op lossen door in ons html document net na de eerste bodytag een <p> te plaatsen en net voor de tweede body tag een </p> te plaatsen.
    Dat ziet er dan als volgt uit:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Hallo en welkom op mijn website</title>
    	
    	</head>
    	<body>
    		<p>	
    			<b>Welkom</b><br />
    			<i>Welkom</i><br />
    			<u>4+4 = 8.</u><br />
    			<img src ="images/foto.png" alt= "Een foto van het mi-soft logo." width = "300" height = "145" />
    		</p>
    	</body>
    </html>
    		
    Als we nu nog een keer het document laten valideren datn zie je dat we opeens nog maar 1 fout over hebben!
    Dit komt omdat de w3 validator voor elke tag die we hadden gebruikt een foutmelding genereerde.
  2. Element "u" undefined

    Dat deze fout zou komen, daar was ik me bewust van.
    De <u> tag is verouderd en zou daarom ook niet gebruikt moeten worden
    Echter was die voor ons voorbeeld erg geschikt omdat deze erg simpel is.

    We gaan hem dus ook niet oplossen aangezien we nog niet aan css toezijn.
En dat waren alle fouten alweer!
Ik hoop dat u vanaf nu ook elk document zo goed mogelijk (en met zo min mogelijk fouten) probeert te maken.

Gerelateerde artikelen

Over de auteur:
Rick's headshot
Rick van Lieshout
Rick van Lieshout is de eigenaar en administrator van Mi-Soft.nl
Ook is hij een manusje van alles en kan daarom in veel categorieen een steentje bijdragen.
U kunt meer over Rick te weten komen op zijn portfolio.
Rick@Mi-Soft.nl | Portfolio | Facebook | Twitter | Google+ | Youtube | Flickr | LinkedIn