Valider une DTD personnalisée

Comment valider des documents XHTML utilisant une DTD personnalisée.

Traduction de l’article Validating a Custom DTD. Translated with the permission of A List Apart Magazine (http://alistapart.com) and the author[s].

Dans son article de cette même édition (NDT : sur A List Apart – Edition NÂ°194), Peter-Paul Koch propose l’ajout d’attributs personnalisés dans les éléments de formulaire pour déclencher des évènements spéciaux. Le valideur du W3C ne validera pas un document avec de tels attributs, parce qu’ils ne font pas partie des spécifications XHTML.

Cet article va vous permettre :

de développer des DTD sur mesure afin de déclarer des attributs personnalisés
de valider des documents utilisant ces attributs.

Voici un exemple de balisage HTML personnalisé qui nous permettra :

de spécifier la longueur maximale de la zone de texte
de déterminer si un élément du formulaire est obligatoire ou non :

<form action="http://example.com/cgi-bin/example.cgi">
<p>
  Name:
  <input type="text" name="yourName" size="40" />

</p>
<p>
  Email:
  <input type="text" name="email" size="40"
  required="true" />

</p>
<p>
  Comments:<br />
  <textarea maxlength="300" required="false"
  rows="7" cols="50"></textarea>

</p>
<p>
  <input type="submit" value="Send Data" />
</p>
</form>

Qu’est ce qu’une DTD ?

La Définition du Type de Document (DTD) est un fichier qui spécifie quels éléments et attributs existent dans un langage balisé et comment ils apparaissent. Ainsi la DTD XHTML précise que

est un élément valide et qu’il peut apparaître dans une balise

mais pas dans . L’adresse URL, à la fin de la déclaration DOCTYPE, pointe à l’endroit où l’on va trouver le fichier de DTD pour la version HTML que l’on va utiliser. Ni votre navigateur, ni le valideur du W3C ne parcourt le web pour récupérer la DTD – Ils ont une liste des DOCTYPEs valides en mémoire et utilisent l’URL pour les identifier uniquement. Comme nous le verrons plus loin, ce comportement change en cas de DTD personnalisée.

Spécifier les attributs

Ajouter des attributs dans une DTD existante est facile. Pour chaque attribut, vous devez spécifier à quel élément il est associé, quel est son nom, quel type de données il peut contenir et s’il est obligatoire ou facultatif. Ces informations sont spécifiées suivant le modèle :

<!ATTLIST elementName attributeName type optionalStatus >

Pour ajouter l’attribut maxlength à l’élément , il suffit d’écrire :</p> <pre><!ATTLIST textarea maxlength CDATA #IMPLIED> </pre> <p>La spécification CDATA signifie que la valeur de l’attribut peut contenir n’importe quels caractères; ainsi maxlength= »300″ ou maxlength= »ten » seront tous les deux valides. Pour les données « ouvertes », les DTD ne nous permettent pas d’être plus précis. La spécification #IMPLIED signifie que l’attribut est optionnel. Un attribut obligatoire serait spécifié par #REQUIRED.<br /> Quand un attribut peut contenir une liste de valeurs, vous pouvez les spécifier dans la DTD. C’est le cas pour notre attribut required, qui ne peut contenir que true ou false. Les valeurs sont sensibles à la casse; dans notre exemple seule les valeurs en minuscules sont spécifiées, donc la valeur TRUE ne sera pas considérée comme valide. </p> <pre><!ATTLIST textarea required (true|false) #IMPLIED> </pre> <p>Attention à la confusion: l’attribut s’appelle « required » mais n’est pas obligatoire dans tous les éléments <textarea>, car c’est un attribut optionnel. Dans l’ensemble, les modifications des spécifications dans la DTD ressemblent à ceci :</p> <pre><!ATTLIST textarea maxlength CDATA #IMPLIED> <!ATTLIST textarea required (true|false) #IMPLIED> <!ATTLIST input required (true|false) #IMPLIED> <!ATTLIST select required (true|false) #IMPLIED> </pre> <p class="note"> Note: Ajouter de nouveaux attributs à des éléments existants est facile; ajouter de nouveaux éléments est plus compliqué et n’est pas le sujet de cet article. </p> <h2>Placer les attributs</h2> <p>Maintenant que vous avez défini des attributs personnalisés, comment les placer pour qu’ils soient pris en compte à la validation? La meilleure place serait comme un sous-ensemble directement dans votre document:</p> <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [ <!ATTLIST textarea maxlength CDATA #IMPLIED> <!ATTLIST textarea required (true|false) #IMPLIED> <!ATTLIST input required (true|false) #IMPLIED> <!ATTLIST select required (true|false) #IMPLIED> ]> </pre> <p>Si vous passez un tel fichier au travers de la validation du W3C, il va valider merveilleusement bien. Si vous téléchargez les fichiers d’exemple pour cet article et validez le fichier internal.html, vous pourrez le voir par vous-même. Malheureusement, quand vous affichez ce fichier dans votre navigateur, les caractères <code><br /> ]></code> vont apparaitre à l’écran. Il n’y a aucun moyen de contourner ce bug, on peut donc abandonner directement cette méthode. </p> <h2>Modifier la DTD</h2> <p>Une autre méthode consiste à obtenir la DTD de XHTML Transitional et d’ajouter les modifications directement dans ce fichier. La version originale de cette DTD est le fichier xhtml1-transitional.dtd dans le répertoire dtd des fichiers d’exemples accompagnant cet article. Vous y trouverez aussi 3 fichiers avec l’extension .ent. Ces fichiers définissent toutes les entités que vous utilisez en HTML, comme ’ et ñ. Vous devez garder tous ces fichiers ensemble dans le même dossier.</p> <p>Le fichier personnalisé, nommé xhtml1-custom.dtd est créé en ajoutant les nouveaux attributs à la fin du fichier xhtml1-transitional.dtd. Quand vous ajoutez des attributs, faites-le à la fin du fichier pour vous assurer que tout ce à quoi vous faites référence a déjà été défini.</p> <h2>Changer le DOCTYPE</h2> <p>Vous devez maintenant changer l’insrtuction <!DOCTYPE > de votre fichier HTML pour indiquer l’utilisation de votre « version » personnalisé de XHTML. Comme la nouvelle DTD ne fait pas partie des DTD public enregistrée, le DOCTYPE n’utilisera pas le spécificateur PUBLIC. Il sera remplacer par le mot-clé SYSTEM suivi de l’emplacement de la DTD personnalisée. Ce chemin peut être relatif ou absolu, il peut même être une URL si votre fichier DTD est sur un autre serveur. Le chemin doit pointer vers l’emplacement exact de votre fichier ! Le fichier custom.html dans les exemples de cet article utilise le chemin relatif: </p> <pre><!DOCTYPE html SYSTEM "dtd/xhtml1-custom.dtd"> </pre> <p>Quand vous essayez d’utiliser le valideur du W3C sur ce fichier, il rejette le document parce qu’il n’utilise que les DTD qu’il connait et ne va pas chercher les DTD personnalisées.</p> <h2>Utiliser un valideur différent</h2> <p>La solution consiste à utiliser un valideur différent qui utilisera bien l’URL spécifiée pour vérifier la validité du document. Comme il s’agit d’un document XHTML, il est possible d’utiliser n’importe quel analyseur XML qui fait de la validation. Dans cet article nous allons utiliser l’analyseur Xerces disponible sur <a href="http://xml.apache.org">xml.apache.org</a>. Cet analyseur est écrit en Java(tm), donc Java doit être installé sur votre système. La décompression de l’archive Xerces va créer un doccier xerces-2_6_2 (ou n’importe quelle autre version courante). Par la suite, nous supposerons que vous avez décompresser l’archive à la racine du disque C: sous Windows ou vers /usr/local sous Linux. </p> <p>Le programme Counter fait partie des exemples fournis avec Xerces. Ce programme compte le nombre d’éléments, d’attributs, d’espace ignorables et de caractères apparaissants dans un document XML (ou dans notre cas XHTML). Ce programme permet d’activer une option de validation lors de l’analyse, le rendant parfait pour cette tache. Vous pouvez lancer le programme Counter (qui devient notre « valideur ») à partir d’un fichier batch dans Windows ou à partir d’un script shell dans Linux. Voici le fichier batch, nommé validate.bat. Il n’y a qu’une ligne de commande, mais nous l’afficherons sur plusieurs lignes pour que cela tienne sur la page.<br /> Notez qu’il y a un espace avant le mot « dom » et après « -v ».</p> <pre>java -cp c:\xerces-2_6_2\xercesImpl.jar; » c:\xerces-2_6_2\xmlParserAPIs.jar; » c:\xerces-2_6_2\xercesSamples.jar dom/Counter -v » %1 %2 %3 %4 %5 %6 %7 %8 </pre> <p>Voici le script shell, nommé validate.sh.</p> <pre>java -cp /usr/local/xerces-2_6_2/xercesImpl.jar:\ /usr/local/xerces-2_6_2/xmlParserAPIs.jar:\ /usr/local/xerces-2_6_2/xercesSamples.jar \ dom/Counter -v $1 $2 $3 $4 $5 $6 $7 $8 </pre> <p>Bien sur si vous avez décompressé l’archive de Xerces à un autre endroit, vous devrez changer les noms de chemin. Une fois ceci mis en place, il vous suffit de taper la commande suivante sous l’invite de commande Windows pour valider le fichier custom.html :</p> <pre>validate custom.html </pre> <p>Ou celle-ci sous l’invite de commande Linux:</p> <pre>./validate.sh custom.html </pre> <p>Si le fichier est valide, vous recevrez un message donnant le nom du fichier et quelques statistiques à son propos, comme ceci: </p> <pre>custom.html: 543;50;0 ms (15 elems, 20 attrs, 9 spaces, 43 chars) </pre> <p>Si le fichier n’est pas valide, vous obtiendrez des messages d’erreur. Par exemple, si vous essayer de valider un fichier badfile.html contenant ces erreurs:</p> <pre><p>Email: <input type="text" name="email" size="40" required="yes" /></p> <p>Comments:<br /> <textarea maxlength="300" inquirer="false" rows="7" cols="50"></textarea> </pre> <p>Vous obtiendrez cette sortie de l’analyseur:</p> <pre>[Error] badfile.html:12:70: Attribute "required" with value "yes" must have a value from the list "true false ". [Error] badfile.html:14:63: Attribute "inquirer" must be declared for element type "textarea" badfile.html: 611;82;0 ms (15 elems, 20 attrs, 9 spaces, 43 chars) </pre> <h2>Autre méthode de validation</h2> <p>Si vous utilisez l’éditeur <a href="http://www.jEdit.org">jEdit</a>, vous pouvez télécharger le plugin XML. Si votre fichier porte l’extension xhtml, jEdit utilisera la DTD personnalisée pour la validation comme spécifié dans le DOCTYPE.</p> <h2>Conclusion</h2> <p>Il est facile de spécifier des attributs supplémentaires pour des éléments XHTML; avec un peu de travail, vous pourrez mettre en place un valideur pour vérifier vos fichiers avec votre version personnalisée HTML. <a href="http://www.alistapart.com/d/customdtd/custom_dtd_sample_files.zip">Télécharger tous les fichiers d’exemple de cet article</a> et c’est parti! </p> <h2>À propos de l’auteur</h2> <p><a href="mailto:catcode@catcode.com">J. David Eisenberg</a> est programmeur et professeur habitant à San Jose, CA avec son chat, Marco Polo. La plupart de son travail porte sur XML, Java, JavaScript et Perl. Il est aussi l’auteur d’un livre sur <a href="http://oreilly.com/catalog/9780596002237/">le format d’images vectorielles SVG</a>. Plus d’information sur <a href="http://catcode.com/narrative.html">catcode.com/narrative.html</a>.</p> <p class="meta">Cet article a été publié le 03/03/2005 par Seb</p> </div> </section> <footer id="footer"> <div class="inner"> <a href="http://z720.net" title="z720.net v6.dev ">z720.net</a> est propulsé par <a href="http://pico.dev7studios.com">Pico</a> via <a href="http://github.com/z720/z720.net">Github</a>. <br /> </div> </footer> <script src="https://z720.net/themes/v06/script.min.js?build=dev "></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-56420-1', 'z720.net'); ga('send', 'pageview'); </script> </body> </html>