Tutoriel HTML - sommaire

HTML4 : insérer des caractères spéciaux et symboles

Vous voulez insérer dans une page :
• un smiley (frimousse)
• un symbole mathématique
• des lettres grecques
• etc.

Sachez que c'est possible !
Il y a différentes solutions mais la plus connu est l'entité de caractère ou entité HTML.
Une entité HTML est une chaine qui commence par le caractère & et se termine par la ponctuation ;
Et entre ces deux symboles quelques lettres qui correspondent à un mot anglais ou un acroynme.

Les symboles

Regardez attentivement le tableau ci-dessous il indique pour de nombreux symboles :
• le code clavier
• le code ISO
• l'entité HTML (ou entité de caractère)
• une description du symbole

Différentes techniques pour insérer des caractères spéciaux dans une page

Soit vous tapez le code clavier, soit le code ISO soit une entité HTML (si elle existe).

Produire le code clavier

j'ai composé successivement au clavier : ALT+064 ALT+0167 ALT+0174 ALT+0188 ALT+0189 :
Et j'ai obtenu : @ § © ¼ ½

Produire les codes ISO

Comme les codes HTML, les codes ISO commencent par & (et commercial) et se terminent par ; (point virgule) mais entre les deux ce n'est pas nom d'entité mais un code ISO qui commence par un # et est suivi d'un nombre (jusqu'à 4 chiffres).

J'ai saisi les codes ISO suivants : #945 #914 #947 #915 #948 #916 #917 #950 encadrés par & et ;
Et j'ai obtenu des lettres grecques majuscules et minuscules : α Β γ Γ δ Δ Ε ζ

Les codes ISO sont très utiles pour afficher les lettres de l'alphabet phonétique international.

Dans le tableau ci-dessus quelques lettres de l'alphabet phonétique international : code ISO de 592 à 599.

Ci-dessous extrait de l'alphabet phonétique international (limité aux phonèmes en français).

Utiliser les entités HTML

Il est facile de retenir les codes correspondants avec des procédés mnémotechniques.

Liste :
• Grec : Δ Φ Ψ ω ε
• signes mathématiques : ∃ ∈ ∑ ∉ ∋ ∏
• cartes : ♠ ♣ ♥ ♦
• flèches simples ou doubles : ← ↑ ⇐ ⇑
• lettres de l'API (Alphabet Phonétique International) : ɐ ɑ ɒ ɓ ɔ ɕ y œ

Le code HTML correspondant

Retenir les entités de caractère

À la différence des codes ISO il est relativement facile de retenir les entités de caractère à condition de connaitre certaines des conventions utilisées.

Prenons l'exemple des flèches : "arr" comme arrow (flèche en anglais), "l" comme left, "u" comme up, "r" comme right et "d" comme down.
Si le a de "arr" est en majuscule on obtient une flèche double.
Pour les lettres grecques et lettres accentuées, la première lettre (après &) en majuscule affiche la lettre majuscule.
Concernant l'alphabet grec retenez : alpha, beta, gamma, delta, epsilon, zeta, ..., iota, lambda, mu, nu, omicron, pi, .... Et vous reconstituerez leur entité de caractère facilement.

Espace insécable

Le navigateur peut produire un saut de ligne indésirable entre deux mots composés ou entre la dernière lettre de la phrase et le symbole de ponctuation double (donc précédé d'un espace).
Ainsi il n'est pas souhaitable qu'un numéro de téléphone s'affiche sur deux lignes ; même remarque pour une montant monétaire. Il faut aussi éviter un saut de ligne devant les symboles de ponctuation double ( ! ; , :)?
On crée un espace insécable avec l'entité HTML   ("non breakable space").

Exemple : la somme due est 1 000 000 €
Le code HTML correspond : ... la somme due est : 1 000 000 €

Vous pouvez aussi utiliser le code ISO   OU  .
Exemple : mon téléphone est 06 51 06 51 59
Le code HTML correspondant : ... mon téléphone est 06 51 06 51 59

Liste des entités de caractère

Liste quasi exhaustive des entités de caractère
Dans ce document une entité de caractère est appelée "code texte" et un code ISO "code numérique".

Comment afficher dans une page web le code d'une instruction HTML ?

Vous voulez qu'une instruction HTML soit affichée (et non pas exécutée par le navigateur). Que faire ???

Solution : encadrez le code dans le conteneur (balise double) PRE afin que le formatage (espaces et sauts de ligne) soit pris en compte par le navigateur.
Remplacez dans l'instruction HTML les chevrons (parenthèses angulaires) par leur entité de caractère ; l'instruction n'est alors plus comprise par le navigateur.

Exemple : la syntaxe de l'élément IMG est :

	<img src ="chemin relatif de l'image" class ="nomClasse" alt ="texte alternatif" > 

Le code saisi dans la page :

Pour éviter le remplacement fastidieux des parenthèses angulaires du code HTML par leur entité de caractère, vous pouvez plus simplement insérer le code HTML dans le conteneur TEXTAREA.

Astuces

Les solutions évoquées pour insérer symboles et caractères spéciaux présentent un inconvénient : il faut connaitre les codes ou avoir sous les yeux un document qui les indique.
Tous les traitements de texte proposent une commande pour insérer les caractères spéciaux.
Ainsi sous Libre Office Writer il suffit de produire : insertion/caractères spéciaux/sélectionner le caractère / touche "Insérer".
Ensuite faites un copier-coller vers une page web ouverte en édition avec un éditeur tel NotePad.

Exemple de liste obtenue en passant par Writer :
• Grec : Δ Φ Σ
• Cyrillique : Ц Ж Э
• Hébreu : ח ל ע
• Signes divers  : ▲ ╬ ∞