|
Quelques images sur votre site Web le rendront plus attractif. Cependant il ne faut
pas sombrer dans l'excès car les images impliquent un temps de chargement
assez long.
Les images peuvent être sur le même ordinateur que la page ou bien
ailleurs sur un autre site (il faudra veiller à ce que l'image soit alors accessible).
Il y a grossièrement deux formats d'images que vous pouvez inclure dans votre page:
- Les images JPEG (.JPG): les images ayant un grand nombre de couleurs seront bien compressées, c'est-�-dire
qu'elles prendront moins de place, donc nécessiteront un temps de chargement moindre)
- Les images GIF: Leur taille est faible dans le cas d'images avec peu de couleurs, ce format permet en outre d'avoir
des images entrelacées (qui s'affichent progressivement) et des images dont on définit une couleur comme transparente
On utilise le marqueur <IMG> pour inclure une image, il ne crée pas de retour à la ligne.
Ses trois principaux attributs sont:
- SRC: Indique l'emplacement de l'image (il est obligatoire)
- ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent.
Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous)
- ALT:Permet d'afficher un texte lorsque l'image ne s'affiche pas
Ainsi pour insérer une image, il faudra saisir un marqueur du type suivant :
<IMG SRC="url/image.gif|url/image.jpg" ALT="Texte remplaçant l'image">
|
Sous Netscape 6, l'attribut ALT de la balise IMG ne fonctionne plus. Pour y remédier il est possible
d'utiliser l'attribut "TITLE", fonctionnant aussi bien sous Internet Explorer que sous Netscape. |
| Attribut |
Valeur |
Résultat |
Effet Visuel |
| SRC |
|
Adresse de l'image |
|
| BORDER=n |
|
Nombre de pixels de la bordure.
Sa couleur se définit dans l'attribut
LINK ou TEXT de la balise <BODY>. Par défaut l'attribut Border vaut 1 ce qui crée un petit cadre autour de l'image. Pour ne pas avoir ce désagrément pensez � le définir comme étant égal à 0. |
 |
| HSPACE |
|
Nombre de pixels d'ajustement
entre l'image et le texte adjacent |
Texte |
| VSPACE |
|
Nombre de pixels d'ajustement
entre l'image et le texte au-dessus |
| WIDTH |
|
Taille horizontale (en pixels ou en %). |
| HEIGHT |
|
Taille verticale (en pixels ou en %). |
|
| LOWSRC |
URL |
Image alternative (plus petite), affich�e le temps que la vraie image soit charg�e par le navigateur du client. |
Les images s'insèrent dans le texte comme un caractère, ainsi il semble impossible
de faire s'écouler du texte le long d'une image.
Il existe en fait plusieurs façons, nous allons en voir deux:
- La première consiste à créer un tableau
avec une ligne et deux colonnes, dans lesquelles on met l'image et le texte.
- La seconde (moins précise) consiste à aligner l'image à gauche
ou à: droite avec l'attribut ALIGN puis de taper son texte. Il suffit, pour
arrêter cet enveloppement de mettre l'attribut CLEAR.
On peut créer à l'intérieur même d'une image des zones
cliquables.
Cela est possible grâce à l'attribut USEMAP utilisé conjointement
avec la balise <MAP> ... </MAP>.
L'attribut USEMAP de la balise <IMG> pointe vers la balise <MAP>
contenant le découpage.
La balise <MAP> a pour attribut le nom qu'on lui donne (NAME="nom") et contient
les zones cliquables déclarées par les balises <AREA> ... </AREA>.
| Balise |
Attribut |
Valeur |
Effet Visuel |
| <MAP> ... </MAP> |
NAME |
|
|
| <AREA> |
SHAPE |
RECT
CIRCLE
POLY
|
Rectangle (ses coordonn�es sont:
"abscisse sup gauche, ordonnée sup gauche,
abscisse inf droit, ordonnée inf droit")Cercle
(ses coordonn�es sont:
"abscisse centre, ordonnée centre, rayon")
Polygone (ses coordonnées sont:
"la suite des coordonnées s�par�es par des
virgules")
|
| HREF="url" |
|
Lien vers l'URL |
COORDS=
"XX,XX,XX,XX" |
|
Contient les coordonnées de la zone
cliquable entre guillemets et
s�parées par des virgules |
Voici ci-dessous un exemple d'image réactive :
<IMG SRC="../images/image.gif" WIDTH=150 HEIGHT=70
USEMAP="#Map">
<MAP NAME="Map">
<AREA SHAPE="rect"
HREF="debut.html"
COORDS="0,0,48,28">
<AREA SHAPE="circle"
HREF="precedent.html"
COORDS="50,30,10">
<AREA SHAPE="poly"
HREF="suivant.html"
COORDS="60,50,80,30,100,40,50,100">
</MAP>
Tableaux, frames et Formulaires
 Les Tableaux
|
On a souvent besoin de présenter des informations mieux structurées qu'avec
des listes. Les tableaux permettent de les afficher en lignes et en colonnes.
Les tableaux sont définis comme étant des suites de lignes.
Le tableau est encadré par les marqueur <TABLE> et </TABLE>.
Le titre du tableau est encadrée par <CAPTION> </CAPTION>
Chaque ligne est encadrée par <TR> </TR> (Table row: Ligne du tableau)
Les cellules d'en-tête sont encadrées par <TH> </TH> (Table header: En-tête du tableau)
Les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau)
Par exemple le tableau:
<TABLE BORDER="1">
<CAPTION> Voici le titre du tableau </CAPTION>
<TR>
<TH> Titre A1 </TH>
<TH> Titre A2 </TH>
<TH> Titre A3 </TH>
<TH> Titre A4 </TH>
</TR>
<TR>
<TH> Titre B1 </TH>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
donne le résultat suivant:
Voici le titre du tableau
| Titre A1 |
Titre A2 |
Titre A3 |
Titre A4 |
| Titre B1 |
Valeur B2 |
Valeur B3 |
Valeur B4 |
| Attribut |
Balises auxquelles il s'applique |
Valeur |
Effet Visuel |
|---|
| ALIGN |
THEAD
TBODY
TH
TR
TD
|
CENTER LEFT
RIGHT
JUSTIFY
|
centr� gauche
droite
justifi�
|
| CAPTION |
TOP BOTTOM
|
au-dessus en-dessous
|
VALIGN
(alignement vertical) |
THEAD
TBODY
TH
TR
TD |
TOP MIDDLE
BOTTOM
|
en haut au milieu
en bas
|
| BORDER=n |
TABLE |
|
taille de la bordure |
| CELLPADDING=n |
TABLE |
|
espacement de n pixels entre le contenu
des cellules et son encadrement |
| CELLSPACING=n |
TABLE |
|
Epaisseur de la grille int�rieure |
| FLOAT |
TABLE |
RIGHT LEFT
|
Sp�cifie la position du texte qui suivra
</TABLE> |
| COLS=n |
TABLE |
|
Sp�cifie le nombre de colonnes |
| FRAME (contr�le les �l�ments
individuels d'encadrement
du tableau)
|
TABLE |
NONE TOP
BOTTOM
TOPBOT
SIDES
ALL
|
aucun au-dessus
en bas
tout en haut
sur les cot�s
tous
|
| RULES (contr�le les �l�ments
de la grille des cellules)
|
TABLE |
NONE BASIC
ROWS
COLS
ALL
|
aucun basique
ligne
colonne
tous
|
| COLSPAN |
THEAD
TBODY
TH
TR
TD |
|
Fait d�border les cellules sur les colonnes
adjacentes |
| ROWSPAN |
THEAD
TBODY
TH
TR
TD |
|
Fait d�border les cellules sur les lignes
adjacentes |
|
Les Frames
|
Gr�ce � la technologie des frames (en français "cadres") il est d�sormais possible
d'afficher plusieurs page HTML dans diff�rentes zones ou cadres.
Pour ce faire il faut un fichier qui contiendra l'agencement
des cadres, c'est un fichier HTML qui a pour particularit�
d'avoir sa balise <BODY> remplac�e par le conteneur
<FRAMESET>. C'est cette balise qui d�finit les cadres par
leur dimension en pixels ou en pourcentage (%).
Voyons ceci sur 3 exemples:
- 2 cadres verticaux
- 2 cadres horizontaux
- 2 cadres horizontaux et un vertical
Exemple n�1
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAME SRC="frame2.htm" NAME="droite">
</FRAMESET>
Exemple n�2
<FRAMESET ROWS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="haut">
<FRAME SRC="frame2.htm" NAME="bas">
</FRAMESET>
Exemple n�3
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm"
NAME="droit_haut">
<FRAME SRC="frame3.htm"
NAME="droit_bas">
</FRAMESET>
| Attribut |
Valeur |
Action |
| Rows |
pourcentage (entre 1 et 100)
valeur en pixels
En fixant une seules des valeurs et en laissant l'autre
champ libre, la valeur s'ajuste automatiquement |
Cadre horizontal |
| Cols |
pourcentage (entre 1 et 100)
valeur en pixels
En fixant une seules des valeurs et en laissant l'autre
champ libre, la valeur s'ajuste automatiquement |
Cadre vertical |
| Frameborder |
YES
NO |
Indique si le cadre a une bordure
ou non |
| Border=n |
n est une valeur d�finissant la
taille de la bordure |
Indique la taille de la bordure |
| Bordercolor |
Nom de la couleur
Valeur de la couleur en hexad�cimal |
Indique la couleur de la bordure |
| Framespacing=n |
n est une valeur d�finissant
l'espace entre les cadres |
Indique l'espace entre les cadres |
La balise <FRAME> permet de d�finir un
ou plusieurs cadres au sein de la balise <FRAMESET>
| Attribut |
Valeur |
Action |
| Src |
URL |
D�finit l'emplacement de la page
� afficher dans le cadre |
| Name |
"nom" |
D�finit un nom qui permettra
d'afficher un autre document dans le cadre g�ce �
l'attribut Target |
| Marginwidth=n |
n est un entier sp�cifiant le
nombre de pixels |
Taille des marges lat�rales |
| Marginheight=n |
n est un entier sp�cifiant le
nombre de pixels |
Taille des marges du haut et du bas |
| Frameborder |
YES
NO |
D�termine si les cadres auront ou
non une bordure |
| Border=n |
n est un entier sp�cifiant le
nombre de pixels |
Taille de l'espace entre les cadres
(uniquement pour Netscape) |
| Noresize |
(Aucune) |
Interdit � l'utilisateur de
redimensionner les cadres (Ce n'est pas la valeur par
d�faut) |
| Scrolling |
YES
NO
AUTO |
Permet ou non l'affichage d'une
barre de d�filement (Auto
laisse le navigateur d�cider de son utilit�) |
On utilisera les balises <NOFRAMES> et </NOFRAMES>
permettant de sp�cifier un texte HTML � afficher en cas de
navigateur ne permettant pas d'afficher les frames. Le texte
entre les balises <NOFRAMES> et </NOFRAMES> doit donc
contenir les balises <BODY> ... </BODY>.
Exemple :
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAME SRC="frame2.htm" NAME="droite">
</FRAMESET>
<NOFRAMES>
<BODY>
Cette page HTML n�cessite un navigateur supportant les frames,
veuillez nous en excusez
</BODY>
</NOFRAMES>
Pour faire afficher des liens dans un des cadres, il suffit
d'utiliser l'attribut target dans la balise <A HREF ..>
pour sp�cifier le nom du cadre qui a �t� sp�cifi� dans la
balise <FRAME> par l'attribut NAME.
Par exemple: <A HREF="page.htm" TARGET="gauche">
| Valeur |
Action |
| _self |
Affiche la cible dans le m�me
cadre que le lien |
| _parent |
Affiche la cible dans le cadre de
niveau sup�rieur |
| _blank |
Affiche la cible dans une nouvelle
fen�tre |
| _top |
Affiche la cible dans la fen�tre
enti�re du navigateur |
Les formulaires interactifs permettent aux auteurs de pages Web de dialoguer
avec leurs lecteurs, un peu comme les coupons-réponse que l'on trouve
dans les magazines.
Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons,
puis appuie sur un bouton de soumission (submit)
pour l'envoyer soit à un URL, c'est-à-dire de façon générale
à une adresse e-mail ou à un script CGI
(Common Gateway Interface, traduisez "Interface de passerelle généralisée") stocké
sur un serveur et écrit dans un langage de programmation comme un shell UNIX, PERL, TCL, Applescript, etc.
Les formulaires sont délimités par le marqueur <FORM> ... </FORM>,
une balise qui permet de regrouper plusieurs éléments de formulaire (boutons,champs de saisie,...) et qui possède
les attributs obligatoires suivants:
- METHOD indique sous quelle forme seront envoyées les réponses
"POST" est la valeur qui correspond à un envoi de données stockées
dans le corps de la requête, tandis que "GET" correspond à un envoi des données
codées dans l'URL, et séparées de l'adresse du script par un point d'interrogation
(pour plus de renseignement sur les méthodes POST et GET, consultez l'article sur le protocole HTTP)
- ACTION indique l'adresse d'envoi (script CGI ou adresse email (mailto:adresse.email@machine))
La balise FORM possède comme attribut facultatif ENCTYPE qui spécifie le codage des données
dans l'URL, toutefois il n'est pas nécessaire de le préciser car la valeur attribuée par défaut
(application/x-www-form-urlencoded) est la seule valeur valide. L'attribut facultatif ACCEPT permet de définir
les types MIME des données pouvant être envoyées par le formulaire.
Voici la syntaxe de la balise FORM:
<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>
Voici quelques exemples de balises FORM:
<FORM METHOD=POST ACTION="mailto:[email protected]">
<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">
La balise FORM constitue en quelque sorte un conteneur permettant de regrouper
des éléments qui vont permettre à l'utilisateur de choisir ou
de saisir des données, ensemble de données qui seront envoyées
à l'URL indiqué dans l'attribut ACTION de la balise FORM
par la méthode indiquée par l'attribut METHOD.
Il est possible d'insérer n'importe quel élément HTML de base
dans une balise FORM (textes,boutons,tableaux,liens,...) mais il est surtout
intéressant d'insérer des éléments interactifs. Ces
éléments interactifs sont:
- La balise INPUT: un ensemble de boutons et de champs de saisie
- La balise TEXTAREA: une zone de saisie
- La balise SELECT: une liste à choix multiples
Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les données
présentes dans le formulaire sont envoyées au script CGI sous forme de paires
nom/valeur, c'est-à-dire un ensemble de données représentées par le
nom de l'élément de formulaire, le caractère "=", puis la valeur
associée. L'ensemble de ces paires nom/valeur étant séparées entre elles
par des esperluettes (caractère &). Les données envoyées ressembleront donc à
ceci:
champ1=valeur1&champ2=valeur2&champ3=valeur3
Dans le cas de la méthode GET (envoi des données à travers l'URL),
l'URL ressemblera à une chaîne du genre:
http://www.commentcamarche.net/cgi-bin/script.cgi?champ1=valeur1&champ2=valeur2&champ3=valeur3
La balise INPUT est la balise essentielle des formulaires, car elle permet
de créer un bon nombre d'éléments "interactifs".
La syntaxe de cette balise est la suivante:
<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément">
L'attribut name est essentiel car il permettra au script CGI de connaître le
champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ
sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur,
ou dans le cas contraire de la valeur par défaut repéré par l'attribut value.
L'attribut type permet de préciser le type d'élément que
représente la balise INPUT, voici les valeurs que ce champ peut prendre:
- checkbox: il s'agit de cases à cocher pouvant admettre deux états:
checked (coché) et unchecked (non coché). Lorsque la case est coché
la paire nom/valeur est envoyée au CGI
- hidden: il s'agit d'un champ caché. Ce champ non visible sur le formulaire
permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire
nom/valeur
- file: il s'agit d'un champ permettant à l'utilisateur de préciser
l'emplacement d'un fichier qui sera envoyé avec le formulaire. Il faut dans ce cas préciser
le type de données pouvant être envoyées grâce à l'attribut ACCEPT
de la balise FORM
- image: il s'agit d'un bouton de soumission personnalisé, dont l'apparence
est l'image situé à l'emplacement précisé par son attribut SRC
- password: il s'agit d'un champ de saisie, dans lequel les caractères
saisis apparaissent sous forme d'astérisques afin de camoufler la saisie de l'utilisateur
- radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposés
(l'ensemble des boutons radios devant porter le même attribut name. La paire nom/valeur
du bouton radio sélectionné sera envoyé au CGI. Un attribut checked
pour un des boutons permet de préciser le bouton sélectionné par défaut
- reset: il s'agit d'un bouton de remise à zéro permettant uniquement
de rétablir l'ensemble des éléments du formulaire à leurs valeurs par
défaut
- submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le
texte du bouton peut être précisé grâce à l'attribut value
- text: il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte.
La taille du champ peut être définie à l'aide de l'attribut size et la
taille maximale du texte saisi grâce à l'attribut maxlength
La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à
la simple ligne de saisie que propose la balise INPUT. Cette balise possède les attributs
suivants:
- cols: représente le nombre de caractères que peut contenir une ligne
- rows: représente le nombre de lignes
- name: représente le nom associé au champ, c'est le nom qui permettra d'identifier
le champ dans la paire nom/valeur
- readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut
dans le champ
- value: représente la valeur qui sera envoyée par défaut au script si le champ
de saisie n'est pas modifié par une frappe de l'utilisateur
La balise SELECT permet de créer une liste déroulante
d'éléments (précisés par des balises OPTION
à l'intérieur de celle-ci). Les attributs de cette balise sont:
- name: représente le nom associé au champ, c'est le nom qui permettra d'identifier
le champ dans la paire nom/valeur
- disabled: permet de créer une liste désactivée, c'est-à-dire affichée
en grisée
- size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande
que le nombre d'éléments effectifs dans la liste)
- multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste
Les formulaires peuvent être mis en page à l'aide de tableaux (cela est même
conseillé pour avoir une mise en page soignée). Voici un exemple récapitulant
les points ci-dessus et montrant comment mettre en page un formulaire à l'aide d'un tableau:
<FORM method=post action="cgi-bin/script.pl">
Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<INPUT type=text name="nom">
</TD>
</TR>
<TR>
<TD>Prénom</TD>
<TD>
<INPUT type=text name="prenom">
</TD>
</TR>
<TR>
<TD>Sexe</TD>
<TD>
Homme : <INPUT type=radio name="sexe" value="M">
<br>Femme : <INPUT type=radio name="sexe" value="F">
</TD>
</TR>
<TR>
<TD>Fonction</TD>
<TD>
<SELECT name="fonction">
<OPTION NAME="enseignant">Enseignant</OPTION>
<OPTION NAME="etudiant">Etudiant</OPTION>
<OPTION NAME="ingenieur">Ingénieur</OPTION>
<OPTION NAME="retraite">Retraité</OPTION>
<OPTION NAME="autre">Autre</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Commentaires</TD>
<TD>
<TEXTAREA rows="3" name="commentaires">Tapez ici vos commentaires</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Envoyer">
</TD>
</TR>
</TABLE>
</FORM>
Voici le résultat de ce code HTML
| Balise |
Attribut |
Valeur |
Résultat |
Effet Visuel |
| <FORM> ... </FORM> |
METHOD |
POST
GET |
|
|
| ACTION |
|
envoie � l'adresse indiqu�e |
|
| ENCTYPE |
|
spécifie le type de codage utilisé |
|
| <INPUT> |
TYPE |
submit |
effectue l'ACTION dans le marqueur <FORM> |
|
| text |
simple ligne de texte dont la longueur
est donn�e par l'attribut size |
|
| reset |
efface le contenu du formulaire |
|
| radio |
bouton radio |
|
| checkbox |
case � cocher |
|
| NAME |
|
Nom |
|
| SIZE |
|
Taille du texte |
|
| <TEXTAREA> ... </TEXTAREA> |
NAME |
|
Zone de texte |
|
| ROWS |
|
| COLS |
|
<SELECT>
<OPTION> ... </OPTION>
</SELECT>
|
NAME |
|
|
|
| MULTIPLE |
|
Plusieurs choix possibles |
|
| <OPTION> ... </OPTION> |
SELECTED |
Option par d�faut |
|
|
| VALUE |
Valeur forc�e |
|
|
