Martius Web - Une page HTML

Martius Web : toolbox pour programmeurs et webmasters

Martius Web vous propose ses services à des prix très compétitifs, contactez-nous !

Les tutoriaux

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 commentaires 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

N'hésitez pas à poser vos questions sur le forum