TD Informatique Semestre 2 : Rseaux - HTML

Universit Stendhal, Grenoble III

Partie HTML TD 5 : Listes et tableaux

1. Les listes
Listes puces ou numrotes pour prsenter une numration (dans un sommaire par ex.)

1.1. Les balises

<UL> </UL> indique le dbut et la fin d'une liste de puces Attribut : type = "circle" ou "disk" ou "square" <LI> </LI> : dsigne un nouvel lment d'une liste. ex : <UL type="disc"> <LI>Element1</LI> <LI>Element 2</LI> <LI>Element 3</LI> </UL> <OL> et </OL> indique le dbut et la fin d'une liste numrote Attribut : type ="a" pour une numrotation avec des lettres <LI>... </LI>: dsigne un lment d'une liste. ex : <OL type="a"> <LI>Element 13</LI> <LI>Element 14</LI> <LI>Element 15</LI> </OL> nouvel

1.2. Exercice de synthse

Vous allez crer une page, appele Puces.html, qui fera apparatre plusieurs mises en forme de listes. La page comprendra 2 parties. Il est conseill daller vrifier dans le navigateur votre travail entre chaque partie. Pour cela, enregistrez votre fichier et ractualiser la page dans le navigateur. Description de la page crer : Le fond de la page sera de la couleur "palegoldenrod" et le texte sera "marroon". Le titre de la page sera : Les listes 1 partie : un titre de niveau 1, centr : LISTES A PUCES une liste puces de trois choix appels : choix1, choix2, choix3. Une ligne sparatrice 2 partie : un titre de niveau 1, centr : LISTES NUMEROTEES Une liste numrote de deux choix appels : choix1, choix2.
me re

Page 1 sur 3

TD Informatique Semestre 2 : Rseaux - HTML

Universit Stendhal, Grenoble III

2. Les tableaux
Les tableaux sont trs pratiques pour faire de la mise en page notamment parce qu'ils permettent d'aligner correctement des images, des textes, Une cellule peut contenir du texte, une image, un sous-tableau, Toutes les cellules d'une mme ligne auront la taille (hauteur, largeur) de la cellule ayant le plus grand contenu.

2.1. Les balises

<TABLE> </TABLE> : cre un tableau Attributs : align, border = nbre de pixels pour l'paisseur du cadre cellpadding = nbre de pixels entre le bord des cellules et leurs contenus cellspacing = nbre de pixels pour l'paisseur des traits intrieurs du tableau bgcolor ou bordercolor ou bordercolordark ou bordercolorlight pour dfinir des couleurs de fond ou de trait width, height,.. ex : <table border=2 cellpadding=3 align="center" width="90%"> . </table> <TR> </TR> cre une nouvelle ligne dans un tableau

<TD> </TD> : Cre une nouvelle cellule dans un tableau Une balise <TD> est toujours comprise entre des balises <TR> et </TR> Attributs : align pour un alignement horizontal dans la cellule (left, center, right) valign pour un alignement vertical dans la cellule (top, middle, bottom) bgcolor ou bordercolor ou bordercolordark ou bordercolorlight pour dfinir des couleurs de fond ou de trait colspan pour fusionner plusieurs cellules d'une mme ligne (ex : colspan="2") rowspan pour fusionner plusieurs cellules d'une mme colonne (ex :rowspan="6") width pour donner la largeur de la cellule height pour donner la hauteur de la cellule ex : <td align="center" valign="bottom" width="100" bgcolor="white">Contenu</td> Voici un tableau de 2 colonnes et 2 lignes : <TABLE border=4 cellspacing="2" bgcolor="white" width="200"> <TR> <TD width="50"><font color="black">Cellule 1</font></TD> <TD width="150">Cellule 2</TD> </TR> <TR> <TD bgcolor="red">Cellule 3</TD> <TD height="150" valign="bottom" align="right">Cellule 4</TD> </TR> </TABLE>

Page 2 sur 3

TD Informatique Semestre 2 : Rseaux - HTML

Universit Stendhal, Grenoble III

2.2. Exercice de synthse

Vous allez crer une page, appele Tableaux.html, qui fera apparatre plusieurs tableaux. La page comprendra 2 parties. Il est conseill daller vrifier dans le navigateur votre travail entre chaque partie. Pour cela, enregistrez votre fichier et ractualiser la page dans le navigateur. Description de la page crer : Le fond de la page sera de la couleur "palegoldenrod" et le texte sera "marroon". Le titre de la page sera : LES TABLEAUX 1 partie : un titre de niveau 1, centr : TABLEAU SIMPLE Vous raliserez le tableau dont la description en HTML est donne ci-dessus. Ce tableau sera centr. Une ligne sparatrice 2 partie : un titre de niveau 1, centr : TABLEAU PLUS COMPLEXES Vous raliserez un tableau, centr, similaire au tableau ci-dessous :
me re

Cellule 1 Cellule 6

Cellule 2 Cellule 7

Cellule 3 Cellule 8

Cellule 4 Cellule 9

Cellule fusionne sur 4 colonnes

Une ligne sparatrice de 200 pixels de large Vous raliserez un tableau, centr, similaire au tableau ci-dessous : Cellule 1 Cellule 3 Cellule 2 Cellule 4 Fusion de 2 lignes

Une ligne sparatrice de 200 pixels de large Vous raliserez un tableau, centr, similaire au tableau ci-dessous : TITRE 1 Une petite image choisie sur le site de Stendhal Cellule 2 Cellule 3 Cellule 1

TITRE 2 Une petite image choisie sur le site de Stendhal

Cellule 4 Cellule 5

Page 3 sur 3