Chapitre 31 : HTML de Netscape et d'Internet Explorer

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

Ce chapitre décrit les éléments d'HTML non inclus dans la norme 3.2 mais utilisés par Netscape ou Internet Explorer.

Lorsque les balises ne sont reconnues que par l'un des éditeur, l'icone indiquera une spécificité Netscape et l'icone indiquera une spécificité Internet Explorer.

Quand aucune des icone n'est présente, les deux navigateurs supportent la balise explicitée au moins dans leurs versions les plus récentes.

31.1 - Les frames

Les frames permettent de définir des fenêtres dans une page HTML, chacune de ces fenêtres se comportant comme une page HTML indépendante.

Ainsi on peut disposer d'un ascenseur pour chacune de ces zones, faire défiler des textes ou des images dans chacune d'entre elles.

Mais le mieux est de regarder un exemple en cliquant ici si vous possédez un lecteur Netscape 2 ou supérieur

Les frames mettent en jeu deux éléments :

la balise FRAMESET définissant la taille des fenêtres,
la balise FRAME définissant le contenu des fenêtes,

La structure d'une page HTML sera :

<FRAMESET pour 2 fenêtres horizontales>
   <FRAMESET pour 3 fenêtres verticales>
     <FRAME> première fenêtre
     <FRAME> deuxième fenêtre
     <FRAME> troisième fenêtre
</FRAMESET>
<FRAME définition de la deuxième fenêtre horizontale>
</FRAMESET>

FRAMESET

On ne parle plus de balise <BODY> </BODY> dans une page fenêtrée mais d'un sur-ensemble appelé FRAMESET. La syntaxe reste du même style : <FRAMESET></FRAMESET>

La balise FRAMESET comprend deux attributs:

ROWS=hauteur1,hauteur2,...
COLS=largeur1,largeur2,...

ajoutés aux attributs de couleur définis dans la balise <BODY>. Ceux-ci doivent cependant apparaître avant les attributs de FRAMESET, sous peine d'être ignorés.

Les valeurs peuvent être des pixels (par exemple 40) , des pourcentages (par exemple 20%) ou des résultantes (par exemple *).

Il est bien entendu, que la valeur absolue en pixels est à éviter, à moins de vouloir mettre un bandeau d'images fixes par exemple.

La valeur de pourcentage se comprend bien: elle permet de diviser l'écran en plusieurs parties par exemple <FRAMESET ROWS="10%,70%,20%">

La valeur résultante permet de désigner le reste de la place disponible.

Cette valeur résultante vous permet de donner la valeur à déduire. Par exemple <FRAMESET ROWS="100,*,*"> divisera en trois : 100 pixels pour une fenêtre, et deux fenêtres de longueur identique.

On peut entrer la syntaxe <FRAMESET ROWS="*,2*"> pour diviser l'écran en deux parties; la première faisant 1/3 de l'écran et la deuxième les 2/3 restants.

FRAME

La balise FRAME définit la fenêtre elle-même. Chacune des fenêtres peut avoir plusieurs attributs :

SRC=URL : donne l'URL à mettre dans la FRAME
NAME=nom de la fenêtre : donne le nom de la fenêtre.
MARGINWIDTH=valeur : donne la valeur (en pixels) des marges pour la fenêtre.
MARGINHEIGHT=valeur : donne la valeur (en pixels) de l'en-tête et du bas de page de la fenêtre.
SCROLLING="yes|no|auto" : permet les flèches déroulantes de défilement du texte.
NORESIZE Ce flag indique que la taille de la fenêtre n'est pas redéfinissable par l'utilisateur.

La balise <NOFRAMES> </NOFRAMES> permet de créer une page HTML visible par ceux qui ne disposent pas d'un outil compatible avec Netscape 2.03.

Si une page HTML H1 appelée dans une FRAME F1 doit appeler une page HTML H2 située dans une autre FRAME F2, il faut ajouter dans l'URL de H1 la balise TARGET avec le nom de la fenêtre correspondant à la FRAME F2.

Remarque intéressante Si vous appelez un fichier audio au format au à la place d'un fichier html, Netscape chargera le fichier sonore automatiquement.

Exemple

L'exemple précédent était mis en oeuvre par le code ressemblant au code suivant (mais qui peut en varier) :

<!doctype html public "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<TITLE>Un nouveau guide d'Internet - éléments d'HTML pour Netscape 2.03</TITLE>
<META NAME="AUTEUR" CONTENT="Gilles Maire">
<HEAD>
<FRAMESET ROWS="85%,15%">
<NOFRAME> Cette page de démonstration ne peut être lue qu'avec un logiciel
compatible Netscape 2.03.
<NOFRAME> 
<FRAMESET COLS="40%,60%">
<FRAME SRC="france.htm">
<FRAME SRC="manuel.htm">
<FRAMESET>
<FRAME SRC="index.htm#URL">
<FRAMESET>
<HTM>

Des appels récursifs peuvent être faits sur les fenêtres, divisant les pages (presque) à l'infini.

Bords de frames

Orner une page Web de frames n'est pas toujours agréable à l'oeil, sachant que l'écran s'en trouve divisé, limitant de ce fait de façon agressive la partie principale de la page.

Il est possible ne ne plus diviser l'écran de façon physique mais uniquement de façon logique en supprimant les traits de séparation des Frames.

L'attribut FRAMEBORDER=[YES|NO] peut être mis dans les balise FRAMESET et FRAME. La valeur par défaut est YES c'est à dire que, sans option, les frames seront visibles et leur taille modifiable.

Dans une balise FRAMESET, l'attribut FRAMEBORDER=NO supprime les bordures de FRAME pilotées par FRAMESET.

Dans la balise FRAME, il active ou inhibe la présence du bord pour la FRAME correspondante.

L'attribut BORDERCOLOR permet de donner la couleur du bord de FRAME, il peut être utilisé dans les balises FRAME ou FRAMESET. La valeur de cet argument est donné sous la forme d'un couleur : green, blue, red etc.

L'attribut BORDER permet de régler l'épaisseur du trait de séparation seulement pour les attributs FRAMESET. La valeur de cet argument est en pixel. Comme les bords des frames sont partagés, les conflits sont résolus de façon priorotaire sachant que les attributs de la balise FRAMESET ont la priorité la plus basse. Donc les attributs de la balise FRAMEprendront le pas sur les balises FRAMESET.

31.2 - Les AREA

La balise IMG peut comprendre un ordre USEMAP qui est décrit par la syntaxe suivante:

<IMG SRC="image" USEMAP="#nom">

Cette instruction doit suivre le couple de balise définissant les zones sensibles :

<MAP NAME="essai">
<AREA SHAPE="RECT|POLY|CIRCLE" COORDS="..." HREF ="URL">
<AREA SHAPE="RECT|POLY|CIRCLE" COORDS="..." HREF ="URL">
....
</MAP>

Ces commandes sont calquées sur ISMAP que nous retrouverons dans le chapitre HTML 3.2

31.3 - Les fenêtres dynamiques

Vous savez que vous pouvez, lorsque vous lisez un document sous Netscape, ouvrir une deuxième fenêtre Netscape, afin de visualiser une deuxième page HTML.

Il est possible d'écrire un ordre qui provoquera par programme, l'ouverture d'une fenêtre .

Ceci se fait par la syntaxe :

<A HREF="URL" TARGET="Nom de la fenêtre"> Message </A>

Cliquez ici pour aller sur la table des matières simplifiées du guide. La variable Nom sert à référencer les différentes fenêtres, et elle peut être initialisée de différentes façons, par une directive NAME=valeur:

un région d'un document quelconque peut être nommé,
une document quelconque peut être nommé
une fenêtre créée par un FRAMESET peut être nommé

Ainsi dans un document multi-fenêtres, vous pouvez faire en sorte d'appeler un document dans une autre fenêtre depuis une fenêtre de contrôle.

L'appel à une fenêtre se fait par la variable TARGET :

dans une définition de lien : <A HREF="url" TARGET="window_name">Targeted Anchor</A>
dans une balise BASE : <BASE TARGET="window_name">
dans un champ AREA :

<AREA SHAPE="shape
COORDS="x,y,..." HREF="url"
TARGET="window_name">

dans une balise FORM : <FORM ACTION="url" TARGET="window_name">

Ainsi chacune de ces balises appellera la fenêtre définie par la directive NAME.

La balise TARGET doit être définie par une chaine de caractères commençant par une lettre de l'alphabet.

Enfin les champs particuliers peuvent être attribués à TARGET, ils commencent par le caractère _:

TARGET="_blank" : force l'appel d'une nouvelle page. Cliquez ici
TARGET="_self" : Force l'appel d'une page dans la même fenêtre (Evite les multiplications de fenêtres). Cliquez ici
TARGET="_parent" : Force l'appel à la page mère (permet de revenir en mono fenêtre).
TARGET="_top" : Force l'appel à la première page de la liste.

31.4 - Multimédia sur Internet Explorer

Le son

La balise BGSOUND permet de créer des pages avec un fond sonore. Ce fond est un fichier qui peut être au format :

au de SUN,
wav bien connu par les utilisateurs de Microsoft,
midi de la norme MIDI.

La syntaxe est la suivante :

<BGSOUND SRC="fichier_son" LOOP=nombre|INFINITE>

Un argument LOOP=nombre ou LOOP=INFINITE peut être ajouté pour indiquer que la séquence sonore sera rejouée comme un certain nombre de fois ou à l'infini.

La vidéo

Des séquences vidéo peuvent être insérées dans les pages HTML au moyen de la balise IMG

Le fichier vidéo doit être au format AVI et un argument CONTROLS permet d'ajouter la barre de contrôle du mode vidéo. Comme pour l'inclusion de son, l'argument LOOPpeut être utilisé pour répéter la séquence vidéo à l'infini ou pendant une période déterminée.

Enfin au cas où le mode vidéo ne serait pas reconnu par le lecteur, on peut utiliser l'argument SRC=source, où source est un fichier au format GIF ou JPEG.

séquence vidéo <IMG SRC="gif/guitare.jpg" DYNSRC="gif/guitare.avi" LOOP=INFINITE>

Les arguments START=FILEOPEN|MOUSEOVER indiquent que la séquence vidéo commencera soit à l'ouverture du fichier, soit lorsque la souris passe sur le clip.

31.5 - Propriétés de la balise BODY

Fonds d'écran fixes

Avec Internet Explorer, les fonds de pages peuvent être fixes, permettant de faire défiler le texte sur celui-ci. Ces propriétés de la balise BODY se déclarent en ajoutant à la balise BODY contenant l'argument BACKGROUNDun deuxième argument :

BGPROPERTIES=FIXED

Les marges

Les valeurs LEFTMARGIN=valeur1 et RIGTHMARGIN=valeur2 permettent de donner en pixels les valeurs des marges gauche et droite.

31.6 - Les polices de caractères

La grande nouveauté du navigateur de Microsoft est d'avoir introduit les possibilités de choix des polices de caractères; ceci se fait, d'ailleurs, en dehors de la norme HTML3.2. Nestcape supporte cette option depuis sa version 3.0.

La sélection des polices de caractères se fait par ajout de l'argument FACE=nom_de_police à la balise FONT

Il est possible de donner plusieurs noms de polices séparés par des virgules pour indiquer plusieurs polices par ordre de préférence au cas où les premières d'entre elles ne seraient pas disponibles.

Exemple : Cette portion du texte est en Arial ou en Lucida Sans, en fonction des polices de caractères installées sur votre système. Ceci s'est fait en balisant le texte en cours d'un couple de balises :

<FONT FACE="Arial,Lucida Sans">

...
</FONT>

31.7 - Les Marquees

Les marquees permettent d'animer du texte avec la balise suivante :

<MARQUEE BGCOLOR=#FF0000 DIRECTION=RIGHT ALIGN=BOTTOM BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>

< FONT COLOR="WHITE">Ceci est un texte.
</FONT>
</MARQUEE>

Ceci est un texte. Les arguments suivants peuvent être utilisés :

ALIGN=TOP|MIDDLE|BOTTOM : spécifie l'alignement du texte par rapport au marquee.
BEHAVIOR=SCROLL|SLIDE|ALTERNATE : spécifie si le texte doit disparaître sur les bords, rester visible au bord ou changer de direction au bord.
BGCOLOR= #rrggbb ou nom-de-couleur : spécifie une couleur de fond pour le marquee
DIRECTION=LEFT|RIGHT : spécifie la direction de défilement
HEIGHT=n ou n% : spécifie la hauteur du marquee en pixels ou en pourcentage
WIDTH=n ou n% : spécifie la largeur du marquee en pixel ou en pourcentage
HSPACE=n : spécifie les marges gauche et droite du marquee (en pixel)
LOOP=n|INFINITE : spécifie le nombre de cycles de défilement du marquee
SCROLLDELAY=n : spécifie le délai en millisecondes entre deux affichages successifs

31.8 - Les arguments de tableaux

Les balises <TABLE>...</TABLE> comprennent désormais les arguments suivants :

ALIGN=LEFT|RIGHT : spécifie l'alignement dans une cellule ou dans le tableau entier (< TABLE ALIGN=LEFT>)
BGCOLOR=#rrggbb ou nom-de-couleur : spécifie la couleur de fond du tableau ou d'une cellule
BORDERCOLOR=#rrggbb ou nom-de-couleur : spécifie la couleur des traits du tableau ou d'une cellule.
BORDERCOLORLIGHT=#rrggbb ou nom-de-couleur : spécifie la première couleur permettant de donner l'effet 3D
BORDERCOLORDARK= #rrggbb ou nom-de-couleur : spécifie la deuxième couleur permettant de donner l'effet 3D
VALIGN=TOP|BOTTOM : spécifie que le texte doit être en haut ou en bas de la cellule ou du tableau

31.9 - La justification

Au cours des formations que je dispense, les stagiaires issus du domaine des arts graphiques me demandent souvent comment traiter le multi-colonnage dans les documents HTML.

Je répondais jusqu'à présent que la seule solution était d'utiliser des tableaux avec une taille de bord nulle, mais la lourdeur de mise en place des tableaux et les limitations inhérentes au véritable multicolonnage laissaient mes auditeurs sur leur faim.

Il est désormais possible à partir de la version 3.05 de Nestcape, de faire cela avec des balises dédiées, qui permettent justement de lever ces limitations. Signalons en outre par rapport à l'utilisation des tables, que pour les lecteurs non compatibles, la balise MULTICOL non comprise, est moins pénalisante qu'une balise TABLE non interprétée.

Regardons en détail comment tout cela est possible en utilisant au passage ces fonctionnalités : La balise MULTICOL peut être utilisée avec les arguments COLS, GUTTERet WIDTH.

MULTICOL doit être utilisé pour délimiter le texte qui sera mis en plusieurs colonnes. La fin du mode multicolonne sera signalé par la balise </MULTICOL>.

Ainsi le texte mis entre les balises <MULTICOL ...>et </MULTICOL> sera automatiquement formaté comme spécifié. Bien sûr ces balises peuvent être emboîtées pour permettre des divisions en plusieurs colonnes à l'intérieur d'une colonne.

COLS Cet attribut obligatoire permet de spécifier le nombre de colonnes désiré. la balise <MULTICOL COLS=3> permet ainsi de préciser que le texte sera en trois colonnes.
GUTTER spécifie la taille en pixel entre deux colonnes, la taille par défaut est 10.
WIDTH Donne la taille d'une colonne sachant que toutes seront de même taille.

31.10 - Contrôle d'espacement

Le contrôle de l'espacement horizontal et vertical entre caractères est maintenant possible. Cet espacement se règle par la balise SPACERqui comprend les attributs TYPE, SIZE, WIDTH, HEIGHT et ALIGN. Les arguments ont les propriétés suivantes :

TYPE : peut prendre les valeurs HORIZONTAL, VERTICAL ou BLOCK pour régler l'espacement horizontal ou vertical. L'attribut BLOCK permet de donner à la fois l'espacement vertical et horizontal.
SIZE donne la taille en pixel d'espacement.
WIDTH, HEIGHT et ALIGN permettent de régler l'argument d'espacement BLOCK exactement comme on le fait pour la balise IMG.

31.11 - Extention TEXTAREA

Dans les formulaires, la balise TEXTAREA décrite dans le chapitre sur le langage HTML 3.2 connaît une amélioration intéressante par ajoût d'un nouvel attribut WRAP.

La syntaxe est :

<TEXTAREA WRAP=[OFF|VIRTUAL|PHYSICAL] ... >

Chacune des valeurs a la signification suivante :

OFF : la valeur par défaut. Les lignes sont envoyées comme auparavant et les lignes doivent être entrées avec des retours lignes.
VIRTUAL : les lignes sont envoyées au serveur HTTP comme une seule et même ligne mais le texte est linéaire dans la fenêtre.
PHYSICAL : les lignes sont linéaires dans la fenêtre et le texte est envoyé avec les coupures de lignes.

Exemple d'utilisation avec l'attribut VIRTUAL :