Voici un exemple de structure de base (ou squelette) d'un document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier XHTML - Exercice 1</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="Exemple d’utilisation des balises et attributs en XHTML" /> </head> <body> <!-- Corps du document --> </body> </html>
Nous allons procéder à un exemple d'affichage d'élément très simple. Pour cela, nous allons insérer une série d'éléments dans notre squelette de base :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier XHTML - Exercice 1</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="Exemple d’utilisation des balises et attributs en XHTML" /> </head> <body> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <p>Premier paragraphe. Blablabla</p> <p>Deuxième paragraphe. Première ligne du paragraphe.<br /> Deuxième ligne du paragraphe.</p> <p>Le <abbr>XHTML</abbr> est un langage <strong>d’avenir</strong>.</p> <p>La balise <strong>br</strong> est du type <i>block</i>, c'est-à-dire qu'un retour à la ligne est effectué automatiquement, alors que la balise <strong>strong</strong> ne l'est pas. On parle alors d'une balise <i>inline</i>.</p> </body> </html>
Cet exercice met en évidence les fonctionnements suivants :
il y a deux grands types d’éléments différents dans le langage :
les éléments inline qui permettent de structurer des phrases sans provoquer de retour à la ligne du texte. Les emphases, les abbréviations, les liens et les images sont des exemples d’éléments inline;
les éléments de type block qui structurent des textes entiers et provoquent un retour à la ligne avant et après leur utilisation. Les titres, les paragraphes, les listes sont des exemples de ce type d’élément.
les multiples espaces dans un document sont considérés comme un seul;
les retours à la ligne ne sont pas pris en compte et sont considérés comme un espace.
Le XHTML est donc bien un langage dont seules les balises permettent d’en définir la structure (contrairement au LaTeX par exemple). Ce fonctionnement permettra de bien formater les sources de nos documents afin que celles-ci restent facilement lisibles et maintenables. Il est donc conseillé de bien espacer les balises et de bien les indenter les unes par rapport aux autres ; cela vous permettra de mieux naviguer à l’intérierur des sources du document et vous fera gagner un temps précieux lorsque vous devrez localiser les éléments que vous souhaitez modifier.
Le but est ici de créer un document de type article. Le choix est laissé libre mais il faudra impérativement que le document contienne :
différents niveaux de titre
plusieurs paragraphes (avec une structuration des phrases faisant intervenir des emphases, des liens hypertextes, des images, etc.) ;
des listes (avec une structuration des phrases faisant intervenir des emphases, des liens hypertextes, des images, etc.) ;
des tableaux.
Voici le document réalisé :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier XHTML - Exercice 2</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="La collection en bref" /> </head> <body> <h2>Ma vie de collectionneur</h2> <p>Je compte bien profiter de cet exercice pour parler <strong>un peu</strong> de ma passion pour les collections en tout genre.</p> <p>Actuellement, je peux être qualifié de :</p> <ul> <li><a href="http://fr.wikipedia.org/wiki/Numismatique">numismate</a>,</li> <li><a href="http://fr.wikipedia.org/wiki/Billetophilie">billetophile</a>,</li> <li><a href="http://fr.wikipedia.org/wiki/Philatélie">philatéliste</a>,</li> <li><a href="http://fr.wikipedia.org/wiki/Scripophilie">scripophile</a>,</li> <li><a href="http://fr.wikipedia.org/wiki/Bibliophilie">bibliophile</a>,</li> <li><a href="http://fr.wikipedia.org/wiki/Cervalobélophilie">cervalobélophile</a>.</li> </ul> <p>Autant dire tout de suite que vouloir compléter ces collections est <em>extrêmement</em> chronophage.</p> <h2>Quelques illustrations<h2> </body> </html>
Le second objectif est de manipuler les éléments servant à la conception d'un formulaire. Encore une fois, un maximum d'éléments liés aux formulaires doit être utilisé.
Exemple de formulaire ultra-simpliste :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier XHTML - Exercice 3</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="Formulaires" /> </head> <body> <form name="form" action="" method="get"> <fieldset> <legend align="top">Informations classiques</legend> <label>Nom : </label><input type="text" name="nom" /> <label>Prénom : </label><input type="text" name="prenom" /> <br /> <label>Civilité : </label> <label>Monsieur</label><input type="radio" name="civilite" value="monsieur" checked="checked" /> <label>Madame</label><input type="radio" name="civilite" value="madame" /> <label>Mademoiselle</label><input type="radio" name="civilite" value="mademoiselle" /> <br /> <label>Courriel : </label><input type="text" name="courriel" /> </fieldset> <fieldset> <legend>Autres</legend> <label>Informations complémentaires :</label><br /> <textarea name="detail" ROWS="5" COLS="40"></textarea><br /> <label>Quel est votre sport favori ?</label><br /> <input type="checkbox" name="sport" value="natation" /><label>Natation</label><br /> <input type="checkbox" name="sport" value="cyclisme" /><label>Cyclisme</label><br /> <input type="checkbox" name="sport" value="ski" /><label>Ski</label><br /> <input type="checkbox" name="sport" value="petanque" /><label>Petanque</label><br /> <input type="checkbox" name="sport" value="basket" /><label>Basket</label><br /> <br/> <input type="file" name="fichier" size="100"> </fieldset> <input type="submit" /><input type="reset" /> </form> </body> </html>
Le XHTML est un langage fait pour structurer les documents, il ne pose pas de problème particulier de compatibilité entre les navigateurs. Les mises en forme appliquées aux éléments peuvent varier légèrement d’un navigateur à l’autre mais cela n’entraîne aucun de problème de consultation.
Les documents sont lisibles mais le manque de mise en forme les rend particulièrement austère. Heureusement, le langage CSS est la pour remédier à ce problème.
Un validateur est un outil qui s’occupe de vérifier si votre document respecte les règles dictées par le DOCTYPE utilisé. Il existe de nombreux outils de validation de code et ceux-ci peuvent prendre de nombreuses formes :
application ou service web ;
application lourde (à installer sur une machine) ;
extensions de navigateurs ou d’éditeur html ;
etc.
Un validateur parcourt les sources de vos documents afin d’en analyser la syntaxe et de la comparer avec les règles définies dans le fichier DTD indiqué par le doctype du document. L’outil de validation peut vous indiquer trois choses :
que l’analyse de votre document est impossible ;
que votre document comporte des erreurs ;
que votre document ne comporte pas d’anomalie et qu’il est valide.
Dans le premier cas, le problème vient en général du doctype déclaré dans votre document. Celui-ci peut avoir été oublié (dans ce cas, le validateur ne peut pas connaître le langage et la version de votre document) ou sa syntaxe peut être erronée.
Le second cas signifie que des erreurs de syntaxe ont été trouvées et que votre document ne respecte donc pas les règles dictées par le doctype. La ligne du problème vous est indiquée tout comme sa nature. Il existe un grand nombre d’erreurs possibles mais les plus fréquemment recontrées sont :
l’oubli de balise de fermeture (exemple <br>) ;
un mauvais enchevêtrement de balises (exemple : <strong><em>terme</strong></em>)
l’utilisation d’un caractère spécial sans son encodage (exemple & à la place de & ;) ;
l’inclusion interdite de balise (par exemple, vous ne pouvez pas insérer un paragraphe dans un autre paragraphe) ;
l’oubli d’attribut obligatoire comme le alt des balises images img ;
Le dernier cas indique que le document respecte parfaitement la recommandation dans laquelle il est écrit.
L’outil, le validateur du W3C, est accessible à cette adresse. D'autres validateurs semblable existent également.