Qu'est-ce qu'est le HTML ?
Hyper Text Markup Language ou langage hypertexte est le langage dans lequel sont écrites les pages du web.
Un site web est constitué d' un ou plusieurs documents HTML, appelées aussi pages. Pour se déplacer d' une page à l' autre on passe par l' intermédiaire d'hyperliens.
Un document HTML est un document qui a l' extension HTML ou HTM indifféremment. C' est un simple fichier texte avec l' extension htm ou html.
Le HTML n' est pas un langage de programmation comme le C+. Il existe sur le web des langages autres que le HTML. C' est le cas des langages dynamiques comme le javascript (.js) , le perl (.pl ou .cgi) , le PHP (.php ou .php3) ou l'ASP (.asp). Certains de ces langages vont s' interpréter dans le navigateur, exemple du javascript et d' autres sur le serveur comme c' est le cas pour les autres cités précédemment. Certains de ces langages vont d' ailleurs générer des pages HTML statiques.
Le langage HTML, c' est un ensemble de règles qui indiquent à un navigateur (IE, Netscape par exemple) comment afficher une page du web.
Un groupe, le consortium WWW ou W3C se charge de normaliser ce langage en précisant les directives. La norme actuelle s' appelle HTML 4.
Apprendre le langage Html
Avertissement
Dans cette première partie du cours, vous trouverez des explications simples pour composer des pages pour le Web.
Certaines balises expliquées plus loin ne sont pratiquement plus utilisée dans les nouvelles normes HTML. Il est recommandé de définir le format du texte avec des feuilles de style. La logique voudrait donc que je ne parle plus du tout de ce qui est déconseillé. La pratique m'a montré le contraire.
Ce qui est évident pour des personnes qui étudient à plein temps la programmation Web, ne l' est pas du tout pour celui qui apprend par lui-même. Nombreux sont ceux qui abandonnent très rapidement lorsque l' accent est mis dès le départ sur les CSS. Apprendre à composer des pages simples, avec des balises déconseillées mais toujours reconnues par les navigateurs, motive celui qui ce lance dans cette quête du savoir. Une fois bien maîtrisé cette première étape, il se dirige de lui-même vers les feuilles de style, constatant rapidement les limites des balises.
Les principes de bases du HTML
Une page web est un fichier texte qui est interprété par votre navigateur. Ce fichier est composé de deux types d' éléments : le contenu et les indications pour l' affichage du contenu. Ces dernières sont nommées balises. Pour être reconnaissable par le navigateur, elles sont entourées des signes < > exemple :<body> Leur but étant d'indiquer la manière dont les données doivent être affichées, elles entourent le texte à visualiser. On nomme balise entrante celle qui indique le début du formatage et balise sortante celle qui indique la fin du formatage. La balise sortante se distingue par le le signe / qui se trouve juste après < comme par exemple <b>Bonjour</b> qui donne Bonjour . A toute balise entrante doit correspondre une balise sortante, sauf pour quelques rares exceptions. Le navigateur appliquera sur le reste de votre page la commande de la balise entrante, s' il ne trouve pas de balise sortante.
Tout cela semble bien compliqué à lire, mais dans la pratique vous l' appliquerez sans même vous en rendre compte.
Les navigateurs
Comme je l' ai dit plus haut, votre page web est un fichier texte qui sera interprété par le navigateur qui va la lire. C' est ici que commencent les difficultés. Il faut savoir que, même si des règles très précises, sont établies par un organisme international nommé le W3C, les navigateurs ne les suivent pas toujours. Ce qui implique que votre page peut avoir un aspect différent sur Netscape et sur Internet Explorer.
En HTML, vous n' avez pas la maîtrise totale de votre document.
Les outils dont vous avez besoin
Tout ce dont vous avez besoin pour créer votre première page HTML est dans votre ordinateur.
Il vous faut un éditeur de texte tel que le Bloc-notes ou Notepad de Windows. Attention, ne prenez pas un traitement de texte, car ce dernier va introduire un formatage de texte complètement illisible par le navigateur.
Vous avez besoin d' un navigateur. Lorsque vous maîtriserez bien le HTML, vous réaliserez que vous avez besoin de plusieurs navigateurs pour contrôler l' affichage de votre page.
Il vous est bien évidement possible d' utiliser un éditeur WYSWYG tel que Dreamweaver ou Front Page. Je ne veux pas lancer ici la bataille entre les puristes qui tapent leur texte dans un éditeur de texte et ceux qui n' utilisent que des éditeur WYSWYG. Chacun utilise l' instrument qui lui convient le mieux.
Si vous êtes sous Windows, la méthode la plus simple et la moins chère consiste à taper votre texte dans Notepad, d' enregistrer votre texte avec l' extension .htm (et non pas .txt) et de voir le résultat en le visionnant dans Internet Explorer. (je demande pardon aux utilisateurs Linux et Mac... mais ils sauront trouver les outils correspondants)
Votre première page
Un document HTML est délimité par la balise <htmls></html>. Il se compose de deux parties :
- L' entête qui contient des informations destinées au navigateur tel que le titre, les styles ou les balises de référencement. Cette partie, à part le titre, est invisible au visiteur de la page. Elle est délimitée par la balise <head></head>
- le corps de la page qui est délimité par la balise <body></body>. Il contient tout ce que vous désirez transmettre à votre visiteur.
Votre première page en HTML peut se présenter comme ceci :
<html>
<head>
<title>Ma première page</title>
</head>
<body>
Bonjour
</body>
</html>Quelques explications sur vos premières balises
| <html> | Début du document de type HTML. |
| <head> | Début de l' entête |
| <title> | Début du titre de la page. |
| </title> | Fin du titre de la page. |
| </head> | Fin de la zone d' en-tête. |
| <body> | Début du corps. |
| </ body> | Fin du corps. |
| </html> | Fin du document de type HTML. |
Les balises ne sont pas "case sensitive". Il est donc possible d' écrire<HTML>, <html>, <Html>, etc.
Dans l' exemple, les ligne sont incrémentées ou décrémentées selon que l' on rencontre une balise entrante ou sortante. C' est une bonne habitude à prendre. Lorsque les pages deviennent plus grandes, il est plus facile de se retrouver dans la source du document et d' trouver, par exemple, la balise que n'a pas été refermée par oubli.
Cliquez sur ce lien pour voir ce que donne cet exemple
Vous constaterez que le nom de la page est affiché dans la barre du navigateur et que Bonjour apparaît sur la page.
Mise en forme du texte
Formatage de texte simple
Votre page contiendra très certainement du texte. Pour ne pas lasser le lecteur, ou pour mettre un mot en évidence, vous voudrez changer le style de votre texte.Les balises suivantes vous seront utiles :
| Pour mettre un texte en caractère gras | <b>Oui</b> | Oui |
| Vous pouvez égallement utiliser la balise | <strong>Non</strong> | Non |
| Pour mettre un texte en italique | <i>Vous</i> | Vous |
| Vous pouvez égallement utiliser la balise | <em>Nous</em> | Nous |
| Pour souligner un texte | <u>hier</u> | Hier |
| Pour barrer un texte | <del>hier</del> | Hier |
| Mettre un texte en exposant | 1<sup>er</sup> | 1er |
| Mettre un texte en indice | H<sub>2O</sub> | H2O |
| Pour agrandir votre texte | <big>Grand</big> | Grand |
| Pour rapetisser votre texte | <small>Petit</small> | Petit |
| Pour signaler une citation | <cite>Citation</cite> | Citation |
Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien respecter l'ordre des balises entrantes et sortantes.
<b><i>Bon</i></b> Bon est correct
<b><i>...</b></i> fonctionne mais est fortement déconseillé
Les titres
Pour mettre en évidence vos données, les balises de titre sont les plus adaptées.
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
Il faut savoir qu'en les utilisant, un saut de paragraphe est généré par le navigateur après la balise sortante.
Quelques balise plus particulières
Les navigateurs ne reconnaissent qu'un espace entre les mots. Ce qui peut se révéler gênant dans certaines situations.
La balise <pre> </pre> affiche un texte dit préformaté. Le navigateur prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran.
La balise <adress>...</adress> vous permet d' indiquer une adresse .
Un saut de ligne se fait avec une des rares balise non fermante <br>. Il ne faut pas confondre le saut de ligne avec la balise paragaphe <p>.
Cliquez sur ce lien pour voir tous les exemples
Mise en forme des caractères
La balise
Bien que bientôt reléguée aux oubliettes par les CSS, voici la balise qui vous permettra de travailler vos caractères : <font></font>
Les attributs
Size
Permet de définir la taille de la fonte à afficher. Elle peut être indiquée de plusieurs façons :
- avec une taille prédéfinie allant de de 1 à 7 , la valeur par défaut étant 3.
- de façon relative par rapport à la valeur par défaut soit des chiffres allant de -3 à +3.
Exemple de définition de taille
<font size="1">Taille</fonte> donne Taille 1
<font size="2">Taille</fonte> donne Taille 2
<font size="3">Taille</fonte> donne Taille 3
<font size="4">Taille</fonte> donne Taille 4
<font size="5">Taille</fonte> donne Taille 5
<font size="6">Taille</fonte> donne Taille 6
<font size="7">Taille</fonte> donne Taille 7
Exemple de modification de taille
< font size="-3">Taille</fonte> donne Taille -3
<font size="-2">Taille</fonte> donne Taille -2
<font size="-1">Taille</fonte> donne Taille -1
Taille normale
<font size="+1">Taille</fonte> donne Taille +1
<font size="+2">Taille</fonte> donne Taille +2
<font size="+3">Taille</fonte> donne Taille +3Face
Permet de définir la fonte à utiliser pour l' affichage. Vous pouvez utiliser toutes les polices de caractères que votre système d' exploitation supporte mais vous devez savoir que celui qui visite votre page ne supportera peut-être pas les polices que vous avez utilisées. Pour pallier à ce petit inconvénient, vous pouvez indiquer des polices de remplacement en les séparant par des virgules. Une bonne façon de faire est d' utiliser les polices standard de plusieurs systèmes d' exploitation.
Voici les polices les plus courantes ainsi que leurs équivalent sur d' autres plate-formes.
- Arial, Helvetica, sans-serif
- Courier New, Courier, mono
- Georgia, Times New Roman, Times, serif
- Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
Exemple
< font face="Arial, Helvetica, sans-serif">Arial</font> Arial <font face="Courier New, Courier, mono">Courier New</font> Courier New <font face="Georgia, Times New Roman, Times, serif">Georgia</font> Georgia <font face="Times New Roman, Times, serif">Times New Roman</font> Times New Roman <font face="Verdana, Arial, Helvetica, sans-serif">Verdana</font> Verdana Color
Permet de définir la couleur d'affichage.
Voici les codes de quelques couleurs :
Bleu #0000FF Blanc #FFFFFF Rouge #FF0000 Gris clair #C0C0C0 Vert #00FF00 Violet #8000FF Jaune #FFFF00 Noir #000000 Exemple
< font color="#0000FF">Bleu</font> Bleu <font color="#FF0000">Rouge</font> Rouge <font color="#00FF00">Vert</font> Vert <font color="#000000">Noir</font> Noir
Remarques
Voici quelques raisons pour ne plus utiliser cette balise:
- Elle est considérée comme étant obsolète ou déconseillée d' emploi par le W3C.Les feuilles de style (CSS) la remplace.
- Elle rend difficile la mise à jour d' un site car les balises FONT étant intégrées à chaque page, lorsqu' on souhaite modifier la taille ou la couleur d' un titre sur un site entier, il est nécessaire de modifier chaque page individuellement.
- Elle est interprétée différemment par les différentes plates-formes (notamment Mac et PC)
Les raisons pour éventuellement l' utiliser
- Elle est compatible avec les versions anciennes version des navigateurs.
- Elle est plus facile à apprendre pour un débutant.
Notion de base des couleurs
Définition des couleurs
Il existe deux méthodes pour définir l' affichage des couleurs en HTML :
- par leur nom , sous la forme <font color="BLACK">.
- par leur code RGB, sous la forme <font color="#000000">.
Nom des couleurs
Pour une raison de compatibilité avec les navigateurs, il est conseillé d' utiliser la seconde méthode. La définition des couleurs par nom n' est pas reconnue par le w3c (Détails...)
Code RGB
Les couleurs affichées sur un écran sont le résultat du mélange des 3 couleurs de base : rouge,vert et bleu soit en anglais Red, Green, Blue. C' est pourquoi on parle des couleurs RGB. La variation de la teinte de chacune d' elle permet d' afficher toutes les couleurs existantes.
La définition d' une couleur par son code peut sembler, à première vue, complexe. Le nombre qui définit la couleur est toujours composé de 6 chiffres ou lettres. Les deux premiers définissent l' intensité du rouge, les deux suivants celle du vert et les deux dernières celle du bleu. Elles sont exprimées sous format hexadécimal. Les valeurs de chaque couleurs peuvent varier entre 0 et 255, soit entre 00 et FF en format hexadécimal.
Restrictions
Avec les anciens navigateurs, seules 6 couleurs étaient recommandées (Détails...)
Couleurs sécuritaires
Certains navigateurs, comme Netscape, n' utilise qu 'une palette de 216 couleurs. Les autres couleurs étant substituées par la couleur la plus proche de cette palette. Ces différences de teintes ne sont pas gênantes, mais lorsque l' on utilise des images sur un fond ayant la même valeur il est possible que l' on perçoivent une différence de teinte.
Les couleurs utilisées dans ce cas ne sont composés des teintes 0,51,102,153 et 255, soit 00,33,66,99 et FF. On leur donne le noms de couleurs sécuritaires.
(Détails...)
Les couleurs utilisées dans ce cas ne sont composés des teintes 0,51,102,153 et 255, soit 00,33,66,99 et FF. On leur donne le noms de couleurs sécuritaires.
(Détails...)
Les couleurs ont des noms
Il est possible, en HTML, de désigner une couleur par son nom. Cette pratique est cependant en train de disparaitre.
Cette table n'est donc présentée qu'à titre d'information. Il faut savoir que les codes RGB qui correspondent aux noms des couleurs peuvent varier d'un navigateur à l'autre.
| Nom de la couleur | Hex | Exemple |
|---|---|---|
| black | 000000 | |
| grey | BEBEBE | |
| DimGrey | 696969 | |
| LightGray | D3D3D3 | |
| LightSlateGrey | 778899 | |
| SlateGray | 708090 | |
| SlateGray1 | C6E2FF | |
| SlateGray2 | B9D3EE | |
| SlateGray3 | 9FB6CD | |
| SlateGray4 | 6C7B8B | |
| SlateGrey | 708090 | |
| grey0 | 000000 | |
| grey1 | 030303 | |
| grey2 | 050505 | |
| grey3 | 080808 | |
| grey4 | 0A0A0A | |
| grey5 | 0D0D0D | |
| grey6 | 0F0F0F | |
| grey7 | 121212 | |
| grey8 | 141414 | |
| grey9 | 171717 | |
| grey10 | 1A1A1A | |
| grey11 | 1C1C1C | |
| grey12 | 1F1F1F | |
| grey13 | 212121 | |
| grey14 | 242424 | |
| grey15 | 262626 | |
| grey16 | 292929 | |
| grey17 | 2B2B2B | |
| grey18 | 2E2E2E | |
| grey19 | 303030 | |
| grey20 | 333333 | |
| grey21 | 363636 | |
| grey22 | 383838 | |
| grey23 | 3B3B3B | |
| grey24 | 3D3D3D | |
| grey25 | 404040 | |
| grey26 | 424242 | |
| grey27 | 454545 | |
| grey28 | 474747 | |
| grey29 | 4A4A4A | |
| grey30 | 4D4D4D | |
| grey31 | 4F4F4F | |
| grey32 | 525252 | |
| grey33 | 545454 | |
| grey34 | 575757 | |
| grey35 | 595959 | |
| grey36 | 5C5C5C | |
| grey37 | 5E5E5E | |
| grey38 | 616161 | |
| grey39 | 636363 | |
| grey40 | 666666 | |
| grey41 | 696969 | |
| grey42 | 6B6B6B | |
| grey43 | 6E6E6E | |
| grey44 | 707070 | |
| grey45 | 737373 | |
| grey46 | 757575 | |
| grey47 | 787878 | |
| grey48 | 7A7A7A | |
| grey49 | 7D7D7D | |
| grey50 | 7F7F7F | |
| grey51 | 828282 | |
| grey52 | 858585 | |
| grey53 | 878787 | |
| grey54 | 8A8A8A | |
| grey55 | 8C8C8C | |
| grey56 | 8F8F8F | |
| grey57 | 919191 | |
| grey58 | 949494 | |
| grey59 | 969696 | |
| grey60 | 999999 | |
| grey61 | 9C9C9C | |
| grey62 | 9E9E9E | |
| grey63 | A1A1A1 | |
| grey64 | A3A3A3 | |
| grey65 | A6A6A6 | |
| grey66 | A8A8A8 | |
| grey67 | ABABAB | |
| grey68 | ADADAD | |
| grey69 | B0B0B0 | |
| grey70 | B3B3B3 | |
| grey71 | B5B5B5 | |
| grey72 | B8B8B8 | |
| grey73 | BABABA | |
| grey74 | BDBDBD | |
| grey75 | BFBFBF | |
| grey76 | C2C2C2 | |
| grey77 | C4C4C4 | |
| grey78 | C7C7C7 | |
| grey79 | C9C9C9 | |
| grey80 | CCCCCC | |
| grey81 | CFCFCF | |
| grey82 | D1D1D1 | |
| grey83 | D4D4D4 | |
| grey84 | D6D6D6 | |
| grey85 | D9D9D9 | |
| grey86 | DBDBDB | |
| grey87 | DEDEDE | |
| grey88 | E0E0E0 | |
| grey89 | E3E3E3 | |
| grey90 | E5E5E5 | |
| grey91 | E8E8E8 | |
| grey92 | EBEBEB | |
| grey93 | EDEDED | |
| grey94 | F0F0F0 | |
| grey95 | F2F2F2 | |
| grey96 | F5F5F5 | |
| grey97 | F7F7F7 | |
| grey98 | FAFAFA | |
| grey99 | FCFCFC | |
| grey100 | FFFFFF | |
| AliceBlue | F0F8FF | |
| BlueViolet | 8A2BE2 | |
| CadetBlue | 5F9EA0 | |
| CadetBlue1 | 98F5FF | |
| CadetBlue2 | 8EE5EE | |
| CadetBlue3 | 7AC5CD | |
| CadetBlue4 | 53868B | |
| CornflowerBlue | 6495ED | |
| DarkSlateBlue | 483D8B | |
| DarkTurquoise | 00CED1 | |
| DeepSkyBlue | 00BFFF | |
| DeepSkyBlue1 | 00BFFF | |
| DeepSkyBlue2 | 00B2EE | |
| DeepSkyBlue3 | 009ACD | |
| DeepSkyBlue4 | 00688B | |
| DodgerBlue | 1E90FF | |
| DodgerBlue1 | 1E90FF | |
| DodgerBlue2 | 1C86EE | |
| DodgerBlue3 | 1874CD | |
| DodgerBlue4 | 104E8B | |
| LightBlue | ADD8E6 | |
| LightBlue1 | BFEFFF | |
| LightBlue2 | B2DFEE | |
| LightBlue3 | 9AC0CD | |
| LightBlue4 | 68838B | |
| LightCyan | E0FFFF | |
| LightCyan1 | E0FFFF | |
| LightCyan2 | D1EEEE | |
| LightCyan3 | B4CDCD | |
| LightCyan4 | 7A8B8B | |
| LightSkyBlue | 87CEFA | |
| LightSkyBlue1 | B0E2FF | |
| LightSkyBlue2 | A4D3EE | |
| LightSkyBlue3 | 8DB6CD | |
| LightSkyBlue4 | 607B8B | |
| LightSlateBlue | 8470FF | |
| LightSteelBlue | B0C4DE | |
| LightSteelBlue1 | CAE1FF | |
| LightSteelBlue2 | BCD2EE | |
| LightSteelBlue3 | A2B5CD | |
| LightSteelBlue4 | 6E7B8B | |
| MediumAquamarine | 66CDAA | |
| MediumBlue | 0000CD | |
| MediumSlateBlue | 7B68EE | |
| MediumTurquoise | 48D1CC | |
| MidnightBlue | 191970 | |
| NavyBlue | 000080 | |
| PaleTurquoise | AFEEEE | |
| PaleTurquoise1 | BBFFFF | |
| PaleTurquoise2 | AEEEEE | |
| PaleTurquoise3 | 96CDCD | |
| PaleTurquoise4 | 668B8B | |
| PowderBlue | B0E0E6 | |
| RoyalBlue | 4169E1 | |
| RoyalBlue1 | 4876FF | |
| RoyalBlue2 | 436EEE | |
| RoyalBlue3 | 3A5FCD | |
| RoyalBlue4 | 27408B | |
| RoyalBlue5 | 002266 | |
| SkyBlue | 87CEEB | |
| SkyBlue1 | 87CEFF | |
| SkyBlue2 | 7EC0EE | |
| SkyBlue3 | 6CA6CD | |
| SkyBlue4 | 4A708B | |
| SlateBlue | 6A5ACD | |
| SlateBlue1 | 836FFF | |
| SlateBlue2 | 7A67EE | |
| SlateBlue3 | 6959CD | |
| SlateBlue4 | 473C8B | |
| SteelBlue | 4682B4 | |
| SteelBlue1 | 63B8FF | |
| SteelBlue2 | 5CACEE | |
| SteelBlue3 | 4F94CD | |
| SteelBlue4 | 36648B | |
| aquamarine | 7FFFD4 | |
| aquamarine1 | 7FFFD4 | |
| aquamarine2 | 76EEC6 | |
| aquamarine3 | 66CDAA | |
| aquamarine4 | 458B74 | |
| azure | F0FFFF | |
| azure1 | F0FFFF | |
| azure2 | E0EEEE | |
| azure3 | C1CDCD | |
| azure4 | 838B8B | |
| blue | 0000FF | |
| blue1 | 0000FF | |
| blue2 | 0000EE | |
| blue3 | 0000CD | |
| blue4 | 00008B | |
| cyan | 00FFFF | |
| cyan1 | 00FFFF | |
| cyan2 | 00EEEE | |
| cyan3 | 00CDCD | |
| cyan4 | 008B8B | |
| navy | 000080 | |
| turquoise | 40E0D0 | |
| turquoise1 | 00F5FF | |
| turquoise2 | 00E5EE | |
| turquoise3 | 00C5CD | |
| turquoise4 | 00868B | |
| DarkSlateGray | 2F4F4F | |
| DarkSlateGray1 | 97FFFF | |
| DarkSlateGray2 | 8DEEEE | |
| DarkSlateGray3 | 79CDCD | |
| DarkSlateGray4 | 528B8B | |
| RosyBrown | BC8F8F | |
| RosyBrown1 | FFC1C1 | |
| RosyBrown2 | EEB4B4 | |
| RosyBrown3 | CD9B9B | |
| RosyBrown4 | 8B6969 | |
| SaddleBrown | 8B4513 | |
| SandyBrown | F4A460 | |
| beige | F5F5DC | |
| brown | A52A2A | |
| brown1 | FF4040 | |
| brown2 | EE3B3B | |
| brown3 | CD3333 | |
| brown4 | 8B2323 | |
| burlywood | DEB887 | |
| burlywood1 | FFD39B | |
| burlywood2 | EEC591 | |
| burlywood3 | CDAA7D | |
| burlywood4 | 8B7355 | |
| chocolate | D2691E | |
| chocolate1 | FF7F24 | |
| chocolate2 | EE7621 | |
| chocolate3 | CD661D | |
| chocolate4 | 8B4513 | |
| peru | CD853F | |
| tan | D2B48C | |
| tan1 | FFA54F | |
| tan2 | EE9A49 | |
| tan3 | CD853F | |
| tan4 | 8B5A2B | |
| DarkGreen | 006400 | |
| DarkKhaki | BDB76B | |
| DarkOliveGreen | 556B2F | |
| DarkOliveGreen1 | CAFF70 | |
| DarkOliveGreen2 | BCEE68 | |
| DarkOliveGreen3 | A2CD5A | |
| DarkOliveGreen4 | 6E8B3D | |
| DarkSeaGreen | 8FBC8F | |
| DarkSeaGreen1 | C1FFC1 | |
| DarkSeaGreen2 | B4EEB4 | |
| DarkSeaGreen3 | 9BCD9B | |
| DarkSeaGreen4 | 698B69 | |
| ForestGreen | 228B22 | |
| GreenYellow | ADFF2F | |
| LawnGreen | 7CFC00 | |
| LightSeaGreen | 20B2AA | |
| LimeGreen | 32CD32 | |
| MediumSeaGreen | 3CB371 | |
| MediumSpringGreen | 00FA9A | |
| MintCream | F5FFFA | |
| OliveDrab | 6B8E23 | |
| OliveDrab1 | C0FF3E | |
| OliveDrab2 | B3EE3A | |
| OliveDrab3 | 9ACD32 | |
| OliveDrab4 | 698B22 | |
| PaleGreen | 98FB98 | |
| PaleGreen1 | 9AFF9A | |
| PaleGreen2 | 90EE90 | |
| PaleGreen3 | 7CCD7C | |
| PaleGreen4 | 548B54 | |
| SeaGreen | 2E8B57 | |
| SeaGreen1 | 54FF9F | |
| SeaGreen2 | 4EEE94 | |
| SeaGreen3 | 43CD80 | |
| SeaGreen4 | 2E8B57 | |
| SpringGreen | 00FF7F | |
| SpringGreen1 | 00FF7F | |
| SpringGreen2 | 00EE76 | |
| SpringGreen3 | 00CD66 | |
| SpringGreen4 | 008B45 | |
| YellowGreen | 9ACD32 | |
| chartreuse | 7FFF00 | |
| chartreuse1 | 7FFF00 | |
| chartreuse2 | 76EE00 | |
| chartreuse3 | 66CD00 | |
| chartreuse4 | 458B00 | |
| green | 00FF00 | |
| green1 | 00FF00 | |
| green2 | 00EE00 | |
| green3 | 00CD00 | |
| green4 | 008B00 | |
| khaki | F0E68C | |
| khaki1 | FFF68F | |
| khaki2 | EEE685 | |
| khaki3 | CDC673 | |
| khaki4 | 8B864E | |
| DarkOrange | FF8C00 | |
| DarkOrange1 | FF7F00 | |
| DarkOrange2 | EE7600 | |
| DarkOrange3 | CD6600 | |
| DarkOrange4 | 8B4500 | |
| DarkSalmon | E9967A | |
| LightCoral | F08080 | |
| LightSalmon | FFA07A | |
| LightSalmon1 | FFA07A | |
| LightSalmon2 | EE9572 | |
| LightSalmon3 | CD8162 | |
| LightSalmon4 | 8B5742 | |
| PeachPuff | FFDAB9 | |
| PeachPuff1 | FFDAB9 | |
| PeachPuff2 | EECBAD | |
| PeachPuff3 | CDAF95 | |
| PeachPuff4 | 8B7765 | |
| bisque | FFE4C4 | |
| bisque1 | FFE4C4 | |
| bisque2 | EED5B7 | |
| bisque3 | CDB79E | |
| bisque4 | 8B7D6B | |
| coral | FF7F50 | |
| coral1 | FF7256 | |
| coral2 | EE6A50 | |
| coral3 | CD5B45 | |
| coral4 | 8B3E2F | |
| honeydew | F0FFF0 | |
| honeydew1 | F0FFF0 | |
| honeydew2 | E0EEE0 | |
| honeydew3 | C1CDC1 | |
| honeydew4 | 838B83 | |
| orange | FFA500 | |
| orange1 | FFA500 | |
| orange2 | EE9A00 | |
| orange3 | CD8500 | |
| orange4 | 8B5A00 | |
| salmon | FA8072 | |
| salmon1 | FF8C69 | |
| salmon2 | EE8262 | |
| salmon3 | CD7054 | |
| salmon4 | 8B4C39 | |
| sienna | A0522D | |
| sienna1 | FF8247 | |
| sienna2 | EE7942 | |
| sienna3 | CD6839 | |
| sienna4 | 8B4726 | |
| DeepPink | FF1493 | |
| DeepPink1 | FF1493 | |
| DeepPink2 | EE1289 | |
| DeepPink3 | CD1076 | |
| DeepPink4 | 8B0A50 | |
| HotPink | FF69B4 | |
| HotPink1 | FF6EB4 | |
| HotPink2 | EE6AA7 | |
| HotPink3 | CD6090 | |
| HotPink4 | 8B3A62 | |
| IndianRed | CD5C5C | |
| IndianRed1 | FF6A6A | |
| IndianRed2 | EE6363 | |
| IndianRed3 | CD5555 | |
| IndianRed4 | 8B3A3A | |
| LightPink | FFB6C1 | |
| LightPink1 | FFAEB9 | |
| LightPink2 | EEA2AD | |
| LightPink3 | CD8C95 | |
| LightPink4 | 8B5F65 | |
| MediumVioletRed | C71585 | |
| MistyRose | FFE4E1 | |
| MistyRose1 | FFE4E1 | |
| MistyRose2 | EED5D2 | |
| MistyRose3 | CDB7B5 | |
| MistyRose4 | 8B7D7B | |
| OrangeRed | FF4500 | |
| OrangeRed1 | FF4500 | |
| OrangeRed2 | EE4000 | |
| OrangeRed3 | CD3700 | |
| OrangeRed4 | 8B2500 | |
| PaleVioletRed | DB7093 | |
| PaleVioletRed1 | FF82AB | |
| PaleVioletRed2 | EE799F | |
| PaleVioletRed3 | CD6889 | |
| PaleVioletRed4 | 8B475D | |
| VioletRed | D02090 | |
| VioletRed1 | FF3E96 | |
| VioletRed2 | EE3A8C | |
| VioletRed3 | CD3278 | |
| VioletRed4 | 8B2252 | |
| firebrick | B22222 | |
| firebrick1 | FF3030 | |
| firebrick2 | EE2C2C | |
| firebrick3 | CD2626 | |
| firebrick4 | 8B1A1A | |
| pink | FFC0CB | |
| pink1 | FFB5C5 | |
| pink2 | EEA9B8 | |
| pink3 | CD919E | |
| pink4 | 8B636C | |
| red | FF0000 | |
| red1 | FF0000 | |
| red2 | EE0000 | |
| red3 | CD0000 | |
| red4 | 8B0000 | |
| tomato | FF6347 | |
| tomato1 | FF6347 | |
| tomato2 | EE5C42 | |
| tomato3 | CD4F39 | |
| tomato4 | 8B3626 | |
| DarkOrchid | 9932CC | |
| DarkOrchid1 | BF3EFF | |
| DarkOrchid2 | B23AEE | |
| DarkOrchid3 | 9A32CD | |
| DarkOrchid4 | 68228B | |
| DarkViolet | 9400D3 | |
| LavenderBlush | FFF0F5 | |
| LavenderBlush1 | FFF0F5 | |
| LavenderBlush2 | EEE0E5 | |
| LavenderBlush3 | CDC1C5 | |
| LavenderBlush4 | 8B8386 | |
| MediumOrchid | BA55D3 | |
| MediumOrchid1 | E066FF | |
| MediumOrchid2 | D15FEE | |
| MediumOrchid3 | B452CD | |
| MediumOrchid4 | 7A378B | |
| MediumPurple | 9370DB | |
| MediumPurple1 | AB82FF | |
| MediumPurple2 | 9F79EE | |
| MediumPurple3 | 8968CD | |
| MediumPurple4 | 5D478B | |
| lavender | E6E6FA | |
| magenta | FF00FF | |
| magenta1 | FF00FF | |
| magenta2 | EE00EE | |
| magenta3 | CD00CD | |
| magenta4 | 8B008B | |
| maroon | B03060 | |
| maroon1 | FF34B3 | |
| maroon2 | EE30A7 | |
| maroon3 | CD2990 | |
| maroon4 | 8B1C62 | |
| orchid | DA70D6 | |
| orchid1 | FF83FA | |
| orchid2 | EE7AE9 | |
| orchid3 | CD69C9 | |
| orchid4 | 8B4789 | |
| plum | DDA0DD | |
| plum1 | FFBBFF | |
| plum2 | EEAEEE | |
| plum3 | CD96CD | |
| plum4 | 8B668B | |
| purple | A020F0 | |
| purple1 | 9B30FF | |
| purple2 | 912CEE | |
| purple3 | 7D26CD | |
| purple4 | 551A8B | |
| thistle | D8BFD8 | |
| thistle1 | FFE1FF | |
| thistle2 | EED2EE | |
| thistle3 | CDB5CD | |
| thistle4 | 8B7B8B | |
| violet | EE82EE | |
| AntiqueWhite | FAEBD7 | |
| AntiqueWhite1 | FFEFDB | |
| AntiqueWhite2 | EEDFCC | |
| AntiqueWhite3 | CDC0B0 | |
| AntiqueWhite4 | 8B8378 | |
| FloralWhite | FFFAF0 | |
| GhostWhite | F8F8FF | |
| NavajoWhite | FFDEAD | |
| NavajoWhite1 | FFDEAD | |
| NavajoWhite2 | EECFA1 | |
| NavajoWhite3 | CDB38B | |
| NavajoWhite4 | 8B795E | |
| OldLace | FDF5E6 | |
| WhiteSmoke | F5F5F5 | |
| gainsboro | DCDCDC | |
| ivory | FFFFF0 | |
| ivory1 | FFFFF0 | |
| ivory2 | EEEEE0 | |
| ivory3 | CDCDC1 | |
| ivory4 | 8B8B83 | |
| linen | FAF0E6 | |
| seashell | FFF5EE | |
| seashell1 | FFF5EE | |
| seashell2 | EEE5DE | |
| seashell3 | CDC5BF | |
| seashell4 | 8B8682 | |
| snow | FFFAFA | |
| snow1 | FFFAFA | |
| snow2 | EEE9E9 | |
| snow3 | CDC9C9 | |
| snow4 | 8B8989 | |
| wheat | F5DEB3 | |
| wheat1 | FFE7BA | |
| wheat2 | EED8AE | |
| wheat3 | CDBA96 | |
| wheat4 | 8B7E66 | |
| white | FFFFFF | |
| BlanchedAlmond | FFEBCD | |
| DarkGoldenrod | B8860B | |
| DarkGoldenrod1 | FFB90F | |
| DarkGoldenrod2 | EEAD0E | |
| DarkGoldenrod3 | CD950C | |
| DarkGoldenrod4 | 8B6508 | |
| LemonChiffon | FFFACD | |
| LemonChiffon1 | FFFACD | |
| LemonChiffon2 | EEE9BF | |
| LemonChiffon3 | CDC9A5 | |
| LemonChiffon4 | 8B8970 | |
| LightGoldenrod | EEDD82 | |
| LightGoldenrod1 | FFEC8B | |
| LightGoldenrod2 | EEDC82 | |
| LightGoldenrod3 | CDBE70 | |
| LightGoldenrod4 | 8B814C | |
| LightGoldenrodYellow | FAFAD2 | |
| LightYellow | FFFFE0 | |
| LightYellow1 | FFFFE0 | |
| LightYellow2 | EEEED1 | |
| LightYellow3 | CDCDB4 | |
| LightYellow4 | 8B8B7A | |
| PaleGoldenrod | EEE8AA | |
| PapayaWhip | FFEFD5 | |
| cornsilk | FFF8DC | |
| cornsilk1 | FFF8DC | |
| cornsilk2 | EEE8CD | |
| cornsilk3 | CDC8B1 | |
| cornsilk4 | 8B8878 | |
| gold | FFD700 | |
| gold1 | FFD700 | |
| gold2 | EEC900 | |
| gold3 | CDAD00 | |
| gold4 | 8B7500 | |
| goldenrod | DAA520 | |
| goldenrod1 | FFC125 | |
| goldenrod2 | EEB422 | |
| goldenrod3 | CD9B1D | |
| goldenrod4 | 8B6914 | |
| moccasin | FFE4B5 | |
| yellow | FFFF00 | |
| yellow1 | FFFF00 | |
| yellow2 | EEEE00 | |
| yellow3 | CDCD00 | |
| yellow4 | 8B8B00 | |
| copper | B87333 | |
| gold | CD7F32 | |
| silver | E6E8FA |
Les couleurs recommandées
Voici la liste des 16 couleurs préconisées par le W3C compatibles avec tous les navigateurs. De nombreuses autres couleurs sont utlisables et courrement utilisées avec les navigateurs de la dernière génération. N'employez que ces 16 couleurs si vous voulez vraiment être compatible avec les anciens navigateurs.
| 000000 | |
| C0C0C0 | |
| 808080 | |
| FFFFFF | |
| 000080 | |
| 0000FF | |
| 800080 | |
| FF00FF | |
| 008000 | |
| 00FF00 | |
| 008080 | |
| 00FFFF | |
| 80000 | |
| FF0000 | |
| 808000 | |
| FFFF00 |
Insérer les caracteres ASCII
Les caractères ASCII
Deux problèmes se posent avec les caractères ASCII spéciaux.
- Ils peuvent être difficiles à reproduire en utilisant un clavier ordinaire.
- Leur affichage sur certains navigateurs, surtout sur d' autres systèmes d' exploitations que Windows, est souvent surprenant.
Voici différentes façons d' entrer les caractères spéciaux :
- Entrer directement le caractère avec le clavier. Il n' est pas toujours évident de trouver le caractère recherché. Essayez de retrouver le caractère © sur votre clavier. Si vous avez la chance de le trouver, son affichage ne posera aucun problème avec votre système d' exploitation, mais rien ne garanti qu' il sera correcte sur un autre système.
- En utilisant les combinaisons de touches qui permettent d' entrez directement les codes. Ce qui peut être accomplis sous Windows en appuyant sur [ALT] puis, sans le relâcher, entrer le [code ASCII] sur le clavier numérique. Le résultat sur l' affichage est identique à la méthode précédente.
- Entrer le code ASCII du caractère précédé des signes &#code ASCII. Cela implique bien évidemment de connaître ce code ASCII
Cette méthode peut donner des résultats différents selon les navigateurs et les systèmes d' exploitations. Certains navigateurs se contenteront de n' afficher que le code.
En utilisant cette manière de coder votre caractère, vous utilisez le code Unicode
- En utilisant les méta-caractères HTML équivalents au caractère.
&[nom du caractère];Cette méthode est la plus sur. Tous les caractères spéciaux possèdent un équivalent au caractère. Leur affichage est identique sur tous les navigateurs.
En utilisant cette manière de coder votre caractère, vous utilisez le code ISO
Note: Les caractères HTML nommés sont sensibles à la casse :
Exemple:
é donnera é
É donnera É
| Caractère | directement | par code Unicode | par nom, ou code ISO | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| © | [ALT]0169 | © | © table des caractéres Norme ISO-8859-1
|
Aucun commentaire:
Enregistrer un commentaire