Une version imprimable

Transcription

Introduction à la Création de Documents
pour le World Wide Web
HTML 4.0
Oscar Figueiredo
DI/LSP
3ème édition - avril 1998
Ecole Polytechnique Fédérale de Lausanne - Laboratoire de Systèmes Périphériques
Avertissement :
Ce document présente le fonctionnement du World Wide Web et le langage HTML qui
en est le support essentiel. L’attention du lecteur est attirée sur le fait que ce domaine est en pleine évolution. Ce qui pourrait passer pour une norme de facto change parfois très vite d’où la
difficulté pour un document imprimé d’en présenter une vision tout à fait à jour. Le lecteur soucieux de précision est donc invité à se référer le plus souvent aux documents normatifs les plus
récents (souvent disponibles en ligne) et à se tenir informé de leur évolution. Cette 3 ème édition
s’appuie sur la dernière recommandation du W3C au sujet du langage, HTML 4.0, datant du
mois de décembre 1997.
Une version électronique de cette ”Introduction à la Création de Documents pour le World
Wide Web” est disponible à l’URL http://diwww.epfl.ch/w3lsp/pub/coursweb/
Copyright ©1996,1998 Oscar Figueiredo LSP/EPFL.
Sommaire
1 World Wide Web : une porte sur Internet . . . . . . . . . . . . . . . . . . . . . . . . 7
2 Les principes de fonctionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1 Le modèle client-serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2 Documents hypermedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3 URL : Uniform Resource Locator . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
8
9
9
3 Le protocole HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2 Le serveur HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4 Généralités sur le langage HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.1 HTML et SGML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2 La séparation entre contenu et mise en forme . . . . . . . . . . . . . . . . . . .
4.3 Les différentes versions de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4 HTML en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4.1 Les entités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4.2 Les étiquettes (tags) et les éléments . . . . . . . . . . . . . . . . . . . . . . .
4.4.3 Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
13
14
14
15
15
16
16
5 Structure des documents HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1 Attributs génériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2 Définition de version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3 Structure générale du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3.1 Structure simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3.2 Structure multi-cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4 En-tête de document (HEAD) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4.1 Titre du document (TITLE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4.2 Meta-information, aide à l’indexage (META) . . . . . . . . . . . . . . .
5.4.3 Feuille de style incluse (STYLE) . . . . . . . . . . . . . . . . . . . . . . . . .
5.5 Corps simple de document (BODY) . . . . . . . . . . . . . . . . . . . . . . . . . .
5.6 Corps multi-cadres (FRAMESET, FRAME) . . . . . . . . . . . . . . . . . . . .
17
17
18
18
19
19
19
19
19
20
20
20
6 Eléments courants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.1 Balisage de texte courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2 Eléments de niveau bloc, paragraphes . . . . . . . . . . . . . . . . . . . . . . . . .
6.3 Séparateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4 Listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.5 Ancres et liens hypertexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6 Incrustations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.1 Images (IMG) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.2 Figures et cartes réactives (cliquables) . . . . . . . . . . . . . . . . . . . . .
6.7 Incrustation générique (OBJECT) . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.8 Applet (APPLET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
23
25
26
27
28
30
30
30
32
33
Introduction à la Création de Documents pour le World Wide Web
7 Formulaires de Saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
8 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8.1 Structure des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8.2 Groupements de colonnes et rangées . . . . . . . . . . . . . . . . . . . . . . . . . .
8.3 Tableaux complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
39
40
42
9 Feuilles de Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.1 Association de feuilles de style à un document HTML . . . . . . . . . . . .
9.2 Les éléments DIV et SPAN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.3 Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.3.1 Syntaxe générale du langage . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.3.2 Propriétés usuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
45
46
46
46
47
10 Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
11 L’Avenir du World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
A Jeu de Caractères et Entités HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
A-1 Entités de caractères spéciaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
A-2 Entités ISO Latin 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
B Exemples Concrets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
B-1 Elements Structurels et Formatage de Texte Courant . . . . . . . . . . . . .
B-2 Liens, listes, images, positionnement par feuilles de style . . . . . . . . .
B-3 Formulaire de Saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
B-4 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
57
57
58
60
62
C Références Bibliographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Liste des Tableaux
1
2
3
4
5
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Corps du document BODY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Documents multi-cadres (frames) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Eléments de niveau texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Eléments typographiques (déconseillés) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Eléments de niveau bloc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Eléments de liste (exemples) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Eléments de liste simple (UL, OL, LI) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Eléments de liste de définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Hyperliens et ancres (A et LINK) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Images (IMG) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Images réactives côté client (MAP, AREA) . . . . . . . . . . . . . . . . . . . . . . . . . 32
Incrustation d’objets génériques (OBJECT, PARAM) . . . . . . . . . . . . . . . . . 33
Formulaires de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Attributs de l’Elément INPUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Tableaux (TABLE, CAPTION) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Groupements de cellules (COL, COLGROUP, THEAD, TFOOT, TBODY)42
Tableaux : Rangées et colonnes (TR, TD, TH) . . . . . . . . . . . . . . . . . . . . . . . 43
Feuille de style interne (STYLE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
CSS2 : Propriétés usuelles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Scripts (SCRIPT). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
1 World Wide Web : une porte sur Internet
L’Internet et le World Wide Web sont deux concepts à tel point liés que la confusion règne
parfois chez les nouveaux utilisateurs. Si le World Wide Web est le système d’information qui
a popularisé l’Internet, il doit à ce dernier ses fondements mêmes et surtout son infrastructure.
L’Internet est le réseau des réseaux, un maillage planétaire d’ordinateurs interconnectés à
travers un protocole qui leur permet de tous parler la même langue, le protocole TCP/IP. Depuis
ses premiers balbutiements datant seulement des années 70 quand l’Advanced Research Projects Agency, liée à la défense américaine, mettait en place ARPAnet, un réseau censé résister
à une attaque nucléaire, Internet a littéralement explosé et relie aujourd’hui plusieurs millions
de machines sur tous les continents. Dès cette époque des services et des normes se sont mis en
place destinés, du moins au début, à faciliter les échanges entre les communautés académiques.
Parmi ces services certains sont encore très utilisés aujourd’hui : le courrier électronique, le
transfert de fichiers (FTP), les services de conférence (News). Les services les plus récents sont
les services d’information comme Gopher, Veronica et WAIS. Le World Wide Web s’inscrit
dans cette lignée et pour tout dire a complètement éclipsé ses prédécesseurs. Il a donné à l’Internet une forme de cohésion en permettant d’établir des liens entre les masses d’informations
autrefois dispersées. Grâce au Web, du point de vue de l’utilisateur, l’Internet apparaît enfin
comme un tout.
Le concept du World Wide Web est né au CERN quand Tim Berners-Lee cherchait des
solutions pour faciliter la communication entre les chercheurs. Il introduisit pour la première
fois le concept d’hypermedia dans l’échange d’informations au quotidien: plutôt que d’organiser l’information sous la forme classique de bases de données, son idée était de la laisser sous
forme non structurée a priori en permettant simplement à chaque document de faire référence
aux autres. C’est là le concept clé, emprunté au révolutionnaire Hypercard d’Apple. Mais le
Web aurait pu en rester là, comme tous les autres outils d’Internet, un simple produit à interface
profondément anti-intuitive, réservé à des gourous de l’informatique si Marc Andreessen, à
l’Université de l’Illinois à Urbana Champaign n’avait, en 1993, publié la première version de
Mosaic. Mosaic est le logiciel qui a apporté au World Wide Web, et par extension à Internet, sa
première interface conviviale et qui a ainsi permis de le démocratiser. Par ce simple déclic, le
succès a été inespéré, inouï et la déferlante de nouveaux sites apparaissant chaque jour ne semble pas devoir s’arrêter de sitôt [1][2].
7
2 Les principes de fonctionnement
D’un point de vue technique, les fondements du World Wide Web sont étonnamment simples. Il s’agit de permettre l’accès, au moyen d’un système client-serveur, à des documents hypermedia distribués!
2.1 Le modèle client-serveur
Le World Wide Web fonctionne suivant le modèle classique client-serveur. Deux acteurs
sont mis en jeu: d’un côté le client qui effectue des requêtes en direction du serveur, de l’autre
le serveur qui exécute ces requêtes et renvoie le résultat au client. Client et serveur sont en pratique deux logiciels différents communiquant au moyen d’un protocole sur une même machine,
à travers un réseau local ou bien à travers un réseau étendu (Figure 1).
Hôte Distant
Serveur
HTTP
Client
Re
qu
ête
on
se
Ré
p
e
ns
FTP
HTTP
Ré
pon
se
po
Ré
u êt
e
te
uê
R eq
q
Re
Serveur
ftpd
Client
Hôte Local
Figure 1: Le modèle client-serveur du World Wide Web
Netscape Navigator et MS Internet Explorer sont ainsi les deux programmes clients
World Wide Web les plus répandus mais ce ne sont de loin pas les seuls, on note également le
petit nouveau Opera, Lynx et une foule d’autres. Tous ne sont pas nécessairement graphiques,
8
il en existe purement textuels ou adaptés à certaines formes de handicap ou de consultation (par
exemple des navigateurs à synthèse vocale permettent de naviguer par téléphone). Côté serveurs, on note Apache, un logiciel libre (free software) qui est le serveur le plus répandu, et des
produits commerciaux comme les différents serveurs de Netscape ou Microsoft.
Le rôle d’un navigateur client se borne à
n traduire les ordres que lui donne l’utilisateur à travers l’interface graphique en
messages conformes à un protocole d’échange avec un serveur
n contacter le serveur adéquat et lui passer la requête
n attendre la réponse du serveur
n mettre en forme cette réponse et la présenter de façon convenable à l’utilisateur.
Le serveur renvoie en effet un fichier “brut” au client et c’est ce dernier qui est responsable de sa mise en forme. Ceci se remarque facilement en utilisant deux programmes clients différents pour visualiser le même document Web
2.2 Documents hypermedia
On appelle document hypertexte un document s’apparentant à un simple texte mais que
l’on a pourvu d’un mécanisme permettant d’établir des liens entre différentes parties. L’exemple actuellement le plus connu de ce type de documents est sans doute celui des encyclopédies
sur CD-ROM où l’utilisateur peut à tout moment sauter à la définition d’un mot qu’il aura trouvé à un autre endroit dans la définition d’un autre mot. Ainsi, à la différence d’un livre où les
données sont organisées selon une structure linéaire inhérente et suggèrent donc un certain
mode de consultation, un document hypertexte n’a pas de structure apparente unique mais plutôt
une structure “à la carte” définie par celui qui le consulte selon l’enchaînement de liens qu’il
décide de suivre. La notion d’hypermedia est semblable à celle d’hypertexte, cependant on préfère utiliser le terme hypermedia pour designer des documents contenant non seulement du texte
mais aussi d’autres types de données (son, images fixes ou animées, etc...).
2.3 URL : Uniform Resource Locator
Dans un contexte plus large que celui d’une simple encyclopédie sur CD-ROM se pose le
problème de l’identification des documents, indispensable pour établir une référence vers eux.
Cette difficulté est d’autant plus critique qu’Internet est constitué d’une myriade de serveurs organisés suivant des modèles totalement différents, sur lesquels l’accès aux documents se fait selon des protocoles variés. Pour pallier à ceci, une nomenclature standardisée a été définie pour
identifier individuellement les différents documents accessibles à travers l’Internet. Cette nomenclature est connue sous le nom d’URL (Uniform Resource Locator qui se traduit parfois par
Localisateur Uniforme de Ressource ou par le néologisme Locateur Uniforme de Ressource).
Un URL1 est de la forme suivante :
protocole://serveur[:port]/[chemin/]fichier[#position]
protocole :
Le nom du protocole. Le plus souvent http ou ftp
serveur :
Le nom d’une machine reliée à Internet (ex: www.epfl.ch) ou
son numéro IP (ex: 128.178.50.32).
9
[port] :
Numéro du port sur lequel le serveur est en attente. Suivant le
protocole utilisé il existe toujours une valeur par défaut et ce
paramètre est alors omis.
[chemin] :
Le chemin (suite de répertoires séparés par des /) vers le document recherché.
fichier :
Le nom du document recherché.
[position] :
Un nom désignant une position (ancre) à l’intérieur du document. Facultatif.
Les documents hypermedia présents sur le World Wide Web sont écrits dans le langage
HTML (HyperText Markup Language) il s’agit de simple texte auquel on a ajouté des constructions spéciales qui permettent de définir en particulier les liens vers les autres documents au
moyen des URLs. HTML permet d’abréger les URLs pour alléger l’écriture. Ainsi à l’intérieur
d’un document dont l’URL absolu serait http://www.some.server/pub/doc.html, on
peut trouver des URLs de la forme :
• /private/secret.html
Un URL commençant par un / fait référence à la base du document courant. Cet URL
est donc équivalent à l’URL absolu :
http://www.some.server/private/secret.html
• misc/anotherdoc.html
Un URL non absolu ne commençant pas par le caractère / est dit relatif et fait
référence au chemin complet du document courant. Cet URL est donc équivalent à
http://www.some.server/pub/misc/anotherdoc.html
HTML autorise également des URLs étendus permettant le passage de paramètres . Ainsi:
http://www.some.server/cgi-bin/imagemap.cgi?x=15&y=20 invoque le programme imagemap.cgi se trouvant dans le répertoire /cgi-bin sur le serveur
www.some.server en lui passant comme paramètres x=15 et y=20.
1. Très précisément on décrit ici un URI (Uniform Resource Identifier) dont l’URL est une sous-partie.
Par abus de langage on assimile les deux [3].
10
3 Le protocole HTTP
Comme indiqué précédemment, le protocole est le langage commun parlé par le client et
le serveur pour se comprendre et mener à bien les requêtes de l’utilisateur. Le protocole de loin
le plus utilisé sur le World Wide Web est le protocole HTTP (HyperText Transfer Protocol).
C’est un protocole développé spécialement pour le transfert de documents hypermedia écrits en
HTML. Dans cette optique, HTTP est un protocole sans état (à la différence de protocoles comme FTP, il ne maintient pas d’information interne au cours d’une connexion) afin de traiter avec
un maximum d’efficacité des requêtes extrêmement simples mais nombreuses. Les documents
transmis sont typés pour permettre de construire des systèmes hypermedia.
3.1 Description
Le protocole HTTP est très simple. Une transaction HTTP se décompose en effet en quatre phases :
n Connexion
n Requête
n Réponse
n Fermeture
La spécification d’HTTP/1.0 est maintenant stabilisée dans le RFC 1945 [3]. La prochaine
version HTTP/1.1 est pratiquement finalisée et une nouvelle génération est déjà en préparation
sous le nom HTTP-NG.
3.2 Le serveur HTTP
L’activité du programme serveur se limite à :
n attendre les requêtes d’un client en restant perpétuellement à l’écoute
n une fois reçue la requête, le serveur l’interprète et l’exécute, le plus souvent il renvoie en retour le fichier demandé par le client.
Le rôle principal du serveur est donc de renvoyer au client les fichiers qui lui sont demandés. Ces fichiers contiennent la plupart du temps du langage HTML et des images en format GIF
ou JPEG mais ils peuvent contenir absolument n’importe quel autre type de données (texte brut,
Postscript, fichier son, programme exécutable, etc...)
11
Parfois le client demande au serveur un peu plus qu’un simple fichier, il peut lui demander
d’exécuter un programme et de lui renvoyer le résultat de ce programme, c’est ce qui se passe
par exemple lorsque, après avoir rempli les champs d’un formulaire de recherche, l’utilisateur
appuie sur le bouton Envoyer du formulaire. Les données du formulaire sont passées par le
serveur à un programme externe qui les utilise pour produire un résultat qu’il renvoie au serveur
qui le fait passer au client. Le mécanisme par lequel le serveur et un programme externe échangent des données en vue de construire un document à renvoyer au client est appelé Common
Gateway Interface (CGI) et sort du cadre de ce document [1][2][4](Figure 2). Comme le lanceHôte Distant
Serveur
CGI
Script
Exécutable
ête
qu ées
Re onn
D
HTTP
Formulaire
Réponse
e
ns
po
é
R
Client
Hôte Local
Figure 2: Requête d’exécution au serveur
ment d’une application externe au serveur est assez lourd, certains serveurs permettent également d’intégrer une application (sous la forme d’une librairie) dans l’espace du serveur au
moyen d’appels normalisés (NSAPI de Netscape ou ISAPI de Microsoft), mais là encore cela
dépasse le simple cadre de ce document.
12
4 Généralités sur le langage HTML
4.1 HTML et SGML
La grande majorité des documents accessibles sur le World Wide Web et qui en font sa
spécificité par rapport aux autres facettes d’Internet est écrite au moyen du langage HTML
(HyperText Markup Language). HTML est l’application la plus connue du langage SGML
(Standard Generalized Markup Language) [5].
SGML est un langage de description de structure de document. C’est là l’aspect le plus
important à retenir qui le différencie radicalement des langages de description de page tels que
Postscript. Ainsi SGML cherche à décrire la logique et la structure du document alors que Postscript permet d’en décrire la forme, l’aspect visuel final. Dans un document SGML on ne précise
pas de taille ou de type de polices ni de mise en page (taille des paragraphes, positions relatives,
etc...), au lieu de cela on s’attache à spécifier comment le document se subdivise et quelles en
sont les parties clés relatives à un format défini.
Un document SGML respecte toujours un type de document défini dans une structure formelle appelée DTD (Document Type Definition). Une DTD peut ainsi décrire, par exemple, la
structure formelle d’un rapport dont les éléments seraient un auteur noté par <author>, une
date notée par <date>, un titre noté <title> suivi d’un contenu divisé en paragraphes <p>
précédés chacune par un titre <h>. Le début d’un tel document se présenterait alors sous la forme :
<!DOCTYPE report PUBLIC “-//EPFL//DTD Report//EN”>
<report>
<author>John Smith
<date>Feb 1st, 1996
<title>Report on WWW
<h>Introduction
Le document final imprimable est obtenu après interprétation par un visualiseur qui est à
même de formater le texte SGML suivant certaines règles prédéfinies ou réglées par l’utilisateur
qui va lire le document : le visualiseur peut ainsi présenter l’élément <author> à 4 cm de la
marge supérieure et souligné. Ces règles dépendent du visualiseur et dans certains cas peuvent
être modifiées, ce qui explique que des personnes utilisant des visualiseurs différents n’obtien-
13
dront généralement pas le même aspect de document. Ainsi une même page du World Wide
Web visualisée avec Netscape Navigator, MS Internet Explorer ou Opera n’est pas du tout mise
en page de la même façon. Toutefois, l’essentiel, à savoir le texte et sa structure, est préservé.
L’avantage essentiel de SGML est sa portabilité et la simplicité des documents, ce sont
essentiellement ces critères qui ont fait que le CERN, lors de la création de son système de distribution d’information qui allait être à l’origine du World Wide Web, a décidé d’utiliser cette
norme pour en dériver le langage HTML. La notion de portabilité dans ce cas va beaucoup plus
loin que la simple compatibilité avec différents logiciels ou plates-formes informatiques : les
documents SGML (et donc HTML) doivent pouvoir être consultés avec la même facilité sur
support informatique ou imprimé, sur un écran couleur 21 pouces ou sur l’écran à cristaux liquides d’un organiseur, avec et sans images mais aussi en braille ou après conversion par des
systèmes de synthèse vocale pour consultation téléphonique ou par des personnes handicapées.
C’est là un aspect trop souvent négligé par les rédacteurs de pages HTML qui ne pensent qu’à
l’affichage sur leur propre écran.
4.2 La séparation entre contenu et mise en forme
Comme il a déjà été mentionné précédemment, HTML vise à décrire la structure d’un document plus que sa présentation, c’est là, en effet, la seule façon d’assurer une indépendance
maximale par rapport au dispositif de visualisation1. Toutefois cette exigence a frustré beaucoup de rédacteurs, habitués à avoir un fort contrôle sur l’aspect final de leurs documents. Au
cours des versions, HTML s’est donc vu contraint d’intégrer de plus en plus d’éléments et d’attributs permettant de spécifier des caractéristiques de mise en page. Fort heureusement,
HTML 4.0 apporte une solution élégante au problème posé par cette nécessité d’une forte séparation entre contenu et mise en page. La version stricte d’HTML 4.0 rend ainsi obsolètes bon
nombre d’éléments de mise en forme qui existaient dans les versions antérieures et les remplace
par un nouvel outil appelé feuilles de style (style sheets).
4.3 Les différentes versions de HTML
Depuis la version 2.0 du langage HTML normalisée en 1994 dans le RFC 1866 [6], les
versions se sont succédées : certaines ont disparu faute de normalisation ou d’implémentation
dans les navigateurs (HTML+, HTML 3.0).
Le développement et la normalisation du langage sont à présent en charge du W3 Consortium, un regroupement de partenaires industriels et académiques, dirigé par le Laboratory for
Computer Science du MIT (USA) et l’INRIA (France).
Même si HTML 3.2 demeure aujourd’hui la recommandation du W3C la plus largement
acceptée par les navigateurs, la recommandation en vigueur est la version 4.0 publiée en décembre 1997. Les deux plus importants fournisseurs de logiciels destinés au web, Netscape et Microsoft, s’étant engagés en sa faveur, son support ne cesse de croître dans les versions les plus
récentes des navigateurs. Les versions successives de HTML assurent une compatibilité totale
avec les versions antérieures. Toutefois HTML 4.0 se décline en divers échelons : un premier
1. Visualisation est ici à prendre dans son sens le plus large puisqu’un document HTML doit pouvoir être
consulté à travers des dispositifs allant jusqu’au synthétiseur de parole.
14
échelon garantit cette compatibilité alors que l’échelon le plus strict interdit un certain nombre
de caractéristiques des version antérieures jugées comme étant de mauvaises pratiques. Cette
distinction est utile lors de la vérification d’un document par un outil de validation.
Lors de l’écriture d’un document en HTML il est important de bien savoir ce que l’on
écrit, c’est-à-dire à quelle norme font référence les constructions utilisées. Seul l’emploi
d’HTML 3.2 (voire 2.0) strict garantit à l’heure actuelle une acceptabilité maximale par tous les
visualiseurs. L’emploi de HTML 4.0 doit être aussi encouragé, d’autant que son utilisation ne
compromet pas la visualisation du document sur des visualiseurs à la norme 3.2. Par contre il
faut absolument éviter les constructions spécifiques à tel ou tel visualiseur. Les normes du W3C
doivent être la seule référence de l’auteur de documents HTML. Toute utilisation de constructions non normalisées ne pourrait que limiter l’audience potentielle du document réduisant ainsi
fortement l’intérêt de l’utilisation de HTML qui réside précisément dans son universalité.
4.4 HTML en pratique
Très concrètement, un document HTML, lors de son écriture, est un simple fichier texte
dont certaines parties portent une signification particulière, ce qu’on appelle le balisage
(markup). Le balisage définit ainsi une suite structurée imbriquée d´éléments qui constitue le
document. Un élément est une suite d’entités HTML délimitée par des étiquettes (tags) et représentant une unité structurelle du document : titre, liste, paragraphe, texte mis en évidence, citation, ... (Figure 3). HTML définit quels sont les éléments existants, leurs attributs et les règles
d’imbrication de ces éléments.
4.4.1 Les entités
On appelle entité SGML une unité textuelle1. Sa plus simple expression est un caractère
non spécial, c’est-à-dire n’importe lequel sauf <, >, & et quelques autres qui dépendent de la
DTD utilisée. Mais une entité peut être aussi constituée par une séquence de caractères entourée
par les délimiteurs & et ; qui est remplacée par un autre texte permettant ainsi d’abréger un document en remplaçant certaines séquences longues et fréquentes par une abréviation plus courte. Dans HTML les entités complexes servent plutôt à coder les caractères spéciaux qui ont une
signification particulière ou bien des caractères internationaux lorsque l’on veut assurer une
stricte conformité avec le jeu de caractères ASCII. Ainsi, comme le signe < a une signification
HTML spéciale (délimiteur d’étiquette), quand on veut l’insérer en tant que tel dans un texte on
le remplace par son entité équivalente : < De même si l’on souhaite assurer que le document
ne soit pas endommagé lors du transfert par des canaux limités à l’ASCII (comme parfois encore
certaines passerelles de courrier électronique), on peut remplacer la lettre ‘é’ par l’entité équivalente é La liste de ces entités est donnée en Annexe A.
La notation des entités peut également servir à inclure dans le texte des caractères spéciaux du jeu de caractères du document au moyen de leur numéro. Ex: < représente également le caractère ‘<‘ dans le jeu de caractères standard ISO-8859-1.
HTML 4.0 définit très précisément que le jeu de caractères employé par HTML est
l’Universal Character Set [11] (compatible Unicode), chaque document pouvant se limiter à
l’un de ses sous-ensembles. ISO-8859-1, le jeu de caractères habituellement utilisé en Europe
Occidentale et qui comprend les caractères accentués des langues latines est un de ces sous-en1. Dans le jargon SGML, entité prend parfois un sens beaucoup plus large, comparable dans une certaine
mesure au terme objet.
15
sembles. De ce fait, l’utilisation des entités équivalentes pour les caractères accentués français
est facultative, pour peu que l’on s’assure que la plate-forme sur laquelle on travaille utilise bien
le jeu de caractères ISO-8859-1. C’est le cas pour le système d’exploitation Unix mais cela dépend des logiciels utilisés sur les plates-formes MS Windows et MacOS.
4.4.2 Les étiquettes (tags) et les éléments
On appelle étiquettes (tags) les délimiteurs des éléments HTML. Un élément est, la plupart du temps, délimité par une étiquette initiale (start-tag) de la forme <tag> et une étiquette
finale (end-tag) de la forme </tag>. Certains éléments comme BR (saut de ligne) n’ont pas
<H1>Ceci est un titre de niveau 1</H1>
Etiquette de début
Texte
(Contenu de l’élément)
Etiquette de fin
Figure 3: Un élément HTML
d’étiquette finale. D’autres comme P (paragraphe), LI (liste) ont des étiquettes finales optionnelles. Les éléments s’imbriquent les uns à l’intérieur des autres suivant des règles définies par
le langage.
Les étiquettes peuvent contenir des attributs valués. L’exemple le plus classique est sans
doute :
<A href=”http://www.epfl.ch/”>Serveur de l’EPFL</a>
Cet élément porte le nom de lien hypertexte. On y reconnaît l’étiquette initiale <A> dans
laquelle on trouve l’attribut href qui porte la valeur http://www.epfl.ch/. Pour chaque
élément seuls certains attributs sont autorisés. La valeur donnée aux éléments doit figurer entre
guillemets ou apostrophes1 et ne doit pas contenir de guillemets, apostrophes ou signes > qui
doivent, le cas échéant, être remplacés par les entités HTML équivalentes (voir § 4.4.1).
On ne différencie pas majuscules et minuscules dans une étiquette, les deux peuvent être
utilisées indifféremment ou même mélangées.
4.4.3 Les commentaires
Un document HTML peut contenir des commentaires qui seront ignorés par l’analyseur
lors de la visualisation. Les commentaires sont signalés par les délimiteurs SGML spéciaux:
 :

Un commentaire peut s’étaler sur plusieurs lignes (les retours à la ligne sont autorisés à
l’intérieur d’un commentaire).
1. Ceci n’est en fait pas strictement obligatoire, mais cela peut éviter des problèmes d’interprétation sur
certains visualiseurs
16
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, …
17
• 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 sousensemble 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 :
• 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:
n dans un fichier séparé (sur la même machine ou une autre voire sur un site différent)
n intégrée dans le document HTML à l’intérieur d’un élément STYLE
n 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.
18
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 “-//IETF//DTD HTML 2.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
19
• 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
20
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 :
<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 4.0
Frameset//EN”>
<HTML>
<HEAD>
<TITLE>Titre du Document</TITLE>
</HEAD>
<FRAMESET rows=”50%, 50%”>
<FRAME SRC=”documentGauche.html”>
<FRAME SRC=”documentDroite.html”>
</FRAMESET>
<NOFRAMES>
<BODY>
...
</BODY>
</NOFRAMES>
</HTML>
Définition de la division en
cadres et des documents à afficher dans chacun des cadres
Document classique pour les
visualiseurs ne supportant
pas la division en cadres.
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">
</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.
21
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.
22
6 Eléments courants
HTML distingue deux types d’éléments : les éléments de niveau texte et les éléments de
niveau bloc. Les premiers qualifient du texte courant à l’intérieur d’un paragraphe, les seconds
impliquent généralement un saut de ligne avant et après l’élément. Une étiquette ouvrant un élément de niveau bloc ferme implicitement tout paragraphe précédemment ouvert.
6.1 Balisage de texte courant
Ces éléments de bas niveau qualifient de courtes séquences de mots, au plus une phrase
généralement, afin de préciser leur fonction sémantique dans le document. Voici quelques
exemples d’utilisation de ces éléments :
...
<p><cite>Alice au Pays des Merveilles</cite> par Lewis Caroll
<p>La boucle <code>for (i=0; i<12; i++)</code> est équivalente à...
<p>Tapez <kbd>cd</kbd> à la ligne de commande pour revenir...
<p><strong>Important :</strong>Bien apparier les tags de début et...
<p>Dans ce cas il ne faut <em>surtout pas</em> céder à la panique !
...
Tableau 3 : Eléments de niveau texte
<ACRONYM>
Une abréviation (WWW, FTP, URL …)
<CITE>
Le titre d’un document cité en référence
<CODE>
Un court morceau de code (informatique, mathématique,...) Pour des extraits plus
longs (plusieurs lignes), on préférera utiliser PRE.
<EM>
Un extrait devant être mis en évidence (généralement rendu en italique)
<KBD>
Un texte tel qu'un utilisateur devrait le taper au clavier.
<SAMP>
Un exemple de sortie générée par un programme un script, etc….
<STRONG>
Mise en évidence forte (généralement rendu en gras).
23
Tableau 3 : Eléments de niveau texte
<VAR>
Une variable muette.
<DFN>
Une définition.
<SUB>
Texte à rendre en indice.
<SUP>
Texte à rendre en exposant.
Outre ces éléments, les normes antérieures à HTML 4.0 prévoyaient un certain nombre
d’éléments permettant de préciser la typographie à employer. Ces éléments sont désormais déconseillés et ont été remplacés par les feuilles de style, toutefois on les retrouve parfois pour des
raisons de compatibilité avec des visualiseurs plus anciens.
Tableau 4 : Eléments typographiques (déconseillés)
Elément
Description
<TT>
Texte à rendre en police télétype (à largeur fixe).
<I>
Texte à rendre en italique.
<B>
Texte à rendre en gras
<U>
Texte à rendre souligné
<STRIKE> Texte à rendre barré.
<BIG>
Texte à rendre dans une taille plus grande que la taille courante
<SMALL>
Texte à rendre dans une taille plus petite que la taille courante
<FONT>
Change les attributs de la police d’affichage
SIZE
Taille relative de la police (1 à 6). La police par défaut est de taille 3. La spécification peut être
absolue (1 à 6) ou relative (+x ou -x) à la taille par défaut ou déclarée dans l’élément BASEFONT.
COLOR Couleur de la police.
FACE
Nom de la police à utiliser.
Certains éditeurs HTML font parfois peu de cas de la différence entre éléments logiques
et éléments physiques, cette distinction est toutefois importante : utiliser I ou EM n’est pas indifférent même si le texte ainsi balisé est présenté de la même façon par la plupart des visualiseurs graphiques. Il faut utiliser les feuilles de style (ou à défaut du balisage physique) quand
c’est un type de spécifique d’effet textuel qui est recherché et plutôt du balisage logique pour
mettre l’accent sur une valeur sémantique. Ainsi l’utilisation d’une mise en italique forcée par
une feuille de style ou l’élément physique I là où on recherchait le renforcement d’un terme
peut conduire à une absence totale de mise en évidence si le document est visualisé sur un système ne permettant pas le rendu en italique (par exemple un visualiseur texte simple ou par synthèse vocale). L’utilisation du balisage logique adéquat EM permet au contraire de mettre quand
même en évidence le terme par un autre moyen. Le plus souvent c’est un balisage logique qui
est nécessaire et qu’il faut donc préférer. Attention en particulier lors de l’utilisation d’éditeurs
WYSIWYG HTML et surtout de convertisseurs à partir de traitements de texte : ces éditeurs
cachent le balisage employé et ont une fâcheuse tendance à utiliser du balisage physique inapproprié.
24
6.2 Eléments de niveau bloc, paragraphes
Ces éléments permettent d’organiser la structure du document en blocs. Ce sont des éléments de haut niveau, ils s’organisent en séquence et ne peuvent s’imbriquer mais peuvent contenir des éléments de texte (Tableau 3).
En toute généralité un document est composé d’une suite hiérarchique de parties elles-mêmes divisées en sous-parties qui en dernier lieu contiennent des paragraphes ou d’autres types
de blocs (listes, formulaires, tableaux, etc…). Les éléments H2 à H6 permettent de donner un
titre à chacun des niveaux d’imbrication des sous-parties. L’élément H1 sert à titrer le document
dans son ensemble et ne doit apparaître qu’une fois au début de chaque document. C’est une
erreur de sauter un niveau de titre, de titrer par exemple le document avec H2 sous prétexte que
“le titre est trop gros avec H1”. En effet les Hn indiquent la structure logique du document et pas
une taille, les feuilles de style permettent de spécifier ces tailles.
Voici un exemple de structure de corps de document correcte:
...
<BODY>
<H1>HTML en 10 leçons</H1>
<H2>1 Leçon 1</H2>
<P>Dans cette première leçon nous allons voir...
<H3>1.1 La théorie</H3>
<P>La théorie est simple...
<H3>1.2 La pratique</H3>
<P>Voici un petit exercice maintenant...
<H2>2 Leçon 2</H2>
<P>Dans cette deuxième leçon nous allons voir...
<H3>2.1 La théorie</H3>
<P>La théorie est simple...
<H3>2.2 La pratique</H3>
<P>Voici un petit exercice maintenant...
</BODY>
...
Tableau 5 : Eléments de niveau bloc
<H1>.<H6>
En-tête de section. H1 est le plus gros titre, il ne doit être utilisé qu’une fois pour
le titre du document. H6 est le plus petit sous-titre.
ALIGN (DECONS.)
LEFT,CENTER,RIGHT. Alignement du titre
Un paragraphe. L’étiquette finale est optionnelle.
<P>
ALIGN (DECONS.)
<ADDRESS>
LEFT,CENTER,RIGHT. Alignement du paragraphe
Bloc d’adresse de l’auteur
25
Tableau 5 : Eléments de niveau bloc
Un paragraphe préformatté. Utilisé généralement pour inclure du code source.
Les retours à la ligne et les tabulations sont respectés par le visualiseur.
<PRE>
Contient
Eléments texte (voir Tableau 4), A (voir Tableau 10), BR
<BLOCKQUOTE>
Bloc provenant d’une autre source. Généralement une citation.
<DIV>
Une division du document. Utilisé pour donner des propriétés stylistiques à un
bloc de texte regroupant plusieurs autres éléments de niveau bloc.
ALIGN (DECONS.)
Contient
LEFT,CENTER,RIGHT. Alignement de la division
Tout élément autorisé à l’intérieur de BODY, c’est-à-dire en particulier des éléments de niveau bloc
6.3 Séparateurs
Les sauts de ligne dans le fichier source du document sont considérés comme de simples
caractères d’espacement. Le visualiseur coupe les lignes en fonction de sa largeur d’affichage.
Pour forcer un saut de ligne à l’intérieur d’un paragraphe il faut utiliser l’élément BR. Pour empêcher un saut de ligne entre deux mots il faut utiliser un espace insécable représenté par l’entité
 
<P>
Ce saut de ligne
est considéré comme un espace<br>
L’élement <code>BR</code> insère un saut forcé
</P>
Ce paragraphe est usuellement représenté comme ceci :
Ce saut de ligne est considéré comme un espace
L’élément BR insère un saut forcé
Tableau 6 : Eléments séparateurs
<BR>
Un retour à la ligne. Pas d'étiquette finale. Pas de contenu.
CLEAR (DECONS.)
<HR>
Insère un saut suffisamment haut pour que le texte suivant ne commence pas à
côté d'une image se trouvant sur la ligne. Les valeurs possibles: LEFT, RIGHT,
ALL assurent respectivement qu'il n'y a pas d'image à gauche, à droite et nulle
part sur la ligne.
Barre de séparation horizontale.
ALIGN (DECONS.)
Alignement du séparateur (LEFT, RIGHT ou CENTER)
NOSHADE (DECONS.) Supprime l’effet d’ombré
26
SIZE (DECONS.)
Epaisseur en pixels.
WIDTH (DECONS.)
Largeur en pixels ou en pourcentage
6.4 Listes
HTML 4.0 offre de nombreux éléments permettant de construire des listes ou des énumérations. Ces listes peuvent être généralement imbriquées les unes dans les autres. Les 3 types
fondamentaux de listes sont : la liste simple UL où chaque terme de la liste est précédé d’un point
ou d’un signe similaire, la liste ordonnée OL où les termes sont précédés d’un numéro d’ordre,
la liste de définitions DL où chaque terme, désigné par l’élément DT peut-être accompagné d’une
définition désignée par l’élément DD.
Tableau 7 : Eléments de liste (exemples)
Type de Liste
Exemple de Code
Représentation
Liste Simple
<H1>Fruits :</H1>
<UL>
<LI>Pommes
<LI>Poires
<LI>Oranges
</UL>
n Pommes
n Poires
n Oranges
Liste Ordonnée
<H1>Procedure</H1>
<OL>
<LI>Etape 1
<LI>Etape 2
</OL>
1. Etape 1
2. Etape 2
Liste de Définitions
<H1>Glossaire</H1>
<DL>
<DT>HTML
<DD>Hypertext...
<DT>SGML
<DD>Standard...
</DL>
HTML
Hypertext Markup Language
SGML
Standard Generalized ...
Tableau 8 : Eléments de liste simple (UL, OL, LI)
<UL>
Une liste simple. Ne peut contenir que des éléments LI.
TYPE
<OL>
Le type de signe à afficher devant chaque entrée de la liste : DISC, CIRCLE, SQUARE.
Une liste ordonnée. Ne peut contenir que des éléments LI.
TYPE
Le type de numérotation à utiliser: 1, chiffres arabes, a, lettres minuscules, A, lettres majuscules, i, chiffres romains minuscules, I, chiffres romains majuscules.
START
Le nombre initial de la séquence.
<LI>
Un élément de liste UL ou OL. L’étiquette finale est facultative. LI peut contenir des éléments de
type texte (Tableau 3), de type bloc (Tableau 5), des listes, des formulaires, des tableaux ainsi
que A, IMG, HR, BR, etc…
TYPE
Le type de signe ou de numérotation à utiliser. Les valeurs possibles sont les mêmes que
celles autorisées pour l'attribut TYPE de l’élément dans lequel se trouve l’élément LI
VALUE
Le nombre à utiliser (dans une liste OL).
27
Tableau 9 : Eléments de liste de définition
<DL>
Une liste de définitions. Ne peut contenir qu’une séquence d’éléments DT et DD.
<DT>
Un terme à définir. L'étiquette finale est facultative. Contient des éléments de type texte
(Tableau 3) et A, IMG, BR, etc…
<DD>
Une définition. L'étiquette finale est facultative. Contient des éléments de type texte
(Tableau 3) de type bloc (Tableau 5), des listes, des formulaires des tableaux ainsi que A, IMG,
HR, BR, APPLET, MAP
6.5 Ancres et liens hypertexte
Un lien hypertexte HTML établit une relation orientée entre une source et une destination.
Un lien est exprimé par un élément A ou LINK. LINK ne peut intervenir que dans l’en-tête d’un
document à l’intérieur d’un élément HEAD alors que A ne peut intervenir que dans le corps du
document à l’intérieur de l’élément BODY. Une des extrémités du lien est définie par l’élément
lui-même, l’autre extrémité étant définie par l’attribut href de l’élément. Toute extrémité de
lien identifie une ressource atteignable sur le World Wide Web : un document, une position à
l’intérieur d’un document, une image, une séquence vidéo, etc…
On appelle ancre ou point d’ancrage une zone à l’intérieur d’un document pouvant contenir plusieurs éléments et pouvant être utilisée comme extrémité d’un lien. Les ancres sont
construites grâce à l’élément A muni de l’attribut name ou bien par l’attribut id supporté par la
plupart des éléments. Les ancres permettent de donner un nom à un endroit précis du document
afin de pouvoir y faire référence dans un lien :
http://site.net/document.html
Pointe au début du document.
htpp://site.net/document.html#par3
Pointe sur le paragraphe 3.
...
...
...
...
<a name=”par3”>Paragraphe 3</a>
...
...
Typiquement un lien se présente de la façon suivante :
Consulter <a href=”http://www.epfl.ch”>le site officiel de l’EPFL</a>
et présenté de la façon suivante par un navigateur graphique classique :
Consulter le site officiel de l’EPFL
La portion de texte soulignée est alors active et l’utilisateur peut cliquer dessus de manière
à ce que le navigateur télécharge et affiche le document désigné.
Note: Il est interdit d’imbriquer des liens ou des ancres.
28
Tableau 10 : Hyperliens et ancres (A et LINK)
Cet élément permet de définir un lien et/ou une ancre dans le corps d’un document.
<A> <LINK>
NAME
Cet attribut indique que l’élément définit une ancre dont le nom est la valeur de l’attribut
HREF
Cet attribut indique que l’élément définit un lien hypertexte dont la deuxième extrémité est
désignée par la valeur de cet attribut (un URL). Le texte contenu dans l’élément est mis en
évidence et l'utilisateur peut l'”activer” (en cliquant dessus, par exemple) pour consulter la
ressource spécifiée.
REL
Cet attribut indique que l’élément lui-même est la source du lien, la destination étant indiquée
par l’attribut href. La valeur de cet attribut indique le type de relation établi par le lien.
REV
Cet attribut indique que l’élément lui-même est la destination du lien, la source étant indiquée
par l’attribut href. La valeur de cet attribut indique le type de relation établi par le lien.
TITLE
Suggère un titre pour la ressource accessible par l’hyperlien
TARGET
Utilisé dans un document multi-cadres (voir § 5.6) pour spécifier le cadre cible où afficher le
document spécifié par l'URL href.
L’élément LINK, uniquement valide en en-tête de document dispose de la même sémantique de lien (et des
mêmes attributs sauf name) que l’élément A.
HTML 4.0 prédéfinit un certain nombre de types de lien comme valeurs possibles des attributs REL et REV de l’élément LINK. Ces types sont conventionnels mais non limitatifs :
• contents
Le lien renvoie à une table des matières
• index
Le lien renvoie à un index du document
• glossary
Le lien renvoie à un glossaire
• copyright
Le lien renvoie à une déclaration de copyright
• next
Le lien renvoie vers le document suivant si le document courant fait partie d’une
série. Cette valeur est généralement utilisée avec l’attribut rel.
• previous
Le lien renvoie vers le document précédent si le document courant fait partie d’une
série. Cette valeur est généralement utilisée avec l’attribut rev.
• start
Le lien renvoie vers le premier document de la série dont fait partie le document
courant.
• help
Le lien renvoie vers un document d’aide au sujet du document courant.
• alternate
Le lien définit une version alternative du document, par exemple dans un autre
langue.
• made
Le lien renvoie vers l’auteur du document. Cette valeur est généralement utilisée
avec l’attribut rev. Une construction typique est :
<link rev=”made” href=”mailto:[email protected]”>
29
6.6 Incrustations
HTML 4.0 offre des moyens d’incruster divers objets dans le flot du texte, les images en
sont l’exemple le plus répandu mais on trouve également des applets ou d’autres documents.
6.6.1 Images (IMG)
Quoique HTML 4.0 voudrait imposer l’élément OBJECT, plus générique, l’élément IMG
demeure de très loin le plus répandu pour inclure des images dans le cours du texte puisque sa
définition remonte aux toutes premières versions du langage.
...
<P>L’icône <IMG alt=”NEW” align=”middle” src=”images/new.gif> sert
à signaler une entrée récente.
...
ou de façon équivalente, en utilisant l’élément OBJECT :
...
<P>L’icône <OBJECT data=”images/new.gif>NEW</OBJECT> sert
à signaler une entrée récente.
...
Ce qui donne :
L’icône
sert à signaler une entrée récente.
L’attribut alt est primordial car il offre un contenu alternatif pour les visualiseurs qui ne
pourraient afficher l’image soit pour des raisons techniques (visualiseur texte, synthèse vocale
ou autre) soit parce que cet affichage a été désactivé par l’utilisateur.
6.6.2 Figures et cartes réactives (cliquables)
HTML permet de définir des images réactives qui déclenchent des actions différentes suivant la position activée par l’utilisateur. La plupart du temps activer une zone d’image revient
à cliquer avec la souris à un endroit déterminé ce qui charge un nouveau document. Ce mécanisme permet de construire des menus graphiques notamment.
On distingue deux modes de fonctionnement de ce mécanisme suivant que la détermination de l’action à entreprendre en fonction de la position activée se fait sur le serveur ou sur le
client.
Cartes réactives côté serveur. Ce mode de définition de cartes réactives existe depuis
HTML 2.0. Une image IMG est cliquable si elle comporte l’attribut ismap (Tableau 11) et est
imbriquée dans un lien <A href=...> :
<A href=”/cgi-bin/imagemap.cgi><IMG src=”” alt=”[Menu]”></A>
Dans ce cas, quand l’utilisateur clique sur l’image, le client ajoute à l’URL de l’ancre les
coordonnées du clic (voir § 2.3). Le serveur reçoit cet URL étendu, le traite et renvoie au client
le document adéquat suivant les coordonnées du clic. Comme c’est le serveur qui effectue l’analyse de la requête, on parle d’images cliquables côté serveur ou server-side image maps. Ce
30
Tableau 11 : Images (IMG)
Une image incrustée dans le texte. Pas d’étiquette finale. Pas d’élément contenu.
<IMG>
SRC (OBLIG.)
L’URL identifiant l’image.
ALT (OBLIG.)
Texte à afficher à la place de l’image si l'utilisateur préfère ne pas avoir d'images ou si le visualiseur ne les supporte pas.
HEIGHT (DECONS.)
Hauteur (en pixels) de l'image.
WIDTH (DECONS.)
Largeur (en pixels) de l'image.
ISMAP
L’image est une carte cliquable dite côté serveur (§ 6.6.2). Cet attribut ne peutêtre présent que si l’élément IMG est imbriqué dans un hyperlien A. Le visualiseur ajoute à l'URL de l'ancre les coordonnées du point où l'utilisateur a cliqué à
l'intérieur de l’image permettant ainsi de sauter à différentes ressources suivant
l'endroit cliqué dans l'image.
ALIGN (DECONS.)
Alignement par rapport au texte environnant. Les valeurs TOP, MIDDLE,
BOTTOM, alignent l’image par rapport à la ligne de texte environnant. LEFT et
RIGHT alignent l’image contre la marge gauche ou droite permettant au texte de
s'afficher sur plusieurs lignes à côté de l'image.
BORDER (DECONS.)
Epaisseur du bord ajouté autour d’une image si c’est un hyperlien.
HSPACE (DECONS.)
L’espace laissé libre horizontalement autour de l’image.
VSPACE (DECONS.)
L’espace laissé libre verticalement autour de l’image.
USEMAP
L’image est une carte cliquable dite côté client. La valeur est un URL où trouver
un élément MAP (Tableau 12). Cet attribut ne peut être présent que si l’élément
IMG est imbriqué dans un lien A et peut être présent en même temps que l'attribut ISMAP pour le cas où le visualiseur ne supporte pas les cartes côté client. Le
visualiseur se sert des coordonnées du clic utilisateur dans l’image et des informations précisées dans l’élément MAP pour déterminer l’hyperlien destination.
mécanisme est lourd pour le serveur qui est contraint à un traitement supplémentaire pour déterminer le bon document à renvoyer. Par contre il offre une très grande flexibilité dans cette
détermination en permettant de définir des zones actives de complexité arbitraire.
Cartes réactives côté client. Le mécanisme des cartes cliquables côté client (client-side image
maps) consiste à fournir au client des éléments suffisants pour décider lui-même quel document
récupérer en fonction des coordonnées d’activation. Ainsi le client demande alors directement
le bon document au serveur, allégeant son travail. En pratique on définit des zones à l’intérieur
d’une image auxquelles ont associe individuellement un URL.
Les cartes cliquables côté client son implémentées à travers les éléments MAP et AREA décrits ci-après ainsi que de l’attribut USEMAP de l’élément IMG (Tableau 11) qui permettent de
définir des zones actives dans une image.
...
<A href=”/cgi-bin/pic”><IMG src=”pic.gif” usemap=”#myMap” ismap></A>
...
...
<MAP name=”myMap”>
<AREA shape=”RECT” coords=”10,10,49,49” href=”LSP.html”>
<AREA shape=”RECT” coords=”60,10,99,49” href=”activites.html”>
<AREA shape=”RECT” coords=”110,10,149,49” href=”equipe.html”>
</MAP>
...
31
Ce mécanisme a l’avantage de fonctionner quand même avec des clients ne supportant pas
les images cliquables côté client puisque la présence de l’attribut ISMAP assure alors le traitement côté serveur.
Tableau 12 : Images réactives côté client (MAP, AREA)
<MAP>
Une carte : un ensemble de zones actives à appliquer sur une image.
NAME (OBLIG.)
Obligatoire. Le nom par lequel la carte peut être référencée dans un lien USEMAP
dans l’élément OBJECT ou IMG (voir Tableau 11).
Contient
AREA
<AREA>
Une zone active dans une image menant à un hyperlien particulier. Ne peut être contenu que
dans MAP.
ALT (OBLIG.)
Texte alternatif de description du contenu de la zone
SHAPE
La forme de la zone : RECT (rectangulaire, défaut), CIRCLE (circulaire), POLY
(polygonale), DEFAULT (identique à RECT).
COORDS
Coordonnées en pixels de la zone sous forme d'une liste d'entiers. Le nombre de
coordonnées à donner dépend de SHAPE.
HREF
Un URL indiquant l’hyperlien à suivre lors d’un clic dans la zone.
NOHREF
La zone n’est pas active (pas d’hyperlien associé).
Note. L’élément OBJECT offre une alternative pour définir des cartes réactives grâce ã son sttribut shapes. Etant d’usage moins répandu, elle n’est pas abordée ici.
6.7 Incrustation générique (OBJECT)
HTML 4.0 définit l’élément OBJECT afin de permettre l’incrustation d’objets divers (images, programmes graphiques, animations, portions de documents HTML, etc…) à l’intérieur
d’un document. L’affichage de l’élément OBJECT est traité de façon un peu particulière par les
visualisateurs. En effet, le contenu de l’élément n’est affiché que si le visualisateur n’a pas été
capable d’afficher l’objet référencé. Ce mécanisme permet d’offrir des alternatives de visualisation en imbriquant des éléments OBJECT. Par exemple :
<P>
<OBJECT

title="La Terre vue de l’espace"
classid="http://www.observer.mars/TheEarth.class">

<OBJECT data="TheEarth.mpeg" type="application/mpeg">

<OBJECT data="TheEarth.gif" type="image/gif">

La <STRONG>Terre</STRONG> vue de l’espace.
</OBJECT>
</OBJECT>
</OBJECT>
Déclaration - Instanciation. L’élément OBJECT offre également un mécanisme par lequel un
objet peut être déclaré puis utilisé à divers endroits d’un même document. Pour cela on donne
à l’élément l’attribut declare et un identificateur unique à travers l’attribut id. L’objet peut
ensuite être instancié n’importe où dans le document, notamment au moyen de l’élément A :
32
<P><OBJECT
declare
id="earth.declaration"
data="TheEarth.mpeg"
type="application/mpeg">
La <STRONG>Terre</STRONG> vue de l’espace.
</OBJECT>
...plus loin dans le document...
<P>Une superbe <A href="#earth.declaration">vue de la Terre !</A>
Passage de paramètres d’initialisation. Le passage de paramètres d’initialisation se fait au
moyen d’éléments PARAM contenus dans l’élément OBJECT.
<OBJECT classid="http://www.some.server/clock.class">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
Ce visualiseur ne supporte pas le langage Java.
</OBJECT>
Tableau 13 : Incrustation d’objets génériques (OBJECT, PARAM)
Un objet incrusté (image, animation, applet, etc…)
<OBJECT>
DECLARE
Indique qu’il s’agit d’une simple déclaration de l’objet pour référence ultérieure. L’objet
ne doit pas être affiché à cet endroit.
CODEBASE
URL de base pour CLASSID, DATA, ARCHIVE
CLASSID
Un URL spécifiant un programme pouvant assurer le rendu de l’objet
DATA
Un URL référençant les données de l’objet
TYPE
Le type des données de l’objet (ex: image/jpeg, video/mpeg, etc…)
CODETYPE
Le type de programme référencé par CLASSID
ARCHIVE
Une liste d’URLs d’archives contenant les objets spécifiés par CLASSID et DATA
STANDBY
Un message à afficher durant le chargement de l’objet
USEMAP
Le nom d’un élément MAP définissant le découpage de l’objet en zones réactives
(Tableau 12)
Un paramètre d’initialisation d’objet
<PARAM>
NAME
Nom du paramètre
VALUE
Valeur du paramètre
VALUETYPE
Le type de valeur contenu dans VALUE : data indique que VALUE contient la valeur
directe à passer à l’objet; ref indique que VALUE contient un URL permettant d’accéder
à la valeur; object indique que VALUE contient une référence d’objet déclaré dans le
document.
TYPE
Le type de la variable, uniquement dans le cas où VALUETYPE vaut ref. (ex:
image/jpeg, video/mpeg, etc…)
6.8 Applet (APPLET)
L’élément APPLET servant à inclure une applet Java dans le document a été remplacé par
l’élément OBJECT dans HTML 4.0 et son utilisation est donc désormais déconseillée. Java est
un langage de syntaxe proche du C++ qui permet d’écrire des applications graphiques pouvant
33
s’exécuter sur n’importe quelle plate-forme informatique. Ces applications apparaissent comme
les autres objets incrustés, dans un cadre à l’intérieur du document. On peut ainsi réaliser des
applications graphiques complexes et interactives rendant les pages HTML “vivantes”.
34
7 Formulaires de Saisie
Les formulaires de saisie permettent à l’utilisateur de fournir des informations et ainsi
d’obtenir une réponse personnalisée. Les informations contenues dans les champs remplis par
l’utilisateur sont transmises par le programme client au serveur qui les transmet à son tour à un
programme de traitement par le mécanisme CGI (Common Gateway Interface) (voir § 3.2 et
Figure 2).
La structure d’un formulaire de saisie est simple, elle se compose d’un élément FORM contenant essentiellement une suite de contrôles (éléments INPUT, TEXTAREA, SELECT,
BUTTON, ...) mais aussi des éléments de structuration de document (le plus souvent un tableau
TABLE (voir Ch. 8) afin d’aligner correctement les champs d’entrée).
HTML 4.0 prévoit les types de contrôles suivants :
• Boutons
Les boutons son définis au moyen de l’élément BUTTON (ou de l’élément INPUT). On
distingue trois types de boutons : bouton de soumission pour envoyer le contenu du
formulaire pour traitement, bouton de remise à zéro du formulaire pour effacer tous
les champs remplis et bouton simple dont l’action est définie par un script inclus dans
le document.
• Coches et boutons radio
Une coche est un bouton à deux états : activé (enfoncé) ou non. On définit une coche
au moyen de l’élément <INPUT type=”checkbox”... L’attribut selected,
présent ou non, définit l’état initial de la coche. Si plusieurs coches possèdent le
même attribut name alors elles définissent un groupe de boutons radio, c’est-à-dire
un groupe où une seule coche peut être activée à la fois.
• Menus
Les menus sont des listes d’options à choix. On les définit au moyen des éléments
SELECT, OPTGROUP et OPTION.
• Champs d’entrée textuel
L’élément <INPUT type=”text”... permet de créer un champ de saisie textuelle
à une ligne. L’élément TEXTAREA définit un champ de saisie textuel à plusieurs
lignes.
• Sélecteur de fichiers
Il s’agit d’un contrôle permettant de spécifier un fichier à transmettre avec le
formulaire. Il se construit avec l’élément <INPUT type=”file”...
35
• Contrôle cachés
Ces contrôles ne sont pas affichés mais leur valeur est transmise en même temps que
le formulaire. Les auteurs utilisent cette fonctionnalité pour transmettre des
informations supplémentaires sur la transaction en cours.
• Objets de contrôle
Un élément OBJECT à l’intérieur d’un formulaire définit un contrôle de sorte que sa
valeur associée soit transmise avec le formulaire.
Globalement, un formulaire se présente donc ainsi :
...
<FORM METHOD="POST" ACTION="http://host.net/cgi-bin/script.cgi">
<P>Type some text here:<BR>
<TEXTAREA NAME="text" ROWS=8 COLS=25></TEXTAREA>
<P>Choose a Font :
<SELECT NAME="font">
<OPTION>Courier
<OPTION>Helvetica
<OPTION SELECTED>Times
</SELECT>
<P>Select a Font Size (default 8) :
<INPUT NAME="size" SIZE=5 MAXLENGTH=3 VALUE="8">
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Reset">
</FORM>
...
Tableau 14 : Formulaires de saisie
<FORM>
ACTION
(OBLIG.)
Un URL désignant un programme destiné à recevoir et traiter les informations
fournies par l'utilisateur dans les champs du formulaire.
METHOD
La méthode par laquelle le programme client doit transmettre les données fournies
par l'utilisateur au serveur. Deux valeurs sont possibles GET ou POST. GET est préféré quand il y a peu de données à transmettre, POST dans le cas contraire. Le
défaut est GET.
ENCTYPE
Désigne la forme de codage à employer pour les données. Par défaut:
application/x-www-form-urlencoded. Il doit prendre la valeur
multipart/form-data dans le cas où le formulaire comprend un sélecteur de
fichiers.
ONSUBMIT
Une fonction de script à exécuter lors de la soumission du formulaire
ONRESET
Une fonction de script à exécuter lors de la remise à zéro du formulaire
Contient
36
Un formulaire comportant une suite de champs à remplir par l’utilisateur.
Tout élément pouvant être contenu dans BODY mais pas un autre FORM
Tableau 14 : Formulaires de saisie (Suite)
<INPUT>
Un contrôle de formulaire pour l’entrée de données.
TYPE
Définit le type du contrôle d'entrée. Par défaut, prend la valeur TEXT. Suivant la
valeur de cet attribut, d’autres attributs sont applicables. Voir Tableau 15.
NAME
Le nom du contrôle. Ce nom est passé, avec la valeur entrée par l'utilisateur, au
programme de traitement. Obligatoire sauf pour les types SUBMIT et RESET.
ALIGN
(DECONS.)
Alignement du champ suivant le même principe que l’alignement des images (voir
Tableau 11). Les valeurs possibles sont: LEFT, RIGHT, TOP, MIDDLE et BOTTOM
ONFOCUS
Fonction de script à appeler quand le contrôle acquiert le focus
ONBLUR
ONSELECT
Fonction de script à appeler quand du texte a été sélectionné
ONCHANGE
Fonction de script à appeler quand la valeur du contrôle a changé
<TEXTAREA>
Un champ d’entrée texte multi-lignes
NAME (OBLIG.)
Le nom du champ.
COLS (OBLIG.)
Le nombre de colonnes visibles à l’écran.
ROWS (OBLIG.)
Le nombre de lignes visibles à l’écran.
<SELECT>
Un menu à choix.
NAME (OBLIG.)
Le nom du menu, passé avec la valeur de l'option sélectionnée par l'utilisateur au
programme de traitement.
MULTIPLE
Indique que plusieurs des options du menu peuvent être choisies.
SIZE
Le nombre d'options du menu visibles simultanément.
Contient
<OPTION>
OPTION
Une option dans un menu à choix.
SELECTED
Indique que cette option doit être choisie par défaut dans la liste.
VALUE
Valeur à retourner. En l’absence de cet attribut c’est le contenu de l’élément qui est
retourné.
<BUTTON>
Un bouton
NAME
Le nom du bouton
VALUE
La valeur portée par le bouton.
TYPE
submit pour un bouton de soumission ou reset pour un bouton de remise à zéro
du formulaire
DISABLED
Le bouton est désactivé si cet attribut est présent
ONFOCUS
ONBLUR
37
Comme indiqué précédemment les attributs utilisables dans l’élément INPUT dépendent
de l’attribut TYPE utilisé. Ceci est résumé dans le tableau suivant.
Tableau 15 : Attributs de l’Elément INPUT
TYPE
Description
Attribut Additionnel
TEXT
MAXLENGTH
La longueur maximale du texte.
SIZE
La longueur du champ de saisie. Si elle est inférieure à MAXLENGTH le champ
comporte un ascenseur.
VALUE
Le texte initial à placer dans le champ
PASSWORD
Un champ d’entrée textuel d’une ligne où le texte entré par l’utilisateur n’apparaît pas en
clair. Destiné à la saisie de mots de passe.
CHECKBOX
Une coche.
VALUE
La valeur de la coche initialement choisie.
CHECKED
Si cet attribut est présent, il indique que l’option doit être présentée cochée au
départ
RADIO
Une coche dans un groupe de boutons radio. Parmi plusieurs éléments INPUT RADIO ayant le
même NAME, un seul peut être coché à la fois.
VALUE (OBLIG.)
Obligatoire. La valeur de l’option initialement choisie.
CHECKED
La présence de cet attribut indique que l’option doit être initialment cochée
IMAGE
Une image à cliquer. Cliquer sur cette image soumet le formulaire pour traitement. Deux
champs fantômes contenant les coordonnées du point cliqué sont transmis en plus. Le nom de
ces champs est composé de la valeur de l’attribut NAME suivi de x et y
SRC
Obligatoire. L’URL où trouver l’image.
ALIGN (DECONS.)
Alignement par rapport à la ligne de base du texte environnant. Valeurs possibles
: TOP, MIDDLE et BOTTOM, LEFT et RIGHT.
HIDDEN
Un champ caché que l’utilisateur ne modifie pas.mais dont la valeur est transmise avec le formulaire
NAME
Obligatoire. Le nom du champ à transmettre.
VALUE
Obligatoire. La valeur du champ à transmettre.
SUBMIT
Un bouton pour soumettre le formulaire pour traitement.
NAME
Si cet attribut est présent, la paire NAME/VALUE est renvoyée avec les données du
formulaire, ce qui permet de distinguer plusieurs boutons de soumission dans un
formulaire.
VALUE
Un label pour le bouton de soumission
RESET
VALUE
FILE
38
Un champ d’entrée textuel d’une ligne.
Un bouton pour réinitialiser le formulaire.
Un label pour le bouton
Un sélecteur de fichiers pour préciser un fichier à envoyer.
8 Tableaux
La création de tableaux est une possibilité offerte depuis HTML 3.2. Cette fonctionnalité
est souvent détournée de son but premier par les auteurs car elle leur permet d’avoir une maîtrise
beaucoup plus grande sur l’aspect final de leur document à travers la possibilité d’aligner et de
contrôler la disposition des différents constituants de la page. Cette attitude va à l’encontre de
la philosophie SGML et il faut toujours préférer les solutions utilisant les feuilles de style pour
contrôler la mise en page.
8.1 Structure des tableaux
Un tableau HTML est composé de cellules organisées en rangées et colonnes. L’élément
TABLE définit le tableau. A l’intérieur de cet élément, une succession d’éléments TR (Table
Row) définit les rangées, elles-mêmes composées d’éléments TD et TH définissant les cellules
proprement dites. TD (Table Data) définit une cellule simple alors que TH (Table Heading) définit une cellule de titre pour la ligne et/ou la colonne où elle apparaît. Un tableau simple a la
structure suivante :
...
<TABLE>
<CAPTION>Titre du Tableau</CAPTION>
<TR>
<TH>Titre Colonne 1
<TH>Titre Colonne 2
<TH>Titre Colonne 3
</TR>
<TR>
<TD>Objet 1
<TD>Objet 2
<TD>Objet 3
</TR>
</TABLE>
...
39
Un tel tableau est représenté de la façon suivante :
Titre du Tableau
Titre Colonne 1
Titre Colonne 2
Titre Colonne 3
Objet 1
Objet 2
Objet 3
Tableau 16 : Tableaux (TABLE, CAPTION)
Un tableau.
<TABLE>
SUMMARY
Résumé du contenu du tableau
WIDTH
La largeur du tableau. Deux types de valeurs sont possibles: mesure absolue en
pixels (ex : WIDTH="200") ou proportionnelle en pourcentage (ex :
WIDTH="50%").
COLS
Le nombre de colonnes du tableau. Il est préférable d’utiliser les éléments
COLGROUP et COL pour indiquer cette information (voir § 8.2)
BORDER
Largeur en pixels de la bordure à dessiner autour du tableau. Par défaut un tableau
n'a pas de bordure.
FRAME
Spécifie quelles portions du cadre entourant le tableau seront visibles : void
(aucun cadre), above (le haut), below (le bas), hsides (le haut et le bas), vsides
(le côtés droit et gauche), lhs (le côté gauche), rhs, (le côté droit), box ou
border (les quatre côtés).
RULES
Spécifie quelles droites de séparation intérieures il faut tracer : none (aucune),
groups (entre les groupes de rangées et de colonnes), rows (entre les rangées),
cols (entre les colonnes), all (entre rangées et colonnes).
CELLSPACING
L’espace laissé entre les différentes cases.
CELLPADDING
L’espace laissé entre le bord de chaque case et le contenu.
Contient
<CAPTION>
Dans cet ordre : CAPTION (optionnel) puis COL et COLGROUP (optionnel) puis THEAD
(optionnel) puis TFOOT (optionnel) puis TBODY (implicite)
Un titre de tableau.
ALIGN (DECONS.)
Position du titre. Valeurs possibles: TOP et BOTTOM pour placer le titre en haut ou
en bas du tableau.
8.2 Groupements de colonnes et rangées
Les éléments COL et COLGROUP permettent de grouper des colonnes de façon à ajouter une
information sur la structure du tableau et pouvoir modifier des attributs de présentation sur un
groupe de colonnes. Leur utilisation au début de la définition de la table donne également suffisamment d’information au visualiseur pour lui permettre d’afficher le tableau de façon incrémentale au fur et à mesure qu’il reçoit les rangées depuis le serveur. Sans cette information, le
visualiseur est obligé d’attendre la réception de l’intégralité du tableau pour pouvoir le mettre
en page. Par exemple :
<TABLE>
<COLGROUP>
<COL width=”30”>
<COL width=”0*”>
40
<COLGROUP align=”center”>
<COL width=”1*” align=”char” char=”:”>
<TR>
...
</TABLE>
Ceci définit une table comportant 5 colonnes réparties en deux groupes. Les cellules du
deuxième groupe sont centrées. La 5ème colonne surcharge cet attribut par un alignement des
cellules sur le caractère ‘:’. La première colonne occupe une largeur fixes de 30 pixels. La
deuxième colonne est dimensionnée selon le minimum nécessaire à la plus large de ses cellules.
L’espace restant est réparti entre les 3 colonnes restantes à raison de 1/4, 2/4, 1/4.
Les éléments THEAD, TFOOT et TBODY regroupent des rangées du tableau en groupes de
d’en-tête, de pied et de corps du tableau. Cette information ajoute à la description structurelle
du tableau. Elle peut être utilisée pour fixer les attributs de mise en page sur un groupe de rangées. Dans le cas d’un tableau occupant plusieurs pages, les groupes d’en-tête et de pied peuvent
être repris sur chacune des pages.
<TABLE>
<THEAD>
<TR> ...En-tête...
</THEAD>
<TFOOT>
<TR> ...Pied de tableau...
</TFOOT>
<TBODY>
<TR> ...Première rangée du premier bloc...
<TR> ...Deuxième rangée du premier bloc...
</TBODY>
<TBODY>
<TR> ...Première rangée du deuxièmebloc...
<TR> ...Deuxième rangée du deuxième bloc...
<TR> ...Troisième rangée du deuxième bloc...
</TBODY>
</TABLE>
41
Tableau 17 : Groupements de cellules (COL, COLGROUP, THEAD, TFOOT, TBODY)
<COLGROUP>
Un groupe de colonnes.
SPAN
Nombre de colonnes du groupe
WIDTH
La largeur du tableau. Trois types de valeurs sont possibles: mesure absolue en pixels (ex :
width="200"), proportionnelle en pourcentage (ex : width="50%") ou relative à l’espace
restant (ex .width="3*" correspond à 3 nièmes de l’espace restant où n est la somme de toutes
les spécifications relatives)
ALIGN
Alignement horizontal des cellules des colonnes du groupe : left (marge gauche), center
(centré), right (marge droite), justify (justifié), char (par rapport à un caractère donné).
VALIGN
Alignement vertical des cellules des colonnes du groupe :top (haut), middle (centrage vertical), bottom (bas), base (alignement de la ligne de base de la première ligne de texte de toutes les cellules comportant cette valeur d’attribut).
CHAR
Caractère sur lequel aligner si align=”char”.
Contient
COL
<COL>
Une déclaration de colonne (cet élément ne crée pas de colonne, il sert juste de déclaration pour des colonnes qui doivent être crées au moyen de TD et/ou TH). Accepte les
mêmes attributs que COLGROUP.
<THEAD>
<TFOOT>
<TBODY>
Un groupe de rangées (resp. d’en-tête, de pied et de corps du tableau)
ALIGN
Alignement horizontal des cellules des rangées du groupe (voir le même attribut de l’élément
COLGROUP).
VALIGN
Alignement vertical des cellules des rangées du groupe (voir le même attribut de l’élément
COLGROUP).
CHAR
Note. L’élément TFOOT, s’il est présent, doit intervenir avant le premier élément TBODY de manière à ce que le visualiseur dispose de l’information d’en-tête et de pied de tableau avant la réception du corps.
8.3 Tableaux complexes
Un certain nombre d’attributs permettent de contrôler plus avant l’aspect du tableau. En
particulier, les attributs rowspan et colspan des éléments TH et TD permettent de créer des
tableaux plus complexes en spécifiant des cases qui s’étendent sur plusieurs rangées ou colonnes.
...
<TABLE>
<TR>
<TH ROWSPAN=”2”>Végétaux
<TD>Fruits
42
</TR>
<TR>
<TD>Fleurs </TD>
</TR>
</TABLE>
...
est représenté de la façon suivante :
Végétaux
Fruits
Fleurs
On note que ‘Végétaux’, bien qu’occupant deux lignes ne doit apparaître, dans le code
HTML, que dans la définition de la première ligne. Des exemples de définition de tableaux complexes sont donnés en Annexe B-4.
Plusieurs points importants :
n des cases de tableau peuvent être vides
n la définition ne doit pas provoquer de chevauchement de cases
n des tableaux peuvent être imbriqués
Tableau 18 : Tableaux : Rangées et colonnes (TR, TD, TH)
<TR>
Une rangée dans un tableau.
WIDTH
La largeur du tableau. (voir le même attribut de l’élément COLGROUP,
Tableau 17)
ALIGN
Alignement horizontal des cellules des colonnes du groupe (voir le même attribut de l’élément COLGROUP, Tableau 17)
VALIGN
Alignement vertical des cellules des colonnes du groupe (voir le même attribut
de l’élément COLGROUP, Tableau 17)
CHAR
Contient
TD et TH
43
Tableau 18 : Tableaux : Rangées et colonnes (TR, TD, TH)
<TD> <TH>
COLSPAN
Nombre de colonnes sur lequel s’étend cette case.
ROWSPAN
Nombre de rangées sur lequel s’étend cette case.
ALIGN
Alignement horizontal de la cellule (voir le même attribut de l’élément
COLGROUP, Tableau 17)
VALIGN
Alignement vertical de la cellule (voir le même attribut de l’élément COLGROUP,
Tableau 17)
CHAR
SCOPE
Indique les cellules concernées par le titre dans le cas d’un élément TH. Les
valeurs possibles sont : row (les cellule du reste de la rangée), col (les cellules
du reste de la colonne), rowgroup (les cellules du même groupe de rangées),
colgroup (les cellules du même groupe de colonnes).
NOWRAP (DECONS.)
Ne pas couper les lignes automatiquement à l’intérieur de cette case.
WIDTH (DECONS.)
La largeur de la case. Absolue en nombre de pixels (ex: WIDTH="200") ou en
pourcentage de la largeur totale du tableau (ex: WIDTH="50%").
BGCOLOR
(DECONS.)
Une couleur de fond à utiliser dans cette case du tableau. Cette couleur est héritée par un éventuel tableau imbriqué dans cette case.
Contient
44
Une case dans un tableau (resp. normale ou de titre).
Tout élément autorisé dans l’élément BODY y compris TABLE
9 Feuilles de Style
Les feuilles de style sont le seul et unique mécanisme préconisé par HTML 4.0 pour contrôler l’aspect visuel du document. La plupart des éléments et attributs qui permettaient d’exercer un tel contrôle dans les versions antérieures du langage sont en effet désormais déconseillés
et pourraient disparaître dès la prochaine version.
Une feuille de style regroupe des règles de présentation que l’on peut appliquer à des éléments HTML dans un document. Ces règles sont exprimées dans un langage indépendant de
HTML. En fait, HTML n’impose pas un langage de feuille de style particulier, en pratique, toutefois le langage Cascading Style Sheet (CSS) [13] tend à s’imposer.
9.1 Association de feuilles de style à un document HTML
HTML 4.0 offre une grande flexibilité au niveau de la localisation des feuilles de style.
Une feuille de style peut ainsi résider dans un fichier à part, ce qui permet de la partager entre
plusieurs documents, elle peut se trouver à l’intérieur même du document HTML ou bien elle
peut aussi être répartie au niveau même de chaque élément, grâce à l’attribut style.
L’inclusion d’une feuille de style externe est réalisée au moyen de l’élément
LINK (voir § 6.5) :
<HEAD>
<LINK href=”EPFLStyle.css” rel=”stylesheet” type=”text/css”>
...
</HEAD>
Une feuille de style interne est définie à l’intérieur d’un élément STYLE intervenant à l’intérieur de l’élément HEAD :
<HEAD>
<STYLE type=”text/css”>
H1 { text-align: center; color: red}
</STYLE>
</HEAD>
Une spécification de style en ligne se fait au moyen de l’attribut style supporté par la
plupart des éléments :
45
<P type=”text/css” style=”font-size: 12pt; color: red”>
Cette dernière pratique est à éviter et ne se justifie que pour des surcharges extrêmement
localisées d’un style général défini par exemple en début de document à l’intérieur d’un élément
STYLE.
Plusieurs feuilles de style internes et/ou externes peuvent être spécifiées pour permettre
de paramétrer le rendu sur des supports différents. Le support auquel s’applique la feuille de style est décrit par l’attribut media. Plusieurs feuilles de style peuvent également s’appliquer au
même media, le langage CSS a en effet la particularité de pouvoir fusionner des spécifications
de style intervenant à plusieurs niveaux, permettant ainsi de combiner une feuille externe avec
une feuille générale interne (élément STYLE), une spécification locale (attribut style) et des
préférences lecteur (définies par exemple par l’utilisateur dans la configuration de son visualiseur).
Tableau 19 : Feuille de style interne (STYLE)
<STYLE>
Une définition de feuille de style
TYPE (OBLIG.)
Le langage utilisé pour la feuille de style. Le plus souvent text/css
MEDIA
Support de rendu auquel cette feuille de style s’applique : screen, print,
projection, braille, speech, all
TITLE
Titre de la feuille de style
9.2 Les éléments DIV et SPAN
Les éléments DIV et SPAN sont particulièrement utiles en combinaison avec les feuilles
de style. Tous deux n’apportent aucune information de structure sur le document contrairement
aux autres éléments HTML, leur rôle est simplement d’englober du texte de manière à pouvoir
en modifier les propriétés d’affichage grâce à une feuille de style. DIV est un élément de niveau
bloc (qui termine un paragraphe ouvert et est entouré généralement de sauts de ligne), SPAN est
un élément de niveau texte (voir Ch. 6).
<HEAD>
<STYLE>
SPAN.avertissement { color: red }
</STYLE>
</HEAD>
...
La copie de ce document sans autorisation
est <SPAN class=”avertissement”>interdite</SPAN> sous peine...
...
9.3 Cascading Style Sheets
9.3.1 Syntaxe générale du langage
Une feuille de style CSS est composée d’une séquence de règles (rules), chacune de ces
règles est composée d’un sélecteur (selector) et d’une déclaration (declaration). Une déclaration associe une valeur (value) à une propriété (property).
46
<HEAD>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
Dans cet exemple H1 est le sélecteur dont le rôle est de limiter la portée de la déclaration
qui le suit. La déclaration associe la valeur blue à la propriété color indiquant ainsi que la
couleur des éléments H1 du document doivent être affichés en bleu. On peut associer plusieurs
déclarations au même délimiteur en les séparant par ; et utiliser des déclarateurs multiples au
moyen du séparateur , :
<HEAD>
H1 { color: blue; font-size: 14pt }
H2, H3 { font-size: 12pt }
</STYLE>
</HEAD>
Le plus souvent les délimiteurs sont ainsi des éléments HTML. Toutefois on peut ne faire
porter une déclaration de style que sur un sous-ensemble nommé d’éléments d’un certain type.
Par exemple, faire en sorte que des paragraphes d’annotation soient affichés en rouge. Pour cela
il faut déclarer ces paragraphes dans le document comme appartenant à la classe annotation
en utilisant l’attribut class (voir § 5.1) :
<P class=”annotation”>Une annotation importante
<P>Suivie d’un paragraphe normal
Le délimiteur ne concernant que les paragraphes de classe annotation s’écrit alors
P.annotation, ce qui donne la règle suivante :
<HEAD>
P.annotation { color: red}
</STYLE>
</HEAD>
...
<P class=”annotation”>Note: Ceci est important</P>
...
De même un délimiteur peut n’affecter qu’une seule instance d’un élément dans le document, il suffit pour cela de donner un identificateur unique à cette instance au moyen de l’attribut id (voir § 5.1) et de le référencer dans le délimiteur grâce au séparateur # au lieu de ..
9.3.2 Propriétés usuelles
Unités de longueur. Là où des propriétés admettent des longueurs comme valeur, celles-ci peuvent être exprimées en différentes unités :
• Unités relatives à la police courante
em : la largeur de la lettre m dans la police courante
ex : la hauteur du x dans la police courante
px : pixels du dispositif d’affichage
47
• Unités absolues
in : pouces, 1 pouce vaut 2.54 cm
cm : centimètres
mm : millimètres
pt : points typographiques, 1 point correspond à 1/72ème de pouce
pc : picas, 1 pica est égal à 12 points
Couleurs. CSS2 prévoit différentes façons de spécifier des couleurs : soit par mot-clé (aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,
teal, white et yellow), soit par triplet de composantes rouge/vert/bleu de la forme suivante :
EM
EM
EM
EM
{
{
{
{
color:
color:
color:
color:
#f00 }
#ff0000 }
rgb(255,0,0) }
rgb(100%, 0%, 0%) }
/*
/*
/*
/*
#rgb en hexadécimal*/
#rrggbb en hexadécimal */
entier de 0 à 255 */
flottant de 0.0% à 100.0% */
URL. Certains éléments admettent comme valeur un URL (ou plus exactement un URI). La
syntaxe est la suivante :
BODY { background-image: url(marble.gif) }
Propriétés. CSS définit plus d’une centaine de propriétés [13]. En voici quelques unes parmi
les plus usuelles.
Tableau 20 : CSS2 : Propriétés usuelles
Couleurs
Polices
color
La couleur d’avant-plan
background-color
La couleur d’arrière plan
background-image
Une image à utiliser comme fond
font-family
Une liste de familles de la police à utiliser
P { font-family: Baskerville, "Heisi Mincho W3", Symbol }
font-style
normal, italic, oblique
font-weight
normal, bold, bolder, lighter
font-size
La taille de la police exprimée soit par une taille absolue
déterminée par le visualiseur (xx-small, x-small,
small, medium, large, x-large, xx-large), soit par
une mesure relative (larger, smaller) soit par une
mesure de longueur soit par un pourcentage par rapport à
l’élément englobant
font
Un raccourci pour toutes les propriétés ci-dessus
P { font: bold italic large Palatino, serif }
Texte
48
text-indent
Indentation de la première ligne d’un bloc
text-align
Alignement horizontal d’un bloc de texte : left, right,
center, justify. Peut être également utilisé pour les
cellules de tableau.
text-decoration
Attributs additionnels de décoration : underline,
overline, line-through, blink
text-transform
Modification de la capitalisation d’un bloc de texte :
capitalize, uppercase, lowercase
Tableau 20 : CSS2 : Propriétés usuelles
Espacement
Bordures
Listes
margin-top
margin-right
margin-botoom
margin-left
Largeur de marge. La valeur est soit une longueur, soit un
pourcentage de la boite englobante.
margin est un raccourci pour ces quatre spécifications
individuelles.
padding-top
padding-right
padding-botoom
padding-left
Largeur de remplissage (cette zone de remplissage entoure
la zone d’affichage et est elle-même entourée par la zone
de marge). padding est un raccourci pour ces quatre spécifications individuelles.
border-top-width
border-right-width
border-bottom-width
border-left-width
Largeur de bordure. La valeur est soit une longueur soit
thin, medium ou thick. border-width est un raccourci
pour ces quatre spécifications individuelles.
border-style
Le style de cadre : dotted (pointillé), dashed (pointillé
long), solid, double, groove (creusé), ridge (relief)
border-top-color
border-right-color
border-bottom-color
border-left-color
Couleur de bordure. border-color est un raccourci pour
ces quatre spécifications individuelles.
border
Raccourci pour les trois propriétés précédentes
list-style-type
Type de numérotation de la liste : disc, circle, square,
decimal, lower-roman, upper-roman, lower-latin,
upper-latin, …
list-style-image
Une image à utiliser comme marqueur d’élément de liste
(surcharge list-style-type).
UL { list-style-image: url(http://png.com/ellipse.png) }
Tableaux
caption-side
Position de la légende du tableau : top, bottom, left ou
right.
vertical-align
La hauteur d’une rangée dépend de la taille et du placement
des cellules qu’elle contient. Une cellule est donc souvent
moins haute que la hauteur de la rangée à laquelle elle
appartient. Cette propriété détermine l’alignement vertical
d’une cellule par rapport à sa rangée : baseline (aligne la
ligne de base texte de la cellule avec la ligne de base de la
rangée), bottom (le bas de la cellule coïncide avec le bas
de la rangée), top, middle
border-spacing
Espacement des bordures de cellules. La spécification
comprend un ou deux longueurs (une seule longueur
s’applique à l’espacement horizontal et vertical), deux longueurs correspondent respectivement à l’espacement horizontal et vertical.
TABLE { border-spacing: 15pt }
empty-cells
Attributs de bordure pour les cellules vides : border ou
noborder.
49
10 Scripts
Un script est un programme qui peut accompagner un document HTML. Les différentes
fonctions de ce programme sont exécutées lors d’évènements liés au document (chargement,
passage de la souris au dessus d’un élément, activation d’un lien, soumission d’un formulaire
ou changement de contenu d’un champ, etc…)
L’élément SCRIPT définit un script exécuté lors du chargement du document par le visualiseur. NOSCRIPT fournit un texte alternatif pour les visualiseurs ne comprenant pas le script.
Tableau 21 : Scripts (SCRIPT)
<SCRIPT>
Un script
SRC
Un URL désignant un script externe au document
TYPE
Le langage de script utilisé. Le plus souvent text/javascript
DEFER
Indique au visualiseur que le script ne modifie pas l’aspect du document qui peut donc être
affiché avant la fin de l’exécution du script.
Les attributs génériques onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup ,
admis par la plupart des éléments HTML permettent d’associer des routines de script (voir
Ch. 10) à la survenance d’un certaine nombre d’évènements. La syntaxe exacte de ctee association dépend du langage de sript utilisé.
HTML ne préconise pas de langage de script particulier. Dans la pratique toutefois, Javascript est le plus répandu. Javascript est en cours de normalisation par l’ISO après avoir été normalisé par l’ECMA [14].
51
11 L’Avenir du World Wide Web
Evoquer le succès du World Wide Web est aujourd’hui devenu un lieu commun. Le système d’information construit sur Internet autour du langage HTML et du protocole HTTP connaît une expansion fulgurante, preuve de ses qualités et du besoin qu’il représentait. Le
bouillonnement d’idées autour des technologies du World Wide Web et la demande en nouvelles fonctionnalités sont tels que les normes à peine créées sont déjà dépassées de facto.
Ainsi un certain nombre de questions demeurent ouvertes même si HTML 4.0 apporte des
réponses aux problèmes les plus couramment évoqués par les auteurs :
n les feuilles de style ont réussi le tour de force d’offrir aux auteurs un maximum de
contrôle sur la présentation des documents sans sacrifier aux objectifs d’indépendance vis-à-vis du support de visualisation
n l’adoption des mécanismes de scriptage offre une immense liberté dans la création
de documents dynamiques, avec, par exemple, la possibilité souvent réclamée de
contrôler les données d’un formulaire avant de le soumettre pour traitement
n l’incrustation d’objets génériques garantit l’indépendance du langage vis-à-vis
d’inclusions de programmes, images, animations quelconques
Les questions de mise en page ayant ainsi trouvé des solutions satisfaisantes, c’est du côté
du langage HTML même, c’est-à-dire de la description de structure du document, que des limites apparaissent. En effet, deux problèmes sont aujourd’hui soulevés :
• manque d’extensibilité du langage
HTML limite la structuration du document aux éléments qu’il offre. Certes des
éléments comme DIV et SPAN associés aux attributs class et id sembleraient pouvoir
apporter une solution mais ce n’est qu’un pis aller pour masquer le besoin pour
l’auteur de pouvoir créer de nouveaux éléments à volonté.
• manque de rigueur au niveau de la syntaxe des documents
Seule une faible portion des documents que l’on trouve aujourd’hui sur le World
Wide Web sont syntaxiquement corrects et passent l’épreuve d’un validateur et ceci
pour deux raisons : tout d’abord un immense laxisme de la part des visualiseurs
comme Netscape Navigator ou Internet Explorer dont un partie non négligeable du
code est consacrée au rattrapage des erreurs commises par l’auteur (étiquettes de
fermeture oubliées, éléments croisés, imbrications invalides ou attributs
manquants, …) mais aussi la piètre qualité des outils de génération actuels
53
(convertisseurs depuis les traitements de texte et outils graphiques de composition de
pages web) qui pour la plupart ont l’indécence de produire du code HTML
grossièrement invalide.
C’est pourquoi, le langage XML (eXtensible Markup Language) [15], sorte de voie intermédiaire entre HTML et SGML, offrant l’extensibilité du langage et la possibilité pour les
visualiseurs d’être plus stricts dans son interprétation trouve aujourd’hui une telle audience.
Avec XML il devient possible de créer ses propres éléments à volonté tout en leur attribuant une
forme de présentation par un langage de feuilles de style comme CSS2 ou XSL (eXtensible Style
Language). Après un succès aussi spectaculaire les jours du langage HTML seraient-ils donc
comptés?
54
Annexe A : Jeu de Caractères et Entités HTML
Pour référence, voici le jeu de caractères et d’entités spéciales HTML tiré de [7].
A-1 : Entités de caractères spéciaux
La table suivante liste les entités définies dans le jeu de caractères spéciaux de HTML 4.0
(déclaration SGML "-//W3C//ENTITIES Special//EN//HTML")
Syntax
Description
"
quotation mark = APL quote
ampersand
less-than sign
greater-than sign
latin capital ligature OE
latin small ligature oe
latin capital letter S with caron
latin small letter s with caron
latin capital letter Y with diaeresis
modifier letter circumflex accent
small tilde
en space
em space
thin space
zero width non-joiner
zero width joiner
&
<
>
&OElig;
&oelig;
&Scaron;
&scaron;
&Yuml;
&circ;
&tilde;
&ensp;
&emsp;
 
&zwnj;
&zwj;
Syntax
Description
&lrm;
left-to-right mark
right-to-left mark
en dash
em dash
left single quotation mark
right single quotation mark
single low-9 quotation mark
left double quotation mark
right double quotation mark
double low-9 quotation mark
dagger
double dagger
per mille sign
single left-pointing angle quotation mark
single right-pointing angle quotation mark
euro sign
&rlm;
–
—
‘
’
&sbquo;
“
”
&bdquo;
&dagger;
&Dagger;
&permil;
&lsaquo;
&rsaquo;
€
A-2 : Entités ISO Latin 1
Cette table liste les entités HTML prévues dans l’ensemble ISO Latin 1 du W3C
"-//W3C//ENTITIES Latin 1//EN//HTML",
Syntax
Syntax
Description
no-break space = non-breaking space
¡
inverted exclamation mark
¢
cent sign
£
pound sign
¤ currency sign
¥
yen sign = yuan sign
¦ broken bar = broken vertical bar
§
section sign
¨
diaeresis = spacing diaeresis
©
copyright sign
ª
feminine ordinal indicator
 
Description
left-pointing double angle quotation mark
not sign

soft hyphen = discretionary hyphen
®
registered sign = registered trade mark sign
¯
macron = spacing macron = overline
°
degree sign
± plus-minus sign = plus-or-minus sign
²
superscript two = superscript digit two
³
superscript three = superscript digit three
´
acute accent = spacing acute
µ
micro sign
¶
pilcrow sign = paragraph sign
«
¬
55
Syntax
Description
Syntax
Description
·
middle dot = Georgian comma
cedilla = spacing cedilla
superscript one = superscript digit one
masculine ordinal indicator
right-pointing double angle quotation mark
vulgar fraction one quarter
vulgar fraction one half
vulgar fraction three quarters
inverted question mark
latin capital letter A with grave
latin capital letter A with acute
latin capital letter A with circumflex
latin capital letter A with tilde
latin capital letter A with diaeresis
latin capital letter A with ring above
latin capital letter AE
latin capital letter C with cedilla
latin capital letter E with grave
latin capital letter E with acute
latin capital letter E with circumflex
latin capital letter E with diaeresis
latin capital letter I with grave
latin capital letter I with acute
latin capital letter I with circumflex
latin capital letter I with diaeresis
latin capital letter ETH
latin capital letter N with tilde
latin capital letter O with grave
latin capital letter O with acute
latin capital letter O with circumflex
latin capital letter O with tilde
latin capital letter O with diaeresis
multiplication sign
latin capital letter O with stroke
latin capital letter U with grave
latin capital letter U with acute
latin capital letter U with circumflex
latin capital letter U with diaeresis
latin capital letter Y with acute
latin capital letter THORN
latin small letter sharp s = ess-zed
latin small letter a with grave
latin small letter a with acute
latin small letter a with circumflex
latin small letter a with tilde
latin small letter a with diaeresis
latin small letter a with ring above
latin small letter ae
latin small letter c with cedilla
latin small letter e with grave
latin small letter e with acute
latin small letter e with circumflex
ë
latin small letter e with diaeresis
latin small letter i with grave
latin small letter i with acute
latin small letter i with circumflex
latin small letter i with diaeresis
latin small letter eth
latin small letter n with tilde
latin small letter o with grave
latin small letter o with acute
latin small letter o with circumflex
latin small letter o with tilde
latin small letter o with diaeresis
division sign
latin small letter o with stroke
latin small letter u with grave
latin small letter u with acute
latin small letter u with circumflex
latin small letter u with diaeresis
latin small letter y with acute
latin small letter thorn with
latin small letter y with diaeresis
¸
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
56
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
Annexe B : Exemples Concrets
Cette annexe regroupe quelques exemples concrets de documents HTML. tous ces documents sont conformes à la version stricte de la norme HTML 4.0.
B-1 : Elements Structurels et Formatage de Texte Courant
<html>
<head>
<meta content=”text/html; charset=iso-8859-1” http-equiv=”Content-Type”>
<link rev=”made” href=”mailto:Oscar Figueiredo”>
<title>Démonstration de Document HTML</title>
</head>
<body>
<h1>Un Simple Document HTML</h1>
<h2>Eléments Structurels Courants</h2>
<p>Un paragraphe débute par le tag <code><p></code>, les
retours à la ligne dans cet élément ne sont pas
pris en compte par le visualiseur qui coupe les lignes d’après
la taille de la fenêtre. Toutefois l’élément
<code><br></code> permet d’insérer des sauts de ligne
comme <br>
ici<br>
Et la suite continue donc à la ligne d’après.</p>
<pre>Dans un paragraphe préformatté comme celui-ci,
c’est différent,les sauts à la ligne sont reproduits
tels quels, de même que les tabulations comme
ici. L’élément <code><pre></code> est
plutôt utilisé pour présenter des extraits
de code source.</pre>
<h2>Liste et eléments de style logique</h2>
<p>Ce paragraphe montre l’utilisation des différents
éléments de <em>style logique</em> à
l’intérieur d’une liste :</p>
<ul>
<li>Citation : <cite>Alice au Pays des Merveilles</cite>
<li>Code : <code>for (i=0; i<12; i++)</code>
<li>Mise en évidence : <em>Important</em>
<li>Renforcement : <strong>Nota Bene :</strong>
<li>Exemple d’entrée au clavier :
Tapez <kbd>htmlchek sugar=1 mydoc.html</kbd>
<li>Variable muette : <var>X</var> varie de 0 à 10
</ul>
<hr>
<address>
<a href=”mailto:[email protected]”><[email protected]></a>
</address>
</body>
</html>
57
Ce document est présenté de la façon suivante par Netscape Navigator 4.05 :
B-2 : Liens, listes, images, positionnement par feuilles de style
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="maitlo:[email protected]" rev="made">
<title>Démonstration de Document HTML</title>
<style type="text/css">
IMG.vcenter {vertical-align: middle}
IMG.vtop {vertical-align: top}
</style>
</head>
<body>
<h1>Listes, Figures et Ancres</h1>
<h2><a name="index">Index</a></h2>
<p>
<ol>
<li><a href="#index">Index</a>
<li><a href="#listes">Listes</a>
<li><a href="#images">Images</a>
</ol>
<h2><a name="listes">Listes</a></h2>
<p>L'index est présenté sous forme de liste ordonnée.
Voici une liste de définition :
<dl>
<dt><strong>HTML</strong> : <em>Hypertext Markup Language</em>
<dd>Le langage utilisé pour écrire les documents sur le
World Wide Web.
<dt><strong>SGML</strong> : <em>Standard Generalized Markup Language</em>
58
<dd>Langage de description de structure de documents...
</dl>
<h2><a name="images">Images</a></h2>
<p>Voici une image en ligne avec différents types d'alignement spécifiés par feuille de
style :
<ul>
<li>Alignement vertical <code>top</code> (avec <code>class="vtop"</code>) :
<img class="vtop" src="http://some.server/Icons/new.gif" alt="NEW">
<li>Alignement vertical <code>middle</code> (avec <code>class="vcenter"</code>) :
<img class="vcenter" src="http://some.server/Icons/new.gif" alt="NEW">
<li>Alignement vertical <code>bottom</code> (avec style en ligne <code>style="verticalalign: bottom"</code>) :
<img style="vertical-align: bottom" src="http://some.server/Icons/new.gif"
alt="NEW">
</ul>
<hr>
<address>
<a href="mailto:[email protected]"><[email protected]></a>
</address>
</body>
</html>
Netscape Navigator 4.05 en donne la visualisation suivante :
59
Lynx 2.8 en donne la visualisation suivante :
B-3 : Formulaire de Saisie
<html>
<head>
<meta content="text/html; charset: iso-8859-1" http-equiv="Content-Type">
<link rev="made" href="mailto:[email protected]">
<title>Formulaires : un exemple</title>
</head>
<body>
<h1>Un formulaire simple...</h1>
<form action="/cgi-bin/handleForm.cgi" method="POST">
<p>Votre Nom : <input type="TEXT" name="nom" size="25">
<p>Décrivez-vous en quelques lignes : <br>
<textarea name="vous" rows="5" cols="50"></textarea>
<p>Sexe : Masculin <input type="RADIO" name="sexe" value="masculin">
Féminin <input type="RADIO" name="sexe" value="feminin">
<p>Avez-vous un ordinateur : <input type="CHECKBOX" name="ordi">
<p>Si oui de quel type :
<select name="typeOrdi">
<option value="pc">PC ou Compatible
<option>Macintosh
<option>Autre
</select>
<p>
<input type="SUBMIT" value="Envoyer">
<input type="RESET" value="Effacer">
</form>
<hr>
<address>
</address>
</body>
</html>
60
Ce formulaire est présentéde la façon suivante par Netscape Navigator.4.05 :
Lynx 2.8 l’affiche comme suit :
61
B-4 : Tableaux
<html>
<head>
<meta content="text/html; charset=iso-8859-1">
<link rev="made" href="mailto:[email protected]">
<title>Tableaux : un exemple</title>
<style type="text/css">
DIV.table {text-align: center;
margin-bottom: 1ex;}
.centered {text-align: center}
.f-right {text-align: right}
</style>
</head>
<body>
<h1>Quelques exemples de tableaux...</h1>
<p>Les attributs <code>ROWSPAN</code> et <code>COLSPAN</code> permettent de
créer des tableaux complexes :</p>
<div class="table">
<table border="1">

<colgroup span="4">
<col width="0*">
<col width="0*">
<col width="0*">
<col width="0*">
</colgroup>
<tbody>
<tr>
<th rowspan=2 colspan=2></th>
<th colspan=2>Moyenne</th>
</tr>
<tr>
<th>Taille</th>
<th>Poids</th>
</tr>
<tr>
<th rowspan=2>Sexe</th>
<th>Hommes</th>
<td>1.80 m</td>
<td>75 kg</td>
</tr>
<tr>
<th>Femmes</th>
<td>1.65 m</td>
<td>55 kg</td>
</tr>
</tbody>
</table>
</div>
<p> On peut égaler utiliser les feuilles de style pour ajuster
l'alignement des cases du tableau et l'élément <code><BR></code> pour
insérer des retours à la ligne à l'intérieur d'une case :</p>
<div class="table">
<table border="1">
<colgroup span="4">
<col width="0*">
<col width="0*">
<col width="0*">
<col width="0*">
</colgroup>
<tbody>
62
<tr>
<th></th>
<th>Très Long Titre 1</th>
<th>Très Long Titre 2</th>
<th>Très Long Titre 3</th></tr>
<tr>
<th class="centered">Centré sur toute la ligne</th>
<td class="centered">1ère Case</td>
<td class="centered">2ème Case</td>
<td class="centered">Encore<br>une autre case</td></tr>
<tr>
<th>Alignement par case</th>
<td class="f-right">Aligné à droite</td>
<td class="centered">Centré</td>
<td>Par défaut,<br>aligné à gauche</td>
</tr>
</tbody>
</table>
</div>
<hr>
<address>
</address>
</body>
</html>
Netscape 2.0 donne la représentation suivante de ce document :
63
Annexe C : Références Bibliographiques
[1] The World Wide Web Unleashed, John December and Neil Randall, SAMS Publishing.
[2] Inside the World Wide Web, Steven Vaughan-Nichols, Rob Tidrow et al., New Riders
[3] HTTP/1.0 Internet RFC 1945, Informational, Tim Berners-Lee, Roy T. Fielding, and
Henrik Frystyk Nielsen (les spécifications les plus récentes du protocole HTTP sont
disponibles à l’URL http://www.w3c.org/Protocols/)
[4] The Common Gateway Interface, National Center for Supercomputing Applications
(NCSA), http://hoohoo.ncsa.uiuc.edu/cgi/
[5] SGML An Author’s Guide to the Standard Generalized Markup Language, Martin
Bryan, Addison Wesley
[6] HTML 2.0 Proposed Standard, RFC 1866, Dan Connoly, HTML Working Group of
the Internet Engineering Task Force,
http://www.w3.org/hypertext/www/MarkUp/html-spec/
[7] HTML 3.2 Reference Specification, Dave Ragget, W3C,
http://www.w3.org/TR/REC-html32.html
[8] The HTML 4.0 Specification, Dave Raggett, Arnaud Le Hors, Ian Jacobs,
W3C,http://www.w3.org/TR/REC-html40/
[9] HTML Tables, RFC 1942 Dave Ragget, W3C
http://www.ics.uci.edu/pub/ietf/html/rfc1942.txt or other RFC
repositories.
[10] The Compendium of HTML Elements, Ron Woodall,
http://www.htmlcompendium.org/
[11] Information Technology - Universal Multiple-Octet Coded Character Set (UCS) Part 1 : Architecture and Basic Multilingual Plane, ISO/IEC 10646-1:993
[12] HTML Validation Service, W3C, http://validator.w3.org/
[13] Cascading Style Sheets, level 2, W3C, http://www.w3.org/TR/PR-CSS2/
[14] Standard ECMA-262, ECMAScript: A general purpose, cross-platform programming language, ECMA, http://www.ecma.ch/stand/ecma-262.htm
[15] Extensible Markup Language (XML) 1.0, W3C Recommendation 10-February1998, http://www.w3.org/TR/1998/REC-xml-19980210
64
65

Une version imprimable

Transcription

Documents pareils

Construction mixte acier béton

Afficher - Lettres et TICE

Programme 2015

CUISINES / SALLES DE BAINS

ENSEIGNEMENT FACULTATIF LYCÉE POLYVALENT EUGÈNE

CURRICULUM VITAE

Centre d`affaires à Bussigny-près-Lausanne

EUROPLEX Cinéma Flon

Ensemble MiniCeltik - Conservatoire de Lausanne

Agence principale Genève : Cours de Rive 7