Chapitre 25 : HTML 3.0 en cours de normalisation

25.1 - Alignements

Centrage
Alignement à droite
Justification

25.2 - Les listes

Titre des listes
Listes multi-colonnes
Les bullets
Les listes à numéro

25.3 - Styles
25.4 - Bannières
25.5 - Les links
25.6 - Les notes
25.7 - Les figures

Généralités
Shape
Titre et recouvrement

Ce chapitre explicite certaines variantes HTML que l'on ne trouve pas dans toutes les documentations et qui ne sont pas implémentées dans tous les navigateurs.

Elles font partie de la norme HTML 3.0 en cours de validation par l'IETF.

On retrouvera dans la norme HTML 3.0 les spécifications TABLE que l'on ne retrouvera pas ici, mais dans le chapitre Ecrire sa page Web, sachant que les versions actuelles de Netscape, Internet Explorer et Mosaic les comprennent.

Il est fort possible que votre navigateur affiche des choses bizarres car dans ce chapitre vous êtes aux limites du supportable!

Les balises supportées par Netscape seront marquées par le symbole

25.1 - Alignements

Les attributs d'alignement permettent d'aligner le texte à gauche, à droite et de le justifier.

Centrage

L'attribut center permet de centrer un paragraphe ou un titre.

Exemple :

<H2 align="center">Titre centré</H2>
<P align="center">

Visualisation:

Ce texte est centré.

Alignement à droite

L'attribut right permet de cadrer un paragraphe ou un titre à droite.

Exemple :

<H2 align="right">Titre cadré à droite</H2>
<P align="right">

Visualisation:

Ce texte est cadré à droite.

Justification

L'attribut justify permet de justifier un paragraphe ou un titre.

Exemple :

<H2 align="justify">Titre justifié</H2>
<P align="justify">

Visualisation:

Ce texte est justifié, ce qui veut dire qu'avec un navigateur qui le permet, ces lignes doivent être alignées à droite et à gauche. Donc les caractères blancs doivent être étirés afin de cadrer les mots. Ceci impliquera, dans le futur, l'espacement proportionnel des caractères.

25.2 - Les listes

Titre des listes

Un titre de liste peut être inséré avant une liste en utilisant une balise <LH> </LH>.

Ceci fonctionne pour les différents types de listes (UL,OL,DL).

Exemple : 



<UL>

<LH> Titre </LH>

<LI> point 1

<LI> point 2

</UL>

Visualisation:

Listes multi-colonnes

L'attribut wrap peut prendre l'une des valeurs vert, horiz ou none afin d'aligner les items de façon verticale ou horizontale.

Exemples : 



<UL wrap="vert">

<LI> point 1

<LI> point 2

</UL>

Visualisation:



<UL wrap="horiz">

<LI> point 1

<LI> point 2

</UL>

Visualisation:

Les bullets

La suppression des bullets se fait par l'attribut plain. 



<UL plain>

<LI> point 1

<LI> point 2

</UL>

Visualisation:

Les bullets peuvent être changés par une image, par exemple par .

Ceci se fait par 



<UL src="gif/blu_bull.gif">

<LI> point 1

<LI> point 2

</UL>

Visualisation:

Notons que l'ordre src=.. peut être inclus en argument des balises LI ceci permettant des images différentes devant chacun des items.

L'argument dingbat peut prendre les valeurs folder, text.document, ftp, document, image comme le montre l'exemple suivant :

Les listes à numéro

L'attribut continue de la balise OL permet de reprendre la numérotation après la dernier numéro utilisé.

Exemples : 



<OL continue>

<LI> point 1

<LI> point 2

</OL>

Visualisation:

  1. point 1
  2. point 2

De même le numéro de départ peut être paramètré par seqnum.

Exemples : 



<OL seqnum=3>

<LI> point 1

<LI> point 2

</OL>

Visualisation:

  1. point 1
  2. point 2

L'attribut skip permet de sauter un numéro dans la liste.

Exemples : 



<OL>

<LI> point 1

<LI skip=2> point 3

</OL>

Visualisation:

  1. point 1
  2. point 3

25.3 - Styles

Les styles permettent de spécifier les couleurs des titres, des paragraphes, leur police de caractères.

Ceci se fait dans le Header de la page HTML, c'est-à-dire à l'intérieur de la balise <HEAD> </HEAD>, à l'aide de la balise <STYLE> </STYLE>

Ainsi pour spécifier le style d'un titre <H1>, on utilise la syntaxe suivante : 

H1.hilight: text-color=couleur

On trouvera les arguments suivants :

L'exemple suivant illustre une définition de style : 



 

<HEAD>

<TITLE>Exemple</TITLE>

<STYLE>

H1.Titre:   text-color=blue

H2.classe1:      text-color=green, font-style=underline

H2.classe2:  text-color = blue, font-size-index = large

H3:           text-color = blue,  text-background = "image.gif"

H3.small:     text-color = "#0000FF", align = left

P:           text-color = black

</STYLE>

</HEAD>

Les définitions H2.classe1 et H2.classe2 permettent de choisir le style en cours d'utilisation : 





<H2 class="classe1" align="center">Titre H2 de classe1</H2>

<H2 class="classe2" align="right">Titre H2 de classe2</H2>

25.4 - Bannières

Les bannières sont des portions de code HTML qui restent figées dans un endroit de l'écran, elles sont utilisées avec la syntaxe entre les balises <BODY> ... </BODY>: 



<BANNER>

</BANNER>

Elles peuvent contenir n'importe quel code HTML.

Ceci est une bannière

25.5 - Les links

Les éléments <LINK> compris entre les balises d'entête de page, permettent de définir un menu de navigation.

L'exemple suivant illustre ceci : 



<HEAD>

<LINK REL="Haut"     HREF="htmlplus.htm">

<LINK REL="Index"      HREF="index.htm">

<LINK REL="Suivant"     HREF="httpd.htm">

<LINK REL="Précédent" HREF="nethtml.htm">

</HEAD>

25.6 - Les notes

Les notes permettent de mettre des popups contenant un texte ou de renvoyer à une note en bas de page suivant l'implémentation faite.

Ceci est l'appel à une note.

Elles sont déclarées par une balise <FN> dans le corps de la page HTML.

La déclaration d'une note se fait par une séquence : 

<FN id="Identifiant">

</FN>

L'exemple suivant montre un appel de note de bas de page :

<A HREF=#Adresse1 id="Identifiant"> ... </A>

ceci est le corps de la note

25.7 - Les figures

Généralités

Les balises <FIG> contiennent un texte qui illustre une image pour les navigateurs qui ne permettent pas l'affichage d'images.

C'est une extension intéressante de la fonction ALT car des balises HTML peuvent être utilisées dans le corps de la balise FIG.

Exemple :

Si vous ne voyez pas l'image, vous voyez au moins un texte sympathique

Shape

C'est une extension de la balise <FIG> qui permet de simuler une image lorsque le navigateur ne supporte pas les images (ou est configuré pour ne pas les supporter).

Exemple : 

<FIG  src="gif/france.gif">

<A HREF="auvergne.htm" shape="rect 10,10,100,212">Auvergne</A> 

<A HREF="bourgogne.htm" shape="rect 10,100,300,300">Bourgogne</A> 

<A HREF="bretagne.htm" shape="rect 26,199,600,600">Bretagne</A> 

</FIG>

donne l'exemple suivant :

Auvergne | Bourgogne | Bretagne |

Titre et recouvrement

Les images peuvent être surchargées, c'est-à-dire qu'une image peut comprendre une image de base et chaque page HTML appelée par un clic sur une région de l'image peut être surchargée sur l'image initiale. Ceci est valable en particulier pour les menus, les cartes géographiques.

<FIG  src="gif/aaaa.gif">

<OVERLAY src="notes.gif">

<CAPTION align="top">Overlay</CAPTION>

<A HREF="htmplus.html" shape="rect 0,0,10,10">Haut</A>  

<A HREF="httpd.htm" shape="rect 0,0,20,20">Suivant</A>

</FIG>