Premiers pas en HTML
(02)
Un guide pour vos débuts...
cuy copyleft
See You Why ?

précédent (01) | menu (00) | suite (03)


Images en ligne

La plupart de browsers navigateurs (MSIE, Firefox, Google Chrome ou Netscape) sont capables d'afficher des images en ligne (c-à-d. des images incluses dans votre texte), à condition qu'elles soient de format : X Bitmap (XBM), GIF, PNG ou JPEG.

ATTENTION : chaque image prend de la place sur le serveur, prend du temps à downloader et ralentit donc l'affichage de vos pages HTML. Songez à ne pas transformer le "World Wide Web" en "World Wide Wait". Pour cela, prenons garde au nombre d'images et à leur taille.

Pour inclure une image dans une page HTML , entrez simplement :

    <IMG SRC=Nom de l'image>

Nom de l'image est l'URL de ce fichier image.

Il n'y a pas de balise fermante de la balise <img>. N'oublions donc pas qu'en XHTML et en HTML5, on devra ou préférera noter :

<IMG SRC=Nom de l'image /> avec l'uage de guillemets autour de Nom de l'image

La syntaxe pour les URLs de type <IMG SRC> est la même que celle utilisée dans les "ancres" de type HREF.
Si l'image est de format GIF, alors le nom de fichier Nom de l'image doit se terminer par l'extension .gif ; ce format permet l'emploi d'images animées et transparentes.
Les fichiers de format XBitmap doivent avoir l'extension .xbm ; ils sont peu utilisés.
Ceux de format JPEG (format compressé d'image) doivent se terminer par l'extension de fichier .jpg ou .jpeg .
Enfin, les fichiers de format " Portable Network Graphic" doivent, eux, se terminer par l'extension .png ; ils étaient également peu utilisés, mais le sont de plus en plus.

une image transparente (le fond "passe à travers")

une image animée et transparente

une image non transparente

 

Attributs de la taille des images

Deux autres attributs sont fréquemment utilisés avec les tags <IMG> pour signaler à votre browser, les dimensions de l'image qu'il devra afficher ; il s'agit des tags HEIGHT et WIDTH qui signalent à votre browser la place [en pixels, c-à-d en Picture elements] qu'il doit attribuer (ou laisser libre) à l'image qu'il "downloade" dans le texte qu'il "downloade".
La majorité des logiciels qui "travaillent" les images (GIMP, PhotoEditor, Paint Shop Pro, Adobe PhotoShop, etc.) pourront vous renseigner quant au nombre de "pixels" qu'occupe une image. Certains browsers vous donnent la même information, avant d'afficher l'image.

Si, par exemple, vous souhaitez inclure une image (appelons-la "logocuy" de format GIF) qui doit avoir les dimensions voulues dans votre page Web, vous écrirez (de préférence en employant des guillemets après chaque attribut qui suit le signe =) :

    <IMG SRC=logocuy.gif HEIGHT=100 WIDTH=65>

NOTE: Certains browsers utilisent les attributs de tags HEIGHT et WIDTH pour étendre ou comprimer une image qui ne peut exactement se "glisser" dans l'espace qu'on lui attribue. Ce n'est cependant pas le cas de tous les browsers et l'extension et/ou la compression de l'image ne sont pas toujours appliquées... au risque de déformer l'image selon le browser qu'utilise votre lecteur.
Un conseil, dès lors : veillez à respectez la proportionalité des images dans l'espace que vous leur consacrez.

Alignement des Images

Vous disposez de plusieurs options, lorsque vous voulez afficher des images. Vous pouvez avoir des images liées ou séparées du texte ; alignées à gauche, à droite ou centrées. Vous pouvez aussi avoir des images qui s'alignent sur le texte de votre page. Essayez ces différentes options et faites votre choix.

Alignement du Texte avec une Image
[CUY?] Par défaut, le bas de l'image est aligné sur le texte qui suit dans le paragraphe. Vous pouvez changer cette option en utilisant les tags adéquats pour les aligner au centre ou sur le haut de l'image.
Les tags (balises) ALIGN= attributs TOP et CENTER servent à cela.

[CUY?] Ce texte sera aligné avec le haut de l'image si vous écrivez :

<IMG SRC = "../pix/logocuy.gif" ALT="[CUY?]" ALIGN=TOP>

Remarquez que le navigateur n'aligne que la première ligne de texte à votre demande, le reste étant noté sous l'image.

[Home : travaux en cours] Ce texte sera aligné avec le centre de l'image si vous avez écrit (<IMG SRC = "picine.jpg" ALT="[Home : travaux en cours]" ALIGN=CENTER>). Ici encore, seule la première ligne de texte s'aligne à votre demande, le reste étant noté sous l'image.

Images sans texte
Pour faire apparaître une image sans qu'un texte lui soit associé, faites en un paragraphe séparé et utilisez les attributs de paragraphes ALIGN= pour centrer votre image ou l'aligner à droite (voir ci-après).

<p ALIGN=CENTER>
<IMG SRC = "logocuy.gif" ALT="[CUY?]"> 
</p>
qui donnera comme résultat :

[CUY?]

L' image est placée au centre et le paragraphe suivant (celui-ci) commence normalement et justifié à gauche.

Texte ALTernatif pour images[ALT]

Certains browsers du WWW (principalement ceux qui traitent essentiellement du texte comme Lynx ne peuvent pas afficher d'images ; certains surfeurs refusent de charger des images pour accélérer leur "séjour" sur le Net (option parfois employée par ceux qui ont des modems lents). Le langage HTML fournit un moyen (un tag) d'informer les lecteurs de l'image qu'ils ne peuvent pas voir sur la page visitée.
Placez votre curseur sur les images ci-dessus et vous voyez un texte apparaître ; c'est l'attribut ALT qui fait apparaître ce texte à la place de l'image et c'est l'attribut TITLE qui fait apparaître le texte en phylactère près de l'image. Ces deux textes ne doivent pas être identiques. Vous pourriez, par exemple écrire :

      <a href="#top"><center><img src="../pix/bckblow.gif" alt="Top" title="Top"
      align=center border=0 hspace=10 width=62 height=32> = Retour menu</center></a>

pour voir apparaître, si vous n'avez pas choisi de faire apparaître les images :

Top = Retour menu

ou, pour voir apparaître, si vous avez choisi de faire apparaître les images :

Top = Retour menu

bckblow.gif est l'image que vous avez choisie pour indiquer le retour au menu (flèche ou autre).
Avec les browsers capables de visualiser des images et qui ont activé la visualisation, vous verrez l'image (la flèche) ; avec les autres browsers ou ceux qui ont désactivé la visualisation, vous verrez le mot "Top" en lieu et place de l'image.
Une tendance plus actuelle est d'y ajouter l'attribut TITLE qui fait apparaître un texte en phylactère à proximité de l'image.

Employer un message ALTernatif, c'est respecter le choix de votre lecteur tout en l'informant de ce qu'il ne voit pas... par respect pour ses choix, donnez-lui l'information et n'hésitez pas à faire usage des "textes ALTernatifs pour images". Merci pour eux !

Images et cadres

Une image peut apparaître avec ou sans cadre, et le cadre peut être d'épaisseur différente, c'est l'attribut BORDER qui fixera cette épaisseur (0 indique une épaisseur nulle, donc pas de cadre et 12 une épaisseur de 12 pixels, donc relativement épaisse) [tout autre choix est permis ;-) ] :

De plus, un espace peut être préservé autour de l'image, zone qui garantit que rien ne sera écrit dans cette espace ; une sorte de marge invisible autour de l'image. C'est l'argument HSPACE ou VSPACE qui détermine cet espace horizontalement ou verticalement. Aviez-vous remarqué que ce paramètre était présent dans l'exemple ci dessus ? En effet, le texte "gauche|droite" ne colle pas aux images... et ci-dessous, le HSPACE de la deuxième image sera porté à 30 au lieu de 10... observez...

Topgauche|droite Top

Images utilisées comme Hyperliens

Des images peuvent servir d'hyperliens, au même titre qu'un texte ; lorsque votre lecteur placera son curseur sur cette image, il verra la flèche se transformer en main.
Le code HTML qui suit :

<a href="#top"><center><img src="bckblow.gif" alt="Top" title="Top"
 align=center border=0 hspace=10 width=62 height=32> </a>

produira l'effet suivant (selon l'activation ou le browser utilisé ; passez avec votre souris au-dessus des images — présentes ou absentes  — ci après) :

Top

Top

Par défaut, une image hyperlien se place au début d'une nouvelle ligne et est entourée d'une cadre bleu (ou de la couleur des hyperliens, si des changements ont été faits dans la configuration, comme ici sur les pages de CUY). Si l'on supprime les différents attributs montrés dans le code ci-dessus, on obtiendrait l'hyperlien suivant :

Top (Suppression des attributs BORDER qui précisent l'épaisseur du trait qui sert de bordure bleue (par défaut, mais verte sur le site CUY) pour montrer qu'il s'agit d'un hyperlien, ALIGN qui précise l'endroit horizontal où doit se placer l'image, HSPACE qui précise la place libre à laisser à gauche et à droite de hyperlien, WIDTH et HEIGHT qui précisent les dimensions que doit avoir l'image à l'écran [déformations éventuelles, selon la dimension de l'original])

Graphiques fonds d'écran

Les navigateurs actuels peuvent charger des images et les utiliser comme fonds d'écran (ne voyez-vous pas le portrait de ce gamin qui se demande pourquoi ? ... See you why ? CUY ?...)
Certains n'aiment pas, nous avons préféré garder l'image en la rendant suffisamment pâle pour être visible sans perturber la lisibilité du texte.
Aussi, si vous en faites l'usage, méfiez-vous de l'effet que cela peut produire sur la lisibilité de votre texte (attention au différents types d'écran !). Des fonds d'écran peuvent être des éléments que le Webmaster (créateur du site) souhaite vous montrer en permanence, logo, sigle, image... à créer avec les logiciels appropriés (GIMP, PhotoShop, PaintShop, PhotoEditor et autres...)

Vous pouvez ne faire usage que d'une toute petite image, puique celle-ci se répétera selon la grandeur de votre page et de la fenêtre ouverte...

La balise qui insère une image de fond doit être incluse dans la balise (=tag) <BODY>, puisqu'il s'agit d'un attribut optionnel (rappel : les images doivent être de format .GIF ou .JPG) ; l'attribut BGPROPERTIES="fixed" empêche l'image précitée de défiler avec le contenu du document :

        <BODY BACKGROUND="nom_de_fichier.gif">

        <body background="../images/imagefixedefond.jpg" bgproperties=fixed>

Couleur de fond ou Background Color

En général, les navigateurs utilisent du texte noir sur un fond gris clair, voire blanc.
Vous pouvez changer ces options par défaut en précisant de nouveaux paramètres si vous le souhaitez. Attention, car tous les navigateurs ne réagissent pas de la même façon.

Vérifiez toujours la lisibilité de votre texte. (Un texte rouge sur un fond noir est parfois difficile à lire, et est toujours très fatiguant à lire !) Songez que votre lecteur n'a peut-être pas fait les mêmes choix que vous, et dès lors votre texte apparaîtra chez lui à un autre endroit qu'il n'apparaît chez vous.... et croyez moi, il est difficile de lire du texte vert sur une partie verte d'image ;-))

Les changements de couleurs pour les hyperliens (à visiter/déjà visités) se font en ajoutant de nouveaux attributs au tag <BODY>.
Par exemple :

       <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Va créer une fenêtre de fond noir (BGCOLOR, aucune couleur, donc 0 partout) avec du texte blanc (TEXT, mélange de toutes les couleurs au maximum) et des liens de couleur gris argenté (LINK, savant mélange de trois couleurs fondamentales du système RGB pour RedGreenBlue.

Un peu de théorie sur les couleurs ? OK, mais juste un minimum. Il nous faut commencer par présenter les systèmes de numérotations binaire, décimal et hexadécimal :


 

NOM
COULEUR
R
G
B
NOM
COULEUR
R
G
B
aliceblue                         F0 F8 FF antiquewhite                         FA EB D7
aqua / cyan   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
lemonchiffon   FF FA CD lightblue   AD D8 E6
lightcoral   F0 80 80 lightcyan   E0 FF FF
lightgoldenrodyellow   FA FA D2 lightgreen   90 EE 90
lightgrey   D3 D3 D3 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 45 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

L'image suivante nous montre bien comment le mélange des 3 couleurs fondamentales détermine la couleur obtenue...
Bien que ce 'cube' de couleurs ne nous montre que 216 nuances (soit 63) sur les 16,7 millions de nuances (soit 2563) nuances définies par le système RGB. Vous aurez remarqué le pas de 33 (en hexadécimal), soit 3*16 + 3 ou 51 (en décimal) entre chaque intensité fondamentale... et si vous souhaitez voir les mêmes nuances sous une autre forme, voyez ici.

Et enfin, un petit mélangeur de couleurs qui vous permettra de faire les mélanges proposés ci-dessus... soit les 216 nuances sur les plus de 16 millions disponibles :

Rouge Vert Bleu
 

 
 
 
 

 

Un autre mélangeur de couleur à tester: on y mélange que du rouge (toujours au maximum et du bleu variable en fonction de la position horizontale de la souris dans le cadre ci-dessous. Déplacez-y la souris de gauche à droite, vous verrez.

patience...

 

Images externes, Sons et Animations

Vous pourriez souhaiter qu'une (grande) image s'affiche à l'écran lorsque votre lecteur clique sur un de vos hyperliens (p.ex. un mot ou une image de plus petite dimension comprise dans votre page).
Cette procédure permet d'offrir un rapide aperçu, sans perdre de temps pour transférer les images détaillées.

Pour inclure une référence à une telle image, il faut écrire :

     <A HREF="MonImage.gif">Ancre hyperlien (image ou texte)</A>

Ou encore, pour une image agrandie :

     <A HREF="GrandeImage.gif"><IMG SRC="PetiteImage.gif"></A>

Votre lecteur verra l'image PetiteImage.gif et, s'il clique sur elle, l'image GrandeImage.gif s'affichera à l'écran.

La même syntaxe est à employer si vous voulez faire appel à des fichiers sons ou animations. La seule différence se trouve dans l'extension du nom des fichiers appelés. Par exemple :

<A HREF="AdamsRib.mov">Ancre hyperlien (image ou texte)</A>

établira un lien vers une animation créée par le logiciel "QuickTime" ("movie" signifie "film"). Pour infos, voici quelques extensions utiles à retenir :

simple texte
.txt
document HTML
.php ou .php
image GIF ou TIFF
.gif ou .tiff
image X Bitmap, image Bitmap
.xbm ou .bmp
image JPEG
.jpg ou .jpeg
fichier texte DOC de Word
.doc
fichier texte PDF d'Acrobat d'Adobe
.pdf
fichier texte PostScript
.ps
fichier de son AIFF ou AU
.aiff ou .au
fichier de son WAVe ou MIDi
.wav ou .mid
fichier animation Flash (édité par MacroMedia, mais racheté par Adobe, "https://get.adobe.com/fr/shockwave/")
.swf
film animation QuickTime
.mov
film MPEG (compressé)
.mpeg or .mpg

Attention aux différents navigateurs (et utilisateurs), certains ne peuvent pas ouvrir de fichiers d'un type particulier.
p.ex., les stations UNIX ne pouvaient pas lire de fichiers QuickTime movies.

Images mapées, images sensibles

Une image mapée permet d'effectuer des liens en fonction de zones [area] prédéfinies de l'image. Cette particularité peut se révéler fort utile pour définir, par exemple, des outils de navigation dans votre site.

 

La balise de l'image mapée

Si une image ordinaire est appelée par le code :
                <img src="mamoto.jpg"> ,
pour lui administrer un mapage, il suffit d'indiquer le nom de ce mapage qui se trouvera
- soit sur la même page,
- soit dans une autre page (peu fréquent).

La balise devient alors :
                <p align="center"><img src="mamoto.jpg" usemap="#nom_mapage">
qui ne provoquera rien d'autre que d'afficher l'image au centre de la page (tiens, voilà enfin une photo d'un bel engin que l'on voit souvent sur les routes).

La définition du mapage de l'image mapée

Il suffit maintenant de définir le mapage, c'est-à-dire définir les "zones sensibles"

Cette définition sera faite à l'intérieur des balises <map> et </map> :

<map name="nom_mapage">

</map>

Les zones sensibles de l'image mapée

À l'intérieur des balise <map> et </map>, il ne restera plus qu'à définir les zones (=area) sensibles. Imaginons que nous voulions rendre sensible le top-case de la moto, il faudra définir un rectangle avec les coordonnées du coin supérieur gauche, suivies de celles du coin inférieur droit. Sorry pour les matheux, l'origine se trouve au coin supérieur gauche de la photo et les ordonnées sont positives en descendant...
[je ne suis pas responsable de cette option ;-) ]

<map name="nom_mapage">
      <area shape="rect" coords="320,145,350,165" href="">
</map>

Comment déterminer ces coordonnées ? Sachant le qu'un écran SVGA a des dimensions de 800 sur 600 pixels, connaissant le nombre de pixels de votre écran ou sachant que mon image de départ a des dimensions de 533 sur 383 pixels, des essais successifs peuvent vous amener à déterminer les coordonnées du rectangle que vous souhaitez rendre sensible...

Tout logiciel de traitement d'images vous donnera ces coordonnées, mais il s'agit là d'un autre sujet de formation...

Vous souhaitez tester ? Il vous suffit de passer avec votre curseur sur le sigle de BMW, sous le clignoteur et vous constaterez que votre curseur prend la forme de la petite main, signifiant que vous pouvez cliquer. C'est pour cette raison que nous avons inclus la fin de la balise href="" que vous connaissez déjà lorsque nous avons vu la balise <a> </a>.

Que se passe-t-il si je clique ? Dans ce cas-ci, vous seriez amené à la page d'entrée d'un site actuellement inexistant. Mais bien d'autres choix existent, cela vous sera expliqué ci-dessous (voir "Actions possibles sur une image mapée")

Ne peut-on définir que des zones rectangulaires ? Non, bien sûr. Les formes (=shape) des zones (=area) peuvent être rectangulaires, circulaires et même polygonales. (voir "Paramètres et zones sensibles de l'image mapée")

 

 

Les paramètres et les zones sensibles de l'image mapée

Pour une zone rectangulaire dans notre image de 533 sur 383 pixels, on écrira pour le top-case ou les fontes de la moto 
      <area shape="rect" coords="405,110,505,170" href="">

avec 4 coordonnées : 405, abscisse du coin supérieur gauche
                      110, ordonnée du coin supérieur gauche
                      505, abscisse du coin inférieur droit
                      170, ordonnée du coin inférieur droit.

Pour une zone circulaire, on écrira pour la roue avant de la moto : 
      <area shape="circle" coords="125,300,65" href="" >

avec 3 coordonnées :
125, abscisse du centre du cercle
300, ordonnée du centre du cercle
65, rayon du cercle.

Pour une zone polygonale (quelconque) mais dans notre cas le ciel sur l'image, on écrira : 
      <area shape="polygon" coords="1,1,532,1,532,145,510,145,490,110,185,75,110,145,1,155" href="" >

avec autant de paire(s) de coordonnées qu'il n'y a de points
                      1, abscisse du premier sommet du polygone
                      1, ordonnée du premier sommet du polygone...
                         coordonnées du points supérieur gauche
                      532, abscisse du deuxième sommet du polygone
                      1, ordonnée du deuxième sommet du polygone...
                          coordonnées du point supérieur droit
                      532, abscisse du troisième sommet du polygone
                      145, ordonnée du troisième sommet du polygone...
                           coordonnées du point bas à droite,
                           limite du ciel bleu
                       etc (par paires).

 

Les actions possibles sur une image mapée

Dans ce cas-ci, en cliquant sur le sigle BMW (sous le clignoteur), vous seriez amené à la page d'entrée du site CUY. Mais bien d'autres choix existent. Nous vous suggérons de faire des tests sur l'image ci-dessus, et plus particulièrement, de cliquer sur la roue avant de la moto pour voir le listing de cette image mapée.
Les actions souhaitées se noteront dans le href="..." de la balise img concernée et laissée volontairement vide dans les exemples ci-dessus.

Rappelons que la balise <img> n'a pas de balise fermante et que l'écriture obligatoire ou souhaitée en XHTML ou HTML5 est <img /> .

 

Tableaux [Tables]

Les tableaux sont très utiles pour la présentation de données mais aussi pour de multiples astuces valables pour la présentation "ordinaire" de pages Web (voir celle de la page d'accueil du site et sa source).

Imaginez votre présentation tabulaire à l'aide des informations qui suivent :

    • Un tableau est composé de une ou plusieurs lignes de plusieurs colonnes ;
    • la première ligne comprend (souvent) des titres de ce qui suit plus bas ;
    • la première colonne explique (souvent) ce qui se trouve à droite ;
    • chaque ligne développe un élément étudié ;
    • chaque colonne précise des caractéristiques (données) de l'élément étudié ;
    • chaque cellule peut (mais ne doit pas) contenir une information.

     

Tags des Tableaux

Le "tableau d'éléments" qui suit :

    • la première ligne ne comprend qu'un titre général ;
    • la deuxième ligne donne les titres du contenu des lignes suivantes ; les titres sont dans des couleurs ne contenant que du rouge et du bleu (rappel couleur RGB : RedGreenBlue) ;
    • chaque ligne développe un élément étudié (un tag HTML et sa description) ;
    • la première colonne précise le tag (balise) étudié ;
    • la deuxième colonne contient une information relative à ce tag (balise) ;
    • pour voir la source de ce premier tableau, cliquez sur source.

Titre du tableau

Tableau d'éléments

Élément Description
<TABLE> ... </TABLE> définit un tableau [table] en HTML. Si l'attribut BORDER est employé, votre browser montrera un tableau avec des bordures (comme ici).
<CAPTION> ... </CAPTION> définit le titre [caption] de votre tableau. Par défaut, celui-ci est noté au centre au dessus du tableau, alors que la balise <CAPTION>Titre</CAPTION>doit se trouver à l'intérieur des balises <TABLE>. L'attribut ALIGN=BOTTOM peut préciser de noter le titre en bas du tableau.
NOTE: Tous les attributs ou markup tags sont permis pour le titre (caption).
<tr class="n2"> ... </TR> indique de commencer une nouvelle ligne [Table Row] dans votre tableau. Là, vous pouvez aussi préciser les attributs qui seront valables pour toute la ligne du tableau: ALIGN (LEFT, CENTER, RIGHT) et/ou VALIGN (TOP, MIDDLE, BOTTOM). Voir le Tableau d'attributs, juste après pour plus d'informations.
<TH> ... </TH> indique le titre d'une cellule d'un tableau [Table Header]. Par défaut, ce titre de cellule sera centré et noté en gras (voir "Élément" et "Description" ci dessus).
Là, vous pouvez aussi préciser les attributs qui seront valables pour la cellule et/ou son contenu. Voir le Tableau d'attributs, juste après pour plus d'informations.
<TD> ... </TD> indique une cellule d'un tableau de données [Table Data]. Par défaut, le texte y est aligné horizontalement à gauche, et verticalement au centre de la cellule.
Une cellule peut aussi recevoir les attributs qui lui seront applicables. Voir le Tableau d'attributs, juste après pour plus d'informations.

Tableau d'attributs

NOTE: Les attributs définis entre les balises (tags) <TH> ... </TH> ou <TD> ... </TD> de cellules écrasent les attributs plus généraux fixés dans les attributs de lignes [Table Row] <tr class="n2"> ... </TR> ou ceux (encore plus généraux) de tableau [TABLE] <TABLE> ... </TABLE>.
Attribut Description
ALIGN (LEFT, CENTER, RIGHT) Alignement horizontal de la cellule.
VALIGN (TOP, MIDDLE, BOTTOM) Alignement vertical de la cellule.
COLSPAN=n Le nombre (n) de colonnes que couvrira cette cellule (plus bas, plus loin). C'est la balise employée dans ce tableau pour que la deuxième ligne se divise à partir de la ligne suivante...
ROWSPAN=n Le nombre (n) de lignes que couvrira cette cellule (plus à droite, plus loin).
NOWRAP Supprime le wrapping de cette cellule.

Un exemple ? Cliquer ici pour voir la source du tableau ci-dessus.

Format Général des Tableaux

Le format général d'un tableau ressemble à ce qui suit :

<TABLE>
<!-- début de la définition du tableau -->

<CAPTION> contenu du titre (caption) </CAPTION>   
<!-- caption definition -->

<tr class="n2">  
<!-- début de la ligne (row) d'en-tête -->
    <TH> première en-tête </TH>    
    <TH> dernière en-tête </TH>    
</TR> 
<!-- fin de la ligne (row) d'en-tête -->

<tr class="n2">  
<!-- début de la première ligne -->
    <TD> contenu de première ligne, première cellule </TD>
    <TD> contenu de première ligne, dernière cellule </TD>    
</TR> 
<!-- fin de la première ligne (row) -->

<tr class="n2">  
<!-- début de la dernière ligne -->
    <TD> contenu de dernière ligne, première cellule </TD>
    <TD> contenu de dernière ligne, dernière cellule </TD>    
</TR> 
<!-- fin de la dernière ligne (row) -->

</TABLE>
<!-- fin de tableau -->

Il vous est possible de copier-coller les lignes de code ci-dessus dans vos propres fichiers HTML, en y ajoutant les lignes (rows) et les cellules/colonnes que vous souhaitez.
Ces lignes donnent le résultat suivant si elles sont lues par votre navigateur :

contenu du titre (caption)
première en-tête dernière en-tête
contenu de première ligne, première cellule contenu de première ligne, dernière cellule
contenu de dernière ligne, première cellule contenu de dernière ligne, dernière cellule

Les tags <TABLE> et </TABLE> doivent encadrer la définition globale du tableau. Le premier élément d'un tableau est habituellement le titre (=caption) CAPTION optionnel.
Suivent alors un nombre indéfini de lignes (=rows), marquées par les tags <tr class="n2"> et </TR>.
À l'intérieur de chaque ligne, on peut trouver autant de données (=data, de colonnes) que l'on veut, celles-ci sont marquées par les tags <TD> ... </TD> ou les tags <TH> ... </TH> (pour les mises en évidence).

Chaque ligne d'un tableau est formattée de façon indépendante, sans se soucier des lignes précédentes ou suivantes. Ceci vous permet de travailler avec des tableaux semblables à celui montré ci-avant, "Tableau d'attributs", dans lequel on divise une cellule unique en plusieurs colonnes ([COLSPAN]).

Voici, par étapes, la construction d'un tableau de 2 lignes sur 5 colonnes, pour ne rien oublier :

1re étape
balise table
2e étape
balise tr
pour la première ligne
3e étape
balise td
pour la première colonne
4e étape
reproduire td
pour chaque colonne
5e étape
reproduire tr
pour chaque ligne
<table>
 
</table>
<table>
   <tr class="n2">
 
   <tr class="n2">
</table>
<table>
   <tr class="n2">
      <td>1re étape<br>
        balise table</td>

 
   <tr class="n2">
</table>
<table>
   <tr class="n2">
      <td>1re étape<br>
        balise table</td>
      <td>2e étape<br>
        balise tr</td>
      <td>3e étape<br>
        balise td</td>
      <td>4e étape<br>
        reproduire td (colonnes)</td>
      <td>5e étape<br>
        reproduire tr (lignes)</td>
   <tr class="n2">
</table>
<table>
   <tr class="n2">
      <td>1re étape<br>
        balise table</td>
      <td>2e étape<br>
        balise tr</td>
      <td>3e étape<br>
        balise td</td>
      <td>4e étape<br>
        reproduire td (colonnes)</td>
      <td>5e étape<br>
        reproduire tr (lignes)</td>
   <tr class="n2">
   <tr class="n2">
      <td>1er contenu</td>
      <td>2e contenu</td>
      <td>3e contenu</td>
      <td>4e contenu</td>
      <td>5e contenu</td>
   <tr class="n2">
</table>
 

Paramètres propres aux tableaux

Les paramètres de <table>

Nous avons vu que le tag <table> ouvrait un tableau qui se fermait par </table>.
Plusieurs paramètres peuvent préciser la manière dont le tableau apparaîtra.

      1. Le nombre de lignes du tableau sera fixé par le nombre de balises (ouvrantes et fermantes) suivantes : <tr class="n2">...</TR> ;
      2. Le nombre de colonnes du tableau sera fixé par le nombre de balises (ouvrantes et fermantes) suivantes : <TD>...</TD> à l'intérieur de la (première double balise de lignes <tr class="n2"> ) ;
      3. La largeur du tableau sera précisée par le paramètre width qui pourra s'exprimer en pixels (picture elements ou points) ou en pourcentage :
        1. <table width=420> ouvrira un tableau de 420 points (qui paraîtra plus grand sur un écran de 640x480 que sur un écran de 800x600, car 420/480 est plus grand que 420/800) ;
        2. <table width=80%> ouvrira un tableau qui occupera 80% de la largeur de l'écran sur lequel il s'affiche,
          soit de 640 points sur un écran de 800x600 (80% de 800 = 640),
          ou encore de 819 points sur un écran de 1024x768 (80% de 1024 = 819) ;
      4. La hauteur du tableau pourrait être précisée par le paramètre height qui pourrait s'exprimer en pixels (picture elements ou points) ou en pourcentage, comme pour la largeur décrite ci-avant.
        Le lecteur comprendra que ce paramètre n'est presque jamais utilisé pour permettre au tableau d'adapter sa hauteur au type d'écran sur lequel il est affiché ;
      5. L'épaisseur des traits entre les cellules, est fixée par le paramètre cellspacing=20 par exemple (par défaut cette valeur est fixée à 2) ;
      6. La distance entre le contenu d'une cellule et son contour, qu'on appelle la marge intérieure des cellules, est fixée par le paramètre cellspading=50, par défaut cette valeur vaut 1 ;
      7. L'épaisseur du trait extérieur du cadre est déterminée par le paramètre border=15 par exemple ;
      8. La couleur de fond (ou d'arrière-plan) du tableau sera définie par le paramètre bgcolor="#33FF33" par exemple ;
      9. L'effet de relief sera déterminé par les couleurs déterminée par les couleurs de la bordure claire et de la bordure sombre, à savoir bordercolorlight="#C0C0F0" bordercolordark="#FF6666" ;
      10. La position de ce tableau (ou alignement) sera choisie en optant pour le paramètre align="center" pour indiquer comment le tableau doit être aligné par rapport aux autres éléments du même paragraphe (texte ou images). Gauche ("left") aligne le table sur la gauche des autres éléments, Droite ("right") l'aligne sur la droite des autres éléments, et Centrer ("center") centre le tableau.
        Vous pouvez aligner le tableau à gauche, à droite ou au centre par rapport aux autres éléments. Vous pouvez également choisir l'alignement par défaut du navigateur ;
      11. Chaque cellule d'un tableau peut recevoir des paramètres qui lui sont propres : taille, couleur, police... on trouvera donc la possibilité de lire <td align="right" valign="baseline" width="66" bgcolor="#CCCC00"><font face="Courier New, Courier, mono><b><i>3333</i></b></font></td> ;
      12. <td nowrap> L' attribut "nowrap" empêche le retour à la ligne dans une cellule.

 

1111111111111 2222222222222222 3333
4444444 55555555 666666666

dont, malgré le mauvais choix esthétique des couleurs, voici la source (observez et vous comprendrez mieux...) :

 

<table width="75%" border="15" cellspacing="20" cellpadding="50" 
bordercolorlight="#C0C0F0" bordercolordark="#FF6666" bgcolor="#33FF33" bordercolor="#336699" align="center"> <tr class="n2"> <td>1111111111111</td> <td>2222222222222222</td> <td align="right" valign="baseline" width="66" bgcolor="#CCCC00"><font face="Courier New, Courier, mono><b><i>3333</i></b></font></td> </tr> <tr class="n2"> <td>4444444</td> <td>55555555<td> <td>666666666</td> </tr> </table>

Heureusement, les éditeurs WYSIWYG facilitent votre travail en vous présentant une fenêtre telle que celle-ci :

 

Le lecteur attentif aura remarqué que, si la balise <TABLE> peut avoir différents paramètres, les balises <tr class="n2"> relatives à chaque ligne ou <TD> relative à chaque cellule d'une ligne peuvent aussi avoir leurs paramètres propres :
- "colspan" permet de faire fusionner des cellules d'une même ligne (donc sur plusieurs colonnes). Il faut y préciser le nombre de cellules (donc de colonnes) à fusionner ;
- "rowspan" permet de faire fusionner des cellules d'un même colonne (donc sur plusieurs lignes). Il faut y préciser le nombre de cellules (donc de lignes) ;
- "bgcolor" permet de donner un fond de couleur à un tableau ou à une celulle. Comme toujours la couleur peut être précisée soit par som nom (en anglais) soit par son code Hexa (le blanc soit #FFFFFF est la couleur par défaut) ;
- "width" permet de préciser la largeur d'un tableau ou d'une celulle. La largeur peut être donnée en pixel ou en pourcentage ;
- "height" permet de donner la hauteur d'une celulle. Il n'est pas possible de préciser la hauteur d'un tableau. Attention, si vous donnez une certaine hauteur X à une celulle et que vous placez par exemple une image dont la hauteur est plus grande, la celulle s'adaptera à la taille de l'image en "oubliant" son attribut hauteur ! (idem en largeur) ;
- "align" précise l'alignement sur un axe horizontal du tableau ou du contenu de la cellule. (valeurs possibles : "left" par défaut, "right", "center") ;
- "valign" précise l'alignement du contenu des cellules sur un axe vertical. (valeurs possibles : "middle", "bottom", "top") ;
- "background" permet d'avoir une image de fond.

Attention, tous les attributs ne fonctionnent pas sur chacun des navigateurs.

 

Fusion de cellules (colonnes) :
<TABLE border=1 width=600 align="center" cellspacing=0 cellpadding=2>
<tr class="n2">
<TD width="35%">cellule 1</TD>
<TD width="25%" height="90">cellule 2</TD>
<TD width="15%">cellule 3<br>2e ligne</TD>
<TD width="25%" valign="bottom">cellule 4</TD>
</TR>
<tr class="n2">
<TD colspan=4 align="center">cellule fusionnée sur 4 colonnes</TD>
</TR>
</TABLE>
<BR><BR>

Fusion de cellules (lignes) :
<TABLE width=400 align="center" cellspacing=0 cellpadding=2>
<tr class="n2">
<TD width="50%" bgcolor="#FFFF00">cellule 1</TD>
<TD width="50%" bgcolor="#CCFFFF">cellule 2</TD>
<TD rowspan=2 bgcolor="#333333"><CENTER><FONT color="#FFFFFF">Fusion de 2 lignes</FONT></CENTER></TD>
</TR>
<tr class="n2">
<TD width="50%" bgcolor="#CCCCCC">cellule 3</TD>
<TD width="50%" bgcolor="#999999">cellule 4</TD>
</TR>
</TABLE>

qui engendrera les 2 tableaux suivants :

Fusion de cellules (colonnes) :

Cellule 1 Cellule 2 Cellule 3
2e ligne
Cellule 4
Cellule fusionnée sur 4 colonnes


Fusion de cellules (lignes) :
cellule 1 cellule 2
Fusion de 2 lignes
cellule 3 cellule 4

 

Tableaux pour Information non tabulaire

Certains auteurs de pages HTML (et j'en suis) emploient des tableaux pour disposer des informations qui ne nécessitent pas une disposition tabulaire. N'hésitez pas à consulter la source de la page d'accueil de ce site pour vous en apercevoir.
Par exemple, des hyperliens peuvent être inclus dans des cellules de tableaux ; dès lors, on peut utiliser un tableau "sans bordure" pour créer "une" image de différentes images accolées qui apparaîtront "soudées" par la plupart des browsers.
L'image ainsi créée semblera unique, mais sensible selon les cellules auxquelles elle appartient à des "clics" différents (comme si l'on cliquait sur des "quartiers" d'image).

Employer des formats différents pour les bordures d'images peut générer des effets qui plaisent... à vous de faire vos essais.

Tableaux et styles

Comme signalé lors d'une première approche des STYLEs, nous pouvons modifier l'apparence d'un tableau en utilisant les styles et le paramètre <td class="xxx"> :

<style>
.table-ligne1-centre {
   font-size : 12px; 
   font-family : Verdana, arial, helvetica, sans-serif; 
   color : #773333; 
   text-align : center; 
   background-color : #c6c3bd; 
}
</style>

<table><tr class="n2">
<td width="100" class="table-ligne1-centre" valign="top">Contenu</td>
</tr></table>

qui donnera ce mini tableau comme résulat :
Contenu

 

[1] Cela fait des années que personne n'a réagi. Je vais donc corriger :
Valeur décimale = 142 = 128+16+8+4 est inexact, non conforme à 10001110, qui indique qu'il y a une deuzaine et pas de seizaine...
il faut corriger et lire
Valeur décimale = 142 = 128+8+4+2 qui est conforme à l'écriture 10001110