Initiation à la création de site Web

L'en-tête du document

Voir:

Un document HTML jugé complet est plus complexe que les documents vus jusqu'à maintenant.

Structure du document HTML

Un document HTML se compose de trois parties :
1. une ligne contenant les informations de version HTML ;
2. une section en-tête déclarative (enclose par l'élément "head") ;
3. un corps, qui emporte le contenu effectif du document. Le corps peut être implémenté par l'élément "body" ou l'élément "frameset".
Les blancs (les espaces, les sauts de ligne, les tabulations et les commentaires) peuvent survenir avant ou après chaque section.
La section <head> ... </head> contient des instructions pour le navigateur, pour les robots et les moteurs de recherche ou pour l'ordinateur serveur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Mon premier document complet</title>
   </head>
   <body>
      <p>Bonjour tout le monde !</p>
   </body>
</html>

Les balises <meta>

Les balises meta sont utilisées pour

référencer le site,
faire une redirection ou une transition
donner des détails du site et de sont auteur.

Elles sont invisibles sur une page web mais souvent très utiles. Elles entrent toujours dans l'en-tête de votre document (entre <head> et </head>).

Chaque élément "meta" spécifie un couple propriété/valeur. L'attribut name identifie la propriété et l'attribut content en spécifie la valeur.

Exemples :

<meta name="keywords" content="mot-clé1,mot-clé2,mot-clé3,...">

La premiere balise indique au moteur de recherche quels seront les mots-clés de votre site.
Mettez ces derniers en minuscule et ne répétez pas vos mots-clés car cette action est pénalisée par les moteurs de recherche.
<meta name="description" content="Une belle description de mon site!">
Cette balise donne une description de votre site, donc, faites-la courte et conscise.
<meta name="author" lang="fr" content="dinosaures">

On peut utiliser l'attribut lang avec l'élément "meta" pour spécifier la langue de la valeur de l'attribut content. Ceci permet aux synthétiseurs de parole d'appliquer des règles de prononciation en fonction de la langue.
<meta name="keywords" lang="en-us" content="vacation, Mexico, sunshine">

<meta name="keywords" lang="en" content="holiday, Mexico, sunshine">

<meta name="keywords" lang="fr" content="vacances, Mexique, soleil">

La balise <title>

Chaque document HTML doit avoir un élément "title" dans la section "head".
Le titre est indiqué dans la ligne de titre de la fenêtre d'affichage du navigateur.
Il est aussi affiché dans le navigateur dans l'historique des pages déjà visitées.
On utilise l'élément "title" pour identifier le contenu du document.
C'est le titre qui va apparaître comme lien cliquable aux chercheurs Web.

La balise <meta> et les informations par défaut

On peut utiliser l'élément "meta" pour spécifier les informations par défaut sur un document dans les cas suivants :

le langage de script par défaut
le langage de feuille de style par défaut
l'encodage de caractères du document

Exemples :

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

L'information de chemin : la balise <base>

Dans HTML, les liens et les références d'images, d'applets, de programmes de traitement de formulaire, de feuilles de style, etc. sont toujours spécifiés par un URI. Les URI relatifs sont résolus par rapport à un URI de base, qui peut avoir diverses provenances. L'élément "base" permet aux auteurs de spécifier explicitement l'URI de base d'un document.

Quand il est présent, l'élément "base" doit apparaître dans la section "head" du document HTML, avant tout élément qui se réfère à une source externe. L'information de chemin spécifiée par l'élément "base" n'affecte que les URI du document dans lequel cet élément apparaît.

Les deux codes suivants sont équivalents :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Mon premier document complet</title>
   </head>
   <body>
      <p>Visitez le <a href="http://w3.uqo.ca/dii/index.php">département</a> !</p>
   </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Mon premier document complet</title>
      <base href="http://w3.uqo.ca/dii/"/>
   </head>
   <body>
      <p>Visitez le <a href="index.php">département</a> !</p>
   </body>
</html>