Le Langage HTML........................................................................................................................ 1 1. Introduction HTML : Hyper Text Markup Language.................................................... 4 1.1. Quelques rgles simples pour l'criture en langage HTML ....................................... 4 1.2. Qu'est-ce qu'un URL (Uniform Resource Locator). .................................................. 4 2. Les En-ttes - H.T.M.L. .....................................................................................................5 3. Les dlimiteurs - H.T.M.L ................................................................................................ 6 3.1. Les dlimiteurs........................................................................................................... 6 3.2. Liste de description.................................................................................................... 7 3.3. Indentation de paragraphe.......................................................................................... 7 3.4. Prsentation d'un paragraphe en multi-colonnes........................................................ 8 4. Les styles - H.T.M.L. ......................................................................................................... 9 4.1. Taille du texte............................................................................................................. 9 Une trs grande taille.................................................................................................................. 9 Une grande taille.................................................................................................................... 9 Une taille moyenne............................................................................................................. 9 4.2. Attributs...................................................................................................................... 9 5. Les listes - H.T.M.L. ........................................................................................................ 13 6. Les caractres spciaux - H.T.M.L. ................................................................................. 15 6.1. Les ingalits............................................................................................................ 15 6.2. Les caractres accentus....................................................................................... 15 6.3. D'autres caractres utiles.......................................................................................... 16 7. Les images - H.T.M.L...................................................................................................... 17 7.1. Les images dans le texte........................................................................................... 17 8. Les images ractives - H.T.M.L....................................................................................... 19 8.1. Les images ractives - H.T.M.L. (ancienne mthode) .............................................. 19 8.2. Les images ractives - H.T.M.L. (nouvelle mthode)............................................... 21 9. Les liens - H.T.M.L.......................................................................................................... 23 9.1. Les liens vers un document complet distant............................................................. 23 9.2. Les liens vers un document complet local ............................................................... 23 9.3. Les liens vers une partie d'un document local.......................................................... 24 9.4. Les liens vers une partie du document courant........................................................ 24 9.5. Adresser un message lectronique........................................................................... 24 10. Les Formulaires - H.T.M.L............................................................................................ 26 10.1. Bouton.................................................................................................................... 26 10.2. Slection d'un fichier.............................................................................................. 26 10.3. Texte libre sur une ligne......................................................................................... 26 10.4. Texte libre sur plusieurs lignes............................................................................... 27 10.5. Menu....................................................................................................................... 27 ENQUETE sur la SATISFACTION des UTILISATEURS............................................. 28 11. Les tableaux - H.T.M.L.................................................................................................. 29 11.1. Dclarer le dbut et la fin d'un tableau................................................................... 29 11.2. Dfinir le dbut et la fin d'une ligne....................................................................... 29 11.3. Dfinit chaque lment de la ligne titre................................................................. 30 11.4. Dcrit le titre du tableau......................................................................................... 31 12. <FRAMESET>- H.T.M.L............................................................................................. 32 13. Divers - H.T.M.L............................................................................................................ 34 13.1. Centrer un document............................................................................................... 34 13.2. Modification de la taille et de la couleur des caractres......................................... 34 13.3. Tableau des couleurs.............................................................................................. 34 13.4. Indice et exposant................................................................................................... 38 13.5. Fond sonore............................................................................................................ 39 13.6. Insertion Vido....................................................................................................... 39
1. Introduction HTML : Hyper Text Markup Language Un document HTML est compos de texte et de commandes (tag en anglais). Ces commandes permettent de mettre en forme le texte (Titre, caractre gras, italique, image, liens, etc...).
1.1. Quelques rgles simples pour l'criture en langage HTML Les commandes HTML ont une marque de dbut et une marque de fin Certaines marques de fin sont facultatives Les commandes HTML utilisent les caractres <et >comme dlimiteurs. Exemple :
<TI TLE>Cet t e commande donne un t i t r e au document HTML</ TI TLE> Les commandes HTML peuvent tre crites en minuscules ou en majuscules. Un fichier rdig en HTML doit tre suffix par .html ou .HTML ou .htm ou .HTM
1.2. Qu'est-ce qu'un URL (Uniform Resource Locator). Un URL est le moyen de nommer un objet dans le monde WWW. La syntaxe d'un URL est la suivante : t ype: ser veur : por t / chemi n_d' acces/ f i chi er #et i quet t e?par amet r es Le type de serveur : http : pour les URL provenant de serveurs WWW gopher : pour les serveurs GOPHER ftp : pour les fichiers transfrer telnet : pour ouvrir une session interactive wais : pour interroger une base WAIS news : pour accder aux forums
2. Les En-ttes - H.T.M.L. <HTML> </ HTML> Commandes de dbut et de fin du document HTML
<HEAD> </ HEAD> Informations non affiches concernant le document
<TI TLE> </ TI TLE> Titre du document Cette information apparait dans la barre de titre du client WWW.
<META . . . > Situes dans l'en-tte de votre page HTML, ces commandes guident les moteurs de recherche pour indexer votre page
<BODY> </ BODY> Corps du document Toutes les informations affiches par le client WWW y sont contenues.
<BASE HREF=" URL" > </ BASE> URL(*) de base pour toutes les rfrences contenues dans ce document. Par dfaut l'URL de base est le serveur HTTP sur lequel se trouve le document.
<! - - Commentaires - - > Pour insrer des commentaires. Exemple : <HTML> <HEAD> <TI TLE>Exempl e de st r uct ur e de document HTML</ TI TLE> <META NAME=" Aut hor " CONTENT=" Ri char d MANAS" > <BASE HREF=" / usr / home/ chezmoi " ></ BASE> </ HEAD> <BODY> . . . . . . Le document HTML . . . </ BODY> </ HTML> 3. Les dlimiteurs - H.T.M.L Dans le texte que vous tapez, les espaces et les retours la ligne ne sont pas interprts par les clients WWW.
3.1. Les dlimiteurs Les dlimiteurs permettent d'arer et de formater le document. <P> </ P> Saut de paragraphe
<DI V> </ DI V> Division de bloc
<BR> </ BR> Saut la ligne
<HR> </ HR> Insertion d'une ligne horizontale de sparation Exemples : Apr s cet t e l i gne un saut de par agr aphe<P> Apr s cel l e- ci un saut l a l i gne si mpl e<BR> sur l a l i gne sui vant e. <HR>Ce t ext e est encadr par deux l i gnes hor i zont al es<HR> Rsultat : Aprs cette ligne un saut de paragraphe Aprs celle-ci un saut la ligne simple sur la ligne suivante.
Ce texte est encadr par deux lignes horizontales
3.2. Liste de description <DL> </ DL> Dbut et fin de liste de description
<DT> </ DT> Nom du terme
<DD> </ DD> Description du terme dfini Exemples : <DL> <DT>Pr emi er t er me</ DT> <DD>Descr i pt i on du pr emi er t er me<BR> Cet t e descr i pt i on peut cont i nuer l a l i gne sui vant e<BR> ai nsi de sui t e . . . </ DD> <DT>Second t er me</ DT> <DD>Descr i pt i on du second t er me</ DD> </ DL> Rsultat : Premier terme Description du premier terme Cette description peut continuer la ligne suivante ainsi de suite ... Second terme Description du second terme
3.3. Indentation de paragraphe <BLOCKQUOTE> </ BLOCKQUOTE> Exemple : J e veux met t r e en avant l e par agr aphe qui sui t : <BLOCKQUOTE> Nous pour r i ons peut - t r e t ous bi en nous ent endr e avec des gens par f ai t s. Mai s not r e t che est de bi en nous ent endr e avec des gens i mpar f ai t s. ( Ri char d L. EVANS) </ BLOCKQUOTE> . . . gr ande vr i t !
Rsultat : J e veux mettre en avant le paragraphe qui suit : Nous pourrions peut-tre tous bien nous entendre avec des gens parfaits. Mais notre tche est de bien nous entendre avec des gens imparfaits. (Richard L. EVANS) ... grande vrit ! Remarque :
Les commandes BLOCKQUOTE peuvent s'imbriquer les unes dans les autres.
3.4. Prsentation d'un paragraphe en multi colonnes <MULTI COL> </ MULTI COL>
4. Les styles - H.T.M.L. Les titres de paragraphes peuvent tres visualiss en fonction de leur importance. Ils sont reprsents par des fontes de caractres de diffrentes tailles, de la plus grande la plus petite en voici un exemplaire de chaque.
4.1. Taille du texte <H1>Une t r s gr ande t ai l l e</ H1> Une trs grande taille <H2>Une gr ande t ai l l e</ H2> Une grande taille <H3>Une t ai l l e moyenne</ H3> Une taille moyenne <H4>Une pet i t e t ai l l e</ H4> Une petite taille <H5>Une t r s pet i t e t ai l l e</ H5> Une trs petite taille <H6>Une t ai l l e vr ai ment mi nuscul e</ H6> Une taille vraiment minuscule
4.2. Attributs Les caractres peuvent recevoir les attributs suivants : <STRI KE> ou <S> </ STRI KE> ou </ S> Pour barrer du texte. Exemple : C' est <STRI KE>BEAU et bar r </ STRI KE> Rsultat : C'est BEAU et barr <U> </ U> Pour souligner du texte. Exemple : Ceci <U>n' est pas un l i en</ U> Rsultat : Ceci n'est pas un lien <BLI NK> </ BLI NK> Pour faire clignoter du texte. Exemple : C' est <BLI NK>MAGI QUE</ BLI NK> ! ! ! Rsultat : C'est MAGIQUE !!! <TT> </ TT> Pour intgrer du texte format dans une phrase. Exemple : Ceci est une phr ase cont enant un <TT>t ext e f or mat </ TT> Rsultat : Ceci est une phrase contenant un t ext e f or mat <PRE> </ PRE> Cas d'un paragraphe format. Il est inutile de forcer des csures de lignes. Le texte apparat tel que vous le saisissez. Exemple : Sous DOS t apez l es commandes sui vant es <PRE> C: > MKDI R WI NSOCK C: > CD WI NSOCK C: > COPY A: WI NSOCK. ZI P C: C: > PKUNZI P - D WI NSOCK </ PRE> Rsultat : Sous DOS tapez les commandes suivantes C: > MKDI R WI NSOCK C: > CD WI NSOCK C: > COPY A: WI NSOCK. ZI P C: C: > PKUNZI P - D WI NSOCK Les styles physiques o <B> </ B> Pour mettre du texte en gras Exemple : <B>Texte gras</B> Rsultat : Texte gras o <I > </ I > Pour mettre du texte en italique Exemple : <I >Text e en i t al i que</ I > Rsultat : Texte en italique Les styles logiques L'initiative est laisse au client WWW o <STRONG> </ STRONG> Pour insister sur un texte (en gnral gras) Exemple : <STRONG>J 'insiste</STRONG> Rsultat : J'insiste o <EM> </ EM> Pour mettre du texte en valeur (en gnral italique) Exemple : <EM>Text e en val eur </ EM> Rsultat :
Texte en valeur o <CI TE> </ CI TE> Pour insrer une citation (en gnral italique) Exemple : <CI TE>Sui vez l e boeuf </ CI TE>
Rsultat : Suivez le boeuf o <ADDRESS> </ ADDRESS> Pour afficher une adresse (en gnral italique) Exemple : <ADDRESS>manas@uni ce. f r </ ADDRESS> Rsultat : manas@unice.fr 5. Les listes - H.T.M.L. Il existe deux sortes de listes : non ordonne et ordonne Les listes peuvent tre embotes. <UL> </ UL> Liste non ordonne
<OL> </ OL> Liste ordonne
<LI > </ LI > Elment de la liste Exemple 1 : Ceci est une l i st e non or donne de t er mes
<UL>Le t i t r e est cadr <LI >Ter me A <LI >Ter me B <LI >Ter me C </ UL> Rsultat :
Ceci est une liste non ordonne de termes Le titre est cadr Terme A Terme B Terme C Exemple 2 : Ceci est une l i st e or donne i ncl uant une sous- l i st e or donne <OL> <LI >Ter me A <OL>Sous- l i st e <LI >Ter me A- 1 <LI >Ter me A- 2 </ OL> <LI >Ter me B <LI >Ter me C </ OL>
Rsultat :
Ceci est une liste ordonne incluant une sous liste ordonne 1. Terme A Sous liste 1. Terme A-1 2. Terme A-2 2. Terme B 3. Terme C 6. Les caractres spciaux - H.T.M.L. 6.1. Les ingalits Les caractres <, >, & et " tant interprts par HTML, les squences suivantes permettent leur affichage.
&l t ; < > ; > & & " ; " Les espaces n'tant pas significatifs, le caractre permet de forcer un "blanc" autant que souhait Exemple : Les oiseaux gazouillent au printemps Les oiseaux gazouillent au printemps
Rsultat : Les oiseaux gazouillent au printemps Les oiseaux gazouillent au printemps
6.2. Les caractres accentus
HTML utilise le jeu de caractres ISO Latin-1 cods sur 8 bits et les caractres ASCII cods sur 7 bits. Avec cette dernire codification les caractres accentus sont reprsents par les squences suivantes :
&eacut e; &Eacut e; &egr ave; &eci r c; &agr ave; &i uml ; &ccedi l ; &nt i l de; &AEl i g; 6.3. D'autres caractres utiles
œ Le caractre € n'apparat pas avec tous les navigateurs, optez plutt pour l'image . 7. Les images - H.T.M.L. HTML permet d'insrer des images dans du texte. Ces images apparaissent dans le corps du texte, mais aussi comme ancre, ou mme comme document rfrenc. Les clients WWW Mosaic acceptent les formats d'images suivants : XBM pour les images monochromes GIF pour les images couleurs Les clients WWW Netscape ou Internet Explorer acceptent en plus le format J PEG pour les images couleurs
7.1. Les images dans le texte La commande <I MG> permet d'insrer une image dans le texte. Syntaxe : <I MG SRC=" i mage" ALI GN=" at t r i but " ALT=" t i t r e" HSPACE=" hh" VSPACE=" vv" BORDER=" bb" >
Image adresse d'une image Attribut " MI DDLE" " TOP" " BOTTOM" " LEFT" ou " RI GHT" Titre "Un titre" qui se substituera l'image pour les clients ne pouvant ou ne sachant pas afficher des images (Lynx sur terminal VT100 par exemple). En effet, il est beaucoup plus agrable pour ces utilisateurs de voir un message ou un caractre, au lieu de [ I MAGE]
hh nombre de pixels de sparation droite et gauche de l'image. (par dfaut hh=0) vv nombre de pixels de sparation en haut et en bas de l'image. (par dfaut vv=0) bb nombre de pixels de l'encadrement de l'image. (par dfaut il n'y a pas d'encadrement)
Exemple : <I MG SRC=" chouet t eG. gi f " > La chouet t e ou <I MG ALI GN=BOTTOM SRC=" chouet t eG. gi f " > La chouet t e Essayer aussi : <I MG ALI GN=MI DDLE SRC=" chouet t eG. gi f " > La chouet t e <I MG ALI GN=TOP SRC=" chouet t eG. gi f " > La chouet t e <I MG ALI GN=LEFT SRC=" chouet t eG. gi f " > chouet t e <I MG ALI GN=RI GHT " chouet t eG. gi f " > chouet t e Rsultat : La chouette 8. Les images ractives - H.T.M.L. Une image ractive permet de lier des documents en fonction de la zone clique par l'utilisateur. Le plus bel exemple est la carte de France ractive permettant de connatre rgion par rgion tous les serveurs WWW. (cf URL http://www.urec.cnrs.fr/annuaire/cartes/index.shtml). Voici deux mthodes pour fabriquer des images ractives. 1. La mthode ancienne lie au serveur, et faisant appel au serveur lors de son utilisation.
2. La mthode nouvelle autonome, toutes les informations ncessaires son fonctionnement sont contenues dans la page HTML affiche par le client.
8.1. Les images ractives - H.T.M.L. (ancienne mthode) Cette mthode ncessite l'intervention d'un programme excutable sur le serveur imagemap (serveur NCSA) ou htimage (serveur CERN) dans le rpertoire /cgi-bin. Trois lments indispensables : un fichier image .gif un fichier carte .map correspondant l'image .gif le programme excutable Le premier lment est trouver par vos soins !! Le dernier est fourni par le serveur WWW Reste le fichier .map qu'il faut fabriquer soit en utilisant des logiciels comme XV sur plateforme UNIX ou VMS (mais cela reste relativement rbarbatif car il faut relever manuellement les zones qui seront ractives), soit le fin du fin en utilisant l'outil spcialis MAPEDIT qui fabrique selon vos directives ce fameux fichier .map La syntaxe du contenu de ce fichier est la suivante : zone ur l coor donnes, . . . , coor donnes Les coordonnes des points de l'image sont dfinies en pixel suivant les axes x et y, l'origine tant le point en haut et gauche de l'image. Ce fichier contient une zone par ligne, il existe 3 types de zones : rectangle, cercle et polygone, plus la zone "dfaut". Les lignes de commentaires doivent commencer par un "#". Type de zone Mot-clef Coordonnes rectangle rect on dfinit les coordonnes de deux sommets oppos cercle circle on dfinit les coordonnes du centre du cercle et les coordonnes d'un des points de la circonfrence polygone poly on dfinit les coordonnes de chaque sommet dfaut default Exemple : Chaque utilisateur peut crer son espace html (voir l'administrateur du serveur). Il suffit de crer un rpertoire public_html dans lequel on place ses propres fichiers html, images, etc .... Deux zones sont dfinies dans un fichier : un rectangle autour du nez et un cercle autour du menton.
Attention : les URL doivent contenir l'adresse du serveur. # Pr emi er essai def aul t ht t p: / / nephi . uni ce. f r / Cour sHTML/ non. ht ml # On f i xe l e nez r ect ht t p: / / nephi . uni ce. f r / Cour sHTML/ nez. ht ml 54, 81 83, 107 # On poi nt e sur l e ment on ( quand l es or ei l l es ! ! ) ci r cl e ht t p: / / nephi . uni ce. f r / Cour sHTML/ ment on. ht ml 72, 126 82, 138 On utilise ces 3 lments ainsi : Exemple :
<A HREF=" / cgi - bi n/ i magemap/ Cour sHTML/ manas. map" > <I MG ALI GN=MI DDLE SRC=" manas. gi f " I SMAP></ A> Rsultat : A vous de cliquer !
8.2. Les images ractives - H.T.M.L. (nouvelle mthode) Cette mthode est maintenant la plus employe car elle est indpendante du serveur, toutes les informations concernant les diffrentes zones sensibles de l'image sont traites par le client. Deux lments indispensables : un fichier image .gif ou .jpg dfinir les zones ractives Le premier lment est trouver par vos soins !! Reste dfinir les zones ractives soit en utilisant des logiciels comme XV sur plateforme UNIX ou VMS (mais cel reste relativement rebarbatif car il faut relever manuellement les zones qui seront ractives), soit en utilisant un outil spcialis tel que MAPEDIT qui fabrique selon vos directives un fichier .map La syntaxe du contenu de ce fichier est la suivante : zone ur l coor donnes, . . . , coor donnes Les coordonnes des points de l'image sont dfinies en pixel suivant les axes x et y, l'origine tant le point en haut et gauche de l'image. Il faudra donc adapter les donnes fournies dans ce fichier .map la syntaxe suivante : Type de zone Mot-clef Coordonnes rectangle rect on dfinit les coordonnes de deux sommets oppos cercle circle on dfinit les coordonnes du centre du cercle et la longueur du rayon polygone poly on dfinit les coordonnes de chaque sommet dfaut default Exemple :
<MAP NAME=" DEMO" > <AREA SHAPE=" RECT" HREF=" nez. ht ml " COORDS=" 54, 81, 83, 107" > <AREA SHAPE=" CI RCLE" HREF=" ment on. ht ml " COORDS=" 70, 126, 15" > <AREA SHAPE=" DEFAULT" HREF=" non. ht ml " > </ MAP> <I MG ALI GN=MI DDLE SRC=" manas. gi f " USEMAP=" #DEMO" > Rsultat :
9. Les liens - H.T.M.L. Une des fonctionnalits la plus agrable du langage HTML est la possibilit de crer des liens vers d'autres documents. Ces documents peuvent tre des documents HTML, des images, du son, des films, et des serveurs TELNET, WAIS, FTP et GOPHER. Le logiciel client WWW prsente ce lien sous forme de mots souligns ou d'image encadre que l'on appelle ancre ou lien. Ce lien est soit un fichier local, soit une URL(*). Il existe quatre types principaux de liens :
9.1. Les liens vers un document complet distant Syntaxe :
<A HREF=" URL" > ancr e </ A> Exemple :
pour accder aux pages du CRI - UNSA <A HREF=" ht t p: / / www. uni ce. f r / ht ml / Fr ench/ cr i . ht ml " > Le CRI </ A> U. N. S. A. Rsultat : Le CRI de l'U.N.S.A.
9.2. Les liens vers un document complet local Syntaxe :
<A HREF=" nom_de_f i chi er _l ocal " > ancr e </ A> Exemple :
pour accder une page d'essai locale <A HREF=" / manas/ publ i c_ht ml / Di apor ama" > Cl i quer ICI </ A> Rsultat : Cliquer ICI
9.3. Les liens vers une partie d'un document local Syntaxe : <A NAME=" et i quet t e" > nom</ A> pour df i ni r un poi nt de br anchement <A HREF=" nom_de_f i chi er _l ocal #et i quet t e" > ancr e </ A> pour f ai r e l e l i en. Exemple : pour accder au paragraphe 3 du document local <A NAME=" [ 3] " > Par agr aphe 3 : Les souci s </ A> <A HREF=" exempl e_not es. ht ml #[ 3] " > Not e [3] </ A> Rsultat : Note [3]
9.4. Les liens vers une partie du document courant Syntaxe : <A NAME=" et i quet t e" > nom</ A> pour df i ni r un poi nt de br anchement <A HREF=" #et i quet t e" > ancr e </ A> pour f ai r e l e l i en. Exemple : pour accder au mot "ANCRES" du document courant <A NAME=" ANCRES" > Les ancr es </ A> <A HREF=" #ANCRES" > Voyons r et our nons au dbut du f i chi er </ A> Rsultat : Voyons r et our nons au dbut du f i chi er
9.5. Adresser un message lectronique Syntaxes : <A HREF=" MAI LTO: adr esse_cor r espondant " > ancr e </ A> ou <A HREF=" MAI LTO: adr esse_cor r espondant ?Subj ect =Obj et _du_message" > ancr e </ A>
Exemple 1 : pour m'adresser un message lectronique <A HREF=" MAI LTO: manas@uni ce. f r " > Ecr i vez- moi ! ! </ A> Rsultat : Ecr i vez- moi ! !
Exemple 2 : pour m'adresser un message lectronique avec un sujet prdfini <A HREF=" MAI LTO: manas@uni ce. f r ?Subj ect =Coucou" > Ecr i vez- moi encor e ! ! </ A> Rsultat : Ecr i vez- moi encor e ! !
Exemple 3 : pour m' adr esser un message l ect r oni que avec un dest i nat ai r e secondai r e, un dest i nat ai r e secondai r e " cache" ou " of f i ci eux" et un suj et pr df i ni <A HREF=" MAI LTO: manas@uni ce. f r ?cc=r manas@uni ce. f r &bcc=r manas@uni ce. f r &Subj ect = Coucou" > Ecr i vez- nous. Nous sommes pl usi eur s ! ! </ A> Rsultat : Ecr i vez- nous. Nous sommes pl usi eur s ! ! 10. Les Formulaires - H.T.M.L. Les clients volus supportent les formulaires. Un formulaire est une fiche que l'utilisateur peut remplir, ces informations ainsi saisies sont traites par le serveur WWW l'aide d'un programme CGI (Common Gateway Interface). Un formulaire commence et finit par <FORM ACTI ON METHOD> </ FORM> avec ACTI ON = " pr ogr amme execut abl e ou shel l " METHOD = GET POST
Il existe plusieurs types de champs :
10.1. Bouton
<I NPUT TYPE NAME VALUE CHECKED> </ I NPUT> avec TYPE = RADI O pour l es bout ons mul t i pl es CHECKBOX pour l es cases cocher SUBMI T pour envoyer l e f or mul ai r e une f oi s r empl i RESET pour ef f acer l e cont enu du f or mul ai r e NAME = " un nom" qui i dent i f i e l e bout on VALUE= " val eur " donne au bout on l or squ' i l est sel ect i onn CHECKED si gnal e un bout on par df aut ( RADI O) ou une case coche avant sai si e ( CHECKBOX)
TYPE = I MAGE i dent i que au SUBMI T mai s l e bout on est r empl ac par une i mage de vot r e choi x NAME = " un nom" qui i dent i f i e l e bout on SRC = " i mage" nomdu f i chi er i mage ALI GN = BOTTOM val eur par df aut LEFT, RI GHT, TOP, ABSMI DDLE, ABSBOTTOM, TEXTTOP, MI DDLE, BASELI NE sont l es aut r es val eur s possi bl es
10.2. Slection d'un fichier
<I NPUT TYPE NAME> </ I NPUT> avec TYPE = FI LE pour per met t r e l ' envoi d' un f i chi er NAME = " un nom" qui i dent i f i e l e champ t ext e
10.3. Texte libre sur une ligne
<I NPUT TYPE NAME SI ZE> </ I NPUT> avec TYPE = TEXT pour f ai r e sai si r du t ext e PASSWORD l es car act r es sai si s sont r epr sent es par des ' *' HI DDEN l e champ est cach : ut i l e pour t r ansmet t r e des i nf or mat i ons non vi si bl es. NAME = " un nom" qui i dent i f i e l e champ t ext e
10.4. Texte libre sur plusieurs lignes
<TEXTAREA NAME ROWS COLS> </ TEXTAREA> avec NAME = " un nom" qui i dent i f i e l e champ t ext e ROWS = nombr e de l i gnes vi si bl es COLS = nombr e de col onnes vi si bl es
10.5. Menu
<SELECT NAME> </ SELECT> avec NAME = " un nom" qui i dent i f i e l e menu <OPTI ON SELECTED> <OPTI ON> r epr sent e chaque choi x du menu avec SELECTED qui si gnal e l e choi x par df aut
10.6. Exemple de formulaire <P> <H3 ALI GN=CENTER>ENQUETE sur l a SATI SFACTI ON des UTI LI SATEURS</ H3> <FORM ACTI ON=" / cgi - bi n/ cour s1" METHOD=POST> <PRE> <I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" UNI V" CHECKED> Uni ver si t ai r e <I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" CNRS" > C. N. R. S. <I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" I NSE" > I . N. S. E. R. M. <I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" PUBL" > Aut r e PUBLI C <I NPUT TYPE=RADI O NAME=SECTEUR1 VALUE=" PRI V" > Pr i v <P> Vos Nomet pr nom: <I NPUT TYPE=TEXT NAME=NOM1 SI ZE=30> </ P> Vot r e adr esse l ect r oni que : <I NPUT TYPE=TEXT NAME=ADR1 SI ZE=30> <P> J e sui s bel l e/ beau<I NPUT TYPE=CHECKBOX NAME=BEAU VALUE=" beau" >, j eune<I NPUT TYPE=CHECKBOX NAME=J EUNE VALUE=" j eune" >, r i che<I NPUT TYPE=CHECKBOX NAME=RI CHE VALUE=" r i che" >, en bonne sant <I NPUT TYPE=CHECKBOX NAME=SANTE VALUE=" en bonne sant e" >
Vot r e opi ni on
<SELECT NAME=OPI NI ON1> <OPTI ON>Tr s sat i sf ai t <OPTI ON SELECTED>Sat i sf ai t <OPTI ON>I ndi f f r ent <OPTI ON>C' est nul ! ! </ SELECT>
<P> Vos comment ai r es <TEXTAREA NAME=COM1 ROWS=3 COLS=40></ TEXTAREA> </ P> <I NPUT TYPE=SUBMI T VALUE=" Envoyer " > <I NPUT TYPE=RESET VALUE=" Annul er " > <I NPUT TYPE=I MAGE SRC=" / i mages/ go. gi f " ALI GN=ABSMI DDLE> </ PRE> </ FORM>
ENQUETE sur la SATISFACTION des UTILISATEURS Uni ver si t ai r e C. N. R. S. I . N. S. E. R. M. Aut r e PUBLI C Pr i v
Vos Nomet pr nom:
Vot r e adr esse l ect r oni que :
J e sui s bel l e/ beau , j eune , r i che , en bonne sant
Vot r e opi ni on Satisfait
Vos comment ai r es
Envoyer
Annuler
11. Les tableaux - H.T.M.L. HTML 3 permet la fabrication de tableaux trs visuels. On utilise les commandes suivantes :
11.1. Dclarer le dbut et la fin d'un tableau
<TABLE BORDER= CELLPADDI NG= CELLSPACI NG= WI DTH= HEI GHT= BGCOLOR=> </ TABLE> BORDER= BORDER=0 l e t abl eau n' a pas de cont our BORDER=n l e t abl eau a un cont our d' pai sseur " n" CELLPADDI NG= Df i ni t l ' espace ent r e l ' obj et et l e cont our d' une cel l ul e CELLSPACI NG= Df i ni t l ' pai sseur du t r ai t ent r e l es cel l ul es WI DTH= Fi xe l a l ar geur du t abl eau HEI GHT= Fi xe l a haut eur du t abl eau BGCOLOR= BGCOLOR=" #RRGGBB" Df i ni t l a coul eur de f ond de t out l e t abl eau. RR, GG et BB sont l es val eur s hexadci mal es du Rouge( RR) , Ver t ( GG) et Bl eu( BB) .
11.2. Dfinir le dbut et la fin d'une ligne
<TR ALI GN= BGCOLOR=> </ TR> ALI GN= ALI GN=LEFT ( par df aut ) t out es l es cel l ul es de l a l i gne sont cadr es gauche ALI GN=CENTER t out es l es cel l ul es de l a l i gne sont cent r es ALI GN=RI GHT t out es l es cel l ul es de l a l i gne sont cadr es dr oi t e BGCOLOR= BGCOLOR=" #RRGGBB" Df i ni t l a coul eur de f ond des cel l ul es de cet t e l i gne. RR, GG et BB sont l es val eur s hexadci mal es du Rouge( RR) , Ver t ( GG) et Bl eu( BB) .
11.3. Dfinit chaque lment de la ligne titre
<TH COLSPAN= ROWSPAN= ALI GN= VALI GN= WI DTH= BGCOLOR=> </ TH> Dcrit chaque lment du tableau <TD COLSPAN= ROWSPAN= ALI GN= VALI GN= WI DTH= BGCOLOR=> </ TD> COLSPAN= COLSPAN=n (par dfaut n=1) la cellule occupe n colonnes. ROWSPAN= ROWSPAN=n (par dfaut n=1) la cellule occupe n lignes. ALIGN= ALIGN=alignement horizontal du contenu de la cellule. ALIGN=LEFT (valeur par dfaut) alignement gauche de la cellule. ALIGN=RIGHT alignement droite de la cellule. ALIGN=CENTER centrage dans la cellule. VALIGN= VALIGN=alignement vertical du contenu de la cellule. VALIGN=BOTTOM (valeur par dfaut) alignement au bas de la cellule. VALIGN=TOP alignement au sommet de la cellule. VALIGN=CENTER centrage dans la cellule. WIDTH= WIDTH=largeur de la cellule en pourcentage ou en pixel. BGCOLOR= BGCOLOR="#RRGGBB" Dfinit la couleur de fond de la cellule. RR, GG et BB sont les valeurs hexadcimales du Rouge(RR), Vert(GG) et Bleu(BB).
11.4. Dcrit le titre du tableau
<CAPTI ON ALI GN=> </ CAPTI ON> ALI GN= ALI GN=TOP ( par df aut ) l a l gende du t abl eau est en haut ALI GN=BOTTOM l a l gende du t abl eau est en bas Exemple : <CENTER> <TABLE BORDER BGCOLOR=" #ccf f aa" > <CAPTI ON>Compar at i f modl e conomi que</ CAPTI ON> <TH COLSPAN=3>Modl e <TH ROWSPAN=2>Vi t esse<BR>en km/ heur e <TH ROWSPAN=2>Consommat i on<BR>en l i t r e/ 100 km <TR> <TH>Mar que</ TH> <TH>Type</ TH> <TH>Numer o de sr i e</ TH> </ TR> <TR> <TD>Peugeot 106</ TD> <TD>B2</ TD> <TD ALI GN=MI DDLE>234. 34</ TD> <TD>132</ TD> <TD>5, 7</ TD> </ TR> <TR> <TD>Ci t r on AX</ TD> <TD>AT67B8</ TD> <TD ALI GN=MI DDLE>6789</ TD> <TD>126</ TD> <TD>5, 5</ TD> </ TR> </ TABLE> Rsultat : Comparatif modle conomique Modle Marque Type Numero de srie Vitesse en km/heure Consommation en litre/100 km Peugeot 106 B2 234.34 132 5,7 Citron AX AT67B8 6789 126 5,5
12. <FRAMESET> - H.T.M.L. Netscape a implment le partage de la fentre en "cadres" ou "cellules" autonomes. Ceci revient diviser la fentre en plusieurs zones appeles frames. Chaque zone est gre indpendamment des autres. Chaque zone porte un nom. Trois commandes permettent de grer cette fonctionnalit, mais attention le corps du fichier n'est plus inclus dans <BODY> et </ BODY> mais dans <FRAMESET> et </FRAMESET>. <FRAMESET ROWS COLS BORDER> </ FRAMESET> permet de diviser une zone en cellules horizontales ou verticales. ROWS=" n, n%, *, . . . " divise la zone en cellules horizontales. o n =hauteur en nombre de pixels o n%=hauteur de la cellule en pourcentage de l'cran o * =hauteur restante
COLS=" n, n%, *, . . . " divise la zone en cellules verticales. o n =largeur en nombre de pixels o n%=largeur de la cellule en pourcentage de l'cran o * =largeur restante
BORDER permet de supprimer (BORDER=0) ou d'agrandir la valeur du sparateur de cellules. <FRAME NAME SRC SCROLLI NG MARGI NWI DTH MARGI NHEI GHT NORESI ZE BORDER FRAMEBORDER FRAMESPACI NG BORDERCOLOR> caractrise la cellule NAME=" nom_de_l a_zone" SRC=" URL" SCROLLI NG=" yes" ou " no" ou " aut o" MARGI NWI DTH= nombr e de pi xel s de l a mar ge ver t i cal e MARGI NHEI GHT= nombr e de pi xel s de l a mar ge hor i zont al e NORESI ZE vi t e l a modi f i cat i on de l a t ai l l e par l ' ut i l i sat eur BORDER= nombr e de pi xel s du bor d FRAMEBORDER=" yes" ou " no" par df aut = " yes" " yes" l e spar at eur est en 3- D " no" l e spar at eur est pl at FRAMESPACI NG= nombr e de pi xel s de l a spar at i on BORDERCOLOR=" #RRVVBB" coul eur de l a spar at i on <NOFRAME> </ NOFRAME> partir de cette commande, le texte ne sera affich que par les Browsers ne sachant pas grer les frames.
Pour utiliser les "frames", un nouvel attribut " TARGET" de la commande <A>permet de donner le nom de la cellule ( cf attribut " NAME" de la commande <FRAME>) dans laquelle le document sera affich <A HREF=" ur l " TARGET= >l i en</ A> TARGET=" Cel l ul e- 1" af f i chage dans l a cel l ul e " Cel l ul e- 1" TARGET=" _sel f " af f i chage dans l a mme cel l ul e TARGET=" _bl ank" af f i chage dans une nouvel l e f ent r e TARGET=" _t op" suppr essi on de t out es l es frames, r et our un af f i chage cl assi que
Exemple: Le but de l'exemple est de fabriquer une page qui ressemble au tableau ci-dessous Cellule droite- haute Cellule gauche Cellule droite- basse
<HTML> <FRAMESET COLS=" 25%, *" > <FRAME SCROLLI NG=" yes" NAME=" cel - g" SRC=" f r ame- 1. ht ml " > <FRAMESET ROWS=" 50%, 50%" > <FRAME SCROLLI NG=" yes" NAME=" cel - d- h" SRC=" f r ame- dh. ht ml " > <FRAME SCROLLI NG=" yes" NAME=" cel - d- b" SRC=" f r ame- dg. ht ml " > </ FRAMESET> </ FRAMESET> <NOFRAME> Dommage, vot r e <I >Br owser </ I > ne per met pas l es <I >f r ames</ I >. </ NOFRAME> </ HTML> Rsultat :
13. Divers - H.T.M.L. D'autres fonctionnalits existent sous HTML. 13.1. Centrer un document Pour centrer horizontalement du texte ou une image au milieu de la page. <CENTER> </ CENTER> Exemple : <CENTER> J e cent r e cet t e l i gne. </ CENTER> Rsultat : J e centre cette ligne.
13.2. Modification de la taille et de la couleur des caractres
Pour augmenter la taille des caractres dans le texte, et changer de couleur. <FONT SI ZE COLOR> </ FONT> Exemple : <FONT SI ZE=+1>C</ FONT><FONT SI ZE=+3>A</ FONT><FONT SI ZE=+4 COLOR=" #00f f 00" >D</ FONT><FONT SI ZE=+3>O</ FONT><FONT SI ZE=+1>R</ FONT> Rsultat : CADOR
13.3. Tableau des couleurs
Vous pouvez utiliser le nom de la couleur en lieu et place des valeurs hxadcimales bien fastidieuses utiliser. COLOR=" bi sque" ou COLOR=" #FFE4C4" , sont quivalents
Color Red Green Blue A voir aliceblue F0 F8 FF antiquewhite FA EB D7 aqua 00 FF FF aquamarine 7F FF D4 azure F0 FF FF beige F5 F5 DC bisque FF E4 C4 black 00 00 00 blanchedalmond FF EB CD blue 00 00 FF blueviolet 8A 2B E2 brown A5 2A 2A burlywood DE B8 87 cadetblue 5F 9E A0 chartreuse 7F FF 00 chocolate D2 69 1E coral FF 7F 50 cornflowerblue 64 95 ED cornsilk FF F8 DC crimson DC 14 3C cyan 00 FF FF darkblue 00 00 8B darkcyan 00 8B 8B darkgoldenrod B8 86 0B darkgray A9 A9 A9 darkgreen 00 64 00 darkkhaki BD B7 6B darkmagenta 8B 00 8B darkolivegreen 55 6B 2F darkorange FF 8C 00 darkorchid 99 32 CC darkred 8B 00 00 darksalmon E9 96 7A darkseagreen 8F BC 8F darkslateblue 48 3D 8B darkslategray 2F 4F 4F darkturquoise 00 CE D1 darkviolet 94 00 D3 deeppink FF 14 93 deepskyblue 00 BF FF dimgray 69 69 69 dodgerblue 1E 90 FF firebrick B2 22 22 floralwhite FF FA F0 forestgreen 22 8B 22 fuchsia FF 00 FF gainsboro DC DC DC ghostwhite F8 F8 FF gold FF D7 00 goldenrod DA A5 20 gray 80 80 80 green 00 80 00 greenyellow AD FF 2F honeydew F0 FF F0 hotpink FF 69 B4 indianred CD 5C 5C indigo 4B 00 82 ivory FF FF F0 khaki F0 E6 8C lavender E6 E6 FA lavenderblush FF F0 F5 lawngreen 7C FC 00 lightpink FF B6 C1 lightsalmon FF A0 7A lightseagreen 20 B2 AA lightskyblue 87 CE FA lightslategray 77 88 99 lightsteelblue B0 C4 DE lightyellow FF FF E0 lime 00 FF 00 limegreen 32 CD 32 linen FA F0 E6 magenta FF 00 FF maroon 80 00 00 mediumaquamarine 66 CD AA mediumblue 00 00 CD mediumorchid BA 55 D3 mediumpurple 93 70 DB mediumseagreen 3C B3 71 mediumslateblue 7B 68 EE mediumspringgreen 00 FA 9A mediumturquoise 48 D1 CC mediumvioletred C7 15 85 midnightblue 19 19 70 mintcream F5 FF FA mistyrose FF E4 E1 moccasin FF E4 B5 navajowhite FF DE AD navy 00 00 80 oldlace FD F5 E6 olive 80 80 00 olivedrab 6B 8E 23 orange FF A5 00 orangered FF A5 00 orchid DA 70 D6 palegoldenrod EE E8 AA palegreen 98 FB 98 paleturquoise AF EE EE palevioletred DB 70 93 papayawhip FF EF D5 peachpuff FF DA B9 peru CD 85 3F pink FF C0 CB plum DD A0 DD powderblue B0 E0 E6 purple 80 00 80 red FF 00 00 rosybrown BC 8F 8F royalblue 41 69 E1 saddlebrown 8B 45 13 salmon FA 80 72 sandybrown F4 A4 60 seagreen 2E 8B 57 seashell FF F5 EE sienna A0 52 2D silver C0 C0 C0 skyblue 87 CE EB slateblue 6A 5A CD slategray 70 80 90 snow FF FA FA springgreen 00 FF 7F steelblue 46 82 B4 tan D2 B4 8C teal 00 80 80 thistle D8 BF D8 tomato FF 63 47 turquoise 40 E0 D0 violet EE 82 EE wheat F5 DE B3 white FF FF FF whitesmoke F5 F5 F5 yellow FF FF 00 yellowgreen 9A CD 32
13.4. Indice et exposant
HTML 3 permet indice et exposant. <SUB> </ SUB> et <SUP> </ SUP> Exemple : F<SUB>( x) </ SUB>=x<SUP>2</ SUP>+2x+10 Rsultat : F (x) =x 2 +2x +10
13.5. Fond sonore
Permet de lancer un fond sonore. A utiliser avec prcaution car les fichiers sons sont le plus souvent trs volumineux. <BGSOUND SRC=" f i chi er _son" LOOP=" n" > </ BGSOUND> SRC=le nom du fichier son faire jouer pendant l'affichage de la page Les types de fichiers accepts sont o midi o wav o au
LOOP="n" spcifie que le morceau de musique sera jou n fois Exemple : <BGSOUND SRC=" hamst er . wav" LOOP=" 1" > Rsultat : Si vous avez allum vos hauts-parleurs, vous entendez l'exemple ! Charmant n'est-ce pas ?
13.6. Insertion Vido
Permet d'insrer une vido. A utiliser avec prcaution car les fichiers videos sont le plus souvent trs volumineux. <EMBED SRC=" f i chi er _vi deo" > WI DTH=" l ar geur " HEI GHT=" haut eur " ALI GN=" BOTTOM" LOOP=" f al se" </ EMBED> SRC=le nom du fichier video Les types de fichiers accepts sont o mpeg o mpg
WIDTH=largeur en pixels de la fentre
HEIGHT=hauteur en pixels de la fentre
ALIGN=alignement du texte et de la fentre : "TOP", "BOTTOM", "LEFT", "RIGHT", "CENTER", "ABSMIDDLE", "ABSBOTTOM"
LOOP="true" ou "false" Exemple : <EMBED SRC=" hal l way_r aces. mpg" LOOP=" t r ue" > Rsultat : Regardez et apprciez Charmant n'est-ce pas ?