Up Previous

Écriture de pages web
XHTML

Next Last

XHTML 1.1 est le langage standard actuel permettant de décrire des pages web. Les mots standard et actuel devraient être redondants, mais bien que l'histoire d'Internet soit relativement courte, celle des langages qui lui sont dédiés est assez tumultueuse. En effet, si le W3C (World Wide Web Consortium) est chargé de définir et de faire évoluer les standards, les grands acteurs d'Internet se livrent une guerre des langages afin d'imposer leur navigateur au travers des options qu'il propose. Une conséquence malheureuse de cette compétition excessive est qu'il est très difficile de décrire une page web visible de la même manière et dans son intégralité par tous les internautes. Le seul moyen d'y parvenir est donc de respecter scrupuleusement les standards XHTML et CSS et de ne pas utiliser les ajouts spécifiques aux navigateurs.

 Un peu d'histoire : de SGML à XHTML/CSS 

 Les langages de balises 

SGML, acronyme de Structured Generalized Markup Language, est un langage qui permet de décrire des documents structurés. Il s'agit d'un langage interprété, c'est-à-dire qu'aucune étape de compilation n'est nécessaire. Il est en outre totalement indépendant du système d'exploitation puisqu'un fichier SGML est un simple fichier texte au format ASCII. La structure d'un tel fichier est caractérisée à l'aide de balises (markup) dont l'imbrication respecte certaines règles définies au sein de ce que l'on nomme une DTD (Document Type Definition).

La description de documents par un langage de balises est très intéressante mais le langage SGML est malheureusement trop complexe pour être utilisé par des non spécialistes. Il existe donc de nombreux langages ...ML, dont HTML et XHTML que nous allons étudier dans ce cours, mais aussi le meta-langage XML (eXtended Markup Language) qui offre la particularité de définir ses propres DTD. Pour tous ces langages ...ML, ce sont des marqueurs qui organisent les informations des documents et donc qui permettent aux navigateurs de les interpréter.

Les marqueurs définissent des zones sémantiques délimitées par une balise ouvrante <nom> et une balise fermante </nom>. Certains marqueurs n'ont pas à proprement parler de début et de fin et ne sont donc définis que par une seule balise construite ainsi : <nom />. On parle dans ce cas d'éléments vides dont la balise hr (qui trace un trait horizontal) et la balise img (qui affiche une image) sont des exemples pour le langage XHTML.

 Description de pages web 

HTML, acronyme de HyperText Markup Language, constitue une version allégée du langage SGML. Il est destiné à la création de pages pour Internet et repose sur le protocole HTTP. Un fichier HTML est caractérisé par l'extension (de son nom) '.html' ou '.htm' et peut être visualisé par les navigateurs (browsers) dont les plus courants sont Internet Explorer (85%) et Firefox (10%) issu de la suite Mozilla (feu Netscape), mais il en existe de nombreux autres : Opera, Konqueror, Safari, ...

 Structure d'un document HTML 

Un document HTML de base se présente comme suit :

<html>
  <head>
    <title>Titre de la page</title>
  </head>
  <body>
    <p>Texte du paragraphe</p>
  </body>
</html>

Les balises html délimitent le document divisé en deux parties : l'en-tête (head) et le corps (body).

Les balises title définissent le texte qui apparait dans la barre de titre du navigateur ; les balises p permettent de délimiter un paragraphe.

 HTML 4.01 

HTML 4.01 est l'ultime spécification du langage HTML rédigée par le W3C. Au delà, on passe au langage XHTML. Pour déclarer qu'un document respecte les spécifications HTML 4.01, il suffit de déclarer le document comme respectant les définitions de type de document (DTD) définies par le W3C. Pour cela, il y a trois possibilités :

  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Cette DTD indique que le document est valide à une définition de type HTML 4.01 strict. Autrement dit, aucune erreur ne sera pardonnée !
  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Cette DTD indique que le document est valide à une définition de type HTML 4.01 de transition autorisant les balises HTML obsolètes.
  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    Cette DTD indique que le document est valide à une définition de type HTML 4.01 avec support des cadres qui permet l'utilisation de la balise frame.

Une de ces trois balises doit être placée au tout début du document avant même la balise html en respectant la casse (majuscules/minuscules) ! Une DTD définie le vocabulaire et la syntaxe autorisés dans un document. Il appartient à l'auteur d'un page HTML de vérifier la validité de cette page avant sa publication. Cette étape est importante car elle seule vous assure qu'un visiteur ayant une autre configuration logicielle que la votre visualisera une page avec un résultat analogue à celui que vous observez. Pour cela, le W3C met à disposition un validateur HTML.

Avant de tester vos documents, il reste une ligne de code à ajouter à chaque page, et plus exactement à l'en-tête de chaque document (donc entre les balises <head> et </head>). En effet, il faut indiquer au navigateur le codage utilisé pour définir votre document afin de gérer les problèmes d'internationalisation. Cela est fait grâce à la balise meta suivante :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.

De manière générale, les balises meta permettent de déclarer des informations sur la construction du document. On peut par exemple déclarer l'auteur du document : <meta name="Author" content="moi">.

Une fois encore, attention à la casse ! Finalement, un document valide HTML 4.01 (de transition) ressemble donc à cela : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>titre de la fenêtre</title>
  </head>
  <body>
    <!-- contenu -->
  </body>
</html>

Si vous avez encore des documents HTML qui ne respectent pas la norme HTML 4.01, il devient indispensable de les faire évoluer afin de permettre à tous les internautes de les consulter. En effet, les nouvelles normes n'assurent plus de compatibilité avec les versions trop anciennes.

attention ! La norme HTML 4.01 est elle-même obsolète, il faut donc ensuite faire migrer vos documents HTML 4.01 vers le standard actuel qu'est XHTML 1.1.

 De HTML 4.01 à XHTML 1.1 

Le langage HTML a été abandonné car il est trop permissif. Il autorise par exemple une définition de paragraphes de ce type : 

<p>bla bla
<p>bla bla</p>

Ainsi, il n'est pas nécessaire de fournir aux navigateurs des documents bien formés puisqu'ils se débouillent pour afficher un document correct. Tout le problème se situe là : les navigateurs n'ont pas les mêmes approches pour corriger les erreurs de description de pages. La solution est donc simple, il faut évoluer vers un langage qui reste simple mais qui soit plus strict. Ce langage, c'est le XHTML qui après une première version 1.0 est aujourd'hui utilisé dans sa version 1.1.

Parallèlement à l'évolution des langages, les navigateurs changent également et se rapprochent de plus en plus des standards. En conséquence, si vous gérez des pages web qui ne respectent pas les standards, corrigez-les sans quoi vous prenez le risque qu'elles ne soient plus accessibles au plus grand nombre. Pour cela il vous faudra désormais respecter les règles suivantes :

  • bien former les documents : chaque balise ouvrante est associée à la balise fermante correspondante de manière totalement symétrique (pas d'écriture du type <a><p>bla bla</a></p>)
  • écrire les noms de balise et d'attributs en minuscules (sauf la balise DOCTYPE)
  • écrire les valeurs des attributs entre guillemets
  • fermer les balises définissant un élément vide : <br> devient <br />, <img> devient <img />, et ainsi de suite pour meta, link, ...
  • toujours utiliser la même casse (majuscules/minuscules) pour les identifiants d'objets (l'attribut name n'est utilisé que pour les balises de formulaire, seul id subsiste pour les autres balises)
  • supprimer tous les éléments de mise en forme au profit des styles (nous y reviendrons longuement)
  • L'attribut width n'existe plus pour la balise td, ni align pour la balise p, ... En fait ceci est logique puisque ces informations relèvent du style de la mise en forme. Ils doivent donc être gérés par une feuille de style ou par l'attribut style de la balise considérée.
    On écrit donc <td style="width:50%"> plutôt que <td width="50%"> et <p style="text-align:justify"> au lieu de <p align="justify">
  • toujours préciser le type d'un script (par exemple <script type="text/javascript" src="monscript.js"></script>)

attention ! Lorsqu'une page a été rédigée, il faut ensuite valider sa structure XHTML et valider sa(ses) feuille(s) de style CSS. Cette double étape de validation est primordiale, même si le document a été crée à l'aide d'un éditeur de pages web récent. Nous reviendrons sur ces deux validations après avoir étudier ces langages.
Pour les utilisateurs de Firefox, notez qu'il existe l'extension HTMLvalidator qui permet une première passe de validation locale (mais qui ne remplace pas la validation finale par les outils du W3C !).

 Les outils 

Pour gérer des pages web, il faut trois types d'outils : un éditeur pour la création des pages, un client FTP pour télécharger les pages chez un hébergeur et enfin un navigateur pour visualiser le résultat.

  • Les éditeurs et IDE :
  • Les outils de gestion de fichiers :
    • FileZilla : client FTP (pour mettre vos sites en ligne)
    • 7-zip : l'archiveur le plus puissant (comprend de nombreux formats dont le 7z)
  • Les navigateurs :
    • Firefox : la référence des navigateurs, celui qui respecte le mieux les standards
    • Internet Explorer : le plus utilisé (85%) mais ne respecte pas les standards !

 Ma première page web 

La structure de base d'un document XHTML 1.1 est la suivante :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-1" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="resource-type" content="document" />
    <meta name="Author" content="moi" />

    <title>titre de la fenêtre</title>

    <meta http-equiv="content-style-type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="monstyle.css" />
  </head>

  <body>
    <!-- contenu -->
  </body>
</html>

On retrouve comme en HTML les deux parties head et body d'un document mais également de nombreuses informations supplémentaires :

  • Tout d'abord, la première ligne indique de manière évidente que le document est un document XML.
  • En tant que tel, la deuxième ligne indique qu'elle DTD il utilise ; ici celle du XHTML 1.1.
  • Les attributs de la balise ouvrante html permettent de définir la langue utilisée et le sens de lecture du document (ici french et left-to-right).
  • Les balises meta permettent de spécifier des informations sur le document comme son encodage et son auteur.
  • Les deux dernières lignes de l'en-tête permettent de spécifier le fichier de définition du style à appliquer au document, nous y reviendrons dans le chapitre sur les CSS.

La structure étant définie, il ne reste plus qu'à écrire le contenu du document. Pour cela, il faut utiliser les balises présentées ci-dessous.

 XHTML 1.1 

Selon la recommandation du W3C du 26/01/2000, XHTML est une reformulation de HTML 4 en XML 1.0. La dernière version de ces spécifications date du 31/05/2001 et constitue XHTML 1.1. Si XHTML 1.0 offrait encore trois choix de DTD comme HTML 4.01 (strict, transitional et frameset), à partir de la version 1.1 il ne subsiste plus qu'une seule DTD (strict). Ceci impose une grande rigueur et certains changements des (mauvaises) habitudes prises avec HTML (cf. ci-dessus).

attention ! Il est important que les noms des balises ainsi que ceux de leurs attributs soient écrits en minuscules !

attention ! Vous pourrez trouver sur Internet des balises qui ne sont pas présentées dans ce cours. Sauf omission de ma part (merci de me la(les) signaler), elles ne sont pas décrites car elles sont obsolètes ou spécifiques à tel ou tel navigateur. Il est donc préférable de ne pas y avoir recours.

 Les balises de texte 

Nom Attributs Fonction
<p> </p> align, dir, lang, title définit un paragraphe
<small> </small> dir, lang, title police plus petite
<big> </big> dir, lang, title police plus grande
<strong> </strong> dir, lang, title écrit en gras
<em> </em> dir, lang, title écrit en italique
<u> </u> dir, lang, title écrit souligné
<tt> </tt> dir, lang, title écrit en proportionnel
<strike> </strike> dir, lang, title écrit barré
<sup> </sup> dir, lang, title écrit en exposant
<sub> </sub> dir, lang, title écrit en indice
<br /> clear, title passe à la ligne suivante

 Les balises de tableaux 

Nom Attributs Fonction
<table> </table> align, background, bgcolor, border, bordercolor, bordercolordark, bordercolorlight, cellpadding, cellspacing, cols, datapagesize, dir, frame, height, lang, rules, summary, title, width définit un tableau
<tr> </tr> align, bgcolor, bordercolor, bordercolordark, bordercolorlight, dir, lang nowrap, title, valign définit une ligne
<th> </th> abbr, align, axis, background, bgcolor, bordercolor, bordercolordark, bordercolorlight, colspan, dir, headers, height, lang, nowrap, rowspan, scope, title, valign, width définit une cellule titre
<td> </td> abbr, align, axis, background, bgcolor, bordercolor, bordercolordark, bordercolorlight, colspan, dir, headers, height, lang, nowrap, rowspan, scope, title, valign, width définit une cellule
<caption> </caption> align, dir, lang, title, valign définit une légende

 Les balises de listes 

Nom Attributs Fonction
<ul> </ul> compact, dir, lang, title, type définit une liste à puces
<ol> </ol> compact, dir, lang, start, title, type définit une liste numérotée
<li> </li> dir, lang, title, type, value définit un item de liste

 Les balises de sélections 

Nom Attributs Fonction
<select> </select> accesskey, dir, lang, size, style, tabindex, title définit une sélection
<option> </option> accept, accesskey, align, alt, border, dir, height, hspace, lang, maxlength, readonly, size, src, style, tabindex, title, type, usemap, value, vsapce, width définit un choix de sélection
<optgroup> </optgroup> ... définit un sous-ensemble d'options

 Les balises de formulaires 

Nom Attributs Fonction
<form> </form> action, dir, enctype, lang, metod, runat, style, target, title définit un formulaire
<input> </input> accept, accesskey, align, alt, border, dir, height, hspace, lang, maxlength, readonly, size, src, style, tabindex, title, type, usemap, value, vsapce, width définit un champ de formulaire
<label> </label> ... définit l'étiquette d'un champ
<textarea> </textarea> accept, accesskey, align, alt, border, cols, dir, height, hspace, lang, maxlength, readonly, rows, size, src, style, tabindex, title, type, usemap, value, vsapce, width, wrap="virtual" définit une zone de texte
<button> </button> accept, accesskey, align, alt, border, dir, height, hspace, lang, maxlength, readonly, size, src, style, tabindex, title, type, usemap, value, vsapce, width définit un bouton
<fieldset> </fieldset> ... définit un sous-ensemble de champs
<legend> </legend> ... définit l'étiquette d'un sous-ensemble de champs

 

Exemples Code

login :
password :
 
fichier :
 
case 1   case 2   case 3
 
radio 1    radio 2
 
  

Chaque case à cocher possède un nom alors que les boutons radios partagent un même nom. De manière générale, on double la dénomination en utilisant les attributs name="" et id="" afin d'assurer la compatibilité avec tous les navigateurs. 

<form action="URL" id="mon_form">
<p>login : <input type="text" name="login"></input>
   password : <input type="password" name="pwd"></input>
   <input type="hidden" name="valcachee" value="valeur cachée"></input>

   fichier : <input type="file" name="monfichier"></input>

   <input type="checkbox" name="cb1"></input>case 1
   <input type="checkbox" name="cb2"></input>case 2
   <input type="checkbox" name="cb3"></input>case 3

   <input type="radio" name="r"></input>radio 1
   <input type="radio" name="r"></input>radio 2

   <input type="submit" value="Envoyer"></input>
   <input type="reset" value="Rétablir"></input>
</p>
</form>

Voir plus de détails sur les formulaires (Attention, il s'agit de HTML et pas de XHTML !).

 Autres balises diverses 

Nom Attributs Fonction
<h1> </h1> à <h6> </h6> align, dir, lang, title définit un titre
<img /> align, alt, border, controls, dir, dynsrc, height, hspace, ismap, lang, longdesc, loop, lowsrc, name, src, start, title, usemap, vspace, width affiche une image
<a> </a> accesskey, dir, href, hreflang, lang, name, tabindex, target, title définit un lien
<map> </map> dir, lang, name, title définit une image composite
<area> </area> accesskey, alt, coords, dir, disabled, href, lang, name, tabindex, target, title type, value définit un lien
<hr /> align, color, noshade, size, title, width affiche un trait horizontal
<!-- --> aucun commentaires
<embed> </embed> dépend de l'objet objet imbriqué, nécessite un plug-in

 Mise en page 

La philosophie de la description de pages web est de séparer le contenu qui est décrit en XHTML de l'apparence du document qui varie selon le medium d'affichage et qui est définie en CSS. Les balises suivantes servent de support à la définition des styles :

Nom Attributs Fonction
<style> </style>   cf. chapitre sur les CSS
<span> </span> id, ... cf. chapitre sur le DOM et DHTML
<div> </div> id, ... cf. chapitre sur le DOM et DHTML

 Les caractères spéciaux 

En plus des balises, il existe des caractères spéciaux, notamment pour les accents qui ne sont pas gérés par défaut par tous les encodages utilisés par les navigateurs.

Caractère Valeur
&Aacute; &aacute; Á á
&Agrave; &agrave; À à
&Acirc; &acirc; Â â
&Atilde; &atilde; Ã ã
&Aring; &aring; Å å
&AElig; &aelig; Æ æ
&Auml; &auml; Ä ä
&Ccedil; &ccedil; Ç ç

Les accents s'appliquent à d'autres lettres, par exemple &Eacute; et &eacute; sont les codes de É et de é.

Caractère Valeur
&nbsp; espace
&quot; "
&acute; ´
&cedil; ¸
&circ; ˆ
&amp; &
&lt; &qt; < >
&iquest; ¿
&laquo; &raquo; « »
&macr; &micro; ¯ µ
&middot; ·
Caractère Valeur
&euro; €
&copy; &reg; © ®
&brvbar; ¦
&cent; ¢
&curren; ¤
&deg; °
&divide; &times; ÷ ×
&ETH; &eth; Ð ð
&fnof; ƒ
&frac12; &frac14; &frac34; ½ ¼ ¾
&sup1; &sup2; &sup3; ¹ ² ³

 Les attributs (en travaux) 

attention ! Il est important que les valeurs des attributs soient écrites entre guillemets. Rappelons également que les noms des balises et des attributs doivent être écrits en minuscules.

Pour chacun des attributs présentés ci-dessous par ordre alphabétique, le tableau suivant présente leur rôle et leurs valeurs possibles :

en travaux ! En travaux ...

Nom Valeur Role
accesskey a a

 Liens