VALIDATION W3C


Maintenant que l'on a réalisé un document html basique, on va s'intéresser à un aspect indispensable: la vérification du code par un robot spécialisé, le W3C, qui indique les éventuelles anomalies.
Par exemple, nous avons créé le fichier html suivant nommé monfichier.htm, lequel contient quelques erreurs


<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <meta name="description" content="programmation internet"> <meta name="keywords" content="programmation,html,php,javascript"> <meta name="author" content="Claude Fernandez"> </head> <body>

----------------------------------------
<b>MON SUPER GRAND TITRE</b>
----------------------------------------

<b>MON GRAND TITRE</b></b>

<i><b>mon sous-titre</i></b>

-mon sous-sous-titre

<i>.mon titre minus</i>

<img src="monimage.png">

<TABLE style="border:1px solid black;"> <tr> <td style="border:1px solid black;"> type d'article </td> <td style="border:1px solid black;"> nombre </td> </tr> <tr> <td style="border:1px solid black;"> article 1 </td> <td> 250 </td"> </tr> <tr> <td style="border:1px solid black;"> article 2 </td> <td style="border:1px solid black;"> 400 </td> </tr> </TABLE> </b> </body> </html>



----------------------------------------
MON SUPER GRAND TITRE
----------------------------------------

MON GRAND TITRE

mon sous-titre

-mon sous-sous-titre

.mon titre minus

fleur

type d'article nombre
article 1 250
article 2 400



Procédure: aller sur Google recherche: noter validation w3c, ce qui amène à la page http://validator.w3.org/. Là, choisir Validate by File Upload

Voilà la conclusion du W3C:

validation

Prenons les erreurs signalées une à une au niveau du code:

<title></title> Titre manquant. Pas grave si on ne publie pas sur internet. Code rectifié: <title>Ma première page</title>

<b>MON GRAND TITRE</b></b>
Balise fermée 2 fois au lieu d'une. Code rectifié: <b>MON GRAND TITRE</b>


<i><b>mon sous-titre</i></b> Intervertion des balises i et b. Code rectifié: <b><i>mon sous-titre</i></b>

<img src="monimage.png"> Ce qu'il veut ici, c'est un titre pour l'image. C'est uniquement pour le référencement sur internet. Code rectifié: <img src="monimage.png" alt="fleur">

Opération normalement à refaire jusqu'à ce que le validateur affiche un magnifique bandeau vert au lieu d'un rouge.


IMPLICATIONS DE LA VALIDATION W3C

Le fragment de code rpécédent comportait plussieurs anomalies, pourtant sur Firefox, le texte apparaissait normalement. Alors on peut se demander si la vérification par le W3C, ça sert à quelque chose. Il faut savoir que les navigateurs corrigent d'eux-mêmes les erreurs de programmation évidentes. C'est un traquenard justement car une erreur corrigée par un navigateur peut ne pas l'être par un autre. Donc, bien corriger le code par le W3C pour éviter les problèmes.

Seconde erreur pas toujours comprise. À l'inverse, une validation réussie par le W3C ne signifie en aucun cas que la page apparaîtra comme on le souhaite identiquement sur tous les navigateurs. De nombreuses caractéristiques ne font pas partie des tests de compatibilité auxquels doivent obéir les navigateurs. En supposant que 2 navigateurs satisfassent 100 pour 100 à ces tests, ils ne donneront pas forcément la même pasge. Donc, la validation W3C, ça ne dispense pas d'essayer sur différents navigateurs.

Un exemple important à connaître:

-la dimension d'une police est différente pour Firefox et Chrome par exemple. Problème si on veut réaliser une page d'accueil en valeurs absolus de pixels. Et on peut exprimer les dimensions en px, em ou mm, ça ne résout pas le problème. En revanche, le cadre, lui, mesure exactement la même dimension.

Exemple: texte 20px dans cadre 100px x 80px

sur Firefox:

texte firefox

sur Chrome:

texte chrome

On remarquera que la limite inférieure du cadre arrive juste au-dessus de la 4ème ligne "mon commentaire" dans le cas de Firefox et qu'elle mord à un tiers sur la ligne dans le cas de Chrome, différence qui est encore mieux objectivée par la différence de taille des caractères.

Donc, ça veut dire quoi? Que des pages d'accueil trop compliquées, impliquant des dimensions précises, ça risque de ne pas fournir un bon résultat.

SOMMAIRE    SUITE