Dans une page Web, pour afficher les caractères spéciaux, il y a deux solutions :
Les codes HTML des caractères spéciaux |
---|
Voici les codes HTML à utiliser pour afficher les principaux caractères particuliers dans une page Web.
Les caractères spéciaux et de ponctuation :
Affichage du caractère | Code HTML du caractère | Nom du caractère |
---|---|---|
" |
" |
double quotes |
& |
& |
esperluette |
|
< |
chevron ouvrant |
|
> |
chevron fermant |
caractère blanc |
|
espace insécable |
¦ |
¦ |
barre verticale |
© |
© |
copyright |
® |
® |
marque déposée |
« |
« |
guillemet français ouvrant |
» |
» |
guillemet français fermant |
¶ |
¶ |
pied-de-mouche signalant le fin d'un paragraphe |
§ |
§ |
symbole d'un paragraphe |
… |
… |
point de suspension |
¡ |
¡ |
point d'exclamation renversé |
¿ |
¿ |
point d'interrogation renversé |
Les signes diacritiques seuls (les accents, le tréma et la cédille sont des signes diacritiques) :
Affichage du caractère | Code HTML du caractère | Nom du caractère |
---|---|---|
¨ |
¨ |
tréma |
´ |
´ |
accent aigu |
¸ |
¸ |
cédille |
˜ |
˜ |
tilde |
Voici pour rappel des 6 signes diacritiques les plus utilisés :
Les caractères accentués (lettres latines à qui on a ajouté un signe diacritique) :
Affichage du caractère | Code HTML du caractère | Nom du caractère |
---|---|---|
|
Ÿ |
Y tréma |
À |
À |
A accent grave |
Á |
Á |
A accent aigu |
 |
 |
A accent circonflexe |
à |
à |
A tilde |
Ä |
Ä |
A tréma |
Å |
Å |
A diacrité d'un rond en chef |
Ç |
Ç |
C cédille |
È |
È |
E accent grave |
É |
É |
E accent aigu |
Ê |
Ê |
E accent circonflexe |
Ë |
Ë |
E tréma |
Ì |
Ì |
I accent grave |
Í |
Í |
I accent aigu |
Î |
Î |
I accent circonflexe |
Ï |
Ï |
I tréma |
Ñ |
Ñ |
N tilde |
Ò |
Ò |
O accent grave |
Ó |
Ó |
O accent aigu |
Ô |
Ô |
O accent circonflexe |
Õ |
Õ |
O tilde |
Ö |
Ö |
O tréma |
Ù |
Ù |
U accent grave |
Ú |
Ú |
U accent aigu |
Û |
Û |
U accent circonflexe |
Ü |
Ü |
U tréma |
Ý |
Ý |
Y accent aigu |
à |
à |
a accent grave |
á |
á |
a accent aigu |
â |
â |
a accent circonflexe |
ã |
ã |
a tilde |
ä |
ä |
a tréma |
å |
å |
a diacrité d'un rond en chef |
ç |
ç |
c cédille |
è |
è |
e accent grave |
é |
é |
e accent aigu |
ê |
ê |
e accent circonflexe |
ë |
ë |
e tréma |
ì |
ì |
i accent grave |
í |
í |
i accent aigu |
î |
î |
i accent circonflexe |
ï |
ï |
i tréma |
ñ |
ñ |
n tilde |
ò |
ò |
o accent grave |
ó |
ó |
o accent aigu |
ô |
ô |
o accent circonflexe |
õ |
õ |
o tilde |
ö |
ö |
o tréma |
ù |
ù |
u accent grave |
ú |
ú |
u accent aigu |
û |
û |
u accent circonflexe |
ü |
ü |
u tréma |
ý |
ý |
y accent aigu |
ÿ |
ÿ |
y tréma |
Ces codes HTML littéraux sont faciles à retenir ou à interpréter. Exemples :
Les ligatures :
Affichage du caractère | Code HTML du caractère | Nom du caractère |
---|---|---|
|
œ |
e dans l'o minuscule |
Œ |
Œ |
e dans l'o majuscule |
æ |
æ |
e dans l'a minuscule |
Æ |
Æ |
e dans l'a majuscule |
Les lettres grecques :
Affichage du caractère | Code HTML du caractère | Nom du caractère |
---|---|---|
µ |
µ |
lettre mu minuscule |
Δ |
Δ |
lettre delta majuscule |
ε |
ε |
lettre epsilon minuscule |
Les symboles monétaires :
Affichage du caractère | Code HTML du caractère | Nom du caractère |
---|---|---|
¤ |
¤ |
symbole monétaire générique |
|
€ |
symbole monétaire de l'euro |
£ |
£ |
symbole de la livre sterling (unité monétaire du Royaume-Uni) |
¥ |
¥ |
symbole du yen (unité monétaire du Japon) |
¢ |
¢ |
cent (unité monétaire égale à 1/100 de l'unité monétaire de base) |
Les symboles mathématiques et scientifiques :
Affichage du caractère | Code HTML du caractère | Nom du caractère |
---|---|---|
‰ |
‰ |
pour mille |
± |
± |
plus ou moins |
√ |
√ |
racine carrée |
¬ |
¬ |
opérateur logique NON |
· |
· |
point médian pouvant symboliser le produit en logique ou en mathématiques |
× |
× |
multiplication |
÷ |
÷ |
division |
≡ |
≡ |
équivalent |
∞ |
∞ |
symbole de l'infini |
° |
° |
degré |
¹ |
¹ |
exposant 1 |
² |
² |
exposant 2 |
³ |
³ |
exposant 3 |
¼ |
¼ |
fraction un quart |
½ |
½ |
fraction un demi |
¾ |
¾ |
fraction trois quarts |
ø |
ø |
o minuscule barré pouvant symboliser l'ensemble vide |
Ø |
Ø |
O majuscule barré pouvant symboliser l'ensemble vide |
Les code ASCII des caractères |
---|
En informatique tous les caractères portent un numéro unique appelé "code ASCII". Le code ASCII est un numéro entre 1 et 255.
Voici par exemple les caractères de 33 à 127. Il s'agit des caractères standards disponibles directement sur un clavier :
33 : ! 34 : " 35 : # 36 : $ 37 : %
38 : & 39 : ' 40 : ( 41 : ) 42 : *
43 : + 44 : , 45 : - 46 : . 47 : /
48 : 0 49 : 1 50 : 2 51 : 3 52 : 4
53 : 5 54 : 6 55 : 7 56 : 8 57 : 9
58 : : 59 : ; 60 : < 61 : = 62 : >
63 : ? 64 : @ 65 : A 66 : B 67 : C
68 : D 69 : E 70 : F 71 : G 72 : H
73 : I 74 : J 75 : K 76 : L 77 : M
78 : N 79 : O 80 : P 81 : Q 82 : R
83 : S 84 : T 85 : U 86 : V 87 : W
88 : X 89 : Y 90 : Z 91 : [ 92 : \
93 : ] 94 : ^ 95 : _ 96 : ` 97 : a
98 : b 99 : c 100 : d 101 : e 102 : f
103 : g 104 : h 105 : i 106 : j 107 : k
108 : l 109 : m 110 : n 111 : o 112 : p
113 : q 114 : r 115 : s 116 : t 117 : u
118 : v 119 : w 120 : x 121 : y 122 : z
123 : { 124 : | 125 : } 126 : ~ 127 :
En HTML, pour insérer un caractère dans une page web à partir de son code ASCII, il faut utiliser le code &#nnn; où nnn est le code ASCII en décimal.
Pour les codes ASCII entre 128 et 255, nous retrouvons notamment les caractères accentués. Voici quelques exemples :
Affichage du caractère | Code ASCII du caractère | Code HTML du caractère |
---|---|---|
|
156 |
œ |
É |
201 |
É |
à |
224 |
à |
Pour connaître le code ASCII de tous les caractères cliquez ici.
Remarque : entre 128 et 255 les codes des caractères utilisés en HTML correspondent à la table ASCII étendue ANSI.
Au delà de 255 nous tombons dans les caractères Unicode : il en existe plusieurs milliers ! Les caractères Unicode nous permettent d'afficher une grande diversité de caractères autre que les chiffres, les lettres et les caractères de ponctuation contenus dans la table ASCII de base. Nous y trouvons entre autre :
Voici quelques exemples (parmi des milliers d'autres) de caractères Unicode :
Affichage du caractère | Code Unicode du caractère en décimal |
Code HTML du caractère |
---|---|---|
✂ |
9986 |
✂ |
❅ |
10053 |
❅ |
❤ |
10084 |
❤ |
Pour parcourir la table de caractères Unicode en décimal cliquez ici.
Remarque : si le code numérique nnn du caractère est en décimal, il faut utiliser le code &#nnn; dans la page HTML pour l'afficher. Mais si le code numérique nnn du caractère est en hexadécimal, il faut utiliser le code &#xnnn; dans la page HTML.
Voici quelques exemples d'autres caractères Unicode dont le numéro est donné cette fois en hexadécimal :
Affichage du caractère | Code Unicode du caractère en hexadécimal |
Code HTML du caractère |
---|---|---|
✎ |
270E |
✎ |
❀ |
2740 |
❀ |
✈ |
2708 |
✈ |
Pour parcourir la table de caractères Unicode en hexadécimal cliquez ici.
Utilisation des codes des caractères spéciaux dans les balises HTML |
---|
En HTML, pour insérer un caractère spécial dans un texte on utilise le code du caractère dans un des 3 formats :
Voici quelque exemples de textes ou d'expressions mathématiques utilisant des caractères spéciaux dont la plupart ne sont pas directement disponibles sur un clavier :
Code HTML | Résultat |
---|---|
Grâce aux codes HTML des caractères il est possible d'insérer des caractères accentués dans un document HTML | Grâce aux codes HTML des caractères il est possible d'insérer des caractères accentués dans un document HTML |
Qui vole un œuf vole un bœuf | Qui vole un œuf vole un bœuf |
Læticia rédige son curriculum vitæ | Læticia rédige son curriculum vitæ |
¼+¼=½ | ¼+¼=½ |
Le taux vaut ± 4 ‰ | Le taux vaut ± 4 ‰ |
(a+b)·(a-b)=a²+b² | (a+b)·(a-b)=a²-b² |
avion : ✈ crayon : ✎ ciseaux : ✄ fleur : ❀ | avion : ✈ crayon : ✎ ciseaux : ✄ fleur : ❀ |
Une île d'été pour août où ça va très bien doit être à même de capter Gecif ! | Une île d'été pour août où ça va très bien doit être à même de capter Gecif ! |
Voilà, vous savez désormais insérer toute sorte de caractères spéciaux dans vos pages web. Exemple d'application : utiliser des symboles graphiques trouvés dans la table des caractères unicode pour réaliser un séparateur élégant et original entre deux paragraphes de texte :
❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇ ❇
Remarque : pour utiliser les caractères unicode dans Dreamweaver, on ne se soucis pas de la police de caractères : c'est le navigateur qui, lorsqu'il affichera la page web, choisira automatiquement une police unicode adaptée. En principe les caractères sont affichés avec les polices unicode Arial Unicode MS ou MS Mincho (sauf si votre navigateur en décide autrement). La qualité et la quantité des caractères correctement affichés dépend de votre système, de votre navigateur et de la police unicode qu'il utilise.
Plus que jamais, les pages web éditée dans Dreamweaver doivent être testées et visionnées dans un véritable navigateur Internet pour voir leur rendue réel.
Réalisé par Jean-Christophe MICHEL
© Juillet 2023
.