Chapitre 4

Notions HTML de base pour faire des tableaux, ainsi qu'intégrer des
figures, des images fixes GIF ou JPEG dans une page.

Table des matières du chapitre

Objectifs et matériel d'apprentissage
Éléments du langage
Scénario(s) pédagogique(s)
Exercice(s) d'apprentissage
Lignes de code

Objectifs d'apprentissage
Maîtrise des éléments de base pour programmer différentes sortes de
tableaux.
Apprendre à insérer un dessin au format GIF ou JPEG (JPG) dans un
texte ou dans un tableau.
Apprendre à insérer un lien hypertexte dans un tableau.

Matériel d'apprentissage
- un navigateur Netscape;
- une application de type traitement de texte comme Simple Text ou
TeachText ou un traitement de texte (N.B.: sauvegarder en mode
texte).
- au moins un dessin au format GIF.
Au moyen de plusieurs programmes (cf.: Photoshop, De Babelizer) ou
utilitaires dont GraphConverter (voir son manuel d'instructions),
GIFConverter, GraphicConverter pour MacIntosh, font partie, vous
pouvez convertir un dessin en plusieurs formats dont ceux de GIF et
JPEG.

Description
GIF: "Graphics Interchange Format" de Compuserve conçu pour
transférer des images fixes (256 couleurs ou moins) entre des fichiers.
JPEG: Un standard du "Joint Photographic Experts Group", conçu pour
des photographies compressées.
 Tableau 1
Éléments du langage HTML nécessaires pour ce chapitre

Ouverture Fermeture Utilité

<TABLE> </TABLE> Délimitation du début et de la fin
d'un tableau.
<CAPTION </CAPTION> Placement d'un titre au-dessus
ALIGN=TOP> d'un tableau (BOTTOM: en
dessous, ce qui n'est pas
courant).
Taper sous TABLE et avant TR.
<TR> </TR> Rangée
<TH> </TH> Entête (gras, centré)
<TD> </TD> Données
<WIDTH="90%"> Largeur totale d'un tableau: % de
la largeur de la fenêtre. Il peut
aussi être spécifié en pixels (ex.:
WIDTH=450).
<PRE> </PRE> Tableau dont la disposition des
éléments est prédéfinie par
essais et erreurs, en utilisant la
barre d'espacement, par
exemple.
<TABLE </TABLE> Largeur de la bordure d'un
BORDER=n> tableau: 0 (absence de bordure),
10 (bordure large)
<TABLE BORDER </TABLE> Contour d'une image sans
CELLPADDING=0 bordure
>
<TD> </TD> Image de format .GIF intégrée à
<IMG SRC="nom une cellule de donnée (TD) d'un
de l'image.GIF"> tableau.
<TD> </TD> Image de format .JPEG intégrée à
<IMG SRC="nom une cellule de donnée (TD) d'un
de l'image.JPG"> tableau.
<TD> </OL> Liste (OL ou UL) intégrée à une
<OL> </TD> cellule de donnée d'un tableau.
<LI>
<LI>
<TD> </TD> Référence hypertexte dans un
<A HREF="#nom même document intégrée à une
de l'ancre"></A> cellule de donnée d'un tableau.

<A NAME="nom Indication d'un point d'ancrage,

de l'ancre"></A> i.e. qu'en s'y adressant, l'élément
ou le texte qui correspond à
l'ancre est affiché au haut de la
fenêtre du navigateur.

Scénario pédagogique
Plusieurs exemples variés, à reproduire et à observer ou à modifier,
sont données
Après des exercices de programmation de tableaux de plus en plus
complexes, on propose des exercices dans lesquels on demande
d'inclure des images fixes, des icônes animées dans une page html, et
finalement, on demande d'inclure les images dans les cellules de
tableaux. La conception d'animation d'icônes (animated GIF) sera
discutée dans un autre chapitre.
Pour faciliter la programmation des liens hypertextes, on suggère de
placer les images dans le même répertoire que les pages html. Bien
entendu, lorsqu'un grand nombre d'images est utilisé, il semble
préférable de les placer dans un répertoire réservé aux images.

Règles de programmation à suivre avec HTML

1Note: Dans un document comprenant plusieurs tableaux, il est de
mise de spécifier les largeurs des tableaux afin d'observer une
uniformité de présentation (cf.: WIDTH).
Exercice 4
Les images utilisées dans les exercices peuvent provenir de l'auteur
des pages, suite à une numérisation (numérisateur à plat ou vidéo), ou
d'un emprunt d'images d'un site Web ou d'un CD-ROM, par exemple.
Avant de les utiliser, il faut s'assurer que le format de chaque image
est .GIF ou .JPEG. Si ce n'est pas le cas, il est nécessaire de faire appel à
un convertisseur, et peut être à un utilitaire comme Transparency.

Exercice 4.1
Concevoir un tableau simple.

Exercice 4.2
Concevoir un tableau avec une ligne sous son titre.
Exercice 4.3
Concevoir un tableau avec PRE.

Exercice 4.4
Concevoir un tableau avec une bordure.
Exercice 4.5
Concevoir un tableau intégrant une image de format .GIF. ainsi qu'une
image de format .JPEG.
Exercice 4.6
Concevoir un tableau avec une bordure, intégrant une image.GIF et un
texte la décrivant.

Exercice 4.7
Concevoir un tableau avec une bordure, intégrant des liens.
Lignes de codes

<HTML>
<HEAD>
<TITLE>
Tableaux
</Title>
</HEAD>
<BODY>
<HR>

Exercice 4.1: Tableau simple<BR>

<TABLE>
<CENTER>
<CAPTION ALIGN=TOP>Tableau 1 <BR>Statistiques des
joueurs</CAPTION>
<BR>

<BR>

<TR>
<TH>Nom</TH><TH>Matchs</TH><TH>Buts</TH><TH>Aides</TH><TH>Total
</TH>
</TR>

<TR>
<TD>Jean Tire</TD><TD>30</TD><TD>50</TD><TD>1</TD><TD>51
</TD>
</TR>
<TR>
<TD>Jean Passe</TD><TD>30</TD><TD>1</TD><TD>50</TD><TD>51
</TH>
</TR>

</TABLE>
<HR>
</CENTER>
Exercice 4.2: Tableau avec une ligne sous son titre. <BR>

<CENTER>
<H3>
Tableau 1<BR>Statistiques des joueurs</H3>
<BR>
<HR>
<TABLE>

<BR>

<TR>
<TH>Nom</TH><TH>Matchs</TH><TH>Buts</TH><TH>Aides</TH><TH>Total
</TH>
</TR>
<TR>
<TD>Jean Tire</TD><TD>30</TD><TD>50</TD><TD>1</TD><TD>51
</TD>
</TR>
<TR>
<TD>Jean Passe</TD><TD>30</TD><TD>1</TD><TD>50</TD><TD>51
</TD>
</TR>

<TR>
<TD>Jean Paul</TD><TD>30</TD><TD>10</TD><TD>10</TD><TD>20
</TD>
</TR>

<TR>
<TD>Jean Pierre</TD><TD>20</TD><TD>1</TD><TD>1</TD><TD>2
</TD>
</TR>

<TR>
<TD>Jean Masse</TD><TD>10</TD><TD>0</TD><TD>3</TD><TD>3
</TD>
</TR>

</TABLE>
<HR>
</CENTER>
Exercice 4.3: Tableau avec PRE<BR>
<BR>

<PRE>
Tableau 1
Statistiques des joueurs
________________________________________________________
Nom Matchs Buts Aides Total

Jean Tire 30 50 1 51
Jean Passe 30 50 1 51
Jean Tire 30 50 1 51
_________________________________________________________

</PRE>
<HR>

<!-tableau avec une bordure->

Exercice 4.4: Tableau avec une bordure<BR>
<P>
<TABLE BORDER=2 WIDTH="90%"><TR>
<TH>Division</TH><TH>AA, BB, CC </TH><TH>A, B, C </TH>
</TR>
<TR>
<TD>Novice </TD><TD>0</TD><TD>125</TD>
</TR>

<TR>
<TD>Novice </TD><TD>0</TD><TD>125</TD>
</TR>
</TABLE>
<HR>
Exercice 4.5: Tableau avec un dessin de format GIF et un dessin de
format JPEG int&eacute;gr&eacute;s.<BR>
<!-image .GIF dans un tableau->
<P>
<TABLE BORDER CELLPADDING=0>
<TR>
<TD><CENTER><IMG SRC="Parrots.GIF"><CENTER></TD>
<TD><IMG SRC="Parrots.JPG"></TD>
<!-WIDTH=150 HEIGHT=100, pourraient être spécifiées pour l'image->
</TR>
<!-alternative à une image->
<TR><CENTER>
<TD><A HREF="fichier.html"><IMG SRC="pasd'image.GIF"
ALT="Photographie .GIF (32 ks)"><BR>
<CENTER>
Alternative &agrave; une image .GIF (32 Ks)<A></TD>
<TD><CENTER>Photographie .JPEG (20 Ks)</CENTER></TD>
</TR>

</TABLE>
<HR>
<P>
<!-photo .JPEG dans un tableau->

Exercice 4.6: illustration et description dans un tableau avec

bordure<BR>
<BR>
<TABLE BORDER=2>
<TR>
<TD><IMG SRC="extension.GIF" ></TD>
<TD>Etapes &agrave; suivre<BR>
<HR>
<OL>
<LI>S'asseoir et attacher sa ceinture.
<LI>Placer les jambes derri&egrave;re les coussins.
<LI>Faire une extension des genoux en deux secondes.
<LI>Fl&eacute;chir lentement les genoux &agrave; la position initiale en
trois secondes, sans appuyer la charge.
<LI>Recommencer les &eacute;tapes 1 &agrave; 4
</OL>
</TD>
</TABLE>
<HR>
Exercice 4.7: liens dans un tableau<BR>
<BR>
<!-incorporation d'un lien dans un tableau avec bordure->

<TABLE BORDER=2>
<TR>
<TH>Division</TH><TH>AA, BB, CC </TH><TH>A, B, C </TH>
</TR>
<TR>
<TD><A HREF="page.html">Novice </A></TD><TD>0</TD><TD>125</TD>
</TR>

<TR>
<TD><A HREF="page.html">Atome </A></TD><TD>20</TD><TD>95</TD>
</TR>

</TABLE>

</BODY>
</HTML>