université de technologie de belfort montbéliard par s. lamrous le 10/05/2006 1 introduction au...

Le 10/05/2006

Université de Technologie de Belfort Montbéliard

1

par S. Lamrous

Introduction au langage HTML:comment composer des pages pour un serveur

WWW

Le 10/05/2006


2

par S. Lamrous

Petit historique d’Internet (1)• Début des années 70

– ARPAnet (Advanced Research Projects Agency Network)Réseau pour la défense américaine

• Première démonstration publique du réseau : oct. 1972

• En 1972 également, envoi du premier courrier électronique par Ray Tomlinson

• Au cours des années 70– L'interconnexion des réseaux est adoptée par les

universités pour :• la transmission d'informations, de fichiers• la communication• l'utilisation partagée de gros ordinateurs

• Le réseau échappe de plus en plus aux militaires au profit des universitaires qui le rebaptisent "Internet", abréviation de « International Network »

Le 10/05/2006


3

par S. Lamrous

Petit historique d’Internet (2)• Création de protocoles (TCP/IP, Mail, FTP, ...)

TCP/IP : Transmission Control Protocol / Internet Protocol – définition du mode de transmission de l!information– principe “grossier” : acheminer des données sur un réseau

en les fragmentant en petits paquets– protocole “officiel” en 1981.

• Années 80– Développement des connexions aux Etats-Unis puis en

Europe, au Japon, en Océanie– 213 machines reliées en 1981– 535 000 en 1991

• Le grand public n'est pas encore là... il faut connaître le langage de l’Internet !

Le 10/05/2006


4

par S. Lamrous

Introduction • Le texte et sa mise en page

– Texte et directives – Structuration et mise en page – Langage en évolution

• Les outils de composition – Outil de lecture, outil de composition – Outils de composition spécialisés ou non

• Les directives (étiquettes, tags) – Syntaxe – Champ d'action

• Mot d'ordre : structurer!

Le 10/05/2006


5

par S. Lamrous

Directives de structuration • Structure générale d'un document en HTML

Tout document HTML se compose ainsi:

<HTML><HEAD><TITLE>Centre National d'Art et de Culture Georges Pompidou</TITLE></HEAD><BODY>......</BODY></HTML>

Le 10/05/2006


6

par S. Lamrous

Le mot, la phrase effet souhaité directive résultat notes

gras fermer la porte <B>doucement</B> en sortant

fermer la porte doucement en sortant

italique Les <I>tags HTML</I> sont des directives

Les tags HTML sont des directives

souligné <U>Le formatage</U> d'un document permet de le lire

Le formatage d'un document permet de le lire

non standard, à éviter pour le moment

exposanta<SUP>2</SUP>+b<SUP>2</SUP>La 3<SUP>ème</SUP> ligne

a2+b2

La 3ème ligne

indice B<SUB>2n</SUB> B2n

police de largeur fixe

La commande à effectuer est <CODE>mosaic -kiosk</CODE>

La commande à effectuer est mosaic -kiosk

Le 10/05/2006


7

par S. Lamrous

Caractères spéciaux dir. rés dir. rés dir. rés dir.

rés

dir. rés dir. rés dir. rés dir.rés

.

á á é é í í ó ó ú ú ý ý

à à è è ì ì ò ò ù ù

â â ê ê î î ô ô û û

ä ä ë ë ï ï ö ö ü ü ÿ ÿ

ã ã ñ ñ õ õ

å å

æ æ ç ç ø ø

Á Á É É Í Í Ó Ó Ú Ú Ý Ý

À À È È Ì Ì Ò ÒÙ

Ù

Â Â Ê Ê Î Î Ô Ô Û Û

Ä Ä Ë Ë Ï Ï Ö Ö Ü Ü

Ã Ã Ñ Ñ Õ Õ

Å Å

Æ Æ Ç Ç &216;&216;

Le 10/05/2006


8

par S. Lamrous

Séparateurs et paragraphes effet souhaité directive résultat notes retour à la ligne à l'intérieur d'un paragraphe

Le Centre National<BR>d'Artet de Culture

Le Centre Nationald'Art et de Culture

ne pas utiliser plusieurs à la suite (<BR><BR>...)

saut (ou fin) de paragraphe

Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible.<P>Certaines directives servent à couper la présentation.

Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible.

Certaines directives servent à couper la présentation.

ne pas utiliser plusieurs à la suite; on peut le mettre sur une ligne séparée pour rendre le code plus lisible, mais cela ne change en rien le résultat

règle (ligne horizontale séparatrice)

Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible.<HR>Certaines directives servent à couper la présentation.

Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible.

Certaines directives servent à couper la présentation.

paragraphe indenté Comme le dit Virilio:<BLOCKQUOTE>Nous aimerons notre lointain au lieu d'aimer notre prochain.</BLOCKQUOTE> C'est l'effet pervers des réseaux.

Comme le dit Virilio:

Nous aimerons notre

lointain au lieu d'aimer

notre prochain.

C'est l'effet pervers des réseaux.

On peut découper le texte indenté (entre les <BLOCKQUOTE> ... </BLOCKQUOTE>) à l'aide de sauts de fin de ligne ou de paragraphe.

Le 10/05/2006


9

par S. Lamrous

Les listes effet souhaité directive résultat notes

liste non numérotée Voici une liste de ce type:<UL><LI>le premier élément de cette liste est séparé des autres<LI>et ainsi de suite<LI>l'un après l'autre</UL>jusqu'à la fin de la liste.

Voici une liste de ce type: •le premier élément de cette liste est séparé des autres •et ainsi de suite •l'un après l'autre

jusqu'à la fin de la liste.

UL sont les initiales de

Unnumbered List.

liste numérotée Voici une liste de ce type:<OL><LI>le premier élément de cette liste est séparé des autres et numéroté automatiquement,<LI>le second,<LI>et ainsi de suite</OL>


Voici une liste de ce type:

1. le premier élément de cette liste est séparé des autres et numéroté automatiquement,

2. le second,

3. et ainsi de suite


OL sont les initiales de Ordered List.

liste avec intitulés Voici une liste de ce type:<DL><DT>Chaque intitulé recouvre:<DD>un ou plusieurs items, ceci est le premier;<DD>ceci est le second;<DD>ceci est le troisième.<DT>Le second intitulé recouvre:<DD>un seul item.</DL>jusqu'à la fin.

Voici une liste de ce type:

Chaque intitulé recouvre:

un ou plusieurs items,

ceci est le premier;

ceci est le second;

ceci est le troisième.

Le second intitulé recouvre:

un seul item.

jusqu'à la fin.

Les "items" sont indentés, et commencent à la ligne. Pour mieux distinguer les intitulés et/ou les éléments, on peut rajouter des directives (par exemple, faire ressortir les intitulés en gras, les précéder d'une séparation de paragraphes, etc.)

Le 10/05/2006


10

par S. Lamrous

Listes et sous listes effet souhaité directive résultat notes

liste dans une liste, ou sous-liste

Le Centre est composé de deux départements:<UL><LI>le MNAM/CCI, dont les domaines de compétences sont:<UL><LI>la peinture<LI>la sculpture<LI>le dessin<LI>...</UL><LI>le DDC, dans les domaines de:<OL><LI>l'édition<LI>l'audio-visuel<LI>l'actualité culturelle</OL>et de deux organismes associés...

Le Centre est composé de deux départements: •le MNAM/CCI, dont les domaines de compétences sont:

•la peinture •la sculpture •le dessin •...

•le DDC, dans les domaines de:

1.l'édition 2.l'audio-visuel 3.l'actualité culturelle

et de deux organismes associés...

Les caractères affichés en face de chaque élément dépendent du navigateur.

Le 10/05/2006


11

par S. Lamrous

Listes et sous listes effet souhaité directive résultat notes

liste dans une liste, ou sous-liste

Le Centre est composé de deux départements:<UL><LI>le MNAM/CCI, dont les domaines de compétences sont:<UL><LI>la peinture<LI>la sculpture<LI>le dessin<LI>...</UL><LI>le DDC, dans les domaines de:<OL><LI>l'édition<LI>l'audio-visuel<LI>l'actualité culturelle</OL>et de deux organismes associés...</UL>

Le Centre est composé de deux départements: •le MNAM/CCI, dont les domaines de compétences sont:

•la peinture •la sculpture •le dessin •...

•le DDC, dans les domaines de:

1.l'édition 2.l'audio-visuel 3.l'actualité culturelle

et de deux organismes associés...

Les caractères affichés en face de chaque élément dépendent du navigateur.

Le 10/05/2006


12

par S. Lamrous

Les titres effet souhaité directive résultat notes

titre niveau 1<H1>IRCAM</H1>1 place Igor-Stravinsky,<BR>75004 Paris

IRCAM1 place Igor-Stravinsky,

75004 Paris

Il est inutile de précéder ou de faire suivre un titre des directives <P> ou <BR>: il est séparé du corps du texte. On peut par contre insérer un <BR> dans le titre pour y forcer un retour à la ligne (sous-titre, par exemple).

titre niveau 2

<H2>La recherche et le développement</H2>Au service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques.

La recherche et le développementAu service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques.

...

titre niveau 6<H6>En cas de problème, s'adresser au secrétariat.</H6>

En cas de problème, s'adresser au secrétariat

Le 10/05/2006


13

par S. Lamrous

Les tableaux Ceux-ci sont des extensions récentes - et fort utiles - du langage HTML, et le standard ne s'est pas encore vraiment stabilisé. Outre une utilisation "normale" pour l'affichage d'information tabulée (comme dans ce document-ci), ils servent actuellement à effectuer des effets de mise en page que HTML ne permet pas, notamment le multi-colonne (cf. l'exemple ci-contre, la page d'accueil du Boston Book Review). Dans une utilisation de ce type, il faudra considérer bien plus précisément le contenu de chaque cellule du tableau, pour éviter des repliements qui nuiraient à cette mise en page. On peut comparer ce type d'utilisation à celui de QuarkXPress ou PageMaker (par rapport à Word): on prévoit la place des éléments sur la page, plutôt que simplement les uns par rapport aux autres.

Le 10/05/2006


14

par S. Lamrous

Éléments d'un tableau Un tableau est composé de cellules, agencées en rangées, et les rangées sont alignées les unes en dessous des autres. Les directives de base pour le construire procèdent donc de cette façon :

<TR> signifie «Table Row» (rangée de tableau). On peut déterminer si les réglures seront visibles ou non, en rajoutant un complément d'information dans la directive se rapportant à tout le tableau: <TABLE BORDER> indique qu'elles

doivent être affichées.

Chaque rangée est elle-même constituée de cellules, délimitées par les directives <TD> ... </TD> ("table data", une donnée du tableau):

On n'est pas forcé d'écrire toutes les directives sur la même ligne.

Le 10/05/2006


15

par S. Lamrous

Alignement Les données, à l'intérieur des cellules, sont alignés à gauche par défaut. Ceci convient bien à du texte par exemple, mais pas à des images ou des chiffres. Il est possible de déterminer l'alignement de ces données au niveau de chaque rangée et/ou au niveau de chaque cellule.

Ainsi, la directive:

<TR ALIGN=RIGHT> ... </TR> indique que les contenus de toutes les cellules de cette rangée seront alignées à droite dans leurs cellules, sauf indication contraire pour une cellule spécifique.

Autre exemple: la directive

<TD ALIGN=CENTER> ... </TD> indique que le contenu de cette cellule sera centré, quelque soit la directive d'alignement pour la rangée.

Le 10/05/2006


16

par S. Lamrous

Exemple 1

parti 1 19% 27% 10%

parti 2 14% 54% 60%

parti 3 67% 19% 30%

Pour obtenir le tableau suivant, on remarquera que la plupart des données sont alignées à droite, sauf pour la première cellule de chaque ligne, et que les réglures sont visibles. On écrira donc: <TABLE BORDER>

<TR ALIGN=RIGHT>

<TD ALIGN=LEFT>parti 1</TD> <TD>19%</TD> <TD>27%</TD> <TD>10%</TD>

</TR>

<TR ALIGN=RIGHT>


</TR>

<TR ALIGN=RIGHT>


</TR>

</TABLE>

Les espaces entre les lignes ci-dessus n'ont aucune influence sur la mise en page du tableau, mais

rendent le document source plus lisible.

Le 10/05/2006


17

par S. Lamrous

En-têtes

Dans le tableau ci-dessus, il serait utile de pouvoir rajouter une première ligne qui décrit le contenu des colonnes. On peut le faire avec les éléments déjà fournis, en spécifiant, par exemple, une rangée dont tous les éléments sont centrés, et encadrer chaque élément de la directive <B> ... </B> afin qu'il s'affiche en gras. Il existe une directive spéciale pour ce genre de cellule: <TH> ... </TH>

(TH = "Table Header", en-tête de tableau), qui centre le contenu de la cellule et l'affiche en gras.

Le 10/05/2006


18

par S. Lamrous

Exemple 2

parti 1989 1990 1991

parti 1 19% 27% 10%

parti 2 14% 54% 60%

parti 3 67% 19% 30%

<TABLE BORDER>

<TR><TH>parti</TH> <TH>1989</TH> <TH>1990</TH> <TH>1991</TH>

</TR>

<TR ALIGN=RIGHT>


</TR> <TR ALIGN=RIGHT>




</TR> </TABLE>

Le 10/05/2006


19

par S. Lamrous

Chevauchement

Il est possible de faire en sorte qu'une cellule s'étende sur 2 ou plusieurs colonnes et/ou rangées. Pour cela, il suffit de spécifier dans la directive le nombre de colonnes (COLSPAN) ou de rangées (ROWSPAN) sur lesquelles elle s'étend.

Le 10/05/2006


20

par S. Lamrous

Exemple 3Voici un tableau à réaliser avec un chevauchement horizontal. La 2e ligne ne comportera donc que 3 cellules. On écrira

donc:

parti 1989 1990 1991

parti 1 19% 10%

parti 2 14% 54% 60%

parti 3 67% 19% 30%

<TABLE BORDER>

<TR> <TH>parti</TH> <TH>1989</TH> <TH>1990</TH> <TH>1991</TH>

</TR>

<TR ALIGN=RIGHT>

<TD ALIGN=LEFT>parti 1</TD>

<TD COLSPAN=2>19%</TD> <TD>10%</TD>





</TR> </TABLE>

On aurait pu centrer la donnée dans la cellule chevauchante, en

faisant: <TD COLSPAN=2 ALIGN=CENTER>19%</TD>

Le 10/05/2006


21

par S. Lamrous

Exemple 3Voici un tableau à réaliser avec un chevauchement horizontal. La 2e ligne ne comportera donc que 3 cellules. On écrira

donc:

parti 1989 1990 1991

parti 1 19% 10%

parti 2 14% 54% 60%

parti 3 67% 19% 30%

<TABLE BORDER>


</TR>

<TR ALIGN=RIGHT>







</TR> </TABLE>

On aurait pu centrer la donnée dans la cellule chevauchante, en

faisant: <TD COLSPAN=2 ALIGN=CENTER>19%</TD>

Le 10/05/2006


22

par S. Lamrous

Exemple 4Enfin, voici un chevauchement vertical. La 2e rangée comprend 4 cellules, dont la 3e s'étend sur la 3e rangée. Donc, en écrivant le contenu de la 3e rangée, on ne mentionnera pas cette cellule:

son contenu viendra de la rangée précédente.

parti 1989 1990 1991

parti 1 19% 10%

parti 2 14% 54%60%

parti 3 67% 19%

<TABLE BORDER>


</TR>

<TR ALIGN=RIGHT>




<TD ALIGN=LEFT>parti 2</TD> <TD>14%</TD> <TD>54%</TD> <TD ROWSPAN=2>60%</TD> </TR>

<TR ALIGN=RIGHT>

<TD ALIGN=LEFT>parti 3</TD> <TD>67%</TD> <TD>19%</TD>

</TR> </TABLE>

Le contenu de la cellule chevauchante est centré verticalement. Il est possible de modifier cet alignement vertical à l'aide du mot-clé VALIGN. Ainsi, si l'on avait voulu que le 60% soit aligné par le haut, on aurait mis:

<TD ROWSPAN=2 VALIGN=TOP>60%</TD>

Le 10/05/2006


23

par S. Lamrous

ContenuEn principe, on peut tout mettre dans la cellule d'un tableau: un paragraphe, plusieurs paragraphes (séparés par exemple par des <P>), des listes, des titres et sous-titres, des images, ...

En fait, les capacités d'affichage des navigateurs varient de l'un à l'autre.

Mosaic sur PC et Netscape peuvent afficher les tableaux parmi les plus complexes, tandis que Mosaic sur Unix, par exemple, ne peut traiter que les tableaux les plus simples.

Le 10/05/2006


24

par S. Lamrous

Insertion d’une image

• La directive servant à insérer une image est : <IMG SRC=" URL de l’image" >

L'image s'affichera à l'endroit où apparaît cette directive, et l'affichage du texte continuera après.

• Divers compléments d'information existent, notamment pour l'alignement; ainsi ALIGN=TOP signifie que le texte suivant cette directive apparaîtra à la suite (donc à droite de l'image), aligné à son sommet. Par exemple:

• <IMG SRC="/images/utbm.gif" ALIGN=TOP>Voici l‘UTBM produira l'effet suivant :

Voici l’UTBM

Le 10/05/2006


25

par S. Lamrous

Les références externes

• Référence textuelle :

Exemple :Appuyer <A HREF="cal2003.html">ici</A> pour voir le calendrier de l‘UTBM.

le mot ici qui, du coup, est affiché sous une forme distincte du reste, et devient sensible à la souris

• Référence par image : <A HREF="/visite/utbm.html"> <IMG SRC="/images/images.gif"> </A>

(1) début de directive d'hypertexte, qui référence le document /visite/utbm.html;

(2) affichage de l'image /images/images.gif, qui est donc "sensible à la souris";

(3) fin de directive d'hypertexte.

Le 10/05/2006


26

par S. Lamrous

Les Références internes• Création d’une ancre (« point d’accroche ») à

l’intérieur d’un document :

<A Name = "…">• Référence à une ancre interne à l’intérieur d’un

document :

<A HREF = "directives.html#2.11">Les tableaux</A>

• Référence à une ancre interne à l’intérieur du document « courant »:

<A HREF = "#2.11">Les tableaux</A>

Le 10/05/2006


27

par S. Lamrous

Images sensibles• Description d’une zone :<AREA SHAPE="POLYGON"

COORDS = "32,213,163,131,263,302,130,195"

HREF="http://utbm.fr">

=>Nom de description des différentes zones :<MAP NAME= " plan " >

<AREA SHAPE="POLYGON"

COORDS = "32,213,163,131,263,302,130,195"

HREF="http://utbm.fr/publications.html">

<AREA SHAPE="POLYGON"

COORDS = " 212,167,241,192,276,184,247,162"

HREF="http://utbm.fr/formation.html">

Le 10/05/2006


28

par S. Lamrous

Affichage de l’image et association à la description des zones

<IMG ISMAP SRC= " /images/plan.gif " USEMAP= " #plan" >

ISMAP : indique que cette image a des zones sensiblesUSEMAP : adresse de l’ancre de description de ces zones

Le 10/05/2006


29

par S. Lamrous

Les cadres («frames») Supposons une fenêtre subdivisée en quatre cadres, auxquels nous allons donner les noms suivants, suggérant leurs fonctions:

Le 10/05/2006


30

par S. Lamrous

Constitution des cadresLa description des cadres est hiérarchique: on subdivise la fenêtre principale horizontalement ou verticalement en deux ou plusieurs parties (rangées ou colonnes), puis chacune d'elles successivement de même manière. Dans notre cas, la première subdivision est la suivante:

La spécification en HTML est la suivante: <FRAMESET ROWS="20%,*"> rangée supérieure rangée inférieure </FRAMESET>

Le 10/05/2006


31

par S. Lamrous

la rangée supérieure (qui ne comporte que le cadre entete) fait 20% de la taille verticale de la fenêtre, et la rangée inférieure fait le reste (* indique une taille non spécifiée, déterminée par le reste).

<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > rangée inférieure </FRAMESET>

tandis que la rangée inférieure est un regroupement de cadres, la séparation étant verticale, cette fois-ci:

Le 10/05/2006


32

par S. Lamrous

ce qui donne: <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > <FRAMESET COLS="17%,*"> colonne de gauche colonne de droite </FRAMESET> </FRAMESET> Cette fois-ci, la colonne de gauche, qui fait 17% de la largeur de cet ensemble,

est elle-même un regroupement de cadres, tandis que la colonne de droite est un cadre indivisible, le cadre note:

<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" ...> <FRAMESET COLS="17%,*"> colonne de gauche <FRAME NAME="note" ...> </FRAMESET> </FRAMESET>

Le 10/05/2006


33

par S. Lamrous

Quant à la colonne de gauche, voici à quoi elle ressemble:

une subdivision horizontale ne comprenant que deux cadres, dont on spécifie cette fois-ci uniquement la taille du cadre inférieur (le second):

<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" > <FRAME NAME="services" > </FRAMESET> <FRAME NAME="note" > </FRAMESET> </FRAMESET>

Le 10/05/2006


34

par S. Lamrous

Spécification des contenus des cadres

<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" SRC="entete.html"> <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="services" SRC="services.html"> </FRAMESET> <FRAME NAME="note" SRC="note.html"> </FRAMESET></FRAMESET>

Les fichiers ont reçu des noms semblables à ceux des cadres, ce qui n'est pas une nécessité, mais en facilite la gestion

Le 10/05/2006


35

par S. Lamrous

<HTML> <HEAD> <TITLE>UTBM Université de Technologie de Belfort Montbéliard </TITLE> </HEAD> <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" SRC="entete.html"> <FRAMESET COLS="17%,*"> <FRAMESET ROWS="*,35%"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="services" SRC="services.html"> </FRAMESET> <FRAME NAME="note" SRC="note.html"> </FRAMESET></FRAMESET> </HTML>

Tout le texte ci-dessus va aller dans un fichier distinct des quatre fichiers entete.html, menu.html, services.html, note.html. Appelons-le index.html. Il devra comprendre, outre les directives ci-dessus, "l'enrobage" que nous avons vu:

Le 10/05/2006


36

par S. Lamrous

Comment charger le contenu d'un cadre

<A HREF="intro.html" TARGET="note"> INTRODUCTION </A>

Ce qui veut dire: la sélection du lien INTRODUCTION dans le cadre menu chargera le fichier intro.html dans le cadre note. L'option TARGET dans la directive indique donc la destination de l'affichage. Si on ne l'avait pas spécifiée, la page serait apparue dans le même cadre où se trouve le lien, donc dans le cadre menu...

Le 10/05/2006


37

par S. Lamrous

Pour affecter toute la fenêtre et ses cadres, on aura par exemple, pour le lien Catalogue du cadre services:

A HREF="/catalogue/" TARGET="_top"> Catalogue </A>

Le document dont l'URL (adresse) est /catalogue/ s'affichera dans la fenêtre principale, dont le nom est _top (qui est donc un mot réservé). Ce document là peut lui-même être composé ou non de cadres, et s'il l'est, ils peuvent être semblables en forme ou différents.

Le 10/05/2006


38

par S. Lamrous

Les formulaires• Le mécanisme des formulaires est destiné à fournir un mode

d'interaction beaucoup plus vaste: choix sur listes, boutons

d'activation/désactivation, saisie libre de texte... Par exemple :

Le 10/05/2006


39

par S. LamrousStructure générale d’un formulaireUn "formulaire" fait partie d'un document HTML,

et est délimité par une directive à champ d'action :

<FORM METHOD=POST ACTION="adresse de l'application"> ... champs d'interrogation ... </FORM> L'option METHOD indique la façon dont les choix de l'utilisateur

seront envoyés à l'application chargée de les traiter et d'y répondre • GET ajoute le contenu du formulaire à l’URL spécifié dans ACTION.• POST envoie le contenu du formulaire au serveur comme un ensemble de données sans les faire figurer à la suite de l’URL.(POST est la méthode la plus commune), Le champ ACTION sert à indiquer l'URL (l'adresse) de cette application.

Le 10/05/2006


40

par S. Lamrous

Choix sur liste

<SELECT NAME="nom du champ"> Options ... options </SELECT>

L'option NAME sert à identifier ce champ. Par exemple: <SELECT NAME="biblio"> <OPTION VALUE="bnf">Bibliothèque nationale de France <OPTION VALUE="bpi">Bibliothèque publique d'information <OPTION VALUE="loc">Library of Congress </SELECT>

On remarquera que l'on ne peut effectuer qu'un seul choix dans cette liste; la sélection d'un choix en efface un autre

Le 10/05/2006


41

par S. Lamrous

Choix sur liste (multiple)

Il est possible de construire des listes à choix multiples, en le spécifiant dans la directive de tête, par exemple :

L'option NAME sert à identifier ce champ. Par exemple: <SELECT NAME="biblio" MULTIPLE> <OPTION VALUE="bnf">Bibliothèque nationale de France <OPTION VALUE="bpi">Bibliothèque publique d'information <OPTION VALUE="loc">Library of Congress </SELECT>

Le 10/05/2006


42

par S. Lamrous

Choix par boutons

Le bouton à choix simpleIl est réalisé de la façon suivante: <INPUT TYPE=CHECKBOX NAME="nom du champ" VALUE="nom du choix"> intitulé à l'écran

<INPUT TYPE=CHECKBOX NAME="sauf-auteur" VALUE="oui">sauf

Exemple :

Le 10/05/2006


43

par S. Lamrous

Choix par boutonsLe bouton à choix multiples Ils sont réalisés ainsi : <INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix1"> intitulé1 à l'écran <INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix2"> intitulé2 à l'écran <INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix3"> intitulé3 à l'écran ...

Toutes les directives ont le même nom de champ, mais des identifiants et intitulés différents pour les choix. Ainsi, dans notre exemple, on a : <INPUT TYPE=RADIO NAME="type" VALUE="tout"> tout <INPUT TYPE=RADIO NAME="type" VALUE="monographie" CHECKED> monographie <INPUT TYPE=RADIO NAME="type" VALUE="periodique"> périodique <INPUT TYPE=RADIO NAME="type" VALUE="photo"> photo<INPUT TYPE=RADIO NAME="type" VALUE="enregistrement"> enregistrement <INPUT TYPE=RADIO NAME="type" VALUE="cdrom"> CD-Rom

Exemple :

où on a utilisé l'option CHECKED pour les monographies, ce qui la présélectionne dans le formulaire (mais l'utilisateur peut changer).

Le 10/05/2006


44

par S. Lamrous

Le 10/05/2006


45

par S. Lamrous

La saisie de texte (mono ligne)

La réalisation en est simple: <INPUT TYPE=TEXT NAME="nom du champ">

Exemple :<INPUT TYPE=TEXT NAME="auteur">

Pour pré positionner la case de saisie du texte, on utilise la fonctionnalité VALUE : <INPUT TYPE=TEXT NAME="auteur" VALUE="Lévi-Strauss, Claude">

Enfin, on peut contrôler la largeur de la fenêtre de saisie du texte: <INPUT TYPE=TEXT NAME="auteur" SIZE=40 VALUE="Lévi-Strauss, Claude">

Le 10/05/2006


46

par S. Lamrous

La saisie de texte (multiligne)

Il y a des cas où l'on veut pouvoir offrir plusieurs lignes de saisie pour une option. Exemple : la saisie d'un abstract dans un formulaire pour le catalogage d'articles scientifiques; la saisie d'une lettre, dans un formulaire pour l'expédition d'un courrier électronique; la saisie de commentaires, dans un formulaire permettant au lecteur d'exprimer ses remarques sur un service…

La directive est : <TEXTAREA NAME="nom du champ" ROWS=rangées COLS=colonnes> texte de pré initialisation </TEXTAREA>

Exemple :<TEXTAREA NAME="comments" ROWS=4 COLS=40> (tapez ici) </TEXTAREA>

Le 10/05/2006


47

par S. Lamrous

Boutons de réinitialisation et d'expédition du formulaire

Ces deux boutons sont simples à réaliser : <INPUT TYPE=RESET VALUE="intitulé"> (pour le bouton de réinitialisation)<INPUT TYPE=SUBMIT VALUE="intitulé"> (pour le bouton d'expédition)

L'intitulé est le texte qui s'affiche dans le bouton. Ainsi, pour le bouton INTERROGER, nous écrivons : <INPUT TYPE=SUBMIT VALUE="INTERROGER"> et pour le bouton EFFACER (efface les choix de l’utilisateur pour revenir à l’état initial)nous écrivons : <INPUT TYPE=RESET VALUE="Effacer">

université de technologie de belfort montbéliard par s. lamrous le 10/05/2006 1 introduction au...

Documents