diff options
Diffstat (limited to 'files/fr/learn/html/multimedia_and_embedding')
7 files changed, 930 insertions, 986 deletions
diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index e8cddd0909..be749e12b5 100644 --- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -11,170 +11,171 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web --- -<p>{{LearnSidebar}}<br> - {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> +{{LearnSidebar}} +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} -<p>Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.</p> +Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a> et comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">insérer une image dans un document HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment intégrer une image SVG dans une page web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez au préalable savoir comment + <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML" + >créer un document HTML simple</a + > + et comment + <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web" + >insérer une image dans un document HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment intégrer une image SVG dans une page web.</td> + </tr> + </tbody> </table> -<h2 id="Qu'est-ce_que_SVG_Qu'apporte-t-il">Qu'est-ce que SVG ? Qu'apporte-t-il ?</h2> +## Qu'est-ce que SVG ? Qu'apporte-t-il ? -<p><a href="/fr/docs/Web/SVG">SVG</a> est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.</p> +[SVG](/fr/docs/Web/SVG) est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle. -<p>Certaines images (appelées images « <em>matricielles</em> ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.</p> +Certaines images (appelées images « _matricielles_ ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé. -<p>Au contraire, <strong>les images vectorielles</strong> décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant <code>srcset</code> et <code>sizes</code>.</p> +Au contraire, **les images vectorielles** décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant `srcset` et `sizes`. -<p>De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.</p> +De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}. -<p>Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme <a href="https://inkscape.org">Inkscape</a>. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.</p> +Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme [Inkscape](https://inkscape.org). Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances. -<div class="note"> -<p><strong>Note :</strong> Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web</a>.</p> -</div> +> **Note :** Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire [cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html). -<h2 id="La_méthode_rapide_htmlelement(img)">La méthode rapide : {{htmlelement("img")}}</h2> +## La méthode rapide : {{htmlelement("img")}} -<p>Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut <code>height</code> ou <code>width</code> (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">lire ce tutoriel sur <code><img></code></a>.</p> +Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut `height` ou `width` (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez [lire ce tutoriel sur `<img>`](/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web). -<pre class="brush: html"><img +```html +<img src="equilateral.svg" alt="un triangle aux trois côtés égaux" height="87px" - width="100px" /></pre> + width="100px" /> +``` -<h3 id="Avantages">Avantages</h3> +### Avantages -<ul> - <li>Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible.</li> - <li>Il est également possible de créer des hyperliens en plaçant l'élément <code><img></code> dans un élément {{htmlelement("a")}}.</li> -</ul> +- Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible. +- Il est également possible de créer des hyperliens en plaçant l'élément `<img>` dans un élément {{htmlelement("a")}}. -<h3 id="Inconvénients">Inconvénients</h3> +### Inconvénients -<ul> - <li>Pour les navigateurs historiques qui existaient avant la démocratisation de SVG (Internet Explorer 8, Android 2.3 et autres), on pourra utiliser une image PNG ou JPG dans l'attribut <code>src</code> en combinaison avec l'attribut {{htmlattrxref("srcset","img")}} : +- Pour les navigateurs historiques qui existaient avant la démocratisation de SVG (Internet Explorer 8, Android 2.3 et autres), on pourra utiliser une image PNG ou JPG dans l'attribut `src` en combinaison avec l'attribut {{htmlattrxref("srcset","img")}} : - <pre class="brush: html"><img src="equilateral.png" alt="un triangle dont tous les côtés sont égaux" srcset="equilateral.svg"/> -</pre> - </li> - <li>Il est impossible de manipuler l'image avec JavaScript.</li> - <li>Si vous souhaitez contrôler le contenu du SVG avec du code CSS, vous devez inclure les styles CSS dans le code SVG (les feuilles de style externes appelées depuis le SVG n'auront aucun effet).</li> - <li>Il n'est pas possible de remettre l'image en forme avec les pseudo-classes CSS (par exemple <code>:focus</code>).</li> -</ul> + ```html + <img src="equilateral.png" alt="un triangle dont tous les côtés sont égaux" srcset="equilateral.svg"/> + ``` -<div class="note"> - <p><strong>Note :</strong></p> -<ul> - <li>Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via <code><img></code>). +- Il est impossible de manipuler l'image avec JavaScript. +- Si vous souhaitez contrôler le contenu du SVG avec du code CSS, vous devez inclure les styles CSS dans le code SVG (les feuilles de style externes appelées depuis le SVG n'auront aucun effet). +- Il n'est pas possible de remettre l'image en forme avec les pseudo-classes CSS (par exemple `:focus`). - <pre class="brush: css">background: url("image-de-secours.png"); -background-image: url(image.svg); -background-size: contain;</pre> - </li> - <li>Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, <a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas#Un_mot_sur_les_serveurs_Web">cet article pourra vous aider à résoudre le problème</a>.</li> -</ul> -</div> +> **Note :** +> +> - Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via `<img>`). +> +> ```css +> background: url("image-de-secours.png"); +> background-image: url(image.svg); +> background-size: contain; +> ``` +> +> - Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, [cet article pourra vous aider à résoudre le problème](/fr/docs/Web/SVG/Tutoriel/Premiers_pas#Un_mot_sur_les_serveurs_Web). -<h2 id="Comment_inclure_une_image_SVG_directement_dans_le_code_du_document">Comment inclure une image SVG directement dans le code du document</h2> +## Comment inclure une image SVG directement dans le code du document -<p>Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <code><a href="/fr/docs/Web/SVG/Element/svg"><svg></a></code>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :</p> +Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise [`<svg>`](/fr/docs/Web/SVG/Element/svg). Voici un exemple très simple que vous pouvez directement copier-coller dans votre document : -<pre class="brush: html"><svg width="300" height="200"> - <rect width="100%" height="100%" fill="green" /> -</svg> -</pre> +```html +<svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +``` -<p>La balise <code><svg></code> n'a pas besoin des attributs <code>version</code>, <code>baseProfile</code> ou <code>xmlns</code>. Assurez-vous de bien retirer les déclarations d'espaces de noms (<em>namespace</em>) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser <a href="http://petercollingridge.appspot.com/svg_optimiser">SVG Optimiser</a> ou <a href="http://www.codedread.com/scour/">Scour</a>.</p> +La balise `<svg>` n'a pas besoin des attributs `version`, `baseProfile` ou `xmlns`. Assurez-vous de bien retirer les déclarations d'espaces de noms (_namespace_) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser [SVG Optimiser](http://petercollingridge.appspot.com/svg_optimiser) ou [Scour](http://www.codedread.com/scour/). -<h3 id="Avantages_2">Avantages</h3> +### Avantages -<ul> - <li>Placer le SVG à même le document permet d'économiser une requête HTTP, ce qui peut permettre de réduire le temps de chargement de la page.</li> - <li>Vous pouvez ajouter des attributs <code>class</code> et <code>id</code> aux éléments SVG pour les mettre en forme grâce à CSS (directement au sein du SVG ou dans les règles liées au document HTML). En fait, <a href="/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation">chaque attribut de présentation SVG</a> peut être utilisé comme propriété CSS.</li> - <li>Cette approche est la seule qui permet d'utiliser des interactions CSS (telles que <code>:focus</code>) et des animations CSS. Il faut toutefois noter que les <a href="http://css-tricks.com/guide-svg-animations-smil/">animation SMIL</a> fonctionneront avec toutes les méthodes décrites dans cet article.</li> - <li>Avec cette méthode, les images SVG peuvent être utilisées comme hyperlien.</li> -</ul> +- Placer le SVG à même le document permet d'économiser une requête HTTP, ce qui peut permettre de réduire le temps de chargement de la page. +- Vous pouvez ajouter des attributs `class` et `id` aux éléments SVG pour les mettre en forme grâce à CSS (directement au sein du SVG ou dans les règles liées au document HTML). En fait, [chaque attribut de présentation SVG](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation) peut être utilisé comme propriété CSS. +- Cette approche est la seule qui permet d'utiliser des interactions CSS (telles que `:focus`) et des animations CSS. Il faut toutefois noter que les [animation SMIL](http://css-tricks.com/guide-svg-animations-smil/) fonctionneront avec toutes les méthodes décrites dans cet article. +- Avec cette méthode, les images SVG peuvent être utilisées comme hyperlien. -<h3 id="Inconvénients_2">Inconvénients</h3> +### Inconvénients -<ul> - <li>Cette méthode n'est utilisable que si le SVG n'est utilisé qu'à un seul endroit. S'il faut le dupliquer, cela compliquera la maintenance et gaspillera de la mémoire.</li> - <li>Chaque image SVG augmente la taille du fichier HTML.</li> - <li>Le navigateur ne peut pas placer ces images SVG en cache comme il pourrait le faire avec d'autres ressources.</li> - <li>Vous pouvez inclure un contenu à utiliser au cas où le navigateur ne supporte pas le SVG, grâce à {{svgelement("foreignObject")}}. Toutefois, les navigateurs qui supportent SVG téléchargeront quand même les ressources supplémentaires. Il faut donc décider si cette charge supplémentaire est nécessaire pour gérer les anciens navigateurs.</li> -</ul> +- Cette méthode n'est utilisable que si le SVG n'est utilisé qu'à un seul endroit. S'il faut le dupliquer, cela compliquera la maintenance et gaspillera de la mémoire. +- Chaque image SVG augmente la taille du fichier HTML. +- Le navigateur ne peut pas placer ces images SVG en cache comme il pourrait le faire avec d'autres ressources. +- Vous pouvez inclure un contenu à utiliser au cas où le navigateur ne supporte pas le SVG, grâce à {{svgelement("foreignObject")}}. Toutefois, les navigateurs qui supportent SVG téléchargeront quand même les ressources supplémentaires. Il faut donc décider si cette charge supplémentaire est nécessaire pour gérer les anciens navigateurs. -<ul> -</ul> +<!----> -<h2 id="Comment_intégrer_un_SVG_dans_un_élément_htmlelement(object)">Comment intégrer un SVG dans un élément {{htmlelement("object")}}</h2> +## Comment intégrer un SVG dans un élément {{htmlelement("object")}} -<p>Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :</p> +Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté : -<pre class="brush: html"><object data="parallelogramme.svg" +```html +<object data="parallelogramme.svg" width="300" height="250" - type="image/svg+xml"> + type="image/svg+xml"> -<img src="parallelogramme.png" - alt="un quadrilatère dont les côtés sont parallèles deux à deux" /> +<img src="parallelogramme.png" + alt="un quadrilatère dont les côtés sont parallèles deux à deux" /> -</object> +</object> +``` -</pre> +### Inconvénients -<h3 id="Inconvénients_3">Inconvénients</h3> +- Là aussi, les navigateurs qui supportent SVG téléchargeront également les ressources alternatives comme les images. +- Les éléments `<object>` ne peuvent pas être transformés en liens. Le SVG sera affiché mais ne sera pas déclenchable. +- Les éléments SVG peuvent être mis en forme avec CSS mais -<ul> - <li>Là aussi, les navigateurs qui supportent SVG téléchargeront également les ressources alternatives comme les images.</li> - <li>Les éléments <code><object></code> ne peuvent pas être transformés en liens. Le SVG sera affiché mais ne sera pas déclenchable.</li> - <li>Les éléments SVG peuvent être mis en forme avec CSS mais - <ul> - <li>le code SVG doit contenir les règles CSS (par exemple dans un élément <code><style></code>) ou</li> - <li>le fichier SVG doit contenir un lien vers la feuille de style externe. Pour créer ce lien, vous pouvez utiliser ce code, à placer dans le code SVG avant les autres balises : - <pre class="brush: xml"><?xml-stylesheet type="text/css" href="svg.css" ?></pre> - (Attention à ne pas utiliser ce code avec du SVG intégré directement dans le HTML car cela pourrait rendre la page non-fonctionnelle)</li> - </ul> - </li> -</ul> + - le code SVG doit contenir les règles CSS (par exemple dans un élément `<style>`) ou + - le fichier SVG doit contenir un lien vers la feuille de style externe. Pour créer ce lien, vous pouvez utiliser ce code, à placer dans le code SVG avant les autres balises : -<h2 id="Comment_intégrer_un_SVG_avec_un_élément_htmlelement(iframe)">Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}</h2> + ```xml + <?xml-stylesheet type="text/css" href="svg.css" ?> + ``` -<p>Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <code><iframe></code> n'est donc qu'une variation de <a href="/fr/Apprendre/HTML/Howto/Embed_a_webpage_within_another_webpage">l'intégration d'une page web dans une autre page web</a>.</p> + (Attention à ne pas utiliser ce code avec du SVG intégré directement dans le HTML car cela pourrait rendre la page non-fonctionnelle) -<p>Voici un rapide exemple :</p> +## Comment intégrer un SVG avec un élément {{htmlelement("iframe")}} -<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> - <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" /> -</iframe></pre> +Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément `<iframe>` n'est donc qu'une variation de [l'intégration d'une page web dans une autre page web](/fr/Apprendre/HTML/Howto/Embed_a_webpage_within_another_webpage). -<p><code>iframe</code> permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les <code>iframe</code>.</p> +Voici un rapide exemple : -<p>De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.</p> +```html +<iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" /> +</iframe> +``` -<h2 id="En_savoir_plus">En savoir plus</h2> +`iframe` permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les `iframe`. -<ul> - <li>{{htmlelement("iframe")}}</li> - <li>{{htmlelement("object")}}</li> - <li>{{htmlelement("img")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas">Le tutoriel SVG</a> sur MDN</li> - <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Conseils rapides pour des SVG adaptatifs (en anglais)</a></li> - <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Le tutoriel de Sara Soueidan sur les images SVG adaptatives (en anglais)</a></li> - <li><a href="http://www.w3.org/TR/SVG-access/">Les bénéfices du format SVG pour l'accessibilité (en anglais)</a></li> - <li><a href="https://css-tricks.com/scale-svg/">Comment redimensionner des fichiers SVG (en anglais)</a> (ce n'est pas aussi simple qu'avec les images matricielles)</li> - <li><a href="http://www.w3.org/TR/SVG/">La spécification SVG</a></li> -</ul> +De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web. + +## En savoir plus + +- {{htmlelement("iframe")}} +- {{htmlelement("object")}} +- {{htmlelement("img")}} +- [Le tutoriel SVG](/fr/docs/Web/SVG/Tutoriel/Premiers_pas) sur MDN +- [Conseils rapides pour des SVG adaptatifs (en anglais)](http://thenewcode.com/744/Making-SVG-Responsive) +- [Le tutoriel de Sara Soueidan sur les images SVG adaptatives (en anglais)](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) +- [Les bénéfices du format SVG pour l'accessibilité (en anglais)](http://www.w3.org/TR/SVG-access/) +- [Comment redimensionner des fichiers SVG (en anglais)](https://css-tricks.com/scale-svg/) (ce n'est pas aussi simple qu'avec les images matricielles) +- [La spécification SVG](http://www.w3.org/TR/SVG/) diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md index abda8ddf31..ba3fee679a 100644 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -15,187 +15,196 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p>Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .</p> +Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} . <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions élémentaires en informatique, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, fondamentaux du HTML (comme décrit dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le Web).</a></td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions élémentaires en informatique, + <a + href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >installation des outils de base</a + >, bases de la + <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >manipulation des fichiers</a + >, fondamentaux du HTML (comme décrit dans <a + href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le Web).</a + > + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre à intégrer des images simples en HTML, à les légender d'un + intitulé, et à mettre en relation ces images HTML avec les images + d'arrière-plan du CSS. + </td> + </tr> + </tbody> </table> -<h2 id="Comment_intégrer_une_image_à_une_page_web">Comment intégrer une image à une page web ?</h2> +## Comment intégrer une image à une page web ? -<p>Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}. C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — <code>src</code> (souvent appelé par son nom entier: <em>source</em>). L'attribut <code>src</code> contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément {{htmlelement("a")}} <code>href=</code> attribue des valeurs.</p> +Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}. C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — `src` (souvent appelé par son nom entier: *source*). L'attribut `src` contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément {{htmlelement("a")}} `href=` attribue des valeurs. -<div class="note"> -<p><strong>Note :</strong> Vous devriez lire <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url">Une brève présentation des URL et des chemins</a> pour vous rafraîchir la mémoire avant de continuer.</p> -</div> +> **Note :** Vous devriez lire [Une brève présentation des URL et des chemins](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url) pour vous rafraîchir la mémoire avant de continuer. -<p>Donc, par exemple, si votre image s'appelle <code>dinosaur.jpg</code>, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :</p> +Donc, par exemple, si votre image s'appelle `dinosaur.jpg`, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) : -<pre class="brush: html"><img src="dinosaur.jpg"></pre> +```html +<img src="dinosaur.jpg"> +``` -<p>Et si cette image se trouve dans un sous-répertoire <code>images</code> situé dans le même dossier que la page HTML (ce que Google recommande pour {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :</p> +Et si cette image se trouve dans un sous-répertoire `images` situé dans le même dossier que la page HTML (ce que Google recommande pour {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci : -<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> +```html +<img src="images/dinosaur.jpg"> +``` -<p>Ainsi de suite.</p> +Ainsi de suite. -<div class="note"> -<p><strong>Note :</strong> Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. <code>dinosaur.jpg</code> est infiniment mieux que <code>img835.png</code>.</p> -</div> +> **Note :** Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. `dinosaur.jpg` est infiniment mieux que `img835.png`. -<p>Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :</p> +Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple : -<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> +```html +<img src="https://www.example.com/images/dinosaur.jpg"> +``` -<p>Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.</p> +Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML. -<div class="warning"> -<p><strong>Attention :</strong> La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :<br> - <br> - 1) Ce soit votre image (vous en êtes le créateur),<br> - 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,<br> - 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.<br> - <br> - Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...</p> -</div> +> **Attention :** La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que : +> +> 1\) Ce soit votre image (vous en êtes le créateur), +> 2\) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou, +> 3\) que vous ayez une preuve indiscutable que cette image appartient au domaine public. +> +> Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut `src` vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante... -<p>Le code au-dessus vous donnera, à peu prés, le résultat suivant :</p> +Le code au-dessus vous donnera, à peu prés, le résultat suivant : -<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="basic-image.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.</p> -</div> +> **Note :** Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même. -<div class="note"> -<p><strong>Note :</strong> Vous trouverez les exemples finis de cette section sur <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> (regardez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">code source </a>.)</p> -</div> +> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source ](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) -<h3 id="Texte_alternatif">Texte alternatif</h3> +### Texte alternatif -<p>Le prochain attribut que nous allons étudier est <code>alt</code>. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :</p> +Le prochain attribut que nous allons étudier est `alt`. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière : -<pre class="brush: html"><img src="images/dinosaur.jpg" +```html +<img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth"></pre> + it has a large head with long sharp teeth"> +``` -<p>La manière la plus simple de tester votre texte <code>alt</code> est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée <code>dinosooooor.jpg</code>, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :</p> +La manière la plus simple de tester votre texte `alt` est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée `dinosooooor.jpg`, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place : -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="alt-text.png"></p> + -<p>Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :</p> +Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions : -<ul> - <li>L'utilisateur est un déficient visuel qui utilise un <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteur d'écran</a> qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs.</li> - <li>Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier.</li> - <li>Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme <a href="https://fr.wikipedia.org/wiki/Lynx_(navigateur)">Lynx)</a>, qui affichent le texte alt des images.</li> - <li>Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche.</li> - <li>L'utilisateur a supprimé les images pour économiser le volume du transfert de données ou pour ne pas être distrait. C'est très commun sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûte cher.</li> -</ul> +- L'utilisateur est un déficient visuel qui utilise un [lecteur d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran) qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs. +- Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier. +- Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme [Lynx)](<https://fr.wikipedia.org/wiki/Lynx_(navigateur)>), qui affichent le texte alt des images. +- Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche. +- L'utilisateur a supprimé les images pour économiser le volume du transfert de données ou pour ne pas être distrait. C'est très commun sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûte cher. -<p>Que devriez-vous noter dans vos attributs <code>alt</code> ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :</p> +Que devriez-vous noter dans vos attributs `alt` ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas : -<ul> - <li><strong>Decoration. </strong>Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un <code>alt=""</code> vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.</li> - <li><strong>Contenu. </strong>Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un <em>bref</em> <em> </em><code>alt</code> text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de <code>alt</code> text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement <code>alt=""</code>.</li> - <li><strong>Lien.</strong> Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien">Lien texte accessible </a>. Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <code><a></code>, soit dans l'attribut <code>alt</code> de l'image – utilisez ce qui marche le mieux dans votre cas.</li> - <li><strong>Texte.</strong> Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, <a href="/fr/docs/Web/CSS/text-shadow">utilisez CSS</a> pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut <code>alt</code> .</li> -</ul> +- **Decoration.** Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un `alt=""` vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire. +- **Contenu.** Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un *bref* \* \*`alt` text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de `alt` text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement `alt=""`. +- **Lien.** Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un [Lien texte accessible ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas. +- **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, [utilisez CSS](/fr/docs/Web/CSS/text-shadow) pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut `alt` . -<p>Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.</p> +Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile. -<div class="note"> -<p><strong>Note :</strong> Pour plus d'informations, voyez notre guide <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Textes Alternatifs</a></p> -</div> +> **Note :** Pour plus d'informations, voyez notre guide [Textes Alternatifs](/fr/docs/Learn/Accessibility/HTML#Text_alternatives) -<h3 id="Largeur_et_hauteur_width-height">Largeur et hauteur (width-height)</h3> +### Largeur et hauteur (width-height) -<p>Vous pouvez vous servir des attributs <code>width</code> et <code>height</code> pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :</p> +Vous pouvez vous servir des attributs `width` et `height` pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci : -<pre class="brush: html"><img src="images/dinosaur.jpg" +```html +<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"></pre> + height="341"> +``` -<p>Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :</p> +Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse : -<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="alt-text-with-width-height.png"></p> + -<p>C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.</p> +C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur. -<p>De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur. Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon <a href="https://fr.wikipedia.org/wiki/Format_d%27image">Format d'image</a>. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.</p> +De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur. Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon [Format d'image](https://fr.wikipedia.org/wiki/Format_d%27image). Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web. -<div class="note"> -<p><strong>Note :</strong> Si vous devez absolument modifier une taille d' image, vous devriez vous servir de <a href="/fr/Apprendre/CSS">CSS</a> .</p> -</div> +> **Note :** Si vous devez absolument modifier une taille d' image, vous devriez vous servir de [CSS](/fr/Apprendre/CSS) . -<h3 id="Titre_dimages">Titre d'images</h3> +### Titre d'images -<p>Comme décrit dans le chapitre <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens </a>, vous pouvez aussi ajouter un attribut <code>title</code> aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :</p> +Comme décrit dans le chapitre [Création d'hyperliens ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci : -<pre class="brush: html"><img src="images/dinosaur.jpg" +```html +<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" - title="A T-Rex on display in the Manchester University Museum"></pre> + title="A T-Rex on display in the Manchester University Museum"> +``` -<p>Cela donne une info-bulle avec le texte entré dans l'attribut <code>title</code> :</p> +Cela donne une info-bulle avec le texte entré dans l'attribut `title` : -<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="image-with-title.png"></p> + -<p>Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.</p> +Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes. -<h3 id="Pédagogie_active_incorporer_une_image">Pédagogie active : incorporer une image</h3> +### Pédagogie active : incorporer une image -<p>À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :</p> +À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante : -<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> +https\://raw\.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg -<p>Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.</p> +Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois. -<p>Nous avons encore quelques petites choses pour vous :</p> +Nous avons encore quelques petites choses pour vous : -<ul> - <li>Ajoutez du texte <code>alt</code> , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image.</li> - <li>Réglez l'image à une bonne taille : <code>width</code> et <code>height</code> ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets.</li> - <li>Mettez un <code>title</code> sur l'image.</li> -</ul> +- Ajoutez du texte `alt` , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image. +- Réglez l'image à une bonne taille : `width` et `height` ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets. +- Mettez un `title` sur l'image. -<p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton <em>Reset</em> . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p> +Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : -<pre class="brush: html hidden"><h2>Live output</h2> +```html hidden +<h2>Live output</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%"> -<img> -</textarea> +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +<img> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -213,9 +222,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -245,7 +256,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; +var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -291,86 +302,82 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> - -<p>{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> - +}; +``` +{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Légender_des_images_avec_figure_et_figcaption">Légender des images avec <code>figure</code> et <code>figcaption</code></h2> +## Légender des images avec `figure` et `figcaption` -<p>En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :</p> +En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci : -<pre class="brush: html"><div class="figure"> - <img src="images/dinosaur.jpg" +```html +<div class="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"> - - <p>A T-Rex on display in the Manchester University Museum.</p> -</div></pre> + height="341"> -<p>C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS. Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?</p> + <p>A T-Rex on display in the Manchester University Museum.</p> +</div> +``` -<p>Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :</p> +C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS. Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ? -<pre><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"> +Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci : - <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> -</figure></pre> + <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"> -<p>L'élément {{htmlelement("figcaption")}} dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.</p> + <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> + </figure> -<div class="note"> -<p><strong>Note :</strong> D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte <code>alt</code> devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.</p> -</div> - -<p>Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :</p> +L'élément {{htmlelement("figcaption")}} dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}. -<ul> - <li>exprime votre désir d'accessibilité et de compréhension facilitée.</li> - <li>peut se placer en plusieurs endroits dans une page à flot linéaire.</li> - <li>Fournit une information essentielle qui supporte le texte principal.</li> -</ul> +> **Note :** D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte `alt` devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble. -<p>Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.</p> +Un objet \<figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui : -<h3 id="Pédagogie_active_créer_un_objet_figure">Pédagogie active : créer un objet figure</h3> +- exprime votre désir d'accessibilité et de compréhension facilitée. +- peut se placer en plusieurs endroits dans une page à flot linéaire. +- Fournit une information essentielle qui supporte le texte principal. -<p>Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :</p> +Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses. -<ul> - <li>Encapsulez-le dans un élément {{htmlelement("figure")}} .</li> - <li>Copiez le texte de l'attribut, enlevez l'attribut <code>title</code> et mettez le texte dans un élément {{htmlelement("figcaption")}} sous l'image.</li> -</ul> +### Pédagogie active : créer un objet figure -<p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton <em>Reset</em> . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p> +Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci : -<pre class="brush: html hidden"><h2>Live output</h2> +- Encapsulez-le dans un élément {{htmlelement("figure")}} . +- Copiez le texte de l'attribut, enlevez l'attribut `title` et mettez le texte dans un élément {{htmlelement("figcaption")}} sous l'image. -<div class="output" style="min-height: 50px;"> -</div> +Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +```html hidden +<h2>Live output</h2> -<textarea id="code" class="input" style="min-height: 100px; width: 95%"> -</textarea> +<div class="output" style="min-height: 50px;"> +</div> -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +</textarea> +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -388,11 +395,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> - - +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -422,7 +429,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171" />\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; +var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171" />\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -468,37 +475,36 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Images_darrière-plan_CSS">Images d'arrière-plan CSS</h2> +## Images d'arrière-plan CSS -<p>Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et <code>background</code> , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :</p> +Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et `background` , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci : -<pre class="brush: css">p { +```css +p { background-image: url("images/dinosaur.jpg"); -}</pre> +} +``` -<p>Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !</p> +Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur ! -<p>En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.</p> +En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS. -<div class="note"> -<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> dans notre topic <a href="/fr/Apprendre/CSS">CSS</a> .</p> -</div> +> **Note :** Vous en apprendrez beaucoup plus sur les [CSS background images](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) dans notre topic [CSS](/fr/Apprendre/CSS) . -<p>C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.</p> +C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web. -<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> +{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}} -<h2 id="Dans_ce_module">Dans ce module :</h2> +## Dans ce module : -<ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> -</ul> +- [Images in HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Video and audio content](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [From \<object> to \<iframe> — other embedding technologies](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Adding vector graphics to the Web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) +- [Responsive images](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) +- [Mozilla splash page](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md index 445c2724fe..f48a40fb08 100644 --- a/files/fr/learn/html/multimedia_and_embedding/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/index.md @@ -20,53 +20,41 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding original_slug: Apprendre/HTML/Multimedia_and_embedding --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<p>Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte. Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. </p> +Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte. Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">introduction au HTML</a>. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.</p> +Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : [introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML). Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer. -<div class="note"> -<p><strong>Note :</strong> Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> +> **Note :** Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.</p> +Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web. -<dl> - <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></strong></dt> - <dd>Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè aux images d'arrière-plan de CSS.</dd> - <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Vidéo et contenu audio</a></strong></dt> - <dd>Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></dt> - <dd>À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <code><iframe></code> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web">Ajouter des images vectorielles sur le Web </a></dt> - <dd>Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.</dd> - <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">Images adaptatives</a></dt> - <dd> - <p>Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du <a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">responsive design</a>, un futur sujet CSS que vous pourrez apprendre.</p> - </dd> -</dl> +- **[Images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML)** + - : Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè aux images d'arrière-plan de CSS. +- **[Vidéo et contenu audio](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video)** + - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens. +- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies) + - : À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. `<iframe>` est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière. +- [Ajouter des images vectorielles sur le Web ](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web) + - : Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web. +- [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) + - : Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du [responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design), un futur sujet CSS que vous pourrez apprendre. -<h2 id="Évaluations">Évaluations</h2> +## Évaluations -<p>Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.</p> +Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus. -<dl> - <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></dt> - <dd>Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !</dd> -</dl> +- [Évaluation : page d'accueil Mozilla](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page) + - : Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla ! -<h2 id="À_voir_aussi">À voir aussi</h2> +## À voir aussi -<dl> - <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Intégrer une carte interactive en haut d'une image</a></dt> - <dd>Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.</dd> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web Principes fondamentaux 2</a></dt> - <dd> - <p>Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module : <em>Multimedia et intégration</em>. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). </p> - </dd> -</dl> +- [Intégrer une carte interactive en haut d'une image](/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image) + - : Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité. +- [Web Principes fondamentaux 2](https://teach.mozilla.org/activities/web-lit-basics-two/) + - : Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module : *Multimedia et intégration*. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 37cd4e8230..03ce70e743 100644 --- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -4,108 +4,104 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p>Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !</p> +Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla ! <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module <a href="/fr/Apprendre/HTML/Multimedia_and_embedding">Multimedia et Intégration</a>.</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé + sur les paragraphes précédents composant le module + <a href="/fr/Apprendre/HTML/Multimedia_and_embedding" + >Multimedia et Intégration</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Tester vos connaissances sur l'intégration d'images et vidéos dans des + pages web ainsi que des techniques d'images adaptatives (images + "responsive"). + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<p>Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> sur github. Mettez le contenu du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> dans un fichier appelé <code>index.html</code> sur votre disque dur local, dans un nouveau répertoire. Puis copiez <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> dans le même dossier (clic droit sur l'image pour le menu des options).</p> +Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire [mdn-splash-page-start](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/) sur github. Mettez le contenu du fichier [index.html](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html) dans un fichier appelé `index.html` sur votre disque dur local, dans un nouveau répertoire. Puis copiez [pattern.png](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) dans le même dossier (clic droit sur l'image pour le menu des options). -<p>Allez dans le répertoire <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.</p> +Allez dans le répertoire [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser. -<div class="note"> -<p><strong>Note :</strong> le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.</p> -</div> +> **Note :** le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent. -<h2 id="Énoncé_du_projet">Énoncé du projet</h2> +## Énoncé du projet -<p>Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :</p> +Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire : -<h3 id="Préparer_les_images">Préparer les images</h3> +### Préparer les images -<p>Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :</p> +Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de : -<ul> - <li><code>firefox_logo-only_RGB.png</code></li> - <li><code>firefox-addons.jpg</code></li> - <li><code>mozilla-dinosaur-head.png</code></li> -</ul> +- `firefox_logo-only_RGB.png` +- `firefox-addons.jpg` +- `mozilla-dinosaur-head.png` -<p>Donnez-leur des noms similaires comme : <code>firefoxlogo400.png</code> et <code>firefoxlogo120.png</code>.</p> +Donnez-leur des noms similaires comme : `firefoxlogo400.png` et `firefoxlogo120.png`. -<p>Continuons avec <code>mdn.svg</code>, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace<code>further-info</code>. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p> +Continuons avec `mdn.svg`, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace`further-info`. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'`index.html`. -<p>Puis, créez une version paysage de 1200px de large de <code>red-panda.jpg</code>, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p> +Puis, créez une version paysage de 1200px de large de `red-panda.jpg`, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'`index.html`. -<div class="note"> -<p><strong>Note :</strong> Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. <a href="https://tinypng.com/">tinypng.com</a> est une bonne aide pour faire ça aisément.</p> -</div> +> **Note :** Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. [tinypng.com](https://tinypng.com/) est une bonne aide pour faire ça aisément. -<h3 id="Ajouter_un_logo_à_l'en-tête">Ajouter un logo à l'en-tête</h3> +### Ajouter un logo à l'en-tête -<p>A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.</p> +A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête. -<h3 id="Ajouter_une_vidéo_dans_le_contenu_principal_de_l'article">Ajouter une vidéo dans le contenu principal de l'article</h3> +### Ajouter une vidéo dans le contenu principal de l'article -<p>Dans l'élément {{htmlelement("article")}} (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.</p> +Dans l'élément {{htmlelement("article")}} (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <https://www.youtube.com/watch?v=ojcNcvb1olg>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large. -<h3 id="Ajouter_des_images_adaptatives_aux_liens_vers_les_ressources_externes">Ajouter des images adaptatives aux liens vers les ressources externes</h3> +### Ajouter des images adaptatives aux liens vers les ressources externes -<p>Dans l'élément {{htmlelement("div")}} de la catégorie <code>further-info</code> vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.</p> +Dans l'élément {{htmlelement("div")}} de la catégorie `further-info` vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats. -<p>Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.</p> +Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas. -<p>Assurez-vous de faire correspondre les bonnes images avec les liens corrects !</p> +Assurez-vous de faire correspondre les bonnes images avec les liens corrects ! -<div class="note"> -<p><strong>Note :</strong> Pour tester correctement les exemples <code>srcset</code>/<code>sizes</code>, vous devez charger votre site sur un serveur (utiliser <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans <a href="/fr/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> -</div> +> **Note :** Pour tester correctement les exemples `srcset`/`sizes`, vous devez charger votre site sur un serveur (utiliser [Github pages](/fr/docs/Learn/Common_questions/Using_Github_pages) est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans [Responsive images: useful developer tools](/fr/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools). -<h3 id="Un_panda_rouge_créatif">Un panda rouge créatif</h3> +### Un panda rouge créatif -<p>Dans l'élément {{htmlelement("div")}} de la catégorie r<code>ed-panda</code>, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.</p> +Dans l'élément {{htmlelement("div")}} de la catégorie r`ed-panda`, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.</p> +La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit. -<p><img alt="A wide shot of our example splash page" src="wide-shot.png"></p> + -<p><img alt="A narrow shot of our example splash page" src="narrow-shot.png"></p> + -<h2 id="Évaluation">Évaluation</h2> +## Évaluation -<p>Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">fil de discussion concernant cet exercice</a>, ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !</p> +Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le [fil de discussion concernant cet exercice](https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — On ne gagne rien en trichant ! -<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> +{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module :</h2> -<ul> - <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> - <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des objets aux "iframes" - autres techniques d'intégration</a></li> - <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page web</a></li> - <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Images adaptatives</a></li> - <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></li> -</ul> +## Dans ce module : -<p> </p> +- [Les images en HTML](/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenu audio et video](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video) +- [Des objets aux "iframes" - autres techniques d'intégration](/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajouter des images vectorielles à une page web](/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web) +- [Images adaptatives](/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web) +- [Évaluation : page d'accueil Mozilla](/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index c840ee2f9e..f8fd114421 100644 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -17,79 +17,94 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p>Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les <code><iframe></code> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.</p> +Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les `<iframe>` servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et articles précédents de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash, dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Compétences informatiques de base, + <a + href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >installation des outils de base</a + >, bases de la + <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >manipulation des fichiers</a + >, connaissance des fondamentaux du HTML (comme expliqué dans + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML)</a + > + et articles précédents de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre comment incorporer des éléments, tels que d'autres pages ou + des clips Flash, dans des pages Web à l'aide de + {{htmlelement("object")}}, {{htmlelement("embed")}}, et + {{htmlelement("iframe")}}. + </td> + </tr> + </tbody> </table> -<h2 id="Une_courte_histoire_de_l'intégration">Une courte histoire de l'intégration</h2> +## Une courte histoire de l'intégration + +Il y a longtemps, sur le Web, il était courant d'utiliser des **cadres** pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé **frameset** (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée. -<p>Il y a longtemps, sur le Web, il était courant d'utiliser des <strong>cadres</strong> pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé <strong>frameset</strong> (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.</p> -<p> </p> -<p>Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les <a href="/fr/docs/Glossary/Java">applets Java</a> et <a href="/fr/docs/Glossary/Adobe_Flash">Flash</a> — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.</p> +Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les [applets Java](/fr/docs/Glossary/Java) et [Flash](/fr/docs/Glossary/Adobe_Flash) — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner. -<p>Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il est régulièrement utilisé aujourd'hui.</p> +Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il est régulièrement utilisé aujourd'hui. -<p>Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.</p> +Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux. -<p> </p> -<h2 id="Apprentissage_actif_utilisations_classiques_de_l'intégration">Apprentissage actif : utilisations classiques de l'intégration</h2> -<p>Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien <a href="https://www.youtube.com/">Youtube</a>, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.</p> +## Apprentissage actif : utilisations classiques de l'intégration -<ol> - <li>D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.</li> - <li>Au‑dessous de la vidéo, vous devez trouver un bouton <em>Share (Partager)</em> — cliquez‑le pour afficher les options de partage.</li> - <li>Sélectionnez le bouton <em>Embed (Intégrer)</em> et vous obtiendrez un morceau de code <code><iframe></code> — copiez‑le.</li> - <li>Inserez ce code dans la boîte <em>Input</em> ci‑dessous, et voyez le résultat dans <em>Output</em>.</li> -</ol> +Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien [Youtube](https://www.youtube.com/), mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}. -<p>En prime, vous pouvez aussi essayer d'intégrer une carte <a href="https://www.google.com/maps/">Google Map</a> dans l'exemple.</p> +1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise. +2. Au‑dessous de la vidéo, vous devez trouver un bouton _Share (Partager)_ — cliquez‑le pour afficher les options de partage. +3. Sélectionnez le bouton _Embed (Intégrer)_ et vous obtiendrez un morceau de code `<iframe>` — copiez‑le. +4. Inserez ce code dans la boîte _Input_ ci‑dessous, et voyez le résultat dans _Output_. -<ol> - <li>Allez sur Google Maps et trouvez une carte qui vous plaise.</li> - <li>Cliquez sur le « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.</li> - <li>Selectionnez l'option <em>Share or embed map</em> (Partager ou intégrer une carte).</li> - <li>Selectionnez l'option <em>Embed map</em> (intégrer une carte), qui vous fournira du code <code><iframe></code> — copiez‑le.</li> - <li>Inserez‑le dans la boîte <em>Input</em> di‑dessous et voyez le résultat dans <em>Output</em>.</li> -</ol> +En prime, vous pouvez aussi essayer d'intégrer une carte [Google Map](https://www.google.com/maps/) dans l'exemple. -<p>Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Afficher la solution</em> pour voir la réponse.</p> +1. Allez sur Google Maps et trouvez une carte qui vous plaise. +2. Cliquez sur le « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur. +3. Selectionnez l'option _Share or embed map_ (Partager ou intégrer une carte). +4. Selectionnez l'option _Embed map_ (intégrer une carte), qui vous fournira du code `<iframe>` — copiez‑le. +5. Inserez‑le dans la boîte _Input_ di‑dessous et voyez le résultat dans _Output_. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, pressez le bouton _Afficher la solution_ pour voir la réponse. -<div class="output" style="min-height: 250px;"> -</div> +```html hidden +<h2>Sortie directe</h2> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<div class="output" style="min-height: 250px;"> +</div> -<textarea id="code" class="input" style="width: 95%;min-height: 100px;"> -</textarea> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Afficher la solution"> -</div></pre> +<textarea id="code" class="input" style="width: 95%;min-height: 100px;"> +</textarea> -<pre class="brush: css hidden">html { +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Afficher la solution"> +</div> +``` + +```css hidden +html { font-family: sans-serif; } @@ -107,9 +122,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -139,7 +156,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; +var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -185,213 +202,161 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> - -<p>{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="Iframes_en_détail">Iframes en détail</h2> - -<p>Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme <a href="https://disqus.com/">Disqus</a>, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <code><iframe></code>.</p> - -<p>Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :</p> - -<pre><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" - width="100%" height="500" frameborder="0" - allowfullscreen sandbox> - <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> - Lien de repli pour les navigateurs ne prenant pas en charge iframe </a> </p> -</iframe></pre> - -<p>Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <code><iframe></code> :</p> - -<dl> - <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> - <dd>Si activé, <code><iframe></code> pourra être mis en mode plein écran avec <a href="/fr/docs/Web/API/Fullscreen_API">Full Screen API</a> (un peu hors‑sujet dans cet article).</dd> - <dt>{{htmlattrxref('frameborder','iframe')}}</dt> - <dd>Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}<code>: none;</code> dans le {{Glossary('CSS')}}.</dd> - <dt>{{htmlattrxref('src','iframe')}}</dt> - <dd>Cet attribut, comme avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.</dd> - <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt> - <dd>Ces attributs définissent la largeur et la hauteur souhaitée pour <code><iframe></code>.</dd> - <dt><strong>Contenu de repli</strong></dt> - <dd>Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <code><iframe></iframe></code> qui seront affichées si l'explorateur ne prend pas en charge <code><iframe></code>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <code><iframe></code>.</dd> - <dt>{{htmlattrxref('sandbox','iframe')}}</dt> - <dd>Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de <code><iframe></code> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.</dd> -</dl> - -<div class="note"> -<p><strong>Note :</strong> Afin d'améliorer la vitesse, il est pertinent de définir l'attribut <code>src</code> de <code>iframe</code> avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).</p> -</div> +}; +``` -<h3 id="Problèmes_de_sécurité">Problèmes de sécurité</h3> +{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }} -<p>Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <code><iframe></code> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <code><iframe></code> — il faut juste être prudent. Poursuivons ...</p> +## Iframes en détail -<p>Fabricants de navigateurs et développeurs Web ont appris à la dure que <code><iframe></code> constitue sur le Web une cible commune (terme officiel : un <strong>vecteur d'attaque</strong>) pour des personnes mal intentionnées (souvent appelés <strong>hackeurs (</strong>pirates), ou plus exactement, <strong>crackeurs</strong>). <code><iframe></code> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <code><iframe></code> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.</p> +Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme [Disqus](https://disqus.com/), des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des `<iframe>`. -<div class="note"> -<p><strong>Note :</strong> Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <code><iframe></code> : les hackeurs incorporent un <code><iframe></code> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.</p> -</div> +Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec \<iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme : -<p>Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trouver en direct sur Github</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">code source</a> aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la <em>Console</em> dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em> (<em>Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre</em>) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <code><iframe></code> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.</p> + <iframe src="https://developer.mozilla.org/en-US/docs/Glossary" + width="100%" height="500" frameborder="0" + allowfullscreen sandbox> + <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> + Lien de repli pour les navigateurs ne prenant pas en charge iframe </a> </p> + </iframe> -<h4 id="N'intégrer_que_si_nécessaire">N'intégrer que si nécessaire</h4> +Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un `<iframe>` : -<p>Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."</p> +- {{htmlattrxref('allowfullscreen','iframe')}} + - : Si activé, `<iframe>` pourra être mis en mode plein écran avec [Full Screen API](/fr/docs/Web/API/Fullscreen_API) (un peu hors‑sujet dans cet article). +- {{htmlattrxref('frameborder','iframe')}} + - : Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}`: none;` dans le {{Glossary('CSS')}}. +- {{htmlattrxref('src','iframe')}} + - : Cet attribut, comme avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer. +- {{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}} + - : Ces attributs définissent la largeur et la hauteur souhaitée pour `<iframe>`. +- **Contenu de repli** + - : Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes `<iframe></iframe>` qui seront affichées si l'explorateur ne prend pas en charge `<iframe>`. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge `<iframe>`. +- {{htmlattrxref('sandbox','iframe')}} + - : Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de `<iframe>` (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant. -<p>Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.</p> +> **Note :** Afin d'améliorer la vitesse, il est pertinent de définir l'attribut `src` de `iframe` avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante). -<div> -<p>Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.</p> -</div> +### Problèmes de sécurité -<h4 id="Utilisez_HTTPS">Utilisez HTTPS</h4> +Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ... -<p>{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :</p> +Fabricants de navigateurs et développeurs Web ont appris à la dure que `<iframe>` constitue sur le Web une cible commune (terme officiel : un **vecteur d'attaque**) pour des personnes mal intentionnées (souvent appelés **hackeurs (**pirates), ou plus exactement, **crackeurs**). `<iframe>` est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre `<iframe>` plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous. -<ol> - <li> HTTPS réduit les risques d'altération du contenu distant lors du transfert,</li> - <li> HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.</li> -</ol> +> **Note :** Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de `<iframe>` : les hackeurs incorporent un `<iframe>` invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles. -<p>L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que <a href="https://letsencrypt.org/">Let's Encrypt</a> facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, <em>et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP</em> (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <code><iframe></code>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut <code>src</code> de <code><iframe></code> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.</p> +Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le [trouver en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) (voyez le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la _Console_ dans les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique _Load denied by X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary does not permit framing_ (_Chargement interdit par X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre_) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec `<iframe>` (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla. -<div class="note"> -<p><strong>Note :</strong> <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.</p> -</div> +#### N'intégrer que si nécessaire -<h4 id="Toujours_utiliser_l'attribut_sandbox">Toujours utiliser l'attribut <code>sandbox</code></h4> +Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire." -<p>Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox </a>(<em>bac à sable</em>).</p> +Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent. -<p>Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut <code>sandbox</code> sans paramètres, comme montré dans notre exemple précédent.</p> +Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles. -<p>Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut <code>sandbox=""</code>) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez <em>jamais</em> mettre à la fois les valeurs <code>allow-scripts</code> et <code>allow-same-origin</code> aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».</p> +#### Utilisez HTTPS -<div class="note"> -<p><strong>Note :</strong> Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <code><iframe></code>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.</p> -</div> +{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible : -<h4 id="Configurer_les_directives_CSP">Configurer les directives CSP</h4> +1. HTTPS réduit les risques d'altération du contenu distant lors du transfert, +2. HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement. -<p>{{Glossary("CSP")}} est un acronyme pour « <strong><a href="/fr/docs/Web/Security/CSP">content security policy</a></strong> » (politique de sécurité du contenu) ; les directives CSP fournissent un <a href="/fr/docs/Web/Security/CSP/CSP_policy_directives">ensemble d'en‑têtes HTTP</a> (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <code><iframe></code>, vous pouvez <em><a href="/fr/docs/Web/HTTP/X-Frame-Options">configurer votre serveur pour qu'il adresse une en‑tête appropriée <code>X-Frame-Options</code></a>.</em> Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.</p> +L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que [Let's Encrypt](https://letsencrypt.org/) facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, _et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP_ (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un `<iframe>`, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut `src` de `<iframe>` lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple. -<div class="note"> -<p><strong>Note :</strong> Lisez le post de Frederik Braun sur <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.</p> -</div> +> **Note :** [Github pages](/fr/docs/Learn/Common_questions/Using_Github_pages) allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it. -<h2 id="Les_éléments_<embed>_et_<object>">Les éléments <embed> et <object></h2> +#### Toujours utiliser l'attribut `sandbox` -<p>Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !</p> +Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox ](<https://en.wikipedia.org/wiki/Sandbox_(computer_security)>)(_bac à sable_). -<div class="note"> -<p><strong>Note :</strong> Un <strong>greffon</strong> est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.</p> -</div> +Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent. -<p>Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.</p> +Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut `sandbox=""`) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez _jamais_ mettre à la fois les valeurs `allow-scripts` et `allow-same-origin` aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ». -<p>Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :</p> +> **Note :** Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un `<iframe>`). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}. -<p> </p> +#### Configurer les directives CSP -<table class="standard-table"> - <thead> - <tr> - <th scope="col"> </th> - <th scope="col">{{htmlelement("embed")}}</th> - <th scope="col">{{htmlelement("object")}}</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{glossary("URL")}} du contenu à intégrer</td> - <td>{{htmlattrxref('src','embed')}}</td> - <td>{{htmlattrxref('data','object')}}</td> - </tr> - <tr> - <td>{{glossary("type MIME", 'type de media')}} <em>précis</em> du contenu intégré</td> - <td>{{htmlattrxref('type','embed')}}</td> - <td>{{htmlattrxref('type','object')}}</td> - </tr> - <tr> - <td>hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon</td> - <td>{{htmlattrxref('height','embed')}}<br> - {{htmlattrxref('width','embed')}}</td> - <td>{{htmlattrxref('height','object')}}<br> - {{htmlattrxref('width','object')}}</td> - </tr> - <tr> - <td>noms et valeurs à passer en paramètre au greffon</td> - <td>attributs adéquats avec ces noms et valeurs</td> - <td>éléments de la simple balise {{htmlelement("param")}}, contenus dans <code><object></code></td> - </tr> - <tr> - <td>contenu HTML indépendant en repli en cas de ressources inaccessibles</td> - <td>non pris en charge (<code><noembed></code> a été abandonné)</td> - <td>contenu dans <code><object></code>, après <code>les éléments <param></code></td> - </tr> - </tbody> -</table> +{{Glossary("CSP")}} est un acronyme pour « **[content security policy](/fr/docs/Web/Security/CSP)** » (politique de sécurité du contenu) ; les directives CSP fournissent un [ensemble d'en‑têtes HTTP](/fr/docs/Web/Security/CSP/CSP_policy_directives) (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les `<iframe>`, vous pouvez _[configurer votre serveur pour qu'il adresse une en‑tête appropriée `X-Frame-Options`](/fr/docs/Web/HTTP/X-Frame-Options)._ Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut. -<p> </p> +> **Note :** Lisez le post de Frederik Braun sur [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article. -<div class="note"> -<p><strong>Note :</strong> <code><object></code> requiert un attribut <code>data</code>, un attribut <code>type</code>, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). <code>typemustmatch</code> empêche le fichier incorporé d'être exécuté avant que l'attribut <code>type</code> indique le type exact de média. <code>typemustmatch</code> peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).</p> -</div> +## Les éléments \<embed> et \<object> + +Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images ! + +> **Note :** Un **greffon** est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native. + +Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise. + +Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information : -<p>Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">en direct sur Github</a> ainsi que <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">le code source</a> également):</p> -<pre class="brush: html"><embed src="whoosh.swf" quality="medium" + +| | {{htmlelement("embed")}} | {{htmlelement("object")}} | +| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | +| {{glossary("URL")}} du contenu à intégrer | {{htmlattrxref('src','embed')}} | {{htmlattrxref('data','object')}} | +| {{glossary("type MIME", 'type de media')}} _précis_ du contenu intégré | {{htmlattrxref('type','embed')}} | {{htmlattrxref('type','object')}} | +| hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon | {{htmlattrxref('height','embed')}} {{htmlattrxref('width','embed')}} | {{htmlattrxref('height','object')}} {{htmlattrxref('width','object')}} | +| noms et valeurs à passer en paramètre au greffon | attributs adéquats avec ces noms et valeurs | éléments de la simple balise {{htmlelement("param")}}, contenus dans `<object>` | +| contenu HTML indépendant en repli en cas de ressources inaccessibles | non pris en charge (`<noembed>` a été abandonné) | contenu dans `<object>`, après `les éléments <param>` | + + + +> **Note :** `<object>` requiert un attribut `data`, un attribut `type`, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). `typemustmatch` empêche le fichier incorporé d'être exécuté avant que l'attribut `type` indique le type exact de média. `typemustmatch` peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon). + +Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci [en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) ainsi que [le code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) également): + +```html +<embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" - pluginspage="http://www.macromedia.com/go/getflashplayer"></pre> + pluginspage="http://www.macromedia.com/go/getflashplayer"> +``` + +Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément \<objet> avec un élément \<embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire. -<p>Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.</p> +Regardons maintenant un exemple avec `<object>` ; il intègre un PDF dans une (voir [l'exemple en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) et le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)) : -<p>Regardons maintenant un exemple avec <code><object></code> ; il intègre un PDF dans une (voir <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">l'exemple en direct</a> et le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">code source</a>) :</p> +```html +<object data="mypdf.pdf" type="application/pdf" + width="800" height="1200" typemustmatch> + <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p> +</object> +``` -<pre class="brush: html"><object data="mypdf.pdf" type="application/pdf" - width="800" height="1200" typemustmatch> - <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p> -</object></pre> +Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux [problèmes d'accessibilité](http://webaim.org/techniques/acrobat/acrobat) et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web. -<p>Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux <a href="http://webaim.org/techniques/acrobat/acrobat">problèmes d'accessibilité</a> et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.</p> +### Le cas « greffons » -<h3 id="Le_cas_«_greffons_»">Le cas « greffons »</h3> +Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place. -<p>Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.</p> +**Mettez‑vous à portée de tout le monde**. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon. -<p><strong>Mettez‑vous à portée de tout le monde</strong>. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.</p> +- **Offrez-vous un répit avec les [migraines d'accessibilités supplémentaires](http://webaim.org/techniques/flash/) qui proviennent de Flash et des autres greffons.** +- **Restez à l'écart des risques supplémentaires en matière de sécurité.\*\*** \*\*Adobe Flash est [notoirement](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) non‑sûr[,](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même [demandé qu'Adobe arrête](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso)[ Flash.](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso) -<ul> - <li><strong>Offrez-vous un répit avec les <a href="http://webaim.org/techniques/flash/">migraines d'accessibilités supplémentaires</a> qui proviennent de Flash et des autres greffons.</strong></li> - <li><strong>Restez à l'écart des risques supplémentaires en matière de sécurité.</strong><strong> </strong>Adobe Flash est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoirement</a> non‑sûr<a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">,</a> même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">demandé qu'Adobe arrête</a><a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso"> Flash.</a></li> -</ul> +Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la [vidéo HTML5](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) pour vos besoins en médias, [SVG](/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) pour les graphiques vectoriels et [Canvas](/fr/docs/Web/API/Canvas_API/Tutorial) pour les images et animations complexes. [Peter Elst écrivait déjà il y a quelques années](https://plus.google.com/+PeterElst/posts/P5t4pFhptvp) qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge. -<p>Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la <a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vidéo HTML5</a> pour vos besoins en médias, <a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="/fr/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour les images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst écrivait déjà il y a quelques années</a> qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.</p> +## Résumé -<h2 id="Résumé">Résumé</h2> +Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations. -<p>Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.</p> +D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module. -<p>D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.</p> -<p> </p> -<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p> +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}} -<p> </p> -<h2 id="Dans_ce_module">Dans ce module</h2> -<ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et Vidéo</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écrans d'accueil Mozilla</a></li> -</ul> +## Dans ce module -<p> </p> +- [Images en HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenus audio et Vidéo](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajout de graphiques vectoriels dans le Web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) +- [Images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) +- [Écrans d'accueil Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md index 29f0d234da..1729cdf87b 100644 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -4,233 +4,237 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p>Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS.</p> +Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Vous devriez connaître <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">les fondamentaux de HTML</a> et <a href="/fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">comment ajouter des images statiques à une page web</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment utiliser des fonctionnalités comme <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> pour implémenter des solutions d'images adaptatives sur les sites web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Vous devriez connaître + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >les fondamentaux de HTML</a + > + et + <a + href="/fr/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Images_in_HTML" + >comment ajouter des images statiques à une page web</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre comment utiliser des fonctionnalités comme + <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset" + ><code>srcset</code></a + > + et l'élément + <a href="/fr/docs/Web/HTML/Element/picture" + ><code><picture></code></a + > + pour implémenter des solutions d'images adaptatives sur les sites web. + </td> + </tr> + </tbody> </table> -<h2 id="Pourquoi_des_images_adaptatives">Pourquoi des images adaptatives ?</h2> +## Pourquoi des images adaptatives ? -<p>Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :</p> +Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple : -<p><img alt="Cet exemple de site est montré tel qu'il s'affiche sur un écran large - ici la première image s'affiche bien, et comme elle est suffisamment grande on voit le détail de l'image (promeneurs) en son centre" src="picture-element-wide.png"></p> + -<p>Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">voir cet exemple en direct</a> et trouver son <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">code source</a> sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :</p> +Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez [voir cet exemple en direct](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) et trouver son [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci : -<ul> - <li>Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue.</li> - <li>L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 pixels.</li> - <li>Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder.</li> -</ul> +- Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue. +- L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 pixels. +- Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder. -<p>Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !</p> +Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes ! -<p><img alt="Notre site d'exemple vu sur un écran étroit la première image est réduite à telle point qu'il est difficile d'y voir les détails." src="non-responsive-narrow.png"></p> + -<p>Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de <strong>décisions de nature artistique</strong>.</p> +Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de **décisions de nature artistique**. -<p>De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des <strong>changements de résolution</strong> — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a>, une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).</p> +De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des **changements de résolution** — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web), une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). -<p>Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web.</p> +Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web. -<p>Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.</p> +Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent. -<p>Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.</p> +Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus. -<p>Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).</p> +Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques). -<div class="note"> - <p><strong>Note :</strong> Toutes les nouvelles fonctionnalités présentées dans cet article — <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a>/<a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).</p> -</div> +> **Note :** Toutes les nouvelles fonctionnalités présentées dans cet article — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset)/[`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes)/[`<picture>`](/fr/docs/Web/HTML/Element/picture) — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer). -<h2 id="Comment_créer_des_images_adaptatives">Comment créer des images adaptatives ?</h2> +## Comment créer des images adaptatives ? -<p>Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">sans doute de meilleurs outils </a>que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.</p> +Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils ](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/)que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir. -<h3 id="Commutations_de_résolution_tailles_différentes">Commutations de résolution : tailles différentes</h3> +### Commutations de résolution : tailles différentes -<p>Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :</p> +Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard [`<img>`](/fr/docs/Web/HTML/Element/Img) vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source : -<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"></pre> +```html +<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"> +``` -<p>Mais il est possible d'utiliser deux nouveaux attributs — <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a> et <a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a> — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> sur GitHub (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">code source</a>) :</p> +Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes) — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) sur GitHub (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)) : -<pre class="brush: html"> -<img srcset="elva-fairy-480w.jpg 480w, +```html +<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" - alt="Elva dressed as a fairy"> -</pre> + alt="Elva dressed as a fairy"> +``` + +Les attributs `srcset` et `sizes` paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu. + +**`srcset`** définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit : -<p>Les attributs <code>srcset</code> et <code>sizes</code> paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu.</p> +1. un nom de **fichier image** (`elva-fairy-480w.jpg`), +2. un espace, +3. la **largeur intrinsèque en pixels** (`480w`) — notez l'utilisation de l'unité `w`, et non `px` comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur -<p><strong><code>srcset</code></strong> définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :</p> + <kbd>Cmd</kbd> -<ol> - <li>un nom de <strong>fichier image </strong>(<code>elva-fairy-480w.jpg</code>),</li> - <li>un espace,</li> - <li>la <strong>largeur intrinsèque en pixels</strong> (<code>480w</code>) — notez l'utilisation de l'unité <code>w</code>, et non <code>px</code> comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur <kbd>Cmd</kbd> + <kbd>I</kbd> pour faire apparaître l'écran des infos).</li> -</ol> + \+ -<p><strong><code>sizes</code></strong> définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule :</p> + <kbd>I</kbd> -<ol> - <li>une <strong>condition pour le média</strong> (<code>(max-width:480px)</code>) — vous pourrez en savoir plus à ce propos dans l'<a href="/fr/docs/Learn/CSS">article sur les CSS</a>, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,</li> - <li>une espace,</li> - <li><strong>la largeur de la place </strong>occupée par l'image si la condition pour le média est vraie (<code>440px</code>).</li> -</ol> + pour faire apparaître l'écran des infos). -<div class="note"> -<p><strong>Note :</strong> pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (<code>px</code>, <code>em</code>) ou relative au viewport (<code>vw</code>), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.</p> -</div> +**`sizes`** définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule : -<p>Ainsi, une fois ces attributs en place, le navigateur va :</p> +1. une **condition pour le média** (`(max-width:480px)`) — vous pourrez en savoir plus à ce propos dans l'[article sur les CSS](/fr/docs/Learn/CSS), mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins », +2. une espace, +3. **la largeur de la place** occupée par l'image si la condition pour le média est vraie (`440px`). -<ol> - <li>noter la largeur du périphérique,</li> - <li>vérifier quelle est la première condition vraie pour le média dans la liste des tailles,</li> - <li>noter la largeur d'emplacement demandée par le média,</li> - <li>charger l'image référencée dans la liste <code>srcset</code> qui est la plus proche de la taille choisie.</li> -</ol> +> **Note :** pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (`px`, `em`) ou relative au viewport (`vw`), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média. -<p>Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média <code>(max-width: 480px)</code> sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier <code>elva-fairy-480w.jpg</code> sera chargé, car sa largeur intrinsèque (<code>480w</code>) est celle qui est la plus proche de <code>440px</code>. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.</p> +Ainsi, une fois ces attributs en place, le navigateur va : -<div class="note"> - <p><strong>Note :</strong> lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction <code>document.querySelector("html").clientWidth</code> dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page <code>about:debugging</code> de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.</p> - <p>Pour observer les images chargées, vous pouvez utiliser l'onglet <a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a> dans les outils de développement de Firefox.</p> -</div> +1. noter la largeur du périphérique, +2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles, +3. noter la largeur d'emplacement demandée par le média, +4. charger l'image référencée dans la liste `srcset` qui est la plus proche de la taille choisie. -<p>Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-src"><code>src</code></a>.</p> +Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média `(max-width: 480px)` sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier `elva-fairy-480w.jpg` sera chargé, car sa largeur intrinsèque (`480w`) est celle qui est la plus proche de `440px`. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante. -<div class="note"> -<p><strong>Note :</strong> dans l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> du document, vous trouvez la ligne <code><meta name="viewport" content="width=device-width"></code> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).</p> -</div> +> **Note :** lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction `document.querySelector("html").clientWidth` dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page `about:debugging` de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau. +> +> Pour observer les images chargées, vous pouvez utiliser l'onglet [Moniteur réseau](/fr/docs/Tools/Network_Monitor) dans les outils de développement de Firefox. +Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut [`src`](/fr/docs/Web/HTML/Element/Img#attr-src). -<h3 id="Commutation_de_résolution_même_taille_résolutions_differentes">Commutation de résolution : même taille, résolutions différentes</h3> +> **Note :** dans l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) du document, vous trouvez la ligne `<meta name="viewport" content="width=device-width">` : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception). -<p>Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant <code>srcset</code> avec <code>x-descriptors</code> et sans <code>sizes</code> — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">code source</a>) :</p> +### Commutation de résolution : même taille, résolutions différentes -<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, +Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant `srcset` avec `x-descriptors` et sans `sizes` — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)) : + +```html +<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" - src="elva-fairy-640w.jpg" alt="Elva habillée en fée"> -</pre> + src="elva-fairy-640w.jpg" alt="Elva habillée en fée"> +``` -<p><img alt="Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo." src="resolution-example.png">Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :</p> +Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) : -<pre class="brush: css">img { +```css +img { width: 320px; -}</pre> - -<p>Dans ce cas, <code>sizes</code> n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans <code>srcset</code>. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image <code>elva-fairy-320w.jpg</code> sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image <code>elva‑fairy-640w.jpg</code> sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.</p> +} +``` -<h3 id="Décision_de_nature_artistique">Décision de nature artistique</h3> +Dans ce cas, `sizes` n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans `srcset`. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image `elva-fairy-320w.jpg` sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image `elva‑fairy-640w.jpg` sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko. -<p>Pour résumer, le problème des <strong>décisions de nature artistique</strong> réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> nous permet d'implémenter ce type de solution.</p> +### Décision de nature artistique -<p>Revenons à notre exemple initial du fichier <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>. Cette image nécessite d'opérer un choix de nature artistique :</p> +Pour résumer, le problème des **décisions de nature artistique** réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément [`<picture>`](/fr/docs/Web/HTML/Element/picture) nous permet d'implémenter ce type de solution. -<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"></pre> +Revenons à notre exemple initial du fichier [not-responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html). Cette image nécessite d'opérer un choix de nature artistique : -<p>Arrangeons cela avec <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a>} ! Comme pour <code><vidéo></code> et <code><audio></code>, l'élément <code><picture></code> est une enveloppe conteneur de plusieurs éléments <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a>} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>}. Le code dans <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> ressemblera à :</p> +```html +<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"> +``` -<pre class="brush: html"><picture> - <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> - <source media="(min-width: 800px)" srcset="elva-800w.jpg"> - <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"> -</picture> -</pre> +Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)} ! Comme pour `<vidéo>` et `<audio>`, l'élément `<picture>` est une enveloppe conteneur de plusieurs éléments [`<source>`](/fr/docs/Web/HTML/Element/Source)} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}. Le code dans [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) ressemblera à : -<ul> - <li>Les éléments <code><source></code> incluent un attribut <code>media</code> qui contient une condition pour le média — comme avec le premier exemple <code>srcset</code>, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie <code>true</code> sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément <code><source></code> sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième.</li> - <li>Les attributs <code>srcset</code> contiennent le chemin vers l'image à afficher. Noter que comme avec <code><img></code> plus haut, <code><source></code> peut prendre plusieurs attributs <code>srcset</code> référençant plusieurs images, ainsi qu'un attribut <code>sizes</code> également. Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élément <code><picture></code>, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent.</li> - <li>Dans tous les cas, vous devez fournir un élément <code><img></code>, avec <code>src</code> et <code>alt</code>, juste avant <code></picture></code>, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément <code><source></code> dans cet exemple), et une solution de repli pour les navigateurs qui ne prennent pas en charge l'élément <code><picture></code>.</li> -</ul> +```html +<picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"> +</picture> +``` -<p>Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :</p> +- Les éléments `<source>` incluent un attribut `media` qui contient une condition pour le média — comme avec le premier exemple `srcset`, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie `true` sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément `<source>` sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième. +- Les attributs `srcset` contiennent le chemin vers l'image à afficher. Noter que comme avec `<img>` plus haut, `<source>` peut prendre plusieurs attributs `srcset` référençant plusieurs images, ainsi qu'un attribut `sizes` également. Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élément `<picture>`, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent. +- Dans tous les cas, vous devez fournir un élément `<img>`, avec `src` et `alt`, juste avant `</picture>`, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément `<source>` dans cet exemple), et une solution de repli pour les navigateurs qui ne prennent pas en charge l'élément `<picture>`. -<p><img alt="Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre." src="picture-element-wide.png"><img alt="Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit." src="picture-element-narrow.png"></p> +Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous : -<div class="note"> -<p><strong>Note :</strong> vous ne devez utiliser l'attribut <code>media</code> qu'avec un scénario de décision de nature artistique ; quand vous utilisez <code>media</code>, ne mettez pas de conditions pour le média avec l'attribut <code>sizes.</code></p> -</div> + -<h3 id="Pourquoi_ne_peut-on_pas_réaliser_cela_avec_le_CSS_ou_du_JavaScript">Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?</h3> +> **Note :** vous ne devez utiliser l'attribut `media` qu'avec un scénario de décision de nature artistique ; quand vous utilisez `media`, ne mettez pas de conditions pour le média avec l'attribut `sizes.` -<p>Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme <code>srcset</code>. Vous ne pourriez pas, par exemple, charger l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.</p> +### Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ? -<ul> -</ul> +Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme `srcset`. Vous ne pourriez pas, par exemple, charger l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative. -<h3 id="Utilisez_largement_les_formats_dimage_modernes">Utilisez largement les formats d'image modernes</h3> +### Utilisez largement les formats d'image modernes -<p>Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.</p> +Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle. -<p><code><picture></code> nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs <code>type</code> de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge :</p> +`<picture>` nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs `type` de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge : -<pre class="brush: html"><picture> - <source type="image/svg+xml" srcset="pyramid.svg"> - <source type="image/webp" srcset="pyramid.webp"> - <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux"> -</picture> -</pre> +```html +<picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux"> +</picture> +``` -<ul> - <li>N'utilisez pas l'attribut <code>media</code>, sauf à devoir prendre une décision de nature artistique.</li> - <li>Dans un élément <code><source></code>, vous ne pouvez vous référer qu'à des images du type déclaré avec <code>type</code>.</li> - <li>Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec <code>srcset</code> et <code>sizes</code>, selon les besoins.</li> -</ul> +- N'utilisez pas l'attribut `media`, sauf à devoir prendre une décision de nature artistique. +- Dans un élément `<source>`, vous ne pouvez vous référer qu'à des images du type déclaré avec `type`. +- Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec `srcset` et `sizes`, selon les besoins. -<h2 id="Testez_vos_compétences">Testez vos compétences !</h2> +## Testez vos compétences ! -<p>Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Créer une page de présentation de Mozilla</a>.</p> +Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir [Créer une page de présentation de Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :</p> +Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème : -<ul> - <li><strong>les décisions de nature artistique</strong> : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a>.</li> - <li><strong>la commutation de résolution</strong> : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a> (images SVG) ainsi qu'à l'aide des attributs <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a> et <a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a>.</li> -</ul> +- **les décisions de nature artistique** : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec [`<picture>`](/fr/docs/Web/HTML/Element/picture). +- **la commutation de résolution** : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (images SVG) ainsi qu'à l'aide des attributs [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes). -<p>Cet article est aussi la conclusion de l'ensemble du module <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a> ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.</p> +Cet article est aussi la conclusion de l'ensemble du module [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">L'excellente introduction aux images adaptatives de Jason Grigsby</a></li> - <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Images adaptatives : si vous changez juste de résolution, utilisez <code>srcset</code></a> — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser</li> - <li><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a></li> - <li><a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a></li> -</ul> +- [L'excellente introduction aux images adaptatives de Jason Grigsby](http://blog.cloudfour.com/responsive-images-101-definitions) +- [Images adaptatives : si vous changez juste de résolution, utilisez `srcset`](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser +- [`<img>`](/fr/docs/Web/HTML/Element/Img) +- [`<picture>`](/fr/docs/Web/HTML/Element/picture) +- [`<source>`](/fr/docs/Web/HTML/Element/Source) -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et video</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <code><object></code> à <code><iframe></code> — autres techniques d'intégration</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le web</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écran d'accueil Mozilla</a></li> -</ul>
\ No newline at end of file +- [Images en HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenus audio et video](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [De `<object>` à `<iframe>` — autres techniques d'intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajout de graphiques vectoriels dans le web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) +- [Écran d'accueil Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md index 75e2a70ecd..98fc50817c 100644 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -14,302 +14,286 @@ tags: translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}} -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p>Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.</p> +Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et <a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Compétences informatiques de base, + <a + href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" + >installation des outils de base</a + >, bases de la + <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >manipulation des fichiers</a + >, connaissance des fondamentaux du HTML (comme expliqué dans + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML)</a + > + et + <a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML" + >Images en HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre à intégrer vidéos et audios dans une page web et y ajouter des + légendes et des sous-titres. + </td> + </tr> + </tbody> </table> -<h2 id="Audio_et_vidéo_sur_le_web">Audio et vidéo sur le web</h2> +## Audio et vidéo sur le web + +Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme [Flash](https://fr.wikipedia.org/wiki/Adobe_Flash) (puis, plus tard, [Silverlight](https://fr.wikipedia.org/wiki/Silverlight)) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité. -<p>Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme <a href="https://fr.wikipedia.org/wiki/Adobe_Flash">Flash</a> (puis, plus tard, <a href="https://fr.wikipedia.org/wiki/Silverlight">Silverlight</a>) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.</p> +Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML. -<p>Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.</p> +Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github [fichiers d'échantillons audio et vidéo et exemples de code](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même. -<p>Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">fichiers d'échantillons audio et vidéo et exemples de code</a> pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.</p> +> **Note :** Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com), et [Vimeo](https://vimeo.com/). Pour l'audio, voyez [Soundcloud](https://soundcloud.com/) par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant. -<div class="note"> -<p><strong>Note :</strong> Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, et <a href="https://vimeo.com/">Vimeo</a>. Pour l'audio, voyez <a href="https://soundcloud.com/">Soundcloud</a> par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.</p> -</div> +### L' élément \<video> -<h3 id="L'_élément_<video>">L' élément <video></h3> +L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple : -<p>L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :</p> +```html +<video src="rabbit320.webm" controls> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p> +</video> +``` -<pre class="brush: html"><video src="rabbit320.webm" controls> - <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p> -</video></pre> +Les fonctionnalités de ce code sont : -<p>Les fonctionnalités de ce code sont :</p> +- {{htmlattrxref("src","video")}} + - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière. +- {{htmlattrxref("controls","video")}} + - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript ](/fr/docs/Web/API/HTMLMediaElement)adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume. +- Le paragraphe dans la balise `<video>` + - : Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément `<video>` , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise. -<dl> - <dt>{{htmlattrxref("src","video")}}</dt> - <dd>De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut <code>src</code> (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière.</dd> - <dt>{{htmlattrxref("controls","video")}}</dt> - <dd>Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'<a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie">épilepsie</a>.) Vous devez vous servir de l'attribut <code>controls</code> pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'<a href="/fr/docs/Web/API/HTMLMediaElement">API JavaScript </a>adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.</dd> - <dt>Le paragraphe dans la balise <code><video></code></dt> - <dd>Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <code><video></code> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.</dd> -</dl> +La vidéo intégrée donnerait quelque chose comme ça : -<p>La vidéo intégrée donnerait quelque chose comme ça :</p> + -<p><img alt="A simple video player showing a video of a small white rabbit" src="simple-video.png"></p> +Faites un essai avec [l'exemple ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html). (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html).) -<p>Faites un essai avec <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">l'exemple ici</a>. (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">code source</a>.)</p> +### Gestion de différents formats -<h3 id="Gestion_de_différents_formats">Gestion de différents formats</h3> +Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio. -<p>Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.</p> +Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des [formats conteneurs](https://fr.wikipedia.org/wiki/Format_conteneur). Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu. -<p>Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des <a href="https://fr.wikipedia.org/wiki/Format_conteneur">formats conteneurs</a>. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.</p> +Les pistes audio et vidéo sont aussi de différents formats, par exemple : -<p>Les pistes audio et vidéo sont aussi de différents formats, par exemple :</p> +- Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge. +- Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge. +- L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité. -<ul> - <li>Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.</li> - <li>Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.</li> - <li>L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.</li> -</ul> +Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur. -<p>Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.</p> +> **Note :** Ce n'est pas si simple, comme vous pouvez le voir dans le [tableau de compatibilité des codecs audio-vidéo](/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility). En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède. -<div class="note"> -<p><strong>Note :</strong> Ce n'est pas si simple, comme vous pouvez le voir dans le <a href="/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité des codecs audio-vidéo</a>. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.</p> -</div> +Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu. -<p>Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.</p> -<p> </p> -<div class="note"> -<p><strong>Note :</strong> Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats <strong>MP3 </strong>(pour l'audio) et <strong>MP4/H.264</strong> (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.</p> +> **Note :** Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats **MP3** (pour l'audio) et **MP4/H.264** (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs. +> +> -<p> </p> -</div> +Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, [mis à jour](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html), ([essayez-le directement ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html) aussi) : -<p>Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">mis à jour</a>, (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">essayez-le directement ici</a> aussi) :</p> +```html +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p> +</video> +``` -<pre class="brush: html"><video controls> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p> -</video></pre> +Ici, nous avons retiré l'attribut `src` de la balise \<video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments `<source>` et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours. -<p>Ici, nous avons retiré l'attribut <code>src</code> de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <code><source></code> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.</p> +Chaque élément \<source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources. -<p>Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.</p> -<p> </p> -<div class="note"> -<p><strong>Note :</strong> L'<a href="/fr/docs/Web/HTML/Supported_media_formats">article sur les formats média pris en charge</a> contient quelques types {{glossary("MIME type","MIME")}} courants.</p> -</div> +> **Note :** L'[article sur les formats média pris en charge](/fr/docs/Web/HTML/Supported_media_formats) contient quelques types {{glossary("MIME type","MIME")}} courants. -<h3 id="Autres_fonctionnalités_de_<video>">Autres fonctionnalités de <video></h3> +### Autres fonctionnalités de \<video> -<p>Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :</p> +Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple : -<pre class="brush: html"><video controls width="400" height="400" +```html +<video controls width="400" height="400" autoplay loop muted - poster="poster.png"> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p> -</video> -</pre> + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p> +</video> +``` + +Cela produit une sortie du type suivant : + + -<p>Cela produit une sortie du type suivant :</p> +Voici les nouvelles fonctionnalités : -<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="extra-video-features.png"></p> +- {{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} + - : Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable **rapport de proportions**. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut. +- {{htmlattrxref("autoplay","video")}} + - : Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux. +- {{htmlattrxref("loop","video")}} + - : Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire. +- {{htmlattrxref("muted","video")}} + - : Cet attribut coupe le son de la vidéo par défaut. +- {{htmlattrxref("poster","video")}} + - : Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité. +- {{htmlattrxref("preload","video")}} -<p>Voici les nouvelles fonctionnalités :</p> + - : Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs : -<dl> - <dt>{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}</dt> - <dd>Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable <strong>rapport de proportions</strong>. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.</dd> - <dt>{{htmlattrxref("autoplay","video")}}</dt> - <dd>Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.</dd> - <dt>{{htmlattrxref("loop","video")}}</dt> - <dd>Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.</dd> - <dt>{{htmlattrxref("muted","video")}}</dt> - <dd>Cet attribut coupe le son de la vidéo par défaut.</dd> - <dt>{{htmlattrxref("poster","video")}}</dt> - <dd>Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.</dd> - <dt>{{htmlattrxref("preload","video")}}</dt> - <dd> - <p>Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :</p> + - `"none"` : ne pas mettre le fichier dans un tampon + - `"auto"` : mettre le fichier média dans un tampon + - `"metadata"` : ne mettre que les métadonnées dans le tampon - <ul> - <li><code>"none"</code> : ne pas mettre le fichier dans un tampon</li> - <li><code>"auto"</code> : mettre le fichier média dans un tampon</li> - <li><code>"metadata"</code> : ne mettre que les métadonnées dans le tampon</li> - </ul> - </dd> -</dl> +Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [ code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster ! -<p>Vous trouverez cet exemple <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">prêt pour l'interprétation</a> sur Github ( voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html"> code source</a>). Notez que nous n'avons pas inséré l'attribut <code>autoplay</code> dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !</p> +### L'élément \<audio> -<h3 id="L'élément_<audio>">L'élément <audio></h3> +L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci : -<p>L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :</p> +```html +<audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p> +</audio> +``` -<pre class="brush: html"><audio controls> - <source src="viper.mp3" type="audio/mp3"> - <source src="viper.ogg" type="audio/ogg"> - <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p> -</audio></pre> +Vous verrez quelque chose de ce genre dans un navigateur : -<p>Vous verrez quelque chose de ce genre dans un navigateur :</p> + -<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="audio-player.png"></p> +> **Note :** Vous pouver [lancer la démo de l'audio en direct ](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).) -<div class="note"> -<p><strong>Note :</strong> Vous pouver <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">lancer la démo de l'audio en direct </a>sur Github (voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">code source de l'interpréteur</a>.)</p> -</div> +Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 : -<p>Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :</p> +- L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs `width`/`height` — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur. +- Il ne prend pas en charge non plus l'attribut `poster` — toujours pas de composant visuel. -<ul> - <li>L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs <code>width</code>/<code>height</code> — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur.</li> - <li>Il ne prend pas en charge non plus l'attribut <code>poster</code> — toujours pas de composant visuel.</li> -</ul> +Excepté ce qui précéde, `<audio>` accepte les mêmes fonctionnalités que `<video>` — revoyez les sections ci-desssus pour plus d'informations à ce propos. -<p>Excepté ce qui précéde, <code><audio></code> accepte les mêmes fonctionnalités que <code><video></code> — revoyez les sections ci-desssus pour plus d'informations à ce propos.</p> +## Afficher du texte dans une vidéo -<h2 id="Afficher_du_texte_dans_une_vidéo">Afficher du texte dans une vidéo</h2> +Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple : -<p>Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :</p> +- De nombreuses personnes sont mal‑entendantes (dures d'oreille ou sourdes), et ne peuvent donc pas entendre le son. +- D'autres ne veulent pas de son, soit parce qu'ils sont dans un environnement bruyant (comme un bar avec une foule pendant une retransmission de compétition sportive) et ne peuvent donc pas entendre, soit parce qu'ils sont dans un environnement silencieux (comme une bibliothèque) et ne veulent donc pas déranger. +- Des personnes qui ne parlent pas la langue d'une vidéo peuvent souhaiter un sous‑titrage ou une traduction pour les aider à comprendre le contenu du média. -<ul> - <li>De nombreuses personnes sont mal‑entendantes (dures d'oreille ou sourdes), et ne peuvent donc pas entendre le son.</li> - <li>D'autres ne veulent pas de son, soit parce qu'ils sont dans un environnement bruyant (comme un bar avec une foule pendant une retransmission de compétition sportive) et ne peuvent donc pas entendre, soit parce qu'ils sont dans un environnement silencieux (comme une bibliothèque) et ne veulent donc pas déranger.</li> - <li>Des personnes qui ne parlent pas la langue d'une vidéo peuvent souhaiter un sous‑titrage ou une traduction pour les aider à comprendre le contenu du média.</li> -</ul> +Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}. -<p>Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.</p> +> **Note :** « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante. -<div class="note"> -<p><strong>Note :</strong> « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.</p> -</div> +WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant : -<p>WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :</p> +- les sous‑titres (`subtitles`) + - : Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio. +- les légendes (`captions`) + - : Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe. +- les descriptions programmées (`descriptions`) + - : Textes convertis en audio, pour aider les personnes avec des défauts de vision. -<dl> - <dt>les sous‑titres (<code>subtitles</code>)</dt> - <dd>Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.</dd> - <dt>les légendes (<code>captions</code>) </dt> - <dd>Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.</dd> - <dt>les descriptions programmées (<code>descriptions</code>) </dt> - <dd>Textes convertis en audio, pour aider les personnes avec des défauts de vision.</dd> -</dl> +Un fichier WebVTT typique ressemblera à : -<p>Un fichier WebVTT typique ressemblera à :</p> + WEBVTT -<pre>WEBVTT + 1 + 00:00:22.230 --> 00:00:24.606 + Ceci est le premier sous‑titre. -1 -00:00:22.230 --> 00:00:24.606 -Ceci est le premier sous‑titre. + 2 + 00:00:30.739 --> 00:00:34.074 + Ceci est le deuxième. -2 -00:00:30.739 --> 00:00:34.074 -Ceci est le deuxième. + ... - ...</code> -</pre> +Pour qu'il soit affiché avec la diffusion du média HTML, il faut : -<p>Pour qu'il soit affiché avec la diffusion du média HTML, il faut :</p> +1. Enregistrer le fichier avec l'extension `.vtt` dans un endroit sensé. +2. Lier le fichier `.vtt` avec l'élément {{htmlelement("track")}}. `<track>` doit être placé entre les balises `<audio>` ou `<video>`, mais après tous les éléments `<source>`. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont `subtitles`, `captions` ou `descriptions`. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres. -<ol> - <li>Enregistrer le fichier avec l'extension <code>.vtt</code> dans un endroit sensé.</li> - <li>Lier le fichier <code>.vtt</code> avec l'élément {{htmlelement("track")}}. <code><track></code> doit être placé entre les balises <code><audio></code> ou <code><video></code>, mais après tous les éléments <code><source></code>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont <code>subtitles</code>, <code>captions</code> ou <code>descriptions</code>. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.</li> -</ol> +Voici un exemple : -<p>Voici un exemple :</p> +```html +<video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video> +``` -<pre class="brush: html"><video controls> - <source src="example.mp4" type="video/mp4"> - <source src="example.webm" type="video/webm"> - <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> -</video></pre> +Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci : -<p>Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :</p> + -<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="video-player-with-captions.png"></p> +Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous [trouverez un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/), écrit par Ian Devlin, accompagnant cet article sur Github (voyez le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. -<p>Pour plus de détails, lisez <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous‑titres aux vidéos HTML5</a>. Vous <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trouverez un exemple</a>, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a> aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. </p> +> **Note :** Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo. -<div class="note"> -<p><strong>Note :</strong> Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.</p> -</div> +### Apprentissage interactif : intégrer vos propres vidéos et audios -<h3 id="Apprentissage_interactif_intégrer_vos_propres_vidéos_et_audios">Apprentissage interactif : intégrer vos propres vidéos et audios</h3> +Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo, MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez ! -<p>Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo, MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> et <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Nous aimerions que vous essayiez !</p> +Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo ](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content)pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence. -<p>Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">échantillons audio et vidéo </a>pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.</p> +Il vous faudra : -<p>Il vous faudra :</p> +1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur. +2. Créer un nouveau fichier HTML dans le même répertoire nommé : `index.html`. +3. Ajouter des éléments `<audio>` et `<video>` dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur. +4. Leur attribuer (aux deux) des éléments `<source>` que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs `type`. +5. Donner à l'élément `<video>` une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche. -<ol> - <li>Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.</li> - <li>Créer un nouveau fichier HTML dans le même répertoire nommé : <code>index.html</code>.</li> - <li>Ajouter des éléments <code><audio></code> et <code><video></code> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.</li> - <li>Leur attribuer (aux deux) des éléments <code><source></code> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs <code>type</code>.</li> - <li>Donner à l'élément <code><video></code> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.</li> -</ol> +En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos. -<p>En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.</p> +## Résumé -<h2 id="Résumé">Résumé</h2> +Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}. -<p>Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.</p> +## Consultez aussi : -<h2 id="Consultez_aussi">Consultez aussi :</h2> +- {{htmlelement("audio")}} +- {{htmlelement("video")}} +- {{htmlelement("source")}} +- {{htmlelement("track")}} +- [ Ajouter des légendes et sous-titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) +- [Intégration Audio et Vidéo ](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery): de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript. +- [Manipuler l'Audio et la Vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation): de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres). +- Options automatisées pour la [traduction multimédia](http://www.inwhatlanguage.com/blog/translate-video-audio/). -<ul> - <li>{{htmlelement("audio")}}</li> - <li>{{htmlelement("video")}}</li> - <li>{{htmlelement("source")}}</li> - <li>{{htmlelement("track")}}</li> - <li><a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Ajouter des légendes et sous-titres aux vidéos HTML5</a></li> - <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Intégration Audio et Vidéo </a>: de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.</li> - <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipuler l'Audio et la Vidéo</a>: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).</li> - <li>Options automatisées pour la <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduction multimédia</a>.</li> -</ul> +{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}} -<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> -<p> </p> -<h2 id="Contenu_du_module">Contenu du module :</h2> +## Contenu du module : -<ul> - <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page Web</a></li> - <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Ajouter des images "responsive" à une page Web</a></li> - <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> -</ul> +- [Les images en HTML](/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) +- [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video) +- [From \<object> to \<iframe> — other embedding technologies](/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Ajouter des images vectorielles à une page Web](/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web) +- [Ajouter des images "responsive" à une page Web](/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web) +- [Mozilla splash page](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) -<p> </p> -<dl> -</dl> -<ul> -</ul> +<!----> |