Une page HTML


Nous allons maintenant pas à pas, concevoir notre première page web. Pour commencer, nous allons établir une structure très simple et la complexifier au fur et à mesure.


Je vous recommande de garder précieusement les pages que vous allez concevoir, elles
peuvent vous servir de modèle ou même être utilisées dans les autres cours (PHP notamment).


// Le DTD : DocType Definition

En premier lieu, il est obligatoire de définir le DocType (ou DTD pour DocType Definition).
Cette ligne de code sert à définir la version de HTML que vous utilisez pour coder votre site. Les versions que l'on peut trouversont souvent HTML 4 et XHTML.

Il existe trois DTD qui correspondent à trois déclinaisons de XHTML :

- Le XHTML Strict : n'autorise aucune erreur de code, néanmoins, c'est celui qui
donnera un résultat le plus proche du code, car l'interprétation sera, elle aussi, stricte. Cette variante n'autorise aucune balise de mise en page (comme <font>), uniquement les balises de structure.

- Le XHTML Transitional : ce code est plus permissif, il autorisera notamment
certaines balises de mise en page. Mais il faut essayer de l'éviter, car cette variante est vouée à disparaitre : elle est présente principalement pour faire la transition entre HTML 4 et XHTML plus facilement.

- Le XHTML frameset : cette variante est équivalente à Transitional, mais accorde
l'utilisation des balises Frameset. Ces frames (ou cadres) sont déconseillées, c'est pourquoi nous ne les traiterons pas dans ce tutorial.


Voici les trois doctypes : 


     1  XHTML 1.0 Strict :
     2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     3  XHTML 1.0 Transitional :
     4  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     5  XHTML 1.0 Frameset  :
     6  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Note : A partir de la version XHTML 1.1, il n'existe plus qu'un Doctype Strict.


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


Nous préférerons le DTD XHTML 1.0 Strict ou le DTD XHTML 1.1.


// Les trois premières balises

Voici les trois premières balises présentes sur toutes les pages : 


   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2  <html>
   3    <head>
   4      <!-- contenu de la balise head -->
   5    </head>
   6
   7    <body>
   8      <!-- contenu de la balise body -->
   9    </body>
   10   </html>


la première des balises après le DTD est la balise qui entoure la totalité du
code : La balise <html>.

puis vient <head> : le contenu de ces balises ne sera jamais affiché à
l'écran. Dans ces balises, nous mettrons exclusivement des informations destinées à définir la page (son titre, ses mots clés pour les moteurs de recherche, ...).

c'est l'entête de la page (ou head en anglais...).
La balise <body> est celle dans laquelle nous passerons le plus de temps. En effet, c'est dans cette balise que l'on devra inscrire tout le contenu visible qui constitue le corps de la
page (body en anglais...).


// Les autres balises et attributs essentiels

Il y a quelques attributs à ajouter à la balise <head> :



  • l'attribut xmlns : cet attribut est
    obligatoire, il correspond à une norme
    XML. Cet attribut sert à
    donner l'adresse d'une page sur le fonctionnement du XHTML.

    On met toujours l'adresse d'une page précise du w3c, on la verra dans un
    prochain exemple.

  • L'attribut xml:lang : on indique dans quelle
    langue est rédigée la page. pour nous, sa valeur est "fr".


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

Entre les balises head, il faut mettre le titre de page que l'on mettra entre les balises title. 


   1  <head>
   2  <title>Titre de ma page</title>
   3  </head>


D'autres balises, appelées Meta-tags (ou meta, balises méta...), servent à definir les informations sur la page destinées aux navigateurs et aux moteurs de recherche.

Ces balises ont deux attributs :

  • name ou http-equiv
    : on définit le type d'information que l'on va préciser

  • content : contient la
    valeur de l'élément que l'on précise. 


   1  <meta name="keywords" content="mot clé, mot clé 2" />

Il existe un méta obligatoire : il contient des informations éssentielles pour la
page, comme le type de caractères utilisés (Français avec accents, anglais, ...).

Il se présente comme ceci : 


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

Pour faire simple, text/html indique au navigateur que le contenu du fichier est du texte, et que le langage employé est
html, et l'attribut charset indique les caractères utilisés (iso-8859-1 correspond aufrançais avec les accents "é è à"...).


// Notre structure de page est terminée

Nous avons donc programmé la structure d'une page html.

Ce qui donne au final :


    1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    3  <head>
    4  <title>Titre de ma page</title>
    5  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6  </head>
    7
    8  <body>
    9    <!-- contenu de la balise body -->
   10  </body>
   11  </html>


Précision : La balise commentaire, que l'on affiche : 


    1  <!-- Commentaire -->

sert à insérer dans le code des notes pour le webmaster, afin qu'il puisse mieux se
repérer dans son code. Les commentairesn ne sont pas lus par le navigateur, donc pas interprétés.

Cette structure n'affiche rien d'autre qu'un fond blanc, normal car nous n'avons rien
inscrit dans la balise body.

Nous allons maintenant voir comment structurer le contenu de notre page.


> retour au sommaire

> voir la suite