Partie HTML TD 5 : Listes et tableaux

TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
Partie HTML
TD 5 : Listes et tableaux
1. Les listes
Listes à puces ou numérotées pour présenter une énumération (dans un sommaire par ex.)
1.1. Les balises
•
<UL> …</UL> indique le début et la fin
d'une liste de puces
Attribut : type= "circle" ou "disk" ou
"square"
•
<LI> …</LI> : désigne un nouvel
élément d'une liste.
ex :
<UL type="disc">
<LI>Element1</LI>
<LI>Element 2</LI>
<LI>Element 3</LI>
</UL>
•
<OL> et </OL> indique le début et la
fin d'une liste numérotée
Attribut :
type
="a"
pour
une
numérotation avec des lettres
•
<LI>... </LI>: désigne un
élément 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 synthèse
Vous allez créer une page, appelée Puces.html, qui fera apparaître plusieurs mises en forme
de listes.
La page comprendra 2 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail
entre chaque partie. Pour cela, enregistrez votre fichier et réactualiser la page dans le navigateur.
•
•
Description de la page à créer :
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 appelés : choix1, choix2, choix3.
•
Une ligne séparatrice
•
•
2
partie :
un titre de niveau 1, centré : LISTES NUMEROTEES
Une liste numérotée de deux choix appelés : choix1, choix2.
ère
ème
Page 1 sur 3
TD Informatique Semestre 2 : Réseaux - HTML
Université Stendhal, Grenoble III
2. Les tableaux
Les tableaux sont très 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 même ligne auront la taille (hauteur, largeur) de la cellule ayant le
plus grand contenu.
2.1. Les balises
•
<TABLE> … </TABLE> : crée 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 intérieurs du tableau
bgcolor ou bordercolor ou bordercolordark ou bordercolorlight pour définir des
couleurs de fond ou de trait
width, height,..
ex : <table border=2 cellpadding=3 align="center" width="90%"> …. </table>
•
<TR>… </TR> crée une nouvelle ligne dans un tableau
•
<TD>… </TD> : Crée 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 définir des
couleurs de fond ou de trait
colspan pour fusionner plusieurs cellules d'une même ligne (ex : colspan="2")
rowspan pour fusionner plusieurs cellules d'une même 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 : Réseaux - HTML
Université Stendhal, Grenoble III
2.2. Exercice de synthèse
Vous allez créer une page, appelée Tableaux.html, qui fera apparaître plusieurs tableaux.
La page comprendra 2 parties. Il est conseillé d’aller vérifier dans le navigateur votre travail
entre chaque partie. Pour cela, enregistrez votre fichier et réactualiser la page dans le navigateur.
•
•
Description de la page à créer :
Le fond de la page sera de la couleur "palegoldenrod" et le texte sera "marroon".
Le titre de la page sera : LES TABLEAUX
ère
•
1 partie :
un titre de niveau 1, centré : TABLEAU SIMPLE
Vous réaliserez le tableau dont la description en HTML est donnée ci-dessus. Ce tableau sera
centré.
Une ligne séparatrice
•
2
partie :
un titre de niveau 1, centré : TABLEAU PLUS COMPLEXES
•
Vous réaliserez un tableau, centré, similaire au tableau ci-dessous :
•
•
ème
Cellule 1
Cellule 2
Cellule 3
Cellule 4
Cellule fusionnée sur 4 colonnes
Cellule 6
Cellule 7
Cellule 8
Cellule 9
•
Une ligne séparatrice de 200 pixels de large
•
Vous réaliserez un tableau, centré, similaire au tableau ci-dessous :
Cellule 2
Cellule 1
Fusion
de
2
lignes
Cellule 4
Cellule 3
•
Une ligne séparatrice de 200 pixels de large
•
Vous réaliserez 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
Page 3 sur 3
Cellule 4
Cellule 5