web:html:media

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
web:html:media [2023/03/20 01:45] – [Images] jcheronweb:html:media [2023/03/28 11:06] (Version actuelle) – [Image background en css] jcheron
Ligne 13: Ligne 13:
 L'attribut **alt** doit être présent pour fournir un texte alternatif à l'image. L'attribut **alt** doit être présent pour fournir un texte alternatif à l'image.
  
 +<sxh html;gutter:false>
 +<img src="images/dinosaur.jpg"
 +     alt="The head and torso of a dinosaur skeleton;
 +          it has a large head with long sharp teeth">
 +</sxh>          
 +
 +Le texte alternatif est utile :
 +  * Si l'image n'est pas chargée (introuvable ou désactivée par l'internaute),
 +  * pour le référencement,
 +  * pour faciliter la navigation des personnes mal voyantes.
 +
 +==== Title ====
 +La propriété **title** permet d'afficher une infobulle au survol de l'image par la souris.
 +
 +==== Legend et caption ====
 +
 +<html>
 +<table border=0>
 +<tr><td></html>
 + <sxh html;gutter:false>
 +<figure>
 +  <img src="images/dinosaur.jpg"
 +        alt="The head and torso of a dinosaur skeleton;
 +            it has a large head with long sharp teeth"
 +        width="400"
 +        height="341">
 +
 +  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
 +</figure>
 +</sxh>
 +<html></td><td><figure>
 +  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
 +        alt="The head and torso of a dinosaur skeleton;
 +            it has a large head with long sharp teeth"
 +        width="400"
 +        height="341">
 +
 +  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
 +</figure>
 +</td></tr></table></html>
 +==== Image background en css ====
 +voir [[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#background_images|MSDN background-image]]
 +
 +==== Responsive images ====
 +Inégrer des [[https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images|images adaptatives]]
 +
 +==== Audio et vidéo ====
 +voir [[https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content|MSDN audio and video]]
  
  
  • web/html/media.1679273127.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron