Les bases d'un document (x)HTML

Cet article va nous aider à faire un modèle de document (X)HTML.
Nous aurons ainsi une page de base à disposition.

Les Doctypes

Les Doctypes, aussi appelés DTD pour 'Document Type Definition' sont utilisés afin de renseigner les navigateurs web sur le langage utilisé dans le document.

Il ne s'agit pas ici de la langue d'écriture mais bien du langage de balisage utilisé.

Ils doivent être déclarés en premier sur la page (sauf pour le XHTML 1.1) et il y en a de plusieurs types, nous allons voir ici les plus courants :

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitionnal

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

C'est bien tout ça, mais lequel dois-je utiliser ?

Pour cela, je vous renvoie vers l'excellent site Alsacreations.com.

La balise <html>

Une fois le type de document déclaré, nous pouvons mettre la balise <html>.
Nous en profitons pour indiquer la langue du document, ceci se fait différemment en fonction du Doctype utilisé.

Un document HTML ou XHTML transitional avec un contenu en français :

<html lang="fr">

Un document du type XHTML 1.0 en mode strict avec un contenu en français :

<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

Un document du type XHTML 1.1 avec un contenu en français :

<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">

Sachez qu'il existe d'autres attributs à la balise <html>, tel que DIR qui détermine le sens de lecture (gauche à droite ou l'inverse) mais nous n'en aurons pas l'utilité pour l'instant.

La partie <head>

Nous passons maintenant à la partie <head> de notre document.
C'est ici que nous indiquerons le titre de la page, le charset (jeux de caractère) utilisé et à la rigueur le lien vers la feuille de style.

Le titre

C'est le texte qui est affiché dans la barre de titre du navigateur.
Cette balise est obligatoire.

<title>Le titre de la page</title>

Le jeux de caractère

Il en existe une multitude mais seul l'UTF-8 et l'ISO-8859-1 nous serons vraiment utile.
N'hésitez pas à vous informer sur Internet pour plus d'infos ;)

La déclaration du jeux de caractère se fait différemment en fonction du Doctype utilisé :

  • en HTML :

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    
  • en XHTML :

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    

Vous aurez certainement compris que pour l'UTF-8, il suffit de remplacer ISO-8859-1 par UTF-8

La feuille de style

Si vous désirez utiliser une feuille de style, il vous faudra la spécifier ici. Comme pour le Charset, la déclaration se fait différemment en fonction du Doctype utilisé :

  • en HTML :

    <link href="monstyle.css" type="text/css" rel="stylesheet">
    
  • en XHTML :

    <link href="monstyle.css" type="text/css" rel="stylesheet" />
    

La partie <body>

Cette partie contiendra le code html qui sera affiché dans le navigateur.
On ne va rien mettre pour l'instant vu que ce sera différent en fonction de l'usage de notre page.

Pour résumer

Nous avons vu tout ce qu'il fallait savoir pour préparer notre page.
Mais pour plus de facilité, je vais regrouper ce qui a été expliqué plus haut.

Vous pourrez ainsi facilement faire un copier-coller.

Un document HTML 4.01 Transitional en Français avec ISO-8859-1 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
  <head>
      <title>Une page en HTML 4.01 Transitional</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <link href="monstyle.css" type="text/css" rel="stylesheet">
  </head>
  <body>
      <!-- Le contenu de la page -->
  </body>
</html>

Un document XHTML 1.0 Strict en Français avec UTF-8 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title>Une page en XHTML 1.0 Strict</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link href="monstyle.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
      <!-- Le contenu de la page -->
  </body>
</html>

Voilà, nous avons maintenant de bonnes bases pour créer nos pages web.
Et n'oubliez pas de vérifier la validité de vos pages sur le site du W3C.

comments powered by Disqus