logo UsualSoft   Skip Navigation Links
Accueil
Références
Formations
TutorielsExpand Tutoriels
Liens téléchargements

Contact : usualsoft@outlook.fr
Microsoft Certified Professional
Cours : HTML

La mise en forme de la page

Gilles Chamillard

Fiche n°4

Retour   Suiote

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 :
  1. Perl
  2. Java
  3. 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).


Retour haut Retour vers le haut de la page Suiote