Entité de caractères

Pourquoi les entités de caractère ?

Code HTML correspondant

<ul>Int&eacute;r&ecirc;t des entit&eacute;s : <li>toujours afficher correctement les caract&egrave;res sp&eacute;ciaux d'une langue quelque soit le syst&egrave;me d'encodage de la page <li>afficher certains symboles (fl&egrave;ches, symboles mon&eacute;taires, etc.) <li>forcer le navigateur &agrave; afficher une instruction HTML plut&ocirc;t que de l'interpr&eacute;ter <li>produire des espaces ins&eacute;cables </ul>

Surprenant ! Rassurez vous c'est beaucoup plus qu'il n'y parait.

Toujours afficher correctement les lettres accentuées

Exemple

Cette page est encodée avec le jeu de caractères occidental (ou ANSI) mais elle est lue avec le jeu de caractères UNICODE ou utf-8 (via l'instruction HTML : meta charset= 'utf-8') et pourtant les lettres accentuées s'affichent correctement car j'ai utilisé les entités de caractère pour représenter ces lettres accentuées.

Le code HTML

<p class ="remarque">Cette page est encod&eacute;e avec le jeu de caract&egrave;res occidental (ou ANSI) mais elle est lue avec le jeu de caract&egrave;res UNICODE ou utf-8 (via l'instruction HTML : meta charset= 'utf-8') et pourtant les lettres accentu&eacute;es s'affichent correctement car j'ai utilis&eacute; les entit&eacute;s de caract&egrave;re pour repr&eacute;senter ces lettres accentu&eacute;es.

Afficher certains symboles

Exemple : un clavier tactile

Le code HTML

<table> <tr><td></td><td>&uarr;</td><td></td></tr> <tr><td>&larr;</td><td></td><td>&rarr;</td></tr> <tr><td></td><td>&darr;</td><td></td></tr> </table>

Pour créer ce clavier tactile nous créons un tableau de 3 par 3 soient 9 cellules dont 5 vides (2 vides sur la première ligne, 1 vide sur la deuxième ligne et 2 vides sur la troisième ligne).
Grâce au CSS chaque ligne a une hauteur de 100px ; les cellules vides sont masquées (empty-cells : hide).
HTML : chaque cellule non vide contient une entité de caractère qui affiche une flèche.

Reste à associer à chaque touche de ce clavier une fonction JavaScript ...

Produire certains symboles

Exemple

Il faut mieux posséder 1000 € que 1000 $ ou 1000 ¥
Mais c'est encore mieux de posséder 1000 £ !

Code HTML correspondant

<ul>Un jeu de cartes de 32 cartes comprend : <li>8 cartes de couleur &spades; <li>8 cartes de couleur &diams; <li>8 cartes de couleur &clubs; <li>8 cartes de couleur &hearts; </ul> <p>Il faut mieux poss&eacute;der 1000 &euro; que 1000 &dollar; ou 1000 &yen; <br>Mais c'est encore mieux de poss&eacute;der 1000 &pound; ! </p>

Afficher simplement du code HTML (mais empécher son interprétation)

Exemple

La syntaxe de la balise IMG est la suivante :
< img src ="chemin relatif de l'image" alt ="texte alternatif" >

Le code HTML

<p>La syntaxe de la balise IMG est la suivante : <br><b>&lt; img src ="chemin relatif de l'image" alt ="texte alternatif" &gt; </b>

L'instruction est simplement affichée !
Il suffit donc de remplacer dans le code HTML les chevrons par leur entité de caractère !

Produire des espaces et tirets insécables

Pour éviter des sauts de ligne à l'intérieur d'un mot composé.

Exemple

Une grosse somme mal écrite :1 000 000 000 000 000 €
Une grosse somme bien écrite : 1 000 000 000 000 000 €
Un mot composé mal écrit :Saint-Germain
Un mot composé bien écrit : Saint‑Germain

Le code HTML

<div style ="width :300px ; height : 200px; background : fuchsia ;"> <p>Une grosse somme mal &eacute;crite :1 000 000 000 000 000 &euro; <br>Une grosse somme bien &eacute;crite : 1&nbsp;000&nbsp;000&nbsp;000&nbsp;000&nbsp;000&nbsp;&euro; <br>Un mot compos&eacute; mal &eacute;crit :Saint-Germain <br>Un mot compos&eacute; bien &eacute;crit : Saint&#8209;Germain </div>

Mémoriser les entités de caractère

Une entité de caractère prend la forme : & NomEntité ;
Donc une entité commence toujours par le caractère & et se termine toujours par le caractère ;

Pour le tiret insécable pas de NomEntité mais une valeur numérique (#8209).
Retour menu