Valid XHTML 1.0! Valid CSS !

Introduction au XHTML

Une page Web est constituée de balises

Nous voulons savoir comment rédiger le contenu d'une page Web. Par exemple, si nous voulons créer une page qui affiche le texte "Bonjour Alexandre !", comment faire ?

C'est en fait extrémement simple. Si l'on veuille que quelque chose s'affiche, il nous suffit d'écrire :

Bonjour Alexandre !

Si l'on veut créer un fichier XHTML contenant ce texte, celui-ci sera affiché dans le navigateur.

Toutefois, ce n'est pas aussi simple que cela ....

Deux types de balises

En plus du texte, une page Web XHTML contient ce que l'on appelle des balises. Une balise est une information spéciale s'adressant au navigateur. Elle n'est jamais affichée chez les visiteurs, mais elle est en revanche lue et comprise par le navigateur.

Une balise commence par un chevron ouvrant < et se termine par un chevron fermant > . Par exemple :

<balise>

A quoi sert une balise ? Elle permet de donner une indication à l'ordinateur sur la nature du texte. Il existe par exemple une balise "titre" qui permet d'indiquer que tel texte est le titre de la page, une balise "paragraphe" qui permet de dire que tel texte constitue un paragraphe, etc.

Remarque une balise s'écrit toujours en minuscules pour des raisons d'uniformisation. (<balise> et non <Balise>).

Il existe deux types de balises :

Les attributs

Que la balise soit de type "paire" ou "unique", elle peut prendre en plus ce qu'on appelle des attributs. Le rôle des attributs est de compléter une balise pour donner des informations supplémentaires.

Reprenons la balise <image />. Telle quelle cette balise ne sert à rien. Elle dit qu'on veut insérer une image, encore faut-il préciser laquelle. Ce sera le rôle de l'attribut :

<image nom="photo.jpg" />

L'attribut ici utilisé s'appelle nom et il a une valeur : photo.jpg.

Le code source minimal d'une page

Une page XHTML doit comporter un minimum de code pour être "correcte". Voici le code XHTML que toute page doit obligatoirement comporter :

<!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>Welcome !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>

<body>
</body>
</html>

Voyons voir désormais ce que signifient ces premières lignes de code XHTML :

Il faudra à chaque fois recopié ce code source dans l'éditeur !
Ensuite Enregistrer sous la page avec l'éxtension .html. Par exemple :

exemple1.html

Exemple

Voici le code minimal coloré sous Notepad++ de plus on a bien enregistré le fichier en .html (onglet exemple1.html).

Les commentaires

Il existe une balise particulière en XHTML qui... ne fait rien !. C'est ce qu'on appelle une balise de commentaire : elle n'est visible que si on regarde le code source de la page Web que l'on visite. C'est une information généralement destinée au Webmaster qui peut servir de repère ou d'aide mémoire pour ne pas oublier de coder quelque chose.

Les commentaires se placent dans une balise ayant une forme un peu particulière. Celle ci commence par ! -- et se termine par -->. Rien de ce qui se trouve à l'intérieur ne sera affiché. Voici un exemple de commentaire :

<!-- Salut, je suis un commentaire -->

On pourrait par exemple ajouter un commentaire dans le "code minimal" que l'on a vu précédemment :

<!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>
<!-- Pensez à changer le titre de la page -->
<title>Welcome !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>

<body>
</body>
</html>

Cette page Web affichera la même chose à l'écran que la dernière fois. Le commentaire sert uniquement au webmaster. Ici par exemple, il fait office d'aide mémoire pour se rappeler de trouver un autre titre.

Voir la partie Texte (XHTML).