html 2 listes, tableaux et formulaires
TRANSCRIPT
HTML 2
Listes, Tableaux et Formulaires
Groupe Informatique EGIM
Décembre 2003
1
Table des matières
1 Les listes 31.1 Listes ordonnées : la balise <OL> . . . . . . . . . . . . . . . . . . 31.2 Listes non ordonnées : la balise <UL> . . . . . . . . . . . . . . . . 4
2 Les tableaux 52.1 Les lignes : la balise <TR> . . . . . . . . . . . . . . . . . . . . . . 62.2 Les cellules : la balise <TD> . . . . . . . . . . . . . . . . . . . . . 6
3 Les formulaires 93.1 Champs simples : la balise <INPUT> . . . . . . . . . . . . . . . . . 93.2 Champs multilignes : la balise <TEXTAREA> . . . . . . . . . . . . . 103.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> dansle cas d'une liste non ordonnée.La balise <ELEMENT> sera <LI> dans les deux cas.On pourra de plus spéci�er 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'unelettre incrémentés à chaque ligne.Il est nécessaire de connaître les options suivantes de la balise <OL> pour adapterles listes ordonnées à nos besoins :
- L'option START= permet de spéci�er le numéro du premierélément. Par défaut la numérotation commence à 1 (ou A pour leslistes ordonnées alphabétiquement).Exemple : <OL START=2>
- L'option TYPE= permet de spéci�er le type de numérotation. Il y acinq types possibles :
1 pour une numérotation en chi�res,I pour une numérotation en chi�res romains,i pour une numérotation en chi�res 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 chi�res romains la numérotation se fera ainsi : -2, -1, 0, I, II, etc et en lettreselle 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. Lesbalises 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éci�e l'alignement du contenu des cases du tableau.ALIGN peut valoir LEFT, RIGHT, CENTER ou JUSTIFY.- WIDTH= spéci�e la largeur du tableau en pourcentage ou en pixels.Exemples : <TABLE WIDTH=80%> ou <TABLE WIDTH=500>
5
- HEIGHT= spéci�e la hauteur du tableau, avec la même syntaxe queWIDTH.- NOWRAP désactive la mise en forme automatique.- BORDER= spéci�e l'épaisseur de la bordure du tableau.- CELLSPACING= spéci�e la distance entre deux cellules.- CELLPADDING= spéci�e la distance entre le contenu et le bord dela cellule.
2.1 Les lignes : la balise <TR>
Un tableau est décrit ligne par ligne. Les balises <TR> et </TR> délimitentchaque 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éci�e l'alignement vertical du contenu des cellules dela ligne. Voici quelques valeurs que peut prendre VALIGN :
TOP pour un alignement en haut,MIDDLE pour un alignement au milieu (c'est le cas pardéfaut),BOTTOM pour un alignement en bas.
- NOWRAP désactive le retour à la ligne automatique dans les cellulesde 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 defusion de cellules :
- ROWSPAN= permet de spéci�er l'étendue en lignes d'une cellule.- COLSPAN= permet de spéci�er l'étendue en colonnes d'une cellule.
Ces dé�nitions étant assez abstraites, nous allons illustrer l'utilisation de cesoptions 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 êtrele même.Par contre, on peut changer en apparence le nombre de cellules d'une ligne oud'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èreligne ne contient qu'une cellule alors que la seconde en contient deux. On peutaussi voir le problème dans le sens vertical : la deuxième colonne ne contientqu'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 oul'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 deuxcolonnes,
<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 dehauteur, 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 convaincrede leur e�et.
8
3 Les formulaires
Un formulaire est encadré par les balises <FORM> et </FORM>.Les deux principales options de <FORM> sont :
- ACTION= qui spéci�e le script à activer, qui peut être un scriptPHP, 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, demot de passe, des cases à cocher, des boutons poussoirs, des boutons d'envoi,...
Les options de <INPUT> sont donc nombreuses :
- NAME= spéci�e le nom (ou identi�cateur) de l'élément deformulaire. Cela sera utile quand on voudra utiliser lesinformations entrées.- TYPE= est très important. C'est ce qui détermine le type dechamp. En voici quelques-uns :
TEXT pour un champ de textePASSWORD pour un champ de mot de passe (le texte tapésera remplacé par des astérisques)CHECKBOX pour une case à cocherRADIO pour un bouton poussoirSUBMIT pour un bouton d'envoiRESET pour un bouton d'e�acementHIDDEN pour un champ caché (cela pourra s'avérer utile)
- VALUE= spéci�e la valeur par défaut. C'est par exemple un textepour un champ de texte ou un bouton.- DISABLED sert à créer un champ désactivé- CHECKED sert à créer un champ coché- SIZE= spéci�e la taille du champ en caractères- MAXLENGTH= spéci�e 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 deplusieurs lignes. Contrairement à la balise <INPUT> qui se su�t à 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éci�e l'identi�cateur de la zone de texteROWS= spéci�e le nombre de lignesCOLS= spéci�e le nombre de colonnesDISABLED 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> serala 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éci�e 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> etpermettent d'ajouter à la page des informations qui pourront être utiles si vousvoulez 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 lapage.
Commençons par les balises contenant HTTP-EQUIV=. catégorie peut êtrel'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èsun 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 à a�cher le contenu de lapage dans une fenêtre à part. Cela permet d'éviter que la page soitappelé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 termessuivants :
description : permet de donner une description de votre site quipourra être utilisée par les robots de référencement.keywords : permet de donner une liste de mots clés quicaractériseront votre site, toujours dans un but de référencementauthor : permet de spéci�er le nom de l'auteur
12