Exercice : Encodage des fichiers de texte et HTML

Éditeur de texte

Nous utiliserons pour cet exercice l'éditeur de texte Visual Sudio Code. Ajoutez l'extension Hex Editor.

Question

Ouvrez Visual Studio Code vérifiez dans la barre d'icone basse que l'encodage est en UTF-8.

Ajoutez un nouveau fichier texte avec le texte ci-dessous :

1
sans accent

Question

Sauvegardez le fichier : quel est sa taille en octets ?

Question

Effacez le texte précédent et saisissez le suivant :

1
avec àccent

Question

Sauvegardez le fichier : quel est sa taille en octets ? Que peut-on en déduire ?

Éditeur hexadécimal

Essayons maintenant de comprendre la différence de taille précédente. Faites un clique droit sur votre fichier et cliquez sur Ouvrir avec... sélectionnez Editeur hexadécimal. Vous voyez la représentation hexadécimale de votre fichier.

Question

Ouvrez le fichier texte. Effacez le texte précédent et saisissez la lettre v :quel est le code hexadécimal de la lettre ?

Question

Ouvrez le fichier texte. Effacez le texte précédent et saisissez la lettre è :quel est le code hexadécimal de la lettre ?

Complément : normes pour les pages web

  • L'UTF[1]-8 est une sorte d'extension du code ASCII : on y retrouve donc, dans sa première partie, les 128 premiers caractères de l'ASCII (voir par exemple ce lien) et donc codés sur 8 bits. Les caractères accentués sont codés sur 16 bits à l'aide d'un préfixe d'un octet (par exemple C3 B6 code le ö, C3 A9 code le é, etc).

  • Pour être sûr que le navigateur interprète correctement l'UTF-8, il faut, de préférence, utiliser un éditeur de textes (ou HTML) qui le permette et insérer dans l'entête de la page HTML, la commande suivante :

1
<head>
2
	<meta charset="utf-8">
3
</head>

Exemple

Grâce à ce principe de préfixe, il est possible de coder de nombreux types de caractères.

Question

Grâce à la table des codes UTF-8, déterminez celui du caractère Æ

Question

Créez un fichier html contenant le texte suivant et ouvrez-le avec Firefox :

1
<html>
2
<head>
3
	<meta charset="ASCII">
4
</head>
5
<body>
6
	Voyez vous le caractère Æ ?
7
</body>
8
</html>
9
Que constatez-vous ?
Question
Modifiez le fichier précédent pour qu'il affiche correctement le caractère Æ.