Anatomie d'un document Web

Au commencement était HTML

Le langage HTML (HyperText Markup Language) permet de concevoir des documents Web. Ce langage, dérivé de SGML est composé d'éléments. Ces éléments ont un rôle de :

Structuration
Organisation du texte en blocs, en chapitres, en paragraphes, ...
Annotation
Mise en emphase, mise en évidence, citation, abbréviation, ...

Un élément HTML est composé d'une balise ouvrante et d'une balise fermante afin de délimiter la zone de texte concernée par l'élément en question. Par exemple, l'élément p qui délimite un paragraphe de texte a pour balise ouvrante la balise <p> et pour balise fermante la balise </p>.

Certains éléments ne disposent pas de balise fermante. Leur unique balise est qualifiée d'auto-fermante. C'est le cas par exemple de l'élément hr qui permet d'introduire une séparation (sous la forme d'une ligne horizontale) entre deux blocs de texte.

Chaque élément HTML dispose d'attributs prédéfinis. Un attribut est caractérisé par un nom et une valeur. Par exemple, pour indiquer qu'un paragraphe est rédigé en anglais, on peut utiliser l'attribut prédéfini lang avec la valeur en (pour english).

<!-- Commentaire :
     avis rédigé en français -->
<p>
  L'hôtel est situé au centre ville dans une rue calme.
  Mais les chambres sont petites et la décoration est vieillote.
  (Dominique, Reims)
</p>

<hr>

<!-- Commentaire :
     avis rédigé en anglais -->
<p lang="en">
  A very charming place, typically French especially
  the breakfast with croissants: a delight!
  (Judy, Manchester)
</p>

L'hôtel est situé au centre ville dans une rue calme. Mais les chambres sont petites et la décoration est vieillote. (Dominique, Reims)


A very charming place, typically French especially the breakfast with croissants: a delight! (Judy, Manchester)

Dans l'exemple ci-dessus, les caractères <!-- et --> permettent de définir une zone de commentaires. Les commentaires sont ignorés par le navigateur Web et n'apparaissent donc pas à l'écran.

Maintenant que le vocabulaire est posé, il est temps de passer à la dissection d'un document Web complet. Le code source ci-dessous nous servira de sujet d'étude et constitue le squelette minimal de tout document Web. Je vous encourage à copier-coller ce modèle afin de vous en servir comme point de départ de tous vos documents Web.

Nous allons procéder méthodiquement à l'étude de ce code source ligne après ligne afin de comprendre le rôle de chacune de ses instructions.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="description" content="This is my first HTML5 page.">
    <meta name="keywords" content="HTML5, CSS3">
    <meta name="author" content="Olivier Nocent">
    <title>My first HTML5 page</title>
    <link rel="stylesheet" media="screen" href="css/style.css">
  </head>
  <body>
    <h1>Hello World Wide Web!</h1>
  </body>
</html>

Hello World Wide Web!

DOCTYPE

Le doctype (pour Document Type Declaration) permet de renseigner le navigateur Web sur la version de HTML utilisée par le document Web. Le doctype utilisé dans l'exemple fait référence à HTML5.

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

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

<!-- HTML5 -->
<!doctype html>

Entête et corps

Un document HTML est composé de deux parties.

Entête délimité par l'élément head
Les éléments contenus dans l'entête n'ont pas vocation à être affichés sauf l'élément title dont le contenu apparaît dans l'onglet du navigateur Web. Les informations contenues dans l'entête renseignent sur l'auteur et le contenu du document.
Corps délimité par l'élément body
L'ensemble des informations contenues dans le corps sont affichées dans la fenêtre du navigateur Web.

Cas épineux d'Internet Explorer

Par défaut, le navigateur de Microsoft® fonctionne en mode de compatibilité afin de pouvoir continuer à afficher des sites Web anciens. Malheureusement, ce mode de compatibilité ne permet pas de bénéficier des nouveautés introduites par HTML5 et CSS3.

L'élément meta associé à l'attribut content="IE=edge" permet de désactiver le mode de compatibilité, forçant ainsi Internet Explorer à utiliser la version la plus récente de son moteur de rendu HTML/CSS.

Codage des caractères

L'élément meta associé à l'attribut charset (jeu de caractères) permet de préciser le système de codage des caractères au sein d'un document HTML. En effet, même si les caractères alphanumériques et la ponctuation bénéficient d'un codage unique (ASCII), il n'en est pas de même pour les caractères accentués par exemple. En effet, il existe plusieurs systèmes de codage des caractères étendus. Les plus communs sont UTF-8, ISO-8859-1 (Latin1) et ISO-8859-15 (Latin9). Le W3C recommande l'usage d'UTF-8 pour les documents Web.

Pour tester les différences entre les systèmes de codage de caractères, vous pouvez en imposer un à l'aide de l'outil codage, ou encodage du texte en fonction du navigateur Web.

Exercice 2

Créez votre page d'accueil index.html en copiant-collant l'exemple ci-dessus. Vous prendrez soin de modifier la langue du document, son auteur, sa description, ses mots-clés et son contenu.

Et le W3C créa CSS

Comme évoqué en préambule, la fonction du langage HTML est de structurer le contenu textuel du document Web. Afin d'agir sur l'apparence visuelle des documents, le W3C a introduit un nouveau langage appelé CSS (Cascading Style Sheets) qui permet de modifier la présentation (couleur, police de caractères, image de fond, ...) et la disposition de chaque élément HTML.

Pour un sélecteur donné (on se limitera pour le moment aux sélecteurs simples qui correspondent à un élément HTML), on peut affecter à ses propriétés CSS des valeurs particulières. Dans l'exemple ci-dessous, la couleur du texte de l'élément body sera rouge. De par sa nature cascadée, la feuille de style va attribuer la couleur rouge au texte de tous les éléments HTML imbriqués dans l'élément body. Le deuxième sélecteur de l'exemple écrase la propriété héritée pour remplacer la couleur du texte par le vert.

body {
  color: red;
}

span {
  color: green;
}
<body>
  <p>
    Le texte est en rouge sauf le mot <span>vert</span>.
  </p>
</body>

Le texte est en rouge sauf le mot vert.

Il y a deux manières d'utiliser une feuille de style CSS au sein d'un document HTML. La feuille de style peut être enregistrée dans un fichier externe (nommé style.css par exemple) dans le sous-répertoire css et référencée au sein du document HTML grâce à l'élément link.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>My first HTML5 page</title>
    <link rel="stylesheet" media="screen" href="css/style.css">
  </head>
  <body>
    <h1>Hello World Wide Web!</h1>
  </body>
</html>

Cette technique est fortement recommandée car elle permet à plusieurs documents HTML de partager la même feuille de style et de garantir ainsi une cohérence graphique au sein du site Web.

L'autre manière consiste à incorporer le code CSS au sein du document HTML grâce à l'élément style.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>My first HTML5 page</title>
    <style>
      html {
        font-family: Helvetica, sans-serif;
        font-size: 12px;
        background-color: black;
        color: rgb(255, 127, 0);
      }

      h1 {
        color: red;
      }

      a:hover {
        color: white;
      }    
    </style>
  </head>
  <body>
    <h1>Hello World Wide Web!</h1>
  </body>
</html>

Exercice 3

Créez votre fichier style.css en vous inspirant des exemples ci-dessus afin de styliser votre page d'accueil index.html.

En résumé, chacun de ces deux langages Web a une fonction propre et il convient de respecter scrupuleusement une séparation du fond (HTML) et de la forme (CSS).

HTML
Structuration et annotation du contenu
CSS
Présentation et disposition du contenu