Chapitre 29 : HTML 4.0
Chapitre 29 : HTML 4.0
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 :
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.
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.
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
où
Exemple :
<INS datetime="1997-08-05T08:08:30Z"> Ajouté le 1 août 1997 à 8 h 30 Temps universel </INS>
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 :
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>
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>
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>
Abréviation de la balise BLOCKQUOTE
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 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 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
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>
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
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>
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 :
</BODY>
<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>
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.
</BODY>
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>
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 :
<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>
<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 :
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 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>
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>
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).
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>
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.
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">
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
