Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#05 { HTmL : balises ; }

mots-clés

Comme son nom l’indique, le HTmL est un système textuel. Car, comme nous l’avons expliqué dans le cours précédent sur la structure d’une page HTmL, l’acronym HTmL signifie « Hypertext markup Language », c’est-à-dire le langage de marquage des hypertextes — ou dans sa traduction littérale : langage de balisage des hypertextes. Cet héritage de l’hypertexte signifie qu’il y a beaucoup de mots-clés traditionnellement réservés au documents textuels qui se trouvent dans ce langage : paragraphes, titres, listes, citations, définitions, tableaux de valeurs, etc. Du côté des autres medias, il n’y a qu’un seul mot-clé définissant l’image, par exemple, et celui-ci ne fait rien d’autre que d’inclure l’image dans le document. Il n’y a pas de description de la fonction de l’image : reportage, photo de famille, photo de classe, publicité, oeuvre photographique, tout est traité comme s’il s’agit du même type de document, une image. Du côté du son et de l’image en mouvement, c’est encore pire : ils ne sont que des media « divers » rajoutés à la page — ils ne sont même pas considérés en tant que tel par le HTmL.

Tout ce qui importe donc pour le HTmL est le texte. Sans faire une liste exhaustive, voici quelques-unes des balises que HTmL propose pour structurer le text, et que nous allons expliquer pendant ce cours :

- titres
- paragraphes
- liens
- listes

Voici la version HTmL de ces balises :

- <title></title>, <h1></h1>, <h2></h2>, ..., <h6></h6>
- <p></p>
- <a href></a>
- <ul></ul>, <ol></ol>, <dl></dl>

En regardant ces balises, on peut noter qu’il n’y a qu’une seule « nouveauté » de l’HTmL — le lien. Toutes les autres sont connus dans d’autres contextes bien avant le HTmL. On pourrait même rappeler que le lien avait déjà été inventé en quelque sorte par Vannevar Bush en 1945 qui parlait également à l’époque d’hypertexte. Par contre, la nouveauté vient du fait de relier ces notions à un autre support qui n’avait pas encore trouvé son ampleur actuel : Internet. C’est d’ailleurs une des forces du HTmL qui l’a permis d’être rapidement adopté. Il a sû se reposer sur des formes bien connus par ailleurs (on connait les paragraphes), en introduisant un seul élement radicalement novateur à l’intérieur de ce paysage textuel rassurant (puisque connu).

<title>

Il y a deux types de titres dans le HTmL. Nous avons déjà vu le premier, qui s’écrit avec les balises <title></title> :


<head>
 <title>Voici le titre de la page</title>
</head>

Ce titre n’est pas visible à l’intérieur de la page, mais en haut du navigateur qui l’affiche. On retrouve également ce titre quand nous faisons une recherche dans Google :

Si nous suivons le lien de notre exemple (http://www.ecole-art-aix.fr), et que nous demandons le code HTmL de ce lien, nous voyons l’usage également de cette balise :

Voici le code source :

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Il y a ensuite des titres qui s’affichent à l’intérieur du document lui-même. Nous en avons déjà vu trois dans la page web de ce cours lui-même : « mots-clés », « <title> », et le titre de ce paragraphe. Ces titres s’appellent en anglais des « headings », et décrivent des titres de chaque sous-partie d’un texte. Les « headings » viennent en HTmL avec 6 différents parfums. Le fait d’avoir différentes types de « headings » sera très pratique par la suite, quand nous commençons à appliquer les feuilles de style graphiques. Par contre, dans son comportement par défault, <h1></h1> jusqu’à <h6></h6> revient dans la plupart des cas à décrire 6 différentes tailles de titres :

Ce code HTmL donne le résultat suivant dans le navigateur :

<p>

Nous avons déjà vu les paragraphes dans le cours précédent. Le paragraphe défini un champ de texte. Il est souvent accompagné de « headings », comme dans l’illustration suivante :

Normalement, ce code s’affichera de la façon suivante dans le navigateur :

<a href>

Les liens sont plus complexes que les autres balises. Ils s’écrivent <a href=""> d’un côté, et </a> de l’autre. En plus, un lien doit pointer vers quelque chose d’autre. Il faut donc écrire ce quelque chose d’autre à l’intérieur du lien. On écrit par exemple <a href="http://www.ecole-art-aix.fr"> pour faire un lien vers le site de l’école. Ce qui se trouve entre guillemets sera le contenu du lien.

Il y a deux façons de pointer un lien vers un autre document :

- Un lien peut pointer vers un document à l’extérieur au site
- Un lien peut pointer vers un autre document dans le même dossier

Voici un exemple pour illustrer ces deux possibilités :

Notez que le lien en rouge pointe vers une addresse fixe en écrivant son addresse tout ensemble (http:/www.ecole-art-aix.fr), alors que l’autre lien pointe vers un autre fichier (paragraphes.html) qui se trouve dans le même dossier parce qu’il n’écrit que le nom du fichier, sans le nom du serveur. Par contre, tous les deux liens ont la même apparence dans le navigateur.

<ul>, <ol>, <dl>

Les listes sont plus pratiques qu’on ne pense. Elles peuvent être utilisées pour lister des choses simples, comme les ingrédients d’une recette, mais elles peuvent aussi être pratiques pour des choses typiquement hypertextuelles : des menus.

Il y a trois types de listes dans le HTmL :

- Des listes en vrac
- Des listes ordonnées
- Des listes de définitions

Les listes en vrac affichent les élements avec un petit cercle devant chaque élement et dans l’ordre de leur apparence dans le HTmL. Avec les feuilles de style on pourra enlever cette signe graphique et la remplacer avec autre chose. Aussi, l’ordre des élements suit aucune règle : si on place « zebre » avant « antilope » dans le HTmL, « zebre » s’affichera avant « antilope » dans la liste.

Les listes ordonnées affichent un petit numéro avant chaque élement de la liste (1, 2, 3, 4, ...). Avec les feuilles de styles graphiques on peut modifier ces numéros en les transformant en lettres (A, B, C, D, ...) ou d’autres élements. Tout comme dans les listes en vrac, l’ordre des élements dépend de leur arrivé dans le HTmL.

Les listes de définitions sont composées d’une terme, suivi de sa définition. Comme les autres listes, elles sont ordonnées par rapport à leur position dans le HTmL source.

Voici un exemple qui illustre ces trois formes de listes :


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTmL 1.0 Strict//EN"
 "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Listes</title>
</head>

<body>

 <h4>Liste en vrac</h4>

 <ul>
   <li>de la ficelle</li>
   <li>des cailloux</li>
   <li>un morceau de paper</li>
 </ul>

 <h4>Liste ordonnée</h4>

 <ol>
   <li>laver</li>
   <li>rincer</li>
   <li>essorer</li>
 </ol>

 <h4>Liste de définitions</h4>

 <dl>
   <dt>unordered list</dt>
     <dd>Les listes en vrac affichent les élements avec un petit cercle devant chaque élement.</dd>
   <dt>ordered list</dt>
     <dd>Les listes ordonnées affichent un numéro devant chaque élement de la liste.</dd>
   <dt>definition list</dt>
     <dd>Les listes de définitions sont composées d'une terme, suivi de sa définition.</dd>
 </dl>

</body>

</html>

Résumé

Nous avons regardé quatre différentes balises importantes dans la création de pages web : les titres, les paragraphes, les liens, et les listes. Dans les cours suivants nous verrons quelques balises en plus (images, tableaux) et nous verrons avec les feuilles de styles graphiques comment modifier l’apparence de ces balises.


ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr