Le Langage HTML

Table des matires

Le Langage HTML........................................................................................................................ 1
1. Introduction HTML : Hyper Text Markup Language.................................................... 4
1.1. Quelques rgles simples pour l'criture en langage HTML ....................................... 4
1.2. Qu'est-ce qu'un URL (Uniform Resource Locator). .................................................. 4
2. Les En-ttes - H.T.M.L. .....................................................................................................5
3. Les dlimiteurs - H.T.M.L ................................................................................................ 6
3.1. Les dlimiteurs........................................................................................................... 6
3.2. Liste de description.................................................................................................... 7
3.3. Indentation de paragraphe.......................................................................................... 7
3.4. Prsentation d'un paragraphe en multi-colonnes........................................................ 8
4. Les styles - H.T.M.L. ......................................................................................................... 9
4.1. Taille du texte............................................................................................................. 9
Une trs grande taille.................................................................................................................. 9
Une grande taille.................................................................................................................... 9
Une taille moyenne............................................................................................................. 9
4.2. Attributs...................................................................................................................... 9
5. Les listes - H.T.M.L. ........................................................................................................ 13
6. Les caractres spciaux - H.T.M.L. ................................................................................. 15
6.1. Les ingalits............................................................................................................ 15
6.2. Les caractres accentus....................................................................................... 15
6.3. D'autres caractres utiles.......................................................................................... 16
7. Les images - H.T.M.L...................................................................................................... 17
7.1. Les images dans le texte........................................................................................... 17
8. Les images ractives - H.T.M.L....................................................................................... 19
8.1. Les images ractives - H.T.M.L. (ancienne mthode) .............................................. 19
8.2. Les images ractives - H.T.M.L. (nouvelle mthode)............................................... 21
9. Les liens - H.T.M.L.......................................................................................................... 23
9.1. Les liens vers un document complet distant............................................................. 23
9.2. Les liens vers un document complet local ............................................................... 23
9.3. Les liens vers une partie d'un document local.......................................................... 24
9.4. Les liens vers une partie du document courant........................................................ 24
9.5. Adresser un message lectronique........................................................................... 24
10. Les Formulaires - H.T.M.L............................................................................................ 26
10.1. Bouton.................................................................................................................... 26
10.2. Slection d'un fichier.............................................................................................. 26
10.3. Texte libre sur une ligne......................................................................................... 26
10.4. Texte libre sur plusieurs lignes............................................................................... 27
10.5. Menu....................................................................................................................... 27
ENQUETE sur la SATISFACTION des UTILISATEURS............................................. 28
11. Les tableaux - H.T.M.L.................................................................................................. 29
11.1. Dclarer le dbut et la fin d'un tableau................................................................... 29
11.2. Dfinir le dbut et la fin d'une ligne....................................................................... 29
11.3. Dfinit chaque lment de la ligne titre................................................................. 30
11.4. Dcrit le titre du tableau......................................................................................... 31
12. <FRAMESET>- H.T.M.L............................................................................................. 32
13. Divers - H.T.M.L............................................................................................................ 34
13.1. Centrer un document............................................................................................... 34
13.2. Modification de la taille et de la couleur des caractres......................................... 34
13.3. Tableau des couleurs.............................................................................................. 34
13.4. Indice et exposant................................................................................................... 38
13.5. Fond sonore............................................................................................................ 39
13.6. Insertion Vido....................................................................................................... 39



1. Introduction HTML : Hyper Text Markup Language
Un document HTML est compos de texte et de commandes (tag en anglais). Ces
commandes permettent de mettre en forme le texte (Titre, caractre gras, italique, image,
liens, etc...).

1.1. Quelques rgles simples pour l'criture en langage HTML
Les commandes HTML ont une marque de dbut et une marque de fin
Certaines marques de fin sont facultatives
Les commandes HTML utilisent les caractres <et >comme dlimiteurs.
Exemple :

<TI TLE>Cet t e commande donne un t i t r e au document HTML</ TI TLE>
Les commandes HTML peuvent tre crites en minuscules ou en majuscules.
Un fichier rdig en HTML doit tre suffix par .html ou .HTML ou .htm ou .HTM

1.2. Qu'est-ce qu'un URL (Uniform Resource Locator).
Un URL est le moyen de nommer un objet dans le monde WWW. La syntaxe d'un URL est la
suivante :
t ype: ser veur : por t / chemi n_d' acces/ f i chi er #et i quet t e?par amet r es
Le type de serveur :
http : pour les URL provenant de serveurs WWW
gopher : pour les serveurs GOPHER
ftp : pour les fichiers transfrer
telnet : pour ouvrir une session interactive
wais : pour interroger une base WAIS
news : pour accder aux forums

2. Les En-ttes - H.T.M.L.
<HTML>
</ HTML>
Commandes de dbut et de fin du document HTML

<HEAD>
</ HEAD>
Informations non affiches concernant le document

<TI TLE>
</ TI TLE>
Titre du document
Cette information apparait dans la barre de titre du client WWW.

<META . . . >
Situes dans l'en-tte de votre page HTML, ces commandes guident les moteurs de
recherche pour indexer votre page

<BODY>
</ BODY>
Corps du document
Toutes les informations affiches par le client WWW y sont contenues.

<BASE HREF=" URL" >
</ BASE>
URL(*) de base pour toutes les rfrences contenues dans ce document.
Par dfaut l'URL de base est le serveur HTTP sur lequel se trouve le document.

<! - - Commentaires
- - >
Pour insrer des commentaires.
Exemple :
<HTML>
<HEAD>
<TI TLE>Exempl e de st r uct ur e de document HTML</ TI TLE>
<META NAME=" Aut hor " CONTENT=" Ri char d MANAS" >
<BASE HREF=" / usr / home/ chezmoi " ></ BASE>
</ HEAD>
<BODY>
. . .
. . . Le document HTML
. . .
</ BODY>
</ HTML>
3. Les dlimiteurs - H.T.M.L
Dans le texte que vous tapez, les espaces et les retours la ligne ne sont pas interprts par les
clients WWW.

3.1. Les dlimiteurs
Les dlimiteurs permettent d'arer et de formater le document.
<P>
</ P>
Saut de paragraphe

<DI V>
</ DI V>
Division de bloc

<BR>
</ BR>
Saut la ligne

<HR>
</ HR>
Insertion d'une ligne horizontale de sparation
Exemples :
Apr s cet t e l i gne un saut de par agr aphe<P>
Apr s cel l e- ci un saut l a l i gne si mpl e<BR>
sur l a l i gne sui vant e.
<HR>Ce t ext e est encadr par deux l i gnes hor i zont al es<HR>
Rsultat :
Aprs cette ligne un saut de paragraphe
Aprs celle-ci un saut la ligne simple
sur la ligne suivante.

Ce texte est encadr par deux lignes horizontales



3.2. Liste de description
<DL>
</ DL>
Dbut et fin de liste de description

<DT>
</ DT>
Nom du terme

<DD>
</ DD>
Description du terme dfini
Exemples :
<DL>
<DT>Pr emi er t er me</ DT>
<DD>Descr i pt i on du pr emi er t er me<BR>
Cet t e descr i pt i on peut cont i nuer l a l i gne sui vant e<BR>
ai nsi de sui t e . . . </ DD>
<DT>Second t er me</ DT>
<DD>Descr i pt i on du second t er me</ DD>
</ DL>
Rsultat :
Premier terme
Description du premier terme
Cette description peut continuer la ligne suivante
ainsi de suite ...
Second terme
Description du second terme


3.3. Indentation de paragraphe
<BLOCKQUOTE>
</ BLOCKQUOTE>
Exemple :
J e veux met t r e en avant l e par agr aphe qui sui t :
<BLOCKQUOTE>
Nous pour r i ons peut - t r e t ous bi en nous ent endr e avec des gens
par f ai t s. Mai s not r e t che est de bi en nous ent endr e avec des gens
i mpar f ai t s. ( Ri char d L. EVANS)
</ BLOCKQUOTE>
. . . gr ande vr i t !

Rsultat :
J e veux mettre en avant le paragraphe qui suit :
Nous pourrions peut-tre tous bien nous entendre avec des gens parfaits. Mais notre
tche est de bien nous entendre avec des gens imparfaits. (Richard L. EVANS)
... grande vrit !
Remarque :

Les commandes BLOCKQUOTE peuvent s'imbriquer les unes dans les autres.


3.4. Prsentation d'un paragraphe en multi colonnes
<MULTI COL>
</ MULTI COL>


4. Les styles - H.T.M.L.
Les titres de paragraphes peuvent tres visualiss en fonction de leur importance. Ils sont
reprsents par des fontes de caractres de diffrentes tailles, de la plus grande la plus petite
en voici un exemplaire de chaque.

4.1. Taille du texte
<H1>Une t r s gr ande t ai l l e</ H1>
Une trs grande taille
<H2>Une gr ande t ai l l e</ H2>
Une grande taille
<H3>Une t ai l l e moyenne</ H3>
Une taille moyenne
<H4>Une pet i t e t ai l l e</ H4>
Une petite taille
<H5>Une t r s pet i t e t ai l l e</ H5>
Une trs petite taille
<H6>Une t ai l l e vr ai ment mi nuscul e</ H6>
Une taille vraiment minuscule


4.2. Attributs
Les caractres peuvent recevoir les attributs suivants :
<STRI KE> ou <S>
</ STRI KE> ou </ S>
Pour barrer du texte.
Exemple :
C' est <STRI KE>BEAU et bar r </ STRI KE>
Rsultat :
C'est BEAU et barr
<U>
</ U>
Pour souligner du texte.
Exemple :
Ceci <U>n' est pas un l i en</ U>
Rsultat :
Ceci n'est pas un lien
<BLI NK>
</ BLI NK>
Pour faire clignoter du texte.
Exemple :
C' est <BLI NK>MAGI QUE</ BLI NK> ! ! !
Rsultat :
C'est MAGIQUE !!!
<TT>
</ TT>
Pour intgrer du texte format dans une phrase.
Exemple :
Ceci est une phr ase cont enant un <TT>t ext e f or mat </ TT>
Rsultat :
Ceci est une phrase contenant un t ext e f or mat
<PRE>
</ PRE>
Cas d'un paragraphe format.
Il est inutile de forcer des csures de lignes.
Le texte apparat tel que vous le saisissez.
Exemple :
Sous DOS t apez l es commandes sui vant es
<PRE>
C: > MKDI R WI NSOCK
C: > CD WI NSOCK
C: > COPY A: WI NSOCK. ZI P C:
C: > PKUNZI P - D WI NSOCK
</ PRE>
Rsultat :
Sous DOS tapez les commandes suivantes
C: > MKDI R WI NSOCK
C: > CD WI NSOCK
C: > COPY A: WI NSOCK. ZI P C:
C: > PKUNZI P - D WI NSOCK
Les styles physiques
o <B>
</ B>
Pour mettre du texte en gras
Exemple :
<B>Texte gras</B>
Rsultat :
Texte gras
o <I >
</ I >
Pour mettre du texte en italique
Exemple :
<I >Text e en i t al i que</ I >
Rsultat :
Texte en italique
Les styles logiques
L'initiative est laisse au client WWW
o <STRONG>
</ STRONG>
Pour insister sur un texte (en gnral gras)
Exemple :
<STRONG>J 'insiste</STRONG>
Rsultat :
J'insiste
o <EM>
</ EM>
Pour mettre du texte en valeur (en gnral italique)
Exemple :
<EM>Text e en val eur </ EM>
Rsultat :

Texte en valeur
o <CI TE>
</ CI TE>
Pour insrer une citation (en gnral italique)
Exemple :
<CI TE>Sui vez l e boeuf </ CI TE>

Rsultat :
Suivez le boeuf
o <ADDRESS>
</ ADDRESS>
Pour afficher une adresse (en gnral italique)
Exemple :
<ADDRESS>manas@uni ce. f r </ ADDRESS>
Rsultat :
manas@unice.fr
5. Les listes - H.T.M.L.
Il existe deux sortes de listes : non ordonne et ordonne
Les listes peuvent tre embotes.
<UL>
</ UL>
Liste non ordonne

<OL>
</ OL>
Liste ordonne

<LI >
</ LI >
Elment de la liste
Exemple 1 :
Ceci est une l i st e non or donne de t er mes

<UL>Le t i t r e est cadr
<LI >Ter me A
<LI >Ter me B
<LI >Ter me C
</ UL>
Rsultat :

Ceci est une liste non ordonne de termes
Le titre est cadr
Terme A
Terme B
Terme C
Exemple 2 :
Ceci est une l i st e or donne i ncl uant une sous- l i st e or donne
<OL>
<LI >Ter me A
<OL>Sous- l i st e
<LI >Ter me A- 1
<LI >Ter me A- 2
</ OL>
<LI >Ter me B
<LI >Ter me C
</ OL>

Rsultat :

Ceci est une liste ordonne incluant une sous liste ordonne
1. Terme A
Sous liste
1. Terme A-1
2. Terme A-2
2. Terme B
3. Terme C
6. Les caractres spciaux - H.T.M.L.
6.1. Les ingalits
Les caractres <, >, & et " tant interprts par HTML, les squences suivantes permettent
leur affichage.

&l t ; <
&gt ; >
&amp; &
&quot ; "
Les espaces n'tant pas significatifs, le caractre &nbsp; permet de forcer un "blanc" autant
que souhait
Exemple :
Les oiseaux gazouillent au printemps
Les oiseaux gazouillent au &nbsp;&nbsp;&nbsp; printemps

Rsultat :
Les oiseaux gazouillent au printemps
Les oiseaux gazouillent au printemps

6.2. Les caractres accentus

HTML utilise le jeu de caractres ISO Latin-1 cods sur 8 bits et les caractres ASCII
cods sur 7 bits. Avec cette dernire codification les caractres accentus sont reprsents par
les squences suivantes :

&eacut e;
&Eacut e;
&egr ave;
&eci r c;
&agr ave;
&i uml ;
&ccedi l ;
&nt i l de;
&AEl i g;
6.3. D'autres caractres utiles


&euro; &#8364;
&copy; &#169;
&reg; &#174;
&deg; &#176;
&ordm;
&laquo; &#171;
&raquo; &#187;
&micro; &#181;
&para; &#182;

&frac14; &#188;
&frac12; &#189;
&frac34; &#190;

&#156;
Le caractre &euro; n'apparat pas avec tous les navigateurs, optez plutt pour l'image
.
7. Les images - H.T.M.L.
HTML permet d'insrer des images dans du texte. Ces images apparaissent dans le
corps du texte, mais aussi comme ancre, ou mme comme document rfrenc.
Les clients WWW Mosaic acceptent les formats d'images suivants :
XBM pour les images monochromes
GIF pour les images couleurs
Les clients WWW Netscape ou Internet Explorer acceptent en plus le format
J PEG pour les images couleurs

7.1. Les images dans le texte
La commande <I MG> permet d'insrer une image dans le texte.
Syntaxe :
<I MG SRC=" i mage" ALI GN=" at t r i but " ALT=" t i t r e"
HSPACE=" hh" VSPACE=" vv" BORDER=" bb" >

Image adresse d'une image
Attribut " MI DDLE" " TOP" " BOTTOM" " LEFT" ou " RI GHT"
Titre "Un titre" qui se substituera l'image pour les clients ne pouvant ou ne sachant
pas afficher des images (Lynx sur terminal VT100 par exemple). En effet, il est beaucoup plus
agrable pour ces utilisateurs de voir un message ou un caractre, au lieu de [ I MAGE]

hh nombre de pixels de sparation droite et gauche de l'image. (par dfaut hh=0)
vv nombre de pixels de sparation en haut et en bas de l'image. (par dfaut vv=0)
bb nombre de pixels de l'encadrement de l'image. (par dfaut il n'y a pas d'encadrement)

Exemple :
<I MG SRC=" chouet t eG. gi f " > La chouet t e
ou
<I MG ALI GN=BOTTOM SRC=" chouet t eG. gi f " > La chouet t e
Essayer aussi :
<I MG ALI GN=MI DDLE SRC=" chouet t eG. gi f " > La chouet t e
<I MG ALI GN=TOP SRC=" chouet t eG. gi f " > La chouet t e
<I MG ALI GN=LEFT SRC=" chouet t eG. gi f " > chouet t e
<I MG ALI GN=RI GHT " chouet t eG. gi f " > chouet t e
Rsultat :
La chouette
8. Les images ractives - H.T.M.L.
Une image ractive permet de lier des documents en fonction de la zone clique par
l'utilisateur. Le plus bel exemple est la carte de France ractive permettant de connatre rgion
par rgion tous les serveurs WWW.
(cf URL http://www.urec.cnrs.fr/annuaire/cartes/index.shtml).
Voici deux mthodes pour fabriquer des images ractives.
1. La mthode ancienne lie au serveur, et faisant appel au serveur lors de son
utilisation.

2. La mthode nouvelle autonome, toutes les informations ncessaires son
fonctionnement sont contenues dans la page HTML affiche par le client.

8.1. Les images ractives - H.T.M.L.
(ancienne mthode)
Cette mthode ncessite l'intervention d'un programme excutable sur le serveur
imagemap (serveur NCSA) ou htimage (serveur CERN) dans le rpertoire /cgi-bin.
Trois lments indispensables :
un fichier image .gif
un fichier carte .map correspondant l'image .gif
le programme excutable
Le premier lment est trouver par vos soins !!
Le dernier est fourni par le serveur WWW
Reste le fichier .map qu'il faut fabriquer
soit en utilisant des logiciels comme XV sur plateforme UNIX ou VMS (mais cela
reste relativement rbarbatif car il faut relever manuellement les zones qui seront
ractives),
soit le fin du fin en utilisant l'outil spcialis MAPEDIT qui fabrique selon vos
directives ce fameux fichier .map
La syntaxe du contenu de ce fichier est la suivante :
zone ur l coor donnes, . . . , coor donnes
Les coordonnes des points de l'image sont dfinies en pixel suivant les axes x et y, l'origine
tant le point en haut et gauche de l'image.
Ce fichier contient une zone par ligne, il existe 3 types de zones : rectangle, cercle et
polygone, plus la zone "dfaut".
Les lignes de commentaires doivent commencer par un "#".
Type de zone Mot-clef Coordonnes
rectangle rect on dfinit les coordonnes de deux sommets oppos
cercle circle
on dfinit les coordonnes du centre du cercle
et les coordonnes d'un des points de la circonfrence
polygone poly on dfinit les coordonnes de chaque sommet
dfaut default
Exemple :
Chaque utilisateur peut crer son espace html (voir l'administrateur du serveur). Il suffit de
crer un rpertoire public_html dans lequel on place ses propres fichiers html, images, etc ....
Deux zones sont dfinies dans un fichier : un rectangle autour du nez et un cercle autour du
menton.


Attention :
les URL doivent contenir l'adresse du serveur.
# Pr emi er essai
def aul t ht t p: / / nephi . uni ce. f r / Cour sHTML/ non. ht ml
# On f i xe l e nez
r ect ht t p: / / nephi . uni ce. f r / Cour sHTML/ nez. ht ml 54, 81 83, 107
# On poi nt e sur l e ment on ( quand l es or ei l l es ! ! )
ci r cl e ht t p: / / nephi . uni ce. f r / Cour sHTML/ ment on. ht ml 72, 126 82, 138
On utilise ces 3 lments ainsi :
Exemple :

<A HREF=" / cgi - bi n/ i magemap/ Cour sHTML/ manas. map" >
<I MG ALI GN=MI DDLE SRC=" manas. gi f " I SMAP></ A>
Rsultat :
A vous de cliquer !

8.2. Les images ractives - H.T.M.L.
(nouvelle mthode)
Cette mthode est maintenant la plus employe car elle est indpendante du serveur,
toutes les informations concernant les diffrentes zones sensibles de l'image sont traites par
le client.
Deux lments indispensables :
un fichier image .gif ou .jpg
dfinir les zones ractives
Le premier lment est trouver par vos soins !!
Reste dfinir les zones ractives
soit en utilisant des logiciels comme XV sur plateforme UNIX ou VMS (mais cel
reste relativement rebarbatif car il faut relever manuellement les zones qui seront
ractives),
soit en utilisant un outil spcialis tel que MAPEDIT qui fabrique selon vos
directives un fichier .map
La syntaxe du contenu de ce fichier est la suivante :
zone ur l coor donnes, . . . , coor donnes
Les coordonnes des points de l'image sont dfinies en pixel suivant les axes x et y, l'origine
tant le point en haut et gauche de l'image.
Il faudra donc adapter les donnes fournies dans ce fichier .map la syntaxe suivante :
Type de zone Mot-clef Coordonnes
rectangle rect on dfinit les coordonnes de deux sommets oppos
cercle circle
on dfinit les coordonnes du centre du cercle
et la longueur du rayon
polygone poly on dfinit les coordonnes de chaque sommet
dfaut default
Exemple :

<MAP NAME=" DEMO" >
<AREA SHAPE=" RECT" HREF=" nez. ht ml " COORDS=" 54, 81, 83, 107" >
<AREA SHAPE=" CI RCLE" HREF=" ment on. ht ml " COORDS=" 70, 126, 15" >
<AREA SHAPE=" DEFAULT" HREF=" non. ht ml " >
</ MAP>
<I MG ALI GN=MI DDLE SRC=" manas. gi f " USEMAP=" #DEMO" >
Rsultat :

9. Les liens - H.T.M.L.
Une des fonctionnalits la plus agrable du langage HTML est la possibilit de crer
des liens vers d'autres documents. Ces documents peuvent tre des documents HTML, des
images, du son, des films, et des serveurs TELNET, WAIS, FTP et GOPHER. Le logiciel
client WWW prsente ce lien sous forme de mots souligns ou d'image encadre que l'on
appelle ancre ou lien. Ce lien est soit un fichier local, soit une URL(*).
Il existe quatre types principaux de liens :

9.1. Les liens vers un document complet distant
Syntaxe :

<A HREF=" URL" > ancr e </ A>
Exemple :

pour accder aux pages du CRI - UNSA
<A HREF=" ht t p: / / www. uni ce. f r / ht ml / Fr ench/ cr i . ht ml " > Le CRI </ A> U. N. S. A.
Rsultat :
Le CRI de l'U.N.S.A.

9.2. Les liens vers un document complet local
Syntaxe :

<A HREF=" nom_de_f i chi er _l ocal " > ancr e </ A>
Exemple :

pour accder une page d'essai locale
<A HREF=" / manas/ publ i c_ht ml / Di apor ama" > Cl i quer ICI </ A>
Rsultat :
Cliquer ICI

9.3. Les liens vers une partie d'un document local
Syntaxe :
<A NAME=" et i quet t e" > nom</ A>
pour df i ni r un poi nt de br anchement
<A HREF=" nom_de_f i chi er _l ocal #et i quet t e" > ancr e </ A>
pour f ai r e l e l i en.
Exemple :
pour accder au paragraphe 3 du document local
<A NAME=" [ 3] " > Par agr aphe 3 : Les souci s </ A> <A
HREF=" exempl e_not es. ht ml #[ 3] " > Not e [3] </ A>
Rsultat :
Note [3]

9.4. Les liens vers une partie du document courant
Syntaxe :
<A NAME=" et i quet t e" > nom</ A>
pour df i ni r un poi nt de br anchement
<A HREF=" #et i quet t e" > ancr e </ A>
pour f ai r e l e l i en.
Exemple :
pour accder au mot "ANCRES" du document courant
<A NAME=" ANCRES" > Les ancr es </ A>
<A HREF=" #ANCRES" > Voyons r et our nons au dbut du f i chi er </ A>
Rsultat :
Voyons r et our nons au dbut du f i chi er

9.5. Adresser un message lectronique
Syntaxes :
<A HREF=" MAI LTO: adr esse_cor r espondant " > ancr e </ A>
ou
<A HREF=" MAI LTO: adr esse_cor r espondant ?Subj ect =Obj et _du_message" > ancr e </ A>

Exemple 1 :
pour m'adresser un message lectronique
<A HREF=" MAI LTO: manas@uni ce. f r " > Ecr i vez- moi ! ! </ A>
Rsultat :
Ecr i vez- moi ! !

Exemple 2 :
pour m'adresser un message lectronique avec un sujet prdfini
<A HREF=" MAI LTO: manas@uni ce. f r ?Subj ect =Coucou" > Ecr i vez- moi encor e ! ! </ A>
Rsultat :
Ecr i vez- moi encor e ! !

Exemple 3 :
pour m' adr esser un message l ect r oni que avec un dest i nat ai r e secondai r e, un
dest i nat ai r e secondai r e " cache" ou " of f i ci eux" et
un suj et pr df i ni
<A
HREF=" MAI LTO: manas@uni ce. f r ?cc=r manas@uni ce. f r &bcc=r manas@uni ce. f r &Subj ect =
Coucou" > Ecr i vez- nous. Nous sommes pl usi eur s ! ! </ A>
Rsultat :
Ecr i vez- nous. Nous sommes pl usi eur s ! !
10. Les Formulaires - H.T.M.L.
Les clients volus supportent les formulaires.
Un formulaire est une fiche que l'utilisateur peut remplir, ces informations ainsi saisies sont
traites par le serveur WWW l'aide d'un programme CGI (Common Gateway Interface).
Un formulaire commence et finit par
<FORM ACTI ON METHOD>
</ FORM>
avec ACTI ON = " pr ogr amme execut abl e ou shel l "
METHOD = GET
POST

Il existe plusieurs types de champs :


10.1. Bouton

<I NPUT TYPE NAME VALUE CHECKED>
</ I NPUT>
avec TYPE = RADI O pour l es bout ons mul t i pl es
CHECKBOX pour l es cases cocher
SUBMI T pour envoyer l e f or mul ai r e une f oi s r empl i
RESET pour ef f acer l e cont enu du f or mul ai r e
NAME = " un nom" qui i dent i f i e l e bout on
VALUE= " val eur " donne au bout on l or squ' i l est sel ect i onn
CHECKED si gnal e un bout on par df aut ( RADI O) ou
une case coche avant sai si e ( CHECKBOX)

TYPE = I MAGE i dent i que au SUBMI T mai s l e bout on est r empl ac
par une i mage de vot r e choi x
NAME = " un nom" qui i dent i f i e l e bout on
SRC = " i mage" nomdu f i chi er i mage
ALI GN = BOTTOM val eur par df aut
LEFT, RI GHT, TOP, ABSMI DDLE, ABSBOTTOM,
TEXTTOP, MI DDLE, BASELI NE
sont l es aut r es val eur s possi bl es


10.2. Slection d'un fichier

<I NPUT TYPE NAME>
</ I NPUT>
avec TYPE = FI LE pour per met t r e l ' envoi d' un f i chi er
NAME = " un nom" qui i dent i f i e l e champ t ext e


10.3. Texte libre sur une ligne

<I NPUT TYPE NAME SI ZE>
</ I NPUT>
avec TYPE = TEXT pour f ai r e sai si r du t ext e
PASSWORD l es car act r es sai si s sont r epr sent es
par des ' *'
HI DDEN l e champ est cach : ut i l e pour t r ansmet t r e
des i nf or mat i ons non vi si bl es.
NAME = " un nom" qui i dent i f i e l e champ t ext e

10.4. Texte libre sur plusieurs lignes

<TEXTAREA NAME ROWS COLS>
</ TEXTAREA>
avec NAME = " un nom" qui i dent i f i e l e champ t ext e
ROWS = nombr e de l i gnes vi si bl es
COLS = nombr e de col onnes vi si bl es


10.5. Menu

<SELECT NAME>
</ SELECT>
avec NAME = " un nom" qui i dent i f i e l e menu
<OPTI ON SELECTED>
<OPTI ON>
r epr sent e chaque choi x du menu
avec SELECTED qui si gnal e l e choi x par df aut

10.6. Exemple de formulaire
<P>
<H3 ALI GN=CENTER>ENQUETE sur l a SATI SFACTI ON des UTI LI SATEURS</ H3>
<FORM ACTI ON=" / cgi - bi n/ cour s1" METHOD=POST>
<PRE>
<I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" UNI V" CHECKED> Uni ver si t ai r e
<I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" CNRS" > C. N. R. S.
<I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" I NSE" > I . N. S. E. R. M.
<I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" PUBL" > Aut r e PUBLI C
<I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" PRI V" > Pr i v
<P>
Vos Nomet pr nom: <I NPUT TYPE=TEXT NAME=NOM1 SI ZE=30>
</ P>
Vot r e adr esse l ect r oni que : <I NPUT TYPE=TEXT NAME=ADR1 SI ZE=30>
<P>
J e sui s bel l e/ beau<I NPUT TYPE=CHECKBOX NAME=BEAU VALUE=" beau" >,
j eune<I NPUT TYPE=CHECKBOX NAME=J EUNE VALUE=" j eune" >,
r i che<I NPUT TYPE=CHECKBOX NAME=RI CHE VALUE=" r i che" >,
en bonne sant <I NPUT TYPE=CHECKBOX NAME=SANTE VALUE=" en bonne sant e" >

Vot r e opi ni on

<SELECT NAME=OPI NI ON1>
<OPTI ON>Tr s sat i sf ai t
<OPTI ON SELECTED>Sat i sf ai t
<OPTI ON>I ndi f f r ent
<OPTI ON>C' est nul ! !
</ SELECT>

<P>
Vos comment ai r es <TEXTAREA NAME=COM1 ROWS=3 COLS=40></ TEXTAREA>
</ P>
<I NPUT TYPE=SUBMI T VALUE=" Envoyer " > <I NPUT TYPE=RESET VALUE=" Annul er " >
<I NPUT TYPE=I MAGE SRC=" / i mages/ go. gi f " ALI GN=ABSMI DDLE>
</ PRE>
</ FORM>

ENQUETE sur la SATISFACTION des UTILISATEURS
Uni ver si t ai r e
C. N. R. S.
I . N. S. E. R. M.
Aut r e PUBLI C
Pr i v

Vos Nomet pr nom:

Vot r e adr esse l ect r oni que :

J e sui s bel l e/ beau , j eune , r i che , en bonne sant

Vot r e opi ni on
Satisfait


Vos comment ai r es

Envoyer

Annuler

11. Les tableaux - H.T.M.L.
HTML 3 permet la fabrication de tableaux trs visuels.
On utilise les commandes suivantes :

11.1. Dclarer le dbut et la fin d'un tableau

<TABLE BORDER= CELLPADDI NG= CELLSPACI NG= WI DTH= HEI GHT= BGCOLOR=>
</ TABLE>
BORDER=
BORDER=0 l e t abl eau n' a pas de cont our
BORDER=n l e t abl eau a un cont our d' pai sseur " n"
CELLPADDI NG=
Df i ni t l ' espace ent r e l ' obj et et l e cont our d' une cel l ul e
CELLSPACI NG=
Df i ni t l ' pai sseur du t r ai t ent r e l es cel l ul es
WI DTH=
Fi xe l a l ar geur du t abl eau
HEI GHT=
Fi xe l a haut eur du t abl eau
BGCOLOR=
BGCOLOR=" #RRGGBB"
Df i ni t l a coul eur de f ond de t out l e t abl eau. RR, GG et BB sont l es
val eur s hexadci mal es du Rouge( RR) , Ver t ( GG) et Bl eu( BB) .

11.2. Dfinir le dbut et la fin d'une ligne

<TR ALI GN= BGCOLOR=>
</ TR>
ALI GN=
ALI GN=LEFT ( par df aut ) t out es l es cel l ul es de l a l i gne sont cadr es
gauche
ALI GN=CENTER t out es l es cel l ul es de l a l i gne sont cent r es
ALI GN=RI GHT t out es l es cel l ul es de l a l i gne sont cadr es dr oi t e
BGCOLOR=
BGCOLOR=" #RRGGBB"
Df i ni t l a coul eur de f ond des cel l ul es de cet t e l i gne. RR, GG et BB
sont l es val eur s hexadci mal es du Rouge( RR) , Ver t ( GG) et Bl eu( BB) .

11.3. Dfinit chaque lment de la ligne titre

<TH COLSPAN= ROWSPAN= ALI GN= VALI GN= WI DTH= BGCOLOR=>
</ TH>
Dcrit chaque lment du tableau
<TD COLSPAN= ROWSPAN= ALI GN= VALI GN= WI DTH= BGCOLOR=>
</ TD>
COLSPAN=
COLSPAN=n (par dfaut n=1) la cellule occupe n colonnes.
ROWSPAN=
ROWSPAN=n (par dfaut n=1) la cellule occupe n lignes.
ALIGN=
ALIGN=alignement horizontal du contenu de la cellule.
ALIGN=LEFT (valeur par dfaut) alignement gauche de la cellule.
ALIGN=RIGHT alignement droite de la cellule.
ALIGN=CENTER centrage dans la cellule.
VALIGN=
VALIGN=alignement vertical du contenu de la cellule.
VALIGN=BOTTOM (valeur par dfaut) alignement au bas de la cellule.
VALIGN=TOP alignement au sommet de la cellule.
VALIGN=CENTER centrage dans la cellule.
WIDTH=
WIDTH=largeur de la cellule en pourcentage ou en pixel.
BGCOLOR=
BGCOLOR="#RRGGBB"
Dfinit la couleur de fond de la cellule. RR, GG et BB sont les valeurs hexadcimales
du Rouge(RR), Vert(GG) et Bleu(BB).

11.4. Dcrit le titre du tableau

<CAPTI ON ALI GN=>
</ CAPTI ON>
ALI GN=
ALI GN=TOP ( par df aut ) l a l gende du t abl eau est en haut
ALI GN=BOTTOM l a l gende du t abl eau est en bas
Exemple :
<CENTER>
<TABLE BORDER BGCOLOR=" #ccf f aa" >
<CAPTI ON>Compar at i f modl e conomi que</ CAPTI ON>
<TH COLSPAN=3>Modl e
<TH ROWSPAN=2>Vi t esse<BR>en km/ heur e
<TH ROWSPAN=2>Consommat i on<BR>en l i t r e/ 100 km
<TR>
<TH>Mar que</ TH>
<TH>Type</ TH>
<TH>Numer o de sr i e</ TH>
</ TR>
<TR>
<TD>Peugeot 106</ TD>
<TD>B2</ TD>
<TD ALI GN=MI DDLE>234. 34</ TD>
<TD>132</ TD>
<TD>5, 7</ TD>
</ TR>
<TR>
<TD>Ci t r on AX</ TD>
<TD>AT67B8</ TD>
<TD ALI GN=MI DDLE>6789</ TD>
<TD>126</ TD>
<TD>5, 5</ TD>
</ TR>
</ TABLE>
Rsultat :
Comparatif modle conomique
Modle
Marque Type Numero de srie
Vitesse
en km/heure
Consommation
en litre/100 km
Peugeot 106 B2 234.34 132 5,7
Citron AX AT67B8 6789 126 5,5

12. <FRAMESET> - H.T.M.L.
Netscape a implment le partage de la fentre en "cadres" ou "cellules" autonomes.
Ceci revient diviser la fentre en plusieurs zones appeles frames. Chaque zone est gre
indpendamment des autres. Chaque zone porte un nom.
Trois commandes permettent de grer cette fonctionnalit, mais attention le corps du
fichier n'est plus inclus dans <BODY> et </ BODY> mais dans <FRAMESET> et </FRAMESET>.
<FRAMESET ROWS COLS BORDER> </ FRAMESET>
permet de diviser une zone en cellules horizontales ou verticales.
ROWS=" n, n%, *, . . . "
divise la zone en cellules horizontales.
o n =hauteur en nombre de pixels
o n%=hauteur de la cellule en pourcentage de l'cran
o * =hauteur restante

COLS=" n, n%, *, . . . "
divise la zone en cellules verticales.
o n =largeur en nombre de pixels
o n%=largeur de la cellule en pourcentage de l'cran
o * =largeur restante

BORDER
permet de supprimer (BORDER=0) ou d'agrandir la valeur du sparateur de cellules.
<FRAME NAME SRC SCROLLI NG MARGI NWI DTH MARGI NHEI GHT NORESI ZE
BORDER FRAMEBORDER FRAMESPACI NG BORDERCOLOR>
caractrise la cellule
NAME=" nom_de_l a_zone"
SRC=" URL"
SCROLLI NG=" yes" ou " no" ou " aut o"
MARGI NWI DTH= nombr e de pi xel s de l a mar ge ver t i cal e
MARGI NHEI GHT= nombr e de pi xel s de l a mar ge hor i zont al e
NORESI ZE vi t e l a modi f i cat i on de l a t ai l l e par l ' ut i l i sat eur
BORDER= nombr e de pi xel s du bor d
FRAMEBORDER=" yes" ou " no" par df aut = " yes"
" yes" l e spar at eur est en 3- D
" no" l e spar at eur est pl at
FRAMESPACI NG= nombr e de pi xel s de l a spar at i on
BORDERCOLOR=" #RRVVBB" coul eur de l a spar at i on
<NOFRAME> </ NOFRAME>
partir de cette commande, le texte ne sera affich que par les Browsers ne sachant pas grer
les frames.

Pour utiliser les "frames", un nouvel attribut " TARGET" de la commande <A>permet de
donner le nom de la cellule ( cf attribut " NAME" de la commande <FRAME>) dans laquelle le
document sera affich
<A HREF=" ur l " TARGET= >l i en</ A>
TARGET=" Cel l ul e- 1" af f i chage dans l a cel l ul e " Cel l ul e- 1"
TARGET=" _sel f " af f i chage dans l a mme cel l ul e
TARGET=" _bl ank" af f i chage dans une nouvel l e f ent r e
TARGET=" _t op" suppr essi on de t out es l es frames, r et our un af f i chage
cl assi que

Exemple:
Le but de l'exemple est de fabriquer une page qui ressemble au tableau ci-dessous
Cellule droite-
haute
Cellule
gauche
Cellule droite-
basse

<HTML>
<FRAMESET COLS=" 25%, *" >
<FRAME SCROLLI NG=" yes" NAME=" cel - g" SRC=" f r ame- 1. ht ml " >
<FRAMESET ROWS=" 50%, 50%" >
<FRAME SCROLLI NG=" yes" NAME=" cel - d- h" SRC=" f r ame- dh. ht ml " >
<FRAME SCROLLI NG=" yes" NAME=" cel - d- b" SRC=" f r ame- dg. ht ml " >
</ FRAMESET>
</ FRAMESET>
<NOFRAME>
Dommage, vot r e <I >Br owser </ I > ne per met pas l es <I >f r ames</ I >.
</ NOFRAME>
</ HTML>
Rsultat :

13. Divers - H.T.M.L.
D'autres fonctionnalits existent sous HTML.
13.1. Centrer un document
Pour centrer horizontalement du texte ou une image au milieu de la page.
<CENTER>
</ CENTER>
Exemple :
<CENTER> J e cent r e cet t e l i gne. </ CENTER>
Rsultat :
J e centre cette ligne.


13.2. Modification de la taille et de la couleur des caractres

Pour augmenter la taille des caractres dans le texte, et changer de couleur.
<FONT SI ZE COLOR>
</ FONT>
Exemple :
<FONT SI ZE=+1>C</ FONT><FONT SI ZE=+3>A</ FONT><FONT SI ZE=+4
COLOR=" #00f f 00" >D</ FONT><FONT SI ZE=+3>O</ FONT><FONT SI ZE=+1>R</ FONT>
Rsultat :
CADOR

13.3. Tableau des couleurs

Vous pouvez utiliser le nom de la couleur en lieu et place des valeurs hxadcimales bien
fastidieuses utiliser.
COLOR=" bi sque" ou COLOR=" #FFE4C4" , sont quivalents

Color Red Green Blue A voir
aliceblue F0 F8 FF
antiquewhite FA EB D7
aqua 00 FF FF
aquamarine 7F FF D4
azure F0 FF FF
beige F5 F5 DC
bisque FF E4 C4
black 00 00 00
blanchedalmond FF EB CD
blue 00 00 FF
blueviolet 8A 2B E2
brown A5 2A 2A
burlywood DE B8 87
cadetblue 5F 9E A0
chartreuse 7F FF 00
chocolate D2 69 1E
coral FF 7F 50
cornflowerblue 64 95 ED
cornsilk FF F8 DC
crimson DC 14 3C
cyan 00 FF FF
darkblue 00 00 8B
darkcyan 00 8B 8B
darkgoldenrod B8 86 0B
darkgray A9 A9 A9
darkgreen 00 64 00
darkkhaki BD B7 6B
darkmagenta 8B 00 8B
darkolivegreen 55 6B 2F
darkorange FF 8C 00
darkorchid 99 32 CC
darkred 8B 00 00
darksalmon E9 96 7A
darkseagreen 8F BC 8F
darkslateblue 48 3D 8B
darkslategray 2F 4F 4F
darkturquoise 00 CE D1
darkviolet 94 00 D3
deeppink FF 14 93
deepskyblue 00 BF FF
dimgray 69 69 69
dodgerblue 1E 90 FF
firebrick B2 22 22
floralwhite FF FA F0
forestgreen 22 8B 22
fuchsia FF 00 FF
gainsboro DC DC DC
ghostwhite F8 F8 FF
gold FF D7 00
goldenrod DA A5 20
gray 80 80 80
green 00 80 00
greenyellow AD FF 2F
honeydew F0 FF F0
hotpink FF 69 B4
indianred CD 5C 5C
indigo 4B 00 82
ivory FF FF F0
khaki F0 E6 8C
lavender E6 E6 FA
lavenderblush FF F0 F5
lawngreen 7C FC 00
lightpink FF B6 C1
lightsalmon FF A0 7A
lightseagreen 20 B2 AA
lightskyblue 87 CE FA
lightslategray 77 88 99
lightsteelblue B0 C4 DE
lightyellow FF FF E0
lime 00 FF 00
limegreen 32 CD 32
linen FA F0 E6
magenta FF 00 FF
maroon 80 00 00
mediumaquamarine 66 CD AA
mediumblue 00 00 CD
mediumorchid BA 55 D3
mediumpurple 93 70 DB
mediumseagreen 3C B3 71
mediumslateblue 7B 68 EE
mediumspringgreen 00 FA 9A
mediumturquoise 48 D1 CC
mediumvioletred C7 15 85
midnightblue 19 19 70
mintcream F5 FF FA
mistyrose FF E4 E1
moccasin FF E4 B5
navajowhite FF DE AD
navy 00 00 80
oldlace FD F5 E6
olive 80 80 00
olivedrab 6B 8E 23
orange FF A5 00
orangered FF A5 00
orchid DA 70 D6
palegoldenrod EE E8 AA
palegreen 98 FB 98
paleturquoise AF EE EE
palevioletred DB 70 93
papayawhip FF EF D5
peachpuff FF DA B9
peru CD 85 3F
pink FF C0 CB
plum DD A0 DD
powderblue B0 E0 E6
purple 80 00 80
red FF 00 00
rosybrown BC 8F 8F
royalblue 41 69 E1
saddlebrown 8B 45 13
salmon FA 80 72
sandybrown F4 A4 60
seagreen 2E 8B 57
seashell FF F5 EE
sienna A0 52 2D
silver C0 C0 C0
skyblue 87 CE EB
slateblue 6A 5A CD
slategray 70 80 90
snow FF FA FA
springgreen 00 FF 7F
steelblue 46 82 B4
tan D2 B4 8C
teal 00 80 80
thistle D8 BF D8
tomato FF 63 47
turquoise 40 E0 D0
violet EE 82 EE
wheat F5 DE B3
white FF FF FF
whitesmoke F5 F5 F5
yellow FF FF 00
yellowgreen 9A CD 32

13.4. Indice et exposant

HTML 3 permet indice et exposant.
<SUB>
</ SUB>
et
<SUP>
</ SUP>
Exemple :
F<SUB>( x) </ SUB>=x<SUP>2</ SUP>+2x+10
Rsultat :
F
(x)
=x
2
+2x +10

13.5. Fond sonore

Permet de lancer un fond sonore.
A utiliser avec prcaution car les fichiers sons sont le plus souvent trs volumineux.
<BGSOUND SRC=" f i chi er _son" LOOP=" n" >
</ BGSOUND>
SRC=le nom du fichier son faire jouer pendant l'affichage de la page
Les types de fichiers accepts sont
o midi
o wav
o au

LOOP="n" spcifie que le morceau de musique sera jou n fois
Exemple :
<BGSOUND SRC=" hamst er . wav" LOOP=" 1" >
Rsultat :
Si vous avez allum vos hauts-parleurs, vous entendez l'exemple !
Charmant n'est-ce pas ?

13.6. Insertion Vido

Permet d'insrer une vido.
A utiliser avec prcaution car les fichiers videos sont le plus souvent trs volumineux.
<EMBED SRC=" f i chi er _vi deo" >
WI DTH=" l ar geur " HEI GHT=" haut eur "
ALI GN=" BOTTOM"
LOOP=" f al se"
</ EMBED>
SRC=le nom du fichier video
Les types de fichiers accepts sont
o mpeg
o mpg

WIDTH=largeur en pixels de la fentre

HEIGHT=hauteur en pixels de la fentre

ALIGN=alignement du texte et de la fentre :
"TOP", "BOTTOM", "LEFT", "RIGHT", "CENTER", "ABSMIDDLE",
"ABSBOTTOM"

LOOP="true" ou "false"
Exemple :
<EMBED SRC=" hal l way_r aces. mpg" LOOP=" t r ue" >
Rsultat :
Regardez et apprciez Charmant n'est-ce pas ?