CSS : on reprend tout à zéro ! (10ème épisode)
Par Joe Gillespie
Cet article est le dixième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.
Doctypes et validation
Nous voilà arrivés à la dixième leçon de « On reprend tout à zéro », et il faut que je vous avoue quelque chose. Tout ce que je vous ai montré jusqu'ici, le balisage, les pages d'exemples, eh bien tout ceci est faux ! Bon, en fait, ça va sans doute fonctionner correctement (sauf si vous utilisez un navigateur trop ancien), mais si vous testez vos pages avec un vérificateur de syntaxe, ou bien si vous les soumettez à un quelconque programme de validation, elles ne passeront pas l'épreuve.
Vous vous demandez peut-être ce qu'est un programme de validation.
Vous connaissez sûrement les correcteurs d'orthographe. Votre programme de traitement de texte en contient vraisemblablement un. Ils servent à comparer les mots que vous avez tapés avec ceux de leur dictionnaire intégré, et vous avertissent s'ils ne trouvent pas de concordance. Peut-être le mot n'est-il pas dans le dictionnaire, mais peut-être aussi ne l'avez-vous pas tapé correctement. Dans les traitements de texte les plus élaborés, votre texte peut également subir une vérification grammaticale, et si vous tapez une phrase qui ne contient pas de verbe ou qui contient trop d'occurences du mot « et », ils vous harcèleront sans arrêt.
Pour qu'un correcteur d'orthographe ou de grammaire puisse faire son travail, il doit savoir quelle langue vous utilisez. Un correcteur d'anglais britannique est déjà différent d'un correcteur d'anglais américain, alors que dire de ceux qui utilisent une toute autre langue que l'anglais ?
De même qu'on corrige son anglais, son français, ou toute autre langue, on peut (et on doit !) corriger également son HTML et son CSS. Si votre anglais contient une erreur, les gens penseront qu'il s'agit d'une coquille, mais comprendront ce que vous voulez dire, il n'y aura pas grand-mal. En revanche, une petite erreur en HTML ou en CSS, c'est une toute autre histoire. Quelque chose d'aussi insignifiant en apparence qu'une virgule ou un guillemet mal placés peut faire toute la différence entre une page qui fonctionne ou non : tout dépend du type d'erreur et du navigateur qui essaie de comprendre ce qui se passe. Il est très recommandé de « vérifier l'orthographe » de votre HTML comme de votre CSS avec un « correcteur de syntaxe » ou un « validateur ».
L'un des grands avantages dont vous bénéficiez si vous utilisez un éditeur HTML de bonne qualité, c'est qu'il contient un correcteur de syntaxe intégré. Vous ne trouverez pas cela avec de simples éditeurs de texte polyvalents. Si vous avez un éditeur HTML comme HomeSite ou BBEdit, ou bien un éditeur WYSIWYG tel que Dreamweaver ou GoLive, vous pourrez vérifier votre balisage et si possible trouver des suggestions pour en corriger les erreurs. Si vous ne possédez pas de tels programmes, vous pouvez utiliser les validateurs en ligne offerts par le W3C : le validateur HTML et le validateur CSS du W3C, où vous pouvez tout simplement envoyer vos fichiers et recevoir un rapport immédiat indiquant la liste exhaustive de vos erreurs, sauf si vous n'en avez commis aucune !
Bien entendu, le programme de correction doit d'abord savoir quel « langue » vous utilisez pour votre balisage : il y a différentes « gammes » de HTML. Jusqu'ici, tous les exemples que j'ai montrés sont écrits en HTML 4.01 : il s'agit de la version actuelle, et c'est la plus répandue. Mais il y a différentes versions de HTML 4.01 : « Strict », « Transitional » et « FrameSet ».
Le Strict est constitué d'un ensemble de règles qui définissent très strictement ce que l'on peut faire ou ne pas faire en HTML.
Le Transitional est un peu plus compréhensif, et vous permet d'utiliser un HTML un peu plus ancien ainsi que quelques particularités propres à certains navigateurs.
Le Frame Set n'est plus beaucoup utilisé de nos jours. Nous n'avons d'ailleurs pas évoqué les « frames » (cadres) dans cette série de cours, dans la mesure où ils sont largement passé de mode depuis l'arrivée des CSS.
La plupart des gens se contentent très bien du « Transitional » parce qu'il leur laisse un peu de souplesse, mais il y en a d'autres qui aiment que tout soit bien net et règlementaire et qui préfèrent utiliser le « Strict ».
Pour que le navigateur sache quel langage vous utilisez pour votre balisage, et dans quelle version, placez une déclaration de Doctype tout en haut de la page, au-dessus de la première balise <html>. En voici un exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Je ne vais pas analyser tout de suite tout ce que cela signifie ; contentez-vous de savoir qu'avec ce charabia au sommet de votre page, le vérificateur de syntaxe ou le validateur sera capable de faire correctement son travail. Il sait désormais quels sont les standards que vous voulez appliquer à votre page, et va pouvoir la juger en fonction de ceux-ci.
Dès lors que j'ai placé un Doctype, je peux passer mes pages au vérificateur de syntaxe de mon éditeur HTML et m'assurer qu'elles sont impeccables. Maintenant qu'on a réglé ce petit détail annexe, revenons au style de notre page !
http://www.wpdfd.com/editorial/basics/cssbasics10.html