Cours de HTML - Denis Bourdon

COURS D'INITIATION A LA CREATION
DE PAGES INTERNET EN HTML

Denis Bourdon - Etudiant Département Télécommunications ENSIMAG/ENSERG
dbourdon@dbourdon.com - www.dbourdon.com/development

Dernière mise à jour: 5 mars 2001

Téléchargez ce cours au format HTML, avec les scripts et les images au format zip (89 Ko) ou tgz (88 Ko).

Téléchargez le diaporama des cours au format pdf (177 Ko).

Ce cours est destiné à présenter les aspects de base du langage HTML pour la réalisation de pages Web simples.

Il a fait l'objet de cours en avril 2000 puis en novembre 2000 pour les étudiants du département Télécommunications de l'INPG (Institut National Polytechnique de Grenoble), de l'ENSIMAG de Grenoble (Ecole Nationale Supérieure d'Informatique et des Mathématiques Appliquées de Grenoble) et de l'ENSERG (Ecole Nationale Supérieure d'Electronique et de Radio-Electricité de Grenoble).

Enfin, il a été présenté lors de l'édition de la Fête de l'Internet en mars 2001, à l'Ensimag.

I) Introduction
1) Pré-requis
2) Qu'est-ce que HTML ?
II) Notions de base et mise en page du texte
1) La programmation par balises
2) Un premier exemple
3) Le texte
III) Insérer des liens, des images
1) Les liens
2) Image de fond
3) Les images
4) Les images réactives
IV) Les tableaux
1) En-tête du CV
2) Puces
V) Les frames
1) Le but
2) La programmation
VI) Mettre son site en ligne
1) L'hébergement
2) Le FTP
VII) Le référencement
1) Les balises META
2) Référencement manuel

ANNEXES
1) Les couleurs
a) Couleurs de base
b) Exemple de couleurs
2) Caractères accentués
3) Caractères spéciaux

I) Introduction

1) Pré-requis

Navigation sur Internet.
Utilisation d'un éditeur de texte ou d'un traitement de texte.

2) Qu'est-ce que HTML ?

"Hyper-Text Mark-Up Language""
Hyper-text = texte + liens vers d'autres pages

Permet la mise en forme de texte et d'objets multimédia (images, son, vidéo) et donc la création d'une page Internet. C'est une norme (dont la dernière spécification est à ce jour la 4.01) décidée par le W3O (World Wide Web Orgazination).
Ce n'est pas un langage de programmation à proprement parler, mais plutôt un langage de mise en page de contenu multimédia qui se veut multi-système (tout type d'architecture: PC, Mac... et tout type de système d'exploitation: Unix, Linux, Windows, MacOS...) et multi-plateforme (tout type de taille et de résolution d'écran, tout type de navigateur : Microsoft Internet Explorer, Netscape Navigator, Opera, Amaya...).
Un document HTML est interprété par le navigateur. D'où des différences si on visualise une page sur un même système avec différents navigateurs, voire différentes versions d'un même navigateur. D'où la nécessité de tester ses pages sur différents browsers pour avoir le même rendu.
Une page Internet est constituée de plusieurs éléments ou fichiers :
- Un fichier HTML, également appelé "script", "fichier source", etc... Son extension est typiquement ".htm" ou ".html". Par exemple, "index.html" pour la page d'accueil de votre site. Il s'agit d'un fichier en texte brut que ce cours est destiné à créer.
- De photos ou d'images, au format JPEG ".jpg" ou ".jpeg" (optimisé pour les photos), au format GIF ".gif" (optimisé pour les images, logos, etc..).
- Du son (WAVE ".wav"), des vidéos (MPEG ".mpeg" ou ".mpg", AVI ".avi"), des animations Flash ou QuickTime, des codes Javascript ou XML, etc...
Pour créer un document HTML, c'est-à-dire une page Internet, il existe deux solutions :
- Un éditeur de texte :
- Un générateur de pages Internet :

II) Notions de base et mise en page du texte

Pour apprendre la programmation en HTML (pour toute programmation en général), un conseil: l'apprentissage par la pratique. Alors ouvrez votre éditeur préféré et créez un document index.html.

1) La programmation par balises

Programmation par "balises" ("tags" en anglais) : ce sont des mots-clés syntaxiques entourés de crochets (<KEYWORD>). La plupart des balises "ouvertes" doivent être "fermées" (</KEYWORD>). Par exemple, un document HTML commence par <HTML> et se termine par </HTML>. On utilise indifféremment l'écriture en majuscules ou en minuscules.

2) Un premier exemple

Tapez dans votre document :

`<HTML>`	Début du document HTML
`<HEAD>`	Début des éléments non-visible dans la fenêtre principale
`<TITLE>`	Début du titre
`Mon site perso`	Le titre, visible en haut de la fenêtre du navigateur
`</TITLE>`	Fin du titre
`</HEAD>`	Fin de l'en-tête
`<BODY>`	Début du corps
`Hello world!`	Corps du document, i.e. visible dans la fenêtre principale
`</BODY>`	Fin du corps
`</HTML>`	Fin du document HTML

Notez l'indentation pour la hiérarchie ; cela permet essentiellement de ne pas oublier de fermer des balises. On saisit le texte à afficher dans le corps du document.

Voici un aperçu de ce que cela donne :

Et voici le fichier.

3) Le texte

Attention pour les caractères accentués ! (cf. annexe)

Pour mettre en page le texte, on dispose de plusieurs tags:

Le tag font: il permet de sélectionner la police de caractères, la taille, la couleur... La syntaxe est la suivante :

 texte 
- Concernant les polices de caractères, étant donné qu'elles diffèrent d'un système à l'autre, on peut en spécifier plusieurs :
 
 La première police trouvée sur le système en partant de la gauche est utilisée, sinon le navigateur utilise sa police par défaut.
- La taille de la police est un entier entre 1 et 5 (à expérimenter).
- Pour la couleur, on peut entrer des noms de couleur (blue, yellow) mais le résultat est souvent catastrophique... A n'utiliser que pour black et white. L'autre solution (majoritairement utilisée) est le codage RGB (rouge vert bleu). On utilise alors comme code couleur la chaîne #rrggbb où rr, gg, bb sont les codages en hexadécimal des pourcentages respectifs de rouge, vert, bleu désirés. Cf. annexe pour des exemples.
Les tags attributs de police

texte : italique (italic)
texte : gras (bold)
texte : souligné (underlined) A PROSCRIRE !!!! (confusion avec les liens dans le document visionné)

Mise en page

par défaut, le texte est aligné à gauche ; pour le centrer (passage automatique à la ligne):


          <center>

          texte

          </center>

  permet de passer à la ligne (ne pas fermer le tag)


          phrase 1<br>

          phrase 2<br>

 permet de structurer le texte en paragraphes


          <p>

           texte

          </p>

<hr> tire un trait horizontal

<hr width=20%>

<hr width=350>

III) Insérer des liens, des images...

1) Les liens

La syntaxe de base est :

<a href=URL>nom de la page</a> L'URL peut être absolue (http://www-telecoms.imag.fr/etudiants/) ou relative : par exemple dans mon index je veux faire un lien vers le fichier cv.html qui se trouve dans le même répertoire que index.html, il suffit d'écrire : <a href=cv.html>mon CV</a> On obtient alors un lien hypertexte, à savoir le texte entre les balises, souligné, et dont la couleur est celle par défaut du navigateur (le plus souvent blue) mais il est possible de personnaliser la couleur des liens et des liens "déjà visités" dans la balise <body> : <body link=color vlink=color> Il est possible de créer des liens internes tels que les numéros des paragraphes de ce cours dans le plan au début du document. Pour cela, il faut créer à l'endroit "cible" une ancre grâce à la balise <a name=paragraphe> et de créer le lien avec une balise un peu modifiée: <a href=#paragraphe>Paragraphe</a>. Vous pouvez même faire un lien vers une ancre dans une autre page que la page active (<a href=index.html#paragraphe>Paragraphe</a>).
Il est tout à fait possible de faire des liens vers des images (par exemple vers la même image mais en plus grande), des .doc Word, des fichiers sons... Si le navigateur ne peut exécuter le fichier, il proposera de le télécharger (par exemple un fichier compressé).
Pour faire un lien vers son adresse e-mail, l'attribut est modifié: <a href="mailto:bart.simpson@ensimag.imag.fr">écrivez-moi</a> Quand le visiteur cliquera sur le lien, son client de messagerie s'ouvrira avec un nouveau message dont vous serez le destinataire (champ To: ou A:).

2) Image de fond

Dans la balise <body>, on peut personnaliser la couleur de fond et/ou ajouter une image de fond d'écran :

<body bgcolor=color background=file> Si le fond d'écran est majoritairement noir, il convient de rajouter bgcolor=black, car, le temps que l'image se charge, le fond permettra de lire la page. De plus, par défaut, l'image de fond défile avec le texte lorsque l'on navigue dans le document (le texte est ancré dans le fond d'écran), ce qui est adapté aux "papier-peints" mais pas à des images de fond qui doivent être fixes; il suffit alors de modifier la balise comme suit: <body background=file bgproperties=fixed>

3) Les images

a) La syntaxe

<img src=file width=x height=y border=n alt="commentaire"> Les attributs width, height, border et alt sont facultatifs. Les deux premiers permettent de modifier la taille de l'image originale (à proscrire pour les GIFs) respectivement en largeur et en hauteur; il est recommandé de mettre les valeurs de l'image originale même si elle n'est pas à redimensionner car cela accélère le chargement. L'attribut border permet d'ajouter un bord à une image (à éviter en général...) en lui donnant comme paramètre un entier ; il sert surtout (voire exclusivement) à éviter un cadre peu esthétique lorsque l'image sert de lien hypertexte ; en effet, par défaut le navigateur met un cadre, un peu comme il souligne par défaut les liens hypertexte, mais on peut le forcer à ne pas en mettre (border=0). Enfin, le tag <alt> permet d'étiqueter l'image; il est très utile car en cas de téléchargement long, le visiteur a une description sommaire de l'image. De plus, pour les internautes mal-voyants, la voix de synthèse qui lit la page lira la description de l'image.

b) Quelques notions sur les images

Trois formats (principaux) d'images sur le Net :

format JPEG (extension ".jpg" ou ".jpeg")
on en a déjà percé les secrets du codage et de la compression en cours de théorie de codes, mais concrètement on l'utilise pour les photos car il peut contenir jusqu'à 64000 couleurs. On peut modifier ses attributs width et height sans problème. Il a été créé par des photographes (Joint Photographic Experts Group).
format GIF (extension ".gif")
créé par Compuserve pour le Net ; il contient une palette de couleurs (au maximum 256) et code l'image pixel par pixel. Horrible pour les images, mais très adapté aux titres et aux logos, qui sont de petite taille et qui utilisent un petit nombre de couleurs (souvent 64 ou 128). Ne pas modifier les attributs width et height! (à expérimenter...) Solution : ouvrir Gimp, Adobe Photoshop ou Jasc Paint Shop Pro, augmenter le nombre de couleurs jusqu'à 24 millions, redimensionner l'image, diminuer le nombre de couleurs jusqu'au nombre initial, et enregistrer. Autres avantages :
- on peut définir dans la palette une couleur transparente ; dans le logiciel de dessin, on voit la couleur, dans le navigateur, elle est transparente (dans le logiciel, cherchez " Set Color Transparency " ou quelque chose de ressemblant). Fonction extrêmement utile.
- il est possible créer des animations (GIFs animés) assez facilement avec de nombreux sharewares disponibles sur le Net. Par exemple, la cigogne qui bat des ailes dans l'Espace Etudiants. Aujourd'hui, la technologie Flash supplante les GIFs animés du point de vue possibilités, mais ces derniers permettent de faire des choses simples et ne nécessite aucun plug-in.
- enfin, comme le Net reste assez lent, les images .GIF s'affichant de haut de bas lors d'un chargement; pour y remédier, il est possible de créer des Gif "entrelacés" qui s'affichent en entier assez rapidement mais avec une qualité médiocre, avant de s'affiner au fur et à mesure du chargement; ce format est un peu plus lourd que le format standard.
format PNG (extension ".png")
ce format a été spécifié par le W30 et présente l'avantage d'être libre de droits (contrairement aux GIFs) et d'avoir une compression et un nombre de couleurs accrus.

c) Alignement du texte

On peut insérer des images dans un texte et contrôler l'alignement grâce à l'attribut align du tag img :

align="left|right|middle|absmiddle"

align="left"

Voici une liste non exhaustive de virus circulant actuellement et dont le plus redoutable est certainement le dernier. Virus France Info : vous balance un jingle stressant toutes les quinze minutes. Virus Droit a la Vie : vous empêche d'effacer un fichier et vous traite d'assassin si vous essayez de le faire. Virus Politiquement correct : précise toutes les minutes qu'il n'est pas un virus mais un "micro-organisme électronique". Virus Slim Fast : réduit la capacité de votre disque dur à 20Mo. Virus Richard Virenque : fait apparaître plein de messages sur l'écran, mais vous n'en croyez pas un seul.

align="right"

Virus Eglise de Scientologie : vous isole totalement de tous les réseaux, ruine l'équilibre de votre système et prétend que c'est pour votre bien. Virus PSG : La puissance de votre Pentium III 1,133 GHz est réduite à celle d'un processeur 286/AT. Virus NRJ : Une page de pub apparaît toutes les trente secondes à l'écran. Virus Alzheimer : fait perdre la mémoire à votre ordinateur. Virus Johnny Halliday : limite l'intelligence artificielle de votre ordinateur. Virus Jacques Chirac : votre écran balance sans arrêt de gauche à droite.

align="middle" : aligne le milieu de l'image avec la base de la première ligne de texte

Virus Xavière Tiberi : ajoute automatiquement des fautes d'orthographe à vos documents Word.

align="absmiddle": aligne le milieu de l'image avec le milieu de la première ligne de texte

Virus Inspecteur Derrick : rend votre écran grisâtre.

4) Les images réactives

On peut attribuer une image à un lien, mais il peut être intéressant d'attribuer des liens spécifiques à différentes parties d'une image: ce sont les images réactives ou Client Side Image Maps.
Il faut déclarer:

<img src=image usemap="index.html#map1">

<map name="map1"> <area shape="shape" coords="x,y,..." href=URL> </map>

shape peut être:

rect (alors coords="gauche-x,haut-y,droit-x,droit-y")
circle (alors coords="centre-x, centre-y, rayon")
poly (alors coords="x1,y1,x2,y2...")

Exemple:

	Une image réactive circulaire utilisant `shape="circle"`
	Une image réactive rectangulaire utilisant `shape="rect"`
	Une image réactive polygonale utilisant `shape="poly"`

Voila le code source:


<table>

<tr>

<td align="center"><img src="images/circle.gif"
usemap="#circle" width="105" height="97"
border="0">

</td>

<td>Une image réactive circulaire utilisant <code>shape="circle"</code>

</td>

</tr>

<tr>

<td align="center"><img src="images/rect.gif"
usemap="#rectangle" width="150" height="100"
border="0">

</td>

<td>Une image réactive rectangulaire utilisant <code>shape="rect"</code>

</td>

</tr>

<tr>

<td align="center"><img src="images/poly.gif"
usemap="#poly" width="134" height="100"
border="0">

</td>

<td>Une image réactive polygonale utilisant <code>shape="poly"</code>

</td>

</tr>

</table>

<map name="circle">

<area shape="circle" COORDS="52,49,35" href="source/cv.html">

</map>

<map name="rectangle">

<area shape="rect" COORDS="18,13, 88,61" href="source/cv.html">

<area shape="rect" COORDS="53,34, 131,82" href="source/index.html">

</map>

<map name="poly">

<area shape="poly" COORDS="56,23, 85,38, 110,18, 93,78,
17,84, 68,55" href="source/cv.html">

</map>

IV) Les tableaux

Extrêmement utiles pour faire une mise en page élaborée. Nous allons créer une ébauche de CV.

1) En-tête du CV

On va créer un tableau à une ligne, deux colonnes ; à gauche, vos coordonnées, à droite votre photo.


    
      <!-- en-tête du CV-->
      <table border=0>
       <tr>
        <td valign=top width=85%>
         <font face="Verdana" size=3 color=black>
         <b>Bart SIMPSON</b><br>
         238 High Street<br>
         Springfield, IL 35875
         </font>
        </td>
        <td valign=center>
         <center><img src=photo.gif width=143 right=200></center>
        </td>
       </tr>
      </table>

Quelques commentaires:

1. On glisse un petit commentaire (juste pour le script).
2. Déclaration du tableau (pas de bordure).
3. Début de ligne.
4. Début de colonne, dont l'intérieur est aligné en haut (top pour haut, bottom pour bas et center pour centré).
5. à 9. On décline son identité, du texte rien de plus simple.
10. Fin de la première colonne.
11. Nouvelle colonne dont l'intérieur est centré.
12. La photo.
13. Fin de la deuxième colonne.
14. Fin de la ligne.
15. Fin du tableau.

Voici ce que cela donne:

Et voici le fichier.

2) Puces

Il peut être utile, pour une énumération, d'établir une liste grâce à des puces (à la manière de Word). La syntaxe générale est de la forme :


     <ul>
      <li> Premier élément</li>
      <li> Deuxième élément</li>
     </ul>

Ce qui donne, à la représentation près de la puce suivant le navigateur :


     
       Premier élément
       Deuxième élément

La fermeture </li> est facultative. Il est possible de faire des listes numérotées automatiquement, il suffit d'utiliser <ol> au lieu <ul>.

On peut changer le type de puce avec les tags <li type=square> (carré), <li type=circle> (cercle) et <li type=disc> (disque plein). Ceci ne semble marcher que sur PC avec des navigateurs récents...

V) Les frames

1) Le but

Pour faciliter la navigation dans un site complexe (plus d'une page), il est intéressant d'aider le visiteur à naviguer dans le site grâce à un système de cadres (ou "frames" en anglais), dont c'est l'utilisation typique. Voici un exemple (visiter le site en ligne):

La partie verticale gauche est toujours la même tout au long de la navigation, tandis que la partie droite est la page que l'on a sélectionnée dans la barre de navigation.

2) La programmation

Dans ce type d'exemple, il y a trois types fichiers:

index.html: fichier principal, il ne contient que la description de la mise en place des cadres.
nav.html: fichier qui contient la barre de navigation.
main.html, page1.html, page2.html ...: les différentes pages du site, dont main.html est la page de garde.

  La description des frames est donc contenue dans index.html pour notre exemple.
  ATTENTION! Les vieux browsers n'affichent pas les frames (Netscape 1.x, Internet Explorer 1.x et 2.x); ces versions sont si anciennes qu'il n'y a aucun risque à utiliser les frames. De plus, il est possible de se débrouiller pour afficher la page main.html dans ces vieux browsers.
  Voici le code complet d'un index.html typique.

<html>
 <head>
  <title>Exemple de frames</title>
 </head>

<frameset cols="108,*" frameborder="0" framespacing="0" border="0">
<frame src="main.html" name="bar" marginwidth="0" marginheight="2" scrolling="auto" noresize>
<frame name="win" src="main.html" marginwidth="5" marginheight="2">
</frameset>

<noframes>
<meta http-equiv="Refresh" content="0;URL=main.html">
</noframes>

</html>

Décryptons le code.
La déclaration des frames se fait grâce au tag <frameset> qui possède une multitude d'attributs:

cols="liste_de_largeurs_de_colonnes": on déclare une liste de cadres verticaux, dont on donne dans l'ordre la largeur en pixels (ou en pourcentage). On peut remplacer UNE valeur par * pour indiquer au browser que cette frame prend toute la largeur laissée vacante dans la fenêtre du browser par les autres cadres.
rows="liste_de_largeurs_de_lignes": idem, avec des cadres horizontaux.
BORDER="nombre_de_pixels": dans Netscape, pour donner la largeur en pixels des bordures de toutes les cadres utlisé.
BORDERCOLOR="#rrggbb_ou_nom_de_couleur": dans Netscape, pour donner la couleur des bordures précédemment définies.
FRAMEBORDER="yes|no|0": grosses différences entre les browsers... La valeur "0" assure l'absence de bordure (apparemment...).
FRAMESPACING="nombre_de_pixels": espace en pixels entre les frames.

A l'intérieur du <frameset>, on déclare les cadres un par un avec <frame>, dont les attributs sont:

SRC="URL": URL par défaut du fichier à afficher dans la frame.
NAME="nom_de_frame": nom symbolique de la frame (utile pour changer les pages dans la frame en question).
MARGINWIDTH="nombre_de_pixels": indentation à gauche et à droite en pixels.
MARGINHEIGHT="nombre_de_pixels": indentation en bas et en haut en pixels.
SCROLLING="yes|no|auto": définit la présence d' "ascenseurs" verticaux et/ou horizontaux pour faire défiler la frame.
NORESIZE: force la frame à ne pas être redimensionnée. Utile pour la barre de navigation (ceci évite qu'elle soit rognée).

Enfin, dans la barre de navigation, pour que les liens s'ouvrent dans la fenêtre principale, il faut rajouter la cible dans la balise <a href="page1.html" target="win">.
Il est possible de mélanger frames horizontales et verticales. Il suffit de jouer aux poupées russes avec les <frameset>.

VI) Mettre son site en ligne

1) L'hébergement

Tous les fournisseurs d'accès proposent désormais un espace disque pour héberger sa page perso (http://perso.wanadoo.fr/login/, http://members.aol.com/login ...).
D'autres offres proposent un hébergement gratuit: Free, Chez, Geocities, Tripod...
Il suffit dans la plupart des cas d'accepter une charte pour mettre son site en ligne.

2) Le FTP

Pour mettre son site en ligne, il faut le stocker sur les disques des serveurs Internet de l'hébergeur; on utilise pour cela le FTP (File Transfert Protocol).
C'est une commande native du système UNIX mais peu pratique pour transférer tout un site. Il existe des clients FTP, qui sont des freewares ou des sharewares très conviviaux et simples d'emplois: CuteFTP, WS_FTP, FTP Explorer sous Windows.
Prenons l'exemple d'une connexion sur Free avec Cute FTP.

étiquette de site (site label): ça n'a aucune importance pour la connexion (permet de cataloguer le profil dans CuteFTP).
adresse d'hôte (host address): c'est l'adresse FTP de l'hébergeur.
ID Utilisateur (ID user): le plus souvent, votre login.
mot de passe (password).
type de transfert (transfert mode): le texte, les documents HTML... sont transmis en ASCII et les images, sons... en binaire. Le mode automatique est parfait (passez en binaire évite tout problème si vous transmettez des fichiers de type exotique).

Ensuite, deux fenêtres apparaissent, avec à gauche le répertoire local, à droite le répertoire distant. Il ne reste plus qu'à s'en servir comme un explorateur traditionnel en téléchargeant du local vers le distant (upload).

VII) Le référencement

Voila le problème le plus crucial pour tout créateur de pages Web...

1) Les balises META

La plupart des moteurs de recherche scannent le Web sans arrêt (en parcourant les liens hyper-texte de proche en proche). A chaque page Web trouvée, ils analysent le contenu pour trouver les mots-clés, puis la répertorie et à chaque requête, affiche les premières lignes de la page en tant que résumé. Ce qui est rarement fidèle à la page... Les balises META sont un moyen de déclarer soi-même ses caractéristiques qui aideront le référenceur; les deux premiers sont de loin les plus utiles:

<meta name="keywords" contents="keywords">: énumération de mots-clés
<meta name="description" contents="description">: petit résumé
<meta name="author" contents="votre_nom">: créateur de la page
<meta name="generator" contents="description">: les éditeurs de pages Internet utilise cette balise pour établir des statistiques.

2) Référencement manuel

On peut référencer sa page sur chaque moteur, mais certains sites permettent d'automatiser la procédure pour référencer gratuitement sa page dans plusieurs moteurs à la fois. Ce sont des meta-référenceurs:

http://www.multimania.com/stoi/: Le Référenceur Gratuit
http://home.cbhouse.fr/carpe/: Référencement gratuit
etc...

Pour d'autres ressources, cherchez le mot-clé "référencement gratuit" dans votre moteur préféré.

ANNEXES

1) Les couleurs

a) Couleurs de base

Black - Silver - Gray - White - Maroon - Red - Purple - Fuchsia - Green - Lime - Olive - Yellow - Navy - Blue - Teal - Aqua

b) Exemple de couleurs (noms uniquement reconnus sous Netscape)

#F0F8FF-aliceblue
#FAEBD7-antiquewhite
#00FFFF-aqua
#7FFFD4-aquamarine
#F0FFFF-azure
#F5F5DC-beige
#FFE4C4-bisque
#000000-black
#FFEBCD-blanchedalmond
#0000FF-blue
#8A2BE2-blueviolet
#A52A2A-brown-brown
#DEB887-burlywood
#5F9EA0-cadetblue
#7FFF00-chartreuse
#D2691E-chocolate
#FF7F50-coral
#6495ED-cornflowerblue
#FFF8DC-cornsilk
#DC143C-crimson
#00FFFF-cyan
#00008B-darkblue
#008B8B-darkcyan
#B8860B-darkgoldenrod
#A9A9A9-darkgray
#006400-darkgreen
#BDB76B-darkkhaki
#8B008B-darkmagenta
#556B2F-darkolivegreen
#FF8C00-darkorange
#9932CC-darkorchid
#8B0000-darkred
#E9967A-darksalmon
#8FBC8F-darkseagreen
#483D8B-darkslateblue
#2F4F4F-darkslategray
#00CED1-darkturquoise
#9400D3-darkviolet
#FF1493-deeppink
#00BFBF-deepskyblue
#696969-dimgray
#1E90FF-dodgerblue
#B22222-firebrick
#FFFAF0-floralwhite
#228B22-forestgreen
#FF00FF-fuchsia

#DCDCDC-gainsboro
#F8F8FF-ghostwhite
#FFD700-gold
#DAA520-goldenrod
#808080-gray
#008000-green
#ADFF2F-greenyellow
#F0FFF0-honeydew
#FF69B4-hotpink
#CD5C5C-indianred
#4B0082-indigo
#FFFFF0-ivory
#F0E68C-khaki
#E6E6FA-lavender
#FFF0F5-lavenderblush
#7CFC00-lawngreen
#FFFACD-lemonchiffon
#ADD8E6-lightblue
#F08080-lightcoral
#E0FFFF-lightcyan
#FAFAD2-lightgoldenrodyellow
#90EE90-lightgreen
#D3D3D3-lightgrey
#FFB6C1-lightpink
#FFA07A-lightsalmon
#20B2AA-lightseagreen
#87CEFA-lightskyblue
#778899-lightslategrey
#B0C4DE-lightsteelblue
#FFFFE0-lightyellow
#00FF00-lime
#32CD32-limegreen
#FAF0E6-linen
#FF00FF-magenta
#800000-maroon
#66CDAA-mediumaquamarine
#0000CD-mediumblue
#BA55D3-mediumorchid
#9370DB-mediumpurple
#3CB371-mediumseagreen
#7B68EE-mediumslateblue
#48D1CC-mediumturquoise
#C71585-mediumvioletred
#191970-midnightblue
#F5FFFA-mintcream
#FFA500-orange

#FFE4E1-mistyrose
#FFE4B5-moccasin
#FFDEAD-navajowhite
#000080-navy
#FDF5E6-oldlace
#808000-olive
#6B8E23-olivedrab
#FF4500-orangered
#DA70D6-orchid
#EEE8AA-palegoldenrod
#98FB98-palegreen
#AFEEEE-paleturquoise
#DB7093-palevioletred
#FFEFD5-papayawhip
#FFDAB9-peachpuff
#CD853F-peru
#FFC0CB-pink
#DDA0DD-plum
#B0E0E6-powderblue
#800080-purple
#FF0000-red
#BC8F8F-rosybrown
#4169E1-royalblue
#8B4513-saddlebrown
#FA8072-salmon
#2E8B57-seagreen
#FFF5EE-seashell
#A0522D-sienna
#C0C0C0-silver
#87CEEB-skyblue
#6A5ACD-slateblue
#708090-slategray
#FFFAFA-snow
#00FF7F-springgreen
#4682B4-steelblue
#D2B48C-tan
#008080-teal
#D8BFD8-thistle
#FF6347-tomato
#40E0D0-turquoise
#EE82EE-violet
#F5DEB3-wheat
#FFFFFF-white
#F5F5F5-whitesmoke
#FFFF00-yellow
#9ACD32-yellowgreen

2) Caractères accentués Exemples:

à : à
â : â
ç : ç
é : é
è : è
ê : ê
ï : ï
etc...

Possible avec des majuscules (à essayer...).

3) Caractères spéciaux (dont les méta-caractères)

& : &
< : <
> : >
" : "
' : ' (utile pour être vu sous Unix)