HTML 2

Listes, Tableaux et Formulaires

Groupe Informatique EGIM

Décembre 2003

1
Table des matières
1 Les listes 3
1.1 Listes ordonnées : la balise <OL> . . . . . . . . . . . . . . . . . . 3
1.2 Listes non ordonnées : la balise <UL> . . . . . . . . . . . . . . . . 4
2 Les tableaux 5
2.1 Les lignes : la balise <TR> . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Les cellules : la balise <TD> . . . . . . . . . . . . . . . . . . . . . 6
3 Les formulaires 9
3.1 Champs simples : la balise <INPUT> . . . . . . . . . . . . . . . . . 9
3.2 Champs multilignes : la balise <TEXTAREA> . . . . . . . . . . . . . 10
3.3 Menus : la balise <SELECT> . . . . . . . . . . . . . . . . . . . . . 10
4 Les balises <META> 11

2
1 Les listes
Les listes permettent de présenter des éléments de manière ordonnée ou non.
Une liste se présente sous la forme suivante :

<LISTE>
<ELEMENT>
<ELEMENT>
<ELEMENT>
</LISTE>

La balise <LISTE> sera <OL> dans le cas d'une liste ordonnée, ou <UL> dans
le cas d'une liste non ordonnée.
La balise <ELEMENT> sera <LI> dans les deux cas.
On pourra de plus spécier un titre de liste en utilisant la balise <LH>.

1.1 Listes ordonnées : la balise <OL>

Les éléments d'une liste ordonnée seront précédés d'un nombre ou d'une
lettre incrémentés à chaque ligne.
Il est nécessaire de connaître les options suivantes de la balise <OL> pour adapter
les listes ordonnées à nos besoins :

- L'option START= permet de spécier le numéro du premier

élément. Par défaut la numérotation commence à 1 (ou A pour les
listes ordonnées alphabétiquement).
Exemple : <OL START=2>

- L'option TYPE= permet de spécier le type de numérotation. Il y a

cinq types possibles :
1 pour une numérotation en chires,
I pour une numérotation en chires romains,
i pour une numérotation en chires romains minuscules,
A pour une numérotation en lettres majuscules,
a pour une numérotation en lettres minuscules.

Exemple : <OL START=2 TYPE=A>

Remarque : si vous faites commencer la numérotation à un nombre négatif,

en chires romains la numérotation se fera ainsi : -2, -1, 0, I, II, etc et en lettres
elle se fera ainsi : -B, -A, @, A, B, etc.

3
1.2 Listes non ordonnées : la balise <UL>
Les listes non ordonnées ne possédant pas de numérotation, les éléments se-
ront précédés de symboles.
On présentera ici l'option TYPE=, qui permet de choisir le type de symbole uti-
lisé. Il en existe trois :

CIRCLE fait précéder les éléments d'un cercle,

DISC fait précéder les éléments d'un disque,
SQUARE fait précéder les éléments d'un carré.

4
2 Les tableaux
Les tableaux vont permettre de créer des mises en pages sophistiquées. Les
balises constitutives d'un tableau possèdent de nombreuses options qui permet-
tront de les adapter à beaucoup d'utilisations.

Un tableau se présente sous la forme suivante :

<TABLEAU>
<LIGNE>
<CELLULE>Case 1</CELLULE>
<CELLULE>Case 2</CELLULE>
</LIGNE>
<LIGNE>
<CELLULE qui prend 2 colonnes>
Case 3
</CELLULE>
</LIGNE>
</TABLEAU>

La balise <TABLEAU> sera <TABLE>. Les balises <LIGNE> et <CEL-

LULE> seront respectivement les balises <TR> et <TD>.

Il est possible de donner un titre au tableau en utilisant la balise <CAPTION>.

Exemple :

<TABLE>
<CAPTION>Titre</CAPTION>
<TR>
<TD>Case 1</TD>
<TD>Case 2</TD>
</TR>
</TABLE>

Voici quelques options de la balise <TABLE> :

- ALIGN= spécie l'alignement du contenu des cases du tableau.

ALIGN peut valoir LEFT, RIGHT, CENTER ou JUSTIFY.
- WIDTH= spécie la largeur du tableau en pourcentage ou en pixels.
Exemples : <TABLE WIDTH=80%> ou <TABLE WIDTH=500>

5
 - HEIGHT= spécie la hauteur du tableau, avec la même syntaxe que
WIDTH.
- NOWRAP désactive la mise en forme automatique.
- BORDER= spécie l'épaisseur de la bordure du tableau.
- CELLSPACING= spécie la distance entre deux cellules.
- CELLPADDING= spécie la distance entre le contenu et le bord de
la cellule.

2.1 Les lignes : la balise <TR>

Un tableau est décrit ligne par ligne. Les balises <TR> et </TR> délimitent
chaque ligne.
On peut utiliser dans <TR> les options ALIGN et HEIGHT de la balise <TABLE>.
La balise <TR> possède aussi deux options qui lui sont particulières :

- VALIGN= spécie l'alignement vertical du contenu des cellules de

la ligne. Voici quelques valeurs que peut prendre VALIGN :
TOP pour un alignement en haut,
MIDDLE pour un alignement au milieu (c'est le cas par
défaut),
BOTTOM pour un alignement en bas.
- NOWRAP désactive le retour à la ligne automatique dans les cellules
de la ligne.

2.2 Les cellules : la balise <TD>

On peut utiliser dans <TD> les options ALIGN, WIDTH, HEIGHT.

Les options les plus intéressantes de <TD> sont certainement les options de
fusion de cellules :

- ROWSPAN= permet de spécier l'étendue en lignes d'une cellule.

- COLSPAN= permet de spécier l'étendue en colonnes d'une cellule.

Ces dénitions étant assez abstraites, nous allons illustrer l'utilisation de ces
options par des exemples.

6
 La déclaration suivante est fausse :

<TABLE BORDER=1>
<TR>
<TD>Case 1</TD>
</TR>
<TR>
<TD>Case 2</TD>
<TD>Case 3</TD>
</TR>
</TABLE>

Le nombre théorique de cellules dans une ligne doit toujours être le même.
De même, le nombre théorique de cellules dans une colonne doit toujours être
le même.
Par contre, on peut changer en apparence le nombre de cellules d'une ligne ou
d'une colonne en utilisant respectivement les options ROWSPAN et COLSPAN.

Dans la déclaration précédente, le problème vient du fait que la première

ligne ne contient qu'une cellule alors que la seconde en contient deux. On peut
aussi voir le problème dans le sens vertical : la deuxième colonne ne contient
qu'une cellule alors que la première en contient deux.

Il y a donc deux façons de résoudre ce problème. On n'appliquera l'une ou

l'autre selon le résultat que l'on souhaite obtenir.

7
 On peut soit déclarer que la cellule de la première ligne s'étend sur deux
colonnes,

<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>Case 1</TD>
</TR>
<TR>
<TD>Case 2</TD>
<TD>Case 3</TD>
</TR>
</TABLE>

...soit ajouter à la première ligne une cellule qui s'étend sur deux lignes de
hauteur, et ne déclarer plus qu'une cellule à la deuxième ligne, la deuxième cel-
lule étant en fait celle du dessus :

<TABLE border=1>
<TR>
<TD>Case 1</TD>
<TD ROWSPAN=2>Case 3</TD>
</TR>
<TR>
<TD>Case 2</TD>
</TR>
</TABLE>

Il est vivement conseillé d'expérimenter ces options soi-même pour se convaincre

de leur eet.

8
3 Les formulaires
Un formulaire est encadré par les balises <FORM> et </FORM>.
Les deux principales options de <FORM> sont :

- ACTION= qui spécie le script à activer, qui peut être un script

PHP, PERL ...
- METHOD= qui peut valoir GET ou POST

Exemple : <FORM ACTION="valider.php" METHOD="POST">

3.1 Champs simples : la balise <INPUT>

La balise <INPUT> est celle qui va permettre de créer des champs de texte, de
mot de passe, des cases à cocher, des boutons poussoirs, des boutons d'envoi,...

Les options de <INPUT> sont donc nombreuses :

- NAME= spécie le nom (ou identicateur) de l'élément de

formulaire. Cela sera utile quand on voudra utiliser les
informations entrées.
- TYPE= est très important. C'est ce qui détermine le type de
champ. En voici quelques-uns :
TEXT pour un champ de texte
PASSWORD pour un champ de mot de passe (le texte tapé
sera remplacé par des astérisques)
CHECKBOX pour une case à cocher
RADIO pour un bouton poussoir
SUBMIT pour un bouton d'envoi
RESET pour un bouton d'eacement
HIDDEN pour un champ caché (cela pourra s'avérer utile)
- VALUE= spécie la valeur par défaut. C'est par exemple un texte
pour un champ de texte ou un bouton.
- DISABLED sert à créer un champ désactivé
- CHECKED sert à créer un champ coché
- SIZE= spécie la taille du champ en caractères
- MAXLENGTH= spécie la taille limite des données saisies

9
3.2 Champs multilignes : la balise <TEXTAREA>
La balise <TEXTAREA> permet d'ajouter au formulaire une zone de texte de
plusieurs lignes. Contrairement à la balise <INPUT> qui se sut à elle même,
comme une balise <BR>, la balise <TEXTAREA> est utilisée sous la forme :

<TEXTAREA>Le texte de ma zone de texte</TEXTAREA>

Voici quelques options de <TEXTAREA> :

NAME= spécie l'identicateur de la zone de texte
ROWS= spécie le nombre de lignes
COLS= spécie le nombre de colonnes
DISABLED crée un champ désactivé

3.3 Menus : la balise <SELECT>

La balise <SELECT> permet d'insérer une liste de sélection dans un menu.

Un menu se présente sous la forme suivante :

<MENU>
<ELEMENT>
<ELEMENT>
<ELEMENT>
</MENU>

La balise <MENU> sera la balise <SELECT> et la balise <ELEMENT> sera

la balise <OPTION>.

La seule option de <SELECT> est MULTIPLE qui permet de choisir plusieurs

éléments dans la liste.

<OPTION> possède deux options :

- VALUE= spécie une valeur pour l'élément

- SELECTED rend l'élément sélectionné par défaut

10
4 Les balises <META>
Les balises <META> sont présentes entre les balises <HEAD> et </HEAD> et
permettent d'ajouter à la page des informations qui pourront être utiles si vous
voulez faire référencer votre site.

Une balise <META> se présente sous la forme :

<META NAME="catégorie" CONTENT="contenu">

ou
<META HTTP-EQUIV="catégorie" CONTENT="contenu">
pour certaines informations se rapportant plutôt à l'aspect technique de la
page.

Commençons par les balises contenant HTTP-EQUIV=. catégorie peut être

l'un des termes suivants :

content-type : pour indiquer la table de caractères utilisée.

Exemple : <META HTTP-EQUIV="content-type"
CONTENT="text/html ; charset=iso-8859-1">

content-language : pour indiquer la ou les langues du site.

Exemple : <META HTTP-EQUIV="content-language"
CONTENT="fr">

refresh : force le navigateur à recharger une nouvelle page après

un temps donné. Cela permet de faire une redirection.
Exemple : <META HTTP-EQUIV="refresh" CONTENT="5 ;
URL=http ://esm2.imt-mrs.fr">

window-target : force le navigateur à acher le contenu de la

page dans une fenêtre à part. Cela permet d'éviter que la page soit
appelée à l'intérieur d'une page qui contient des frames.
Exemple : <META HTTP-EQUIV="window-target"
CONTENT="_top">

11
 Passons aux balises contenant NAME=. catégorie peut être l'un des termes
suivants :

description : permet de donner une description de votre site qui

pourra être utilisée par les robots de référencement.
keywords : permet de donner une liste de mots clés qui
caractériseront votre site, toujours dans un but de référencement
author : permet de spécier le nom de l'auteur

12