XHTML VALID en CSS

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • zwpgangster

    Er zijn op het net en op het forum veel vragen omtrent XHTML valid website maken.

    Ik ga hieronder uitleggen en laten zien hoe je een xhtml valid website kan maken. En deel hierbij dus mijn ervaring voor mensen die nog helemaal of weinig ervaring met html en css hebben.
    Om te beginnen als je begint met het maken van een html bestand moet je de DOCTYPE + de link wat aangeeft of het xhtml is bovenaan zetten

    PHP Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">


    vervolgens gaan we verder met het maken van ons html bestand, nu gaan we de belangrijke data maken en deze zetten we tussen de <head></head> tags neer
    De title, de metatags en eventueel je stylesheet / javascripts includen.

    PHP Source Code

    1. <head>
    2. <title>WEBSITENAAM</title>
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <meta name="author" content="AUTEUR / DESIGNER WEBISTE" />
    5. <meta name="copyright" content="&copy; 2013" />
    6. <meta http-equiv="content-language" content="NL" />
    7. <meta name="Robots" content="index,follow" />
    8. <meta http-equiv="Cache-Control" content="no-cache" />
    9. <meta http-equiv="Expires" content="0" />
    10. <meta name="revisit-after" content="3" />
    11. <meta name="Refresh" content="30" />
    12. <link href="css/style.css" rel="stylesheet" type="text/css" />
    13. </head>
    Display All


    Nu gaan we de rest in het html bestand zetten, denk hierbij aan je header, content, footer en afbeeldingen etc.
    Dit alles ga zet je tussen de <body></body> tags

    PHP Source Code

    1. <body>
    2. <div id="container">
    3. <div id="header">WEBSITENAAM</div>
    4. <div id="navigatie">
    5. <ul>
    6. <li><a href="#">link 1</a></li>
    7. <li><a href="#">link 2</a></li>
    8. <li><a href="#">link 3</a></li>
    9. <li><a href="#">link 4</a></li>
    10. <li><a href="#">link 5</a></li>
    11. </ul>
    12. </div>
    13. <div id="content">
    14. <p>AL JE CONTENT TEKSTEN, TABELLEN ETC.</p>
    15. <p><img src="PAD NAAR AFBEELDING" alt="AFBEELDINGNAAM" title="AFBEELDINGNAAM" /></p>
    16. </div>
    17. <div id="footer">
    18. <div class="copyright">Copyright&copy; 2013 WEBSITENAAM - alle rechten voorbehouden</div>
    19. </div>
    21. </div>
    22. </body>
    23. </html>
    Display All



    Let bij het volgende altijd erop dat als je een afbeelding invoegd dat je altijd de alt="" en title="" tag vervolgd door een / achter gebruikt zo crieeer je een XHTML valid pagina. De / gebruik je ook altijd bij je meta tags en javascripts /css tags.

    Pagina compleet:
    index.html:

    PHP Source Code

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>WEBSITENAAM</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <meta name="author" content="AUTEUR / DESIGNER WEBISTE" />
    7. <meta name="copyright" content="&copy; 2013" />
    8. <meta http-equiv="content-language" content="NL" />
    9. <meta name="Robots" content="index,follow" />
    10. <meta http-equiv="Cache-Control" content="no-cache" />
    11. <meta http-equiv="Expires" content="0" />
    12. <meta name="revisit-after" content="3" />
    13. <meta name="Refresh" content="30" />
    14. <link href="css/style.css" rel="stylesheet" type="text/css" />
    15. </head>
    16. <body>
    17. <div id="container">
    18. <div id="header">WEBSITENAAM</div>
    19. <div id="navigatie">
    20. <ul>
    21. <li><a href="#">link 1</a></li>
    22. <li><a href="#">link 2</a></li>
    23. <li><a href="#">link 3</a></li>
    24. <li><a href="#">link 4</a></li>
    25. <li><a href="#">link 5</a></li>
    26. </ul>
    27. </div>
    28. <div id="content">
    29. <p>AL JE CONTENT TEKSTEN, TABELLEN ETC.</p>
    30. <p><img src="PAD NAAR AFBEELDING" alt="AFBEELDINGNAAM" title="AFBEELDINGNAAM" /></p>
    31. </div>
    32. <div id="footer">
    33. <div class="copyright">Copyright&copy; 2013 WEBSITENAAM - alle rechten voorbehouden</div>
    34. </div>
    36. </div>
    37. </body>
    38. </html>
    Display All


    Link voor het testen of jouw html bestand geen fouten bevat en xhtml valid is
    validator.w3.org/

    Hopelijk hebben jullie hier wat aan

    Gr Mick

    1,511 times read

Comments 3

  • swaffelaar -

    In je titel spreek je over XHTML VALID en CSS, maar in je bericht zie ik niets over de CSS terug.
    Misschien een idee dat er alsnog bij te zetten?

  • zwpgangster -

    Bedankt voor je reactie K.Rens, ik heb de link erbij gezet

  • K.Rens -

    Bedankt om dit te delen.
    Ik zou wel nog een link toevoegen naar een xhtml validator als ik jou was.

    Verder bevat je code bv "no-cache".
    Dit zijn dingen die ik persoonlijk afraad. Je gaat hiermee de browser vertellen dat de site niet gecached moet worden en bijgevolg gaat hij trager aanvoelen bij je bezoekers.
    Ook de revisit-after gebruikt bijna geen enkele zoekmachine nog.
    De Refresh lijkt me ook onnodig.

    Op zich een goede blog, maar ik zou je beperken tot het strict noodzakelijke qua meta tags ;)