HTML : quelques rudiments.

L'essentiel pour faire joli

Le document minimum

Voici un document minimum :
<HTML>

<HEAD>
<TITLE>Le titre de mon document.</TITLE>
</HEAD>

<BODY>
Du texte...
</BODY>

</HTML>

Voici ce
premier document.

Le début : <HEAD>

C'est entre <HEAD> et </HEAD> qu'on peut insérer des informations sur le document, des fonctions JavaScript (ainsi elles seront chargées en premier)...

Comme informations, on peut mettre le titre de la fenêtre entre les balises <TITLE> et </TITLE>. Les mots qui apparaîssent dans ce titre seront ceux mémorisés par les robots des moteurs de recherche. On peut aussi mettre des mots-cléfs pour ces mêmes robots de recherche entre les balises <META> et <META>. La syntaxe de cette balise est :

<META NAME="description" CONTENT="Titre">

Titre est le titre qui sera affiché par le moteur de recherche lorsqu'il aura trouvé la page, et

<META NAME="keywords" CONTENT="mot-cléf1, mot-cléf2, ...">

mot-cléf1, mot-cléf2, ... représentent les différents mots cléfs nécessaires pour trouver la page depuis le moteur de recherche.

Enfin, la balise META permet de charger automatiquement un fichier lorsque l'adresse a changée, par exemple. Si le fichier ancien.html contient :

<HTML>
  <HEAD>
    <TITLE>Ancien fichier</TITLE>
    <META HTTP-EQUIV="Refresh" CONTENT="5; URL=nouveau.html">
  </HEAD>

  <BODY>
    <H1>Ancien fichier</H1>

Le fichier a été déplacé. Il se touve maintenant <A HREF="nouveau.html">ici</A>.

  </BODY>
</HTML>

et si le fichier nouveau.html contient :
<HTML>
  <HEAD>
    <TITLE>Nouveau fichier</TITLE>
  </HEAD>

  <BODY>
    <H1>Nouveau fichier</H1>

Ceci est le fichier chargé à la nouvelle adresse...

  </BODY>
</HTML>
lorsqu'on charge le fichier ancien.html, au bout de 5 secondes le fichier nouveau.html est chargé, comme le stipule la balise :
    <META HTTP-EQUIV="Refresh" CONTENT="5; URL=nouveau.html">

Réglage des couleurs de la page


<body bgcolor="#000000" text="#0000ff" link="#ff0000"
        alink="ffff00" vlink="00ff00">

Voici un exemple de modification de couleurs.

La suite : <BODY>

C'est avec l'attribut <BODY> que commence le document proprement dit. On peut spécifier plusieurs attributs, comme un fond, une couleur de police :

le document précédent avec un fond de couleur blanc :

<BODY BGCOLOR="white">

le document précédent avec une image en fond :

<BODY BACKGROUND="images/bkgr2.gif">

le document précédent avec une couleur de police bleue :

<BODY TEXT="blue">

Les Balises

Formatter un document a l'aide de HTML, c'est indiquer sa structure a l'aide de balises.

Une balise est d'une des formes:

  1. <motclef> : balise de début.
  2. </motclef> : balise de fin.
  3. <motclef parametre=valeur>: balise a paramtres.
Certaines balises admettent plusieurs parametres qui seront indiqués dans un ordre quelconque.

L'effet des balises de fin est de terminer la zone de texte pour laquelle les spécifications d'une balise de début s'appliquent. Il existent un petit nombre de balises qui ne nécéssitent pas de balise de fin.

La structure d'un document.

L'ensemble du document est encadré par les balises : <HTML> et </HTML>.

Un document est constitué :

D'une entéte :
délimitée par les balises <head> </head>. Cette balise contient des informations gérales de gestion du document, dont le titre qui sera indiqué sur la fene;tre de l'outil de visualisation.
D'un corps :
délimité par les balises <body> </body>. Contient l'essentiel du document, dont les paragraphes de texte, les titres.
Un document type se présente donc sous la forme :

Les titres.

Les titres sont indiqués par les balises :
  1. <H1> </H1>
  2. <H2> </H2>
  3. <H3> </H3>
  4. <H4> </H4>
  5. <H5> </H5>
suivant leur niveau dans la hiérarchie des titres. < A NAME="paragraphes">

Les paragraphes.

Les balises suivantes permettent de formatter des paragraphes :
<P>
Débute un nouveau paragraphe, séparé du précédent par un espacement vertical.
<BR>
Va a la ligne.
<HR>
Introduit une barre de séparation.
<PRE></PRE>
Délimite une zone qui sera présentée telle que formattée dans le texte HTML. Utile pour présenter des programmmes.
Les possibilités de formattage de paragraphes sont illustrées ci-après :
<H1> Formattage des paragraphes
</H1>
<H2>Une hiérarchie de titres</H2>
Est produite a l'aide des balises. <Hn>
<H3>Eviter des titres trop nombreux</H3>
Il est souvent plus productif d'éclater le document en plusieurs
documents reliés entre eux par des liens hypertexte.
<H3>Structurer le document</H3>
Il faut faire en sorte de faciliter l'orientation du lecteur. En outre un
plan sera bienvenu.
<H2>Séparer par des sauts de paragraphe</H2>
Je vais a la ligne.
<BR>
Cette
nouvelle
ligne n'a pas été séparée par un espace.
<P> Celle-ci l'est. Au passage, on constate que la structuration en
lignes du document d'origine ne compte pas.
<HR>
Ici j'ai séparé par une barre horizontale.

Un paragraphe est justifié a gauche par défaut.

<p align=center>Voici un paragraphe justifié au milieu.
<p align=right>Et voici un paragraphe justifié a droite.

<h2 align=center>Un titre aussi peut etre justifié</h2>
Le titre precedent etait justifié au milieu.
Ce texte HTML produit ceci :

Formattage des paragraphes

Une hiérarchie de titres

Est produite a l'aide des balises. 

Eviter des titres trop nombreux

Il est souvent plus productif d'éclater le document en plusieurs documents reliés entre eux par des liens hypertexte.

Structurer le document

Il faut faire en sorte de faciliter l'orientation du lecteur. En outre un plan sera bienvenu.

Séparer par des sauts de paragraphe

Je vais a la ligne.
Cette nouvelle ligne n'a pas été séparée par un espace.

Celle-ci l'est. Au passage, on constate que la structuration en lignes du document d'origine ne compte pas. 


Ici j'ai séparé par une barre horizontale. Un paragraphe est justifié a gauche par défaut.
Voici un paragraphe justifié au milieu.
Et voici un paragraphe justifié a droite.

Un titre aussi peut etre justifié

Le titre precedent etait justifié au milieu.

Les Listes

Une liste est une suite de paragraphes présentés identiquement, chacun étant signalé par une indentation, un numéro, un titre.

Les listes peuvent etres imbriquées et la structure apparait grace a une indentation.

Divers types de listes de paragraphes indentés existent :

  1. Les listes simples, dont chaque élément est indiqué par une puce. La liste est délimitée par les balises <UL> et </UL>. Chaque élément est préfixé par </LI>.
  2. Les listes numérotées. La liste est délimitée par les balises <OL> et </OL>. Chaque élément est préfixé par </LI>.
  3. Les listes de définitions. La liste est délimitée par les balises <DL> et </DL>. Le titre de chaque élément est préfixé par </DT>, la définition est préfixée par </DT>.
Ces possibilités sont illustrées par le code HTML qui illustre la manière de structurer un développement.

Liste numerotee :

<OL>
<LI> no. 1
<LI> no. 2
<LI> no. 3
</OL>
  1. no. 1
  2. no. 2
  3. no. 3
<OL CONTINUE>
<LI> no. 1
<LI> no. 2
<LI> no. 3
</OL>
  1. no. 1
  2. no. 2
  3. no. 3
<OL START=15>
<LI> no. 1
<LI> no. 2
<LI> no. 3
</OL>
  1. no. 1
  2. no. 2
  3. no. 3
<OL TYPE=A>
<LI> no. 1
<LI> no. 2
<LI> no. 3
</OL>
  1. no. 1
  2. no. 2
  3. no. 3
<OL TYPE=a>
<LI> no. 1
<LI> no. 2
<LI> no. 3
</OL>
  1. no. 1
  2. no. 2
  3. no. 3
<OL TYPE=I>
<LI> no. 1
<LI> no. 2
<LI> no. 3
</OL>
  1. no. 1
  2. no. 2
  3. no. 3
<OL TYPE=i>
<LI> no. 1
<LI> no. 2
<LI> no. 3
</OL>
  1. no. 1
  2. no. 2
  3. no. 3

Listes imbriquées :

Exemple de liste non numérotée avec TYPE


<ul type=circle >
	  <lh id=lang><i>Langages et formats</i><p>
          <li>HTML
	  <li>VRML
	  <li type=square>PDF
	  <li type=disc>JavaScript
	  <li>Java
</ul>

Les listes de définitions

<dl>
<dt>Terme 1<dd>definition du terme 1.
<dt>Terme 2<dd>definition du terme 2.
</dl>
Terme 1
definition du terme 1.
Terme 2
definition du terme 2.

Les liens Hypertexte

Ces liens fournissent un outil de navigation permettant de se déplacer au fil des références. Ils comportent:
  1. Une balise comportant l'indication du document à ouvrir, et de la position dans ce document. Il s'agit de <A HREF="lienURL">.
  2. Une poignée, qui est le texte sur lequel l'utilisateur devra cliquer pour que le lien fasse passer au nouveau document. Il s'agit du texte qui précède la balise de fin </A>
Le lien est donné par une référence URL (Universal Resource Location) qui permet de désigner: Ces possibilités sont illustrées:
  1. Lien vers le fichier "tabmat.html":
  2. <A HREF="tabmat.html">"tabmat.html"</A>
  3. Lien vers le début de ce fichier:
  4. <A HREF="#debut">début de ce fichier </A>

Styles de polices.

et pour les flemmards (déconseillé):

On peut aussi inclure un texte en mode "verbatim", comme suit :

<pre>
<h3>On peut aussi inclure un texte en mode "verbatim", comme suit :</h3>
</pre>

Texte préformaté : la balise PRE

<PRE>
      Jusqu'à présent, lecteur, suivant l'antique usage, 
         Je te disais bonjour à la première page. 
      Mon livre, cette fois, se ferme moins gaiement ; 
         En vérité, ce siècle est un mauvais moment. 
<CREDIT> 
Sonnet au lecteur, Alfred de Musset (1810-1857 ) 
</CREDIT> 
</PRE>
      Jusqu'à présent, lecteur, suivant l'antique usage, 
         Je te disais bonjour à la première page. 
      Mon livre, cette fois, se ferme moins gaiement ; 
         En vérité, ce siècle est un mauvais moment. 
 
Sonnet au lecteur, Alfred de Musset (1810-1857 ) 
 

Les Remarques: la balise NOTE

<NOTE CLASS=WARNING>
En raison du changement de notre système de gestion informatique des abonnements, votre numéro d'abonné vient d'être modifié. Vous trouverez désormais ce nouveau numéro sur toutes les étiquettes d'expédition de votre journal.
</NOTE>
En raison du changement de notre système de gestion informatique des abonnements, votre numéro d'abonné vient d'être modifié. Vous trouverez désormais ce nouveau numéro sur toutes les étiquettes d'expédition de votre journal.

Les clignotements

La balise <blink> permet de faire clignoter un texte :
<BLINK>Ca clignote !!!</BLINK>
Ca clignote !!!

Taille des caracteres

La taille est definie par la balise font avec l'attribut <size>. Elle va de 1 a 7. 3 est la valeur par defaut.
Elle va de <FONT SIZE=1>1 </FONT>a <FONT SIZE=+7>7</FONT>.

Couleurs

Balise <font> avec attribut color : Couleur.
<FONT SIZE=+5 COLOR=red>C</FONT>
C
<FONT COLOR="#0000FF">Ouais !!!</FONT>
Ouais !!! Le code correspont à la proportion de chacune des couleurs rouge, vert et bleu, chacune allant de 0 à 255. Ces valeurs sont exprimées en hexadécimal (comme l'indique le signe "#").
Voici quelque
couleurs et leur code correspondant.


Les lignes peuvent être inserées avec la balise <HR> :
On peut définir la longueur ou l'épaisseur :
<HR WIDTH="60%">

<HR SIZE=5>

Note de bas de page

Une note peut etre inseree avec la balise <note>. Les attributs utilisés sont notecaution et warning. Une note de bas de page peut être inseree avec la balise <fn> : Ceci est une note de bas de page.


<br><a href="#rtn1" name="note1">note de bas de page </a>
<i>Nous sommes ici dans la zone de texte de la note simulée dans une page HTML


Une citation est inseree avec la balise <blockquote> :
<blockquote>
<p>Wall Street adore les licenciements, sauf a Wall Street.
<credit>Ray BRADY, CBS News
</blockquote>
Wall Street adore les licenciements, sauf a Wall Street. Ray BRADY, CBS News
Et voici une adresse, avec la balise <address> :
<ADDRESS>
Mathieu DECORE<br>
1976 Chez Moi<br>
19 11 zecastorville
</ADDRESS>
Mathieu DECORE

1976 Chez Moi
19 11 zecastorville

Inclure des Tablaux

<TABLE options>
<TR ALIGN="position"><td>élément 1<td>élément 2<td>...
 </TABLE>
<TABLE border=1 cellspacing=0 cellpadding=6>
  <tr align=center><td>A<td>B<td>C<td>D<td>E
</TABLE>
Sans bordure :
<TABLE>
  <tr align=center><td>A<td>B<td>C<td>D<td>E
</TABLE>
A B C D
Avec une bordure normale :

<TH> permet d'insérer un titre en gras. Pour le centrer, voir plus loin.

<TABLE BORDER>
<TH>Mon tableau</TH>
<TR ALIGN=CENTER>
<TD>A</TD>

<TD>B</TD>

<TD>C</TD>

<TD>D</TD>

<TD>E </TD>
</TR>
</TABLE>
Mon tableau
A B C D

Avec une bordure plus épaisse :

<TABLE BORDER=6>
<TR ALIGN=CENTER>
<TD>A</TD>

<TD>B</TD>

<TD>C</TD>

<TD>D</TD>

<TD>E </TD>
</TR>
</TABLE>
A B C D

Avec plus d'espace :


<TABLE BORDER WIDTH="100%">
<TR ALIGN=CENTER>
<TD WIDTH="50%">A</TD>

<TD WIDTH="20%">B</TD>

<TD WIDTH="10%">C</TD>

<TD WIDTH="10%">D</TD>

<TD WIDTH="10%">E </TD>
</TR>
</TABLE>

A B C D

<TABLE BORDER WIDTH="70%">
<TR ALIGN=CENTER>
<TD WIDTH="20%">A</TD>

<TD WIDTH="30%">B</TD>

<TD WIDTH="10%">C</TD>

<TD WIDTH="10%">D</TD>

<TD>E </TD>
</TR>
</TABLE>

A B C D

Avec encore plus d'espace :

CELLSPACING désigne l'espace entre les bordures de chaque cellule et CELLPADDING l'espace entre le texte et la bordure de la cellule.

<TABLE BORDER CELLSPACING=20 CELLPADDING=2>
<TR ALIGN=CENTER>
<TD>A</TD>

<TD>B</TD>

<TD>C</TD>

<TD>D</TD>

<TD>E </TD>
</TR>
</TABLE>
A B C D

Avec des cellules justifiées


<TABLE BORDER WIDTH="100%">
<TR ALIGN=CENTER>
<TD WIDTH="20%" ALIGN="center">A</TD>

<TD WIDTH="30%" ALIGN="left">B</TD>

<TD WIDTH="30%" ALIGN="right">C</TD>

<TD WIDTH="10%">D</TD>

<TD>E </TD>
</TR>
</TABLE>

A B C D

Avec des colones fusionnées :

COLSPAN permet de préciser le nombre de colonnes sur lesquelles doit s'étendre une cellule.

<TABLE BORDER>
Mon tableau
<TR ALIGN=CENTER>
<TD>A</TD>

<TD>B</TD>

<TD>C</TD>

<TD>D</TD>

<TD>E </TD>
</TR>
</TABLE>
Mon tableau
A B C D

Avec des lignes fusionnées :

ROWSPAN permet de préciser le nombre de lignes sur lesquelles doit s'étendre une cellule.


<TABLE BORDER=8 WIDTH="100%" CELLSPACING=8 CELLPADDING=12>
    <TH COLSPAN=3>
        Une sélection de nos meilleures offres
    </TH>
    <TR>
        <TD WIDTH=70%">
           Casablanca
        </TD>
        <TD ALIGN="center" COLSPAN=2>
           En rupture
        </TD>
    </TR>
    <TR>
        <TD>
           Autant en emporte le vent
        </TD>
        <TD WIDTH ="15%" ALIGN="center" ROWSPAN=3>
           VHS
        </TD>
        <TD WIDTH ="15%" ALIGN="right">
           145.- Francs
        </TD>
    </TR>
    <TR>
        <TD>
           Danse avec les loups
        </TD>
        <TD ALIGN="right">
           105.- Francs
        </TD>
    </TR>
    <TR>
        <TD>
           Etre ou ne pas être (Version originale sous la 
           direction d'Ernst Lubitsch)
        </TD>
        <TD ALIGN="right">
           95.- Francs
        </TD>
    </TR>
</TABLE>

Une sélection de nos meilleures offres
Casablanca En rupture
Autant en emporte le vent VHS 145.- Francs
Danse avec les loups 105.- Francs
Etre ou ne pas être (Version originale sous la direction d'Ernst Lubitsch) 95.- Francs

Avec plusieurs lignes :

<TABLE BORDER CELLSPACING=0 CELLPADDING=6 >
<TR ALIGN=CENTER>
<TD></TD>

<TD></TD>

<TD>A</TD>

<TD>B</TD>

<TD>C</TD>
</TR>

<TR ALIGN=CENTER>
<TD COLSPAN="2" ROWSPAN="2">1</TD>

<TD>D</TD>

<TD>E</TD>

<TD>F</TD>
</TR>

<TR ALIGN=CENTER>
<TD>G</TD>

<TD>H</TD>

<TD>I</TD>
</TR>
</TABLE>
A B C
1 D E F
G H I

<CENTER>
<TABLE BORDER>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Moyenne
    <TH ROWSPAN=2>Autre<BR>catégories<TH>Divers
<TR><TH>Taille<TH>Poids
<TR><TH ALIGN=LEFT>hommes<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>femmes<TD>1.7<TD>0.002<TD><TD>Bien
<CAPTION> 
Un exemple de tableau contenant des cellules multi colonnes/lignes
</CAPTION>
</TABLE>
</CENTER>

Moyenne Autre
catégories
Divers
TaillePoids
hommes1.90.003
femmes1.70.002Bien
Un exemple de tableau contenant des cellules multi colonnes/lignes

Dans l'exemple qui suit, il y a des cellules de tableau se chevauchant (c'est pas bien). Cela se produit a cause du

rowspan=2
suivit du
colspan=2
(deux lignes et la ligne suivante deux colones).
<TABLE BORDER CELLPADDING=10>
<TR><TD rowspan=2>Cellule 1<TD>Cellule 2<TD>Cellule 3<TD>Cellule 4<TD>Cellule 5
<TR><TD rowspan=2>Cellule 6
<TR><TD colspan=2>Cellule 7<TD>Cellule 8
</TABLE>
Cellule 1Cellule 2Cellule 3Cellule 4Cellule 5
Cellule 6
Cellule 7Cellule 8

On peut même inclure un tableau dans un autre tableau :


           <!-- Tableau extérieur -->

<TABLE BORDER=1 CELLSPACING="10" CELLPADDING="5" WIDTH="400">
 <TR>
  <TH NOWRAP>Colonne 1</TH>
  <TH>Colonne 2</TH>
  <TH>Colonne 3</TH>
  <TH>Colonne 4</TH>
 <TR>
  <TD NOWRAP COLSPAN=2>Ici, j'ai besoin d'espace en longueur
  <TD NOWRAP>Cellule normale
  <TD ROWSPAN=3 ALIGN="center" VALIGN="middle"><FONT SIZE=+1>
     Ici, j'ai besoin de pas mal de hauteur</FONT><BR><BR><BR>
     <IMG SRC="images/plume.gif">
 <TR>
  <TD COLSPAN=2>

           <!-- Tableau intérieur -->

   <TABLE BORDER=1 CELLSPACING="1" CELLPADDING="2">
    <TR>
     <TH NOWRAP>C 1</TH>
     <TH>C 2</TH>
     <TH>C 3</TH>
    <TR>
   <TD> 
   <TD COLSPAN=2 ALIGN="center">Ici, j'ai la place d'aboyer
       <IMG SRC="images/chien.gif">
    <TR>
     <TD> 
     <TD> 
     <TD> 
   </TABLE>

           <!-- Fin du Tableau intérieur -->

  <TD VALIGN="middle" ALIGN="center">
    <IMG SRC="images/plume.gif" HEIGHT="70">
</TABLE>

           <!-- Fin du Tableau extérieur -->

Colonne 1 Colonne 2 Colonne 3 Colonne 4
Ici, j'ai besoin d'espace en longueur Cellule normale Ici, j'ai besoin de pas mal de hauteur


C 1 C 2 C 3
  Ici, j'ai la place d'aboyer
     


Inclure des Images

Il est également possible d'inclure des images et de définir un fond de page. Pour l'inclusion d'image, la balise est:
<IMG SRC="URL" ALIGN=parametre>
Dans lequel:
<IMG SRC="images/hanoi.gif" >

Attribut ALIGN de la balise IMG


Exemple d'alignement d'image obtenu avec l'attribut ALIGN=TOP

Exemple d'alignement d'image obtenu avec l'attribut ALIGN=BOTTOM

Exemple d'alignement d'image obtenu avec l'attribut ALIGN=CENTER

Exemple d'alignement d'image obtenu avec l'attribut ALIGN=LEFT

Exemple d'alignement d'image obtenu avec l'attribut ALIGN=RIGHT

On peut spécifier la taille de l'image avec HEIGHTpour la hauteur et WIDTH pour la largeur.

On peut spécifier l'espace vertical à laisser avec VSPACE et horizontal avec HSPACE :


<IMG SRC="images/air.gif" VSPACE=50 HSPACE=50 WIDTH=50 HEIGHT=50>

On peut aussi afficher seulement une imagette (de taille réduite) qui sera un lien vers l'image de taille réelle.


<a href=images/MINIVNUS.JPG> <img src=images/MINIVNUS.GIF></a>
<a href="images/MINIVNUS.JPG"> cliquer ici</a>

En cliquant sur l'imagette vous obtiendrez une vue agrandie du tableau (format JPEG)

Vous pouvez aussi cliquer ici.

Image d'attente avec lowsrc

Si le chargement d'une image est long, on peut en mettre une plus petite qui sera remplacée par l'image définitive :
<IMG SRC="images/pharma2.gif" LOWSRC="images/pharma1.gif" WIDTH=301 HEIGHT=110>

On peut aussi donner un nom à l'image qui sera affiché en attendant que l'image se charge, ou lorsque le pointeur de la souris se trouve sur l'image. Ce nom est définit avec ALT.

<IMG SRC="images/pharma2.gif" LOWSRC="images/pharma1.gif" WIDTH=301 HEIGHT=110
     ALT="J'aime ma pharmacie">
J'aime ma pharmacie

On peut cliquer sur une image pour lancer un URL :

Le premier document HTML <A HREF="premier.html"><IMG SRC="images/air.gif" WIDTH=50 HEIGHT=50></A>

Le premier document HTML

La bordure autour de l'image indique qu'un lien se cache derrière cette image. On peut supprimer cette bordure ou la rendre plus épaisse :

<A HREF="premier.html"><IMG SRC="images/air.gif" WIDTH=50 HEIGHT=50 BORDER=0></A>

<A HREF="premier.html"><IMG SRC="images/air.gif" WIDTH=50 HEIGHT=50 BORDER=6></A>

On peut ainsi créer un menu de navigation avec deux versions :

la première en grisé, pour les boutons inaccessibles :

Page précédenteHOMENiveau supérieur
Début de la pageFin de la pagePage suivante

et la seconde pour les boutons accessibles :

Page précédenteHOMENiveau supérieur
Début de la pageFin de la pagePage suivante

On peut maintenant combiner les boutons suivants la page :

Page précédenteHOMENiveau supérieur
Début de la pageFin de la pagePage suivante

Noter qu'il faut écrire sur la même ligne toute cette syntaxe, sinon les sauts de lignes seront interprétés comme des espaces, qui apparaîtront entre les boutons. Pour rendre la syntaxe plus lisible, une solution consisterait à mettre des sauts de ligne dans les tags...

Pour des images se chargeant avec un temps trop long, utiliser des images "entrelacées" :

Une image entrelacée

Les images réactives

<IMG SRC="images/mapimg.gif" USEMAP="#Face">
<MAP NAME="Face">
   <!Text BUTTON>
   <AREA SHAPE="rect" HREF="rectangl.htm" COORDS="148,17,248,71">
   <!Triangle BUTTON>
   <AREA SHAPE="poly" HREF="triangle.htm" COORDS="70,96,192,85,164,147">
   <!FACE>
   <AREA SHAPE="circle" HREF="cercle.htm" COORDS="70,95,42">
</MAP>

Les gifs animés

Pour insérer un gif animé, on fait comme pour image :
<IMG SRC="images/cocciok.gif" WIDTH=216 HEIGHT=29>

Un petit diaporama

L'exemple qui suit montre un petit diaporama : Le fichier diaporama.html contient :

<HTML>
<HEAD>
<TITLE>Fleur1</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="3; URL=fleur2.html>
</HEAD>
<BODY>
<IMG SRC="hortensias.jpg" ALIGN=center>
</BODY>
</HTML>

La ligne :
<META HTTP-EQUIV="refresh" CONTENT="3; URL=fleur2.htm">
spécifie que le fichier fleur2.html doit être chargé au bout de 3 secondes. Ce fichier fleur2.html contient :

<HTML>
<HEAD>
<TITLE>Fleur 2</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="3; URL=fleur3.html">
</HEAD>
<BODY>
<IMG SRC="rose.jpg" ALIGN=center>
</BODY>
</HTML>

On voit que ce fichier charge à son tour le fichier fleur3.html au bout de 3 secondes :

<HTML>
<HEAD>
<TITLE>Fleur 3</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="3; URL=diaporama.html">
</HEAD>
<BODY>
<IMG SRC="images/cactus.jpg" ALIGN=center>
</BODY>
</HTML>

qui à son tour charge le fichier du début du diaporama, le fichier diaporama.html. La boucle est bouclée, et le diaporama se poursuivra tant qu'aucune autre page n'est chargée.

Exemple de mise en page d'images à l'aide de tableaux


<TABLE WIDTH="100%" CELLPADDING=8>
<TR>
<TD WIDTH=80>
    <IMG SRC="images/air.gif">
</TD>
<TD WIDTH="80%" ALIGN="center">
    Ce texte est centré et mis à droite de l'image grâce a un tableau dont on n'a pas mis les bordures. Ainsi, ni vu, ni connu !
</TD>
</TR>
</TABLE>

Ce texte est centré et mis à droite de l'image grâce a un tableau dont on n'a pas mis les bordures. Ainsi, ni vu, ni connu !

Mise en page sur plusieurs colonnes


<font size=+2 >L'appuyer</font>
<multicol cols=3 gutter=16>

<font size=6>C'</font>est un mouvement par lequel le cheval se transporte
...
de la marche. <br>

L'appuyer oblige le cheval à croiser ces postérieurs davantage
...
<hr><i>Manuel d'équitation, instruction du cavalier, emploi et
dressage du cheval<i>
</multicol>

L'appuyer C'est un mouvement par lequel le cheval se transporte parallèlement à lui même, l'avant- main et l'arrière-main suivant deux pistes distinctes, la tête et l'encolure précédent le reste du corps dans la direction de la marche.
L'appuyer oblige le cheval à croiser ces postérieurs davantage que l'épaule en dedans et a pour effet utile de rapprocher l'une de l'autre les pistes des deux latéraux, donc de diminuer le polygone de sustentation.
Pour préparer le cheval à l'appuyer : à droite par exemple : le mettre sur un grand cercle à main droite, puis enrouler une spirale, comme pour rapprocher le cheval du centre en attirant d'abord le bout du nez vers le centre avec la rêne droite, puis en poussant les épaules avec la rêne gauche; pousser ensuite les hanches vers le centre avec la jambe gauche pour les remettre derrière les épaules, la jambe droite entretenant l'impulsion. Veillez à ce que le cheval continue à avancer et à ce que le latéral droit gagne du terrain vers l'intérieur.


Manuel d'équitation, instruction du cavalier, emploi et dressage du cheval

Pour que le texte ne coule pas autour de l'image...

Il faut utiliser la balise <br clear=right>, ce qui a pour effet d'empecher le texte de couler autour d'une image située sur la gauche (left), sur la droite (right), ou entre deux images, l'une située sur la gauche et l'autre située sur la droite de la page (all).

<multicol cols=2>
<font size=6>C'</font>est un mouvement par lequel le cheval se transporte
...
L'appuyer oblige le cheval à croiser ces postérieurs davantage
...
a pour effet 
<img src="images/dressage.gif" align="right"><br clear=right>
utile de rapprocher l'une de l'autre les pistes des deux
...
<hr><i>Manuel d'équitation, instruction du cavalier, emploi et dressage du cheval<i>
</multicol>

C'est un mouvement par lequel le cheval se transporte parallèlement à lui même, l'avant- main et l'arrière-main suivant deux pistes distinctes, la tête et l'encolure précédent le reste du corps dans la direction de la marche.
L'appuyer oblige le cheval à croiser ces postérieurs davantage que l'épaule en dedans et a pour effet
utile de rapprocher l'une de l'autre les pistes des deux latéraux, donc de diminuer le polygone de sustentation. Pour préparer le cheval à l'appuyer : à droite par exemple : le mettre sur un grand cercle à main droite, puis enrouler une spirale, comme pour rapprocher le cheval du centre en attirant d'abord le bout du nez vers le centre avec la rêne droite, puis en poussant les épaules avec la rêne gauche; pousser ensuite les hanches vers le centre avec la jambe gauche pour les remettre derrière les épaules, la jambe droite entretenant l'impulsion. Veillez à ce que le cheval continue à avancer et à ce que le latéral droit gagne du terrain vers l'intérieur.


Manuel d'équitation, instruction du cavalier, emploi et dressage du cheval

Exemple de mise en page de formulaires à l'aide de tableaux

<FORM>
<CENTER>
<TABLE> 
<TR halign=baseline>
    <TD align=right>  nom: <TD><input name="nom" size=18><br>
<TR halign=baseline>
    <TD align=right>Numéro de carte: <TD><input name="cardnum" size=18>
<TR halign=baseline>
    <TD align=right>expire: <TD><input name="expires-month" size=2>/
                     <input name="expires-year" size=2> 
<TR halign=baseline>
    <TD align=right>téléphone: <TD> <input name="phone" size=18>
</TABLE>
</CENTER>
</FORM>
nom:
Numéro de carte:
expire: /
téléphone:

Exemple de questionnaire


<H2 align=center>Exemple de questionnaire</H2>
<hr>
 
<P>Veuillez remplir ce questionnaire:
<FORM METHOD=post  onSubmit="FormProc()">
   <P>Nom: <input name="name" size="48">
   <P>Sexe: <input name="sex" type=radio value="male" CHECKED> M
            <input name="sex"female" type=radio value="female">F
   <P>Age: <input name="age" value="cat1" type=radio> 15-20
           <input name="age" value="cat2" type=radio CHECKED> 20-30
                   <input name="age" value="cat3" type=radio> Autre
   <P>Villes dans lesquelles vous avez résidé:
   <UL PLAIN>
      <LI><input name="city" type=checkbox value="Paris"> 
          Paris
      <LI><input name="city" type=checkbox value="Casa"> 
          Casablanca
      <LI>Autres 
          <textarea name="other" cols=48 rows=4></textarea>
   </UL>
   <HR><CENTER>
      <INPUT TYPE=SUBMIT Value="Valider le questionnaire"> 
      <INPUT TYPE=RESET  Value="Réinitialiser">
   </CENTER><HR>
</FORM>

Veuillez remplir ce questionnaire:

Nom:

Sexe: M F

Age: 15-20 20-30 Autre

Villes dans lesquelles vous avez résidé:


Noter qu'au lieu de

<FORM METHOD=post onSubmit="FormProc()">
on aurait pu mettre :
<FORM METHOD=post ACTION="mailto:moi@chezmoi.fr">
pour envoyer le résultat du formulaire par mail. Le résultat arrive sous la forme name=Philippe+Durand si on a entré Philippe Durand dans la case Nom.

Les differents champs d'un formulaire



<FORM METHOD=POST 
      ACTION=http://www-syntim.inria.fr/htbin/air/parse.pl

      NAME=Formulaire>
<Table CELLPADDING=5>
<TR><TD>Champ de saisie 
    <TD><INPUT type=text SIZE=10 MAXLENGTH=10 Name=SaisieText 
               Value=0>
<TR><TD COLSPAN=2> <hr>
<TR><TD>Champ de saisie multiligne: 
    <TD><textarea name="TextArea" COLS=30 ROWS=6></textarea>
<TR><TD COLSPAN=2> <hr>
<TR><TD>Choix unique: <TD>
    <SELECT Name=Selection>
         <OPTION VALUE=Option1> Sélection1
         <OPTION VALUE=Option2 SELECTED> Sélection2
         <OPTION VALUE=Option3> Sélection3
    </SELECT>
<TR><TD COLSPAN=2> <hr>
<TR><TD>Choix multiple:<TD>
    <SELECT MULTIPLE Name=SelectionMultiple>
        <OPTION VALUE=Option1> Option1 
        <OPTION VALUE=Option2 SELECTED> Option2
        <OPTION VALUE=Option3> Option3
    </SELECT>
<TR><TD COLSPAN=2> <hr>
<TR><TD>RadioButton:<TD>
    <INPUT type=radio Name=Radio Value=B1>Bouton 1 
    <INPUT type=radio Name=Radio Value=B2>Bouton 2
    <INPUT type=radio Name=Radio Value=B3 CHECKED>Bouton 3 ...
<TR><TD COLSPAN=2> <hr>
<TR><TD>CheckBoxes:<TD>
    <INPUT type=checkbox Name=CheckBox1 Value=B1> Bouton 1 
    <INPUT type=checkbox Name=CheckBox2 Value=B2> Bouton 2 
    <INPUT type=checkbox Name=CheckBox3 Value=B3> Bouton 3
</TABLE>
</FORM>
Champ de saisie

Champ de saisie multiligne:

Choix unique:

Choix multiple:

RadioButton: Bouton 1 Bouton 2 Bouton 3 ...

CheckBoxes: Bouton 1 Bouton 2 Bouton 3
On peut aussi mettre un formulaire avec champ de saisie de type password :

<FORM METHOD=POST  NAME=Formulaire>
<Table CELLPADDING=5>
<TR><TD>Champ de saisie 
    <TD><INPUT type=password SIZE=10 MAXLENGTH=10 Name=SaisiePass
               Value=0>
</TABLE>
</FORM>

Champ de saisie

Insertion d'un fichier dans un formulaire.


<FORM  ENCTYPE="multipart/form-data" METHOD=POST onSubmit="FormProc()">
<CENTER><TABLE>
<TR><TD NOWRAP>Source file 1: 
    <TD> <INPUT TYPE=file SIZE=30 NAME=srcfile ACCEPT="*.java">
<TR><TD NOWRAP>Source file 2: 
    <TD> <INPUT TYPE=file SIZE=30 NAME=srcfile ACCEPT="*.java">
<TR><TD NOWRAP>Source file 3: 
    <TD> <INPUT TYPE=file SIZE=30 NAME=srcfile ACCEPT="*.java">
<TR><TD NOWRAP>Display file: 
    <TD><INPUT TYPE=file SIZE=30 NAME=htmlfile ACCEPT="*.html">
<TR><TD NOWRAP>Image file:   
    <TD><INPUT TYPE=file SIZE=30 NAME=imgfile  ACCEPT="*.gif">
</TABLE></CENTER>
<hr align=center width=100>
<b>Compile Options: </b>
<TABLE>
<TR><TD>
<DL>
<DD><INPUT TYPE=checkbox VALUE="-g" NAME=opt>       -g
<DD><INPUT TYPE=checkbox VALUE="-O" NAME=opt>       -O
<DD><INPUT TYPE=checkbox VALUE="-depend" NAME=opt>  -depend
<DD><INPUT TYPE=checkbox VALUE="-nowarn" NAME=opt>  -nowarn
<DD><INPUT TYPE=checkbox VALUE="-verbose" NAME=opt> -verbose
</DL>
</TABLE>
<hr align=center width=100>
<CENTER><TABLE>
<TR><TD><INPUT Type=submit Value="Compile"> 
    <TD><INPUT Type=reset Value="Reset">
</TABLE></CENTER> 
</FORM>
</CENTER>
Source file 1:
Source file 2:
Source file 3:
Display file:
Image file:

Compile Options:
-g
-O
-depend
-nowarn
-verbose

L'exemple qui suit montre comment mettre des bouttons qui facilitent la navigation. Ils pourront par exemple être présents au bas de chaque page, ou dans une frame en bas (voir plus loin).

<form>
<center><table>
<TR> <TD><input type=button Value=" Table des Matières   "
                onClick="parent.main.location='tabdemat.htm'">
     <TD><input type=button Value="<<    Backward      <<"
                onClick="parent.main.history.back()">
         <TD><input type=button Value=">>    Forward       >>"
                onClick="parent.main.history.forward()">
     <TD><input type=button Value="    Page d'accueil    "
        onClick="parent.main.location='welcome.htm'">

</table></center>
</form>

Les Frames

Les Frames permettent de créer des fenêtres dans d'autre fenêtres. La syntaxe est la suivante :

<FRAMESET ROWS="taille1, taille2..."> pour diviser en lignes, et
<FRAMESET COLS="taille1, taille2..."> pour diviser en colonnes.

taille1, taille2... sont les tailles des fenêtres en pourcentage (par exemple "20%, 80%") ou en pixels (par exemple "200, 100"). Dans ce dernier cas, il peut être intéressant de ne spécifier que certaines tailles, les autres pouvant être complétées autonatiquement suivant la taille de l'écran :

<FRAMESET COLS="200,*,100">
La seconde fenêtre aura la taille qui permettra de remplir la fenêtre de navigation.

Il reste ensuite à insérer les fichiers (avec <FRAME SRC="fichier">) et le tour est joué. Voici les attributs de la balise <FRAME> :

<FRAME SRC="fichier.html" OPTION>

OPTION peut être :

NORESIZE
pour empecher tout redimensionnement des fenêtres.

SCROLLING="yes"
pour mettre une barre d'ascenseur et SCROLLING="no" pour ne pas mettre de barre d'ascenseur, et ce même si c'est pas zoli.

L'exemple qui suit montre comment partitionner une fenetre en plusieurs. Le fichier partitio.htm contient :

<head>
<title> Partitionnement d'une fenêtre </title>
</head>

<FRAMESET COLS="50%,50%"> 
  <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="cell1.htm"> 
    <FRAME SRC="cell5.htm"> 
  </FRAMESET>
  <FRAMESET ROWS="33%,33%,33%">
    <FRAME SRC="cell2.htm">
    <FRAME SRC="cell3.htm">
    <FRAME SRC="cell4.htm">
  </FRAMESET>
</FRAMESET>
et les fichiers cell1.htm...cell5.htm contiennent :
<head>
<title> Cell 1 </title>
</head>
<body>
<h3 align=center> Cellule 1
</h3>
</body>

Ce présent document illustre comment on peut actionner un lien d'une Frame vers une autre Frame :

<head>
<title>HTML et JavaScript  La création de documents HTML interactifs </title>
</head>

<frameset ROWS="87%,13%">
	<frameset COLS="25%,75%">
		<frame 
              src="tabmat.html"
              MARGINHEIGHT=0
              MARGINWIDTH=0
              name="ToC">
		<frame 
              src="simple.html"
              name="main" >
	</frameset>
	<frame
          src="navig.htm" 
          name=Nav
          MARGINHEIGHT=0
          MARGINWIDTH=0
          SCROLLING = "no">
</frameset>

<noframes>

<center>
	Ce cours contient des documents HTML utilisant des 
éléments tels que les frames et le langage JavaScript <br>
	Nous vous conseillons de vous procurer le browser netscape2
aux adresses suivantes:
<ul>
<lh> Sites FTP assez performants: 
	<li><a href="ftp://ftp.ibp.fr/"> Institut Blaise Pascal </a>
	<li><a href="ftp://ftp.luth.se/pub/infosystems/www/netscape/"> Site en suede </a>
	<li><a href="ftp://ftp.sunet.se/pub/www/Netscape/2.0/"> SunNet  en suede </a>
</ul>
<ul>
<lh> Site officiel de Netscape:
	<li><a href="ftp://ftp.netscape.com"> Netscape Corp. </a>
</ul>

</noframes>
Le fichier tabdemat.htm contient :
<html>
  <head>
    <title></title>
  </head>
<base target="main">
  <body>

<hr></center>
<b align=center> <font size=+1>T</font>able des <font size=+1>M</font>atières</b>
<BR><BR>
<img src=images/redball.gif halign=baseline>
<a href=simple.html> Le HTML</a><p>
    <a href="simple.html#balises">Les balises</a><p>
    <a href="simple.html#titres">Les titres</a><p>
    <a href="simple.html#listes">Les listes</a><p>
    <a href="simple.html#liens hypertexte">Les liens hypertexte</a><p>

Plusieurs lignes suprimées...

Comme l'indique la ligne

<base target="main">
chaque action entreprise dans le fichier tabmat.html sera effectuée dans le fichier ayant le nom "name", ce qui correspond au fichier simple.html comme l'indique la ligne :
SRC="simple.html" NAME="main"
dans le fichier default.html (celui qui s'occupe de charger toutes les Frames). On peut aussi préciser la cible dans l'URL :
<A HREF="simple.html#balises" TARGET="main">Les balises</a><p>

Il reste un problème : si le navigateur ne peut charger les Frames, il faut afficher un texte l'indiquant et proposant une solution de rechange. Pour cela il y a deux solutions :

  1. On insère un message entre les balises <NOFRAME> et </NOFRAME>.
  2. On insère un message entre les balises <BODY> et </BODY>>, qui pouront apparaître à la suite de la définition des Frames.

Les feuilles de style

Les feuilles de style permettent de faire une mise en page soignée, comme le ferait un éditeur. Par exemple, pour afficher une image avec une marge à gauche de 40 pixels, utiliser l'instruction MARGIN-LEFT :


<P>Un bon nombre de plantes supportent aisément une plantation en 
pleine terre et arrivent à passer l'hiver dans de bonnes 
conditions. Les rosiers, par exemple, sont réputés pour leur 
robustesse.
<HR>
</P>

<DIV STYLE="MARGIN-LEFT:40">
<IMG SRC="images/cactus.jpg" ALIGN="left">
Mais ce n'est pas le cas pour les cactus, par exemple, qui 
supportent fort bien la sécheresse mais que des gelées pourraient 
mettre à mal. 
<BR>
C'est pourquoi, si les sortir pendant l'été ne pourra leur faire 
que du bien, il ne faudra pas oublier de les rentrer sous abri dès 
que les premières gelées risqueraient de se produire et même 
avant, de préférence.
<HR>
</DIV>

<P>
Quand aux arbres et aux arbustes, en dehors de spécimens méditerranéens typés
comme le mimosa, les citronniers ou les palmiers, il résistent bien, en
général, aux faibles températures, l'essentiel étant de ne pas les exposer
dans un courant d'air.
</P>
<HR>

Un bon nombre de plantes supportent aisément une plantation en pleine terre et arrivent à passer l'hiver dans de bonnes conditions. Les rosiers, par exemple, sont réputés pour leur robustesse.


Mais ce n'est pas le cas pour les cactus, par exemple, qui supportent fort bien la sécheresse mais que des gelées pourraient mettre à mal.
C'est pourquoi, si les sortir pendant l'été ne pourra leur faire que du bien, il ne faudra pas oublier de les rentrer sous abri dès que les premières gelées risqueraient de se produire et même avant, de préférence.

Quand aux arbres et aux arbustes, en dehors de spécimens méditerranéens typés comme le mimosa, les citronniers ou les palmiers, il résistent bien, en général, aux faibles températures, l'essentiel étant de ne pas les exposer dans un courant d'air.


Un autre
exemple montre comment les conflits se résolvent :

<HTML>
<HEAD>
<TITLE>Conflits</TITLE>

<STYLE TYPE="text/css">
 BODY {color:maroon; font-family:courier new; font-size:14pt}
 H2   {color:blue; font-family:arial}
 I    {color:green; font-family: brush}
</STYLE>

<LINK TYPE="txt/css" REL=stylesheet HREF="monstyle.css">

</HEAD>

<BODY>
<H2>C'était pendant <I>l'horreur</I> d'une profonde nuit...</H2>
<H2>Ma mère 
  <I STYLE="color:red; 
     font-family:stensil; 
     font-style:normal">
   Jézabel</I>, devant moi s'est montrée</H2>
Comme à l'heure de sa mort, <I>pompeusement</I> parée.
</BODY>
</HTML>

Blocs, marges et bordures


<HTML>

<HEAD>

<STYLE TYPE="text/css">
  P {background-color: yellow; 
     text-align: justify; 
     border-color: red; 
     border-width: 1; 
     border-style: solid}
 .signature { font-style: italic;
              text-align: right}
  P.a {margin: 2em}
  P.b {padding: 2em}
</STYLE>
</HEAD>
<BODY>
<P>M. Vernet n'était pas un pêcheur à embarras, un pêcheur savant, 
vaniteux, bavard, insupportable, il n'avait point de costume 
spécial, d'engins coûteux et inutiles, et la veille de l'ouverture 
ne lui donnait pas la fièvre.
<BR><SPAN CLASS="signature">Histoires naturelles, Jules Renard</SPAN>
</P>
<P CLASS="a">M. Vernet n'était pas un pêcheur à embarras, un 
pêcheur savant, vaniteux, bavard, insupportable, il n'avait point 
de costume spécial, d'engins coûteux et inutiles, et la veille de 
l'ouverture ne lui donnait pas la fièvre.
<BR><SPAN CLASS="signature">Histoires naturelles, Jules Renard</SPAN>
</P>

<P CLASS="b">M. Vernet n'était pas un pêcheur à embarras, un 
pêcheur savant, vaniteux, bavard, insupportable, il n'avait point 
de costume spécial, d'engins coûteux et inutiles, et la veille de 
l'ouverture ne lui donnait pas la fièvre.
<BR><SPAN CLASS="signature">Histoires naturelles, Jules Renard</SPAN>
</P>

</BODY>
</HTML>

Voici le résultat.

Le dynamisme des couches (Layers)

Premier exemple :


<script>

function test(mode){
    switch (mode) {
        case "by" : document.layers["couche_P"].layers["couche_C"].moveBy(25,25);
        break;
        case "to" : document.layers["couche_P"].layers["couche_C"].moveTo(25,25);
	break;
	case "abs" : document.layers["couche_P"].layers["couche_C"].moveToAbsolute(25,25)
	break;
	}
}

</script>

<form><input type=button onClick=test("by") value=moveBy>
<input type=button onClick=test("to") value=moveTo>
<input type=button onClick=test("abs") value=moveToAbsolute></form>

<layer id=couche_P top=200 left=100 width=400 height=380 bgcolor=red>

<h1>couche_P <layer id=couche_C top=150 left=150 width=160 height=160 bgcolor=blue>
<h1>couche_C
</layer>
</layer>

Voici le
résultat.

Second exemple :


<SCRIPT>

  function fuite() {
            i++;
            if (i > 6) return;
            document.bloc1.left += 10;
            document.bloc1.top += 10;
            setTimeout("fuite()",50);
  }
            
</SCRIPT></HEAD>
<BODY>
<LAYER ID=bloc1 TOP=10px LEFT=40px onMouseOver="i=0;fuite()">
<H3>Vous n'arriverez jamais<BR>à cliquer sur ce texte !</H3>
</LAYER>

Voici le résultat.

Exemple d'application des couches : la création d'onglets

Le premier exemple montre comment créer facilement des onglets.

<style type=text/javascript>
tags.P.marginTop = 10; tags.P.marginLeft = 10;
tags.P.marginbottom = 10; tags.P.marginRight = 10;
</style>

<!-- creation des onglets -->
<b>
<layer id=fx1 bgcolor=#99ffff WIDTH=50 height=20 left=50 
top=50 onFocus=f1.zIndex=0>
<center>fiche1</center>
</layer>
<layer id=fx2 bgcolor=#ff9999  width=50 height=20 left=100
top=50 onFocus=f2.zIndex=0>
<center>fiche 2</center>
</layer>
<layer id=fx3 bgcolor=#ffff66  width=50 height=20 left=150
top=50 onFocus=f3.zIndex=0>
<center>fiche 3</center>
</layer>
</b>

<!-- creation des fiches -->
<layer id=f3 bgcolor=#ffff66 width=200 height=200 left=50 top=70
clip="0,0,200,200">
<p>et enfin la fiche 3 <br>qui pourrait recevoir une applet Java
</layer>
<layer id=f2 bgcolor=#ff9999 width=200 height=200 left=50 top=70
clip="0,0,200,200">
<p>la fiche  2<br>  pourrait être un formulaire
</layer>
<layer id=f1 bgcolor=#99ffff width=200 height=200 left=50 top=70 clip="0,0,200,200">
<p> ceci est la fiche 1<br>elle pourrait contenir une image
</layer>

Le second exemple montre comment créer facilement une règle qui se déplace pour mesurer une taille en pixels.

<script>iv=10; </script>

<layer id=bloc1 top=10 left=0>
<table cellspacing=10 cellpadding=4><tr><td><form>
<input type=radio name=fm onClick="iv=1">1 pixel<br>
<input type=radio name=fm onClick="iv=10" checked>10 pixels<br>
<input type=radio name=fm onClick="iv=100">100 pixels<p>
</form>
<td><center><form>
<input type=button onClick=regle.moveBy(0,-1*iv)><br>
<input type=button onClick=regle.moveBy(-1*iv,0)>
<input type=button onClick=regle.moveTo(0,0)>
<input type=button onClick=regle.moveBy(1*iv,0)><br>
<input type=button onClick=regle.moveBy(0,1*iv)>
</form></center></table></layer>

<font color=white>
<layer id=regle top =0 left=0>
<layer left=0 width=10 height=3 bgcolor=blue><center>0</layer>
<layer left=10 width=10 height=3 bgcolor=black><center>1</layer>
<layer left=20 width=10 height=3 bgcolor=red><center>2</layer>
<layer left=30 width=10 height=3 bgcolor=black><center>3</layer>
<layer left=40 width=10 height=3 bgcolor=red><center>4</layer>
<layer left=50 width=10 height=3 bgcolor=black><center>5</layer>
<layer left=60 width=10 height=3 bgcolor=red><center>6</layer>
<layer left=70 width=10 height=3 bgcolor=black><center>7</layer>
<layer left=80 width=10 height=3 bgcolor=red><center>8</layer>
<layer left=90 width=10 height=3 bgcolor=black><center>9</layer>
<layer left=100 width=10 height=3 bgcolor=blue><center>0</layer>
<layer left=110 width=10 height=3 bgcolor=black><center>1</layer>
<layer left=120 width=10 height=3 bgcolor=red><center>2</layer>
<layer left=130 width=10 height=3 bgcolor=black><center>3</layer>
<layer left=140 width=10 height=3 bgcolor=red><center>4</layer>
<layer left=150 width=10 height=3 bgcolor=black><center>5</layer>
<layer left=160 width=10 height=3 bgcolor=red><center>6</layer>
<layer left=170 width=10 height=3 bgcolor=black><center>7</layer>
<layer left=180 width=10 height=3 bgcolor=red><center>8</layer>
<layer left=190 width=10 height=3 bgcolor=black><center>9</layer>
</layer>
</font>

Le troisième exemple est une interface utilisant des couches.

<script>

function opClasse (classe) {
	switch (classe) {
		case "1" : document.layers["optRepas"].visibility="show";
			   break;
		case "2" : document.layers["optRepas"].visibility="hidden";
			   document.layers["optRepas"].document.qRepas.repas.checked=false;
			   break;
	}
}
</script>

<layer id="choixClasse" top=50 left=50>
	<form name="classe">
		<input type="radio" name="cl" value="1" onClick=opClasse("1")>
	 	première classe<br>
		<input type="radio" name="cl" value="2" onClick=opClasse("2")>
 		seconde classe
	</form>
</layer>

<layer id="optRepas" top=50 left=180 visibility="hidden">
	<form name="qRepas">
		<input type="checkbox" name="repas" value="oui">
		réservation repas
	</form>
</layer>

Les blocs

L'
exemple qui suit montre les propriétés de quelque blocs. Les règles de styles definies sont les suivantes :

La première qui s'applique à tous les paragraphes pour les afficher sur un fond jaune, en justifiant le texte et les doter d'une bordure rouge, solide, large de un pixel :


  P {background-color: yellow; 
     text-align: justify; 
     border-color: red; 
     border-width: 1; 
     border-style: solid}

La seconde qui s'applique à la signature de l'extrait présenté pour le cadrer à droite et l'afficher en italique :


 .signature { font-style: italic;
              text-align: right}

La troisième qui s'applique seulement aux paragraphes de classe A et l'entour d'une marge d'épaisseur égale à 2 em :


  P.a {margin: 2em}

La quatrième qui s'applique seulement au paragraphe de classe B et insère entre ce paragraphe et sa bordure une marge d'épaisseur égale sur les quatre cotés à 2 em :


  P.b {padding: 2em}

Voici le source complet :

<HTML>
<HEAD>
<TITLE>Blocs, marges et bordures</TITLE>
<STYLE TYPE="text/css">
  P {background-color: yellow; 
     text-align: justify; 
     border-color: red; 
     border-width: 1; 
     border-style: solid}
 .signature { font-style: italic;
              text-align: right}
  P.a {margin: 2em}
  P.b {padding: 2em}
</STYLE>
</HEAD>
<BODY>
<P>M. Vernet n'était pas un pêcheur à embarras, un pêcheur savant, 
vaniteux, bavard, insupportable, il n'avait point de costume 
spécial, d'engins coûteux et inutiles, et la veille de l'ouverture 
ne lui donnait pas la fièvre.
<BR><SPAN CLASS="signature">Histoires naturelles, Jules Renard</SPAN>
</P>
<P CLASS="a">M. Vernet n'était pas un pêcheur à embarras, un 
pêcheur savant, vaniteux, bavard, insupportable, il n'avait point 
de costume spécial, d'engins coûteux et inutiles, et la veille de 
l'ouverture ne lui donnait pas la fièvre.
<BR><SPAN CLASS="signature">Histoires naturelles, Jules Renard</SPAN>
</P>

<P CLASS="b">M. Vernet n'était pas un pêcheur à embarras, un 
pêcheur savant, vaniteux, bavard, insupportable, il n'avait point 
de costume spécial, d'engins coûteux et inutiles, et la veille de 
l'ouverture ne lui donnait pas la fièvre.
<BR><SPAN CLASS="signature">Histoires naturelles, Jules Renard</SPAN>
</P>

</BODY>
</HTML>

La propriété FLOAT

Cette propriété permet d'obtenir d'intéressants effets spéciaux (elle peut prendre comme valeurs left, right ou none) :

<STYLE TYPE="text/css">
  BODY {background-color: #FFA}
 P {text-align:justify}
.Q {float:left; 
    width:200; 
    color:white; 
    background-color: #E70;
    font-size: 0.8em;
    font-weight:bold;
padding:10}
 </STYLE>
</HEAD>

<P CLASS=q>
Avec HTML 4.0, l'élément IMG a été conservé pour insérer des 
images mais il a été complété par celui, plus général, d'objet
(OBJECT).
</P>
<P>
Tous deux sont considérés comme des objets remplacés, au même 
titre que d'autres : les éléments INPUT, SELECT et TEXTAREA qui
font partie des formulaires. CSS1 les considère comme de simples 
objets rectangulaires qui viennent se placer dans le document 
HTML, leur apparence générale dépendant de facteurs extérieurs 
puisqu'ils ont généralement été créés par d'autres programmes. De 
ce fait, une feuille de style ne peut modifier que leur taille 
(pas nécessairement en conservant leur proportion, lorsque cette 
notion a un sens) et leur bordure.
</P>

Avec HTML 4.0, l'élément IMG a été conservé pour insérer des images mais il a été complété par celui, plus général, d'objet (OBJECT).

Tous deux sont considérés comme des objets remplacés, au même titre que d'autres : les éléments INPUT, SELECT et TEXTAREA qui font partie des formulaires. CSS1 les considère comme de simples objets rectangulaires qui viennent se placer dans le document HTML, leur apparence générale dépendant de facteurs extérieurs puisqu'ils ont généralement été créés par d'autres programmes. De ce fait, une feuille de style ne peut modifier que leur taille (pas nécessairement en conservant leur proportion, lorsque cette notion a un sens) et leur bordure.

Les propriétés WIDTH et HEIGHT

Un exemple pratique d'application de WIDTH est la réduction en largeur d'un texte :

<STYLE TYPE="text/css">
 BODY   {margin: 30 20}
 #trait {text-align:justify; 
         width: 600; 
         border: thick double green
         font-size:12pt; 
         margin:30}
 IMG    {float: left; 
         width:5em}
</STYLE>

<DIV ID=trait><SPAN STYLE="width:60%">
<IMG SRC="images/lettre_a.gif">ussi je ne lui ménage ni l'avoine ni le 
maïs. Je le brosse jusqu'à ce que le poil brille comme une cerise. 
Je peigne sa crinière, je tresse sa queue maigre. Je le flatte de 
la main et de la voix. J'éponge ses yeux. Je cire ses pieds. Est-
ce que ça le touche ? On ne sait. Il pète.
</SPAN>
</DIV>

ussi je ne lui ménage ni l'avoine ni le maïs. Je le brosse jusqu'à ce que le poil brille comme une cerise. Je peigne sa crinière, je tresse sa queue maigre. Je le flatte de la main et de la voix. J'éponge ses yeux. Je cire ses pieds. Est- ce que ça le touche ? On ne sait. Il pète.

Les couleurs

On peut définir des couleurs et arrière-plans comme suit :

<STYLE TYPE="text/css">
  BODY {background-image: url(wood023.jpg)}
  #cygne {background-image:url(nuages.jpg); 
     font-family: sans serif; 
     font-size: large;
     color: maroon
    }
  #chien {background-image:url(fred.jpg); 
          background-repeat: no-repeat;
          font-size: large;
          color: yellow;
          width:50%
  }
  I {text-align: right; 
     margin-right:10%; 
     background-color: lime}
</STYLE>

<H1>Le cygne</H1>
<P ID=cygne>
Il glisse sur le bassin, comme un traîneau blanc, de nuage en 
nuage. Car il n'a faim que des nuages floconneux qu'il voit 
naître, bouger, et se perdre dans l'eau. C'est l'un d'eux qu'il 
désire. Il le vise du bec, et il plonge tout à coup son col vêtu 
de neige.
</P>
<H1>Le chien</H1>
<P ID=chien>
On ne peut mettre Pointu dehors, par ce temps, et l'aigre sifflet 
du vent sous la porte l'oblige même à quitter le paillasson. Il 
cherche mieux et glisse sa bonne tête entre nos sièges. Mais nous 
nous penchons, serrés, coude à coude, sur le feu, et je donne une 
claque à Pointu.
</P>
<I>Jules Renard : Histoires naturelles</I>

Le cygne

Il glisse sur le bassin, comme un traîneau blanc, de nuage en nuage. Car il n'a faim que des nuages floconneux qu'il voit naître, bouger, et se perdre dans l'eau. C'est l'un d'eux qu'il désire. Il le vise du bec, et il plonge tout à coup son col vêtu de neige.

Le chien

On ne peut mettre Pointu dehors, par ce temps, et l'aigre sifflet du vent sous la porte l'oblige même à quitter le paillasson. Il cherche mieux et glisse sa bonne tête entre nos sièges. Mais nous nous penchons, serrés, coude à coude, sur le feu, et je donne une claque à Pointu.

Jules Renard : Histoires naturelles

Espaces entre les caractères

On peut modifier l'espace entre les caractères comme suit :

<H3>STYLE="font-size: 12pt; letter-spacing: 0.4em</H3>
<P STYLE="font-size=12pt"><SPAN STYLE="letter-spacing: 0.4em">
En 1934, les premières gelées </SPAN>se produisirent au mois 
d'octobre.
</P>

<H3>STYLE="font-size: 18pt; letter-spacing: 0.4em</H3>
<P STYLE="font-size=18pt"><SPAN STYLE="letter-spacing: 0.4em">
En 1934, les premières gelées </SPAN>se produisirent au mois 
d'octobre.
</P>
<H3>STYLE="font-size: 12pt; letter-spacing: -0.1em</H3>
<P STYLE="font-size=12pt"><SPAN STYLE="letter-spacing: -0.1em">
En 1934, les premières gelées </SPAN>se produisirent au mois 
d'octobre.

STYLE="font-size: 12pt; letter-spacing: 0.4em

En 1934, les premières gelées se produisirent au mois d'octobre.

STYLE="font-size: 18pt; letter-spacing: 0.4em

En 1934, les premières gelées se produisirent au mois d'octobre.

STYLE="font-size: 12pt; letter-spacing: -0.1em

En 1934, les premières gelées se produisirent au mois d'octobre.

Ombrages

Voici comment faire de jolis ombrages :

<STYLE TYPE="text/css">

BODY {font-family: verdana; 

      font-weight: 900; 

      font-size: 60pt; 

      background-color=peachpuff;

      text-align: center}

.a {color: #0A0}

.b {color: #0E0; margin-top: -1.3em; margin-left: .1em}

</STYLE>


<DIV CLASS=A>HTML 4<DIV CLASS=B>HTML 4</DIV>

<P>

<SPAN STYLE="font-size: 40pt">

<DIV CLASS=A>Le livre d'or<DIV CLASS=B>Le livre d'or</DIV>

</SPAN>

</P>


Pignouf !!!

Et
voici le résultat.

Un titre (é)mouvant


<HTML>

<HEAD>

<STYLE TYPE="text/css">
P {font-family:arial; font-size:36pt; font-weight:700; color:lime}
</STYLE>

<SCRIPT language="javascript">
x = 11
function bouge()
{ t = 200
  if (x == -1) 
  { document.layers["T3"].top = 70
    document.layers["T3"].bgColor = "red"
    return
  }
  l = document.layers["T2"].clip.width
  d = document.layers["T2"].left - document.layers["T1"].left
  if (d > l + 15) couleur()
  else
  { document.layers["T1"].left -=3
    document.layers["T2"].left +=3
    t=20
  }
    setTimeout("bouge()", t)
}

function couleur(t)
{ if (x % 2)
  {document.layers["T2"].visibility = "hide"
   document.layers["T1"].visibility = "hide"
  }
  else
  {document.layers["T2"].visibility = "show"
   document.layers["T1"].visibility = "show"
  }
  x--
}

</SCRIPT>

</HEAD>

<BODY onLoad="bouge()">
<LAYER ID=T1 TOP=10 LEFT=200 Z-INDEX=1> 
 <P>Bienvenue</P>
</LAYER>

<LAYER ID=T2 TOP=10 LEFT=200>
<P>sur le Web</P>
</LAYER>

<LAYER ID=T3 BGCOLOR=black TOP=40 LEFT=70 WIDTH=490 HEIGHT=5>
</LAYER>

</BODY>
</HTML>

Et voici le résultat.

Un beau livre d'or pour finir

Ce livre d'or permet d'envoyer par mail des remarques sur la page Web consultée. Il utilise une fonction JavaScript (initialisation()) pour afficher en fin de mail des informations sur le navigateur, la date et le nom de la page consultée.

<HTML>
<HEAD>
<TITLE>Exemple de livre d'or</TITLE>
<script language="JavaScript">
 function initialisation() 
 { var LaDate = new Date();
   document.form1.PLATEFORME.value = 
     navigator.appName + " " + navigator.appVersion;
   document.form1.DATE.value = String(LaDate).substring(19,0)
   document.form1.NOM_DE_LA_PAGE.value = document.title;
 }
</script>
</HEAD>

<BODY onLoad="initialisation()">
<H2>Merci de nous dire ce que vous pensez de cette 
    présentation</H2>
<FORM NAME="form1" 
      METHOD=post 
      ACTION="mailto:moi@chez.moi?SUBJECT=Ma statistique"
      ENCTYPE="text/plain" >
<TABLE>
 <TR>
  <TD>Comment avez-vous découvert cette présentation ?
  <TD>
   <SELECT SIZE=3 NAME=comment>
    <OPTION>Les news de Usenet</OPTION>
    <OPTION>Une liste de diffusion</OPTION>
    <OPTION>Le bouche à oreille</OPTION>
    <OPTION>Une revue</OPTION>
    <OPTION>Par hasard</OPTION>
   </SELECT>
 <TR>
  <TD>Qu'en pensez-vous ?
  <TD>
   <INPUT TYPE=radio NAME=qualite VALUE=TB> Passionnante
   <BR>
   <INPUT TYPE=radio NAME=qualite VALUE=B> Intéressante
   <BR>
   <INPUT TYPE=radio NAME=qualite VALUE=P> Acceptable
   <BR>
   <INPUT TYPE=radio NAME=qualite VALUE=M> Médiocre
   <BR>
   <INPUT TYPE=radio NAME=qualite VALUE=TM> Inintéressante
 <TR>
  <TD COLSPAN=2>
  Vos commentaires :
  <TEXTAREA COLS=40 ROWS=10 NAME=opinion>
  </TEXTAREA>
 <TR>
  <TD ALIGN=center><INPUT TYPE=submit NAME="SUBMITTER" 
                          VALUE="J'ai fini, envoyez">
  <TD ALIGN=center><INPUT TYPE=reset VALUE="Je veux recommencer">
</TABLE>
*
<INPUT type="hidden" name="DATE" value="">
<INPUT type="hidden" name="NOM_DE_LA_PAGE" value="">
<INPUT type="hidden" name="PLATEFORME" value="">

</FORM>

</BODY>
</HTML>

Merci de nous dire ce que vous pensez de cette présentation

Comment avez-vous découvert cette présentation ?
Qu'en pensez-vous ? Passionnante
Intéressante
Acceptable
Médiocre
Inintéressante
Vos commentaires :
*

1 - Nous sommes ici dans la zone de texte de la note simulée dans une page HTML