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.
Et voici un paragraphe justifié a droite.
Un titre aussi peut etre justifié
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 :
- 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>.
- 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>.
- 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>.
Liste numerotee :
<OL> <LI> no. 1 <LI> no. 2 <LI> no. 3 </OL>
- no. 1
- no. 2
- no. 3
<OL CONTINUE> <LI> no. 1 <LI> no. 2 <LI> no. 3 </OL>
- no. 1
- no. 2
- no. 3
<OL START=15> <LI> no. 1 <LI> no. 2 <LI> no. 3 </OL>
- no. 1
- no. 2
- no. 3
<OL TYPE=A> <LI> no. 1 <LI> no. 2 <LI> no. 3 </OL>
- no. 1
- no. 2
- no. 3
<OL TYPE=a> <LI> no. 1 <LI> no. 2 <LI> no. 3 </OL>
- no. 1
- no. 2
- no. 3
<OL TYPE=I> <LI> no. 1 <LI> no. 2 <LI> no. 3 </OL>
- no. 1
- no. 2
- no. 3
<OL TYPE=i> <LI> no. 1 <LI> no. 2 <LI> no. 3 </OL>
- no. 1
- no. 2
- no. 3
Listes imbriquées :
- premier element
- second element
- premier element
- second element
- premier element
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>
- HTML
- VRML
- JavaScript
- Java
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:- Une balise comportant l'indication du document à ouvrir, et de la position dans ce document. Il s'agit de <A HREF="lienURL">.
- 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>
- Un fichier sur une machine distante (pourvu que l'accès soit possible par un serveur au protocole HTTP sur un internet ou intranet). L'URL est alors de la forme: <A HREF="http://machine/fichier"> ou <A HREF="FTP://machine/fichier">.
- Un fichier sur la machine locale. L'URL prend la forme: <A HREF="file:fichier">. Ici la désignation du fichier peut être absolue ou relative, auquel cas elle donne la position du fichier par rapport à la page dans laquelle on trouve le lien.
- Une adresse de courrier électronique (pourvu qu'un accès à un serveur de courrier soit prévu) ou de nouvelles. L'URL prend alors les formes:<A HREF="mailto:moi@je.fr">
Lorsque le fichier est un document HTML, il est possible de désigner une position à l'intérieur de ce fichier par l'URL: <A HREF="http://machine/fichier#etiquette"> L'étiquette elle même se définit par la balise: <A NAME="etiquette">
- Lien vers le fichier "tabmat.html":
- Lien vers le début de ce fichier:
<A HREF="tabmat.html">"tabmat.html"</A>
<A HREF="#debut">début de ce fichier </A>
Styles de polices.
- en "italique" : em.
- en "code" : code.
- en "sample" : samp.
- en "keyboard" : kbd.
- en "strong" : strong.
- en "citation" : cite.
- en "variable" : var.
- en "definition" : dfn.
-
en
"citation avec des ''"
: q.
et pour les flemmards (déconseillé):
- gras : b.
- italique : i.
- keyboard : tt.
- souligne : u.
-
barre: s. - plus grand : big.
- plus petit : small.
- en indice : sub.
- en exposant : sup.
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>
Les clignotements
La balise <blink> permet de faire clignoter un texte :<BLINK>Ca clignote !!!</BLINK>
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
<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.Et voici une adresse, avec la balise <address> :Ray BRADY, CBS News
<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 | E |
<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 | E |
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 | E |
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 | E |
<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 | E |
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 | E |
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 | E |
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 | E |
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 | ||
|---|---|---|---|---|
| Taille | Poids | |||
| hommes | 1.9 | 0.003 | ||
| femmes | 1.7 | 0.002 | Bien
| |
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=2suivit 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 1 | Cellule 2 | Cellule 3 | Cellule 4 | Cellule 5 |
| Cellule 6 | ||||
| Cellule 7 | Cellule 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
| |||||||||
|
| ||||||||||
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:
- URL est l'URL du fichier contenant l'image, usuellement au format GIF ou JPEG.
- parametre est le parametre d'alignement: TOP, BOTTOM ou MIDDLE
<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">
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 :
et la seconde pour les boutons accessibles :
On peut maintenant combiner les boutons suivants la page :
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" :
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
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>
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>
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:
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>
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>
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>
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.
où 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 :
- On insère un message entre les balises <NOFRAME> et </NOFRAME>.
- 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 naturellesEspaces 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
1 - Nous sommes ici dans la zone de texte de la note simulée dans une page HTML