Hoe zorg ik ervoor dat mijn website voldoet aan de W3C

Status
Niet open voor verdere reacties.
joept

joept

Gebruiker
Lid geworden
9 okt 2007
Berichten
931
He,

Ik probeer mijn website zo goed mogelijk te schrijven, de index voldoet wel aan de W3C maar de rest van de pagina's niet, hoe moet ik dit oplossen?
Ik snap namelijk helemaal nis van de fouten die hij geeft.
bijv deze pagina: www.myblogsite.nl/blog.html daar geeft hij 29 errors wat ik nog best redelijk vind, maar ik wil het graag op 0 hebben.
Zie W3C: http://validator.w3.org/check?uri=http://myblogsite.nl/blog.html
Als we nou kijken naar de eerste Error:
Line 33, Column 93: duplicate specification of attribute "size"

…="200" id="edit-search-form-1" size="41" value="" title="Zoek hier." class="f

You have specified an attribute more than once. Example: Using the "height" attribute twice on the same "img" tag.
Klik om te vergroten...

Maar wat bedoelen ze er nou mee, met die Height, ik vind het allemaal zo vaag.
 
Laatst bewerkt:
duplicate specification of attribute "size"
Klik om te vergroten...
je hebt ergens dubbel 'size' gebruikt. Bijvoorbeeld:
HTML: 
<tag size='20' id='iets' moar='stuff' size='40'></tag>
zoals je ziet staat size='xx' er 2x in.



document type does not allow element "p" here
Klik om te vergroten...
zet al je alinea's eens in een <div> (wrapper oid):
HTML: 
<div>
   <p>stuff</p>
   <p moar stuff</p>
</div>

end tag for element "p" which is not open
Klik om te vergroten...
je hebt </p> maar geen <p>


XML Parsing Error: Attribute size redefined
Klik om te vergroten...
zelfde als die 'duplicate specification of attribute "size"' geval, dus die gaat vanzelf weg als je het fixed.
 
Laatst bewerkt:
Bedankt, de pagina is bijna W3C valid, nu moeten er nog wel 3 waarschuwingen uit, maar ik snap ze nog niet helemaal.
Alvast bedankt voor de uitleg.
 
Hoi Joep,
Ja, het is een leuke sport om de html waterdicht door de html-validator te krijgen. :)
Die 3 validator-waarschuwingen ben je in één klap van af door meteen na de <head> regel het regeltje in te voegen:
HTML: 
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Language" content="nl" />
   enz.
Hiermee wordt er een zogenaamde "charset" = characterset = letterkarakter-set opgegeven, d.w.z. de manier waarop browsers met de codering van de lettertekens moeten omgaan. Daarom moet dit regeltje ook helemaal bovenaan staan.
Er zijn verschillende charset's in omloop, maar UTF-8 is universeel en aan te bevelen.

Succes verder!
CSShunter

O ja, een tweede tak van sport is de CSS-validator. Niet schrikken van de vele waarschuwingen! ;)
Belangrijk is wel om bij een gekozen speciaal lettertype (bv.arial) ook wat alternatieven en in elk geval een zogenaamd "algemeen lettertype" op te geven. Dat werkt dan bv. als volgt:
Code: 
[FONT="Courier New"][SIZE="2"]body {
   font-family: arial, verdana, sans-serif;
   }[/SIZE][/FONT]
Dit betekent: als de bezoeker de Arial op zijn computer heeft zitten, wordt het een Arial. Is die er niet, dan wordt de Verdana geprobeerd. Is die er ook niet, dan wordt teruggevallen op wat op die computer als lettertype-zonder-schreef staat (sans-serif = schreefloos = kale letters zonder ophaaltjes; de Times heeft bv. wel van die ophaaltjes). Er wordt dus de volgorde van voorkeur aangehouden die je opgeeft in je CSS.
  • De waarschuwingen "geen achtergrondkleur opgegeven" e.d. slaan er op dat je eigenlijk bij elke opgegeven kleur ook de achtergrondkleur moet noemen (ook al is die hetzelfde als de algemene achtergrondkleur). Dit heeft met toegankelijkheid te maken: zodat je nooit per ongeluk een witte tekst op een witte achtergrond kunt krijgen, enz.: dat leest wat moeilijk! ;)
 
Bedankt voor de tip, ik ga het morgen meteen uitproberen.
 
Mooi, maar ondertussen probeer ik ook mijn forum valid te krijgen, maar ik heb 1 error:
Line 104, Column 72: duplicate specification of attribute "style"

…e-description" style="height: 100px;" style="width: 100%">

✉

You have specified an attribute more than once. Example: Using the "height" attribute twice on the same "img" tag.
Klik om te vergroten...
 
twee keer:
e-description" style="height: 100px;" style="width: 100%">

een keer:
e-description" style="height: 100px;width: 100%;">

:cool:
 
Het is gelukt, nu nog de rest van de pagina's.
Ik heb gekozen voor: iso-8859-1, met UTF-8 kreeg ik de melding dat het niet gelezen kon woorden.
 
Volgende probleem

Zo, al een hoop pagina's HTML valid, maar bij één pagina heb ik ook twee afbeeldingen gebruikt, deze heb ik op de volgende manier toe gevoegd aan de pagina:
HTML: 
    <img alt="Omschrijving van de afbeelding" src="naam van de afbeelding.gif">
:o
Zo hoort het natuurlijk niet, maar hoe met ik het dan doen?
Zie W3C: http://validator.w3.org/check?uri=http://myblogsite.nl/ftp.html
 
Je hebt als doctype xhtml. Dat betekent dat élke tag moet eindigen op />, ook 'n tag als <img>
Als je
HTML: 
<img alt="Omschrijving van de afbeelding" src="naam van de afbeelding.gif">
verandert in
HTML: 
<img alt="Omschrijving van de afbeelding" src="naam van de afbeelding.gif" />
(let op de spatie voor de /) is deze in orde, en met 'n beetje geluk ben je dan ook 'n aantal andere fouten kwijt.

Dat die utf-8 niet kon worden gelezen komt óf door 'n fout in je code, óf omdat je de html niet hebt opgeborgen als utf-8. Maar 't belangrijkste is dat je 'n iso-charset gebruikt, die wordt ook probleemloos door elke computer en programma herkend (in tegenstelling tot 'n windows-charset, want dat is geen standaard).
 
Laatst bewerkt:
Mooi, daar heb je mij al een eind verder mee geholpen.
Nu het volgende probleem, ik heb namelijk een aantal links op mijn website staan.
Deze worden geopend in een nieuw venster met hulp van:
HTML: 
<a target='_blank'
Maar in XHTML mag dat niet, hoe moet ik dat oplossen, of is daar geen oplossing voor?

Joep
 
Daar is geen oplossing voor. Althans: niet zonder JavaScript of zo, en ook daarmee zal het niet altijd (meer) lukken.
Overigens zijn ook in de komende versie van html (5) "_target" e.d. niet meer toegestaan.
In het verleden werd er grootscheeps misbruik van _target e.d. gemaakt om 'n gebruiker te 'vangen' in 'n site, of om reclame te tonen, of... Mede daarom kan inmiddels de gebruiker zelf in (vrijwel) elke browser opgeven hoe iets moet worden geopend. In mijn Firefox zou jouw _target gewoon geen effect hebben.
Daarnaast vinden heel veel mensen dat de gebruiker moet aangeven hoe hij of zij dit wil en niet de sitemaker. Voor bijvoorbeeld blinden is het echt ontzettend belangrijk dat ze hier zelf controle over hebben.

Kortom: gewoon weghalen en dan regelt de browser en/of gebruiker 't zelf.

Edit: _target e.d. zijn eigenlijk overblijfselen uit de tijd dat frames heel gebruikelijk waren.
 
Laatst bewerkt:
Mooi, ook die pagina in nu W3C valid, het gaat steeds makkelijker omdat al die pagina's op hetzelfde code is geschreven.
Dus als je op één pagina het probleem hebt opgelost, dan zit die zelfde fout vaak ook op de andere pagina. Snap je?:D
Ik zet dit onderwerp nog niet op, opgelost, omdat ik eerst mijn hele website W3C valid wil maken, maar ik verwacht geen grote problemen meer.

Joep
 
Ja, dat is het grote voordeel. Als je de html eenmaal in je vingers hebt, is je pagina vanaf 't begin 'goed'. Als je dan css voor de opmaak gebruikt, hoef je alleen maar de css te veranderen om ál je pagina's in een keer ook aan te passen.
Je moet 't even onder de knie krijgen, maar 't scheelt echt oceanen van tijd bij 't onderhoud. En 't is beter voor zoekmachines, spraakbrowsers e.d.

Ik heb nog 'n tip voor je die belangrijk is om beter toegankelijk te zijn voor spraakbrowsers e.d. Helaas spreekt dat de meeste mensen niet zo aan, maar wat goed is voor 'n spraakbrowser is ook goed voor je plaats in 'n zoekmachine. En dat spreekt veel meer mensen aan :)

'n <h1> is heel belangrijk voor 'n zoekmachine. Die hoort maar 1x op 'n pagina te staan. Dat klopt bij jou, maar erin staat 'n logo mat als alt: 'Logo'. Wat vindt de zoekmachine bij jou dus een van de belangrijkste teksten? 'Logo'.
Beter is om het logo gewoon apart te zetten en in de <h1> 'n soort paginatitel te zetten.

<h2> is voor minder belangrijk, <h3> voor nog minder, enz.
Je springt van de <h1> met Logo in één keer naar <h3> met Navigation en Related sites. Beter is om die 'n <h2> te geven, dan houd je de logische volgorde aan. Als de letters te groot zijn of zo gebruik je gewoon css om ze kleiner te maken.

Website bouwen als <h2> is prima, hoewel je daar ook 'n <h1> van zou kunnen maken in dit geval met iets als 'Alles voor het bouwen van je website' (ik roep maar iets).

Je hebt Het begin. Hosting enz. in 'n span en met <strong>. Ik zou daar 'n <h2> of <h3> van maken (afhankelijk van of je al 'n <h2> hebt gebruikt).
Dan heb je al die <br>'s ook niet nodig, want je kunt de <h2> dan gewoon 'n marge boven en/of onder geven. Het eerste deel maak je dan blauw en niet vet, het tweede deel zwart en vet. Veel makkelijker om later eventueel te wijzigen, want het staat centraal op 1 plaats in je css.
Door er 'n <h2> of <h3> van te maken ziet de zoekmachine dat 't belangrijke onderwerpen zijn. Nu is 't voor 'n zoekmachine (en 'n spraakbrowser e.d.) niet duidelijk dat de kopjes belangrijker zijn als herkenningspunt dan de tekst eromheen.

Moet je natuurlijk verder allemaal helemaal zelf weten, zijn maar tips.
Als je in Firefox de extensie Yellowpipe Lynx Viewer Tool installeert vanaf
https://addons.mozilla.org/nl/firefox/addon/1944
kun je zien hoe 'n zoekmachine je pagina ziet.

Als je in Firefox Web Developer installeert vanaf
https://addons.mozilla.org/nl/firefox/addon/60
kun je met Information -> View Document Outline de opbouw van je pagina met <h>'s zien, en krijg je 'n melding als er eentje mist.
 
Laatst bewerkt:
Goeroeboeroe zei:
Ja, dat is het grote voordeel. Als je de html eenmaal in je vingers hebt, is je pagina vanaf 't begin 'goed'. Als je dan css voor de opmaak gebruikt, hoef je alleen maar de css te veranderen om ál je pagina's in een keer ook aan te passen.
Je moet 't even onder de knie krijgen, maar 't scheelt echt oceanen van tijd bij 't onderhoud. En 't is beter voor zoekmachines, spraakbrowsers e.d.

Ik heb nog 'n tip voor je die belangrijk is om beter toegankelijk te zijn voor spraakbrowsers e.d. Helaas spreekt dat de meeste mensen niet zo aan, maar wat goed is voor 'n spraakbrowser is ook goed voor je plaats in 'n zoekmachine. En dat spreekt veel meer mensen aan :)

'n <h1> is heel belangrijk voor 'n zoekmachine. Die hoort maar 1x op 'n pagina te staan. Dat klopt bij jou, maar erin staat 'n logo mat als alt: 'Logo'. Wat vindt de zoekmachine bij jou dus een van de belangrijkste teksten? 'Logo'.
Beter is om het logo gewoon apart te zetten en in de <h1> 'n soort paginatitel te zetten.

<h2> is voor minder belangrijk, <h3> voor nog minder, enz.
Je springt van de <h1> met Logo in één keer naar <h3> met Navigation en Related sites. Beter is om die 'n <h2> te geven, dan houd je de logische volgorde aan. Als de letters te groot zijn of zo gebruik je gewoon css om ze kleiner te maken.

Website bouwen als <h2> is prima, hoewel je daar ook 'n <h1> van zou kunnen maken in dit geval met iets als 'Alles voor het bouwen van je website' (ik roep maar iets).

Je hebt Het begin. Hosting enz. in 'n span en met <strong>. Ik zou daar 'n <h2> of <h3> van maken (afhankelijk van of je al 'n <h2> hebt gebruikt).
Dan heb je al die <br>'s ook niet nodig, want je kunt de <h2> dan gewoon 'n marge boven en/of onder geven. Het eerste deel maak je dan blauw en niet vet, het tweede deel zwart en vet. Veel makkelijker om later eventueel te wijzigen, want het staat centraal op 1 plaats in je css.
Door er 'n <h2> of <h3> van te maken ziet de zoekmachine dat 't belangrijke onderwerpen zijn. Nu is 't voor 'n zoekmachine (en 'n spraakbrowser e.d.) niet duidelijk dat de kopjes belangrijker zijn als herkenningspunt dan de tekst eromheen.

Moet je natuurlijk verder allemaal helemaal zelf weten, zijn maar tips.
Als je in Firefox de extensie Yellowpipe Lynx Viewer Tool installeert vanaf
https://addons.mozilla.org/nl/firefox/addon/1944
kun je zien hoe 'n zoekmachine je pagina ziet.

Als je in Firefox Web Developer installeert vanaf
https://addons.mozilla.org/nl/firefox/addon/60
kun je met Information -> View Document Outline de opbouw van je pagina met <h>'s zien, en krijg je 'n melding als er eentje mist.
Klik om te vergroten...

Daar, kan ik wel wat mee hoor! Maar eerst ga ik mijn website W3C valid maken, daarna ga ik dat dan in orde maken.
Ook de Add-ons zijn erg handig.;)
 
Het koste wat tijd, maar dan heb je ook wel wat, want nu is mijn website W3C valid!

Bedankt voor jullie hulp.:)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan