generationcyb.net pointcyb lien vers les points cyb
Inscription à la lettre d'information | Fil infos rss 

 

Accueil > Boîte à outils > Sites et blogs

Apprendre à rendre son site conforme aux normes w3c


Version imprimable Version imprimable


Principales règles et méthodologie pour rendre un site conforme aux normes w3c

Pourquoi des normes ?

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

Principales règles

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' />

Outils de validations

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.

Exemple d’une refonte de page

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



Répondre à cet article

Forum

Contact | Plan du site | Espace privé
Dernier ajout : vendredi 24 mai 2013 | 821 articles sur ce site.

Generationcyb.net est motoris´ par Spip 1.9.2e associ´ a un squelette spip Rizom
Sauf indication, les articles sont mis a disposition sous un contrat Creative Commons
Ministere en charge de la jeunesse Institut national de la jeunesse et de l'education populaire Information jeunesse Centre d'information et de documentation jeunesse