HTML : structurer le Web (école d'ingénieur) · Chapitre 4 · Exercice de TD
Direction artistique
Images et médias · niveau 3 (difficile)
Énoncé
La page d'accueil affiche une bannière panoramique de 1 600 × 500 pixels. Sur téléphone, on veut une version recadrée de 800 × 800 pixels, en WebP avec repli JPEG. Écrire le <picture> correspondant. Les deux versions doivent-elles avoir le même texte alternatif ?
Corrigé
<picture>
<source media="(max-width: 600px)" type="image/webp" srcset="images/banniere-carre.webp">
<source media="(max-width: 600px)" srcset="images/banniere-carre.jpg">
<source type="image/webp" srcset="images/banniere-large.webp">
<img src="images/banniere-large.jpg" alt="La Librairie du Campus, vue de la rue"
width="1600" height="500">
</picture>Le navigateur prend la première source qui convient à la fois à l'écran et au format. Le texte alternatif est unique, porté par l'<img> : les deux cadrages montrent la même chose, ils ont le même sens.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.