Cours HTML : les bases

Bases

Ce chapitre présente les notions de base du langage HTML : la notion d'élément HTML délimité par des balises, le squelette d'un document HTML et les déclarations à placer en en-tête. Nous aborderons aussi la notion de feuille de style, qui permet une complète séparation de la forme et du fond.

Sommaire

  1. Les éléments et les balises
    1. Les éléments
    2. Les balises
    3. Les attributs
  2. Jeu de caractères
  3. Squelette d'un document
    1. Version de HTML
    2. L'en-tête d'un document HTML
    3. Le corps d'un document HTML
  4. Les styles

Les éléments et les balises

Les éléments

HTML est un markup language (langage de marquage ?). Il permet d'enrichir un texte avec des informations structurelles, sémantiques et de présentation. Le principe de HTML, commun à ce type de langages (SGML pour Standart Generalized Mark-up Language), consiste à utiliser des éléments délimités par des balises.

En fait, HTML est un langage de type SGML, correspondant à un ensemble particulier d'éléments pour décrire des pages destinées au World Wide Web.

Les éléments permettent d'associer à différents blocs (texte, images...) les informations structurelles, sémantiques et de présentation désirées. Les principaux éléments HTML permettent de définir des liens hypertextes, des titres, des paragraphes, des listes, des tableaux, des images, et cætera...

Les balises

Les éléments sont délimités par des balises. On place une balise de début avant le contenu de l'élément et une balise de fin après. Mais dans certains cas, la balise de fin n'est pas nécessaire.

Une balise est formée en encadrant le nom de l'élément avec les symboles < et > (soit <element>element est le nom de l'élément). Pour une balise de fin on ajoute le caractère / avant le nom de l'élément (soit </element>. Dans l'exemple suivant on définit un titre ou en-tête principal (élément H1). Seul le texte balisé constitue l'élément H1. Les navigateurs courants utilisent pour ce genre d'éléments une typographie plus forte.

<H1>L'estuaire de Seine</H1>
Lieu magique, rencontre du fleuve et de la mer, un environnement unique,
l'estuaire de Seine est aussi un lieu de communication important... 

Ce code produit l'affichage suivant dans un navigateur graphique :

L'estuaire de Seine

Lieu magique, rencontre du fleuve et de la mer, un environnement unique, l'estuaire de Seine est aussi un lieu de communication important...

Enfin, un certain nombre de balises n'ont pas besoin de marqueur de fin. La fin de l'élément sera déterminée automatiquement par le logiciel de navigation. C'est le cas en particulier de l'élément P qui indique un nouveau paragraphe. Le code précédent serait d'ailleurs plus correct en ajoutant une balise <P> après le titre :

<H1>L'estuaire de Seine</H1>
<P>Lieu magique, rencontre du fleuve et de la mer, un environnement unique,
l'estuaire de Seine est aussi un lieu de communication important... 

Les attributs

Les attributs permettent d'apporter certaines précisions à des éléments. Il peut s'agir par exemple d'un nom de fichier (pour placer une image) ou d'une référence à une adresse HTML (lorsqu'on crée un lien). On place les attributs dans la balise de début de l'élément concerné. La syntaxe est simple : "nom de l'attribut"="valeur de l'attribut".

Dans l'exemple suivant, on place une image (élément IMG). Deux attributs permettent l'un de déterminer le nom du fichier contenant l'image et l'autre de placer une brève description de cette image.

Un bateau

<IMG src="bateau01.jpg" alt="Un bateau">

Remarque 1 : l'élément IMG n'a pas besoin de balise de fin.

Remarque 2 : l'attribut alt de l'élément IMG est indispensable pour construire des pages accessibles. Il a d'ailleurs été rendu obligatoire par la norme HTML 4.0.

Conventions

Les noms des balises comme les attributs peuvent être écrits indifféremment en majuscule ou en minuscules. Cependant, pour plus de clarté dans ce cours, j'essayerai d'écrire systématiquement les noms d'éléments en majuscules et en minuscules.

Jeu de caractères

Pour différentes raisons le jeu de caractère utilisé pour stocker les documents HTML est le code ASCII standard sur 7 bits. Ce code permet de décrire le jeu de 128 caractères de base comprenant les lettres majuscules et minuscules, les chiffres et les signes de ponctuation. Les caractères accentués sont codés dans des jeux de caractères étendus à 8 bits.

La principale raison qui aujourd'hui oblige à continuer d'utiliser le code ASCCI 7 bit et non un code étendu est que tous les ordinateurs n'utilisent pas les mêmes codes étendus (caractères 128 à 255). Les machines sous Windows et la plupart des machines Unix utilisent maintenant le code dit ISO-LATIN1, mais les PC sous DOS, les MACintosh et différents autres types d'ordinateurs utilisent d'autres codes.

Pour écrire des documents susceptibles d'être consultés sans problèmes quelque soit le type de système du client, il est nécessaire de coder les caractères accentués en utilisant un codage un peu particulier. On indique entre des caractères & et ; la lettre et l'accent. Ainsi le caractère é doit-il être représenté par la chaine &eacute;.

Mais les caractères accentués ne sont pas les seuls à être codés de cette façon. Le caractère & lui même doit être codé de façon particulière sinon comment différencier les cas où on l'utilise pour lui même de ceux où il débute un caractère spécial ? De même les < et > pourraient être confondus avec le début où la fin d'une balise.

Vous trouverez en annexe une liste de tous les caractères accentués et spéciaux reconnus par les navigateurs. Voici quelques exemples parmi les plus fréquement utilisés.

         &eacute; é          &agrave; à          &lt; <
&egrave; è &acirc; â &gt; >
&ecirc; ê &ugrave; ù &quot; "
&euml; ë &ccedil; ç &amp; &
&Eacute; É &Ccedil; Ç &nbsp; espace insécable

Squelette d'un document

Un document HTML 4.0 comporte 2 parties, encadrées par des balises <HTML> et </HTML> :

D'autre part, la version HTML utilisée doit être précisée dans la première ligne, en utilisant une balise <!DOCTYPE ...>.

Exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
  <HEAD>
    <TITLE>Bienvenue dans l'estuaire de Seine</TITLE>
  </HEAD>
  <BODY>
    <H1>L'estuaire de Seine</H1>
    <P>Lieu magique, rencontre du fleuve et de la mer, un environnement unique,
    l'estuaire de Seine est aussi un lieu de communication important... 
  </BODY>
</HTML>
Voir cet exemple

Remarquez dans l'exemple la position du texte marqué par l'élément <TITLE>.

Versions de HTML

Il existe 3 versions de HTML 4.0, correspondant à 3 DTD (Document Type Declaration) :

L'en-tête d'un document HTML

L'en-tête sert à indiquer un certain nombre d'informations relatives au document dont le logiciel de navigation ou tout autre agent logiciel peut tirer partie. En général ses informations ne sont pas affichées directement. Quelques exemples :

Le corps d'un document HTML

Il s'agit du contenu du document à proprement parler, de ce qui sera présenté à l'utilisateur. C'est un élément HTML délimité par des balises <BODY>.

Dans les précédentes versions de HTML on indiquait la couleur des fonds, du texte, des liens... dans des attributs de la balise <BODY>. Cette façon de faire est obsolète avec HTML 4.0. La technique valide est d'utiliser des feuilles de style.

Plus généralement, on évitera d'utiliser les éléments HTML ou les attributs obsolètes. Tout d'abord ces éléments sont remplacés par des propriétés de feuilles de styles, qui offrent des possibilités bien plus étendues. Mais ces éléments posent en plus des problèmes d'accessibilité.

Les styles

Reprenons l'exemple du chapitre précédent (voir cet exemple).

L'utilisation de feuilles de style permet d'améliorer la présentation de ce document sans le modifier. Il suffit de décrire la façon dont doivent être présentés chacun des éléments.

Voici un lien vers le même code une fois les styles ajoutés (voir l'exemple avec une feuille de style).

On peut associer à chaque élément HTML un style dans lequel seront décrites toutres les caractéristiques concernant la mise en forme de cet élément. Ainsi on pourra choisir la police de caractères, la taille, la couleur et la graisse du texte, les marges, les encadrements et bien d'autres traits.

Dans le chapitre suivant, nous allons aborder les éléments permettant de structurer le texte.


Dominique Archambault, 1998