Attention, cette traduction reste en cours et s'effectue dans le cadre de l'amorçage du futur groupe CHIC. Ce tutoriel est paru initialement chez Westciv et s'incrit aussi dans une volonté de mettre ce journal personnel aux normes avec une DTD. La page risque fortement de ne pas être valide et comme toujours, ... seul le lien original fait référence.

Validation : CSS et HTML

Si votre HTML n'est pas valide ou si vous utilisez de la syntaxe dans votre CSS qui n'est pas correcte, il y aura alors de grandes chances que vos pages web basées sur CSS ne fonctionnent pas. Cette section finale étudie le processus de validation et de vérification de votre code HTML et CSS.

Valider le HTML

Pourquoi valider ?

Les navigateurs qui supportent les feuilles de style sont très difficiles sur le HTML. Des problèmes mineurs avec votre HTML pourraient bien "fonctionner" par eux-mêmes, peuvent provoquer toutes sortes de dilemmes quand les feuilles de styles sont appliquées. C'est la raison pour laquelle nous avons besoin d'aller au delà du test-type de nos pages "ça s'affiche bien dans IE et Netscape sur mon ordinateur". Pour vous assurer que votre HTML est correct, il a besoin d'être validé.

Quelques outils d'édition HTML comme HomeSite ont des validateurs intégrés. Il existe aussi quelques très bons éditeurs en ligne, provenant de l'Aide HTML et du Consortium W3C (W3C). Vous pouvez aussi trouver des validateurs téléchargeables qui fonctionnent sur votre propre ordinateur.

Qu'est-ce que valider ?

Les validateurs vous garantissent que votre HTLM se conforme à l'une des recommandations du World Wide Web Consortium pour le HTML. Valider est une bonne habitude à avoir parce que cela garantit que vos pages fonctionneront sur des navigateurs autres que ceux que vous avez "testés", tout spécialement ceux qui arriveront à l'avenir, et qui peuvent ne pas maintenir les bugs et l'indulgence générale au HTML imparfait que les navigateurs actuels tendent à avoir.

Pour faire court, la dernière recommandation HTML provenant du W3C est le HTML 4.0. Cette version du HTML a trois parfums, strict, transitionnel (ou loose) et frameset. La variante stricte exclut tout balisage de présentation (tels que les éléments <font>), alors que le transitionnel inclut ces éléments. Frameset inclut un support pour les frames.

Au moment de valider vos pages, vous décidez de quelques variantes ou "définition du type de document" - DTD) que vous voulez valider. Laquelle devriez-vous choisir ? C'est l'endroit où le W3C a quelque chose à dire, en tant que section de la définition pour le HTML 4.0 strict.

Les auteurs devrraient utiliser la 'Strict DTD' à chaque fois que possible, mais peuvent utiliser la DTD Transitional quand le support pour l'attribut et les éléments de présentation est requis.

Je recommanderais de toujours essayer la validation stricte. Dans ce cas, vous serez prêt pour les futures versions de HTML.

Aussi, comment puis-je produire ça ?

Selon le validateur que vous utilisez, l'approche est légèrement différente, mais suffisamment proche qu'en en discutant, vous devriez capter la grande image.

Tout d'abord, vous avez besoin d'un moyen de dire au validateur quelle DTD vous êtes en train de valider. Vous faites ça en ajoutant un lien au-dessus de tout le HTML de votre document (y compris le tag d'ouverture html) comme ceci :

Vous utilisez la DTD strict si votre page ne contient aucun balisage de présentation, et la DTD frameset si vos pages ont des cadres, sinon utilisez la DTD loose. Notez que celles-ci sont sensibles-à-la-casse.

Maintenant la page est prête à être validée. Il existe deux validateurs en ligne importants, tout comme des validateurs intégrés dans les applications, ou qui fonctionnent comme des applications autonomes.

Validateurs en ligne

HTML Help a un validateur en ligne dans lequel vous pouvez coller tout aussi bien du HTML à l'intérieur, ou avec lequel vous pouvez valider vos sites actuels en lui donnant les URLs.

Le "World Wide Web Consortium" a un validateur HTML. Vous pouvez soit vérifier une page déjà en ligne, ou téléverser une page pour vérification.

Les deux retournent une liste des problèmes avec la page qui listera les difficultés ligne par ligne. A première vue, ce feedback peut sembler un peu effrayant, mais ce n'est pas sorcier.

Validateurs autonomes

Pour une liste ds validateurs téléchargeables que vous pouvez faire fonctionner sur votre propre ordinateur, regardez TUCOWS, qui a des sections pour les validateurs Macintosh et Windows.

Validez vos Feuilles de Style

Tout comme il est important de vous assurer que votre HTML est valide, il est aussi important de vous assurer que votre feuille de style est correcte. Il est commun sur les groupes de nouvelles des feuilles de style de voir de nouveaux items déplorer un bug dans un navigateur, quand la cause est en fait une syntaxe incorrecte de feuille de style envers laquelle le navigateur est indulgent. Attention au fait qu'Internet Explorer peut se montrer très indulgent envers les feuilles de style invaldies. Si vous avez l'habitude de "tester" vos pages web avec Internet Explorer pour Windows, vous pourriez avoir quelques surprises dans un autre navigateur qui supporte CSS.

L'exemple le plus répandu est de laisser des unités de valeurs. Par exemple, la règle suivante est une CSS invalide. Les navigateurs devraient l'ignorer.

h1 {margin-left: 12}

Ceci spécifie que la marge gauche pour les éléments <h1> devrait être de 12. Mais 12 quoi ? Ce n'est pas spécifié, et par conséquent, c'est une CSS invalide, et ce devrait être ignoré par les navigateurs. Netscape Navigator 4 fait ainsi, mais Internet Explorer 4 et 5 pour Windows traite joyeusement cela comme 12 pixels. Souvent les développeurs considèrent que Navigator est bogué (du fait que la feuille de style "ne fonctionne pas") quand en fait il se comporte correctement en ignorant la règle. Internet Explorer "fonctionne", mais il est bogué.

A moins de connaître la spécification (je ne la connais pas et supposes que très peu de personnes sur terre la connaissent), comment pouvons-nous nous assurer que nos feuilles de styles sont valides ? Vérifiez leurs syntaxes. Il existe deux bons validateurs qui vous aideront à vous assurer que votre feuille de style est valide, et iront même jusqu'à vous prévenir de problèmes possibles.

Vous pouvez valider vos feuilles de style en utilisant un validateur en ligne provenant du World Wide Web Consortium.

HTML Help fournit aussi un validateur CSS en ligne. En plus de valider votre CSS, il vous prévient aussi des problèmes possibles d'utilisabilité avec vos feuilles de style.

Utiliser chacun d'eux est aussi simple que de coller le code CSS ou l'URL de la feuille de style à l'intérieur d'un champ. Aussi lancez-vous, qu'attendez-vous pour y aller ?

I am Posh - are you? (le 22 avril 2007 par Marko Mrdjenovic) Annoté

Un bref regard sur ce journal personnel me fait ressentir la désagréable sensation de ne pas du tout être Posh ! Les travaux risquent d'être longs et démarreront calmement par la localisation francophone du mot Posh.