Production de documents WWW: Quelques nouveautés de HTML 4.0

Quelques nouveautés de HTML 4.0

Meta-informations

la marque <head> peut avoir l'attribut profile="UneURL" qui désigne un document décrivant la structure utilisée pour les autres meta-informations du document courant.
la marque <meta> peut avoir l'attribut scheme="InformationContextuelle" pour clarifier l'interprétation de la valeur fournie dans la marque. Exemples:
- <meta scheme="ISBN" name="identifier" content="0-8230-2355-9">
- <meta scheme="Month-Day-Year" name="date" value="9-10-97">

Texte

l'attribut dir permet d'indiquer la direction du flot de texte: la valeur LTR signifie de gauche à droite (Left To Right) et RTL signifie de droite à gauche (Right To Left). Cet attribut peut être utilisé avec la plupart des marques délimitant du texte.
l'attribut lang permet d'indiquer la langue utilisée dans le texte.
la marque <ins>...</ins> permet de désigner une partie du document nouvellement ajoutée. cette marque peut prendre l'attribut cite="UneURL" permettant de désigner un document décrivant la raison du changement, et datetime="DateDuChangement" permettant d'indiquer à quel moment le changement à eu lieu.
d'une manière similaire, la marque <del> permet d'indiquer qu'une section du document est supprimée. Le butineur peut choisir de ne pas afficher du tout la section concernée, ou bien de l'afficher d'une façon particulière, par exemple avec un trait traversant ("strike through").
la marque <abbr> permet de désigner une abréviation. L'attribut title permet de donner la forme complète. Exemple: <abbr title="par exemple">p.ex.</abbr>
d'une manière similaire, la marque <acronym> permet de désigner un sigle (utilisation similaire de l'attribut title).

Liens

la valeur de l'attribut id peut être utilisée comme point de repère pour la destination d'un lien. Exemple: dans le document courant, <a href="...#main">bla bla</a> et dans le document destination du lien, <div id="main">...</div>
l'attribut accesskey permet d'associer un abrégé clavier au lien, permettant d'utiliser cet abrégé clavier au lieu de "cliquer" sur le lien, pour arriver au document de destination.

Feuilles de style

plusieurs langages pour définir des directives de style peuvent être utilisés. La directive <META http-equiv="Content-Style-Type" content="TypeMIME"> permet d'indiquer le type MIME du langage utilisé (par exemple "text/css").
l'attribut media de la marque <style> permet d'indiquer le type d'équipement auquel sont destinées les directives de style incluses dans la marque (voir la liste de "media descriptors" de HTML4).

possibilité de définir des alternatives de style. Par exemple:

<link href="..." rel="alternate stylesheet" type="text/css" title="malvoyant">
<link href="..." rel="alternate stylesheet" type="text/css" title="normal">
<link href="..." rel="alternate stylesheet" type="text/css" title="Aigle">

Si l'attribut rel d'une des alternatives vaut stylesheet, la feuille de style en question aura précédence sur les autres.

Tables

Une table peut contenir une légende délimitée par la marque <caption>...</caption> qui peut avoir l'attribut align avec les valeurs top, bottom, left ou right.
une table est maintenant subdivisée en trois sections horizontales ou plus: l'en-tête, délimité par la marque <thead>...</thead>, le bas, délimité par la marque <tfoot>...</tfoot> et une ou plusieurs sections de données, délimitées par la marque <tbody>...</tbody>. Chaque section, si elle est présente, doit contenir au moins une ligne délimitée par la marque <tr>...</tr>. Lors de l'impression d'une table qui ne tient pas complètement sur une seule page, l'en-tête et le bas seront répétés à chaque page. Les sections <thead>...</thead> et <tbody>...</tbody> doivent être déclarées avant la ou les sections <tbody>...</tbody>.
la marque <colgroup>...</colgroup> permet de définir un groupe de colonnes comme une entité (pouvant par exemple avoir une bordure, etc.). La marque <colgroup> peut avoir, entre autres, l'attribut span pour indiquer le nombre de colonnes comprises dans le groupe (1, par défaut). Elle peut aussi prendre l'attribut width pour indiquer la largeur par défaut des colonnes du groupe (la valeur "0*" permet d'indiquer que chaque colonne du groupe doit avoir la largeur minimale nécessaire pour afficher le contenu de la colonne en question). Entre <colgroup> et </colgroup>, il peut y avoir des marques <col>.
la marque <col> peut prendre, entre autres, les attributs span et width et permet de definir la largeur, ou d'autres caractéristiques, d'une ou plusieurs colonnes. L'attribut width prend des valeurs numériques stipulées en valeurs absolues (nb. de pixels), en pourcentages de la largeur disponible pour la table entre les margees gauche et droite (%) ou en facteurs proportionnels (*).
l'attribut align d'une cellule ou d'un groupe de cellules peut prendre les valeurs justify et char en plus des valeurs définies dans HTML3.2 (left, center, right).
l'attribut char="UnCaractère" des marques <colgroup> et <col> permet d'indiquer le caractère qui servira à l'alignement vertical du contenu du groupe de cellules défini par la marque. Par défaut, "." est utilisé pour l'anglais et "," pour le français.
l'attribut frame de la marque <table> permet d'indiquer quelle(s) bordure(s) de table devrai(en)t être visible(s): aucune=void (valeur par défaut), le bord haut=above, le bord du bas=below, le bord gauche=lhs (sigle de Left Hand Side), le bord droit=rhs (Right Hand Side), haut et bas=hsides (Horizontal Sides), gauche et droit=vsides (Vertical Sides), les quatre côtés=box ou border.
l'attribut rule de la marque <table> permet d'indiquer quelle(s) séparation(s) interne(s) devrai(en)t être visible(s): aucune=none (valeur par défaut), entre groupes de cellules=groups, entre chaque ligne=rows, entre chaque colonne=cols, entre toutes les cellules=all.

Images et objets insérés

la marque <object>...</object> permet l'insertion d'éléments "étrangers" dans un document HTML. Entre le début et la fin de marque, il peut y avoir des paramêtres stipulés à l'aide de la marque <param>, ainsi qu'une représentation alternative (texte ou autre marque <object>...</object>). L'imbrication de marques <object>...</object> permet de stipuler plusieurs représentations alternatives du même objet. La marque <object> peut être utilisée pour insérer de simples images, par exemple: <object data="URLdeLImage" type="image/gif"> texte alternatif</object>.

la marque <object>...</object> permet l'inclusion d'un document HTML au sein d'un autre document HTML. Exemple:

...
Voici le fichier "readme" de ce site:<hr>
<object data="readme.html" type="text/html">
Votre butineur n'étant pas compatible avec la norme HTML4.0,
il vous faudra <a href="readme.html">examiner le fichier séparément</a>.
</object>
<hr> ...

l'attribut alt est maintenant obligatoire pour les marques <img> et <area>.
l'attribut shape de la marque <area> peut maintenant avoir la valeur default pour stipuler la surface complète de l'objet.

la marque <map> peut maintenant contenir soit des marques <area>, soit du texte HTML. Dans le second cas, les marques <a> du texte peuvent contenir les attributs shape et coords d'une manière similaire à la marque <area>. Exemple:

<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navigate the site:
<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
<A href="search.html" shape="circle" coords="184,200,60">Search</A>|
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A>
</MAP>
</OBJECT>

Note: si une marque <a> n'a pas d'attribut href, la zone délimitée par son attribut coords sera inactive.

Formulaires

la marque <label> permet d'associer une étiquette à un composant de formulaire:

<form ...>
<label>Nom:
  <input type="text" name="nom" size="20">
</label>

<label for="prenom">Prénom:</label>
<input type="text" id="prenom" size="20">
...
</form>

la marque <button> permet, comme la marque <input>, de créer des boutons poussoirs avec l'attribut type valant submit, reset ou button. Quand le type est button, un script peut être associé au bouton.
la marque <fieldset>...</fieldset> permet de regrouper un ensemble de composants de formulaires, qui peuvent même avoir une légende commune si la marque <legend>...</legend> est imbriquée dans la marque <fieldset>...</fieldset>.
la marque <optgroup>...</optgroup> permet de regrouper des marques <option> au sein d'une marque <select>...</select>. Ce regroupement est particulièrement utile pour de très longues listes d'options. La marque <optgroup> peut prendre l'attribut label="..." pour associer une étiquette au groupe.
l'attribut accesskey permet d'associer un abrégé clavier à l'activation d'un champ de formulaire. Suivant le système utilisé, la touche d'activation des abrégés clavier peut varier. Sous Windows, c'est généralement la touche Alt. Dans l'exemple ci-dessous, l'utilisateur peut taper <Alt>p pour activer le champ de saisie du prénom. Cette possibilité facilite l'utilisation par des aveugles, qui ne peuvent pas utiliser la souris pour activer des champs de formulaires.
```
<label for="prenom" accesskey="p">Prénom:</label>
<input type="text" id="prenom" size="20">
```
l'attribut disabled permet de désactiver un champ de formulaire. Le seul moyen de ré-activer le champ en question est à l'aide d'un script.
l'atribut readonly permet d'inhiber la modification d'un champ de formulaire. Comme pour l'attribut disabled, seul un script peut changer cet état.

Gestion d'évènements

La plupart des éléments d'un document peuvent avoir des scripts associés à l'apparition de divers évènements. Ces scripts peuvent être écrits dans divers langages de programmation (javascript est déjà inclus dans plusieurs butineurs, mais des "plug-ins" peuvent permettre l'utilisation d'autres langages, tel que Tcl).

Production de documents WWW - Université de Genève, CUI ©