Différences

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

--- web:html:media [2023/03/19 18:17] – créée jcheron
+++ web:html:media [2023/03/28 11:06] (Version actuelle) – [Image background en css] jcheron
@@ Ligne 2: / Ligne 2: @@
 ===== Images =====
+L'insertion d'image peut se faire avec la balise auto-fermante **img** :
+<sxh html;gutter:false>
+<img src="images/chaton.webp" alt="Un chaton"/>
+</sxh>
+==== Alt ====
+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]]