Sur le même sujet
Le consortium w3c est un organisme indépendant qui veille à l’évolution des standards Internet. Il réunit les principaux acteurs de l’Internet (entreprises, développeurs, usagers). Son but est de fabriquer les régles des langages et protocoles du web.
Ces règles techniques communes sont la garantie du fonctionnement technique du web mais aussi de son interopérabilité.
Pour chaque langage, le w3c publie une norme de référence. Cela permet à tous d’avoir un langue commune quelques soient son navigateur, sa langue, sa plateforme, …
Exemple : Les spécifications du XHTML
Lorsque vous concevez un site internet, il est important de respecter ses spécifications pour que les visiteurs (humains ou robots) puissent consulter le site sans surprise.
Respecter les normes w3c est le point de départ d’une démarche de qualité et d’accessibilité pour un site Internet
Voici une liste mémo des régles à respecter pour avoir un site conforme
Règle 1 : On se présente avant de parler
Spécifier la version de HTML dans lequel vous écrivez votre page
Exemple :Pour une page XHTML 1.0 Transitionnel écrite en français, vos pages commenceront par :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
Règle 2 : On ferme les portes que l’on a ouverte
Fermer tous vos tags HTML <a href="">...</a>.
Ne pas oublier les tags autofermant comme <img src="..." alt="" />
Règle 3 : Vive les poupées russes !
Respecter l’emboitement des balises
<a><b><c>....</c></b></a> est correct
<a><b><c>....</a></b></c> est incorrect
Règle 4 : Le sage sépare le fond et la forme
On appelle cela aussi le web semantique. L’objectif du code HTML est uniquement de décrire et de hiérarchiser des élèments d’informations. Par exemple un titre placé avec <h1> doit être plus important qu’un élément placé en <h2>. Il s’agit uniquement d’organiser l’information. L’aspect visuel de cette information ne sera pas décrit par le HTML mais par le langage CSS.
Ce qui explique que dans le XHTML, les tags ont un nombre d’attributs limités.
Exemple :
<body color="#fffff" bgcolor="#ff6600"> est incorrect
<body> est correct
On va placer toutes les informations visuelles à part dans une feuille de style CSS
/* look.css */
body {
color:#fffff;
backgroundg:#ff6600;
}
Règle 5 : On nomme toutes les images
Sur toutes les images, ne pas oublier de compléter l’attribut alt qui décrit le contenu de l’image
Exemple :<img src='tigre.jpg' alt='un tigre de sibérie' />
Pour vérifier vos pages l’outil de référence est le validateur du w3c
Pour les utilisateurs de l’extension webdevelopper de Firefox, il existe un onglet qui permet de soumettre les pages à une série de validateurs
Les utilisateurs de SPIP disposent d’un plugin w3 go home qui permet de vérifier toutes les pages de votre site.
Je teste la page :
http://www.generationcyb.net/-Stand...
Le résultat au validateur donne :
http://validator.w3.org/check?verbo...
On obtient 6 erreurs. Au travail !
Sur chaque erreur, il y a une précision sur le type d’errreur :
A la ligne de 389 de mon code source, j’ai une erreur Line 389, Column 15 : document type does not allow element "p" here ; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag .
Il s’agit d’une erreur de grammaire. On analyse alors le code XHTML :
<p class="spip">
<span class="titreart">- <a >Accessibilité...</a></span><br />
<p class="spip"><span><img /></span>Gaëlle Fily est </p>...
En effet, j’ai placé un <p> à l’intérieur d’un autre un <p> ce qui est interdit.
Petit à petit, je corrige mes erreurs en vérifiant à chaque fois sur le validateur si l’erreur est bien corrigée.
Au final, si vous corrigez toutes les erreurs on obtient à la validation :
Bravo : votre page est valide XHTML !
Mis en ligne le jeudi 23 août 2007
Bonjour, Bravo pour cet article. Il est simplement dommage que la page qui le contient comporte 49 erreurs au validateur w3c.
Il est vrai que SPIP ne facilite pas toujours les choses en ce domaine.
Bravo quand même.
fiche pro2spip
contributions spip contrib
sites favoris (del.icio.us)
- Analyse des CSS de Socanco
- Lebanon 2007 : Analyse de la CSS du squelette
- Comment analyser une page HTML et sa feuille de style CSS ?
- Apprendre à rendre son site conforme aux normes w3c
- Personnaliser le squelette socanco
Generationcyb.net est motoris´ par Spip 1.9.2e
associ´ a un squelette spip Rizom
