Vous lisez : 5 Structure des documents HTML
Partie Précédente : 4 Généralités sur le langage HTML
Partie Suivante : 6 Eléments courants
5 Structure des documents HTML
Le but de ce chapitre est de donner un aperçu global des moyens mis à disposition des
auteurs par le langage HTML et de sa philosophie sous-jacente. Pour une référence complète
des éléments et attributs, le lecteur est renvoyé aux documents de normalisation [8] ainsi que les
nombreuses ressources disponibles en ligne, comme le Compendium of HTML Elements [10].
En particulier les éléments, attributs et imbrications présentés dans les divers tableaux visent à
donner une idée de l'usage le plus courant et ne cherchent en aucun cas à être parfaitement exhaustifs.
Les exceptions sont nombreuses et seule l'utilisation d'un validateur [12] permet de
s'assurer de la bonne conformité d'un document produit.
Lecture des tableaux. Les différents éléments les plus courants et leurs attributs définis par
HTML 4.0 sont présentés synthétiquement dans les tableaux suivants. HTML 3.2 et les versions
antérieures autorisent un certain nombre d'attributs de présentation permettant de contrôler l'aspect
visuel du document. Ces attributs sont déconseillés par HTML 4.0 (ce qui veut dire qu'ils
pourront ne plus être supportés dans une prochaine version) et doivent donc être abandonnés au
profit des feuilles de style dans les nouveaux documents. Leur usage ne peut se justifier que pour
des raisons de compatibilité avec des navigateurs plus anciens, ils sont signalés par
(DECONS.)
. D'autres attributs doivent obligatoirement être présents avec certains éléments, ils
sont signalés par (OBLIG.)
.
5.1 Attributs génériques
La plupart des éléments HTML décrits par la suite acceptent, depuis la version 4.0 de la
norme, les attributs title
, lang
, style
, class
, id
ainsi qu'une série d'attributs de type événementiel.
Une référence comme le Compendium of HTML Elements [10] permet de vérifier si
ces attributs sont autorisés pour un élément particulier.
title
- Donne un titre à l'élément. Ce titre peut être utilisé par un visualisateur graphique comme légende contextuelle.
lang
- Permet de spécifier la langue dans laquelle est exprimé l'élément. Il s'agit d'un code international :
fr
pour français, en
pour anglais, ...
style
- Permet de spécifier un attribut de style en ligne pour l'élément concerné. Si le style en question s'applique à d'autres éléments, il vaut mieux utiliser une définition dans une feuille de style. La syntaxe de la valeur de l'attribut est définie par le langage de style courant, le plus souvent CSS (voir Ch. 9).
class
- Indique le ou les groupes auquel appartient l'élément. Ce type de regroupement permet en particulier d'attribuer des propriétés stylistiques communes à un sous-ensemble d'éléments de même type.
id
- Attribue un nom (qui doit être unique sur toute l'étendue du document) à l'élément. Cette dénomination permet de lui attribuer un style particulier depuis la feuille de style ou bien de se servir de l'élément comme ancre hypertexte (voir § 6.5).
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
- Ces attributs permettent d'associer des routines de script (voir Ch. 10) à la survenance d'un certaine nombre d'évènements.
5.2 Définition de version
Il est important (quoique non obligatoire) de définir sur la première ligne du document la
version du langage utilisée. Ceci se fait au moyen d'une formule SGML normalisée :
- HTML 3.2 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
- HTML 4.0 strict :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
- HTML 4.0 transitionnel, c'est-à-dire compatible avec HTML 3.2 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- HTML 4.0 avec la possibilité supplémentaire de créer des documents multi-cadres :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
Cette définition de version sert essentiellement aux outils de validation qui permettent de
vérifier la syntaxe d'un document.
5.3 Structure générale du document
Un document HTML 4.0 comprend deux parties. Le document HTML proprement dit qui
ne décrit que la structure et une feuille de style associée qui décrit la mise en page du document.
La présence d'une feuille de style est facultative. Si elle existe, cette feuille peut se trouver:
- dans un fichier séparé (sur la même machine ou une autre voire sur un site différent)
- intégrée dans le document HTML à l'intérieur d'un élément
STYLE
- disséminée à travers les différents éléments HTML sous la forme d'attributs
style
Les feuilles de style sont décrites au Ch. 9. La suite de ce chapitre porte sur le document
HTML proprement dit.
Il existe deux types de structure générale pour un tel document. La structure simple et la
structure multi-cadres (frames). Dans les deux cas on trouve tout d'abord une définition de la
version du langage (voir § 5.2) utilisée puis l'ensemble du document à l'intérieur de l'élément
HTML
.
5.3.1 Structure simple
C'est la structure la plus courante, elle divise le document en deux parties : en en-tête délimité
par l'élément HEAD
et le corps du document limité par l'élément BODY
.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Titre du Document</TITLE>
</HEAD>
<BODY>
... Le corps du document avec le balisage approprié ...
</BODY>
</HTML>
5.3.2 Structure multi-cadres
Il s'agit d'une structure de document permettant de présenter plusieurs documents simples
à la fois en divisant l'espace d'affichage en sous-fenêtres (voir § 5.6). Cette extension du langage
proposée par Netscape a été intégrée dans une version étendue de la norme HTML 4.0. En
effet, la structure multi-cadres est fortement liée à la possibilité d'avoir un affichage de type graphique,
en ce sens cette fonctionnalité est contraire à l'esprit d'HTML d'où sa non-inclusion
dans la norme HTML 4.0 stricte.
5.4 En-tête de document (HEAD)
L'élément HEAD
contient des informations administratives à propos du document mais qui
ne font pas strictement partie de ce dernier. Elles ne sont donc généralement pas représentées
par le visualiseurs dans le corps du document.
A l'intérieur de l'élément HEAD
on trouve divers autres éléments décrits ici.
5.4.1 Titre du document (TITLE)
Il s'agit en fait du seul élément qui soit obligatoire dans un document HTML. Il donne un
titre au document ou plus exactement une dénomination. En effet le contenu de cet élément n'est
pas représenté dans le corps du document. Les visualiseurs graphiques l'affichent usuellement
sur la barre de fenêtre et l'utilisent comme titre si vous insérez le document dans votre liste de
marque-pages (bookmarks).
5.4.2 Meta-information, aide à l'indexage (META)
L'élément META est un élément générique permettant de spécifier des meta-informations
à propos du document. Cet élément comprend essentiellement deux attributs qui sont :
name
- Nom de la meta-information
content
- Valeur de la meta-information
Par exemple on peut ainsi spécifier l'auteur du document :
<META name="Author" content="Oscar Figueiredo">
Une autre utilisation très importante de cet élément consiste à donner une description du
document ainsi qu'une liste de mots clés. Ce type d'information est en effet mis à profit par les
outils d'indexage automatique comme Altavista pour assurer une meilleure indexation :
<HEAD>
<META name="description" content="Un cours sur le langage HTML">
<META name="keywords" content="cours HTML, présentation WWW">
</HEAD>
5.4.3 Feuille de style incluse (STYLE)
Depuis la version 4.0, HTML permet d'inclure une ou plusieurs feuilles de style
(voir § 4.2 et Ch. 9) à l'intérieur du document HTML au moyen de l'élément STYLE
.
5.5 Corps simple de document (BODY)
Le corps du document contient la suite d'éléments constituant le document proprement
dit : en-têtes de chapitres, paragraphes, listes, tableaux, ... Ces différents éléments sont regroupés
logiquement et décrits dans les sections suivantes.
Tableau 1 : Corps du document BODY
<BODY>
| Corps du document
|
Attributs génériques
| Voir § 5.1
|
BACKGROUND (DECONS.)
| Un URL désignant une image servant de toile de fond au document.
|
BGCOLOR (DECONS.)
| Une couleur à utiliser comme fond de document.
|
TEXT (DECONS.)
| Une couleur à utiliser pour le texte du document.
|
LINK (DECONS.)
| Une couleur à utiliser pour mettre en évidence les hyperliens.
|
VLINK (DECONS.)
| Une couleur à utiliser pour les liens déjà visités.
|
ALINK (DECONS.)
| Une couleur à utiliser pour les liens activés.
|
Les couleurs sont spécifiées soit par un nom prédéfini (black
, yellow
, blue
, ...) soit
sous la forme #rrvvbb
, un nombre hexadécimal à 6 chiffres. Les deux premiers chiffres sont
pour la composante rouge, les deux suivants pour le vert et les deux derniers pour le bleu.
5.6 Corps multi-cadres (FRAMESET, FRAME)
L'élément FRAMESET
décrit le découpage géométrique de la zone de visualisation. A l'intérieur
de cet élément, on trouve des éléments FRAME
qui permettent d'indiquer les URLs des
documents HTML à afficher dans chacun des cadres définis. L'élément FRAMESET
peut éventuellement
être suivi par un élément NOFRAMES
contenant une version du document destiné aux
visualiseurs ne supportant pas les multi-cadres ou lorsque l'affichage multi-cadres a été désactivé.
Le contenu de cet élément n'est pas affiché par un visualiseur supportant les multi-cadres.
La structure générale d'un documents multi-cadres est donc de la forme suivante :
L'élément FRAMESET
ne peut comporter que l'un ou l'autres des attributs rows
ou cols
permettant ainsi de diviser la fenêtre en lignes ou colonnes uniquement. On peut alors poursuivre
la subdivision des lignes ou colonnes ainsi créées en imbriquant d'autres éléments
FRAMESET
à l'intérieur du premier. Une division de la fenêtre en deux colonnes, la deuxième
étant elle-même divisée en 3 lignes, s'écrit donc ainsi:
...
<FRAMESET COLS="50%,50%">
<FRAME SRC="colonneGauche.html">
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="colonneDroiteLigne1.html">
<FRAME SRC="colonneDroiteLigne2.html">
<FRAME SRC="colonneDroiteLigne3.html">
</FRAMESET>
</FRAMESET>
...
La division de fenêtre ainsi créée a l'aspect suivant :
HTML 4.0 incorpore également, à travers l'élément IFRAME
, la notion de cadre en-ligne
proposée par Microsoft et qui permet d'afficher un autre document en incrustation dans le cours
d'une page. Ce mécanisme est tout à fait semblable à l'incrustation d'objet que réalise l'élément
OBJECT
. Les attributs de l'élément IFRAME
sont les mêmes que ceux de l'élément FRAME
.
Tableau 2 : Documents multi-cadres (frames)
<FRAMESET>
| Une spécification de division de la fenêtre de visualisation en cadres. Ne peut contenir que
des éléments FRAME et FRAMESET .
|
| Attributs génériques
| Voir § 5.1
|
ROWS
| Une liste de hauteurs de cadres. La fenêtre est divisée en bandes horizontales
de hauteurs spécifiées dans la liste. Les valeurs peuvent être exprimées
soit de façon absolue en pixels, soit en pourcentage soit en flottant
par rapport à l'espace restant. Les valeurs flottantes utilisent le signe *. Si
un seul signe de ce type apparaît dans la liste tout l'espace restant est
affecté à la bande correspondante. S'il y en a plusieurs, l'espace restant
est partagé également entre les bandes correspondantes sauf si un facteur
est appliqué devant *. Ainsi la spécification suivante
ROWS ="25%,2*,*" partage la fenêtre en 3 bandes horizontales celle du
haut occupe 25% de la hauteur totale, celle du milieu les 2/3 de l'espace
ainsi laissé libre c'est-à-dire 50% de la hauteur totale de la fenêtre et la
dernière bande occupe 1/3 de l'espace laissé par la première c'est-à-dire
25% de la hauteur totale de la fenêtre.
|
COLS
| Une liste de largeurs de cadres. La fenêtre est divisée en bandes verticales
de hauteurs spécifiées dans la liste. Les valeurs peuvent être exprimées
de la même façon que pour l'attribut ROWS .
|
BORDER (DECONS.)
| Largeur de la bordure des cadres définis. Une valeur de 0 équivaut à
FRAMEBORDER ="no "
|
BORDERCOLOR (DECONS.)
| Couleur de la bordure des cadres définis.
|
<FRAME>
| Contenu d'un cadre d'affichage dans un document multi-cadres.
|
|
SRC
| Un URL désignant le document à afficher dans le cadre.
|
NAME
| Un nom symbolique désignant le cadre. Ceci permet de spécifier dans
quel cadre afficher un document donné au moyen de l'attribut TARGET de
l'ancre hypertexte (voir § 6.5)
|
MARGINWIDTH
| Largeur en pixels de la marge dans le cadre.
|
MARGINHEIGHT
| Hauteur en pixels de la marge dans le cadre.
|
SCROLLING
| Définit la possibilité pour le cadre d'être muni d'une barre de défilement.
Les valeurs possibles sont yes (défilement autorisé), no (défilement
interdit) et auto (par défaut le choix est laissé au visualiseur).
|
NORESIZE
| Si cet attribut est présent (pas de valeur nécessaire) alors le cadre n'est
pas redimensionnable par le lecteur. Par défaut tous les cadres sont redimensionnables.
|
FRAMEBORDER
| Trace une bordure autour des cadres définis ou pas. Peut prendre les
valeurs yes (par défaut) ou no .
|
BORDERCOLOR (DECONS.)
| Couleur de la bordure pour ce cadre. La couleur de bordure devant être la
même pour tous les cadres partageant le même bord il faut éviter les conflits.
|
Copyright ©1996,1998 EPFL/DI-LSP.