Introduction
Le langage xhtml est un langage dit « langage à balises » (markup language). En réalité une page xhtml n'est rien de moins qu'un fichier texte dans lequel on insère des informations qui ne sont pas destinées à l'utilisateur, mais au logiciel de navigation qu’il utilise. C'est de cette manière qu'un navigateur pourra savoir si une partie du texte représente un lien, un paragraphe, ou encore autre chose. Cela se fait tout simplement en utilisant ces fameuses balises qui ne sont en fait que des mots-clés encadrés par un « < » et un « > ».
Dans ce chapitre, nous allons voir comment écrire une page xhtml minimale en utilisant ces balises.
Les balises et les attributs
Les balises
Tout comme dans le langage XML sur lequel le XHTML est construit, il existe deux genres de balises :
- Les balises fonctionnant par paire :
Elles encadrent une partie du texte pour fournir des informations dessus au navigateur. La première balise est dite ouvrante, et s'écrit: <nom_de_la_balise> .
La seconde balise est dite fermante, et doit être identique à la première à ceci près qu'elle commence par "</" au lieu de "<" : </nom de la balise> . Par exemple :
<p> Ceci est un paragraphe </p>
Les balises peuvent s'imbriquer comme ceci :
<p> Ceci est un paragraphe <strong>important</strong> </p>
Par contre on doit toujours refermer la dernière balise ouverte avant d’en fermer une autre. Ainsi on considèrera que le code suivant est "mal-formé" car la balise </p> intervient avant la balise </strong>:
<p> Ceci est un paragraphe <strong>important</p></strong>
- Les balises seules :
Elles sont à la fois ouvrantes et fermantes et s'utilisent la plupart du temps pour insérer un élément dans la page. Tel qu'un champ de formulaire, un bouton, une image, etc. Elles s'écrivent comme des balises ouvrantes excepté qu’elles se termine par "/>" au lieu de ">" et que la pratique veuille qu'on insère un espace (suite à certains bugs, il fut un temps).
Exemple:
<hr />
Ce code insère un séparateur (qui prend généralement par défaut la forme d'une ligne horizontale)
Tout comme en XML, on pourra transformer une balises de type ouvrante/fermante en une balise seule lorsqu'elle est vide mais que l’on souhaite la conserver. Au lieu d'écrire : <p></p> on a le droit d'écrire: <p />
Les attributs
Les attribut envoient des informations complémentaires à celles envoyées par les balise. Par exemple :
<citation auteur="Neil Armstrong" date="21/07/1969">
C'est un petit pas pour l´homme` un bond de géant pour l´humanité.
</citation>
Vous l'avez remarqué, les attributs s'écrivent dans la balise ouvrante : nom de l'attribut ="valeur de l'attribut" .
Le code XHTML minimum
Toutes les pages XHTML ont un code de base, afin que le navigateur "voit" que ce fichier est codé en XHTML. Nous allons utiliser celui-ci :
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3 <head>
4 <title>Bienvenue sur mon site !</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6 </head>
7 <body>
8 </body>
9 </html>
Copiez ce code dans votre éditeur de texte, puis enregistrer la page avec l'extension ".html" ou".htm". Vous pouvez ouvrir la page dans votre navigateur et découvrir… une page blanche !
M@teo21, du Site du zero, a créé une vidéo qui montre comment créer le code XHTML dans une vidéo :
Enregistrer et tester sa première page web (873 ko)
Décomposition du code
Je crois que je vous dois des explications sur ce code, les voici, ligne par ligne :
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3 <head>
4 <title>Bienvenue sur mon site !</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6 </head>
7 <body>
8 </body>
9 </html>
- La balise DOCTYPE : cette balise, la seule qui ne respecte pas les règles énoncées ci-dessus, indique au navigateur que c’est une page codée en XHTML 1.0
- La balise html : cette balise englobe tout le code XHTML. Elle a deux attributs :
- l'attribut xmlns cet attribut, obligatoire, indique une adresse traitant du xHTML.
- l'attribut xml:lang il indique la langue de la page. - la balise head C'est à l'intérieur de cette balise que nous allons trouver les informations d'en-tête. Elle contient plusieurs autres balises :
- la balise title : cette balise contient le titre tel qu’il est affiché dans la barre de titre de la fenêtre.
- la balise meta : il existe beaucoup de balises de ce type, mais seule celle donnée est indispensable, car elle sert à indiquer que vous allez taper des caractères spécifiques au français (éèêôà etc.). - la balise body c’est elle qui contient le contenu de votre site; ici, elle est vide et, vous pouvez le constater, le navigateur web affiche une page blanche.
Les commentaires
Les commentaires sont des informations, invisibles pour le visiteur : il ne sont utiles seulement pour vous, par exemple, si vous avez une page longue, pour servir de repère ou de rappel.
Ils s'entourent de <!-- et --> . Par exemple :
<!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" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
Ceci n’est pas un commentaire
<!-- Ceci est un commentaire -->
</body>
</html>
Évidemment, cela s'affichera :
Ceci n’est pas un commentaire
Q.C.M.
Conclusion
Voila, maintenant, vous connaissez les bases de l'XHTML. Pour l'instant, vous ne savez pas encore coder une page web, mais ne vous inquiétez pas, nous nous y mettons… juste après la récréation ! 