Des caractères spéciaux dans une page web

Le clavier permet d’afficher un certain nombre de signes. Il n’est pas toujours facile de retrouver des symboles courants comme celui de l’euro caché derrière le e et accessible par la combinaison Alt GR + e. Il existe plusieurs méthodes pour ajouter des caractères spéciaux.

Insertion via un éditeur de pages web

Si le caractère est accessible via le clavier rien de plus simple; tapez-le et votre logiciel d’édition web indiquera son équivalent HTML dans le code. Si ce caractère est absent du clavier, trouvez la rubrique pour l’ajouter. Pour Dreamweaver MX, affichez la fenêtre Insertion > Texte > appuyez sur la petite flèche de la dernière icône, puis sur autres caractères.

Insertion via la table des caractères Windows

Pour afficher cette table sous Windows 7: Démarrer > Tous les programmes > Accessoires > Outils système > Table des caractères.

Capture écran de la table des caractères sous Windows

Après avoir choisi le caractère, le bouton copier met le caractère en mémoire. Il ne reste plus qu’à le coller dans votre page web. Cette procédure est intéressante pour des caractères à usage exceptionnel. Pour les signes plus fréquents, l’aide au raccourci clavier (encadré en rouge sur l’illustration ci-dessus) est indispensable. À titre tout à fait personnel, je me suis fait une petite liste imprimée et collée sur mon clavier.

Tous les caractères ne sont pas disponibles via cette technique. L’insertion du signe se fait alors dans le code HTML de la page via sa position hexadécimale dans le tableau Unicode. Cette position est affichée en bas à gauche sur l’illustration ci-dessus. Dans notre exemple, il s’agit de: U+00A9.

Insertion via le code HTML

Le code HTML n’est pas très compliqué à comprendre. En allant chipoter de temps en temps vous comprendrez très vite la logique. Il existe trois techniques pour ajouter des caractères spéciaux via le code source.

  • par son entité nommée «
  • par son entité numérique décimale «
  • par son entité numérique hexadécimale «

La méthode nommée (ou nominale) reprend des mots mnémotechniques intercalés entre une esperluette (&) initiale et un point-virgule (;) final. Dans « il s’agit des premières lettres de Left Angle QUOte qui correspond au guillemet gauche.

La méthode numérique décimale reprend le numéro Unicode précédé d’une esperluette et du dièse (&#) et terminé par un point-virgule (;). Il existe plus de 65 000 caractères Unicode.

La méthode numérique hexadécimale débute par une esperluette, un dièse et un x (minuscule ou majuscule) et termine par un point-virgule (;).

Les entités ne sont pas toujours reconnues par les différents navigateurs, ou bien elles ne sont pas toujours correctement rendues (voir le tableau). D’une manière générale, il est plus prudent d’utiliser le méthode numérique que la méthode nommée.

N’oubliez pas non plus que toutes les polices de caractères ne disposent pas des milliers de caractères spéciaux. Si la police choisie ne compte pas ce caractère, le navigateur testera avec la police par défaut ainsi que les autres fontes installées par défaut. Si rien n’est trouvé alors un blanc ou un point d’interrogation apparaîtra selon le navigateur utilisé.

Le type d’encodage n’a pas d’influence
Chaque page web doit commencer par une déclaration du type de document. Elle commence par <!DOCTYPE html... et chaque webmaster précise l’encodage. Les appels d’entité de caractère fonctionnent indépendamment de l’encodage. Que votre page soit enregistrée suivant l’ISO-8859-1 ou l’UTF-8 cela n’a aucune incidence sur l’affichage des caractères. Tout dépend des polices installées sur votre machine. Pour plus d’informations à ce sujet, consultez les spécifications W3C.
Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s