Chapitre 28 : HTML version 3.2

Dernière mise à jour  10 février 1998  Auteur Gilles Maire
Serveur  http://www.imaginet.fr/ime/html32.htm Adresse Gilles.Maire@UNGI.com

Ce chapitre étudie le langage HTML qui a été normalisé le 15 janvier 1997, sachant que ce langage est de plus en plus destiné aux personnes désirant en connaître les fonctionnalités ou aux développeurs souhaitant générer des pages par programme.

En effet, le lecteur désirant écrire une page HTML ou un Web sans connaître la syntaxe du langage HTML peut aujourd'hui développer ses pages au moyen d'outils Wysiwyg que nous présentons au chapitre sur les éditeurs HTML Wysiwyg.

28.1 - Généralités

Le langage HTML est un langage à balises, avec lequel pour faire une action sur un groupe de mots, vous devez baliser ce groupe de mots. Par exemple, pour mettre en gras le mot Gilles, et le rendre visible sous la forme Gilles par les lecteurs de Web, il suffit d'écrire la chose suivante <b>Gilles</b>.

De façon générale les commandes sont de la forme :

<marqueur> texte </marqueur> 

ou encore

<marqueur attribut=argument> texte </marqueur> 

ou même

<marqueur> 

Les noms de marqueurs sont identiques en majuscules ou minuscules : <b> équivaut à <B>. 

On peut attribuer plusieurs attributs à la même balise par la syntaxe suivante :

<marqueur attribut1=argument1 attribut2=argument2> texte </marqueur> 

Les normes HTML demandent de respecter le codage dans les caractères ASCII 7 bits, c'est à dire sans caractères accentués.

 Les logiciels navigateurs actuels sont permissifs et vous pouvez entrer des caractères accentués sous votre éditeur, mais vous devez savoir que vos pages ne seront plus lisibles par exemple au Japon ou dans les pays utilisant des jeux de caractères non latins. En outre les caractères accentués sauteront vraisemblablement dans les moteurs de recherche américains, ce point est à méditer.

 Pour coder un caractère accentué, on entre une combinaison précédée du caractère & et terminé par un ; (point virgule). Ainsi é se code &eacute;

 Le tableau suivant donne la liste des caractères ASCII de 128 à 255 avec l'encodage correspondant, mais rassurez-vous les éditeurs HTML actuels font très bien ce genre d'encodage :

&AElig;

Æ 

&Aacute;

Á 

&Acirc;

 

&Agrave;

À 

&Aring;

Å 

&Atilde;

à

&Auml;

Ä 

&Ccedil;

Ç 

&ETH;

Р

&Eacute;

É 

&Ecirc;

Ê 

&Egrave;

È 

&Euml;

Ë 

&Iacute;

Í 

&Icirc;

Π

&Igrave;

Ì 

&Iuml;

Ï 

&Ntilde;

Ñ 

&Oacute;

Ó 

&Ocirc;

Ô 

&Ograve;

Ò 

&Oslash;

Ø 

&Otilde;

Õ 

&Ouml;

Ö 

&THORN;

Þ 

&Uacute;

Ú 

&Ucirc;

Û 

&Ugrave;

Ù 

&Uuml;

Ü 

&Yacute;

Ý 

&aacute;

á 

&acirc;

â 

&aelig;

æ 

&agrave;

à 

&apos;

 

&aring;

å 

&ast;

&ast; 

&atilde;

ã 

&auml;

ä 

&brvbar;

&brvbar; 

&ccedil;

ç 

&cent;

¢ 

&colon;

 

&comma;

 

&commat;

 

&copy;

© 

&deg;

° 

&dollar;

$ 

&eacute;

é 

&ecirc;

ê 

&egrave;

è 

&emsp;

 

&ensp;

 

&equals;

 

&eth;

ð 

&euml;

ë 

&excl;

 

&frac12;

1/2 

&frac14;

1/4 

&frac34;

3/4 

&frac18;

1/8 

&frac38;

3/8; 

&frac58;

5/8

&frac78;

&frac78; 

&gt;

> 

&half;

&half; 

&hyphen;

&hyphen; 

&iacute;

í 

&icirc;

î 

&iexcl;

¡ 

&igrave;

ì 

&iquest;

¿ 

&iuml;

ï 

&laquo;

« 

&lpar;

&lpar; 

&lsqb;

&lsqb; 

&lt;

< 

&lt]

< 

&mdash;

&mdash; 

&micro;

µ 

&middot;

· 

&nbsp;

  

&ndash;

&ndash; 

&not;

¬ 

&ntilde;

ñ 

&oacute;

ó 

&ocirc;

ô 

&ograve;

ò 

&otilde;

õ 

&ouml;

ö 

&para;

 

&percnt;

&percnt; 

&period;

&period; 

&plus;

&plus; 

&plusmn;

± 

&pound;

£ 

&quest;

&quest; 

&quot;

" 

&raquo;

» 

&reg;

® 

&rpar;

&rpar; 

&rsqb;

&rsqb; 

&sect;

§ 

&semi;

&semi; 

&shy;

­ 

&sup1;

&sup1; 

&gt;

> 

&oslash;

ø 

&sup2;

&sup2; 

&sup3;

&sup3; 

&uuml;

ü 

&yacute;

ý 

&szlig;

ß 

&thorn;

þ 

&tilde;

~ 

&trade;

&trade; 

&uacute;

ú 

&ucirc;

û 

&ugrave;

ù 

&amp;

& 

&yen;

¥ 

&yuml;

ÿ 

&verbar;

&verbar; 
Comme vous le voyez dans le tableau précédent : le caractère > est à remplacer par &gt; le caractère < par &lt; et le caractère & par &amp; .

Les caractères espace consécutifs sont ramenés à un seul espace et pour forcer une suite de caractères espaces il faut utiliser &nbsp; 

Un caractère ASCII peut s'écrire sous la forme &#numéro_du_caractère.

Rassurez-vous, ces conversions sont faites par les éditeurs HTML de haut niveau.

Avant d'entrer dans le vif du sujet il faut connaître les conventions suivantes :

Enfin tout le monde commence par regarder les pages HTML des autres avant d'écrire la sienne. Pour cela il vous suffit de cliquer sur le menu View Source de votre lecteur de Web pour voir les sources d'une page HTML et vous familiariser avec le langage. Il est bien entendu conseillé de choisir une page courte au début.

Enfin une ligne peut être entrée en commentaires

<! commentaire > 

28.2 - Balises de mise en page

Ces balises permettent de faire une action ponctuelle là où elles apparaissent, sans effet sur la suite du document. <HR> trace un trait de séparation dans le texte, comme ceci.

Cette balise peut être agrémentée des arguments suivants :

 <P> est une marque de fin de paragraphe.

<P ALIGN=CENTER|LEFT|RIGTH> 

permet de rentrer le texte entre les marges gauche et droite ; dans ce cas, la balise </P> localisera la fin de la portée de la balise <P>

 <BR> est une marque de fin de ligne sans saut de paragraphe.

Elle connait les arguments suivants :

<BR CLEAR=all|left|right> 

CLEAR quand il a la valeur left va faire le même saut de ligne et fait un déplacement vers le bas en respectant la marge gauche. CLEAR avec la valeur right fait la même chose avec la marge droite. Ceci permet aussi de mettre des images autour de texte.

En outre le couple de balises

<DIV ALIGN="left|center|right">...</DIV> permet de justifier un texte à droite, au centre, ou à gauche

De même, le couple de balises  <CENTER>...</CENTER> permet de centrer le texte qu'il encadre.

28.3 - Balises de documents

On s'attache ici aux couples de balises <xx> ... </xx > qui servent à délimiter une page HTML et à définir son entête et son corps.

28.4 - Balises d'entêtes

Ces commandes se mettent entre le couple de balises <HEAD> et </HEAD>. Elles donnent des informations générales sur toute la page.

28.5 - Liens et ancres

Un lien permet de définir une région sensible au clic souris dans un document et en même temps, l'endroit ou l'on va se retrouver après ce clic. Cette adresse peut être un document différent, par exemple, mais également un endroit précis (défini par une ancre) dans le document.

La syntaxe générale d'un lien est la suivante :

<A HREF=adresse rel=top|contents|index|glossary|copyright|next|previous|help|search rev=top|contents|index|glossary|copyright|next|previous|help|search title=valeur>texte </A>

Les attributs rel, rev, et title sont peu usités et ont les mêmes significations que celles exposées dans la balise LINK

Exemple : <A name="CHAP1">Chapitre 1</A> définit un signet nommé CHAP1 associé aux mots Chapitre 1

Pour définir un lien hypertexte quelque part ailleurs sur le mot point, qui après avoir été cliqué, amène vers les mots Chapitre 1, on fait une définition de lien <A href="#CHAP1">Point</A>, et le mot Point sera marqué en bleu. 

Rappelons qu'une URL  est toujours de la forme : ressource://host.domaine:port/pathname

où la ressource peut être : file, http, news, gopher, telnet, wais ou mailto. Les éléments ressources, port et pathname sont optionnels.

Sur PC un lien à un document constitué par un fichier situé sur un lecteur de disque défini par l'unité c: se fera par l'URL :
<A HREF="file:///c|fichier.htm"> fichier sur c:</A>

 Le symbole : est remplacé par | et // est remplacé par /// pour éviter la confusion avec un nom de serveur.

Pour définir les liens URL, généralement en bleu, on utilise la balise <A HREF=....> et pour définir l'endroit ou le signet vers lequel on se rend, on utilise la balise <A NAME=....>.

 Point cléEnfin le chargement d'un fichier sons, vidéo, compressé peut être fait au moyen de cette même balise de la façon suivante : 

<A HREF=fichier>cliquez ici pour charger le fichier</A>

L'argument mailto:adresse permet d'envoyer un courrier électronique à l'adresse correspondante.

 Ainsi 

<A HREF=mailto:Gilles.Maire@imaginet.fr> texte </A>

permet d'envoyer un courrier électronique à l'utilisateur Gilles.Maire@imaginet.fr en cliquant sur le mot texte.

 Cette directive mailto permet de spécifier le champ sujet normalement renseigné dans le courrier par ajoût de l'argument subject sous la syntaxe suivant : 

<A HREF="mailto:Gilles.Maire@imaginet.fr?subject=Sujet"> texte </A>

28.6 - Balises de mise en forme

Ces commandes permettent de mettre des parties de texte dans un format donné.

Sans attribut, le texte apparaît comme ceci.

Nous allons voir les différentes possibilités d'affichage. Il est à remarquer que ces balises influent sur la charte graphique du document mais peuvent ne pas être implémenté par tel ou tel éditeur.

Gras : <B> Ceci permet d'afficher en gras </B>

Italique : <I> Ceci permet d'afficher en italique </I>

Souligné : <U> Ceci permet d'afficher en souligné</U>

 Exemple de combinaison : Gras Italique : <B> < I> Gras italique </I></B>

Adresse : <ADDRESS> Ceci permet d'afficher une adresse </ADDRESS>

Blockquote : <BLOCKQUOTE> ceci permet d'afficher un bloc avec retrait à droite</BLOCKQUOTE>

Citation : <CITE> Ceci permet d'afficher des citations </CITE> 

Code : <CODE> Ceci permet d'afficher du code </CODE>

Remarque : cette commande est bien utile dans la mesure où elle respecte les retours-ligne du texte sans demander des marques <BR> ou <P> en fin de chaque ligne.

Machine à écrire : <TT> Affichage style machine à écrire </TT>

Variable : <VAR> Ceci permet d'afficher du texte de type variable </VAR> 

Préformaté : <PRE  WIDTH=nb> Ceci permet de mettre un style préformaté
avec éventuellement une longueur de ligne 
si la variable WIDTH=nb </PRE WIDTH>.

La balise PRE est la seule qui permet :

Remarque : cette commande est utile dans la mesure où elle respecte les retours-ligne du texte sans demander des marques <BR> ou <P> en fin de chaque ligne.

Exemple : <SAMP> Ceci permet d'afficher un exemple </SAMP> 

Rayé : <STRIKE>Ceci vous permet de barrer un texte </ STRIKE>

Rayé <S>Cette balise est amenée à remplacer la précédente</S>

Epais : <STRONG> Ceci permet de mettre des caractères épais </STRONG>

Clignotant : <blink> Ceci vous permet de mettre du texte en clignotant mais n'est pas dans la norme HTML 3.2!</blink>

<H1>Titre de niveau 1</H1>

<H2>Titre de niveau 2</H2>

<H3>Titre de niveau 3</H3>

<H4>Titre de niveau 4</H4>

<H5>Titre de niveau 5</H5>

<H6>Titre de niveau 6</H6>

Les balises H1 H6 peuvent comporter  un attribut ALIGN=LEFT|CENTER|RIGHT permettant l'alignement du texte à gauche, au centre ou à droite.

Emphase : <EM> sert à mettre en relief un groupe de caractères </EM>

Clavier : <KBD> ceci permet d'afficher les entrées clavier </KBD>

 Définition : <DFN> . . . </DFN> pour afficher une définition

Attention! Certaines commandes peuvent ne rien afficher de notable dans votre document. Tout cela dépend de la finesse de votre lecteur de Web.

<BIG>...</BIG> 

Permet d'écrire un texte plus gros comme ceci

<SMALL>...</SMALL> 

Permet d'écrire un texte plus petit comme ceci

<SUP> ... </SUP> 

permet d'entrer des exposants : x2 + y2 = R2

<SUB> ... </SUB>

permet d'entrer des indices : xn+1 - xn = n(n-1)

28.7 - Balises de définitions

Ces commandes permettent de donner des listes  de plusieurs types.

Listes de définitions

permet de donner une liste de définitions

<DL> 
<DT> Terme 1 à définir 
<DD> Définition du terme 1 
<DT> Terme 2 à définir 
<DD> Définition du terme 2 
</DL>

Exemple :

Terme 1 à définir

Définition du terme 1

Terme 2 à définir

Définition du terme 2

Listes de répertoires

permet de donner une liste de répertoires

<DIR> 
<LI> texte 1 
<LI> texte 2 
</DIR> 

Exemple :

Listes de numéros

permet de donner une liste précédée d'un numéro s'incrémentant automatiquement.

<OL> 
<LI> texte 1 
<LI> texte 2 
</OL> 

Exemple :

  1. texte 1
  2. texte 2

La balise peut prendre les arguments suivants :

<OL TYPE=A|a|I|i|1 START=nb COMPACT> 

Outre les numéros 1, 2, 3 etc.. vous pouvez accéder aux numéros A,B,C etc ... et pouvez commencer à un autre rang que le premier (START).

COMPACT permet l'écriture de numéros plus compacts.

de plus <LI VALUE=nb> 

permet de changer la valeur de la numérotation en regard d'une ligne.

Liste à puces

permet de donner une liste précédée d'une puce.

<UL> 
<LI> texte 1 
<LI> texte 2 
</UL> 

Exemple :

La balise peut prendre les arguments suivants :

<UL TYPE=disc|circle|square> 

Ainsi il est possible de décider que la puce sera un disque vide, un cercle ou un carré.

<UL TYPE=disc> 
<LI> texte 1 
<LI> texte 2 
</UL> 

Listes de menus

permet de donner une liste menus.

<MENU> 
<LI> texte 1 
<LI> texte 2 
</MENU> 

Exemple :

Les listes peuvent être emboîtées en niveaux. Par exemple les lignes suivantes seront emboîtées:

Ceci se programme bien évidemment de la façon suivante : 

<UL>
<LI>Niveau 1 
<UL>
<LI>Niveau 2
<LI>Niveau 2
</UL>
<LI>Niveau 1 
</UL>

28.8 - Les images

Généralités

Une des originalités des pages web est la large utilisation des images. Les images sont au format GIF  ou JPG  et sont intégrées dans le document par la commande :

<IMG SRC="nom du fichier"> 

Cet ordre peut être agrémenté des options suivantes :

ALT : pour afficher un texte si le lecteur de Web ne sait pas lire l'image.

Exemple : <IMG ALT="texte" SRC="nom du fichier"> 

La balise IMG peut être agrémentée des arguments suivant :

ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom

Notons que seules les valeurs soulignées sont admises par la norme HTML 3.2 mais on recontre les autres dans tous les outils de manipulation HTML.

Ces différentes valeurs permettent d'aligner les images à gauche, à droite, en haut, en haut du texte, au milieu, au milieu par rapport à la ligne, en bas, en bas de la ligne etc.

WIDTH=valeur HEIGHT=valeur

Les attributs WIDTH et HEIGHT permettent de donner la longueur et la largeur de l'image, ce qui a pour effet d'accélérer la visualisation de l'image en évitant les temps de calcul. Cette option permet la visualisation du texte avant la visualisation des images avec les navigateurs les meilleurs. Elle est donc à utiliser.

BORDER=valeur 

donne l'épaisseur du trait de marque d'URL autour de l'image.

VSPACE=valeur HSPACE=valeur

VSPACE contrôle l'espacement vertical en pixels au-dessus et en dessous de l'image. HSPACE contrôle l'espacement horizontal en pixels à droite et à gauche de l'image.

Les valeur ISMAP et USEMAP sont également comprises.

La procédure ISMAP permet de repérer la position de la souris sur un graphique pour exécuter des actions différentes suivant la région cliquée.

La carte de France vous donne un exemple de cette utilisation, puisqu'elle donne la liste des fournisseurs de la région cliquée.

Pour obtenir la procédure CGI il suffit d'ajouter à la directive IMG, l'argument ISMAP, comme le montre l'exemple suivant :

<A HREF="/cgi-bin/fourniss.pl"> 
<IMG SRC="gif/france.gif" BORDER=0 ISMAP></A> 

fourniss.pl est le nom de la procédure CGI qui va être appelée sur le serveur. ISMAP permet de donner les coordonnées de la souris sur l'image, l'appel sera fait sous la forme fourniss.pl?x,y où x et y sont les coordonnées pointées.

La procédure CGI correspondante est expliquée en langage PERL dans l'exemple CGI.

 Il est commode pour s'affranchir des procédures en CGI d'utiliser la primitive imagemap décrite dans le chapitre sur les serveurs http. Mais cette possibilité n'existe pas sur tous les serveurs http.

 

28.9 - Les formulaires

Les formulaires sont les seuls outils permettant de récolter des informations en provenance des lecteurs de Web. Ils seront traités sur le serveur par des programmes appelés CGI .

Un exemple de formulaire est accessible dans ce manuel par la touche de souscription Souscription.

La puissance des procédures CGI est évidente, elle permet à l'utilisateur d'un lecteur de Web de faire des actions sur le serveur.

Ces actions peuvent être :

Dans les deux cas, le serveur pourra restituer un texte ou une page HTML de résultat spécialement conçue pour l'utilisateur qui a fait la requête. Mais dans la majeure partie des cas la procédure CGI ne se contentera pas de restituer une page de compte-rendu, elle aura généralement pour but premier d'enregistrer les informations dans une base de données.

Nous nous intéressons ici à l'écriture de requêtes CGI dans les pages HTML. Nous verrons en détail l'écriture des procédures CGI sur le serveur dans un chapitre dédié.

FORM

Les balises FORM permettent de définir les interfaces d'échange d'informations entre un utilisateur et le serveur http. Cette interface est graphique et utilise les listes déroulantes, les boutons poussoirs, les boutons radios et tous les éléments graphiques présents dans les systèmes actuels.

Plusieurs balises FORM peuvent être présentes dans un document HTML mais en aucun cas les balises FORM ne peuvent être emboîtées.

La balise FORM enverra une requête sur le serveur http sur lequel l'utilisateur est connecté lorsque ce dernier appuiera sur le bouton d'envoi de la requête.

La syntaxe d'une balise FORM est la suivante :

<FORM ACTION="url"> ... </FORM> 

Les attributs suivants peuvent être utilisés :

Le texte encadré par le couple de balises <FORM> et </FORM> peut contenir un ensemble de commandes:

INPUT

La commande INPUT est utilisée avec des attributs pour spécifier les caractéristiques de la commande clavier (ou souris) désirée.

Les différents attributs que peut utiliser la commande INPUT sont :

Exemple 1 : La forme suivante  

Entrez votre texte 

 

est obtenue par la programmation suivante :  

<FORM METHOD="POST">
Entrez votre texte <INPUT NAME="entree"> 
</FORM>  

Exemple 2 : la forme suivante  

Entrez la valeur du champ 1  

Entrez la valeur du champ 2  

Entrez la valeur du champ 3  

est obtenue par la programmation suivante :  

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"> 
Entrez la valeur du champ 1 <INPUT NAME="entry1"> 
Entrez la valeur du champ 2 <INPUT NAME="entry2"> 
Entrez la valeur du champ 3 <INPUT NAME="entry3"> 
<INPUT TYPE="submit" VALUE="Envoyer"> 
</FORM>  

Exemple 3 : La forme suivante  

Nom 

Prénom 

  1. marié
  2. francais

Volontaire

Oui
Non
Ne sait pas.

est obtenue par la programmation suivante :  

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"> 
Nom <INPUT NAME="Nom"><P> 
Prénom <INPUT NAME="Prenom"> 
<OL> 
<LI> <INPUT TYPE="checkbox" CHECKED NAME="topping1" VALUE="Marie">Marié 
<LI> <INPUT TYPE="checkbox" NAME="topping2" VALUE="francais"> francais 
</OL> 
Volontaire 
<DL> 
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Oui" CHECKED> <I>Oui</I> 
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Non"> <I>Non</I> 
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Ne sait pas"> <I>Ne sait pas</I> 
</DL> 
<INPUT TYPE="submit" VALUE="Ok"> 
<INPUT TYPE="reset" VALUE="Annuler"> 
</FORM>  

Exemple 4 : La forme suivante  

Champ 1 (normal): 

Champ2 (40 caractères affichés) : 

Champ3 (5 caractères seulement) : 

. 

est obtenue par la programmation suivante  

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"> 
Champ 1 (normal): <INPUT NAME="entry1"> <P> 
Champ2 (40 caractères affichés) : <INPUT SIZE=40 NAME="entry2"> <P> 
Champ3 (5 caractères seulement) : <INPUT SIZE=5 MAXLENGTH=5 NAME="entry3"> <P> 
<INPUT TYPE="submit" VALUE="OK"> <INPUT TYPE="reset" VALUE="Annuler"> 
</FORM>  

 

Exemple de fichier à envoyer 

 

Cet exemple est obtenu par la syntaxe suivant :

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"> 
Exemple de fichier à envoyer <INPUT TYPE=file NAME=fichier> <P> 
<INPUT TYPE=submit VALUE="Envoyer le fichier">
</FORM>  

Remarque : 

La procédure PERL permettant de récupérer les données est disponible dans le chapitre sur les exercices en PERL 

SELECT

La commande SELECT permet de donner la liste des champs accessibles pour les menus déroulants.

La commande SELECT est utilisée avec la syntaxe suivante :

<SELECT NAME="a-menu">
<OPTION VALUE=valeur> Option 1 
<OPTION VALUE=valeur> Option 2 
</SELECT> 

Les attributs de la commande SELECT sont les suivants :

NAME est le nom symbolique de l'élément. C'est-à-dire le nom du champ utilisé par l'auteur de la page HTML. Ce nom n'est pas visible pour les utilisateurs.

SIZE donne le nombre d'éléments qui seront affichés dans le menu. Les autres valeurs seront accessibles au moyen d'un ascenseur.

MULTIPLE indique que la commande SELECT pourra avoir plusieurs sélections.

SELECTED indique que l'option est sélectionnée par défaut.

VALUE est un paramètre optionnel permettant de donner à la variable en regard de NAME la valeur désirée

TEXTAREA

La commande TEXTAREA est utilisée avec la syntaxe suivante :

<TEXTAREA NAME=... ROWS=.. COLS=.. > valeur par défaut</TEXTAREA>

La commande TEXTAREA est utilisée pour les entrées textes et spécifie :

Exemple 5 : la forme suivante  

Login 

Mot de passe 

Système d'exploitation : 

Logiciels utilisés : 

est obtenue par la programmation suivante  

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"> 
Login <INPUT NAME="name" VALUE="guess"><P> 
Mot de passe <INPUT TYPE="password" NAME="passwd" VALUE="guess" ><P> 
Système d'exploitation :
<SELECT NAME="system">
      <OPTION>Mac OS
      <OPTION SELECTED>PC Windows
      <OPTION>Unix
</SELECT> <P> 
Logiciels utilisés : 
<SELECT NAME="software" MULTIPLE SIZE=5> 
<OPTION>Comptabilité 
<OPTION SELECTED>Jeux 
<OPTION>Traitement de texte 
<OPTION SELECTED> Internet 
<OPTION> Compilateurs  
</SELECT> <P> 
<TEXTAREA NAME="Commentaires" ROWS=20 COLS=60> 
Néant 
</TEXTAREA><P> 
<INPUT TYPE="submit" VALUE="OK">. <P>
</FORM>  

Soumissions

GET

Quand le bouton submit est pressé, le contenu de la FORM est assemblé dans la valeur URL qui ressemblera à ceci :

 

    action?name=value&name=value&name=value
 

 

Nous verrons en détail l'implémentation des commandes ACTION côté serveur dans le chapitre sur les serveurs http.

POST

Le contenu de la FORM est passé par un message de requête.

Essais

Si vous désirez tester votre requête sur un serveur qui vous renvoie simplement la liste des FORM que vous lui envoyez avec une présentation lisible, vous pouvez vous adresser au serveur http://hoohoo.ncsa.uiuc.edu

28.10 - Polices de caractères

Les polices de caractères peuvent être modifiées sur l'ensemble d'une page par la directive :

<BASEFONT SIZE=valeur> 

Valeur sert à changer la taille de la police par défaut. Sept tailles sont disponibles et la valeur par défaut est 3, la plus grosse étant de valeur 6.

Une partie de texte peut voir sa taille modifiée si elle est entourée de la balise :

<FONT SIZE=valeur> ..</FONT> 

Valeur sert à spécifier , ici encore, 7 tailles de polices (le défaut étant 3).

La syntaxe SIZE=+i ou i peut être compris entre 1 et 7 est admise, elle permet de donner une taille relative par rapport à la taille en cours.

De même les caractères peuvent être modifiés par l'attribut COLOR, ainsi

<FONT COLOR="#FF0000">permet de colorier les caractères (ici en rouge)</FONT> 

Permet de colorier les caractères (ici en rouge)

Notons que les noms de couleurs peuvent être donnés en toutes lettres (Red,Blue,Green,..)

<FONT COLOR="Green">Green</FONT> 

28.11 - Les Tableaux

Les tableaux sont une structure importante du langage HTML dans la mesure où ils permettent d'organiser le texte avec ou sans visualisation de cadres. Les tableaux peuvent être emboités.

Un tableau est encadré par la balise TABLE

28.12 - Fond d'écran

Les pages HTML utilisent désormais les fonds d'écran et des textures de toute sorte. Ceux-ci vous permettent de donner un style à votre page Web. On trouve désormais sur Internet des pages Web avec un fond en texture de parchemin beige et avec une écriture en noir du plus bel effet.

On trouve aussi des Webs totalement illisibles avec un fond rouge et des polices bleues.

Voici les informations utiles à votre imagination.

Il est possible d'assigner des attributs à la balise BODY, par exemple <BODY BACKGROUND="valeur" >.

Vous pouvez assigner les attributs suivants à la balise BODY :

BACKGROUND=fichier

pour reproduire le fichier en motif de vos pages, les calculs du nombre d'images nécessaires seront faits automatiquement par votre logiciel lecteur de Web.
Il existe des bibliothèques d'images de fond de page, mais vous pouvez en créer à votre goût de façon triviale avec n'importe lequel de vos éditeurs graphiques. Si vous créez un fond de page, inutile de prendre une image trop grande; un petit pavé sera suffisant puisqu'il sera répété par votre lecteur de Web pour constituer le fond de votre écran.

 Pour vous donner des idées vous pouvez consulter les pages

Enfin les arguments suivants vous permettent de jouer sur les paramètres de couleur de texte et de fond d'écran :

BGCOLOR=couleur

Définit la couleur du fond.

TEXT=couleur

Définit la couleur du texte.

LINK=couleur

Définit la couleur des URL non visités

VLINK=couleur

Définit la couleur des URL visités

ALINK=couleur

Définit la couleur des URL lorsqu'on clique dessus
Les couleurs sont à donner en valeurs hexadécimales, le tableau suivant vous donne les premières correspondances:

 

  Ainsi la syntaxe d'un attribut de changement de couleur du fond d'écran en blanc est : BGCOLOR="#FFFFFF"

28.13 - Les MAP

La directive IMAGEMAP permet d'appeler une page HTML différente suivant la région où l'on clique dans une image quand l'atttribut ISMAP est positionné, ceci est expliqué dans la section IMAGEMAP du chapitre sur les serveurs http.

 La difficulité de cette directive vient du fait que l'on doit positionner sur le serveur un fichier décrivant la géographie de l'image. Ceci nécessite une mise en oeuvre simple pour un cas particulier mais difficile à maintenir pour un administrateur de site.

La balise  MAP qui est gérée uniquement côté client. Elle simplifie donc la tâche des développeurs de page HTML.

La balise <MAP> permet de définir la géométrie de l'image; elle contient également le nom de l'image dont on définit la géométrie.

 A l'intérieur du bloc <MAP> </MAP> on trouve des définitions de type <AREA> définissant chacune des zones sensibles.

Ainsi la structure de la balise sera la suivante :

<MAP NAME=Nom> 
<AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF=URL> 
<AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF=URL> 
<AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF=URL>
<AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF=URL> 
</MAP> 
<IMG SRC=Nom de l'image USEMAP="#Nom">

Les paramètres  prennent les valeurs suivantes :

28.14 - Applets

Les applets JAVA sont définies par la norme HTML 3.2 elles sont déclarées dans la page par la syntaxe suivante

 

<APPLET CODEBASE=URL >

<PARAM NAME=paramètres VALUE=valeur>

</APPLET>

 

Haut Haut Suivant Sommaire Recherche Fenêtre Glossaire Nouveau Bientôt Courrier Souscription Aide Copyright