1
HTML: CHAPITRE 3
Mr CHAOULID
Insérer des Listes
2
En HTML5, il est possible d’insérer deux types de
listes:
Les Listes à puces (Unordered List)
Les Listes numérotées (Ordered List)
Les Listes de définition (Description Lists)
Mr CHAOULID
Insérer des Listes à puces
3
Pour indiquer au navigateur ou se trouve la liste
utiliser le tag <ul>
Pour indiquer une nouvelle ligne (avec une puce au
début), créez un tag <li> et fermez-le plus loin.
Exemple:
<ul>
<li>Programmation</li>
<li>Analyse</li>
<li>Conception</li>
</ul>
Mr CHAOULID
Insérer des Listes à puces
4
En HTML 5 pour définir le style de puce de la liste,
utiliser l’attribut style:
Exemple Type de puce
<ul style="list-style-type:disc"> disque
<ul style="list-style-type:circle"> cercle
<ul style="list-style-type:square"> carré
<ul style="list-style-type:none"> rien
Mr CHAOULID
Insérer des Listes numérotées
5
Pour indiquer au navigateur ou se trouve la liste
utiliser le tag <ol>
Pour indiquer une nouvelle ligne (avec un numéro au
début), créez un tag <li> et fermez-le plus loin.
Exemple:
<ol>
<li>Programmation</li>
<li>Analyse</li>
<li>Conception</li>
</ol>
Mr CHAOULID
Insérer des Listes numérotées
6
En HTML 5 pour définir le style de numérotation de
la liste numérotée, utiliser l’attribut type:
Exemple Style de
numérotation
<ol type="1"> Nombres
<ol type="A"> Lettres Majuscules
<ol type="a"> Lettres Minuscules
<ol type="I"> Chiffres romains
<ol type="i"> Les i
Mr CHAOULID
Insérer des listes de définition
7
Pour insérer la liste de définition, utiliser la balise
<dl>
À l’intérieur de la liste, pour insérer le terme à
définir, utiliser la balise <dt>
Pour insérer la description du terme, utiliser la balise
<dd>
Exemple:
<dl>
<dt>Programmation</dt>
<dd>-La programmation est …….</dd>
<dt>Conception</dt>
<dd>- La conception est …….</dd>
</dl>
Mr CHAOULID
Les Tableaux
8
Les tableaux Offrent une mise en page particulière.
Un tableau est composé de lignes et de colonnes. À
l’intersection de ces dernières se trouve une cellule.
Une cellule peut contenir plusieurs éléments : Du texte,
des images, des vidéos...
Un tableau se définit comme un arrangement de lignes et
de colonnes, L'usage des tableaux est donc très fréquent.
Mr CHAOULID
Insérer des tableaux
9
Pour insérer un tableau, utiliser la balise <table>
pour insérer une ligne dans le tableau, utiliser la
balise <tr> (table row)
pour insérer une cellule, utiliser la balise <td> (table
data)
il est possible d’insérer des cellules d’entête avec la
balise <th>
Mr CHAOULID
Insérer des tableaux
10
Exemple:
<table>
<tr>
<th>Pays</th>
<th>Capitale</th>
</tr>
<tr>
<td>France</td>
<td>Paris</td>
</tr>
<tr>
<td>Espagne</td>
<td>Madrid</td>
</tr>
<tr>
<td>Royaume-Uni</td>
<td>Londres</td>
</tr>
</table>
Mr CHAOULID
Insérer des tableaux
11
Pour modifier le style d’un tableau, utiliser les attributs suivants:
Pour respecter les recommandations HTML 5, utiliser l’attribut style.
Attribut Description
<table border="1" > Définir une bordure
<table bgcolor=“red" > Définir une couleur d’arrière plan
<table width= « 50px »> Définir la largeur du tableau
<table width=« 100% »>
<table height= « 50px »> Définir la hauteur du tableau
<table cellspacing="10px"> Définir l’espace entre les cellules
<table cellpadding="10px"> Définir l’espace intérieur des cellules
<table style=« propriété: valeur »> Recommandation HTML5
Mr CHAOULID
Insérer des tableaux
12
Pour effectuer une fusion, il faut rajouter un attribut à la
balise <td>. Il faut savoir qu'il existe 2 types de fusion :
La fusion de colonnes :. La fusion s'effectue
horizontalement.
On utilisera l'attribut colspan.
La fusion de lignes :La fusion s'effectuera verticalement.
On utilisera l'attribut rowspan.
Mr CHAOULID
Exemple 1
13
<table border=“2px” width="80%" height="20%">
<tr style=“text-align:center”>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr style=“text-align:center “>
<td colspan="3">d</td>
</tr>
</table>
Mr CHAOULID
Exemple 2
14
<table border=2 width="80%" height="20%">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr align="center">
<td rowspan=2>d</td>
<td>e</td>
<td rowspan=2>f</td>
</tr>
<tr align="center">
<td>j</td>
</tr>
</table>
Mr CHAOULID
Les Listes et les tableaux
15
TP 3
Mr CHAOULID