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 <p> et pour balise fermante </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)

Info

Dans l'exemple ci-dessus, les caractères  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 va nous servir 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 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 fichier 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.

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 du 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.

Exercice

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 fichier 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 fichier HTML grâce à l'élément link.

/*
 * Fichier style.css
 */

html {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  background-color: black;
  color: rgb(255, 127, 0);
}

h1 {
  color: red;
}

a:hover {
  color: white;
}

<!doctype html>
<html lang="en">
  <head>
    <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>

Info

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 fichier HTML grâce à l'élément style.

<!doctype html>
<html lang="en">
  <head>
    <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

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