Initiation au html

INITIATION AU HTML

Table des matières

1. Généralités: 1.1. Introduction; 1.2. Qu'est-ce que le HTML ?; 1.3. De quels logiciels doit-on disposer ?
2. Structure d'une page html: 2.1. Les balises; 2.2. Les attributs; 2.3. Structure de page
3. Texte: 3.1. Caractères spéciaux; 3.2. La balise <font>; 3.3. Mise en page
4. Liens: 4.1. Couleurs de liens; 4.2. Liens absolus; 4.3. Liens relatifs; 4.4. Liens vers une adresse email
5. Images: 5.1. Formats; 5.2. Fond d'écran; 5.3. Afficher une image
6. Tableaux: 6.1. Commentaires; 6.2. Structure générale; 6.3. Exemples

1. Généralités

1.1. Introduction

Ce petit guide n'a pas la prétention d'être exhaustif : il constitue une simple initiation. Il s'appuie sur le HTML 4.0 mais ne traite pas des feuilles de styles, des formulaires, des frames, des listes ainsi que de nombreuses balises. Entre le « trop peu » et le « pas assez », il n'est pas toujours facile de trancher : j'ai souhaité proposer le moins de notions possible nécessaires à la rédaction d'une page web simple.

Pour une information plus complète et détaillée en langue française, on peut consulter le site suivant :

http://www.allhtml.com/ : AllHTML est sans doute « la » référence française pour le webmaster. Outre le HTML, la plupart des langages du web est abordée.

Enfin, si s'initier seul au HTML à l'aide de ce guide est possible, il n'en reste pas moins que cela demande une certaine détermination et pas mal de courage. Dans le cas contraire, se faire épauler par un « professeur » sera sans doute plus profitable.

1.2. Qu'est-ce que le HTML ?

HTML : HyperText Markup Language (soit en français, langage de balisage hypertexte).

HTML est un langage qui permet d'afficher des pages web à l'intérieur d'un navigateur (Internet Explorer et Netscape sont les plus connus). On parle de langage de mise en page plutôt que de langage de programmation. En effet, HTML définit seulement la structure des documents (écrire tel texte en gras, sauter une ligne, afficher telle image, placer un lien vers une autre page du web, etc.).

Une fois terminé, un document HTML est destiné à être interprété par un navigateur internet. Cela signifie que le navigateur va afficher ce qu'il a cru « comprendre » dans les instructions contenues dans le document HTML. L'inconvénient est que deux navigateurs différents n'afficheront pas forcément la même chose ! L'avantage de l'interprétation est que les erreurs de « programmation » n'entraînent pas de plantage de l'ordinateur : le navigateur fait au mieux avec ce qu'il a (au pire, il affichera une page blanche parce qu'il ne « comprend » rien).

Pour une meilleure compréhension, on peut faire l'analogie suivante : un document HTML est comme une partition de musique (un ensemble de codes) qu'un musicien (le navigateur) va interpréter à sa manière.

1.3. De quels logiciels doit-on disposer ?

Un document HTML est un simple document de texte ASCII. Autrement dit, pour « programmer » en HTML, il suffit de disposer d'un éditeur de texte des plus simples. Sur PC, le bloc-notes de Windows suffira ; sur Mac, on pourra prendre TextEdit (ou SimpleText sur MacOS9). L'idéal serait d'avoir un éditeur de texte disposant d'outils HTML pour travailler plus confortablement (de nombreux sharewares peuvent être téléchargés sur internet). Pour information, cette page a été créée sur Mac avec BBEdit, un éditeur de texte doté de fonctions d'aide à la mise en page HTML.

Il faudra aussi disposer d'un navigateur afin de vérifier que le document HTML permet bien d'afficher ce que l'on souhaite à l'écran. Il est même préférable d'utiliser deux navigateurs ou plus (à cause des différentes interprétations possibles). Un document HTML doit au moins s'afficher correctement sur le plus répandu des navigateurs du marché : Internet Explorer. L'idéal consiste à tester sa page sur un maximum de navigateurs et sur différents ordinateurs (PC Windows, PC Linux, Mac).

Note : il existe de nombreux logiciels qui permettent de créer un document HTML sans avoir à connaître le langage HTML. Ces logiciels ont l'avantage d'être simples d'utilisation. Parmi les inconvénients : il faut souvent les acheter, ils génèrent parfois un code HTML brouillon ou incorrect (au point qu'il se vend des logiciels de correction de codes mal fichus !), ils manquent parfois de souplesse (on ne peut pas toujours faire exactement ce que l'on veut). En pratique, un webmaster exigeant utilisant ce type de logiciels sera amené à retravailler le code HTML lui-même.
Apprendre le HTML, c'est se libérer de logiciels parfois mal conçus et/ou de leurs mises à jour payantes (quand il y a des mises à jour...).

2. Structure d'une page HTML

2.1. Les balises

Les instructions en HTML se nomment les « balises » (ou « tags » en anglais). Celles-ci s'écrivent encadrées par les signes « < » et « > ». On aura par exemple la balise <br> qui indique un retour à la ligne, ou encore la balise <hr> qui indique une ligne de séparation.

Mais de nombreuses balises s'écrivent aussi sous les formes d'une balise d'ouverture et d'une balise de fermeture.
Une balise d'ouverture est encadrée par les symboles « < » et « > » (comme décrit plus haut), tandis qu'une balise de fermeture sera encadrée par « </ » et par « > ».

Tout ce qui se trouve entre une balise d'ouverture et sa balise de fermeture (du texte, des images, des liens) sera traité spécifiquement ; ce qui vient avant la balise d'ouverture et ce qui vient après la balise de fermeture ne sera pas affecté.

On aura par exemple les balises <b> et </b> qui encadrent un texte à mettre en caractères gras. Ou encore les balises <i> et </i> encadreront un texte à mettre en italiques.

Ainsi, pour écrire « le chat mange la souris », le code HTML sera :

le <b>chat</b> mange la <i>souris</i>

On peut imbriquer des balises les unes dans les autres. Par exemple, on peut écrire :

le <b>chat <i>mange la</i> souris</b>

ce qui donnera « le chat mange la souris ».

Par contre, toute balise <y> ouverte entre deux autres balises <x> et </x> devra être fermée (</y>) avant le </x>.

Ainsi, pour obtenir « le chat mange la souris », le code
« le <b>chat <i>mange la</b> souris</i> »
est incorrect : la balise <i> doit être fermée avant le </b>. Le code correct sera :

le <b>chat <i>mange la</i></b> <i>souris</i>

2.2. Les attributs

Certaines balises peuvent ou doivent être précisées par un ou plusieurs attributs.

Par exemple, la balise <hr> trace une ligne de séparation dont l'épaisseur est par défaut de deux pixels. On peut utiliser l'attribut « size » pour épaissir le trait. Ainsi l'instruction <hr size="5"> tracera une ligne de 5 pixels d'épaisseur.

Autre exemple, la balise <img> qui sert à insérer une image dans la page doit obligatoirement être précisée par l'attribut « src » qui indique l'endroit où se trouve l'image à insérer. (Nous verrons cela au chapitre 5.)

2.3. Structure de page

Tout document en HTML devra commencer par la balise d'ouverture <html> et se terminer par la balise de fermeture </html>.

Entre ces deux balises viendront :
- l'en-tête encadrée par les balises <head> et </head>
- puis le corps de la page encadré par les balises <body> et </body>. Ne sera affiché dans le navigateur que ce qui se trouve entre ces deux balises.

L'architecture générale d'un document sera donc toujours celle-ci :

<html>
<head>: <title>titre de la page</title>
</head>
<body>: contenu de la page : du texte, des images, des liens, etc.
</body>
</html>

Exemple : on veut réaliser un document qui affiche à l'écran le message suivant : « Bienvenue sur ma page perso ! ».
Ouvrez tout d'abord le « Notepad » sous Windows ou bien « TextEdit » sous MacOS (ou encore un équivalent sous Linux).
Tapez ensuite le texte suivant :

<html>
<head>: <title>Ma page perso</title>
</head>
<body>: <b>Bienvenue</b> sur ma page perso !
</body>
</html>

(Note : les couleurs utilisées dans ce code, de même que les polices de caractères, les retours à la ligne ou les tabulations n'ont pour autre but que de rendre le code facile à lire. On pourrait tout aussi bien tout écrire à la queue-leu-leu, avec d'autres polices et en bleu. De plus les balises peuvent très bien être écrites en majuscules.)

Une fois le code entré, sauvegardez votre document sous le nom « bienvenue.html ».
Ouvrez ensuite votre navigateur et ouvrez-y le fichier « bienvenue.html » pour voir le résultat.

3. Texte

3.1. Caractères spéciaux

On touche peut-être là à l'un des points les plus agaçants du HTML.

En effet, de nombreux caractères spéciaux doivent être écrits à l'aide d'un code. Ces caractères dits « spéciaux » comprennent notamment les lettres accentuées comme le « é », le « à » ou encore le « ç ». Autant dire, rien de très spécial en français !

Ainsi faut-il taper « é » et non « é », « ç » et non « ç » !

Voici les codes les plus importants :

lettre	code
à	à
â	â
é	é
è	è
ê	ê
ë	ë
î	î
ï	ï
ô	ô
ù	ù
ü	ü
û	û
ç	ç

Ainsi, la phrase « Noël est un élève français sûr de lui » devient-elle :
« Noël est un élève français sûr de lui ».

Tout cela est bien sûr assez affreux à taper. Certains s'y habituent, d'autres tapent leur texte normalement et effectuent des Chercher/Remplacer une fois le travail terminé. Certains logiciels d'édition de texte sont capables de faire ce travail à votre place ; on trouve aussi des freewares qui se chargent de cette tâche ingrate.

Une dernière remarque : on peut accentuer les majuscules comme on le fait pour les minuscules. Ainsi on tape « Ç » pour obtenir « Ç ».

3.2. La balise <font>

Par défaut, un texte en HTML est en noir, en police « Times » et de taille standard. La balise <font> associée à divers attributs permet de remédier à cela.

3.2.1. L'attribut « face »

Autant la police « Times » est agréable sur papier, autant elle « passe mal » sur un écran. On pourra y préférer des polices comme « Arial », « Georgia » ou « Verdana ».
L'attribut « face » permet de changer la police.

Ainsi,

<font face="arial">machin chose</font>

donne machin chose.

Attention, la police désignée par l'attribut « face » doit se trouver dans l'ordinateur de la personne qui consulte le site. Il faut donc éviter l'emploi de toute police trop exotique sinon l'effet recherché ne sera pas au rendez-vous. En pratique, Georgia, Times, Arial, Verdana et quelques autres sont sur toutes les machines.

3.2.2. L'attribut « size »

Il n'y a que six tailles possibles en HTML : de 1 à 6 (de la plus petite à la plus grande).

Ces tailles sont relatives : selon les réglages propres à chaque ordinateur, la taille 1 sera plus grosse sur telle machine que sur telle autre.
La taille standard (par défaut) est 3. L'attribut « size » permet de modifier ce standard. Par exemple :

<font size="1">petit, </font>
<font size="3">moyen, </font>
<font size="5">grand</font>

donnera : petit, moyen, grand.

(On peut noter que l'attribut « face » n'ayant pas été spécifié, la police est par défaut « Times ».)

3.2.3. L'attribut « color »

Les couleurs sont définies par un code de six lettres/chiffres. Voici les 216 « web safe colors », autrement dit les 216 couleurs que tout navigateur se doit de reconnaître :

#000000 #003300 #006600 #009900 #00CC00 #00FF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #330000 #333300 #336600 #339900 #33CC00 #33FF00 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #660000 #663300 #666600 #669900 #66CC00 #66FF00 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #990000 #993300 #996600 #999900 #99CC00 #99FF00 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99 #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF

On peut se contenter cependant des couleurs prédéfinies suivantes :
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

La syntaxe suivante :

<font color="green">texte en vert</font>

donne : texte en vert.

Si l'on dispose d'un code de couleur, on écrira par exemple :

<font color="#FF9900">texte en orange</font>

ce qui donne : texte en orange.

3.2.4. Couleur de texte et couleur de fond

La couleur du texte doit être choisie de manière à être lisible sur le fond d'écran. Par défaut, le fond d'écran est blanc. Écrire par exemple en jaune sur blanc n'est pas très malin.

On peut modifier le fond d'écran avec l'attribut « bgcolor » de la balise <body>.

Pour un fond noir, on fera :

3.2.5. Remarque

On peut utiliser avec une balise <font> les trois attributs « face », « size » et « color » (cités dans un ordre quelconque). Par exemple :

<font color="olive" size="4" face="arial">texte de couleur olive, de taille 4 et de police arial</font>

ce qui donne : texte de couleur olive, de taille 4 et de police arial.

3.3. Mise en page

3.3.1. Les balises <br> et <hr>

On l'a déjà vu : la balise <br> impose un retour à la ligne. Plusieurs balises <br> successives permettront de sauter des lignes pour séparer des paragraphes.

La balise <hr> permet de tirer un trait de séparation de la largeur de l'écran. (Note : la balise <hr> ne doit pas se trouver entre deux balises <font> et </font>.)

Par exemple :

<font color="blue" size="2" face="verdana">
Bonjour,
</font>
<hr>
<font color="blue" size="2" face="verdana">
comment vas-tu...
<br>
<br>
... yau de poële ?
</font>

ce qui donne :

Bonjour,

comment vas-tu...

...yau de poële ?

3.3.2. La balise <div>

La balise <div> sert à aligner le texte (ou les images) à gauche, au centre ou à droite de l'écran (left, center et right). (Par défaut, l'alignement est à gauche.) La balise <div> est accompagnée de l'attribut « align ».

<div align="left">J'écris à gauche,</div>
<div align="center">au centre,</div>
<div align="right">et à droite.</div>

donne :

J'écris à gauche,

au centre

et à droite.

(Note : toute balise ouverte entre un <div> et un </div> doit être fermée avant le </div>.)

3.3.3. Exemple

Voici un exemple de page web qui reprend tous les éléments déjà vus. Tapez le code suivant dans votre éditeur de texte, sauvegardez le tout sous le nom cv.html par exemple, puis observez le résultat dans votre navigateur. Amusez-vous ensuite à modifier quelques paramètres et constatez les effets dans le navigateur.

<html>
<head>: <title>Mon CV</title>
</head>
<body>: <div align="center">; <font color="purple" size="6" face="times">Ceci est mon <b>CV</b></font>; </div>; <hr>; <div align="right">; <font color="green" size="2" face="verdana">; <b>Jean Bonneau</b>; <br>; 4, rue du cochon; <br>; 99000 Charcutaille; </font>; </div>; <font size="3" face="arial">; <b>Diplômes</b>; <br>; - premier à la course en sac du 14 Juillet à Charcutaille; <br>; <br>; <b>Expérience</b>; <br>; - pas beaucoup; <br>; - mais quand même un peu; </font>; <br>; <br>; <hr>; <font size="3" face="arial">; Voilà. Merci de m'embaucher. Signé : Jeannot.; </font>
</body>
</html>

Vous devriez obtenir quelque chose comme ceci :

Ceci est mon CV

Jean Bonneau
4, rue du cochon
99000 Charcutaille

Diplômes
- premier à la course en sac du 14 Juillet à Charcutaille

Expérience
- pas beaucoup
- mais quand même un peu

Voilà. Merci de m'embaucher. Signé : Jeannot.

4. Liens

4.1. Couleurs de liens

Les couleurs des liens hypertextes d'une page sont définis par les attributs « link » (couleur d'un lien vers une page non visitée), « vlink » (couleur d'un lien vers une page déjà visitée) et « alink » (couleur que prend le lien lorsqu'on clique dessus) de la balise <body>. Par défaut, ces couleurs sont respectivement blue (bleu), purple (violet) et la couleur déjà affichée (c'est-à-dire bleu ou violet).

Si, par exemple, on souhaite avoir respectivement rouge, vert et noir, on tapera :

4.2. Liens absolus

Un lien absolu est un lien hypertexte vers une page dont on donne l'adresse dans son intégralité.

La syntaxe pour créer un lien vers le site du lycée Charlemagne (« http://www.lycee-charlemagne.org ») sera :

Rendez-vous sur le site web du <a href="http://www.lycee-charlemagne.org">lycée Charlemagne !</a>

ce qui donnera :

Rendez-vous sur le site web du lycée Charlemagne !

Note : lorsque l'on indique <a href="http://www.lycee-charlemagne.org"> le navigateur interprète cette instruction comme étant <a href="http://www.lycee-charlemagne.org/index.html">.
« index.html » est le nom que l'on donne à la page d'accueil d'un site.

4.3. Liens relatifs

Un lien relatif est un lien hypertexte d'une page d'un site vers une autre page du même site.

Chaque page web d'un site est décrite dans un fichier texte du type « xxxx.html ». Un site de quatre pages aura donc quatre fichiers correspondants. Ces fichiers sont « rangés en vrac » dans un dossier. Pour s'y retrouver, on peut créer des sous-dossiers du dossier principal et y ranger les fichiers par « famille ».

Voici un exemple de rangement pour un site :

structure de site

Le site « mon site web » est composé de huit pages. La page « index.html » désigne la page d'accueil du site (on utilise toujours ce nom-là). Par commodité certaines pages ont été rangées dans les sous-dossiers « mamaison » et « vacances ». Cette organisation n'a rien d'obligatoire : on aurait pu tout aussi bien tout placer dans le dossier principal « mon site web ».

Pour écrire un lien de « index.html » vers « cv.html » :

Lien vers <a href="cv.html">mon cv.</a>

Pour écrire un lien de « index.html » vers « salon.html » :

Lien vers <a href="mamaison/salon.html">mon salon.</a>

Pour écrire un lien de « salon.html » vers « cuisine.html » :

Lien vers <a href="cuisine.html">ma cuisine.</a>

Pour écrire un lien de « salon.html » vers « cv.html » :

Lien vers <a href="../cv.html">mon cv.</a>

Pour écrire un lien de « salon.html » vers « corse.html » :

Lien vers <a href="../vacances/corse.html">mes vacances en Corse.</a>

4.4. Liens vers une adresse email

4.4.1. Mises en garde

Attention aux deux points suivants :

Des « robots » parcourent le web à la recherche d'adresses email dans le but de constituer des listes à « spammer » (publicités et messages idiots). Si vous ne voulez pas prendre le risque d'afficher votre adresse email sous forme de texte alors renoncez aux liens décrits plus bas. Si vous souhaitez toutefois donner votre adresse email mais sans courir de risque particulier alors affichez votre adresse sous la forme d'une image (cf. chap. 5) et sans établir de lien. L'internaute de passage pourra vous lire (mais pas les robots) et devra taper lui-même votre adresse pour vous écrire. Autre solution : utilisez les liens définis ci-dessous mais avec une adresse email créée pour l'occasion (et que vous pourrez abandonner sans remords si elle est un jour « polluée »).
Les liens « mailto » décrits ci-dessous provoquent l'ouverture du logiciel de messagerie de l'internaute (« Outlook Express » par exemple). Or certaines personnes n'utilisent pas ces logiciels mais gèrent leur courrier via le web. Il est donc important que votre adresse email apparaissent en toutes lettres à l'écran (que ce soit sous forme de texte ou d'image).

4.4.2. Syntaxe de lien vers une adresse email

La syntaxe est semblable à celle d'un lien « normal » :

Mon adresse est : <a href="mailto:machin@bidule.com">machin@bidule.com</a>.

5. Images

5.1. Formats

Deux formats d'images les plus couramment utilisés sur le web sont le GIF (extension « .gif ») et le JPEG (extension « .jpg »). Ces formats sont fortement compressés : une image GIF ou JPEG occupe bien moins de place que la même image aux formats BMP, TIFF ou PICT par exemple. Cela réduit considérablement la quantité de données à véhiculer sur le réseau et permet donc un affichage plus rapide des images. (La contrepartie de ce gain en rapidité est la dégradation de la qualité des images.)

Il faudra avoir recours à un logiciel de dessin pour convertir vos images en GIF ou JPEG si elles ne sont pas déjà dans l'un de ces formats. Pour des photos, on préfèrera le JPEG qui affiche 16,7 millions de couleurs au GIF (256 couleurs). En outre, un logiciel de dessin permettra de choisir le taux de compression JPEG : on peut ainsi faire le bon compromis entre taille et dégradation de l'image. Une taille supérieure à 100 Ko est très élevée pour le web : à réserver à une belle et grande image qui constitue le principal intérêt de la page. On essaiera de rester sous la barre des 50 Ko le plus souvent et bien moins encore pour les petites images qui ne sont sur votre site que pour l'égayer un peu.

5.2. Fond d'écran

Placer une image en fond d'écran est rarement une bonne idée : d'une part le texte s'affichant sur l'image n'est pas toujours aisément lisible ; d'autre part l'image n'étant pas de la taille de l'écran, elle est soit tronquée soit répétée avec un effet de mosaïque souvent inesthétique.

Si vous y tenez malgré tout, vous devez utiliser l'attribut « background » de la balise <body> :

où « fond.gif » est le nom de votre image et où « images » est le nom du dossier où se trouve « fond.gif ».

5.3. Afficher une image

Voici la syntaxe :

ce qui donne :

la plage de la Pointe indienne

On peut relever quatre attributs à la balise <img> dans l'exemple ci-dessus :

- « src » donne le chemin à suivre pour trouver l'image (elle se trouve ici dans le dossier « images »).

- « alt » est un commentaire succint de l'image : il s'inscrira à la place de l'image si pour quelque raison elle ne s'affiche pas ; il est repéré en outre par certains moteurs de recherche qui l'utilisent comme critère de recherche. Cet attribut est normalement obligatoire.

- « width » et « height » (largeur et hauteur en pixels) permettent un affichage plus rapide de la page. Si vous connaissez les dimensions en pixels de votre image alors faites apparaître ces attributs.

Note : une image peut devenir un lien cliquable. Il suffit pour cela d'encadrer la balise <img> par <a> et </a>.

6. Tableaux

6.1. Commentaires

La balise <table> ne sert pas seulement à présenter des données sous la forme de tableaux classiques mais aussi à structurer une page web. Par exemple, les écrits de cette page se trouvent dans un tableau à une rangée et une colonne (soit un tableau réduit à sa plus simple expression). Pourquoi ? Pour empêcher que le texte ne s'étende sur toute la largeur de l'écran et soit ainsi difficile à lire. Le tableau qui contient ce que vous lisez à une largeur de 600 pixels.
Autre exemple d'utilisation d'un tableau pour la mise en page : le site web du lycée Charlemagne. La page est structurée par un tableau à une rangée et deux colonnes.

6.2. Structure générale

Un tableau est annoncé par les balises <table> et </table>. Entre ces balises sont définies les cases du tableau en procédant rangée par rangée à l'aide des balises <tr> et </tr>. Enfin, au sein de chaque rangée sont définies les colonnes avec les balises <td> et </td>.

Voici la structure d'un tableau à 2 rangées et 3 colonnes :

<table>

<tr>

<td>Rangée1 Colonne1</td>

<td>Rangée1 Colonne2</td>

<td>Rangée1 Colonne3</td>

</tr>

<tr>

<td>Rangée2 Colonne1</td>

<td>Rangée2 Colonne2</td>

<td>Rangée2 Colonne3</td>

</tr>

</table>

ce qui donne :

Rangée1 Colonne1	Rangée1 Colonne2	Rangée1 Colonne3
Rangée2 Colonne1	Rangée2 Colonne2	Rangée2 Colonne3

6.3. Exemples

Est repris ci-dessous l'exemple précédent avec divers ajouts ou modifications.

L'attribut « border » de la balise <table> ajoute des traits de séparation entre les cases du tableau :

<table border="1">

<tr>

<td>Rangée1 Colonne1</td>

<td>Rangée1 Colonne2</td>

<td>Rangée1 Colonne3</td>

</tr>

<tr>

<td>Rangée2 Colonne1</td>

<td>Rangée2 Colonne2</td>

<td>Rangée2 Colonne3</td>

</tr>

</table>

ce qui donne :

Rangée1 Colonne1	Rangée1 Colonne2	Rangée1 Colonne3
Rangée2 Colonne1	Rangée2 Colonne2	Rangée2 Colonne3

L'attribut « cellpadding » de la balise <table> ajoute des pixels entre les bords des cases et leurs contenus :

<table border="1" cellpadding="5">

<tr>

<td>Rangée1 Colonne1</td>

<td>Rangée1 Colonne2</td>

<td>Rangée1 Colonne3</td>

</tr>

<tr>

<td>Rangée2 Colonne1</td>

<td>Rangée2 Colonne2</td>

<td>Rangée2 Colonne3</td>

</tr>

</table>

ce qui donne :

Rangée1 Colonne1	Rangée1 Colonne2	Rangée1 Colonne3
Rangée2 Colonne1	Rangée2 Colonne2	Rangée2 Colonne3

L'attribut « width » de la balise <table> impose la largeur du tableau en pixels :

<table border="1" cellpadding="5" width="450">

<tr>

<td>Rangée1 Colonne1</td>

<td>Rangée1 Colonne2</td>

<td>Rangée1 Colonne3</td>

</tr>

<tr>

<td>Rangée2 Colonne1</td>

<td>Rangée2 Colonne2</td>

<td>Rangée2 Colonne3</td>

</tr>

</table>

ce qui donne :

Rangée1 Colonne1	Rangée1 Colonne2	Rangée1 Colonne3
Rangée2 Colonne1	Rangée2 Colonne2	Rangée2 Colonne3

L' attribut « bgcolor » de la balise <td> colorie la case :

<table border="1" cellpadding="5" width="450">

<tr>

<td bgcolor="yellow">Rangée1 Colonne1</td>

<td bgcolor="gray">Rangée1 Colonne2</td>

<td>Rangée1 Colonne3</td>

</tr>

<tr>

<td>Rangée2 Colonne1</td>

<td bgcolor="lime">Rangée2 Colonne2</td>

<td>Rangée2 Colonne3</td>

</tr>

</table>

ce qui donne :

Rangée1 Colonne1	Rangée1 Colonne2	Rangée1 Colonne3
Rangée2 Colonne1	Rangée2 Colonne2	Rangée2 Colonne3

Entre les balises <td> et </td> tout est permis (même un tableau !) :

<table>

<tr>

<td bgcolor="aqua">
De gauche à droite puis de haut en bas, on a ce texte sur fond rose, un tableau (2 rangées et 2 colonnes), un texte centré, un texte aligné verticalement en haut, un texte écrit en blanc et aligné verticalement en bas sur fond bleu, et enfin une image.
</td>

<td>

<table border="1">
<tr>
<td>tableau</td>
<td>dans</td>
</tr>
<tr>
<td>un</td>
<td>tableau!</td>
</tr>
</table>

</td>

<td>

<div align="center">Rangée1 Colonne3</div>

</td>

</tr>

<tr>

<td valign="top">
Rangée2 Colonne1
</td>

<td valign="bottom" bgcolor="blue">
<font color="white">Rangée2 Colonne2</font>
</td>

</tr>

</table>

ce qui donne :

De gauche à droite puis de haut en bas, on a ce texte sur fond turquoise, un tableau (2 rangées et 2 colonnes), un texte centré, un texte aligné verticalement en haut, un texte écrit en blanc et aligné verticalement en bas sur fond bleu, et enfin une image.

tableau	dans
un	tableau!

Rangée1 Colonne3

Rangée2 Colonne1

Rangée2 Colonne2

Dernière mise à jour le 19 mai 2003.