I) Les listes
Le HTML présente la possibilité d'avoir différents formats de
paragraphes particuliers qui permettent une présentation claire et structurée
du texte. On distingue parmi les types usuels :
- Les listes de définitions : balise <DL>, balises
d'item <DT> (entrée de la liste) et <DD>
(identificateur de la définition) ;
- Les listes numérotées : balise <OL>, balise d'item
<LI> ;
- Les listes à puces : balise <UL>, balise d'item <LI>.
| Type de liste |
Code |
Exemple
|
| Liste de définitions |
<DL> Différents langages :
<DT> Perl </DT>
<DD> Practical Extraction
and Report Language </DD>
<DT> Java </DT>
<DD> Langage de programmation
orienté objet </DD>
</DL>
|
Différents langages :
- Perl
- Practical Extraction and Report Language
- Java
- Langage de programmation orienté objet
|
| Listes numérotées |
<OL> Différents langages :
<LI> Perl </LI>
<LI> Java </LI>
<LI> C++ </LI>
</OL>
|
Différents langages :
- Perl
- Java
- C++
|
| Listes à puces |
<UL> Différents langages :
<LI> Perl </LI>
<LI> Java </LI>
<LI> C++ </LI>
</UL>
|
Différents langages :
- Perl
- Java
- C++
|
|
 Remarques
:
Les listes imbriquées sont possibles.
Les attributs de <OL> sont : Compact (sans valeur, il réduit
au maximum l'interligne), Start (définit la valeur initiale), Type
("1" pour les chiffres arabes, "A" pour les
lettres capitales, "a" pour les minuscules, "I"
pour les chiffres romains en majuscules, "i" pour les mêmes
en minuscules).
Les attributs de <UL> sont : Compact (idem OL), Type (de
la puce "square", "circle", "disc").
|
II) Les tableaux
a) La création d'un tableau
HTML offre la possibilité de créer des tableaux. Ceux-ci sont utilisés
bien sûr pour créer des tables mais aussi pour effectuer un placement à la
demande d'éléments dans la page (en colonne, avec des alignements, insertion
d'images au milieu du texte, etc...).
Un tableau est composé de cellules (données ou en-tête de
colonne). Les cellules s'ordonnent en lignes et en colonnes.
Les principales balises (dans l'ordre de leur apparition) :
- <TABLE> Balise principale pour créer un tableau.
- <TR> Balise définissant une ligne du tableau. Plusieurs
lignes nécessitent plusieurs balises <TR>.
- <TH> Balise définissant une cellule de titre du tableau
(optionnel et à priori dans la première ligne). Le contenu est centré
et mis en gras.
- <TD> Balise définissant une cellule de données du
tableau, d'un nombre équivalent au nombre de colonnes de chaque ligne.
|
|
Exemple :
<TABLE>
<TR> <!-- Ligne 1 -->
<TH> Couleur </TH> <!-- Ligne 1 d'en-tête -->
<TH> Code </TH> <!-- Ligne 2 d'en-tête -->
<TH> Exemple </TH> <!-- Ligne 3 d'en-tête -->
</TR>
<TR> <!-- Ligne 2 -->
<TD> Bleu </TD>
<TD> #0000FF </TD>
<TD bgcolor="#0000FF"></TD>
</TR>
<TR> <!-- Ligne 3 -->
<TD> Rouge </TD>
<TD> #FF0000 </TD>
<TD bgcolor="#FF0000"></TD>
</TR>
</TABLE>
|
Ce qui donne en visuel :
|
| Couleur |
Code |
Exemple |
| Bleu |
#0000FF |
|
| Rouge |
#FF0000 |
|
b) Les modifications d'un tableau
Les principaux attributs :
- de la balise <TABLE> : border (spécifie l'épaisseur
en pixels de la bordure), bgcolor (applique une couleur de fond
aux cellules), cellpadding et cellspacing
(respectivement marge intérieure et espacement des cellules en
pixels), width (fixe la largeur du tableau en pixels pour une
taille fixe ou en pourcentage pour une taille variable en fonction de
la largeur de la fenêtre).
|
|
Exemple :
<TABLE border=2 bgcolor="#FFFFFF" cellpadding=10 cellspacing=0 width="80%" >
.. éléments du tableau
</TABLE>
|
- de la balise <TR> : align (spécifie
l'alignement du contenu des cellules de la ligne avec pour valeur left,
center, right), valign (spécifie la position verticale du
contenu des cellules de la ligne avec pour valeur top, middle, bottom),
bgcolor.
|
|
Exemple :
..
<TR align="center" valign="middle" bccolor=black>
.. éléments de la ligne
</TR>
..
|
- des balises <TH> et <TD> : ce sont les mêmes
que celles de la balise <TR> mais appliquées cette fois-ci à
la cellule seule.
|
Remarques
:
On peut insérer un tableau dans une cellule (pour
mettre un tableau au centre de la page par exemple, le premier
tableau "conteneur" n'ayant pas de bordure).
Il existe la balise <CAPTION> permettant de définir
un titre au tableau. Elle se place juste après la balise
<TABLE> et a pour attribut align (valeurs : top, bottom,
left, right).
|
|