Pourquoi vérifier une page web
Vérifier une page web, c'est contrôler que son HTML est correct, que ses fichiers existent et que son poids reste raisonnable. Une page qui s'affiche bien chez vous peut être cassée ailleurs.
Une page légère se charge vite, même avec une connexion lente, et une page bien structurée reste utilisable avec un lecteur d'écran.
À la fin de cette leçon
Remarque
Je peux vérifier la structure et le poids d'une page web.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Validation | contrôler que le HTML respecte les règles du langage | |
| Poids | la taille d'un fichier ou d'une page, en octets | |
| Chargement | le temps et les requêtes pour afficher la page | |
| Code de statut | le nombre par lequel le serveur répond | 200 |
| Cache | une copie gardée pour ne pas retélécharger un fichier | |
| Texte alternatif | le texte alt qui décrit une image |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Cinq fautes de HTML sont courantes
Cinq fautes sont courantes. Une image sans attribut alt : un lecteur d'écran ne peut pas la décrire. Une balise html sans lang : la langue n'est pas dite.
Un lien sans href ne mène nulle part. Un champ sans étiquette ne dit pas ce qu'il attend. Plusieurs h1, ou un saut de h1 à h3, brouille le plan.
Exemple : une page avec trois fautes
<h1>Galerie</h1>
<img src="photo.png">
<a>Voir la suite</a>
<h3>Détails</h3>
<!-- Ajoutez alt, href et corrigez le niveau du titre. -->Le poids d'une page se compte en octets
Un octet est l'unité de taille d'un fichier. Mille octets font environ un kilooctet (Ko), un million un mégaoctet (Mo). Le temps de téléchargement dépend du poids et de la vitesse de la connexion.
Une photo de 2 Mo prend donc beaucoup plus de temps qu'un fichier de style de 1 Ko. Les images pèsent presque toujours plus que le HTML, le CSS et le JavaScript réunis.
Exemple : le temps pour télécharger un fichier
| Fichier | Poids | Connexion 1 Mbit/s | Connexion 100 Mbit/s |
|---|---|---|---|
| Feuille de style | 1 000 octets | 0,008 seconde | 0,00008 seconde |
| Script | 100 000 octets | 0,8 seconde | 0,008 seconde |
| Photo | 2 000 000 octets | 16 secondes | 0,16 seconde |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Avant de lancer les Run
Remarque
Démarrez le labo et ouvrez le terminal. Les scripts du labo lisent la page d'exemple et écrivent leurs mots en anglais : bytes veut dire octets, status veut dire code de statut.
Mesurer le poids de chaque fichier
docker exec jupyter python3 steps/sizes.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Vérifier les liens de la page
docker exec jupyter python3 steps/links.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Demander la page au serveur de l'aperçu
docker exec jupyter python3 steps/serve.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que montrent les trois scripts
Le premier script donne 1373 octets pour index.html, 1125 pour style.css et 1093 pour app.js, soit 3591 octets en tout, environ 3,5 Ko. Cette page est très légère.
Le deuxième trouve cinq liens. Trois mènent à une partie de la page et la trouvent, un mène à un fichier, un mène à un autre site. Le dernier écrit status 200, le titre Lunch menu et le type text/css de la feuille.
Le statut dit si le fichier est servi
Quand un navigateur demande un fichier, le serveur répond par un code de statut. 200 veut dire que le fichier est envoyé. 404 veut dire qu'il n'existe pas, 304 qu'il n'a pas changé depuis la dernière fois.
Un 404 pour style.css donne une page sans style. Il se repère en testant les fichiers que la page demande, pas en regardant la page.
Le cache évite de retélécharger un fichier
Le navigateur garde une copie des fichiers qu'il a déjà reçus. Une règle du serveur dit combien de temps cette copie reste valable : pendant ce temps, le navigateur ne redemande rien.
Quand la copie est trop vieille, il demande au serveur si elle a changé. Le serveur répond 304 sans renvoyer le fichier, ce qui économise le poids. Un fichier modifié n'apparaît donc parfois qu'après un rechargement forcé.
Une erreur fréquente
Attention
Beaucoup pensent qu'une page est correcte parce qu'elle s'affiche. Faux : un navigateur pardonne beaucoup de fautes. Une image sans alt s'affiche très bien, mais elle est muette pour un lecteur d'écran. Vérifiez la structure, ne vous fiez pas seulement à l'œil.