Le langage html
 


accueil

Sommaire informatique

Auteur : Thibaut BERNARD

Vous êtes le visiteur no

Mise à jour : lundi 8 décembre 2003.

 

 

Sommaire

 

Généralités

Principe de fonctionnement
Structure générale

Entête de la page htm

Corps du texte

Les caractères
Mise en forme des caractères
Mise en forme des paragraphes

Divers

Fond d'écran
Les couleurs
Les liens
Les images
Les compteurs

Tableaux

Formulaires

Astuce avec les polices de caractères

Biographie

 

 

Généralités

Principe de fonctionnement

 

Une page HTML est un fichier au format texte comportant des codes de mise en page appelé tags (quelquefois nommés balises).

La forme générale est :

<tag>texte</tag>

ou

<tag attribut=argument>texte</tag>

Le slash (/) indique la fin du tag correspondant.

Exemple, pour mettre du texte en gras, le code est <b>gras</b>
Dans cet exemple, cela signifie que tout le texte situé entre les tags <b> et </b> est en gras.
Si vous visualisez le source de cette page, vous verrez le code suivant :

<b>Structure générale</b>

 


Structure générale

 

Toutes les pages htm ont la structure suivante :

<html>
<head>
</head>
<body>
</body>
</html>

Les tags <html> et </html> délimite l'ensemble de la page htm.

Les tags <head> et </head> délimite l'entête. Comme nous allons le voir dans le deuxième chapitre, l'entête permet notamment de définir le titre générale de la page et les mots clés par exemple.

Les tags <body> et </body> délimite le texte principale de la page, celui que l'on voit à l'écran du navigateur.

 

 

Entête de la page htm

L'entête comporte des informations sur la page et qui ne sont pas affichées dans le document sauf le titre qui lui est affiché dans le cadre de la fenêtre.

L'entête est défini par les tags <head> et </head> et placé en premier au tout début du fichier.

Les informations proprement dite de l'entête peuvent être saisies tel quel sans coder les caractères comme indiquer dans le chapitre suivant pour le corps du texte.

 

<title> ... </title> défini le titre du document.

Les informations sont définies par le tag <meta>.

<meta content="Contenu du document">.

<meta author="Auteur du document">.

<meta http-equiv="Expires"content="Monday, 01-Jan-96" 16 :26 :30 GMT">. Donne la date d'expiration du document. La directive Expires est utilisée par la plupart des navigateurs pour donner une date à partir de laquelle la page ne doit plus être conservée dans le cache de votre logiciel mais bien rechargée sur le serveur à chaque passage sur la page.

Exemple : Si le document est uniquement consacré à un concours ou un examen particulier, il est évident que les informations proposées ne sont plus valables après la date de clôture des inscriptions.

<meta name="keywords"content="math, mathématique, Pythagore, théorème, démonstration">. La directive "keywords" permet de définir les principaux mots clés du document. Chaque mot clé doit être séparé par une virgule.

<meta name="description" content="Description de la page.">. Permet de mettre une brève description du thème de la page.

<meta name="robots" content="index,follow">. Pour les robots (programme d'indexage automatique) des moteurs de recherche indexant les pages, ce metatag lui indique s'il faut :

index : Indexer la page, c'est-à-dire la proposer aux internautes.
noindex : N'indexe pas la page. Cette page ne sera pas proposée.
follow : Indique au robot de suivre les liens pour éventuellement indexer les url indiqués.
nofollow : Indique qu'il ne faut pas suivre les liens.


Exemple d'utilisation des metatag

Les moteurs de recherches tel qu'Altavista prennent en comptent ces metatag cités. Dans le résultat de la recherche, Altavista vous le présente de cette façon :

1. Le langage html
Les commandes du langage html.

2. Informatique
Sommaire informatique

3. Etc, etc
...

 

En cliquant sur les liens pour accéder aux sites et en affichant le source des documents, vous verrez les metatag suivant.

Pour cette présente page, le langage html :

<TITLE>Le langage html</TITLE>
<META NAME="Description" content="Les commandes du langage html.">

Pour la deuxième proposition (Informatique) :

<title>Informatique</title>
<meta name="keywords" content="informatique, Windows, MS-DOS, msdos, truc, astuce, hottip, hot tip, Word, Excel, base de registre">
<meta name="description" content="Sommaire informatique.">

Vous constaterez que les titres (<title> ... </title>) et le metatag description (<meta name="description" ...) donnent ces informations.

 

 

Corps du texte

Les caractères

Le norme HTML exige de respecter le codage ASCII 7 bits pour tous les caractères, c'est à dire sans caractères accentués.

On peut certes mettre des caractères accentués, mais la page ne sera pas correctement relue par les navigateurs ne gérant pas l'alphabet latin. Même pour une langue en particulier, d'un système d'exploitation à l'autre, le codage des caractères et légèrement différent pour les codes ASCII supérieurs ou égales à 128.

 

Table des caractères

Á &Aacute;

À &Agrave;

 &Acirc;

Ä &Auml;

à &Atilde;

ã &atilde;

á &aacute;

à &agrave;

â &acirc;

ä &auml;

Ñ &Ntilde;

ñ &ntilde;

É &Eacute;

È &Egrave;

Ê &Ecirc;

Ë &Euml;

Õ &Otilde;

õ &otilde;

é &eacute;

è &egrave;

ê &ecirc;

ë &euml;

Ç &Ccedil;

ç &ccedil;

Í &Iacute;

Î &Icirc;

Ì &Igrave;

Ï &Iuml;

Æ &Aelig;

æ &aelig;

í &iacute;

î &icirc;

ì &igrave;

ï &iuml;

Å &Aring;

å &aring;

Ó &Oacute;

Ò &Ograve;

Ô &Ocirc;

Ö &Ouml;

Þ &THORN;

þ &thorn;

ó &oacute;

ò &ograve;

ô &ocirc;

ö &ouml;

Ø &Oslash;

ø &oslash;

Ú &Uacute;

Ù &Ugrave;

Û &Ucirc;

Ü &Uuml;

Ð &ETH;

© &copy;

ú &uacute;

ù &ugrave;

û &ucirc;

ü &uuml;

ð &eth;

® &reg;

Ý &Yacute;

ý &yacute;

ÿ &yuml;

€ &euro;

ß &szlig;

™ &trade;

 

Comme on peut le constater, les trois caractères < > et & sont utilisés pour les tags et le codage des caractères. Si l'on en a besoin dans le texte original, ces caractères seront codés comme suit :

< &lt;
> &gt;
& &amp;

 

Convention

Les espaces consécutifs sont supprimés par un seul. Pour forcer plusieurs espaces d'affilés, il faut mettre le tag &nbsp;.

Un simple retour chariot ne suffit. Il faut mettre le tag <p> pour indiquer un début de paragraphe et le tag </p> pour en indiquer la fin.

Le tag <br> indique un changement de ligne.

Un commentaire est codé par le tag <!>. Exemple :

<! commentaire >

Comme l'instruction rem des fichiers batch sous DOS, le tag <!> signifie qu'il ne faut pas interpréter ce qu'il y a à l'intérieur.

 


Mise en forme des caractères

 

Polices de caractères

Le choix de la police se fait par le tag :

<font paramètres>texte</font>

 

Police

La police s'indique par la directive name.

<font name="arial">texte</font>

En théorie on peut utiliser n'importe quelle police dont on dispose. Mais dans la pratique, que se passe-t-il ? Prenons une police tartempion <font name="tartempion"> parce que sur son ordinateur on dispose de cette police. On pourra certes avoir conçu et réalisé toute notre mise en page en conséquence ; Mais si c'est une police qui n'est pas très répandue, les Internautes risquent de se retrouver avec un texte en Arial ou en Times parce que, eux, ils ne disposent justement pas de cette police.

Le plus simple est de n'utiliser que les cinq polices suivantes : arial, times, courrier, wingdings et symbol. Étant les polices les plus utilisées dans le monde, on n'est quasiment sûr que le texte s'affichera correctement comme prévu (surtout si l'on souhaite utiliser des symboles comme p, a ou b par exemple). Cela a l'avantage d'éviter les surprises désagréables au sujet du résultat final de la mise en page.

 

Taille

La police globale du texte de l'ensemble d'une page s'indique par le tag :

<basefont size=valeur>
Dans ce tag Valeur indique la taille de la police en cours.

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

<font size=valeur> ... </font>

Sept tailles sont disponibles et la valeur par défaut est 3, la plus grosse étant de valeur 6.

 

Couleur

La couleur des caractères est indiquée l'attribut color, ainsi

<font color="#ff0000">texte</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>

Voir le chapitre sur le codage des couleurs.

 

Attributs des caractères

<b>Texte en gras</b>

<i>Texte en italique</i>

<u>Texte souligné</u>

<s>Texte barré</s>

On peut bien sûr combiné les attributs. Exemples :

<b><i>Texte en gras et italique</b></i>
<b><u>Texte en gras et en souligné</b></u>
<i><u>Texte en italique et souligné</i></u>

<sup> ...</sup>. Permet d'entrer des exposants.

<sub>...</sub>. Permet d'entrer des indices.

Exemple :

Texte

Html

r2 = x2 + y2

r<sup>2</sup> = x<sup>2</sup> + y<sup>2</sup>

Un = U1 + q(n-1)

U<sub>n</sub> = U<sub>1</sub> + q<sup>(n-1)</sup>

 


Mise en forme des paragraphes

Ces balises agissent sur le paragraphe en cours et sont sans effet pour le reste du document.

 

Trait

<hr> trace un trait de séparation dans le texte, comme ceci :


Cette balise peut être utilisée seule ou paramétrée de la façon suivante :

 

Signalisation des paragraphes

<p> est une marque de paragraphe.

<p align=center|left|right> permet d'avoir des paragraphes centrés, calés à gauche ou à droite. Dans ce cas, la balise</p>localisera la fin de la portée de la balise.

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

<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 (left) ou droite (right). Ceci permet aussi de mettre des images autour de texte.

Le couple de balises <div align="left|center|right">...</div> permet de placer un texte à droite, au centre, ou à gauche.

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

<pre width=nb>texte</pre width>. Les retours chariots de tout le texte placé entre ces deux tags est respecté. Le paramètre nb indique la longueur maximale des lignes. Il n'y a pas besoin de mettre les tags <p> et </p>. Le navigateur respecte le nombre d'espaces s'il y en a plusieurs regroupés. Un exemple d'utilité en est le source d'un logiciel dans un site sur les langages de programmation.

 

Liste à puces

Exemple :

Programmation :

<ul>
<li>texte 1
<li>texte 2
</ul>

On peut bien sûr imbriquer les listes :

Ceci se programme de la façon suivante :

<ul>
<li>niveau 1
<ul>
<li>niveau 2
<li>niveau 2
</ul>
<li>niveau 1
</ul>

 

Numérotation des paragraphes

Le principe est exactement le même que pour les listes à puces, à la différence près que l'on utilise le tag <ol> au lieu du tag <ul>.

Exemple :

1. texte 1

2. texte 2

Programmation :

<ol>
<li> texte 1
<li> texte 2
</ol>

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).

 

 

Divers

Fond d'écran

Par défaut toute page, comme le papier, a un fond blanc. Mais on peut y mettre en fond une couleur unie ou une image.

Voir le chapitre sur le codage des couleurs.

Il est possible d'attribuer une couleur au fond, par exemple :

<body bgcolor="#ff0000">

Vous pouvez assigner les attributs suivants à la balise body :

<body background="fond.jpg">

pour reproduire le fichier (l'image fond.jpg dans l'exemple) en tant motif d'arrière plan de vos pages. Le nombre d'images à afficher est automatiquement déterminé par le navigateur.

Dans quelques grands logiciels, il existe des bibliothèques d'images (clipart), mais vous pouvez en créer avec n'importe lequel logiciel de dessin reconnaissant les format gif et jpeg.

Si vous créez un fond de page, inutile de prendre une image trop grande; un petit dessin sera suffisant puisqu'il sera répété par votre navigateur pour remplir la page. D'autant plus qu'une grosse image aura l'inconvénient d'être plus longue à charger.

Pour vous donner des idées, vous pouvez consulter les pages bases de fond de pages Medialink.

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

Le codage utilisé est rouge, vert, bleu avec 256 valeurs pour chaque composante.

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" ; Entre guillemets, un dièse et les six caractères de la couleur.

Couleurs de base :

ff0000, rouge
00ff00, vert
0000ff, bleu

 

Tableau des principales couleurs utilisées

Nom
prédéfini

Traduction

Code
hexadécimal

illustration générée
par code hexadécimal

aqua

cyan

00ffff

texte d'illustration

navy

bleu foncé

000080

texte d'illustration

black

noir

000000

texte d'illustration

olive

olive

808000

texte d'illustration

blue

bleu

0000ff

texte d'illustration

purple

violet

800080

texte d'illustration

fuchsia

magenta

ff00ff

texte d'illustration

red

rouge

ff0000

texte d'illustration

gray

gris

808080

texte d'illustration

silver

gris clair

c0c0c0

texte d'illustration

green

vert foncé

008000

texte d'illustration

teal

bleu foncé

008080

texte d'illustration

lime

vert

00ff00

texte d'illustration

white

blanc

ffffff

texte d'illustration

maroon

rouge foncé

800000

texte d'illustration

yellow

jaune

ffff00

texte d'illustration

 

 


Les liens

Un lien est une passerelle vers un autre site ou un autre endroit de la page. Dans ce dernier cas, il doit y avoir un signet (une marque).

La syntaxe générale est <a href=adresse>texte</a>. C'est le texte (situé entre > et <) qui est affiché dans le document en cours mais renvoyant à l'adresse précisée quand on clique sur le texte.

<a name="nom du signet">texte</a>définit un signet se référant au texte désigner.
<a href="#nom de signet">texte</a> positionne le document à l'endroit désigné par le nom du signet quand on clique sur le texte.
<a href="url">texte</a> retourne le document se situant à l'adresse URL quand on clique sur le texte.
<a href="url#signet. </a> retourne le document se situant à l'adresse URL en l'affichant à partir de l'endroit où se situe le signet correspondant quand on clique sur le texte.
<a href="mailto:toto@alphaquark.com?subject=Sujet">Écrivez à Thibaut</a> permet d'appeler le module de messagerie pour envoyer un e-mail à Thibaut.
<a href=fichier>cliquez ici pour charger le fichier</a>. Si tout de suite après le signe égale, ce n'est pas une url ou une adresse e-mail valide, on considère que fichier est le nom d'un fichier à télécharger sur le site en cours. Cela peut être évidemment n'importe quel type de fichier (un son, un fichier au format zip, etc).

 

Exemple

Document affiché :

Biographie de Pythagore
Pythagore était un grand mathématicien.
Voir la démonstration du théorème.

Source du document :

<html>
<head>
</head>
<body>
<b>Biographie de Pythagore</b>
Pythagore &eacute;tait un grand math&eacute;maticien.
<a href="http://www.alphaquark.com/Mathematique/Theoreme_Pythagore.htm">Voir la d&eacute;monstration du th&eacute;or&egrave;me</a>.
</body>
</html>

Commentaire :

Quand on clique sur le texte Voir la démonstration du théorème, cela renvoi au site donnant la démonstration du théorème de Pythagore.

 


Les images

Les formats d'images standard sont GIF et JPG. La syntaxe générale est :

<img src="nom du fichier">

La directive ALT permet d'afficher un commentaire lié à l'image. Exemple :

<img alt="texte" src="nom du fichier">

Cette directive est intéressante dans le cas où dans le navigateur on a désactivé le chargement des images pour une question de rapidité de chargement des sites.

 


Les compteurs

Un compteur donne le nombre de visiteurs du site.

Syntaxe du tag :

<img src="/cgi-bin/count.cgi?df=[nom_d'utilisateur].dat">

Le paramètre nom_d'utilisateur correspond au nom principal du site. Exemple pour le site de Toto (le nom principal étant toto) :

<img src="/cgi-bin/count.cgi?df=toto.dat">

 

 

Les tableaux

Les tableaux sont organisés en cellules disposées en ligne et en colonnes.

Un tableau est encadré par le tag table :

<table></table>

Les principaux tags sont :

Exemple :

colonne1 ligne1

colonne2 ligne1

colonne3 ligne1

Colonne1 ligne2

colonne2 ligne2

colonne3 ligne2

Programmation :

<table border=0>
<tr>
<td>colonne1 ligne1</td>
<td>colonne2 ligne1</td>
<td>colonne3 ligne1</td>
</tr>
<tr>
<td>colonne1 ligne2</td>
<td>colonne2 ligne2</td>
<td>colonne3 ligne2</td>
</tr>
</table>

 

Les titres

<th ...></th> Ce couple de balises indique les entêtes du tableau, c'est-à-dire la première ligne ou la première colonne. La différence avec une balise TD réside dans l'alignement, qui par défaut est centré et la police de caractères qui est en gras.

Programmation :

<table border=0>
<th> titre1</th><th> titre2 </th><th> titre3 </th>
<tr>
<td>colonne1 ligne1</td>
<td>colonne2 ligne1</td>
<td>colonne3 ligne1</td>
</tr>
<tr>
<td>colonne1 ligne2</td>
<td>colonne2 ligne2</td>
<td>colonne3 ligne2</td>
</tr>
</table>

<caption> ... </caption>La balise caption peut être utilisée dans un texte délimité par les balises table (mais pas dans ceux délimités par tr ou td), elle sert à donner un titre au tableau et peut être en haut (align=top) ou en bas (align=bottom).

Exemple :

titre du tableau en haut

titre 1

titre 2

titre 3

Colonne1 ligne1

colonne2 ligne1

colonne3 ligne1

Colonne1 ligne2

colonne2 ligne2

colonne3 ligne2

Programmation :

<table border=0>
<caption align=top>titre du tableau en haut</caption>
<th>titre1</th><th>titre2</th><th>titre3</th>
<tr>
<td>colonne1 ligne1</td>
<td>colonne2 ligne1</td>
<td>colonne3 ligne1</td>
</tr>
<tr>
<td>colonne1 ligne2</td>
<td>colonne2 ligne2</td>
<td>colonne3 ligne2</td>
</tr>
</table>

border définit les bordures du tableau. Se met derrière la déclaration table pour indiquer que le tableau sera délimité. L'absence de l'attribut border, équivalent à border=0, n'affichera pas de bord au tableau.

Exemple :

a1

b1

c1

a2

b2

c2

Programmation :

<table border=1>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
</tr>
</table>

align=top|bottom Indique si la légende est en haut ou en bas. S'applique à la balise caption.

align=center|left|right Dans les commandes tr, th et td permet d'aligner les cellules au centre à gauche ou à droite.

valign=top|middletop|baseline Dans les commandes tr, th et td permet d'aligner le texte verticalement en haut, au centre ou en bas.

colspan Dans les commandes th ou td donne le nombre de cellules à mettre. Par défaut la valeur est 1. Avec une valeur supérieure on peut recouvrir plusieurs colonnes.

Exemple :

colonne1 ligne1

colonne2 ligne1

colonne3 ligne1

Colonne1 ligne2

colonne2 ligne2

Programmation :

<table border=0>
<tr>
<td>colonne1 ligne1</td>
<td>colonne2 ligne1</td>
<td>colonne3 ligne1</td>
</tr>
<tr>
<td colspan=2>colonne1 ligne2</td>
<td>colonne2 ligne2</td>
</tr>
</table>

affichera le tableau suivant :

colonne1 ligne1

colonne2 ligne1

colonne3 ligne1

colonne1 ligne2

colonne2 ligne2

rowspan Dans les commandes th ou td donne le nombre de lignes à mettre. Par défaut la valeur est 1. Avec une valeur supérieure on peut recouvrir plusieurs lignes.

border=valeur La valeur border est utilisable avec la commande table et permet de définir l'épaisseur du trait extérieur du tableau.

cellspacing=valeur La valeur cellspacing est utilisable avec la commande table et définit l'espacement inter cellule. La valeur par défaut est 2.

cellpadding=valeur La valeur cellpading est utilisable avec la commande table et définit la distance entre le bord de la cellule et son contenu.

width=pourcentage Cet attribut de la commande table est utilisé pour donner la largeur du tableau en pourcentage de la largeur du document. Le champ pourcentage devra être de la forme "nb%". À l'intérieur d'une cellule, <td width=33%> indique la largeur en pourcentage par rapport à la largeur totale du tableau ; dans notre exemple <td width=33%> indique que la largeur de la cellule équivaudra à un tiers par rapport à la largeur du tableau.

 

 

Les formulaires

Un formulaire, comme son nom l'indique, permet à l'utilisateur de remplir un questionnaire qui sera renvoyé (via e-mail par exemple) à la personne chargé de récolter les résultats.

La syntaxe générale est : <form action="url"> ... </form>.

Le paramètre action indique une adresse de site sur lequel sera renvoyé l'utilisateur à l'issue du formulaire.

Le paramètre method (comme nous allons en voir un exemple) est la méthode d'accès au serveur http. On trouve deux méthodes d'accès : post et get.

Le texte encadré par les tags <form> et </form> peut contenir un ensemble de commandes :

Input
Select
Textarea
Soumission
Exemple de formulaire

 

Input

La directive input est équivalente à l'input du basic. Elle permet à l'utilisateur de saisir une ligne de texte au clavier. Elle sert par exemple pour demander un nom, un prénom ou le pays.

Les différents attributs que peut utiliser la commande INPUT sont type, name, value, checked et size.

 

Type

Type qui, comme son nom l'indique, indique le type de saisie :

 

Name

Name est le nom d'utilisation du composant. S'il y a deux input, un pour le nom et l'autre pour le prénom par exemple, la personne qui recevra la réponse au formulaire aura un texte du genre :

Prenom : Toto

Nom : Dupont

Dans le formulaire il y aura deux inputs :

<input name="prenom">

<input name="nom">

Ce qui permettra de savoir que Toto a été saisi avec le premier input nommé prenom et Dupont saisi à l'aide du deuxième input nommé nom.

 

Value

Value sert à spécifier la valeur par défaut du champ de saisie. Si l'input sert à demander une url, le tag <input name="adressesite" value="http://www."> affiche http://www. Ce qui permet à l'utilisateur de directement saisir le nom de l'url qu'il a à proposer.

 

Checked

Checked indique le bouton radio ou la boîte à cocher sont sur ON (donc proposés par défaut).

 

Size

Size est la taille du champ pour les champs caractères. La valeur par défaut est 20. Si la zone valeur de size est remplie avec deux valeurs séparées par une virgule, le champ texte aura une longueur déterminée par la première valeur et un nombre de lignes défini par la deuxième valeur.

 

Menu select

La commande select permet de donner la liste des champs accessibles par les menus déroulant.

La commandeselect est utilisée avec la syntaxe suivante :

<select name="menutoto">
<option value=valeura>option a
<option value=valeurb>option b
</select>

Les attributs de la commande select sont :

name est le nom de l'élément. 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 menuToto (correspondant au nom donné à l'élément) en regard de name la valeur désirée

 

Champ textarea

À la différence du tag Input, le tag Textarea permet à l'utilisateur de saisir un texte sur plusieurs lignes.

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 les paramètres suivant spécifie :

 

Soumission du formulaire

Une fois toutes les données saisies, il faut les envoyer au destinataire. Cela se fait par le tag <input type="submit" value="Envoi"> qui correspond au bouton OK.

Le <input type="reset" value="Efface"> permet d'effacer le contenu de tous les champs.

 

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.

 

post

La méthode post permet d'envoyer le résultat du formulaire par e-mail au destinataire. Exemple :

<form method="post" action="/cgi-bin/formmail">
<input type=hidden name="recipient" value="toto@yahoo.fr">
<input type=hidden name="subject" value="réponses de mon site">
<input type=hidden name="redirect" value="http://www.yahoo.fr">
... formulaire ...
<input type="submit" value="envoi">
</form>

Ce formulaire permet d'envoyer le résultat via e-mail à l'utilisateur ayant comme adresse e-mail toto@yahoo.fr dont l'objet est "réponses de mon site" ; puis tout de suite après, on se retrouve sur le site de Yahoo. Pour l'exemple on a pris Yahoo, mais cela pourrait être la page d'accueil du site personnel ou bien une page spécialement dédiée au remerciement d'avoir participait au formulaire (ou bien de confirmation d'envoi du formulaire).

 

Exemple d'un formulaire

<html>

<head>

<title>Votre opinion</title>

</head>

<body link="#0000ff" vlink="#800080" bgcolor="#ccffcc">

 

<p align="center"><font size=4><b>Votre opinion</b></font></p>

Ce site a-t-il r&eacute;pondu &agrave; votre attente ?<br>

Donnez votre opinion, cela permettra d'am&eacute;liorer

ce site en fonction de vos remarques.</p>

Si le site vous a plu, n'h&eacute;sitez pas &agrave; le faire conna&icirc;tre.

</p>

<hr><br>

<form method="post" action="/cgi-bin/formmail">

<input type=hidden name="recipient" value="publique@alphaquark.com">

<input type=hidden name="subject" value="reponses de mon site">

<input type=hidden name="email">

<input type=hidden name="realname">

<input type=hidden name="redirect" value="http://www.alphaquark.com">

<table cellspacing=0 border=0 cellpadding=4 width=600>

<tr>

<td width="33%" valign="top">chapitre informatique :<br>

<dl>

<dd><input type="radio" name="chapinfo" value="extra" checked><i>extra</i>

<dd><input type="radio" name="chapinfo" value="moyen"><i>moyen</i>

<dd><input type="radio" name="chapinfo" value="nul"><i>nul</i>

<dd><input type="radio" name="chapinfo" value="non"><i>je ne l'ai pas vu</i>

</dl>

</td>

<td width="33%" valign="top">chapitre math&eacute;matique :<br>

<dl>

<dd><input type="radio" name="chapmath" value="extra" checked><i>extra</i>

<dd><input type="radio" name="chapmath" value="moyen"><i>moyen</i>

<dd><input type="radio" name="chapmath" value="nul"><i>nul</i>

<dd><input type="radio" name="chapmath" value="non"><i>je ne l'ai pas vu</i>

</dl>

</td>

<td width="33%" valign="top">chapitre typographie :<br>

<dl>

<dd><input type="radio" name="chaptypo" value="extra" checked><i>extra</i>

<dd><input type="radio" name="chaptypo" value="moyen"><i>moyen</i>

<dd><input type="radio" name="chaptypo" value="nul"><i>nul</i>

<dd><input type="radio" name="chaptypo" value="non"><i>je ne l'ai pas vu</i>

</dl>

</td>

</tr>

</table>

<hr></p>

</p>

Comment avez vous connu ce site ?

<select name="selection">

<option value=news>newsgroup

<option value=moteur>moteur de recherche

<option value=ami>ami

<option value=autre>autre

</select>

<br>

Pr&eacute;cisez : <input name="selectionprecision">

</p><hr></p>

Un commentaire &agrave; signaler :<br>

<textarea name="commentaires" rows=10 cols=60>

Votre commentaire :

</textarea>

</p><hr></p>

Pr&eacute;cisez votre<br>

nom : <input name="personom"><br>

pr&eacute;nom : <input name="persoprenom"><br>

e-mail : <input name="persoemail"><br>

pays : <input name="persopays"><br>

</p><hr></p>

<input type="submit" value="envoi">

<input type="reset" value="efface">

</form>

</p>

Merci d'avoir pris quelques instants pour r&eacute;pondre &agrave; ce sondage.

</p>

</body>

</html>

 

 

Astuce avec les polices de caractères

On souhaite afficher diverses symboles comme le téléphone ou l'alphabet grec. Il suffit tout simplement d'utiliser les deux polices Symbol et Wingdings.
Exemple pour le nombre pi : <font face="Symbol">p</font>
Ce qui donne : p

Tableau des caractères dans les deux polices (voir la table de codage des caractères) :

Normal

Symbol

Wingdings

!"#$%&'()*+,-./
0123456789:;<=>?
@ABCDEFGHIJKLMNO
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{|}~

!"#$%&'()*+,-./
0123456789:;<=>?
@ABCDEFGHIJKLMNO
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{|}~

!"#$%&'()*+,-./
0123456789:;<=>?
@ABCDEFGHIJKLMNO
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{|}~

ÀÁÂÄÈÉÊË ÌÍÎÏÒÓÔÖ ÙÚÛÜ
àáâäèéêë ìíîïòóôö ùúûü
ÇÝçý
ÃÑÕãñõ
ÅÆÐÞØ åæðþø
™©®ß

ÀÁÂÄÈÉÊË ÌÍÎÏÒÓÔÖ ÙÚÛÜ
àáâäèéêë ìíîïòóôö ùúûü
ÇÝçý
ÃÑÕãñõ
ÅÆÐÞØ åæðþø
™©®ß

ÀÁÂÄÈÉÊË ÌÍÎÏÒÓÔÖ ÙÚÛÜ
àáâäèéêë ìíîïòóôö ùúûü
ÇÝçý
ÃÑÕãñõ
ÅÆÐÞØ åæðþø
™©®ß

Ces deux polices (Symbol et Wingdings) étant très répandus, et comme on est sûr que tout le monde (ou presque) les ont, on peut donc les utiliser.

 

 

Biographie

Malibu, réaliser sa page Web, Une doc sur l'html allant droit l'essentiel à connaître pour construire ses pages Web.

Page d'accueil de Kevin, © 1995, 1996.

Technosphere, © quelm.fr.

UNGI, Un Nouveau Guide Internet, par Gilles Maire.