Introduction au langage HTML: comment composer des pages pour un serveur WWW Le 10/05/2006
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
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
Introduction Le texte et sa mise en page Les outils de composition 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
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
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 exposant a<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
Caractères spéciaux Le 10/05/2006 dir. rés rés. á á é é é é í í ó ó ú ú ý ý à à è è ì ì ò ò ù ù â â ê ê î î ô ô û û ä ä ë ë ï ï ö ö ü ü ÿ ÿ ã ã ñ ñ õ õ å å æ æ ç ç ø ø Á Á É É Í Í Ó Ó Ú Ú Ý Ý À À È È Ì Ì Ò Ò Ù Ù Â Â Ê Ê Î Î Ô Ô Û Û Ä Ä Ë Ë Ï Ï Ö Ö Ü Ü Ã Ã Ñ Ñ Õ Õ Å Å Æ Æ Ç Ç &216; Le 10/05/2006
Séparateurs et paragraphes effet souhaité directive résultat notes retour à la ligne à l'intérieur d'un paragraphe Le Centre National<BR>d'Art et de Culture Le Centre National d'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. 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
Les listes effet souhaité directive résultat notes Le 10/05/2006 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> jusqu'à la fin de la liste. le premier élément de cette liste est séparé des autres et numéroté automatiquement, le second, 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. 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
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: l'édition l'audio-visuel 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
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: l'édition l'audio-visuel 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
Les titres IRCAM La recherche et le développement effet souhaité directive résultat notes titre niveau 1 <H1>IRCAM</H1> 1 place Igor-Stravinsky,<BR> 75004 Paris IRCAM 1 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éveloppement Au 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
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
É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
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
Exemple 1 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> <TD ALIGN=LEFT>parti 2</TD> <TD>14%</TD> <TD>54%</TD> <TD>60%</TD> <TD ALIGN=LEFT>parti 3</TD> <TD>67%</TD> <TD>30%</TD> </TABLE> parti 1 19% 27% 10% parti 2 14% 54% 60% parti 3 67% 30% 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
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
Exemple 2 parti 1989 1990 1991 parti 1 19% 27% 10% parti 2 14% 54% 60% <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>19%</TD> <TD>27%</TD> <TD>10%</TD> <TD ALIGN=LEFT>parti 2</TD> <TD>14%</TD> <TD>54%</TD> <TD>60%</TD> <TD ALIGN=LEFT>parti 3</TD> <TD>67%</TD> <TD>30%</TD> </TABLE> parti 1989 1990 1991 parti 1 19% 27% 10% parti 2 14% 54% 60% parti 3 67% 30% Le 10/05/2006
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
Exemple 3 parti 1989 1990 1991 parti 1 19% 10% parti 2 14% 54% 60% <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> <TD ALIGN=LEFT>parti 2</TD> <TD>14%</TD> <TD>54%</TD> <TD>60%</TD> <TD ALIGN=LEFT>parti 3</TD> <TD>67%</TD> <TD>19%</TD> <TD>30%</TD> </TABLE> Voici 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% 30% On aurait pu centrer la donnée dans la cellule chevauchante, en faisant: <TD COLSPAN=2 ALIGN=CENTER>19%</TD> Le 10/05/2006
Exemple 3 parti 1989 1990 1991 parti 1 19% 10% parti 2 14% 54% 60% <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> <TD ALIGN=LEFT>parti 2</TD> <TD>14%</TD> <TD>54%</TD> <TD>60%</TD> <TD ALIGN=LEFT>parti 3</TD> <TD>67%</TD> <TD>19%</TD> <TD>30%</TD> </TABLE> Voici 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% 30% On aurait pu centrer la donnée dans la cellule chevauchante, en faisant: <TD COLSPAN=2 ALIGN=CENTER>19%</TD> Le 10/05/2006
Exemple 4 parti 1989 1990 1991 parti 1 19% 10% parti 2 14% 54% 60% <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> <TD ALIGN=LEFT>parti 2</TD> <TD>14%</TD> <TD>54%</TD> <TD ROWSPAN=2>60%</TD> <TD ALIGN=LEFT>parti 3</TD> <TD>67%</TD> <TD>19%</TD> </TABLE> Enfin, 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% 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
Contenu En 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
<IMG SRC=" URL de l’image" > 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
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> début de directive d'hypertexte, qui référence le document /visite/utbm.html; affichage de l'image /images/images.gif, qui est donc "sensible à la souris"; fin de directive d'hypertexte. Le 10/05/2006
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
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 " > HREF="http://utbm.fr/publications.html"> COORDS = " 212,167,241,192,276,184,247,162" HREF="http://utbm.fr/formation.html"> Le 10/05/2006
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 sensibles USEMAP : adresse de l’ancre de description de ces zones Le 10/05/2006
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
Constitution des cadres La 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
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
<FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > ce qui donne: <FRAMESET ROWS="20%,*"> <FRAME NAME="entete" > <FRAMESET COLS="17%,*"> colonne de gauche colonne de droite </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> Le 10/05/2006
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" > Le 10/05/2006
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"> 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
outre les directives ci-dessus, "l'enrobage" que nous avons vu: 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: <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"> </HTML> Le 10/05/2006
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
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
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
Structure générale d’un formulaire Un "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
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
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
Choix par boutons Le bouton à choix simple Il est réalisé de la façon suivante: <INPUT TYPE=CHECKBOX NAME="nom du champ" VALUE="nom du choix"> intitulé à l'écran Exemple : <INPUT TYPE=CHECKBOX NAME="sauf-auteur" VALUE="oui">sauf Le 10/05/2006
Choix par boutons Le 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 ... Exemple : 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 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
Le 10/05/2006
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
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
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"> Le 10/05/2006