LE HTML ( Les tableaux,Map, Sons)


TABLEAU FINAL
colonne 1colonne 2 colonne 3
ligne 11 - 11 - 21 - 3
ligne 22 - 12 - 2
ligne 33 - 2


Explications et construction:

Un tableau sera défini par un tag, nommé < TABLE > et fermé OBLIGATOIREMENT par un < /TABLE >.
La première ligne de votre tableau sera décrite avec les tag < TR > et < /TR >.
Entre, on construira la première ligne. Dans cette ligne, ici, on va mettre 3 colonnes.
Les colonnes seront définies par trois fois < TD >< /TD >, le contenu du tag TD étant celui de la case correspondante.

Et, ainsi de suite pour chaque lignes désirées!

Pour le titre, on utilise les tags < CAPTION > TITRE < /CAPTION >
WIDTH est employé pour imposer une largeur, absolue ou relative.
On ajoute BORDER pour spécifier une épaisseur de trait.
Pour mettre les nombres au milieu de leurs cellules on utilise les paramètres:
ALIGN="(LEFT, CENTER ou RIGHT)" pour l'alignement horizontal et
VALIGN="TOP, MIDDLE ou BOTTOM)" pour l'alignement vertical.
Pour indiquer la couleur, on utilise naturellement le paramètre bgcolor="#XXXXXX".
On peut augmenter l'épaisseur des traits des cellules à l'aide du paramètre CELLSPACING=2 dans < TABLE >.
Le paramètre CELLPADDING, qui se met au même endroit, permet d'augmenter la grandeur des cellules.

On obtient:

< TABLE BORDER=3 WIDTH="90%" CELLSPACING=2 CELLPADDING=5 >
< CAPTION >TABLEAU< /CAPTION >
< TR >< TH >< /TH >< TH WIDTH="30%">colonne 1< /TH >< TH WIDTH="30%">colonne 2< /TH >
< TH WIDTH="30%">colonne 3< /TH >< /TR >
< TR >< TH >ligne 1< /TH >< TD ALIGN="CENTER" bgcolor="#AAFF00">1 - 1< /TD >< TD ALIGN="CENTER" bgcolor="#FFBB00">1 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">1 - 3< /TD >< /TR >
< TR >< TH >ligne 2< /TH >< TD ALIGN="CENTER" bgcolor="#AAFF00">2 - 1< /TD >< TD ALIGN="CENTER" bgcolor="#FFBB00">2 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">2 - 3< /TD >< /TR >
< TR >< TH >ligne 3< /TH >< TD ALIGN="CENTER" bgcolor="#AAFF00">3 - 1< /TD >< TD ALIGN="CENTER" bgcolor="#FFBB00">3 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">3 - 3< /TD >< /TR >
< /TABLE >
TABLEAU
colonne 1colonne 2 colonne 3
ligne 11 - 11 - 21 - 3
ligne 22 - 12 - 22 - 3
ligne 33 - 13 - 23 - 3


Si nous voulons fondre en UNE SEULE cellule les 2-1 et 3-1,il faut mettre, dans le < TD > de la 2-1,
le paramètre ROWSPAN=2 qui signale que la cellule en question s'étale sur deux lignes.
Il faut alors effacer la cellule 3-1 et son TD.

Ce qui donne:

< TABLE BORDER=3 WIDTH="90%" CELLSPACING=2 CELLPADDING=5 >
< CAPTION >TABLEAU< /CAPTION >
< TR >< TH >< /TH >< TH WIDTH="30%">colonne 1< /TH >< TH WIDTH="30%">colonne 2< /TH >
< TH WIDTH="30%">colonne 3< /TH >< /TR >
< TR >< TH >ligne 1< /TH >< TD ALIGN="CENTER" bgcolor="#AAFF00">1 - 1< /TD > < TD ALIGN="CENTER" bgcolor="#FFBB00">1 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">1 - 3< /TD >< /TR >
< TR >< TH >ligne 2< /TH>< TD ALIGN="CENTER" ROWSPAN=2 bgcolor="#CC9900">2 - 1< /TD >< TD ALIGN="CENTER" bgcolor="#FFBB00">2 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">2 - 3< /TD >< /TR >
< TR >< TH >ligne 3< /TH>< TD ALIGN="CENTER" bgcolor="#FFBB00">3 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">3 - 3< /TD >< /TR >
< /TABLE >

SOIT:
TABLEAU
colonne 1colonne 2 colonne 3
ligne 11 - 11 - 21 - 3
ligne 22 - 12 - 22 - 3
ligne 33 - 23 - 3


De la même manière, le paramètre COLSPAN=2 nous servira à fusionner les cellules 2-2 et 2-3 :
Ne pas oublier de supprimer la cellule 2-3

Ce qui donne:

< TABLE BORDER=3 WIDTH="90%" CELLSPACING=2 CELLPADDING=5 >
< CAPTION >TABLEAU< /CAPTION >
< TR >< TH >< /TH >< TH WIDTH="30%">colonne 1< /TH >< TH WIDTH="30%">colonne 2< /TH >
< TH WIDTH="30%">colonne 3< /TH >< /TR >
< TR >< TH >ligne 1< /TH >< TD ALIGN="CENTER" bgcolor="#AAFF00">1 - 1< /TD >< TD ALIGN="CENTER" bgcolor="#FFBB00">1 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">1 - 3< /TD >< / TR>
< TR >< TH >ligne 2< /TH >< TD ALIGN="CENTER" ROWSPAN=2 bgcolor="#CC9900">2 - 1< /TD >< TD ALIGN="CENTER" COLSPAN=2 bgcolor="#FFBB00">2 - 2< /TD >< /TR >
< TR >< TH >ligne 3< /TH >< TD ALIGN="CENTER" bgcolor="#FFBB00">3 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">3 - 3< /TD >< /TR >
< /TABLE >

Soit:

TABLEAU
colonne 1colonne 2 colonne 3
ligne 11 - 11 - 21 - 3
ligne 22 - 12 - 2
ligne 33 - 23 - 3


Pour supprimer la cellule 3-3, il suffit de l'effacer et de changer la couleur pour retrouver le "TABLEAU FINAL"

< TABLE BORDER=3 WIDTH="90%" CELLSPACING=2 CELLPADDING=5 >
< CAPTION >TABLEAU FINAL< /CAPTION >
< TR >< TH >< /TH >< TH WIDTH="30%">colonne 1< /TH >< TH WIDTH="30%">colonne 2< /TH > < TH WIDTH="30%">colonne 3< /TH >< /TR >
< TR >< TH >ligne 1< /TH >< TD ALIGN="CENTER" bgcolor="#AAFF00">1 - 1< /TD >< TD ALIGN="CENTER" bgcolor="#FFBB00">1 - 2< /TD >< TD ALIGN="CENTER" bgcolor="#88BBFF">1 - 3< /TD >< /TR >
< TR >< TH >ligne 2< /TH >< TD ALIGN="CENTER" ROWSPAN=2 bgcolor="#CC9900">2 - 1< /TD >< TD ALIGN="CENTER" COLSPAN=2 bgcolor="#66BB33">2 - 2< /TD >< /TR >
< TR >< TH >ligne 3< /TH >< TD ALIGN="CENTER" bgcolor="#AA88CC">3 - 2< /TD >< /TR >
< /TABLE >

SOIT:

TABLEAU FINAL
colonne 1colonne 2 colonne 3
ligne 11 - 11 - 21 - 3
ligne 22 - 12 - 2
ligne 33 - 2


La différence provient des valeurs données à CELLSPACING et CELPADDING!




Utilisation des listes comme dans Word:

< UL >
< LI >un
< LI >deux
< LI >trois
< /UL >

Pour afficher une série ordonnée, on utilise le tag < UL >, puis on va mettre un tag < LI > qui indique que ce qui suit est un élément de liste.
Après le LI, on va donc mettre le premier élément. Puis dessous on met un autre < LI > avec le 2eme élément. etc...
N'oubliez pas de fermer votre < /UL >.Par contre < /LI >n'est pas requis

Vous noterez l'apparition de ronds, que l'on peut remplacer par des carrés en mettant, dans le < UL >, un paramètre TYPE="square".
Du moins avec les navigateurs récents!

< UL TYPE="square" >
< LI >un
< LI >deux
< LI >trois
< /UL >


< OL >
< LI >un
< LI >deux
< LI >trois
< /OL >

Pour une liste ordonnée, on utilise le tag < OL >aulieu de < UL >.

  1. un
  2. deux
  3. trois
< OL TYPE="a" >
< LI >un
< LI >deux
< LI >trois
< /OL >

On peut changer le type de numérotation des liste ordonnées par TYPE="I", "i", "A", "a", etc...
  1. un
  2. deux
  3. trois



L'image MAP

Il s'agit d'une image au format GIF ou JPG, qui sera affichée dans la page, et sur laquelle sont définies diverses zones sur lesquelles on peut cliquer, et qui conduisent à divers liens.

essai map

Le lien se trouve sur le feuillage de l'arbre!

< MAP NAME="mon_image_map" >
< AREA SHAPE="circle" COORDS="50,120,40" HREF="exempleframes.html" ALT="essai map" >
< /MAP >
< IMG SRC="home.gif" USEMAP="#mon_image_map" >

Le paramètre SHAPE peut avoir deux valeurs:
"rect" qui définira une zone rectangulaire. Les coordonnées sont X , Y de départ, X, Y d'arrivée.
"circle" qui définira une zone circulaire. Il n'y a que trois paramètres, X et Y du centre, et R le rayon.
Tout ceci est exprimé en pixels.




Morceau musical?

Si vous voulez mettre des morceaux MIDI, des sons WAV, des films MPEG dans vos pages, utilisez la commande: EMBED.

< EMBED SRC="fichier" AUTOSTART="true" WIDTH=xxx HEIGHT=yyy >

Le fichier est celui que vous voulez jouer( ne pas oubliez l'extension).
Autostart="true" signifie que le fichier se lancera automatiquement, si l'utilisateur a le plug-in adéquate.
Utilisez plutôt des fichiers MID qui sont légers.
Width et height sont les dimensions du panneau de contrôle qui apparaît dans votre navigateur(max 145x60).
.Mettez-les à zéro,le panneau disparaîtra; mais il permet de commander la marche ou l'arret du son.



Une autre commande plus simple et moins lourde peut-être utilisée:

< bgsound src="fichier" loop="infinite" >

"infinite" réalise le morceau en boucle sans fin.
Mais attention de ne pas mettre les deux ensemble!!!bonjour la cacophonie!


SOMMAIRE HTML

RETOUR vulgarisation