Auteur : Thibaut BERNARD
Vous êtes le visiteur no
Le langage html
|
Auteur : Thibaut BERNARD |
Vous êtes le visiteur no |
Mise à jour : lundi 8 décembre 2003.
Sommaire
Principe de fonctionnement
Structure générale
Les caractères
Mise en forme des caractères
Mise en forme des paragraphes
Fond d'écran
Les couleurs
Les liens
Les images
Les compteurs
Astuce avec les polices de caractères
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.
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 2. 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.
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.
Á Á |
À À |
  |
Ä Ä |
à à |
ã ã |
á á |
à à |
â â |
ä ä |
Ñ Ñ |
ñ ñ |
É É |
È È |
Ê Ê |
Ë Ë |
Õ Õ |
õ õ |
é é |
è è |
ê ê |
ë ë |
Ç Ç |
ç ç |
Í Í |
Î Î |
Ì Ì |
Ï Ï |
Æ &Aelig; |
æ æ |
í í |
î î |
ì ì |
ï ï |
Å Å |
å å |
Ó Ó |
Ò Ò |
Ô Ô |
Ö Ö |
Þ Þ |
þ þ |
ó ó |
ò ò |
ô ô |
ö ö |
Ø Ø |
ø ø |
Ú Ú |
Ù Ù |
Û Û |
Ü Ü |
Ð Ð |
© © |
ú ú |
ù ù |
û û |
ü ü |
ð ð |
® ® |
Ý Ý |
ý ý |
ÿ ÿ |
€ € | ß ß |
™ ™ |
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 :
< <
> >
& &
Convention
Les espaces consécutifs sont supprimés par un seul. Pour forcer plusieurs espaces d'affilés, il faut mettre le tag .
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).
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 |
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 |
Traduction |
Code |
illustration générée |
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 était un grand mathématicien.
<a href="http://www.alphaquark.com/Mathematique/Theoreme_Pythagore.htm">Voir la démonstration du théorè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 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 :
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.
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
À 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 :
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).
<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épondu à votre attente ?<br>
Donnez votre opinion, cela permettra d'améliorer
ce site en fonction de vos remarques.</p>
Si le site vous a plu, n'hésitez pas à le faire connaî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é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écisez : <input name="selectionprecision">
</p><hr></p>
Un commentaire à signaler :<br>
<textarea name="commentaires" rows=10 cols=60>
Votre commentaire :
</textarea>
</p><hr></p>
Précisez votre<br>
nom : <input name="personom"><br>
pré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épondre à 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 |
!"#$%&'()*+,-./ |
!"#$%&'()*+,-./ |
!"#$%&'()*+,-./ |
ÀÁÂÄÈÉÊË
ÌÍÎÏÒÓÔÖ
ÙÚÛÜ |
ÀÁÂÄÈÉÊË
ÌÍÎÏÒÓÔÖ
ÙÚÛÜ |
ÀÁÂÄÈÉÊË
ÌÍÎÏÒÓÔÖ
ÙÚÛÜ |
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.
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.