Structure du document

Déclaration du langage utilisé

Nous écrirons toutes nos pages en XHTML 1.1, et il convient de le signaler aux navigateurs par la ligne : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Cette ligne permet aux navigateurs d'adapter le rendu du site au langage. Elle permet aussi de vérifier que la syntaxe est conforme aux normes qui concernent le XHTML 1.1

Il suffit de copier-coller cette ligne en tout début de document

Structure du document

Le but du balisage qui suit est d'identifier les différentes parties du document - en terme de structure et non de contenu. Aisin il indique le début et la fin du document ; la zone d'en-tête (où sont déclarés les styles css par exemple ; et le corps du document qui contient les données.

Premières balises à écrire : balises de structure

Dans l'ordre d'apparition :

Code But
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
</html>		 Indique la langue utilisée et le début du document html. </html> est la dernière balise du document.
<head>
</head>		 Renferme l'en-tête. Contenu non affiché à l'écran.
<body>
</body>		 Renferme les données de la page.</body> se referme juste avant </html>

Informations sur le document : balises d'en-tête

Toutes les informations que renferment ces balises ne seront pas visible dans la page web qu'affichera le navigateur.
Le contenu des balises sert en fait au navigateur, aux moteurs de recherche, aux gens qui s'intéressent au code source

Code But
<title></title> Spécifie le titre de la page : il s'affiche en haut de la fenêtre du navigateur
<meta content=""/> Sert à identifier les propriétés du document. Le nom de la propriété est identifé par l'attribut name="" et la valeur par l'attribut content=""
L'attribut http-equiv="" sert à spécifier des données d'en-tête HTTP
<style type="text/css"> </style> Permet d'inclure des styles CSS à la page web, soit directement, soit par l'intermédiaire d'une feuille de styles

Spécifie l'encodage de caractères (ici UTF-8) : <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> Indique le nom de l'auteur : <meta name="Author" content="Guillaume Gautreau" /> Indique des mots-clé aux robots des moteurs de recherche : <meta name="Keywords" content="XHTML CSS Balises Page Web Construire" />

Charge la feuille de style nommée styles.css 
<style type="text/css">
        @import url('styles.css');
</style>
Définit des styles css à appliquer dans cette page : 
<style type="text/css">
body {
    color:#000;
    background-color:white;
}
p {
    font-size:13px;
}
</style>

Page web vide :

Pour commencer une page web en XHTML 1.1, copiez le code suivant :

<!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">
    <head>
        <title>Titre</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
    </body>
</html>