Nous allons maintenant créer pour de vrai une page XHTML. Ouvrez un éditeur de texte, et recopiez le code suivant (vous pouvez aussi télécharger ce fichier).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Ceci se passe de commentaire. --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="fr" /> <meta name="author" content="Marc Glisse" /> <title> Squelette </title> </head> <body> <p> Allez dans <code>Fichier→Enregistrer sous</code>, pour télécharger ce fichier. </p> <hr /> </body> </html>
Nous allons pour commencer essayer de comprendre ce que signifie tout cela. Les deux premières lignes servent à indiquer le type du document, à savoir ici du XHTML. La syntaxe exacte n'est pas très intéressante, il vous suffira de recopier la même chose au début de chaque nouvelle page. Si nous avions voulu écrire une page en HTML, nous aurions écris à la place :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Dans certains cas, vous trouverez avant même la déclaration du DOCTYPE une ligne de ce style :
<?xml version="1.0" encoding="UTF-8"?>
Elle est utile, mais elle perturbe beaucoup internet explorer, et nous devrons donc nous en passer.
Nous en arrivons maintenant à la partie intéressante, le XHTML lui-même.
Il a une structure d'arbre, avec des éléments emboités
les uns dans les autres. Les choses de la forme :
<truc> sont appelées des balises (ou
tags, si on veut parler franglais).
<truc> et </truc> indiquent le
début et la fin d'un élément truc. On voit donc ici que
notre page est un gros élément html, qui commence par un
élément head et continue avec un élément body.
L'élément head (pour header, ce qui est au début)
sert à donner des indications générales sur la page. On peut y indiquer
l'auteur de la page, la langue (ainsi quand on demande à Google des pages en français, il risque
moins de se tromper), on y mettra plus tard des indications sur comment
rendre la page (couleurs, alignement, taille), et c'est là qu'on met
l'élément title, avec le titre de la page, qui pourra par
exemple apparaître dans la barre de titre (en haut de la fenêtre) de
certains navigateurs.
L'essentiel du contenu se situe dans l'élément body. Il
contient ici un élément p (paragraph), qui contient
lui-même du texte et un élément code. Il contient aussi un
élément hr (horizontal rule, trait horizontal). Cet
élément ne se présente pas comme ceux que nous venons de voir. En effet,
il n'y a rien à mettre dans un élément hr, cela n'aurait
donc pas de sens de l'ouvrir pour devoir la refermer immédiatement. On
utilise donc une balise avec un / final, pour indiquer que
l'élément est entièrement contenu dans la balise. Vous pouvez y penser
comme à un raccourci pour <hr></hr> (syntaxe à
éviter). Notez qu'en HTML, cette syntaxe n'existe pas, et on utilise donc
simplement <hr>, sans refermer.
Autre chose à remarquer ici, les accents ont été écrits sous formes
d'entités. Une entité, de la forme
&truc; (ne pas oublier le ; final),
représente un caractère. La liste des entités est définie ici.
On aurait aussi pu écrire directement un é dans le fichier,
c'est d'ailleurs à permettre ceci que servent toutes les indications
charset et encoding au début du fichier (un
fichier est une succession de 1 et de 0, et il faut expliquer au
navigateur comment faire correspondre ça avec des caractères. Pour les
caractères ascii (non accentués), c'est assez standardisé (et encore),
mais pour les autres, il faut préciser. Les entités permettent de décrire
en caractères ascii (donc avec peu de risques d'erreur) des caractères
plus compliqués). Une autre façon d'entrer un caractère est de donner son
numéro dans la liste des caractères existants (standardisée par
unicode) :
水 va afficher : 水 (vous devriez voir un
caractère chinois pour l'eau). Cette méthode est plus
complète, mais il est assez pénible de devoir retenir ou retrouver tous
ces numéros.
Il existe des caractères qui ont une signification particulière en html,
et qu'on ne peut pas utiliser directement, en particulier
< > et &.
On retiendra donc en particulier que ces caractères s'obtiennent par :
< > et &
(donc pour afficher & j'ai dû
écrire : &amp;).
Regardons maintenant les lignes avec
les éléments meta. Je ne détaillerais pas la signification
exacte de tous ces éléments, mais on remarque surtout que la balise
ouvrante (qui se trouve être aussi fermante, mais cela marcherait de la
même façon pour d'autres types d'éléments délimités par 2 balises)
contient autre chose que le type de l'élément. Ces informations
supplémentaires sont appelées des attributs. Dans le
troisième élément meta, on a un attribut de nom
name et de valeur author.
Pour finir, remarquons que ce qui est écrit entre : <!--
et --> est ignoré par le navigateur. Il s'agit de
commentaires. Il peut-être utile d'en mettre pour se
souvenir plus tard que l'on voulait rajouter un paragraphe à tel endroit,
ou pour enlever provisoirement une partie de la page qui n'est pas
d'actualité mais risque de le redevenir. Attention cependant à ne pas
mettre de choses confidentielles dans les commentaires, et à ne pas en
mettre trop (cela augmente la quantité de données à télécharger).