Chapitre 29 : HTML 4.0


Dernière mise à jour  17  août 1997  Auteur Gilles Maire
Serveur  http://www.imaginet.fr/ime/html40.htm Adresse Gilles.Maire@UNGI.com

L'année 1997 a vu le jour avec la normalisation 3.2 du langage HTML, le mois de juillet donne naissance au langage 4.0 de ce même langage. Cette étonnante rapidité des normalisateurs du W3C est une nouveauté et elle a pour but de ne pas laisser les éditeurs de logiciels Netscape et Internet Explorer inventer leurs propres balises au gré des développements.

Le langage HTML 4.0 offre les nouveautés suivantes :

29.1 - De nouveaux attributs pour des balises existantes

Version

Tout document suivant la norme HTML doit commencer par l 'une des instructions :

Suivant qu'il suit la norme HTML 4.0 en cours d'élaboration, finalisée (Final peut alors être omis), ou même au sens strict de la norme.

Langue

Il est maintenant possible de spécifier la langue et l'orientation d'écriture des documents HTML.

La connaissance de la langue sert bien évidemment aux moteurs de recherche, à la sélection de la typographie des polices, au choix des caractères de cotation, à connaître les emplacements de rupture des mots et les espacements inter caractère. Elle peut servir dans une utilisation future à la correction automatique des fautes d'orthographe des pages HTML.

L'orientation permet de spécifier si l'écriture de la page se fait de droite à gauche ou de gauche à droite et permet maintenant aux pages de langue arabe de voir le jour sans les artifices de textes en bitmap.

L'attribut de langue est LANG=EN|FR|EN-US|DE|AR|RU|JA

FR représente bien sûr le français, EN-US l'américain, RU le russe, AR l'arabe et JA le japonais. La liste complète de tous les pays possibles peut être consultée dans les documents de référence [RFC1766] et [ISO639]. (Voir le chapitre sur les sites incontournables).

Le deuxième attribut est DIR=RTL|LTR

Il exprime la direction d'écriture de droite à gauche (RTL) ou de gauche à droite (LTR). La valeur par défaut est LTR.

Ces deux attributs peuvent être utilisés dans bon nombre de balises : HTML, TITLE, HEAD, H1..H6, EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE,ACRONYM,BLOCKQUOTE,Q, SUB, SUP,P, PRE

La balise ACRONYM est nouvelle, elle signifie que le mot encadré est un acronyme :

<ACRONYM>UNGI</ACRONYM> : UNGI est l'acronyme de Un Nouveau Guide Internet

La balise Q est une abréviation de la balise BLOCKQUOTE, déjà existante en HTML 3.2.

Comme certaines de ces balises peuvent encapsuler certaines autres, il est possible notamment dans les textes mélangeant deux langues de sens inverse, que des balises viennent retourner le sens d'écriture.

Pour y remédier il est possible d'utiliser la balise <BDO DIR=..> ..</BD0>. Cette balise réagit non pas de façon relative mais de façon absolue.

DATETIME

L'attribut DATETIME permet d'attribuer une heure et une date par exemple à une nouvelle version d'un document.

Le format de DATETIME est : AAAA-MM-JJThh:mm:ssTZD

Exemple :

<INS datetime="1997-08-05T08:08:30Z"> Ajouté le 1 août 1997 à 8 h 30 Temps universel </INS>

Arguments de la balise TABLE

Les tableaux connaissent de nouvelles améliorations : la possibilité de préciser le nombre de colonnes afin que le navigateur n'ait pas à le calculer en parcourant tout le tableau et puisse ainsi afficher le tableau dès les premières lignes lues.

Ensuite les lignes ou les colonnes peuvent être groupées pour permettre :

COLS

Lorsque vous affichez un tableau, le navigateur doit en analyser toutes les lignes pour compter le nombre de colonne, cela provoque les délais d'affichage qui sont pénalisants surtout pour de gros tableaux.

Vous pouvez ajouter à la balise TABLE le nombre de colonne de votre tableau par l'utilisation de l'argument COLS

Exemple :

<TABLE COLS=3>...</TABLE>

Groupe de colonnes THEAD TFOOT et TBODY

Les lignes d'un tableau peuvent être groupées. Chaque groupement est composé d'une entête optionnelle, d'un corps obligatoire, et d'un pied optionnel. Chaque groupe de lignes doit comporter une ligne ou plus.

THEAD et TFOOT doivent apparaître avant TBODY.

Exemple :
 
<TABLE>
<THEAD>
<TR><TD>Thead 11</TD><TD>Thead 12</TD></TR>
<TR><TD>Thead 21</TD><TD>Thead 22</TD></TR>
</THEAD>
<TFOOT>
<TR><TD>Tfoot 11</TD><TD>Tfoot 12</TD></TR>
<TR><TD>Tfoot 21</TD><TD>Tfoot 22</TD></TR>
</TFOOT>
<TBODY>
<TR><TD>Tbody 11</TD><TD>Tbody 12</TD></TR>
<TR><TD>Tbody 21</TD><TD>Tbody 22</TD></TR>
</TBODY>
<TBODY>
<TR><TD>Tbody 11</TD><TD>Tbody 12</TD></TR>
<TR><TD>Tbody 21</TD><TD>Tbody 22</TD></TR>
</TBODY>
</TABLE>

Groupe de colonnes COLGROUP et COL

Les colonnes d'un tableau peuvent être groupées. Chaque groupement est défini par une balise COLGROUP et deux attributs SPAN et WIDTH.

<COLGROUP SPAN=valeur WIDTH=valeur>

SPAN spécifie le nombre de colonnes du groupe (un par défaut), et WIDTD spécifie la largeur par défaut de chaque colonne dans le groupe de colonne concerné. Cette largeur de colonne peut être exprimée en pourcentage et en valeur absolue comme dans le cas de l'attribut WITDH de la balise TABLE mais également sous la forme "0*" qui signifie que chacune de colonnes du groupement doit être de largeur minimale.
En plus des attributs SPAN et WIDTH, la balise COLGROUP supporte les attributs ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, ALIGN, CHAR, CHAROFF, VALIGN.

Cette balise doit être utilisée avant le groupement THEAD comme le montre l'exemple suivant :

Exemple :

<TABLE>
<COLGROUP SPAN="10" WIDTH="50">
<COLGROUP SPAN="5" WIDTH="0*">
<THEAD>
<TR> ...
</TABLE>

La balise COL et ses deux arguments WIDTH et SPAN

<COL SPAN=valeur WIDTH=valeur>

sert à définir chacune de colonnes à l'intérieur du groupement .

En plus des attributs SPAN et WIDTH, la balise COL supporte les attributs ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, ALIGN, CHAR, CHAROFF, VALIGN

En plus des valeurs absolues, relatives, "0*", on trouve la valeur "i*" qui permet de donner une valeur relative dans le groupement.

Exemple :

<TABLE>
<COLGROUP>
<COL WIDTH="30">
<COL WIDTH="0*">
<COL WIDTH="2*">
<COLGROUP ALIGN="CENTER">
<COL WIDTH="1*">
<COL WIDTH="3*" ALIGN="CHAR" CHAR=":">
<THEAD>
<TR> ...
</TABLE>

29.2 - De nouvelles balises

Q

Abréviation de la balise BLOCKQUOTE

ACRONYM

La balise ACRONYM est utilisée pour signifier que le mot encadré est un acronyme :

<ACRONYM>UNGI</ACRONYM> : UNGI est l'acronyme de Un Nouveau Guide Internet

ACRONYM connaît les attributs suivants : ID, CLASS, LANG , DIR, TITLE, STYLE , ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP

INS

INS est utilisé pour mettre en valeur des éléments de textes nouveaux par rapport à la version antérieure du document. Cette balise est prévue pour les navigateurs qui seront ainsi capables de visualiser dans une police particulière les nouveautés d'un document.

INS connaît les attributs suivants : ID, CLASS, LANG , DIR, TITLE, STYLE , ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, DATETIME

DEL

DEL est utilisé pour mettre en valeur des éléments de textes supprimés par rapport à la version antérieure du document. Cette balise est prévue pour les navigateurs qui seront ainsi capables de visualiser dans une police particulière les parties supprimées d'un document.

DEL connaît les attributs suivants : ID, CLASS, LANG , DIR, TITLE, STYLE , ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP, DATETIME

IFRAME

La balise IFRAME avec les mêmes arguments que la balise FRAME est introduite pour permettre d'inclure une fenêtre au milieu d'un texte.

Exemple :

<IFRAME SRC="document.html" WIDTH="200" HEIGHT="300"
SCROLLING="AUTO" FRAMEBORDER="1">
[Votre navigateur ne reconnaît pas le HTML 4.0
<A HREF="document.html">Cliquez donc ici</A>]
</IFRAME>
 

29.3 - Un nouveau concept : les feuilles de style

Introduction

Toutes les astuces utilisés hier par les pionniers du HTML - qui manipulaient les tableaux pour simuler le multi colonage, ou qui truffaient leur page d'images transparentes pour justifier leur texte - sont aujourd'hui révolues, les feuilles de style font partie de la norme HTML.
Les feuilles de style supportées par HTML 4.0 offrent les caractéristiques suivantes

Pour utiliser une feuille de style, on peut spécifier dans la balise META un attribut précisant le langage utilisé pour décrire la feuille de style. Généralement le langage utilisé est Cascading Style Sheets dont on retient l'acronyme CSS.
 

Notons que CCSS est décrit au W3C à l'adresse :
http://www.w3.org/pub/WWW/TR/REC-CSS1

On trouve une autre façon populaire de définir les feuilles de style : le langage JavaScript. Dans ce cas, la valeur de l'attribut content sera text/JavaScript  et on trouvera l'exemple :

Content-Style-Type: text/JavaScript
 
 

Utilisation des styles

Il est possible de déclarer un attribut style dans une balise comme le montre l'exemple suivant :

<P type="text/css" style="font-size: 14pt; color: red"> N'est ce pas merveilleux ?

Nous le verrons plus loin l'attribut style peut comprendre plusieurs champs séparés par des points virgules.

Mais c'est par la balise STYLE que nous pouvons déclarer des styles génériques bien plus faciles d'usage :

<STYLE type=langage media=type_media title=titre lang=langue dir=LTR|RTL>

</STYLE>

Les différents attributs sont :

Les balises STYLE définissant les différents styles utilisés dans un document doivent être présentes entre le couple de balises <HEAD> </HEAD>

A partir de ce point, nous expliciterons les balises dans le langage CSS.

Pour allouer la balise H1 à un style particulier nous utiliserons la syntaxe suivante :

<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>

Et dans tout le corps du document la balise H1 provoquera un texte encadré par un cadre de largeur 1 pour un texte aligné.

Il est possible de définir plusieurs styles pour une balise H1, ces styles seront nommés par un nom arbitraire comme le montre l'exemple suivant :

<HEAD>
<STYLE type="text/css">
H1.monstyle {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>

<BODY>
<H1 class="monstyle"> Ce titre sera affiché avec le style H1 monstyle </H1>
<H1> Celui-ci ne sera pas affecté</H1>
</BODY>

L'attribut class permet bien sûr de définir des sous-classes. Par contre il existe un autre attribut qui peut être utilisé de la même façon sans notion de sous classe c'est l'argument id.

L'exemple suivant montre cette utilisation :

<HEAD>
<STYLE type="text/css">
H1.monstyle {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>

<BODY>
<H1 id="monstyle"> Ce titre sera affiché avec le style H1 monstyle </H1>
<H1> Celui-ci ne sera pas affecté</H1>
</BODY>

Il est possible de nommer le style défini par utilisation de la balise SPAN cette balise permet de délimiter le champs d'action d'une portion de texte avec un style particulier.

Par exemple l'exemple suivant illustre ce point :

<HEAD>
<STYLE type="text/css">
SPAN.ID1 { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN id="ID1">Les premiers mots</SPAN> sont en lettre minuscules
</BODY>

Pour étendre l'action d'un style à une plage de plusieurs paragraphe nous utiliserons la balise DIV comme le montre l'exemple suivant :

<HEAD>
<STYLE type="text/css">
DIV.ID2 { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="ID2">
<P> Ce premier paragraphe est justifié
<P> de même ce deuxième car il est compris comme le
précédent dans un couple de balises DIV
</DIV>
</BODY>

Pour finir il est possible de définir les styles non pas à l'intérieur du document HTML mais dans un autre document, cela permet de définir les styles de façon unique et d'éviter les répétitions de déclaration.

Ainsi l'exemple suivant montre comment par utilisation de la balise LINK cela est rendu possible :

<HEAD>
<LINK href="fichier1.css" rel="stylesheet"
type="text/css" media="screen">
<LINK href="fichier2.css" rel="stylesheet"
type="text/css" media="print">
<LINK href="fichier3.css" rel="stylesheet"
type="text/css" media="speech">
</HEAD>

Ainsi la balise LINK connaît la syntaxe suivante :

<LINK
HREF="url du fichier contenant la feuille de style"
REL="stylesheet"|"alternate sylesheet"
TITLE="attribut titre" >

Les styles persistants étant ceux que l'utilisateur du navigateur ne peut pas modifier (stylesheet), les styles alternés (alternate sylesheet) peuvent être modifiés par l'utilisateur quand il règle son navigateur.

Pour en finir avec cette introduction aux feuilles de styles, il faut préciser que beaucoup de balises de la norme 3.2 sont amenées à disparaître au profit des feuilles de style. Ainsi il ne faut plus parler  des balises suivantes qui si elles sont encore supportées sont dépréciées :

29.4 - Amélioration sur les formulaires

Modifications

L'attribut GET est maintenant déprécié et seul l'attribut POST de la balise FORM peut être utilisé. On se demande donc à quoi peut bien servir l'attribut METHOD puisqu'il ne peut prendre que la valeur POST. D'autre part, les membres du consortium ne semblent pas conscients que l'argument GET est utile pour les tests de CGI d'API et autre  SSI.

L'apparition d'une balise BUTTON dont la syntaxe est :

<BUTTON name="reset" type="reset">

permet de définit un champ bouton d'action comme autrefois

<INPUT name="reset" type="reset" VALUE="reset">

Mais il est plus riche puisqu'il permet d'encapsuler des zones se comportant comme le bouton d'action :

<BUTTON name="submit" value="submit" type="submit"> Envoi<IMG src="/gif/icone.gif" alt="Envoi"></BUTTON>

Une image de type USEMAP ne doit pas être comprise dans un couple de balises BUTTON

La balise LABEL

La balise LABEL permet d'associer une zone de texte avec un champ.

Elle comprend les arguments suivants for, id, class,  lang, dir, title, style, disabled,  accesskey,  tabindex, onclick, onfocus,onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup.

L'attribut for permet d'associer l'étiquette label à un nom de contrôle défini dans la même page et faisant office de définition.
Ainsi, quand un élément de nom label est activé, il passe le contrôle à l'élément associé défini par for. ON le comprend l'élément associé ne peut pas être une définition de label.
Par exemple le formulaire suivant :

  <FORM ACTION="..." METHOD="post">
  <TABLE>
    <TR>
      <TD><LABEL FOR="premier">champ 1</LABEL>
      <TD><INPUT TYPE="texte" NAME="premiernom" ID="premier">
    <TR>
      <TD><LABEL FOR="deuxieme">champ 2</LABEL>
      <TD><INPUT TYPE="texte" NOM="deuxiemenom" ID="deuxieme">
  </TABLE>
  <FORM>

Les éléments FIELDSET et LEGEND

La balise FIELDSET permet de regrouper plusieurs champs ensemble pour leur donner une cohérence.

La balise  LEGEND permet de donner une légende à un groupe de champs regroupés par une balise  FIELDSET.

LEGEND connaît les arguments suivants :

     spécifie si la légende est en haut, en bas, à gauche et à droite du champ.

  <FORM ACTION="..." METHOD="post">
  <FIELDSET>
  <LEGEND ALIGN="top">Votre identité</LEGEND>
  Prénom: <INPUT NAME="Prenom" TYPE="text" TABINDEX="1">
  Nom: <INPUT NAME="Nom" TYPE="text" TABINDEX="2">
  </FIELDSET>
  <FIELDSET>
  <LEGEND ALIGN="top">Vos loisirs</LEGEND>
  <INPUT NAME="Sports" TYPE="checkbox" VALUE="Volley" TABINDEX="20">Volley</INPUT>
  <INPUT NAME="Sports" TYPE="checkbox" VALUE="Tennis" TABINDEX="20">Tennis</INPUT>
  </FIELDSET>
  </FORM>
 

Activation des zones de saisie

Auparavant il était possible de sélectionner un zone de saisie à la souris ou de passer de l'une à l'autre par un clic à la souris. Désormais, il est possible de changer l'ordre activé par les touches de tabulation (tabindex)  et de définir des raccourcis clavier qui permettront d'aller directement sur une zone (accesskey).
 

Tabindex

Chaque fois que cet attribut est présent dans une balise, il prend une valeur entière qui est la position (ou le rang) de l'élément. Les valeurs  négatives sont admises mais ces valeurs n'entrent pas dans l'ordonnancement des zones associées. D'ailleurs les valeurs n'ont pas besoin d'être consécutives. Si deux valeurs sont identiques elles auront l'ordre de leur apparition dans le document.
Les balises qui supportent l'attribut TABINDEX sont A, AREA, OBJECT, INPUT, SELECT, TEXTAREA et  BUTTON.

Exemple :

   <A TABINDEX="10" HREF="...">URL</A>
   <BUTTON TYPE="button" NAME="get-database" TABINDEX="1">
   Cliquez ici
   </BUTTON>
   <FORM ACTION="..." METHOD="post">
   <INPUT TABINDEX="1" TYPE="text" NAME="champ1">
   <INPUT TABINDEX="2" TYPE="text" NAME="champ2">
   </FORM>
 

Accesskey

Cet attribut assigne une touche clavier à une zone. Cette touche est un caractère, sachant que les minuscules et les majuscules sont équivalentes.
Ainsi en pressant une touche clavier, le focus est donné à une zone qui aura été défini comme possédant un accesskeys équivalent cette touche.

Les balises qui supportent l'attribut ACCESSKEYS sont LABEL, A, CAPTION et  LEGEND.
 

Exemple 1 :

  <A ACCESSKEY="C" HREF="...">Cliquez ici</A>
 

NB : sur un PC l'accès à la touche sera effectué par appui de la touche ALT sur Macintosh se sera pas la touche CTRL.
 

Disabled

Cet attribut permet de ne pas permettre le focus sur un élément, ni par la souris, ni par les touches clavier.
Les éléments qui sont en mode disabled ne sont pas transmis avec le formulaire.

Les balises suivantes supportent l'argument DISABLED : INPUT, TEXTAREA, SELECT, OPTION, OBJECT, LABEL et BUTTON.

L'élément considéré comme inactif (DISABLED) sera en général grisé dans le navigateur. Un script (JavaScript ou VBScript) peut rendre actif un élément inactif et vice versa.

Exemple :

  <INPUT DISABLED NAME="fred" VALUE="stone">
 

Readonly

Un élément READONLY ne peut pas être modifié par un utilisateur, par contre il est transmis avec le formulaire à la différence de l'argument DISABLED. L'élément marqué en lecture seule (READONLY) peut être activé mais pas modifié. (il est donc inclus dans les TABINDEX) .

Les éléments pouvant recevoir l'attribut READONLY son INPUT, TEXT, PASSWORD et TEXTAREA.

Un script (JavaScript ou VBScript) peut rendre actif un élément


Haut Haut Suivant Sommaire Recherche Fenêtre Glossaire Nouveau Bientôt Courrier Souscription Aide Copyright