<acronym>XHTML</acronym> en une heure 2003-03-21 2003-03-21 Olivier Meunier olivier.meunier@openweb.eu.org Cet article est sous licence Creative Commons Attribution-ShareAlike. Une rapide introduction à XHTML, qui vous permettra de faire vos premières armes avec ce langage de description. debutant expert xhtml structure Ce texte est une rapide introduction à XHTML. Il vous permettra de faire vos premières armes avec ce langage de description. Pour écrire en XHTML, vous pouvez utiliser un simple éditeur de texte plus ou moins évolué. Si comme certaines personnes vous préférez utiliser un éditeur HTML compatible XHTML, ce guide vous permettra de comprendre ce qui se passe au niveau du code HTML. Je ne vais pas vous expliquer comment convertir votre code HTML en XHTML, d'autres l'ont déjà fait. Je vais seulement considérer que vous n'avez jamais écrit de code XHTML (ou même HTML) et vous expliquer les bases de la création d'une page Web.
Création d'un document, déclaration <acronym>XML</acronym> et <acronym>DTD</acronym> Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous devrez spécifier quelle DTD vous comptez utiliser avec votre document. Une DTD est un document dans lequel est décrite la manière d'utiliser les différentes balises. Voir à ce propos Les DTD HTML4.01 et XHTML1.0 : comment choisir ? Voici donc à quoi ressemble un document XHTML vide : <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </html> Le contenu de votre document se trouvera alors entre les balises <html> et </html>. On utilise le jeu de caractère ISO-8859-1 qui correspond au jeu français. On aurait pu utiliser n'importe quoi d'autre tel que UTF-8 par exemple.
Eléments, balises, attributs Dans ce document nous allons parler d'éléments, de balises et d'attributs. Ces notions ont leur sens propre en XHTML, sens que nous allons expliciter : Élément Nom, notion abstraite. Balise Forme concrète d'un élément. On parlera aussi de balise ouvrante et fermante. Par exemple <html> est la balise ouvrante de l'élément html. Attribut Un attribut est une propriété d'un élément. Il permet de préciser le rôle ou certaines propriétés d'une balise dans le document. Voici un exemple d'application de l'attribut xmlns à l'élément html : <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </html> Les balise et les attributs suivent quelques règles simples : les noms des balises doivent être écrits en minuscules ; toute balise ouverte est fermée (par exemple <html>...</html>) ; les noms des attributs doivent être écrits en minuscules ; les valeurs des attributs doivent être entre guillemets doubles.
Titre du document et en tête La première chose à faire lorsque l'on crée un document quel qu'il soit est de lui donner un titre. En HTML on donne le titre du document dans une partie appelée en-tête. L'en-tête se situe au début du document (après la balise <html>) ; elle est délimitée par les balises <head> et </head>. Elle contient des informations qu'un navigateur n'affichera généralement pas dans son espace d'affichage mais qui pourront être utilisées à des fins diverses. Le titre est défini à l'aide de l'élément title comme dans l'exemple suivant : <head> <title>Titre de mon document</title> </head> Pour tester ce que nous venons d'expliquer, créez un document test.html dans lequel vous copierez le code suivant : <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titre de mon document</title> </head> </html> Les navigateurs Web affichent généralement le titre dans la barre de titre de la fenêtre.
Corps du document, titres et paragraphes Le corps du document est la zone que l'on va trouver après l'en-tête. Il est défini par l'élément body. Les titres sont au nombre de 6, chacun ayant un niveau d'importance. Le plus haut niveau d'importance est le titre h1, suivit de h2 et ainsi de suite jusqu'à h6. Ces niveaux sont largement suffisants pour couvrir l'ensemble de vos besoins les plus courants. Un paragraphe est défini par l'élément p. Il sera affiché avec un espacement avant et après, permettant ainsi une bonne séparation des paragraphes entre eux et avec le reste des éléments du document. Voici un exemple de titres et paragraphes, vous pouvez le copier dans votre document précédemment créé, juste en dessous de la balise </head> : <body> <h1>Titre très important</h1> <p>Paragraphe.</p> <h2>Titre moins important</h2> <p>Second paragraphe un peu plus long que le premier.</p> </body> En XHTML (et HTML) les retours à la ligne sont considérés comme des espaces. Plusieurs espaces ou retours à la ligne consécutifs ne donneront pour résultat qu'une seule et unique espace (faites l'essai).
Emphase Il arrive que certains mots aient besoin d'être mis en évidence. On appelle cela l'emphase. Pour mettre un ou plusieurs mots en emphase, on utilise l'élément em. Généralement, cela aura pour effet de mettre le texte en question en italique. Sur un navigateur textuel comme Lynx, cela soulignera le mot. Pour mettre un texte en forte emphase, on utilisera l'élément strong. Cela aura pour effet de mettre le texte en gras.
Faire des liens L'aspect le plus intéressant du Web est cette formidable capacité à créer des liens de pages en pages, de sites en sites. Pour créer un lien on utilise l'élément a. Pour créer un lien vers un fichier test2.html se trouvant dans le même répertoire que votre fichier test.html il suffira de faire comme dans l'exemple suivant : <a href="test2.html">Second fichier test</a> Le navigateur affichera généralement le lien en bleu et le soulignera. Pour faire un lien vers un autre site Web on écrira le code suivant : <a href="http://www.w3.org/">Le W3C</a> Il est bien sûr possible de faire des liens vers autre chose qu'une page HTML. Vous pouvez faire des liens vers des fichiers audio, des documents textes, etc.
Insérer des images dans vos documents Afin de rendre vos documents plus attrayants, vous pouvez y insérer des images à l'aide de l'élément img. Admettons que vous possédiez une photo de votre ami Tristan en train de s'amuser avec un Lézard en plastique (simple hypothèse), le fichier de cette image s'appelant tristan.jpg, voici le code à écrire pour insérer l'image dans votre page : <img src="tristan.jpg" width="180" height="130" /> Cet élément est intéressant à plus d'un titre ; il vous montre comment insérer une image dans un document et la syntaxe correcte en XHTML pour un élément ne possédant pas de balise fermante. L'élément img ne contient, en effet aucun texte, il est donc inutile de le fermer (bien que cela soit possible et correct mais plus long). Il est donc nécessaire de respecter la syntaxe XML pour les éléments à balise unique, syntaxe consistant à ajouter un / à la fin du marqueur. On ajoute également un espace avant ce dernier pour permettre aux anciens navigateurs de comprendre la syntaxe du marqueur. L'exemple précédent n'est pas correct car il manque une information capitale. Dans le cas précédent, si votre visiteur ne peut pas lire les images car il ne possède qu'un navigateur textuel ou vocal (ou bien car un serveur mandataire très intelligent filtre les contenus tendancieux de personnes pratiquant les jeux avec des lézards), il est indispensable de lui fournir un texte décrivant votre image. Voici donc la manoeuvre avec l'attribut alt : <img src="tristan.jpg" width="180" height="130" alt="Tristan jouant avec un lézard en plastique"/> Avec cet exemple, vos visiteurs savent de quoi il s'agit, ce qui est bien mieux, surtout s'ils ne peuvent afficher les images. Si jamais vous aviez besoin d'en dire beaucoup plus sur votre image, si par exemple, vous présentez un graphique avec courbe, camembert (ou bien si vous en savez plus long sur l'affaire du lézard) vous pouvez écrire un fichier HTML externe détaillant précisément votre image. Voici comment indiquer dans votre image l'emplacement des longues explications sur le comportement singulier de votre ami Tristan, explications que vous aurez pris soin d'écrire dans le fichier tristan.html : <img src="tristan.jpg" width="180" height="130" alt="Tristan jouant avec un lézard en plastique" longdesc="tristan.html" /> Vous pouvez aussi faire d'une image un lien hypertexte. Par exemple le logo de votre organisation servant de lien pour revenir à la page d'accueil : <a href="/"><img src="logo.gif" width="180" height="130" alt="Logo de l'organisation" /></a>
Des listes Les listes sont des outils bien utiles pour présenter des informations. XHTML en offre 3 types différents. Le premier type de liste est la liste non ordonnée, autrement appelée liste à puces. En voici un exemple : <ul> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ul> Ce type de liste sera présenté avec des petites puces avant le texte de chaque élément. Le second type de liste est la liste ordonnée : <ol> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ol> Cette liste ne sait pas mieux ranger ou faire le ménage que l'autre, elle doit uniquement son nom au fait qu'elle affiche un numéro au lieu d'un puce avant le texte de chaque élément. Enfin, le dernier type de liste est la liste de définition, permettant de créer des listes possédant un terme et sa définition ; jugez plutôt : <dl> <dt>Premier terme</dt> <dd>Définition du premier terme.</dd> <dt>Second terme</dt> <dd>Définition du second terme.</dd> </dl> Ce dernier type de liste est généralement affiché avec la définition en retrait du terme.
Des tableaux Longtemps, les tableaux ont été utilisés pour effectuer la mise en page des éléments d'une page Web. Qu'on se le dise, cette période n'est plus. Cependant, les tableaux sont toujours utiles pour présenter des informations de manière plus claire que dans une liste ou des paragraphes.
Tableaux simples Un tableau HTML est découpé en lignes contenant des cellules. Le nombre de cellules dans chaque ligne doit être le même, ou alors il est nécessaire de spécifier des options de recouvrement. Voici un exemple de tableau très simple : <table> <tr> <th>ligne 1, colonne 1 (en-tête)</th> <th>ligne 1, colonne 2 (en-tête)</th> <th>ligne 1, colonne 3 (en-tête)</th> </tr> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </tr> <tr> <td>ligne 3, colonne 1</td> <td>ligne 3, colonne 2</td> <td>ligne 3, colonne 3</td> </tr> </table> Les balises <tr> et </tr> délimitent les lignes du tableau. Dans la première ligne, la balise <th> désigne des cellules d'un type particulier : elles ne contiennent pas de données, mais l'en-tête (ou titre) des colonnes correspondantes. Dans les lignes suivantes, <td> spécifie les cellules de données.
Tableaux avec cellules recouvrantes Comme nous l'avons dit, des cellules peuvent en recouvrir d'autres, que ce soit en largeur ou en hauteur. Pour qu'une cellule occupe n cellules vers la fin de la ligne, on utilise l'attribut colspan="n". Pour qu'une cellule occupe n cellules vers la fin de la colonne, on utilise l'attribut rowspan="n". Voici un exemple où j'ai volontairement laissé en blanc les cellules supprimées : <table> <tr> <td rowspan="2">ligne 1 et 2, colonne 1</td> <td>ligne 1, colonne 2</td> <td>ligne 1, colonne 3</td> </tr> <tr> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </tr> <tr> <td>ligne 3, colonne 1</td> <td colspan="2">ligne 3, colonne 2 et 3</td> </tr> </table>
Titre de tableau Vous pouvez donner un titre à votre tableau grâce à l'élément caption. Cet élément va placer le titre, généralement au dessus du tableau. Voici un exemple d'usage de l'élément caption : <table> <caption>Mon premier tableau</caption> <tr> <td>ligne 1, colonne 1</td> <td>ligne 1, colonne 2</td> </tr> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> </tr> </table>
Sauts de ligne et espace insécables. Il est commode pour diverses raisons, de sauter une ligne dans un texte, sans pour autant marquer un saut de paragraphe (en poésie par exemple). Ceci est permis par l'élément br. Cet élément est unique et se termine donc par un /. Voici un exemple : <p> vidi lecta diu et multo spectata labore<br /> degenerare tamen, ni vis humana quotannis<br /> maxima quaeque manu legeret. sic omnia fatis<br /> in peius ruere ac retro sublapsa referri,<br /> non aliter quam qui adverso vix flumine lembum<br /> remigiis subigit, si bracchia forte remisit,<br /> atque illum in praeceps prono rapit alveus amni. </p> <p>Texte de Virgile.</p> La langue française impose d'utiliser des espaces avant certaines marques de ponctuation telles que le point d'interrogation, le point d'exclamation, le point virgule ou encore les deux points. Ceci est facile à faire, il suffit de mettre un espace. Le problème est que votre marque de ponctuation, avec un espace normal, peut passer à la ligne, ce qui sera des plus disgracieux. Heureusement, il existe un caractère particulier dit espace insécable. Un mot suivi d'un espace insécable et d'une marque de ponctuation ne sera jamais coupé. L'espace insécable est un caractère particulier codé &nbsp;. Voici un exemple : <p> Ceci est un paragraphe, veuillez le lire attentivement&nbsp;: </p> <p> Mon paragraphe HTML vous plaît-il&nbsp;? </p> Lorsque l'encodage du document est ISO-8859-1, on peut écrire l'espace insécable avec le code suivant : &#160;.
Conclusion
Le mot de la fin Ce texte a été fortement inspiré de Getting started with HTML, je ne le cache pas. Il aurait dû être une traduction mais, à mi-parcours j'ai réalisé qu'il était devenu trop daté et aurait eu pour effet de donner de mauvaises habitudes au débutant HTML.
(re)Sources Internet est le lieu rêvé pour vous documenter sur un sujet aussi connu que HTML ou XHTML.
Sites pour apprendre Voici quelques pages ou sites, pour en savoir plus long sur le sujet, et en français : tutoriel CSS spécialement orienté pour débutants, très bien fait. C'est ce que vous devez lire pour apprendre à mettre en forme vos documents ; ALL HTML. Comme sur beaucoup de sites du même style, la qualité est inégale. On y trouve de bons forums.
Les spécifications Les spécifications représentent de très bonnes documentations car on y trouve tout concernant le langage. Leur seul défaut est leur sécheresse, on aime ou on n'aime pas, mais on y vient un jour ou l'autre… HTML 4.01 sur le site du W3C ; HTML 4.01 traduite en français par KarlDubost ; CSS 1 sur le site du W3C ; CSS 1 en français par Jean-JacquesSolari.