diff options
Diffstat (limited to 'files/fr/apprendre/html/comment')
22 files changed, 3388 insertions, 0 deletions
diff --git a/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html b/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html new file mode 100644 index 0000000000..a62b555b7d --- /dev/null +++ b/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html @@ -0,0 +1,142 @@ +--- +title: Afficher du code informatique avec HTML +slug: Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: >- + Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code +--- +<div class="summary"> +<p>HTML offre différents éléments pour écrire de la documentation technique. Dans cet article, nous aborderons les éléments HTML qui portent sur la représentation de code informatique.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment utiliser HTML afin de représenter des entrées saisies par un utilisateur, des sorties produites par un système, du code, du texte simple et des variables.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_et_l'informatique">HTML et l'informatique</h2> + +<p>{{glossary("HTML")}} a été conçu par des informaticiens et il sert donc particulièrement bien ce domaine. De nombreux éléments HTML sont apparus et/ou ont disparu au cours des années. Ici, nous n'aborderons que ceux qui sont en vigueur actuellement :</p> + +<ul> + <li>{{HTMLElement('code')}}</li> + <li>{{HTMLElement('kbd')}}</li> + <li>{{HTMLElement('pre')}}</li> + <li>{{HTMLElement('samp')}}</li> + <li>{{HTMLElement('var')}}.</li> +</ul> + +<h2 id="Le_texte_préformaté">Le texte préformaté</h2> + +<p>Dans un éditeur de texte, la mise en forme s'applique simplement. Il suffit d'utiliser les caractères du clavier, d'appuyer sur la barre d'espace pour indiquer un espace, d'utiliser la touche Entrée pour passer à la ligne, etc. Normalement, chaque lettre a la même largeur et tout est donc bien aligné. Étant donné que ce qui est écrit est écrit avec du texte <em>simple</em> (<em>plain text</em> en anglais), nul besoin de se préoccuper de la couleur du texte, de sa taille de police, de l'italique, etc.</p> + +<p>Un navigateur graphique formate le texte en fonction du code HTML et CSS. Cela fait que beaucoup de blancs (les espaces, les tabulations, les sauts de lignes) sont ignorés. Si vous appuyez sur Entrée lorsque vous tapez du code HTML, le navigateur déduira que vous souhaitez bien aligner votre code HTML. En revanche, pour indiquer clairement qu'on souhaite avoir un nouveau paragraphe, il faudra utiliser le bon élément HTML (en l'occurence {{htmlelement("p")}}).</p> + +<p>Généralement lorsqu'on écrit un article qui porte sur l'informatique, on veut afficher, dans le navigateur, du texte, tel qu'il serait lorsqu'on le saisit dans un éditeur de texte. Pour ce faire, on utilisera l'élément {{htmlelement("pre")}}. Par défaut, un navigateur graphique affichera le texte contenu dans cet élément avec une police dont tous les caractères ont la même largeur (<em>monospace</em>). Toutefois, vous pourrez adapter la mise en forme à votre gré grâce à {{glossary("CSS")}}. Par exemple, lorsque vous lisez des exemples de code sur MDN, nous utilisons l'élément {{htmlelement("pre")}} (auquel on ajoute quelques couleurs CSS pour améliorer la lisibilité).</p> + +<p>On notera qu'on ne peut toujours pas utiliser les caractères réservés (<code><>&</code>), par exemple :</p> + +<pre class="brush: html"><pre> +Un éditeur de texte est pratique car il suffit +d'appuyer sur Entrée pour commencer un nouveau +paragraphe, plutôt que d'avoir à utiliser ces +grossières balises &lt;p&gt; et &lt;/p&gt;. +</pre></pre> + +<p>Cela donnera le résultat suivant :</p> + +<p>{{EmbedLiveSample('Le_texte_préformaté','100%',90)}}</p> + +<div class="note"> +<p>Par défaut, votre éditeur de texte laissera les lignes s'allonger jusqu'à éventuellement dépasser de l'écran. Le retour à la ligne automatique peut toutefois être activé dans la plupart des éditeurs pour garder un œil sur tout le contenu.</p> + +<p>On aura la même chose avec <code><pre></code>. Il existe une propriété CSS intitulée {{cssxref("white-space")}} dont la valeur par défaut est <code>nowrap</code>. Si on veut que le retour à la ligne soit automatique, on utilisera la valeur <code>pre-wrap</code>.</p> +</div> + +<h2 id="Retranscrire_du_code">Retranscrire du code</h2> + +<p>Naturellement, tout le texte préformaté n'est pass du code informatique. Lorsque vous mentionnez du code informatique dans votre document, vous devriez utiliser l'élément {{HTMLElement('code')}} :</p> + +<pre class="brush: html">Un des mots-clés les plus importants est <code>this</code>. +</pre> + +<p>Pour indiquer un bloc de code qui s'étend sur plusieurs lignes, vous pouvez imbriquer un élément {{HTMLElement('code')}} dans un élément {{HTMLElement('pre')}}. Certains script tiers tels que la bibliothèque <a href="https://highlightjs.org">highlight.js</a> utiliseront ces balises pour ajouter de la coloration syntaxique à vos exemples de code :</p> + +<pre class="brush: html"><pre><code class="js"> +function coucou() { + console.log('coucou monde !'); +} +</code></pre></pre> + +<h2 id="Retranscrire_des_entréessorties_(IO)">Retranscrire des entrées/sorties (I/O)</h2> + +<p><em>Les entrées </em>sont les informations qui sont saisies, généralement par les utilisateurs, dans un ordinateur. L'ordinateur traite ces données et renvoie une <em>sortie.</em> On utilise parfois les termes anglais respectifs <em>input</em> et <em>output</em>, voire un acronyme pour désigner l'ensemble : I/O.</p> + +<h3 id="Comment_retranscrire_une_sortie_informatique">Comment retranscrire une sortie informatique</h3> + +<p>L'élément {{HTMLElement('samp')}} indique que l'ordinateur produit un texte :</p> + +<pre class="brush: html">Ensuite, vous verrez affiché <samp>thomas@mon-ordinateur:~$</samp>. +</pre> + +<h3 id="Comment_retranscrire_une_entrée_informatique">Comment retranscrire une entrée informatique</h3> + +<p>L'élément {{htmlelement('kbd')}} était initialement utilisé pour représenter une entrée saisie au clavier (<code>kbd</code> étant pour <em>keyboard</em> qui signifie clavier en anglais). Cependant, aujourd'hui, cet élément peut être utilisé pour représenter d'autres types d'entrées (comme les commandes vocales).</p> + +<p>L'élément {{htmlelement("kbd")}} permet de marquer l'entrée attendue :</p> + +<pre class="brush: html">Saisissez <kbd>ls --color</kbd> sur l'invite du terminal. +</pre> + +<p>Pour indiquer une touche donnée ou une sous-commande particulière, vous pouvez imbriquer {{htmlelement("kbd")}} avec lui-même :</p> + +<pre class="brush: html">Appuyez sur <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> pour arrêter le processus. +</pre> + +<p>Dans cet exemple, le premier élément <code><kbd></code> indique la commande entière alors que les éléments imbriqués indiquent les touches à utiliser.</p> + +<h3 id="Assembler_le_tout">Assembler le tout</h3> + +<p>Il arrive souvent de combiner <code><samp></code> et <code><kbd></code>. Par exemple, lorsque l'ordinateur indique des options à l'utilisateur, on pourra imbriquer des éléments <code><samp></code> dans des éléments <code><kbd></code> :</p> + +<pre class="brush: html"><code>Ensuite, choisissez <kbd><samp>Oui</samp></kbd> ou <kbd><samp>Non</samp></kbd></code></pre> + +<p>Inversement, quand l'ordinateur indique quoi faire, on pourra imbrique des éléments <code><kbd></code> dans des éléments <code><samp></code>:</p> + +<pre class="brush: html"><code>Attendez que l'invite indique, <samp>Appuyez sur <kbd>Entrée</kbd> pour continuer.</samp></code></pre> + +<p>Selon <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">la spécification HTML</a>, il n'est pas nécessaire de jouer profondément sur l'imbrication de ces éléments. L'aspect le plus important de transmettre les informations avec leur sens.</p> + +<h2 id="Les_variables_de_programmes_ou_les_variables_mathématiques">Les variables de programmes ou les variables mathématiques</h2> + +<p>Dans ce cas, on utilisera l'élément {{htmlelement("var")}}. Les variables peuvent être annotées dans le texte principal mais pas dans les fragments de code.</p> + +<pre class="brush: html">Cette fonction utilisera deux paramètres, +<var>x</var> et <var>y</var>. +</pre> + +<div class="note"> +<p>L'élément {{htmlelement("var")}} permet d'écrire des variables pour des formules simples. En revanche, pour les formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> sera beaucoup plus riche et adapté.</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("code")}}</li> + <li>{{htmlelement("kbd")}}</li> + <li>{{htmlelement("pre")}}</li> + <li>{{htmlelement("samp")}}</li> + <li>{{htmlelement("var")}}</li> +</ul> diff --git a/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html b/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html new file mode 100644 index 0000000000..836cd29e95 --- /dev/null +++ b/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html @@ -0,0 +1,126 @@ +--- +title: Ajouter une carte de zones cliquables sur une image +slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image +tags: + - Guide + - HTML + - Intermediate + - Navigation +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez au préalable savoir comment <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">créer un document HTML simple</a> et connaître comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">ajouter des images accessibles à une page web.</a></td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p>Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.</p> +</div> + +<h2 id="Les_cartes_imagées_cliquables_et_leurs_inconvénients">Les cartes imagées cliquables et leurs inconvénients</h2> + +<p>Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « <em>hotspots</em> » en anglais) qui pointent chacunes vers une ressource distincte.</p> + +<p>Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.</p> + +<p><a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien">Les liens textuels</a> (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.</p> + +<h2 id="Comment_insérer_une_carte_imagée">Comment insérer une carte imagée</h2> + +<h3 id="Étape_1_l'image">Étape 1 : l'image</h3> + +<p>N'importe quelle image ne fera pas l'affaire pour construire une telle carte.</p> + +<ul> + <li>L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut <code>alt</code> est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas).</li> + <li>L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions.</li> + <li>Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">Une image de 72 pixels CSS de long et de large</a> est un minimum acceptable (pour voir le problème posé par de trop petites régions : <a href="http://www.goethe-verlag.com/book2/">50languages.com</a>, où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué</li> +</ul> + +<p>On insère une image <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">de la même façon que d'habitude</a> (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, <code>alt</code> peut être laissé vide : <code>alt=""</code>, si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.</p> + +<p>Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut <code>usemap</code> :</p> + +<pre class="brush: html"><img + src="image-map.png" + alt="" + usemap="#exemple-map-1" /> +</pre> + +<h3 id="Étape_2_Activer_les_régions_actives">Étape 2 : Activer les régions actives</h3> + +<p>Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut <code>usemap</code> vue juste avant :</p> + +<pre class="brush: html"><map name="exemple-map-1"> + +</map> +</pre> + +<p>Dans cet élément <code><map></code>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.</p> + +<p>Les éléments <code><area></code> sont des éléments vides mais qui utilisent quatres attributs :</p> + +<dl> + <dt>{{htmlattrxref('shape','area')}}</dt> + <dt>{{htmlattrxref('coords','area')}}</dt> + <dd> + <p><code>shape</code> (« forme » en anglais) prend l'une de ces quatre valeurs : <code>circle</code> (pour un cercle), <code>rect</code> (pour un rectangle), <code>poly</code> (pour un polygone) ou <code>default</code> (une zone <code>default</code> occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans <code>coords</code>.</p> + + <ul> + <li>Pour un cercle (<code>circle</code>) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.</li> + <li>Pour un rectange (<code>rect</code>) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.</li> + <li>Pour un polygone (<code>poly</code>) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).</li> + </ul> + + <p>Les coordonnées exprimées sont données en pixels CSS.</p> + + <p>Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.</p> + </dd> + <dt>{{htmlattrxref('href','area')}}</dt> + <dd>Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.</dd> + <dt>{{htmlattrxref('alt','area')}}</dt> + <dd> + <p>Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte <code>alt</code> ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir <a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien#Écrire_des_liens_accessibles">nos conseils pour écrire des hyperliens accessibles.</a></p> + + <p>Vous pouvez écrire <code>alt=""</code> si l'attribut <code>href</code> est vide <em>et</em> que l'image entière possède déjà un attribut <code>alt</code> renseigné.</p> + </dd> +</dl> + +<pre class="brush: html"><map name="exemple-map-1"> + <area shape="circle" coords="200,250,25" + href="page-2.html" alt="exemple de cercle" /> + + <area shape="rect" coords="10, 5, 20, 15" + href="page-3.html" alt="exemple de rectangle" /> + +</map></pre> + +<h3 id="Étape_3_S'assurer_que_la_carte_fonctionne_pour_chacun">Étape 3 : S'assurer que la carte fonctionne pour chacun</h3> + +<p>Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.</p> + +<p>Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.</p> + +<p>Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder <a href="https://github.com/stowball/jQuery-rwdImageMaps">ce plugin jQuery réalisé par Matt Stow.</a> Dudley Storey illustre une méthode qui consiste à <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">utiliser SVG pour réaliser un effet de carte imagée</a> ainsi qu'une bidouille pour les images matricielles avec <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">une combinaison de SVG</a>.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("map")}}</li> + <li>{{htmlelement("area")}}</li> + <li><a href="http://www.maschek.hu/imagemap/imgmap">Un éditeur de carte de zones en ligne (en anglais)</a></li> + <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Des conseils sur comment gérer les cartes pour des clients mail (en anglais)</a></li> +</ul> diff --git a/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html new file mode 100644 index 0000000000..37f63b165e --- /dev/null +++ b/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html @@ -0,0 +1,133 @@ +--- +title: Ajouter des citations sur une page web +slug: Apprendre/HTML/Comment/Ajouter_citations_sur_page_web +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations +--- +<div class="summary"> +<p>Cet article illustre comment citer quelqu'un de façon précise et en fournissant la source de la citation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment intégrer des citations et leurs sources.</td> + </tr> + </tbody> +</table> + +<p>Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu {{Glossary('HTML')}}, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.</p> + +<p>HTML permet de gérer trois scénarios liés aux citations :</p> + +<ul> + <li>fournir un extrait complet d'un document tiers</li> + <li>citer une seule phrase ou un seul terme</li> + <li>faire référence à un document tiers</li> +</ul> + +<h2 id="Comment_rapporter_exactement_les_mots_d'une_personne">Comment rapporter exactement les mots d'une personne</h2> + +<h3 id="Citation_en_ligne">Citation en ligne</h3> + +<p>HTML fournit l'élément {{htmlelement("q")}} qui permet de créer des citations en ligne. Cela signifie qu'il s'agit de citations suffisamment courtes pour qu'elles puissent être placées dans le cours du texte.</p> + +<pre class="brush: html"><p> + Si vous lisez Cicéron dans la version latine, vous trouverez + un passage connu&nbsp;: <q lang="la">qui dolorem ipsum quia + dolor sit amet consectetur adipisci velit.</q> +</p></pre> + +<p>Voilà le résultat qu'on obtient avec un tel code :</p> + +<p>{{EmbedLiveSample('Citation_en_ligne','100%')}}</p> + +<div class="note"> +<p><code><q></code> ne doit pas être utilisé pour écrire des titres d'articles ou de chapitres ou pour mettre un terme en exergue. Si vous avez besoin d'utiliser des guillemets à cet effet, il faudra les écrire manuellement :</p> + +<pre><code>C'est</code> « Wingardium Leviôsa » et non « Wingardium Leviosâ »<code>.</code></pre> + +<p>Les entités HTML <code>&laquo;</code> et <code>&raquo;</code> permettent de représenter les guillemets. Il faudra utiliser <code>&ldquo;</code> et <code>&rdquo;</code> pour les doubles quotes et <code>&lsquo;</code> et <code>&rsquo;</code> pour les simples quotes.</p> +</div> + +<p>Par défaut, {{glossary("navigateurs",'les navigateurs web')}} utilisent le symbole de citation approprié pour la langue utilisée. Si vous souhaitez surcharger la mise en forme par défaut, vous pouvez utiliser la propriété CSS {{cssxref('quotes')}}. Par exemple, la règle CSS qui suit imposera les guillemets français :</p> + +<pre class="brush: css">:lang(fr) > q { + quotes: '« ' ' »'; +}</pre> + +<h3 id="Extrait_complet">Extrait complet</h3> + +<p>HTML fournit également l'élément {{htmlelement("blockquote")}} pour les citations en bloc (c'est-à-dire les citations suffisamment longues pour qu'elles méritent leurs propres paragraphes). Dans l'exemple suivant, on voit qu'on a plusieurs paragraphes au sein d'une même <code><blockquote></code> :</p> + +<pre class="brush: html"><p>Les mots employés par Cicéron sont devenus un +charabia pour simuler du texte mais à l'origine, ils +n'étaient pas dénués de sens, loin de là&nbsp;:</p> + +<blockquote> + <p> + Il n'y personne qui recherche ou désire obtenir la + douleur en tant que telle car il s'agit de la douleur. + Toutefois, occasionnellement, il exist des circonstances + selon lesquelles la peine et la douleur peuvent fournir + un grand plaisir. + </p> + + <p> + Le sage s'en tient donc, sur ces sujets, au principe + de sélection : il rejette le plaisir afin de s'assurer de + de plus grands plaisir ou alors, il endure certaines + douleurs pour s'en prémunir de plus grandes. + </p> +</blockquote> +</pre> + +<p>Dans ce cas, la mise en forme appliquée par défaut par le navigateur web est une marge plus large à gauche. Là encore, vous pouvez ajuster la mise en forme à votre convenance en utilisant la propriété CSS {{cssxref('margin')}}.</p> + +<h2 id="Comment_fournir_la_source_d'une_citation">Comment fournir la source d'une citation</h2> + +<h3 id="Source_implicite">Source implicite</h3> + +<p>Citer c'est bien, indiquer les sources c'est encore mieux. De cette façon, une source indépendante peut vérifier que la citation est correcte, voire fournir un contexte plus large pour la citation. À cet effet, l'attribut {{htmlattrxref('cite','q')}} permet d'indiquer l'URL de la source, que ce soit pour un élément {{htmlelement("q")}} ou pour un élément {{htmlelement("blockquote")}} :</p> + +<pre class="brush: html"><q cite="https://fr.wikiquote.org/wiki/Hom%C3%A8re"><span class="citation">Patience, mon cœur !</span></q></pre> + +<p>En pratique, les personnes ne trouvent que très rarement cette information de source (sauf s'ils lisent le code source HTML). On peut donc préférer un lien direct dans la citation :</p> + +<pre class="brush: html"><q><a href="https://fr.wikiquote.org/wiki/Hom%C3%A8re"><span class="citation">Patience, mon cœur !</span></a></q></pre> + +<h3 id="Source_explicite">Source explicite</h3> + +<p>Pour indiquer de façon explicite l'origine de la citation, il est possible d'utiliser l'élément {{htmlelement("cite")}}. Cet élément peut <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">indiquer l'auteur de la citation ou l'œuvre créative de laquelle elle provient</a>.</p> + +<pre class="brush: html"><p> + <q>La pensée est libre</q>, + <cite id="author">Cicéron</cite> dans + <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>. +</p> +</pre> + +<p>Pour accentuer le caractère explicite de la relation entre la citation et sa source, il est également possible d'ajouter l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></code> :</p> + +<pre class="brush: html"><p> + <q aria-labelledby="author work">La pensée est libre</q>, + <cite id="author">Cicéron</cite> dans + <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>. +</p> +</pre> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("q")}}</li> + <li>{{htmlelement("blockquote")}}</li> + <li>{{htmlelement("cite")}}</li> +</ul> diff --git a/files/fr/apprendre/html/comment/ajouter_contenu_audio_vidéo_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_contenu_audio_vidéo_page_web/index.html new file mode 100644 index 0000000000..1e1708e6ea --- /dev/null +++ b/files/fr/apprendre/html/comment/ajouter_contenu_audio_vidéo_page_web/index.html @@ -0,0 +1,153 @@ +--- +title: Ajouter du contenu audio ou vidéo à une page web +slug: Apprendre/HTML/Comment/Ajouter_contenu_audio_vidéo_page_web +tags: + - Audio + - Beginner + - Guide + - HTML + - Video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment intégrer des éléments vidéo et audio de premier rang, accessibles à chacun, quelle que soit la méthode utilisée.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir comment intégrer des éléments audio et vidéo dans une page web.</td> + </tr> + </tbody> +</table> + +<h2 id="L'audio_et_la_vidéo_sur_le_web">L'audio et la vidéo sur le web</h2> + +<p>Depuis toujours, les développeurs web ont intégré (ou tenté d'intégrer) des vidéos et des sons sur le Web. Après une longue période d'expérimentation, {{glossary("HTML5")}} offre aujourd'hui la meilleure solution et tire parti de nouvelles {{Glossary("API")}} {{Glossary("JavaScript")}} .</p> + +<p>Dans cet article, nous expliquerons comment intégrer des fichiers audio et vidéo dans des documents HTML. Nous prendrons le postulat de départ que vous avez déjà ces fichiers disponibles (la création de média n'est pas, à proprement parlé, du développement web et nous n'en parlerons donc pas dans cet article)</p> + +<p>Avant de commencer, précisons qu'il existe par ailleurs quelques fournisseurs de vidéos en ligne tels que <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> ou <a href="https://vimeo.com/">Vimeo</a>. Ces sites offrent un moyen pratique pour héberger ou consommer des vidéos et peuvent nous éviter d'avoir à penser à la consommation de bande passante. Ils permettent généralement d'utiliser des scripts JavaScript permettant d'embarquer les vidéos sur une page web. Cette méthode permet d'éviter certaines des difficultés que nous allons aborder, toutefois, cela ne correspond pas exactement au fait d'utiliser HTML pour fournir <strong>directement</strong> du contenu multimédia à vos utilisateurs.</p> + +<h2 id="Pour_commencer">Pour commencer</h2> + +<p>La façon la plus simple permettant d'intégrer un fichier multimédia dans une page web est d'utiliser l'élément {{htmlelement("audio")}} pour les fichiers sonores et l'élément {{htmlelement("video")}} pour les vidéos. Par exemple :</p> + +<pre class="brush: html"><audio src="exemple.ogg" controls></audio> +<video src="exemple.webm" width="375" height="280" controls></video> +</pre> + +<p>Ces deux éléments HTML possèdent quelques attributs permettant de contrôler le comportement des éléments :</p> + +<dl> + <dt>{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} (uniquement pour <code><video></code>)</dt> + <dd>Ces attributs permettent de contrôler la taille à utiliser pour la vidéo (des propriétés CSS peuvent également être utilisées). Dans tous les cas, les vidéos garderont leur ratio « hauteur / largeur » de départ (des bandes noires viendront occuper l'espace vide).</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd> + <p>Les utilisateurs doivent être en mesure de contrôler la lecture de la vidéo ou du son (ce point est notamment critique pour les personnes <a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie#.C3.89pid.C3.A9miologie">epileptiques</a>). Il faut donc utiliser l'attribut <code>controls</code> pour que le navigateur fournisse les contrôles natifs ou alors construire votre propre interface, grâce à <a href="/fr/docs/Web/API/HTMLMediaElement">l'API JavaScript appropriée</a>. L'interface utilisateur devra, au minimum, fournir un moyen de lancer la lecture, de l'arrêter et d'ajuster le volume.</p> + </dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>Cet attribut permet de lancer la vidéo ou la piste audio dès qu'elle est chargée et lors du chargement de la page. Attention, de nombreux utilisateurs peuvent trouver ce comportement « agressif ».</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>Cet attribut permet de lire la piste audio ou la vidéo en boucle, en la relançant automatiquement une fois qu'elle a fini. Attention également à utiliser cet attribut avec précaution.</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>Cet attribut permet de lancer le média avec le son désactivé par défaut.</dd> + <dt>{{htmlattrxref("poster","video")}} (video only)</dt> + <dd>Cet attribut fournit l'URL d'une image à afficher avant de lancer la vidéo.</dd> +</dl> + +<h2 id="Déjouer_les_pièges_des_codecs">Déjouer les pièges des codecs</h2> + +<h3 id="Le_problème_les_navigateurs_supportent_différents_codecs">Le problème : les navigateurs supportent différents codecs</h3> + +<p>Les <strong>{{Glossary("Codec","codecs")}}</strong> (tels que Vorbis ou H.264) permettent de convertir du son et de la vidéo en chiffres binaires et aussi de réaliser la conversion inverse. Mais si on ne dispose pas du bon codec, les données exprimées en binaires seront inexploitables.</p> + +<div class="note"><strong>Les formats de type « conteneur »</strong> (tel que Ogg) : ces formats font référence à la façon dont les données d'images, de son et les méta-données sont regroupées (« empaquetées ») dans un seul fichier. Le support pour les différents types de conteneur est un problème à part entière mais généralement, les systèmes supportenent les formats de conteneurs associés aux codex qu'ils supportent (par exemple Ogg empaquète de l'audio au format Vorbis et de la vidéo au format Theora ; WebM regroupe le plus souvent de l'audio au format Vorbis avec de la vidéo au format VP8/VP9 ; MP4, quant à lui, empaquète de l'audio AAC et de la vidéo H.26).</div> + +<p>Malheureusement, les navigateurs ne supportent pas tous les mêmes codecs, il faut donc, la plupart du temps, fournir différents fichiers pour les différents formats.</p> + +<h3 id="Quels_formats_fournir">Quels formats fournir ?</h3> + +<p>Le format <strong>MP3 </strong>(pour l'audio) et le format <strong>MP4/H.264</strong> (pour la vidéo) sont très largement supportés. Cepedant, des brevets américains portent sur le format MP3 jusqu'en 2017 au minimum et sur le format H.264 jusqu'en 2027 au minimum. Beaucoup de personnes préfèrent éviter d'utiliser des logiciels restreints à ces brevets, c'est pour cela qu'il est nécessaire de mettre à disposition les fichiers multimédia dans des formats libres (tel qu'<a href="http://xiph.org/vorbis/">Ogg Vorbis</a> pour l'audio et <a href="http://www.webmproject.org/">WebM</a> pour la vidéo).</p> + +<p>Dans un monde idéal, à la façon de Wikipédia, il suffirait de fournir les fichiers uniquement dans ces formats ouverts. Cependant, des navigateurs comme Safari et Microsoft Edge (sans parler d'Internet Explorer) ne supportent pas ces formats. Cela laisserait donc beaucoup d'utilisateurs potentiels sur le banc.</p> + +<p>Pour plus de détails sur cette compatibilité, consultez notre <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">tableau de compatibilité pour les codecs audio</a> et notre <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité pour les codecs audio-vidéo</a>.</p> + +<h3 id="Comment_fournir_le_même_contenu_sous_plusieurs_formats">Comment fournir le même contenu sous plusieurs formats ?</h3> + +<p>HTML fournit l'élément {{htmlelement("source")}} qui peut être utilisé avec l'attribut {{htmlattrxref("src","source")}}. Cet attribut, <code>src</code>, ne doit pas être placé au sein même de l'élément <code><video></code> ou <code><audio></code> car il remplacerait alors le contenu déclaré dans les éléments <code><source></code>. Voici un exemple :</p> + +<pre class="brush: html"><audio controls> + <source src="exemple.mp3" type="audio/mpeg"> + <source src="exemple.ogg" type="audio/ogg"> +</audio></pre> + +<div class="note"> +<p>Assurez-vous de ne pas oublier l'attribut {{htmlattrxref("type","source")}}. S'il manque, les navigateurs chargeront et essaieront chaque fichier, ce qui prendra plus de temps et consommera plus de ressources. <code>type</code> permet aux navigateurs de sauter tous les fichiers qu'ils ne peuvent pas lire. Dans <a href="/en-US/docs/Web/HTML/Supported_media_formats">cet article sur les formats de médias supportés</a>, les {{glossary("type MIME","types MIME")}} les plus communs sont explicités.</p> +</div> + +<h2 id="Les_transcriptions_et_les_sous-titres">Les transcriptions et les sous-titres</h2> + +<p>Transcrire signifie ici qu'on écrit les dialogues oraux sont forme de texte.</p> + +<p>De nombreuses personnes ne peuvent pas (ou ne veulent pas) utiliser des contenus audio ou vidéos (par exemple dans un environnement bruyant ou dans une bibliothèque). Pour que votre site puisse être consulté par ces visiteurs, il est donc nécessaire de fournir une transcription textuelle du média ainsi qu'une « piste » de texte qui s'affiche en même temps que la vidéo. Cela prend du temps à réaliser mais cela en vaut le coût..</p> + +<p>Les pistes textuelles permettent également d'avoir un meilleur impact pour le référencement ({{glossary("SEO")}}) car les moteurs de recherches utilisent principalement le contenu textuel. Un dialogue d'une vidéo pourra donc être référencé s'il est transcrit.</p> + +<h3 id="Les_pistes_textuelles">Les pistes textuelles</h3> + +<p>Les chaînes de texte affichées durant une vidéo peuvent prendre différentes formes, dont voici les principales :</p> + +<dl> + <dt>Les sous-titres</dt> + <dd>La traduction des dialogues à l'écrit, éventuellement dans une langue autre que celle parlée dans la vidéo.</dd> + <dt>La description</dt> + <dd>Une transcription synchronisée des dialogues et les descriptions des sons entendus dans la vidéo (ce qui permet aux personnes de regarder un film sans le son par exemple)</dd> + <dt>L'audio-description</dt> + <dd>Du texte, décrivant les scènes qui est fourni en audio (notamment pour les personnes souffrant d'une déficience visuelle).</dd> +</dl> + +<p>HTML permet d'inclure facilement de telles pistes :</p> + +<ol> + <li><a href="/fr/docs/Web/API/Web_Video_Text_Tracks_Format">Il faut écrire un ou plusieurs fichiers texte WebVTT.</a> Un fichier WebVTT contient les textes à utiliser et définit à quels moment ces textes doivent apparaître ou disparraître (dans ces cas, avoir une bonne transcription dès le début aide énormément).</li> + <li>Puis lier le ou les fichiers WebVTT à l'élément {{htmlelement("track")}}. <code><track></code> se place dans les éléments <code><audio></code> ou <code><video></code> et est situé après les éléments <code><source></code>. L'attribut {{htmlattrxref("kind","track")}} doit être utilisé pour indiquer s'il s'agit de <code>subtitles</code> (sous-titres), <code>captions</code> (description) ou de <code>descriptions</code> (audio description). L'attribut {{htmlattrxref("srclang","track")}} peut également être utilisé pour compléter et indiquer au navigateur le langage utilisé pour les sous-titres.</li> +</ol> + +<p>Voici un exemple :</p> + +<pre class="brush: html"><video controls> + <source src="exemple.mp4" type="video/mp4"> + <source src="exemple.webm" type="video/webm"> + <track kind="subtitles" src="sous-titres-en.vtt" srclang="en"> +</video></pre> + +<p>Pour plus de détails, n'hésitez pas à lire <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">l'article décrivant comment ajouter des sous-titres et légendes à une vidéo HTML5</a>.</p> + +<h2 id="Contenu_de_secours_pour_les_navigateurs_historiques">Contenu de secours pour les navigateurs historiques</h2> + +<p>Il est possible d'ajouter un contenu qui sera utilisé dans le cas où le navigateur ne connaît pas ces éléments HTML5. Ce contenu doit être ajouté avant la balise de fermeture. Il est par exemple possible d'ajouter un lien de téléchargement vers le fichier média :</p> + +<pre class="brush: html"><video src="exemple.webm" controls> + <track kind="captions" src="captions.vtt" srclang="fr"> + <a href="exemple.webm">Télécharger la vidéo</a> +</video></pre> + +<p>Un lien de téléchargement n'est pas parfaitement adapté pour tous les utilisateurs (notamment pour ceux qui sont sur des mobiles) mais c'est une meilleure solution que d'indiquer uniquement que le navigateur doit être mis à jour. <a href="https://dev.opera.com/articles/html5-video-flash-fallback-custom-controls/">Il existe des techniques plus avancées pour répondre à ce cas</a> mais une solution rapide à mettre en œuvre consiste à utiliser les plateformes vidéos évoquées au début de cet article, qui fournissent un script tiers fonctionnel.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Un guide plus détaillé</a></li> + <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 sous-titres à une vidéo HTML5</a></li> +</ul> diff --git a/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html new file mode 100644 index 0000000000..943ea7da86 --- /dev/null +++ b/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html @@ -0,0 +1,153 @@ +--- +title: Ajouter du contenu Flash dans une page web +slug: Apprendre/HTML/Comment/Ajouter_contenu_Flash_dans_page_web +tags: + - Accessibility + - Advanced + - Flash + - Guide + - HTML +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements +--- +<div class="summary"> +<p>Cet article illustre pourquoi il est nécessaire que le contenu d'une page web soit accessible sans plugin. Si vous avez besoin de tels plugins (pour un cas bien spécifique ou pour des raisons historiques), nous illustrerons également un cas expliquant comment intégrer du contenu de cette façon.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez savoir <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML basique</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Cet article aborde les méthodes pour insérer du contenu, dépendant d'extensions tierces, dans une page web.</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p><strong>Résumé :</strong> Des plugins comme Flash représentent une technologie passée, notamment sur les appareils mobiles où ils ne sont pas disponibles. Les navigateurs destinés aux ordinateurs de bureau<a href="http://arstechnica.com/information-technology/2015/04/chrome-starts-pushing-java-off-the-web-by-disabling-plugins/"> vont également abandonner leur support</a>.</p> +</div> + +<h2 id="Tourner_son_clavier_sept_fois_sur_son_bureau_avant_de_dépendre_de_plugins_tiers">Tourner son clavier sept fois sur son bureau avant de dépendre de plugins tiers</h2> + +<p>Un <a href="/fr/Add-ons/Plugins"><strong>plugin</strong></a> est un logiciel qui permet d'accéder à un contenu que le navigateur ne peut pas lire/décoder nativement. Il était une fois, les plugins étaient indispensables sur le Web. Il y a quelques années, installer Adobe Flash Player était un passage obligé pour regarder un film en ligne. À cette époque, on avait également de (trop) nombreuses alertes pour mettre à jour Flash Player ou Java Runtime Environment.</p> + +<p>Depuis, les technologies web ont grandi et aquis une certaine maturité et une certaine robustesse. Pour la plupart des application, il est donc temps d'arrêter de dépendre de ces plugins et de tirer parti des technologies web. Cela permettra :</p> + +<ul> + <li><strong>D'élargir votre audience à toutes les personnes qui ont un navigateur. </strong>Tout le monde a un navigateur, les plugins sont beaucoup plus rare, notamment pour les utilisateurs mobiles. Le Web était devenu largement utilisable sans plugins, les gens iront sans aucun doute sur un autre site web concurrent plutôt que d'installer un plugin supplémentaire.</li> + <li><strong>De vous épargner <a href="http://webaim.org/techniques/flash/">les maux de tête liés à l'accessibilité</a> et aux plugins comme Flash ou les autres.</strong></li> + <li><strong>De rester à l'abri de failles de sécurités répétées. </strong>Il est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">de notoriété publique qu'Adobe Flash est peu sécurisé</a> et ce malgré les nombreux correctifs apportés au cours du temps. En 2015, Alex Stamos, le responsable de la sécurité informatique de Facebook a même demandé à Adobe <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">d'arrêter le développement de Flash.</a></li> +</ul> + +<p>Que faire ? Si vous avez besoin d'une certaine intéractivité sur votre page, {{glossary("JavaScript")}} vous permettra sans aucun doute d'accomplir ce dont vous avez besoin, sans avoir à utiliser d'applets Java ou de composants ActiveX/BHO. Plutôt que d'utiliser Adobe Flash, vous pouvez utiliser <a href="/fr/Apprendre/HTML/Howto/Add_audio_or_video_content_to_a_webpage">la vidéo HTML5</a> pour les cas où vous avez besoin de 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 réaliser des images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Plusieurs années auparavant, Peter Elst écrivait déjà</a> qu'Adobe Flash était rarement le meilleur outil pour développer sur le Web, notamment pour les jeux et les applications d'entreprises. En ce qui concerne ActiveX, même le navigateur de Microsoft, {{glossary("Microsoft Edge","Edge")}}, ne le supporte plus.</p> + +<h2 id="L'histoire_de_deux_balises">L'histoire de deux balises</h2> + +<p>Si vous devez dépendre de plugins pour un cas spécifique ou lié au cadre d'une entreprise donnée, HTML fournit deux élément pour intégrer du contenu provenant d'un plugin : {{htmlelement("embed")}} et {{htmlelement('object')}}. Il faut noter qu'<code><embed></code> est un élément vide, à la différence de <code><object></code>.</p> + +<p>Il faudra donc utiliser les attributs pour fournir certaines informations :</p> + +<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>L'{{glossary("URL")}} du contenu à intégrer</td> + <td>{{htmlattrxref('src','embed')}}</td> + <td>{{htmlattrxref('data','object')}}</td> + </tr> + <tr> + <td>Le type {{glossary("MIME")}} <em>précis</em> du contenu à intégrer</td> + <td>{{htmlattrxref('type','embed')}}</td> + <td>{{htmlattrxref('type','object')}}</td> + </tr> + <tr> + <td>La hauteur et la largeur, exprimées en pixels CSS, de la boîte contrôlée par le plugin</td> + <td>{{htmlattrxref('height','embed')}}<br> + {{htmlattrxref('width','embed')}}</td> + <td>{{htmlattrxref('height','object')}}<br> + {{htmlattrxref('width','object')}}</td> + </tr> + <tr> + <td>Les noms et valeurs à founir comme paramètres au plugin</td> + <td>Des attributs <em>ad hoc</em> avec les noms et les valeurs</td> + <td>Des éléments sur une seule balise {{htmlelement("param")}} contenus dans la balise <code><object></code></td> + </tr> + <tr> + <td>Du contenu HTML indépendant à utiliser en secours au cas où la ressource à intégrer n'est pas disponible</td> + <td>Non supporté (<code><noembed></code> est obsolète)</td> + <td>Contenus dans la balise <code><object></code>, après les éléments <code><param></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><code><object></code> a besoin d'un attribut <code>data</code> ou d'un attribut <code>type</code> ou des deux. SI vous utilisez les deux, il faudra peut être utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox à l'heure où cet article est écrit). <code>typemustmatch</code> permet au contenu intégré de ne pas être lancé tant que l'attribut <code>type</code> ne correspond pas au type du média. <code>typemustmatch</code> permet ainsi d'apporter beaucoup plus de sécurité lorsqu'on intègre du contenu provenant d'une autre {{glossary("origine")}} (cela peut empêcher des attaquants malveillants de lancer des scripts modifiés au travers du plugin).</p> +</div> + +<p>Les deux exemples utilisent chacun <code><embed></code> ou <code><object></code> pour insérer un film Flash, <code><object></code> permet également de gérer un contenu à utiliser en cas de secours :</p> + +<pre class="brush: html"><embed + src="explosion.swf" + type="application/vnd.adobe.flash-movie" + width="500" + height="300" + bgcolor="#ff7f00" + allowfullscreen="true" +/></pre> + +<pre class="brush: html"><object + data="explosion.swf" + type="application/vnd.adobe.flash-movie" + width="500" + height="300" + typemustmatch> + <param name="bgcolor" value="#ff7f00" /> + <param name="allowfullscreen" value="true" /> + + <p>Le film Flash n'a pu être trouvé.</p> +</object> +</pre> + +<p>Afin d'être tout à fait complet, voici deux exemples supplémentaires. Encore une fois, il est (de loin) préférable d'utiliser JavaScript que des applets Java car le navigateur exécutera directement le code JavaScript sans passer par un environnement tiers, lourd. Ceci étant dit, voilà comment utiliser l'élément <code><object></code> pour insérer une applet Java :</p> + +<pre class="brush: html"><object + data="mon_applet.jar" + type="application/x-java-applet"> + <param name="code" value="MaClasseJava"> + + <p>Java n'est pas disponible ou est désactive.</p> +</object> +</pre> + +<p>Un autre cas où on a besoin de faire appel à <code><object></code> : les fichiers PDF. Ces fichiers posent de nombreux <a href="http://webaim.org/techniques/acrobat/acrobat">problèmes d'accessibilité</a>, notamment pour les utilisateurs qui utilisent un petit écran. Il ne devrait pas être absolument nécessaire de lire un PDF pour consulter un site web (imaginez si tous les sites web étaient uniquement disponibles en largeur fixe). Toutefois, si vous avez besoin d'intégrer un contenu PDF, voici comment le faire dans votre page web :</p> + +<pre class="brush: html"><object + data="mon_fichier.pdf" + type="application/pdf" + width="100%" + height="100%" + typemustmatch> + <p>Vous n'avez pas de plugin pour lire des fichiers PDF mais vous pouvez + <a href="mon_fichier.pdf">télécharger le fichier PDF correspondant.</a></p> +</object> +</pre> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li><a href="http://webaim.org/techniques/flash/">L'accessibilité avec Flash</a></li> + <li>{{htmlelement('object')}}</li> + <li>{{htmlelement('embed')}}</li> + <li><a href="https://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash">Comparaison entre HTML5 et Flash</a> sur Wikipédia (en anglais)</li> + <li><a href="http://www.flashsucks.org">flashsucks.org</a>, <a href="http://www.occupyflash.org">occupyflash.org</a> (en anglais) (pour expliciter, encore plus si besoin, les raisons pour lesquelles Flash est très déconseillé)</li> +</ul> diff --git a/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_à_une_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_à_une_page_web/index.html new file mode 100644 index 0000000000..8aa1cd799b --- /dev/null +++ b/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_à_une_page_web/index.html @@ -0,0 +1,272 @@ +--- +title: Images adaptatives +slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web +tags: + - Design + - Débutant + - Graphics + - Guide + - HTML + - Image + - Intermediate + - Intermédiaire + - img + - picture + - sizes + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div>{{LearnSidebar}}</div> + +<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> + +<div> +<p class="summary">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 part (elles préparent le terrain) dans la conception de sites Web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un futur module au sujet des CSS.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez savoir <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML simple</a> et <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">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 {{htmlattrxref("srcset", "img")}} et l'élément {{htmlelement("picture")}} 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> + +<p>Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site Web classique a probablement une image d'en-tête pour flatter le regard du visiteurs, plus peut-être quelques images de contenu plus loin. Vous voulez probablement 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. Voyons un exemple simple :</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez <a href="http://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> + +<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 px 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 px.</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> + +<p>Tout cela c'est très bien, mais le problème vient quand 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 à distinger les personnes !</p> + +<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></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âtisses, 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> + +<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="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a>, une image matricielle paraît grenue et horrible si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les utilisateurs de mobiles en particulier ne veulent pas cramer de 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> + +<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> + +<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és dans l'exemple ci-dessus.</p> + +<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> + +<div class="note"> +<p><strong>Note </strong>: Toutes les nouvelles fonctionnalités présentées dans cet article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sont toutes prises en charge dans les parutions d'explorateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris l'explorateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer.) </p> +</div> + +<h2 id="Comment_créer_des_images_adaptatives">Comment créer des images adaptatives ?</h2> + +<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 {{htmlelement("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 <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> + +<h3 id="Commutations_de_résolution_tailles_différentes">Commutations de résolution : tailles différentes</h3> + +<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 {{htmlelement("img")}} vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :</p> + +<pre class="brush: html notranslate"><img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"></pre> + +<p>Mais il est possible d'utiliser deux nouveaux attributs — {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} — permettant de fournir plusieurs images source avec des indications pour permettre à l'explorateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier <a href="http://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> + +<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg 320w, + elva-fairy-480w.jpg 480w, + elva-fairy-800w.jpg 800w" + sizes="(max-width: 320px) 280px, + (max-width: 480px) 440px, + 800px" + src="elva-fairy-800w.jpg" alt="Elva habillée en fée"></pre> + +<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 en revue leur contenu maintenant :</p> + +<p><strong><code>srcset</code></strong> definit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :</p> + +<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> + +<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="https://developer.mozilla.org/en-US/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> + +<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 (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). L'explorateur 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> + +<p>Ainsi, une fois ces attributs en place, l'explorateur va :</p> + +<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> + +<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 utilisateurs de mobiles d'économiser beaucoup de bande passante.</p> + +<p>Les explorateurs 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 {{htmlattrxref("src", "img")}}.</p> + +<div class="note"> +<p><strong>Note </strong>: Dans l'élément {{htmlelement("head")}} du document, vous trouvez la ligne <code><meta name="viewport" content="width=device-width"></code> : ceci force les explorateurs de mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains explorateurs de mobile 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. Nous vous en dirons plus à ce propos dans un module à venir.)</p> +</div> + +<h3 id="Outils_de_développement">Outils de développement</h3> + +<p>Il y a quelques outils de développement utiles dans les navigateurs pour vous aider à déterminer les largeurs d'affichage nécessaires, etc, que vous devez utiliser. Pour les déterminer, j'ai d'abord chargé la version non adaptative de l'exemple (<code>not‑responsive.html</code>), puis je suis allé dans <a href="https://developer.mozilla.org/fr/docs/Tools/Responsive_Design_Mode">Responsive Design View </a>(<em>Outils > Développement Web > Vue adaptative</em>), qui vous permet de regarder les mises en page Web comme si elles étaient visualisées à travers un éventail de tailles d'écran d'appareils différents.</p> + +<p>J'ai réglé la largeur de la fenêtre à 320px puis 480px ; pour chacun, je suis allé dans l'<a href="https://developer.mozilla.org/fr/docs/Tools/Page_Inspector">inspecteur DOM</a>, j'ai cliqué sur l'élément {{htmlelement("img")}}} qui nous intéresse, puis j'ai regardé sa taille dans l'onglet Box Model View sur le côté droit de l'écran. Cela devrait vous donner les largeurs intrinsèques d'image dont vous avez besoin.</p> + +<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p> + +<p>Ensuite, vous pouvez vérifier si <code>srcset</code> fonctionne en réglant la largeur de la fenêtre sur ce que vous voulez (par exemple une largeur étroite), en ouvrant Network Inspector (<em>Outils > Développement Web > Réseau</em>), puis en rechargeant la page. Ceci devrait vous donner une liste des ressources téléchargées pour dresser la page web, et ici vous pouvez vérifier quel fichier image a été choisi pour le téléchargement.</p> + +<div class="note"> +<p><strong>Note : </strong>Utilisez Mozilla Firefox pour tester <code>srcset</code>. Chrome charge la meilleure image dans le cache de l'explorateur, ce qui empêche de la tester dans les outils de développement.</p> +</div> + +<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Commutation_de_résolution_même_taille_résolutions_differentes">Commutation de résolution : même taille, résolutions differentes</h3> + +<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="http://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> + +<pre class="brush: html notranslate"><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> + +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">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> + +<pre class="brush: css notranslate">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> + +<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 {{htmlelement("picture")}} nous permet d'implémenter ce type de solution.</p> + +<p>Revenons à notre exemple initial du fichier <a href="http://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> + +<pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"></pre> + +<p>Arrangeons cela avec {{htmlelement("picture")}}} ! Comme pour <code><vidéo></code> et <code><audio></code>, l'élément <code><picture></code> est une enveloppe conteneur de plusieurs éléments {{htmlelement("source")}}} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément {{htmlelement("img")}}}. Le code dans <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> ressemblera à :</p> + +<pre class="brush: html notranslate"><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> + +<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 élement <code><picture></code> element, 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 un repli pour les navigateurs qui ne prennent pas en charge l'élément <code><picture></code>.</li> +</ul> + +<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> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<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> + +<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 {{htmlelement("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é. A 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> + +<ul> +</ul> + +<h3 id="Utilisez_largement_les_formats_dimage_modernes">Utilisez largement les formats d'image modernes</h3> + +<p>Il existe plusieurs nouveaux formats d'image très interessants (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> + +<p><code><picture></code> nous permet de servir encore les plus vieux explorateurs. Vous pouvez indiquer le type MIME dans les attributs <code>type</code> de façon à ce que l'explorateur puisse immédiatement rejeter les types de fichiers non pris en charge :</p> + +<pre class="brush: html notranslate"><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> + +<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> + +<h2 id="Apprentissage_actif_mise_en_œuvre_de_vos_images_adaptatives">Apprentissage actif : mise en œuvre de vos images adaptatives</h2> + +<p>Pour cet apprentissage actif, nous attendons que vous soyiez courageux et que vous y alliez seul.... la plupart du temps. Nous souhaitons que vous preniez une décision artistique en mettant en place vos propres écrans étroit et large en utilisant <image>, et un exemple de commutation de résolution en utilisant srcset.</p> + +<ol> + <li>Écrivez un HTML simple contenant votre code (utilisez <code>not-responsive.html</code> comme point de départ si vous voulez)</li> + <li>Trouvez une jolie image de paysage de grande largeur avec quelques détails à l'intérieur. Créez une version taille web de cette dernière avec un éditeur graphique, puis découpez en une partie plus petite qui zoome sur un des détails, et créez une deuxième image (une largeur de l'ordre de 480 px conviendra parfaitement).</li> + <li>Utilisez l'élément <code><picture></code> pour implémenter une bascule d'image en décision artistique !</li> + <li>Créez plusieurs fichiers image de tailles différentes, chacun montrant la même image.</li> + <li>Utilisez <code>srcset</code>/<code>size</code> pour créer un exemple de commutateur de résolution, soit pour servir une image de même taille avec différentes résolutions, ou diverses tailles d'images avec diverses largeur de vue.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong> : Utilisez les outils de développement du navigateur pour vous aider dans le choix des tailles dont vous avez besoin, comme mentionné plus haut.</p> +</div> + +<h2 id="Résumé">Résumé</h2> + +<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> + +<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 resout alors ce problème avec {{htmlelement("picture")}}.</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 resout ce problème avec l'utilisation de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a> (images SVG) ainsi qu'à l'aide des attributs {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}}.</li> +</ul> + +<p>Cet article est aussi la conclusion de l'ensemble du module <a href="https://developer.mozilla.org/en-US/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> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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 srcset</a> — comporte plus d'explications sur la façon dont l'explorateur retravaille l'image à utiliser</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<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> + +<div> +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et video</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écran d'accueil Mozilla</a></li> +</ul> +</div> diff --git a/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_à_une_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_à_une_page_web/index.html new file mode 100644 index 0000000000..a6ea2d91cc --- /dev/null +++ b/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_à_une_page_web/index.html @@ -0,0 +1,182 @@ +--- +title: Ajouter des images vectorielles à une page web +slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web +tags: + - Graphics + - Guide + - HTML + - Intermediate + - Learn + - SVG +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_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> + +<p> </p> + +<div class="summary"> +<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> +</div> + +<table class="learn-box 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> +</table> + +<h2 id="Qu'est-ce_que_SVG_Qu'apporte-t-il">Qu'est-ce que SVG ? Qu'apporte-t-il ?</h2> + +<p><a href="https://developer.mozilla.org/en-US/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> + +<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> + +<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> + +<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> + +<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> + +<div class="note"> +<p>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> + +<h2 id="La_méthode_rapide_htmlelement(img)">La méthode rapide : {{htmlelement("img")}}</h2> + +<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> + +<pre class="brush: html"><img + src="equilateral.svg" + alt="un triangle aux trois côtés égaux" + height="87px" + width="100px" /></pre> + +<h3 id="Avantages">Avantages</h3> + +<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> + +<h3 id="Inconvénients">Inconvénients</h3> + +<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")}} : + + <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> + +<div class="note"> +<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>). + + <pre class="brush: css"><code>background: url("image-de-secours.png");</code> +background-image<code>: url(image.svg); +background-size: contain;</code></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> + +<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> + +<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> + +<pre class="brush: html"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<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> + +<h3 id="Avantages_2">Avantages</h3> + +<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> + +<h3 id="Inconvénients_2">Inconvénients</h3> + +<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> + +<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> + +<p>Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :</p> + +<pre class="brush: html"><object data="parallelogramme.svg" + width="300" + height="250" + type="image/svg+xml"> + +<img src="parallelogramme.png" + alt="un quadrilatère dont les côtés sont parallèles deux à deux" /> + +</object> + +</pre> + +<h3 id="Inconvénients_3">Inconvénients</h3> + +<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> + +<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> + +<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> + +<p>Voici un rapide exemple :</p> + +<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> + +<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> + +<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> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<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> diff --git a/files/fr/apprendre/html/comment/ajouter_des_images_à_une_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_des_images_à_une_page_web/index.html new file mode 100644 index 0000000000..deaa8b3bd2 --- /dev/null +++ b/files/fr/apprendre/html/comment/ajouter_des_images_à_une_page_web/index.html @@ -0,0 +1,124 @@ +--- +title: Ajouter des images à une page web +slug: Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web +tags: + - Beginner + - Composing + - HTML + - NeedsActiveLearning + - OpenPractices +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage +--- +<p class="summary">Les images permettent de faire passer des messages plus simplement et plus directement. Elles attirent l'œil du visiteur lorsqu'il consulte le site. Dans cet articles, nous allons voir comment ajouter, simplement, des images à une page web.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre les méthodes simples qui permettent d'ajouter une image dans un document HTML.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Cet article illustre uniquement comment insérer une image statique. Attention à la taille des images que vous utilisez, elles doivent rester légères pour être efficacement affichées sur les appareils des personnes dont la connexion est lente ou dont les écrans sont petits. Si vous souhaitez adapter votre contenu en fonction de la taille de l'écran et notamment pour les grands écrans,<a href="/en-US/Learn/HTML/Howto/Add_responsive_image_to_a_webpage"> l'article sur les images adaptatives (responsive)</a> pourra vous intéresser.</p> +</div> + +<h2 id="Ce_dont_vous_avez_besoin">Ce dont vous avez besoin</h2> + +<p>Vous allez écrire un élément {{htmlelement("img")}}, mais pour remplir ses attributs correctement, il faut les informations correspondantes :</p> + +<ul> + <li>L'{{glossary("URL")}} (absolue ou relative) de l'image</li> + <li>Un équivalent textuel pour toute fonctionnalité ou information utile contenue dans l'image</li> + <li>La hauteur et la largeur qu'on souhaite donner à l'image dans la page (ce n'est pas <em>obligatoire</em> mais cela permet d'accélerer le rendu)</li> +</ul> + +<p>Une fois ces informations récoltées, vous pouvez écrire un élément <code><img></code> dans le code de votre page. <code><img></code> est un {{glossary("élément vide")}} et il n'y a donc pas de balise fermante <code></img></code>, il suffit uniquement de placer une barre oblique (<em>slash</em>) avant le chevron fermant de la balise : <code><img ... /></code>. Si votre image fournit une information ou une fonctionnalité, votre code devrait ressembler à :</p> + +<pre class="brush: html"><img + src="images/graphique-camembert.png" + alt="[ABC Tech posssède 75% de part de marché et XYZ 25%]" + height="300px" + width="300px" +/> +</pre> + +<p>Si l'image est strictement décorative ou que le contenu associé est déjà fourni par le texte de la page, l'attribut <code>alt</code> peut être laissé blanc :</p> + +<pre class="brush: html"><img src="images/licorne.png" alt="" /> +</pre> + +<div class="warning"> +<p><strong>Attention !</strong> La plupart des images sont couvertes par le droit d'auteur. <strong>Vous ne devez pas</strong> afficher une image sur votre page web sauf si</p> + +<ol> + <li>Vous possédez l'image, ou</li> + <li>Si vous avez reçu la permission écrite, explicite du propriétaire de l'image, ou</li> + <li>Si vous disposez de preuves comme quoi l'image appartient au domaine public</li> +</ol> + +<p>De plus, il ne faut <strong>jamais</strong> faire point l'attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre. Cela s'appelle du <em>"hotlinking"</em> : cela gaspille des ressources vers le site d'origine, ralentit votre page et vous empêche d'être sûr du contenu de votre page (l'image peut être remplacée à tout moment). En bref, c'est totalement immoral.</p> +</div> + +<p class="note">Il est possible de transformer une image en lien en imbriquant un élément {{htmlelement("img")}} dans un élément {{htmlelement("a")}}. Dans ce cas, il est préférable de s'assurer que l'image est plus grande qu'un carré de 45px sur 45 px (sinon les utilisateurs auront du mal à cliquer/appuyer dessus). Pour plus d'informations à ce sujet, <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink">voir notre tutoriel sur comment ajouter des hyperliens.</a></p> + +<p>Dans la suite de cet article, nous allons nous intéresser plus en détails à ce qui doit être utilisé pour les attributs <code>height</code>/<code>width</code>, <code>src</code>, et <code>alt</code>.</p> + +<h2 id="height_et_width"><code>height</code> et <code>width</code></h2> + +<p><code>height</code> et <code>width</code> ne doivent pas être utilisés pour redimensionner les images dans le navigateurs. Si vous utilisez ces attributs, les valeurs doivent correspondre à la taille réelle, exprimée en pixels, de l'image (votre éditeur d'image favori pourra vous fournir cette information si besoin). Si vous devez redimensionner l'image, utilisez un logiciel d'édition adapté.</p> + +<p>Si vous fournissez de mauvaises valeurs pour la hauteur et la largeur, l'image semblera déformée. Si la hauteur et la largeur sont trop grandes, l'image aura l'air pixélisée. Si elles sont trop petites, vous gaspillerez de la bande passante et du temps de calcul en chargeant une image plus grande que nécessaire.</p> + +<h2 id="src"><code>src</code></h2> + +<p>Vous pourriez fournir une {{glossary("URL")}} complète, composée d'un chemin <em>absolu</em> et d'un nom de fichier (par exemple <code>https://exemple.com/images/licorne.png</code>) mais cela n'a pas grand intérêt car il y a de très grandes chances que votre image se situe sur le même {{glossary("nom de domaine","domaine")}} que votre page web (encore une fois, le <em>hotlinking</em> est inacceptable).</p> + +<p>Si vous ne fournissez qu'un nom de fichier, le navigateur consultera le même dossier que celui du document HTML affiché. Si l'image n'est pas à cet emplacement, le navigateur abandonnera le chargement de l'image.</p> + +<p>La plupart du temps, vous aurez à utiliser un chemin <em>relatif </em>suivi d'un nom de fichier. C'est-à-dire qu'on écrit le chemin du fichier relativement à partir de l'endroit où la page est située. Pour ce chemin, on pourra utiliser deux points pour remonter d'un niveau de dossier (<code>../</code>) ou utiliser un seul point (<code>./</code>) pour faire référence au répertoire courant.</p> + +<p>Si, par exemple, la page web courante est <code>https://exemple.com/animaux/mythique.html</code> et que l'image se situe à <code>https://exemple.com/images/licorne.png</code>, vous pourrez écrire ce chemin relatif : <code>src="../images/licorne.png</code><code>"</code>.</p> + +<div class="note"> +<p>À des fins de référencement ({{glossary("SEO")}}), il est préférable de donner un nom descriptif pour le fichier (<code>licorne.png</code> sera mieux que <code>img835.png</code>). Google recommande également que l'ensemble des images soient placées dans un répertoire <code>images</code>.</p> +</div> + +<h2 id="alt"><code>alt</code></h2> + +<p>Il existe différents scénarios selon lesquels les visiteurs de votre site ne pourront profiter des images :</p> + +<ul> + <li>le fichier image est invalide ou le navigateur ne supporte pas ce type d'image</li> + <li>le chemin ou le nom de fichier fourni pour l'image est incorrect</li> + <li>les visiteurs utilisent des logiciels qui lisent l'écran</li> + <li>les visiteurs ont désactivé le chargement des images afin de réduire le volume de données transférées (point notamment valable pour les téléphones)</li> +</ul> + +<p>Autrement dit : les images ne doivent pas être primordiales pour votre site et le contenu textuel de celui-ci doit suffire entièrement.</p> + +<p>Si vous insérez des images dans votre site, vous devez utiliser un attribut <code>alt</code>. Sinon, le navigateur utilisera un motif neutre et inutile quand l'image ne pourra être affichée. Que faut-il donc écrire dans l'attribut <code>alt</code> ? Cela dépend avant tout du <em>rôle</em> de l'image dans la page (en d'autres termes : que perd-t-on comme information si l'image ne s'affiche pas).</p> + +<ul> + <li><strong>Décoration.</strong> Si l'image n'est utilisée que pour décorer, un attribut <code>alt</code> vide suffira (<code>alt=""</code>). Pour être tout à fait précis, les images décoratives ne devraient pas faire partie du code HTML mais des fichiers {{glossary("CSS")}} qui peuvent être utilisés pour gérer tout ce qui a trait à la présentation visuelle. Pour plus d'informations sur comment ajouter des images avec CSS, voir les pages sur {{cssxref('content')}} ou {{cssxref("background-image")}}.</li> + <li><strong>Contenu.</strong> Si votre image fournit des informations conséquentes, fournissez les mêmes informations grâce à un texte <em>bref</em> pour l'attribut <code>alt</code>. Mieux encore, fournissez l'information sous forme de texte dans la page web (auquel cas, il n'est pas nécessaire de réécrire l'information dans le texte utilisé pour <code>alt</code>).</li> + <li><strong>Lien.</strong> Si vous placez une image dans une balise {{htmlelement("a")}}, vous devez fournir <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">un texte alternatif pour le lien</a>. À vous de choisir si vous utilisez l'élément <code><a></code> ou l'attribut <code>alt</code> de l'image pour le faire.</li> + <li><strong>Texte.</strong> Vous ne devriez pas utiliser d'images qui contiennent du texte ! (si vous voulez réaliser des effets de style sur un texte, CSS est là pour ça. Dans le cas où vous devez le faire malgré tout, le texte doit être fourni dans l'attribut <code>alt</code>.</li> +</ul> + +<p>Le point-clé est de s'assurer que toutes les informations nécessaires sont contenues dans le texte de la page. Il ne faut pas qu'un visiteur qui ne voit pas les images réalise que quelque chose lui manque. Lors de l'écriture de votre page, vous pouvez tester en désactivant les images. Vous verrez par exemple que les expressions comme « une image de » ou « un logo de » sont assez peu utiles pour les textes alternatifs.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>L'élément {{htmlelement("img")}}</li> + <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li> + <li><a href="/fr/Apprendre/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Comment ajouter une carte de zones cliquables sur une image</a></li> +</ul> diff --git a/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html b/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html new file mode 100644 index 0000000000..33409556dc --- /dev/null +++ b/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html @@ -0,0 +1,72 @@ +--- +title: Annoter des images et graphiques +slug: Apprendre/HTML/Comment/Annoter_des_images_et_graphiques +tags: + - Accessibility + - Beginner + - Guide + - HTML + - Learn +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions +--- +<div class="summary"> +<p>HTML fournit une méthode simple pour ajouter des figures et leurs légendes.</p> +</div> + +<table class="learn-box nostripe 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>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment ajouter des figures à une page web, accompagnées de leurs légendes.</td> + </tr> + </tbody> +</table> + +<h2 id="Qu'est-ce_qu'une_figure">Qu'est-ce qu'une figure ?</h2> + +<p>Une figure est une unité de contenu indépendante :</p> + +<ul> + <li>qui exprime un message de façon claire et concise</li> + <li>qui pourrait être placée à différents endroits dans la structure linéaire de la page</li> + <li>qui fournit des informations essentielles pour appuyer le sens du texte principal</li> +</ul> + +<p>Si vous pensez qu'une légende doit être ajoutée à un contenu, c'est qu'il s'agit probablement d'une figure. Voici quelques exemples : des images, des fragments de code, des éléments audio ou vidéo, des équations, des tableaux, des diagrammes.</p> + +<p>Pour symboliser des figures, HTML fournit l'élément {{htmlelement("figure")}} :</p> + +<pre class="brush: html"><figure> + <img alt="MDN" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"> +</figure> +</pre> + +<h2 id="Ajouter_une_légende">Ajouter une légende</h2> + +<p>Pour ajouter une légende, il suffit de la placer dans un élément {{htmlelement("figcaption")}}, lui-même placé au sein de l'élément <code><figure></code> à côté d'une des deux balises <code><figure></code> :</p> + +<pre class="brush: html"><figure> + <img alt="" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"> + <figcaption>Le logo de MDN en 2014</figcaption> +</figure> +</pre> + +<p>{{htmlelement("figcaption")}} indique au navigateur et aux technologies d'assistance (telles que les lecteurs d'écran) que la légende décrit le contenu de l'élément {{htmlelement("figure")}}.</p> + +<div class="note"> +<p>Du point de vue de l'accessibilité, les légendes et les textes de l'attribut {{htmlattrxref('alt','img')}} ont deux rôles différents. Les légendes peuvent être utilisées par l'ensemble des visiteurs, qu'ils voient l'image ou non alors que le texte {{htmlattrxref('alt','img')}} n'est utilisé que lorsque l'image est absente.</p> + +<p>Pour cette raison, une légende et le texte <code>alt</code> ne devraient pas être identiques car les deux textes apparaissent lorsque l'image n'apparaît pas. Vous pouvez tester ce point en désactivant les images dans votre navigateur.</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("figure")}}</li> + <li>{{htmlelement("figcaption")}}</li> +</ul> diff --git a/files/fr/apprendre/html/comment/appliquer_du_css_à_une_page_web/index.html b/files/fr/apprendre/html/comment/appliquer_du_css_à_une_page_web/index.html new file mode 100644 index 0000000000..c8199d3a2d --- /dev/null +++ b/files/fr/apprendre/html/comment/appliquer_du_css_à_une_page_web/index.html @@ -0,0 +1,74 @@ +--- +title: Appliquer du CSS à une page web +slug: Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web +tags: + - Beginner + - CSS + - Guide + - HTML +translation_of: Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML +--- +<div class="summary"> +<p>Le code HTML d'une page web définit sa signification et sa structure. Le code CSS, quant à lui, permet de définir la mise en forme d'une page. Dans cet article, nous verrons comment appliquer du code CSS à un document HTML.</p> +</div> + +<table class="learn-box 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>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment appliquer une mise en forme CSS à un document HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="À_propos_de_CSS">À propos de CSS</h2> + +<p>Un document HTML bien écrit peut être utilisé quel que soit le contexte de présentation. Il est possible de le consulter visuellement (avec un navigateur), auditivement (avec un lecteur d'écran) ou tactilement (avec un affichage Braille). {{glossary("CSS")}} permet de contrôler l'aspect <em>visuel</em> d'un site web. Le navigateur pourra utiliser une feuille de style CSS par défaut, qui se traduira par une mise en forme générique (voire un peu austère) et il est donc préférable de déclarer une mise en forme propre à votre site web afin que celui-ci soit plus agréable à consulter.</p> + +<p>Dans cet article, nous verrons comment appliquer du CSS depuis le code HTML. Pour apprendre le fonctionnement du langage CSS, nous vous conseillons de démarrer avec <a href="/fr/docs/CSS/Premiers_pas">notre guide CSS</a>.</p> + +<p>Nous présenterons comment faire référence à une feuille de style CSS externe depuis le document HTML. Cette méthode est généralement la meilleure qui permette d'appliquer du CSS. En effet, une feuille de style centralisée permet d'avoir une mise en forme cohérente sur l'ensemble du site, de faciliter la maintenance du code et d'éviter de télécharger plusieurs ressources. Ceci étant dit, nous présenterons également deux autres méthodes ainsi que leurs avantages et inconvénients.</p> + +<h2 id="Référencer_une_feuille_de_style_externe">Référencer une feuille de style externe</h2> + +<p><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Une feuille de style</a> est un simple fichier texte contenant les règles CSS. Vous pouvez donc écrire une feuille de style avec votre éditeur de texte (de la même façon que vous pouvez rédiger un document HTML ou du code JavaScript). Une fois que vous avez écrit votre feuille de style, vous pouvez y faire référence depuis vos pages web grâce à un élément {{HTMLElement('link')}} :</p> + +<pre class="brush: html"><link href="styles/style.css" rel="stylesheet"></pre> + +<p>Il vous suffit de modifier l'URL de l'attribut <code>href</code> pour que celui-ci pointe vers votre feuille de style. L'attribut <code>rel="stylesheet"</code> et sa valeur sont nécessaires car l'élément {{HTMLElement('link')}} peut être utilisé dans d'autres cas. Tous les éléments {{htmlelement("link")}} doivent être placés au sein de l'élément {{HTMLElement('head')}} du document.</p> + +<h2 id="Intégrer_du_CSS_avec_<style>">Intégrer du CSS avec <code><style></code></h2> + +<p>L'élément {{htmlelement("style")}} permet d'écrire du CSS directement au sein du document HTML :</p> + +<pre class="brush: html"><style> +body { + background-color: pink; +} +</style></pre> + +<div class="note"> +<p><strong>Note :</strong> N'utilisez cette méthode que lorsqu'une page web doit être mise en forme de façon unique. Sinon, il est préférable d'utiliser une feuille de style unique pour économiser de la bande passante et avoir une mise en forme cohérente sur l'ensemble du site.</p> +</div> + +<h2 id="Écrire_du_CSS_inline_avec_l'attribut_style">Écrire du CSS <em>inline</em> avec l'attribut <code>style</code></h2> + +<p>Enfin, vous pouvez utiliser l'attribut <code>style</code> dans n'importe quel élément HTML. Le style ne s'appliquera qu'à l'élément courant :</p> + +<pre class="brush: html"><span style="color: red;">Non, tout mais pas ça !</span></pre> + +<div class="note"> +<p><strong>Attention :</strong> Cette méthode est un cauchemar de maintenance et peut grandement influencer la cascade CSS. Elle ne doit donc pas être utilisée, sauf pour tester rapidement quelques scénarios extrêmes (par exemple, lors de la conception d'e-mails en HTML à destination de clients e-mail qui s'avèreraient récalcitrants).</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("link")}}</li> + <li>{{htmlelement("style")}}</li> + <li><a href="/fr/docs/Web/HTML/Attributs_globaux/style">L'attribut <code>style</code></a></li> +</ul> diff --git a/files/fr/apprendre/html/comment/créer_un_document_html_simple/index.html b/files/fr/apprendre/html/comment/créer_un_document_html_simple/index.html new file mode 100644 index 0000000000..75549be43c --- /dev/null +++ b/files/fr/apprendre/html/comment/créer_un_document_html_simple/index.html @@ -0,0 +1,188 @@ +--- +title: Créer un document HTML simple +slug: Apprendre/HTML/Comment/Créer_un_document_HTML_simple +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<p class="summary">Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez avoir <a href="/en-US/Learn/Choose,_Install_and_set_up_a_text_editor">installé un éditeur de texte</a> et connaître <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">quelques rudiments de HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu.</td> + </tr> + </tbody> +</table> + +<p>Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="utf-8"> + <title>Inscrire un titre ici</title> + <!-- On peut avoir d'autres méta-données ici --> + </head> + <body> + <!-- Ici, on placera tout le contenu à destination + de l'utilisateur --> + </body> +</html></pre> + +<p>Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.</p> + +<h2 id="Qu'est-ce_qu'un_document_HTML">Qu'est-ce qu'un document HTML ?</h2> + +<p>Un document HTML ou <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web</a> est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("<>"), par exemple, dans l'exemple précédent <code><html></code> et <code><body></code> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <code><body></code> et une balise fermante correspondante : <code></body></code>). Un <strong><dfn>{{Glossary('élément')}}</dfn></strong> est une chaîne de texte entre deux balises.</p> + +<p>La plupart des programmes (le plus souvent des {{glossary("navigateur","navigateurs")}}) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.</p> + +<p>Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">éditeur de texte</a>. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et {{Glossary("Attribut","attributs")}} les plus communs. C'est le but de la <a href="/fr/Apprendre">zone d'apprentissage de MDN</a>.</p> + +<p>Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :</p> + +<ul> + <li>ce qu'est un {{glossary("doctype")}} et pourquoi c'est important</li> + <li>l'élément racine : {{htmlelement("html")}}</li> + <li>la différence entre les éléments placés dans {{htmlelement("head")}} et dans {{htmlelement("body")}}</li> + <li>l'importance de l'élément {{htmlelement("title")}}.</li> + <li>la définition du jeu de caractères à utiliser pour le document avec l'élément {{htmlelement("meta")}}.</li> +</ul> + +<h2 id="Le_doctype">Le <em>doctype</em></h2> + +<p>La chaîne de texte suivante est appelée {{Glossary("doctype")}} (qui est la contraction, anglaise, de « document » et « type »).</p> + +<pre class="brush: html"><!DOCTYPE html></pre> + +<p>En ce qui concerne HTML, le <em>doctype</em> est un reliquat historique. Pourquoi est-il alors toujours présent ?</p> + +<p>Si vous ne commencez pas votre document par <code><!DOCTYPE html></code>, les navigateurs afficheront votre document en <a href="/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p> + +<p>Le <em>doctype</em> déclenche l'utilisation du mode <em>standard</em>. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le {{glossary("W3C")}} et le {{glossary("WHATWG")}}. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.</p> + +<div class="warning"> +<p><strong>Attention :</strong> Le <em>doctype</em> doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.</p> +</div> + +<h2 id="L'élément_<html>">L'élément <code><html></code></h2> + +<p>Tout le document (en dehors du <em>doctype</em>) est contenu entre les balises <code><html></code> et <code></html></code>. Il ne peut y avoir qu'un seul élément {{HTMLElement('html')}} par document.</p> + +<div class="note"> +<p>Il est possible d'oublier <code><html></code> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <code><html></code> sera nécessaire. Par exemple, on utilise <code><html lang="fr"></code> pour indiquer que le document entier est écrit en français. De la même façon, <code><html></code> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.</p> +</div> + +<h2 id="Les_éléments_<head>_et_<body>">Les éléments <code><head></code> et <code><body></code></h2> + +<p>Au sein de l'élément <code><html></code>, le document aura une « tête » (<em>head</em> en anglais) située entre les balises <code><head></code> et <code></head></code> et un « corps » (<em>body</em> en anglais) situé entre les balises <code><body></code> et <code></body></code>.</p> + +<p>La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.</p> + +<p>Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.</p> + +<div class="note"> +<p>HTML est très souple à propos de la structure du document, si vous oubliez les éléments <code><head></code> et <code><body></code>, ils seront implicitement ajoutés. Voici un document sans <code><html></code> ni <code><head></code> ni <code><body></code> :</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>Ceci est un document HTML</title> + +Coucou monde ! (<i>Hello world!</i>) +</pre> + +<p>Le navigateur s'occupera de tout :</p> + +<p><img alt="[Screenshot of the browser making its best guess]" src="https://mdn.mozillademos.org/files/11675/Capture%20du%202015-10-04%2017-23-03.png" style="height: 254px; width: 873px;"></p> + +<p>Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <code><head></code> et où est <code><body></code>, vous gagnerez plus de temps.</p> +</div> + +<h2 id="L'élément_<title>_le_titre_du_document">L'élément <code><title></code> : le titre du document</h2> + +<p>Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Mon fabuleux exemple HTML</title> + ... + </head> + <body> + ... + </body> +</html></pre> + +<p>Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <code><title></code>).</p> + +<div class="note"> +<p>Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.</p> + +<p>S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :</p> + +<pre class="brush: html"><!DOCTYPE html> +<!-- Pas de titre ici --> +Hello world! +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Chrome</th> + <td><img alt="[Screenshot of a Chrome tab labeled ''index.html'']" src="https://mdn.mozillademos.org/files/10887/index-ch.png" style="height: 147px; width: 400px;"></td> + </tr> + </tbody> + <tbody> + <tr> + <th scope="col">Firefox</th> + <td><img alt="[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]" src="https://mdn.mozillademos.org/files/11143/index-ff.png"></td> + </tr> + </tbody> +</table> +</div> + +<dl> + <dt> + <h2 id="Définir_le_jeu_de_caractères_utilisé">Définir le jeu de caractères utilisé</h2> + </dt> +</dl> + +<p>Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.</p> + +<p>Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé {{glossary("UTF-8")}} qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001". </p> + +<p>D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <code><meta charset="utf-8"></code> dans l'exemple ci-avant.</p> + +<div class="note"> +<p><strong>Note :</strong> En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.</p> + +<p>Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :</p> + +<p><img alt="[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']" src="https://mdn.mozillademos.org/files/10907/index-encoding.png" style="height: 132px; width: 335px;"></p> +</div> + +<h2 id="Modèles_et_gabarits">Modèles et gabarits</h2> + +<p>Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).</p> + +<p>Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).</p> + +<div class="note"> +<p><strong>Astuce :</strong> Si votre éditeur de texte permet de gérer les <em>snippets</em> (fragments de code), vous pouvez placer votre modèle dans un <em>snippet</em> pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.</p> +</div> + +<div class="note"> +<p><strong>Astuce :</strong> À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet <a href="https://html5boilerplate.com/">HTML5 Boilerplate</a>. Celui-ci décrit des <em>templates</em> (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.</p> +</div> + +<h2 id="Exercices">Exercices</h2> + +<p>À construire, <a href="/fr/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">n'hésitez pas à contribuer !</a></p> diff --git a/files/fr/apprendre/html/comment/créer_un_hyperlien/index.html b/files/fr/apprendre/html/comment/créer_un_hyperlien/index.html new file mode 100644 index 0000000000..1e30213d1b --- /dev/null +++ b/files/fr/apprendre/html/comment/créer_un_hyperlien/index.html @@ -0,0 +1,191 @@ +--- +title: Créer un hyperlien +slug: Apprendre/HTML/Comment/Créer_un_hyperlien +tags: + - Beginner + - HTML + - Learn + - Navigation +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<p class="summary">Dans cet article, nous verrons comment créer des liens {{glossary('accessibilité','accessibles')}} et utiles au {{glossary("référencement")}}.</p> + +<table class="learn-box nostripe 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>. Il peut également être judicieux de se familiariser avec les <a href="/fr/Apprendre/Understanding_URLs">URL</a> et la notion d'<a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">hyperliens</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir comment mettre en place des liens accessibles et utiles au référencement.</td> + </tr> + </tbody> +</table> + +<p>La création de liens est une compétence clé sur le web. Dans cet article, nous verrons en détails l'élément {{htmlelement("a")}} et comment l'utiliser pour créer des liens forts.</p> + +<h2 id="Comment_créer_un_lien">Comment créer un lien</h2> + +<p>Pour fabriquer un lien, vous aurez <em>a minima</em> besoin d'une cible et d'un texte :</p> + +<dl> + <dt>cible</dt> + <dd>L'{{glossary("URL")}} de la destination du lien (par exemple, <code>"https://www.mozilla.org/firefox/products/</code>")</dd> + <dt>texte</dt> + <dd>Le texte qui décrit la destination offerte par le lien (dans le cas de l'exemple précédent, on pourrait écrire « Cette page présente les différents produits Firefox !")</dd> +</dl> + +<p>Le <em>texte</em> sera placé entre les balises {{htmlelement('a')}} et la <em>cible </em>sera la valeur de l'attribut {{htmlattrxref('href','a')}}. Mis bout à bout, on obtient ce code :</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/firefox/products/"> + Cette page présente les différents produits Firefox ! +</a></pre> + +<p>Cela affichera, sur la page web, le lien suivant :</p> + +<p><a href="https://www.mozilla.org/firefox/products/">Cette page présente les différents produits Firefox !</a></p> + +<div class="note"> +<p><strong>Astuce :</strong> Pour transformer une image en un lien, il suffit de placer l'élément de l'image entre les balises <code><a></code>.</p> + +<p>L'attribut <code>alt</code> de l'image ne doit pas seulement <strong>décrire</strong> l'image (« c'est une flèche vers la droite »), mais doit également <strong>indiquer aux visiteurs ce qui se produit en suivant le lien</strong> (« lire le prochain billet »). <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">Ce tutoriel explique comment insérer des images dans une page web.</a></p> +</div> + +<h3 id="Les_ancres_d'une_page">Les ancres d'une page</h3> + +<p>Il est également possible de créer un lien qui pointe vers un endroit spécifique d'un document. Cet endroit est appelé une ancre.</p> + +<ol> + <li>Ajoutez un attribut {{htmlattrxref("id")}} à l'élément cible. Par exemple, changez <code><h2></code> en <code><h2 id="les-ancres"></code>.</li> + <li>Dans l'URL du lien, placée dans l'attribut {{htmlattrxref("href","a")}}, ajoutez l'identifiant précédé d'un dièse (#) : <code><a href="http://www.exemple.com/index.html#les-ancres"></code></li> +</ol> + +<div class="note"> +<p><strong>Astuce :</strong> La plupart du temps, les visiteurs d'un site s'attendent à ce qu'un lien ouvre une<strong> nouvelle</strong> page au début de celle-ci (plutôt qu'à un endroit donné, au sein de la page). Certains visiteurs peuvent donc être désorientés lorsqu'ils suivent un lien avec une ancre.</p> + +<p>Si vous utilisez des liens avec des ancres, essayez de les mettre en forme afin que les visiteurs du site puissent les reconnaître. Si vous utilisez des ancres entre les pages d'un de vos sites, vous pouvez utiliser {{glossary("JavaScript")}} pour créer un effet de défilement doux.</p> +</div> + +<h3 id="Créer_un_lien_vers_une_ressource_à_télécharger">Créer un lien vers une ressource à télécharger</h3> + +<p>Il peut arriver qu'un lien soit utilisé pour télécharger un fichier plutôt que d'ouvrir une nouvelle page. L'attribut <code>download</code> peut être utilisé pour fournir un nom par défaut, à donner au fichier. Voici un exemple de lien de téléchargement pour télécharger Firefox 39 pour Windows :</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=fr" + download="installateur-firefox-39.exe"> + Téléchargez Firefox +</a></pre> + +<h2 id="Écrire_des_liens_accessibles">Écrire des liens accessibles</h2> + +<p>Ajouter des liens à une page est plutôt facile mais ce n'est pas tout. Les liens de vos pages doivent être <em>accessibles </em>à tous vos lecteurs, quel que soit le contexte de lecture et les outils qu'ils utilisent. Les visiteurs qui utilisent des lecteurs d'écran peuvent vouloir sauter de lien en lien, le texte d'un lien doit donc être compréhensible. Voici quelques règles et bonnes pratiques à mettre en œuvre.</p> + +<dl> + <dt>Le texte d'un lien doit être compréhensible seul</dt> + <dd> + <p>Les visiteurs qui utilisent des lecteurs d'écran passent de lien en lien. Les moteurs de recherche utilisent le texte des liens pour indexer les pages ciblées. Certains visiteurs regardent les liens plutôt que les autres textes. Pour ces raisons, le texte d'un lien doit avoir un sens sans aucun autre contexte.</p> + + <div class="note"> + <p><strong>Note :</strong> Dans notre exemple, le texte du lien commence par un verbe d'action. Cela permet au lecteur de sentir une progression dans ces actions et plus généralement de préciser le rôle du lien.</p> + </div> + + <p><em><strong>Texte compréhensible </strong>:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> + + <pre class="brush: html"><a href="https://firefox.com/"> + Télécharger Firefox +</a></pre> + + <p><em><strong>Mauvais exemple </strong>:</em> <a href="https://firefox.com/">Cliquez ici</a> pour télécharger Firefox</p> + + <pre class="brush: html"><a href="https://firefox.com/"> + Cliquez ici +</a> +pour télécharger Firefox +</pre> + </dd> + <dt>N'ajoutez pas « lien vers » dans le texte du lien</dt> + <dd> + <p>Cela n'apporte aucune plus-value. Les lecteurs d'écran indiquent que l'élément est un lien. Les visiteurs qui utilisent directement un navigateur voient que c'est un lien grâce au soulignement et à sa couleur distinctive (et c'est également pour cette raison qu'il ne faut pas retirer la mise en forme d'un lien).</p> + + <p><em><strong>Bon exemple </strong>:</em> <a href="https://developer.mozilla.org/Firefox_OS">En savoir plus sur Firefox OS</a></p> + + <pre class="brush: html"><a href="https://developer.mozilla.org/Firefox_OS"> + En savoir plus sur Firefox OS +</a></pre> + + <p><em><strong>Mauvais exemple </strong>:</em> Voici un <a href="https://developer.mozilla.org/Firefox_OS">lien sur Firefox OS</a></p> + + <pre class="brush: html">Voici un +<a href="https://developer.mozilla.org/Firefox_OS"> + lien sur Firefox OS +</a></pre> + </dd> + <dt>Indiquez la cible du lien plutôt que de copier-coller une URL</dt> + <dd> + <p>Les URL sont illisibles, encore plus lorsqu'elles sont lues par un lecteur d'écran, lettre par lettre.</p> + + <p><em><strong>Bon exemple </strong>:</em> <a href="https://careers.mozilla.org/university/">Candidatez pour un stage chez Mozilla</a></p> + + <pre class="brush: html"><a href="https://careers.mozilla.org/university/"> + Candidatez pour un stage chez Mozilla +</a></pre> + + <p><em><strong>Mauvais exemple :</strong></em> <a href="https://careers.mozilla.org/university/">https://careers.mozilla.org/university/</a></p> + + <pre class="brush: html"><a href="https://careers.mozilla.org/university/"> + https://careers.mozilla.org/university/ +</a></pre> + </dd> + <dt>Le texte d'un lien doit être concis</dt> + <dd> + <p>Les longs textes de lien font perdre en lisibilité et ralentissent la navigation avec les lecteurs d'écrans.</p> + <strong><em>Bon exemple </em></strong><em>:</em> Voici une page où vous pouvez <a href="https://www.mozilla.org/firefox/all/" title="Firefox can be download in 90 different languages for 4 different operating systems.">télécharger Firefox</a> + + <pre class="brush: html">Voici une page où vous pouvez +<a href="https://www.mozilla.org/firefox/all/"> + télécharger Firefox +</a> +</pre> + + <p><em><strong>Mauvais exemple </strong>:</em> Voici une page où <a href="https://www.mozilla.org/firefox/all/">vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents</a></p> + + <pre class="brush: html">Voici une page où +<a href="https://www.mozilla.org/firefox/all/"> + vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents +</a> +</pre> + </dd> + <dt>Indiquez à quoi correspond la cible du lien</dt> + <dd> + <p>Cela peut paraître évident mais on rencontre parfois des liens dont les textes n'ont rien à voir avec la destination. Soyez explicite, cela simplifiera la navigation pour vos lecteurs et améliorera votre référencement.</p> + + <p><em><strong>Bon exemple :</strong></em><a href="http://getfirefox.org/"> Téléchargez Firefox</a>, le navigateur développé par Mozilla : stable, sûr et rapide.</p> + + <p><em><strong>Mauvais exemple</strong> :</em> <a href="http://getfirefox.org/">Voici une autre application</a> qui améliorera votre navigation sur le Web.</p> + </dd> +</dl> + +<h2 id="Perfectionner_ses_liens">Perfectionner ses liens</h2> + +<dl> + <dt>Faites attention à l'ordre de navigation grâce aux tabulations</dt> + <dd>De nombreuses personnes utilisent le clavier pour naviguer sur une page web. La touche de tabulation est une des seules méthodes permettant de passer d'un lien à un autre. Par défaut, l'ordre de cette navigation correspondra à celui du document HTML. Toutefois, il est possible de surcharger cet ordre grâce à l'attribut {{htmlattrxref("tabindex")}}. Attention toutefois à bien utiliser CSS pour que l'ordre visuel (ou celui déterminé par un lecteur d'écran) soit logique pour le lecteur.</dd> + <dt>Gardez des liens suffisamment grands</dt> + <dd> + <p>Assurez-vous que vos liens puissent être déclenchés facilement, à la souris ou au toucher. CSS peut être utilisé pour cela. <a href="http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/">Une recherche basée sur l'expérience des utilisateurs</a> indique que les liens devraient mesurer 72 pixels (45px étant la taille minimale). Attention à ne pas oublier ce point, notamment si vous utilisez une souris ou un pad sur votre poste de travail.</p> + </dd> + <dt>Soulignez les liens et uniquement les liens</dt> + <dd>Lorsque les visiteurs d'un site voient un texte souligné, ils s'attendent à ce que ce texte soit un lien. Pour cette raison, ne soulignez que les liens. Il n'est pas strictement nécessaire de souligner les liens mais <a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F73">la couleur ne suffira pas</a> pour indiquer qu'un texte est un lien.</dd> + <dt>Utilisez une couleur distincte et identifiable pour vos liens</dt> + <dd>Le bleu est utilisé par défaut pour les liens. Vous pouvez utiliser une autre couleur mais celle-ci doit <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html">former un contraste suffisant avec l'arrière-plan.</a></dd> + <dt>Utilisez une mise en forme distincte pour les liens inhabituels</dt> + <dd>Utilisez CSS pour indiquer aux visiteurs que le lien a un comportement spécifique (un lien externe, un lien qui ouvre une page dans un nouvel onglet, un lien qui ouvre une page dans une autre langue). Voir également {{htmlattrxref("hreflang","a")}}). Sur MDN, par exemple, on ajoute un symbole devant les liens externes (par exemple <a href="https://en.m.wikipedia.org/wiki/Firefox_OS">l'article de Wikipédia sur Firefox OS</a>).</dd> + <dt>Fournissez des cibles et des textes pour tous les liens</dt> + <dd>S'il n'y a pas de texte, il ne sera pas possible de voir le lien et les lecteurs d'écran diront juste « lien fin lien ». S'il n'y a pas de cible (pas de {{htmlattrxref("href")}} ou un <code>href</code> vide ou <code>href="#"</code>), le lien ne mènera nulle part.</dd> +</dl> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>La documentation sur l'élément {{HTMLElement("a")}} dans la référence HTML.</li> +</ul> diff --git a/files/fr/apprendre/html/comment/créer_une_liste_d_éléments_avec_html/index.html b/files/fr/apprendre/html/comment/créer_une_liste_d_éléments_avec_html/index.html new file mode 100644 index 0000000000..22dc9776b6 --- /dev/null +++ b/files/fr/apprendre/html/comment/créer_une_liste_d_éléments_avec_html/index.html @@ -0,0 +1,170 @@ +--- +title: Créer une liste d'éléments avec HTML +slug: Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists +--- +<div class="summary"> +<p>Vous souhaitez ajouter une liste numérotée ou une liste à puces. Quel que soit son type, HTML permet de dresser une liste très rapidement.</p> +</div> + +<table class="learn-box nostripe 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>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à mettre en place des listes (ordonnées et non-ordonnées) avec HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Les_listes_non-ordonnées_et_les_listes_ordonnées">Les listes non-ordonnées et les listes ordonnées</h2> + +<dl> + <dt>Les listes non-ordonnées</dt> + <dd> + <p>Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance) :</p> + + <p><img alt="Croustille, moutarde" src="https://mdn.mozillademos.org/files/11639/3409407112_4348b68ea4_z.jpg" style="height: 281px; width: 423px;" title="Photo par Joseph SARDIN"></p> + + <p>(Photo par <a href="https://www.flickr.com/photos/14328577@N08/">Joseph SARDIN</a>)</p> + + <p>Les listes non-ordonnées apparaissent parfois à des endroits inattendus : les barres de navigation sont par exemple des listes non-ordonnées auxquelles on a appliqué quelques règles CSS pour la mise en forme.</p> + </dd> + <dt>Les listes ordonnées</dt> + <dd> + <p>Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée :</p> + <a href="https://www.flickr.com/photos/chiotsrun/4457386990/sizes/m/"><img alt="" src="https://farm3.staticflickr.com/2785/4457386990_4d30f85964_d.jpg" style="height: 344px; width: 500px;" title="© Chiot's Run"></a></dd> +</dl> + +<h2 id="Construire_des_listes_avec_HTML">Construire des listes avec HTML</h2> + +<p>Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?</p> + +<ul> + <li>Si oui, alors il faudra utiliser un élément {{HTMLElement('ol')}} pour créer une <strong>liste ordonnée.</strong></li> + <li>Sinon, il faudra utiliser un élément {{HTMLElement('ul')}} qui permettra de créer une <strong>liste non-ordonnée.</strong></li> +</ul> + +<h3 id="Ajouter_des_éléments_à_une_liste">Ajouter des éléments à une liste</h3> + +<p>Toute la liste sera placée dans les balises {{htmlelement("ol")}} ou {{htmlelement("ul")}}. Chacun des éléments de la liste sera placé à l'intérieur d'un élément {{htmlelement("li")}}. Voici un exemple qui contient les deux types de liste :</p> + +<pre class="brush: html"><h1>Guacamole rapide à faire</h1> + +<h2>Ingrédients</h2> +<ul> + <li>2 avocats (pelés et avec les noyaux retirés)</li> + <li>le jus d'un citron</li> + <li>¼ de concombre, coupé grossièrement</li> + <li>1 petite tomate, coupée</li> +</ul> + +<h2>Instructions</h2> +<ol> + <li>Écrasez délicatement les avocats avec une fourchette</li> + <li>Placez la purée obtenue dans un plat et arrosez avec le jus de citron</li> + <li>Mélangez pour que le jus de citron empêche la purée d'avocat de noircir</li> + <li>Mélangez la tomate et le concombre coupés</li> + <li>Gardez au frais et servir rapidement avec des tortillas</li> +</ol> +</pre> + +<p>Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :</p> + +<p>{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}</p> + +<h3 id="Comment_modifier_la_numérotation_ou_les_puces">Comment modifier la numérotation ou les puces</h3> + +<h4 id="Avec_HTML">Avec HTML</h4> + +<ul> + <li><strong>Pour commencer une liste avec un autre nombre que 1</strong>, on pourra utiliser l'attribut {{htmlattrxref('start','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol start="3"></code>.</li> + <li><strong>Pour décompter plutôt que compter </strong>(par exemple 5-4-3-2-1), on pourra utiliser l'attribut {{htmlattrxref('reversed','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol reversed></code>.</li> + <li><strong>Pour utiliser des lettres à la place des chiffres</strong>, on pourra utiliser l'attribut {{htmlattrxref('type','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol type="a"></code> (<code>type="1"</code> affichera des nombres, <code>="a"</code> pour utiliser des lettres minuscules, <code>="A"</code> pour utiliser des lettres majuscules, <code>="i"</code> pour utiliser les chiffres romains en minuscules, <code>="I"</code> pour utiliser les chiffres romains en majuscules).</li> + <li><strong>Pour changer la numérotation d'un élément donné</strong>, on pourra utiliser l'attribut {{htmlattrxref('value','li')}} de la balise {{HTMLElement('li')}} : <code><li value="5"></code> (les éléments <em>suivants</em> de la liste seront également renumérotés).</li> +</ul> + +<p>Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :</p> + +<pre class="brush: html"><ol start="3" type="A"> + <li>Je suis premier</li> + <li>Je suis deuxième</li> + <li>Je suis troisième</li> +</ol></pre> + +<p>Ce qui donne :</p> + +<p>{{EmbedLiveSample('Avec_HTML','100%',90)}}</p> + +<h4 id="Avec_CSS">Avec CSS</h4> + +<p>Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.</p> + +<ul> + <li><strong>Pour modifier le style de puce ou le style de numérotation, </strong>on pourra utiliser la propriété CSS {{cssxref("list-style-type")}}</li> + <li><strong>Pour utiliser une image donnée comme puce,</strong> on pourra utiliser la propriété CSS {{cssxref("list-style-image")}}. Attention toutefois, les images sont plus lourdes (donc plus lentes) et moins adaptatives que le texte.</li> +</ul> + +<p>CSS peut permettre d'obtenir des effets très complexes (comme <a href="/fr/docs/Web/CSS/Compteurs_CSS">un système de comptage personnalisé</a>). Si vous souhaitez apprendre CSS, vous pouvez parcourir <a href="/fr/docs/CSS/Premiers_pas">le Guide CSS</a> et voir <a href="/fr/Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web">comment appliquer des règles CSS à une page web</a>.</p> + +<p>Prenons un rapide exemple. Voici une liste HTML non-ordonnée :</p> + +<pre class="brush: html"><ul> + <li>J'ai un point</li> + <li>J'ai un cercle</li> + <li>J'ai aussi un cercle</li> +</ul></pre> + +<p>Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :</p> + +<pre class="brush: css">ul { + list-style-type: circle; +} + +li:first-child { + list-style-type: disc; +} +</pre> + +<p>Ce code donnera :</p> + +<p>{{EmbedLiveSample('Avec_CSS','100%',90)}}</p> + +<h3 id="Les_listes_imbriquées">Les listes imbriquées</h3> + +<p>On voit souvent plusieurs listes placées les unes dans les autres. Autrement dit, on peut imbriquer des listes (un élément d'une liste sera une liste entière) :</p> + +<pre class="brush: html"><ul> + <li>Un composant</li> + <li>Un processus : + <ol> + <li>Étape 1</li> + <li>Étape 2</li> + <li>Étape 3</li> + </ol> + </li> + <li>Un composant</li> +</ul> +</pre> + +<p>Cela donnera le résultat suivant :</p> + +<p>{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}</p> + +<p>Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">inspecter le code HTML</a> du menu MDN qui se situe en haut de cette page.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("li")}}</li> + <li><a href="http://www.w3.org/TR/html4/struct/lists.html#h-10.1">Des recommandations sur comment utiliser les listes</a></li> +</ul> diff --git a/files/fr/apprendre/html/comment/découper_une_page_web_en_sections_logiques/index.html b/files/fr/apprendre/html/comment/découper_une_page_web_en_sections_logiques/index.html new file mode 100644 index 0000000000..5615e045e9 --- /dev/null +++ b/files/fr/apprendre/html/comment/découper_une_page_web_en_sections_logiques/index.html @@ -0,0 +1,228 @@ +--- +title: Découper une page web en sections logiques +slug: Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques +tags: + - Beginner + - DesignAccessibility + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment structurer un document afin que son plan soit logique pour vous, vos visiteurs dont ceux qui utilisent des technologies d'aide à la navigation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment structurer un document web grâce aux balises sémantiques.</td> + </tr> + </tbody> +</table> + +<h2 id="Les_sections_de_base">Les sections de base</h2> + +<p>Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :</p> + +<dl> + <dt>l'en-tête (<em>header</em>)</dt> + <dd>Il s'agit généralement d'un grande bande horizontale, située en haut du site avec un grand titre et/ou un logo. C'est à cet endroit qu'on a toujours la même information sur le site, quelle que soit la page du site sur laquelle on est.</dd> + <dt>la barre de navigation</dt> + <dd>Celle-ci permet de faire référence aux différentes sections du site via des menus ou des onglets. Comme pour l'en-tête, la barre de navigation sera généralmeent présente sur l'ensemble du site. De nombreux concepteurs web considèrent que la barre de navigation fait partie intégrale de l'en-tête mais ce n'est pas strictement nécessaire.</dd> + <dt>le contenu principal</dt> + <dd>Une zone importante, située au centre dont le contenu est spécifique selon la page visitée.</dd> + <dt>le panneau ou la barre latéral-e (<em>sidebar</em>)</dt> + <dd>Il contient des informations périphériques, des liens, des citations, des publicités. Généralement, ce panneau dépend du contenu principal de la page mais on trouve également des panneaux latéraux qui agissent comme des menus de navigation secondaires.</dd> + <dt>le pied de page (<em>footer</em>)</dt> + <dd>C'est ici qu'on trouvera les informations de contact, de copyright… C'est un endroit où on place des informations communes à l'ensemble du site mais qui ne sont pas primordiales pour le site en tant que tel. Le pied de page est parfois utilisé par les outils de référencement afin de fournir un accès rapide à certaines parties du site.</dd> +</dl> + +<p>Lorsqu'on assemble ces éléments, on arrive à quelque chose qui ressemble <em>grosso modo</em> à :</p> + +<p><img alt="[Diagram indicating the divisions with visual cues]" src="https://mdn.mozillademos.org/files/10679/Screenshot%20from%202015-04-29%2016:21:23.png" style="height: 462px; width: 821px;"></p> + +<h2 id="HTML_à_la_rescousse">HTML à la rescousse</h2> + +<p>Dans le dessin précédent, des indications visuelles permettent d'identifier rapidement l'en-tête, la barre de navigation, le contenu, etc. Cela dit, un site ne se résume pas à son aspect visuel. Une personne qui serait déficiente sur le plan visuel (par exemple quelqu'un qui est daltonien, comme <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a>) pourra tirer partie de concepts comme « barre de navigation » et « contenu principal », en revanche, « taille de police plus grande » et « vert clair » seront inutiles.</p> + +<p>Dans votre code HTML, vous pouvez identifier les sections en fonction de leur <em>fonctionnalité</em>. C'est ce que nous verrons dans la suite de cet article. Pour savoir comment ajouter des indications visuelles, vous pouvez consulter <a href="https://developer.mozilla.org/en-US/Learn/CSS/Howto">notre tutoriel CSS</a>.</p> + +<p>Pour structurer une page avec cette sémantique, HTML fournit des balises dédiées :</p> + +<ul> + <li><strong>Pour l'en-tête : </strong>{{htmlelement("header")}}</li> + <li><strong>Pour la barre de navigation : </strong>{{htmlelement("nav")}}</li> + <li><strong>Pour le contenu principal : </strong>{{htmlelement("main")}} ainsi qu'une association d'éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}} pour créer des sous-sections</li> + <li><strong>Pour la barre latérale : </strong>{{htmlelement("aside")}}</li> + <li><strong>Pour le pied de page : </strong>{{htmlelement("footer")}}</li> +</ul> + +<div class="note"> +<p>Pour la barre de navigation, on trouvera souvent <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">une liste, non-ordonnée, de liens</a> placée dans un élément <code><nav></code>. <a href="https://css-tricks.com/wrapup-of-navigation-in-lists/">Chris Coyier résume les avantages et inconvénients</a> entre les listes et les liens directs.</p> +</div> + +<h3 id="Quel_élément_utiliser">Quel élément utiliser</h3> + +<p>Vous pouvez être confronté-e à d'autres scénarios que celui que nous venons de voir. Dans la liste qui suit, nous verrons des descriptions plus détaillées des éléments HTML liés aux sections d'un document :</p> + +<ul> + <li>{{HTMLElement('main')}} est utilisé pour indiquer du contenu qui appartient <em>exclusivement</em> à cette page. <code><main></code> ne doit être utilisé qu'une seule fois par page et se place directement sous l'élément {{HTMLElement('body')}}. Dans l'idéal, il ne devrait pas être imbriqué dans d'autres éléments sous <code><body></code>.</li> + <li>{{HTMLElement('article')}} contient un bloc de contenu qui pourrait être cohérent sans le reste de la page (par exemple un billet de blog).</li> + <li>{{HTMLElement('section')}} agit comme <code><article></code> mais dépend du reste de la page, qui fournit alors un contexte. Il est possible d'utiliser des sections pour grouper ou subdiviser des articles. Généralement, pour respecter des bonnes pratiques, on commencera une section avec un élément de <a href="/fr/Apprendre/HTML/Howto/Set_up_a_proper_title_hierarchy">titre</a>.</li> + <li>{{HTMLElement('aside')}} contient du contenu qui n'est pas directement lié au contenu principal mais qui peut fournir des informations supplémentaires, liées à ce contenu principal (par exemple une biographie de l'auteur, des liens sur le sujet, etc.).</li> + <li>{{HTMLElement('header')}} représente un groupe de contenu introductif. Si c'est un élément inclus dans {{HTMLElement('body')}}, il définit l'en-tête de la page web. En revanche, si c'est un élément inclus dans {{HTMLElement('article')}} ou {{HTMLElement('section')}}, il définit un en-tête propre à cette section (attention à ne pas confondre cette notion avec les <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">niveaux de titre</a>).</li> + <li>{{HTMLElement('footer')}} représente un groupe de contenu final. Selon sa position il aura un sens analogue à l'élément {{HTMLElement('header')}}.</li> + <li>{{HTMLElement('div')}} est un élément qui peut être utilisé (de préférence avec un attribut {{htmlattrxref('class')}} donné) lorsqu'il n'existe pas d'élément plus spécifique. Les éléments <code><div></code> n'ajoutent pas de division sémantique au document, cela peut permettre de manipuler certaines parties d'un document (la classe ou l'identifiant du <code><div></code> permettra de le(s) retrouver facilement) via {{glossary("CSS")}} ou {{glossary("JavaScript")}}.</li> +</ul> + +<div class="warning"> +<p><strong>Attention : </strong>Les éléments <code><div></code> sont parfois si pratiques qu'on en utilise trop. Ces éléments ne portent aucune sémantique, il ne font qu'encombrer le code HTML. Attention donc à ne les utiliser que lorsqu'il n'existe pas de meilleure solution sémantique. S'ils sont trop présents, cela rendra les mises à jour et la maintenance plus difficiles.</p> +</div> + +<h3 id="Exemple">Exemple</h3> + +<p>Exprimé sous forme de code HTML, le dessin présenté ci-avant correspondrait à :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="utf-8"> + <title>Document HTML</title> +</head> +<body> + + <!-- + Voici l'en-tête principal, utilisé sur les + différentes pages du site web + --> + <header> + header + + <!-- + Bien que ce ne soit pas obligatoire, on trouve + généralement un menu de navigation dans l'en-tête + principal + --> + <nav> + <ul> + <li><a href="#">Navigation</a></li> + <li><a href="#">Qui nous sommes</a></li> + <li><a href="#">Ce que nous faisons</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- + Une barre de recherche est un outil de navigation + "non-linéaire" au sein du site web. + --> + <form> + <input type="search" name="q" placeholder="Recherchez..."> + <input type="submit" value="OK"> + </form> + </nav> + </header> + + <!-- + Voici le contenu principal + --> + <main> + + <!-- + Il contient un article + --> + <article> + <h1>Titre</h1> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue + ligula as quam viverra nec consectetur ant hendrerit. Donec et + mollis dolor. Praesent et diam eget libero egestas mattis sit + amet vitae augue. Nam tincidunt congue enim, ut porta lorem + lacinia consectetur.</p> + + <h2>Sous-section</h2> + <p>Donec ut librero sed accu vehicula ultricies a non tortor. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean + ut gravida lorem. Ut turpis felis, pulvinar a semper sed, + adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. + Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat + nist imperdiet. Ut convallis libero in urna ultrices accumsan. + Donec sed odio eros.</p> + + <h2>Une autre sous-section</h2> + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. + Cum soclis natoque penatibus et manis dis parturient montes, + nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris + vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut + tristique vitae sagittis vel odio. Maecenas convallis ullamcorper + ultricied. Curabitur ornare, ligula semper consectetur sagittis, + nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- + le contenu placé sur le côté peut aussi + être dans le contenu principal + --> + <aside> + <p>N'hésitez pas à rendre visite à nos sponsors !</p> + <ul> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + </ul> + </aside> + </main> + + <!-- + Enfin, voici le pied de page principal, + utilisé sur les différentes pages du site. + Note : Ceci est une fausse déclaration de copyright + Attention à celles qui sont réelles. + --> + <footer> + ©Copyright 2050 par exemple.com. Tous droits réservés. + </footer> +</body> +</html> +</pre> + +<h2 id="Les_rôles_ARIA_qu'est-ce_que_c'est">Les rôles ARIA, qu'est-ce que c'est ?</h2> + +<p>HTML a initialement été conçu pour définir la <em>structure</em> d'un document. Or, il est désormais utilisé pour créer des applications web.</p> + +<p>{{Glossary("ARIA")}} est une méthode qui permet d'indiquer aux technologies d'aide à la navigation qu'un élément HTML possède des fonctionnalités web applicatives.</p> + +<p>Certains éléments HTML5 comme {{HTMLElement('nav')}} permettent de contenir des informations de ce genre et rendent (dans ce cas particulier) les attributs ARIA redondants. Cela dit, si vous utilisez des technologies qui ne supportent pas encore HTML5 ou que vous souhaitez utiliser un élément qui n'a pas de sémantique particulière (par exemple {{HTMLElement('div')}}) , vous pouvez appliquer des rôles ARIA de cette façon:</p> + +<ul> + <li><code><main role="main"></code></li> + <li><code><header role="banner"></code></li> + <li><code><nav role="navigation"></code></li> + <li><code><aside role="complementary"></code></li> + <li><code><footer role="contentinfo"></code></li> +</ul> + +<p>Pour en savoir plus à propos d'ARIA, consultez notre <a href="/fr/docs/Accessibilité/ARIA">documentation.</a></p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{HTMLElement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("div")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("section")}}</li> +</ul> diff --git a/files/fr/apprendre/html/comment/définir_des_termes_avec_html/index.html b/files/fr/apprendre/html/comment/définir_des_termes_avec_html/index.html new file mode 100644 index 0000000000..3e8aa64e90 --- /dev/null +++ b/files/fr/apprendre/html/comment/définir_des_termes_avec_html/index.html @@ -0,0 +1,153 @@ +--- +title: Définir des termes avec HTML +slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Howto/Define_terms_with_HTML +--- +<div class="summary"> +<p>HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.</td> + </tr> + </tbody> +</table> + +<p>Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :</p> + +<blockquote> +<dl> + <dt>Bleu (<em>adjectif</em>)</dt> + <dd>La couleur du ciel lors d'un temps clair.<br> + <em><q>Le ciel est bleu.</q></em></dd> + <dd>Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.<br> + <em><q>Un steak bleu s'il vous plaît.</q></em></dd> +</dl> +</blockquote> + +<p>Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :</p> + +<blockquote> +<p><em><dfn>Firefox</dfn></em> est le navigateur web créé et développé par la Fondation Mozilla.</p> +</blockquote> + +<p>Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.</p> + +<h2 id="Comment_écrire_un_description_informelle">Comment écrire un description informelle</h2> + +<p>Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.</p> + +<p>On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <code><dfn></code> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :</p> + +<pre class="brush: html"><p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p> +</pre> + +<div class="note"> +<p><strong>Note :</strong> On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe <a href="/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">des éléments HTML tout indiqués</a>.</p> +</div> + +<h3 id="Cas_spécifique_les_abréviations">Cas spécifique : les abréviations</h3> + +<p>En ce qui concerne les abréviations, il est préférable <a href="/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable">de les identifier séparement</a> grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.</p> + +<pre class="brush: html"><p> + <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn> + est un langage de description utilisé pour structurer des documents sur le Web. +</p></pre> + +<div class="note"> +<p>La spécification HTML <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element">met en avant l'attribut <code>title</code></a> pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut <code>title</code> ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également <a href="http://www.w3.org/TR/html/dom.html#attr-title">ce qui est noté dans les spécifications</a>.</p> +</div> + +<h3 id="Améliorer_l'accessibilité">Améliorer l'accessibilité</h3> + +<p>{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <code><dfn></code> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-discribedby</a></code> pour associer, formellement, un terme à sa définition :</p> + +<pre class="brush: html"><p> + <span id="ff"> + <dfn aria-describedby="ff">Firefox</dfn> + est le navigateur web créé et développé par la Fondation Mozilla. + </span> + Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a> +</p></pre> + +<p>Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. <code>aria-describedby</code> peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <code><dfn></code>). <code>aria-describedby</code> utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.</p> + +<h2 id="Comment_construire_une_liste_de_descriptions">Comment construire une liste de descriptions</h2> + +<p>Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).</p> + +<div class="note"> +<p>Les listes de descriptions <a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">ne doivent pas être utilisées pour retranscrire des dialogues</a>. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici <a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">quelques recommandations pour retranscrire un dialogue dans un document web</a>.</p> +</div> + +<p>Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.</p> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<p>Voici un exemple simple qui dresse une liste de descriptions de plats :</p> + +<pre class="brush: html"><dl> + <dt>jambalaya</dt> + <dd> + une entrée à base de riz qui contient généralement + du poulet, des saucisses, des fruits de mer et des + épices + </dd> + + <dt>sukiyaki</dt> + <dd> + une spécialité japonaise à base de fines tranches de + viande, de légumes, de nouilles et qui est cuite dans + un sauce soja et du saké + </dd> + + <dt>chianti</dt> + <dd> + un vin italien, sec, originaire de Toscane + </dd> +</dl> +</pre> + +<div class="note"> +<p>La structure de base qu'on voit dans cet exemple alterne les termes (<code><dt></code>) et leurs descriptions (<code><dd></code>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.</p> +</div> + +<h3 id="Améliorer_l'aspect_visuel">Améliorer l'aspect visuel</h3> + +<p>Voici comment un navigateur affichera la liste précédente :</p> + +<p>{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}</p> + +<p>Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :</p> + +<pre class="brush: css">dt { + font-weight: bold; +} +</pre> + +<p>Cela permettra d'obtenir le résultat suivant :</p> + +<p>{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("dfn")}}</li> + <li>{{htmlelement("dl")}}</li> + <li>{{htmlelement("dt")}}</li> + <li>{{htmlelement("dd")}}</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Comment utiliser l'attribut <code>aria-describedby</code></a></li> +</ul> diff --git a/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abréviations/index.html b/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abréviations/index.html new file mode 100644 index 0000000000..0723c45fb2 --- /dev/null +++ b/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abréviations/index.html @@ -0,0 +1,269 @@ +--- +title: Identifier et expliquer des abréviations avec HTML +slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations +tags: + - Beginner + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +--- +<div class="summary"> +<p>HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à indiquer des abréviations et des acronymes avec HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="À_propos_des_abréviations">À propos des abréviations</h2> + +<p>Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « <em>National Aeronautics and Space Administration</em> ».</p> + +<p>Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :</p> + +<blockquote>L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.</blockquote> + +<div> +<p>Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.</p> +</div> + +<h2 id="L'élément_<abbr>">L'élément <code><abbr></code></h2> + +<p>L'élément HTML<em> abbreviation</em> (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.</p> + +<div class="note"> +<p><strong>Note :</strong> Si vous entendez parler de l'élément <code><acronym></code>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.</p> +</div> + +<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p></pre> + +<p>Il est possible d'épeler les abréviations grâce à l'attribut <code>title</code> de l'élément :</p> + +<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p></pre> + +<p>Quand faut-il renseigner l'attribut <code>title</code> ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.</p> + +<div class="note"> +<p><strong>Note :</strong> Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut <code>title</code> que celui de l'élément <code><abbr></code>.</p> +</div> + +<p>Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut <code>title</code> dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :</p> + +<p>{{EmbedLiveSample("L'élément_<abbr>",'100%',90)}}</p> + +<div class="note"> +<p><strong>Important : </strong>Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut <code>title</code>. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de <code>title</code>. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec <code>title</code>.</p> +</div> + +<h2 id="Exercice">Exercice</h2> + +<p>Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <code><abbr></code> et épelez les avec l'attribut <code>title</code>. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans <a href="/fr/docs/Glossaire">le glossaire</a>.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="exercise"> + <main> + <div class="instruction">Identifiez toutes les abréviations avec l'élément <code>&lt;abbr&gt;</code></div> + <div class="playground"><textarea spellcheck="false"></textarea></div> + <div class="checking"> + <button>Afficher les résultats</button><span class="count"></span> + </div> + <div class="result">Les <abbr title="développeurs">dev</abbr> Web utilisent <abbr title="Hypertext Markup Language">HTML</abbr> pour structurer des documents, <abbr title="Cascading StyleSheet">CSS</abbr> pour les mettre en forme et JavaScript pour ajouter des effets spéciaux grâce à certaines <abbr title="Application Programming Interface">API</abbr> dédiées.</div> + </main> +</div></pre> + +<pre class="brush: css">body { + font: 1em/100% sans-serif; + padding: 0; + margin: 0; +} + +.exercise { + background: #F9FAFB; + border-radius: 5px; + height: 13em; + overflow: hidden; +} + +.instruction, .count { + padding: .5em; + font-style: italic; + font-size: .95em; +} + +.playground { + padding: 0 .5em; +} + +.playground textarea { + display: block; + font-size : 1em; + line-height: 1.5em; + font-family: monospace; + box-sizing: border-box; + width : 100%; + padding : .5em; + height : 9.7em; +} + +.checking { + padding: .5em; +} + +.checking button { + box-sizing: border-box; + box-shadow:inset 0 1px 0 0 #bcd9a3; + background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); + background-color:#b4d665; + border-radius:5px; + border:1px solid #8aa164; + cursor:pointer; + font-size:1em; + padding:.5em; + text-decoration:none; +} +.checking button:hover { + background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); + background-color:#89a646; +} +.checking button:active { + transform: translate(0, 1px); +} + +.result { + height: 10em; + line-height: 1.4em; + padding: .5em; + box-sizing: border-box; +} + +main { + transform: translate(0,0); + transition: transform 300ms; +} + +.next main { + transform: translate(0, -10em); +} + +abbr { + display: inline-block; + white-space: nowrap; +} + +abbr.ok { + color: green; +} + +abbr.ok:after { + content: ' ✔︎'; +} + +abbr.fail { + color: red; +} + +abbr.fail:after { + content: ' ✘'; +} + +abbr.warning { + color: orange; +} + +abbr.warning:after { + content: ' !'; + font-weight: bold; +} +</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var content = document.querySelector('.exercise'); + var input = document.querySelector('.playground textarea'); + var button = document.querySelector('.checking button'); + var message = document.querySelector('.checking .count'); + var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); + var data = { + pass : 0, fail : 0, warning : 0 + }; + + input.value = document.querySelector('.result').textContent; + + function toggleResult(e) { + e.preventDefault(); + var classList = content.className.split(' '); + + if (classList.length === 1 && checkResult()) { + content.className = 'exercise next'; + message.innerHTML = data.pass + ' correctement identifiée(s), ' + + data.warning + ' sans description complète, ' + + data.fail + ' manquée(s).'; + button.innerHTML = 'Essayez à nouveau'; + } else { + content.className = 'exercise'; + message.innerHTML = ''; + button.innerHTML = 'Afficher les résultats'; + } + } + + function checkResult() { + var i, j, node = document.createElement('div'); + node.innerHTML = input.value; + data = { pass : 0, fail : 0, warning : 0 }; + + var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); + + if (userAbbr.length === 0) { + alert("Vous n'avez marqué aucune abréviation (il y en a " + abbr.length + " à trouver)."); + return false; + } + + for (i in abbr) { + var txt = abbr[i].textContent; + var fail = true; + + for (j in userAbbr) { + var userText = userAbbr[j].textContent; + + if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { + fail = false; + if (userAbbr[j].title) { + data.pass += 1; + abbr[i].className = 'ok'; + } else { + data.warning += 1; + abbr[i].className = 'warning'; + } + } + } + + if (fail) { + data.fail += 1; + abbr[i].className = 'fail'; + } + } + + return true; + } + + button.addEventListener('click', toggleResult); +}); +</pre> +</div> + +<p>{{EmbedLiveSample('Exercice','100%',220)}}</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>La documentation de la référence sur {{HTMLElement("abbr")}}.</li> +</ul> diff --git a/files/fr/apprendre/html/comment/index.html b/files/fr/apprendre/html/comment/index.html new file mode 100644 index 0000000000..3db762dc5a --- /dev/null +++ b/files/fr/apprendre/html/comment/index.html @@ -0,0 +1,149 @@ +--- +title: Apprendre à utiliser HTML pour résoudre des problèmes +slug: Apprendre/HTML/Comment +tags: + - CodingScripting + - HTML +translation_of: Learn/HTML/Howto +--- +<p>Une fois <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">les bases acquises</a>, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter <a href="/fr/docs/Web/HTML/Reference">notre référence HTML</a>.</p> + +<h2 id="Cas_d'utilisation_fréquents">Cas d'utilisation fréquents</h2> + +<p>HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Structure_de_base">Structure de base</h3> + +<p>En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :</p> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques">Comment diviser une page web en sections logiques</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres">Comment organiser une hiérarchie de titres</a></li> +</ul> + +<h3 id="Sémantique_de_base_pour_le_texte">Sémantique de base pour le texte</h3> + +<p>Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une liste d'éléments en HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">Comment fournir des informations de contact dans une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Comment marquer des abréviations et les rendre compréhensibles</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Comment définir des termes en HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Les_hyperliens">Les hyperliens</h3> + +<p>Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une table des matières en HTML</a></li> +</ul> + +<h3 id="Images_et_multimédia">Images et multimédia</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter une vidéo à une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter un contenu audio à une page web</a></li> +</ul> + +<h3 id="Script_et_mise_en_forme">Script et mise en forme</h3> + +<p>HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Comment utiliser JavaScript dans une page web</a></li> +</ul> + +<h3 id="Intégrer_du_contenu">Intégrer du contenu</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">Comment intégrer une page web dans une autre page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">Comment ajouter du contenu Flash dans une page web</a></li> +</ul> +</div> +</div> + +<h2 id="Problèmes_avancés_ou_rares">Problèmes avancés ou rares</h2> + +<p>Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Les_formulaires">Les formulaires</h3> + +<p>Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre <a href="/fr/docs/Web/Guide/HTML/Formulaires">le guide dédié aux formulaires</a>. Vous pouvez commencer ici :</p> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Comment créer un formulaire web simple</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire web</a></li> +</ul> + +<h3 id="Les_informations_tabulaires">Les informations tabulaires</h3> + +<p>Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Comment optimiser le rendu d'un tableau HTML</a></li> +</ul> + +<h3 id="La_représentation_de_données">La représentation de données</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Comment associer du contenu lisible avec des structures de données informatiques arbitraires</a></li> +</ul> + +<h3 id="Interactivité">Interactivité</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Comment créer des boîtes de dialogue avec HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Sémantique_avancée_pour_les_éléments_textuels">Sémantique avancée pour les éléments textuels</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Comment restituer des changements (du texte ajouté/retiré)</a></li> +</ul> + +<h3 id="Images_et_multimédia_avancés">Images et multimédia avancés</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Comment ajouter une cartes de zones cliquables sur une image</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">Comment créer des images dynamiques et interactives</a></li> +</ul> + +<h3 id="L'internationalisation">L'internationalisation</h3> + +<p>HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Comment ajouter plusieurs langages sur une seule page web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li> +</ul> +</div> +</div> diff --git a/files/fr/apprendre/html/comment/intégrer_une_page_web_dans_une_autre_page_web/index.html b/files/fr/apprendre/html/comment/intégrer_une_page_web_dans_une_autre_page_web/index.html new file mode 100644 index 0000000000..733113c308 --- /dev/null +++ b/files/fr/apprendre/html/comment/intégrer_une_page_web_dans_une_autre_page_web/index.html @@ -0,0 +1,149 @@ +--- +title: Intégrer une page web au sein d'une autre page web +slug: Apprendre/HTML/Comment/Intégrer_une_page_web_dans_une_autre_page_web +tags: + - Beginner + - Guide + - HTML + - Learn + - Security +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment intégrer une page web dans une autre, tout en minimisant les risques encourus par une telle manipulation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Connaître les risques encourus lorsqu'on imbrique des pages web entre elles et savoir comment intégrer une page web au sein d'une autre page tout en minimisant ces risques.</td> + </tr> + </tbody> +</table> + +<h2 id="L'imbrication_des_pages_quelques_mots_d'histoire">L'imbrication des pages, quelques mots d'histoire</h2> + +<p>Imbriquer des pages entre elles peut sembler étrange voire contre-nature mais cela existe depuis les débuts du Web. Lorsque la bande passante était utilisée par des modems 56k (voire moindre), pour réduire le temps de téléchargement, les pages web étaient fragmentées en morceaux appelés <em>frames</em>, tous intégrées dans un <em>frameset</em>. Malheureusement, les <em>frames</em> ont apporté plus de problèmes que de solutions et le concept de <em>frame</em>/<em>frameset</em> a disparu depuis l'apparition d'{{glossary("AJAX")}}.</p> + +<p>Cela dit, il existe des cas où imbriquer des pages web est une solution valide. C'est notamment le cas lorsqu'on veut inclure du contenu généré par un utilisateur ou du contenu tiers (des publicités par exemple). Afin d'améliorer la sécurité lors de telles opérations, il est possible d'intégrer le contenu dans une <em>iframe</em> HTML5. Dans certains cas complexes, cela peut également permettre au navigateur d'être plus rapide car les arbres {{glossary("DOM")}} à traiter peuvent être plus légers.</p> + +<p>Malgré tout, l'imbrication de pages web a des conséquences significatives sur la sécurité, la performance et l'accessibilité. Avant de la mettre en œuvre, assurez-vous d'en comprendre les enjeux et les risques afin de servir au mieux vos visiteurs.</p> + +<h2 id="Une_imbrication_simple">Une imbrication simple</h2> + +<p>La plupart du temps, vous aurez besoin d'une {{htmlelement("iframe")}} pour imbriquer des pages web entre elles. Pour commencer, voici quelques questions :</p> + +<ul> + <li><strong>Quel est le document que j'intègre dans la page web ?</strong> L'URL du document sera la valeur de l'attribut {{htmlattrxref('src','iframe')}}.</li> + <li><strong>Quel espace doit occuper le document par rapport à la page web « parente » ? </strong>Pour cette information, on utilisera les attributs {{htmlattrxref('width','iframe')}} et {{htmlattrxref('height','iframe')}}.</li> + <li><strong>Que se passe-t-il lorsque l'agent utilisateur ne supporte pas les <em>iframes</em> ?</strong> Dans ces cas, il faut fournir un contenu HTML à utiliser en recours (ça peut, par exemple, être un lien vers le document qui aurait dû être imbriqué), ce contenu sera placé entre les balises <code><iframe></code>.</li> + <li>Il ne faut pas oublier l'attribut <code>sandbox</code>, hautement conseillé, qui permet de renforcer la sécurité des requêtes effectuées.</li> +</ul> + +<p>Au final, le code ressemblera à :</p> + +<pre class="brush: html"><iframe + src="https://developer.mozilla.org/fr/docs/Web/JavaScript/" + width="100%" height="500" + sandbox> + <p> + <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/"> + Un lien à utiliser dans les cas où les navigateurs ne supportent + pas les <i>iframes</i>. + </a> + </p> +</iframe> +</pre> + +<div class="note"> +<p>Afin d'améliorer la vitesse de chargement du site principal, il peut être utile de définir l'attribut <code>src</code> de l'<em>iframe</em> grâce à JavaScript, une fois que le contenu principal a été chargé. De cette façon, votre page sera utilisable plus tôt et le temps de chargement « officiel » de votre page sera réduit (ce qui peut être une métrique importante pour le référencement).</p> +</div> + +<div class="note"> +<p>Si vous n'appréciez pas la bordure épaisse autour de l'{{htmlelement("iframe")}}, vous pouvez utiliser {{cssxref('border')}}<code>: none;</code> dans votre code {{Glossary('CSS')}}.</p> +</div> + +<h2 id="Soyez_couverts">Soyez couverts</h2> + +<p>Dans les paragraphes précédents, nous avions insisté sur les aspects liés à la sécurité. Nous y voilà revenus. Les développeurs de navigateurs et les développeurs web ont appris à leurs dépens que les <em>iframes</em> pouvaient être un vecteur d'attaque visant à modifier une page web ou à faire faire aux visiteurs quelque chose à leur insu.</p> + +<div class="note"> +<p>{{interwiki('wikipedia','Clickjacking')}} est l'une des attaques connues utilisant les <em>iframes</em> : un attaquant placera une <em>iframe</em> invisible dans le document pour capturer les interactions entre l'utilisateur et le site web. Cela permet de détourner les utilisateurs ou de subtiliser des données sensibles.</p> +</div> + +<p>Voici quelques mesures à prendre pour mieux protéger votre site, de la plus simple à la plus complexe.</p> + +<h3 id="Ne_pas_intégrer_de_contenu_tiers">Ne pas intégrer de contenu tiers</h3> + +<p>Il peut arriver que vous n'ayez pas le choix, en revanche si vous l'avez, ne pas intégrer de contenu tiers pourra certainement vous épargner des maux de tête. Si vous avez développé le contenu intégré, regardez-y à deux fois. Si le contenu provient de l'extérieur, considérez-le comme dangereux.</p> + +<div class="note"> +<p>Un autre aspect que celui de la sécurité intervient ici : la propriété intellectuelle. La plupart des contenus, qu'ils soient en ligne ou non, sont placés sous le droit d'auteur, y compris du contenu dont on penserait qu'il est libre de droit (par exemple, la plupart des images sur <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). <strong>N'affichez jamais du contenu sur votre page web si ce n'est pas le vôtre et que vous n'avez pas eu l'accord expresse de l'auteur. Les peines infligées pour infraction au droit d'auteur peuvent être importantes.</strong> Là encore, on n'est jamais trop prudent.</p> + +<p>Si le contenu est placé sous licence, vous devez respecter les termes de la licence. Par exemple, MDN est sous<a href="/en-US/docs/MDN/About#Copyrights_and_licenses"> licence CC-BY-SA</a>. Cela signifie que vous devez <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">créditer les auteurs correctement</a> lorsque vous citez le contenu d'une de ses pages, même si vous y apportez des modifications.</p> +</div> + +<h3 id="Utiliser_HTTPS">Utiliser HTTPS</h3> + +<p>{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez utiliser HTTPS dès que possible :</p> + +<ol> + <li>HTTPS réduit les chances que le contenu distant soit modifié lors du transport ;</li> + <li>HTTPS empêche le contenu intégré d'accéder au contenu du document parent, et <em>vice versa</em>.</li> +</ol> + +<p>Les certificats de sécurité ne sont pas donnés et si vous ne pouvez pas vous en procurer un, vous devrez servir votre document parent avec HTTP. Cependant, suite à ce qui a été vu avant,<em> dans aucun cas vous ne devez intégrer du contenu tiers qui soit transporté par HTTP </em>(dans le meilleur des cas, cela se traduira, pour l'utilisateur, par un avertissement dans le navigateur).</p> + +<h3 id="Utiliser_l'attribut_sandbox_toujours">Utiliser l'attribut <code>sandbox</code>, toujours</h3> + +<p>Si vous souhaitez minimiser les risques, ne donnez <em>que les permissions indispensables nécessaires</em>. Bien entendu, cela s'applique également à votre contenu.</p> + +<p>Le contenu qui n'est pas mis dans un bac à sable (<em>sandbox</em>) a trop de droits par défaut (utilisations de scripts, de formulaires, de pop-ups, etc). Tant que c'est possible, imposez toutes les restrictions en utilisant {{htmlattrxref('sandbox','iframe')}} sans paramètres.</p> + +<p>Si c'est nécessaire, vous pouvez ajouter certaines permissions, une à une, dans la valeur de <code>sandbox</code>. Attention ! <em>Il ne faut jamais</em> ajouter <code>allow-scripts</code> et <code>allow-same-origin</code> en même temps car le contenu placé en bac à sable pourrait alors désactiver les protections.</p> + +<div class="note"> +<p>La mise en bac à sable (<em>sandboxing</em>) n'offre aucune protection si l'attaquant peut détourner les visiteurs et leur faire visiter un contenu dangereux directement (qui n'est pas dans une <code>iframe</code>). S'il y a une probabilité qu'un contenu soit dangereux (par exemple : un contenu généré par un utilisateur), faites en sorte que ce contenu soit servir avec une origine différente de celle du site principal.</p> +</div> + +<h3 id="Établir_des_canaux_de_communication_entre_les_contenus">Établir des canaux de communication entre les contenus</h3> + +<p>Dans certains cas, il peut être utile de faire communiquer une <em>iframe</em> avec le document hôte. Mettre en place de tels canaux de communication est assez simple avec JavaScript. Si l'<em>iframe</em> est correctement mise en bac à sable, ni l'<em>iframe</em> ni le document parent ne pourront accéder au DOM de l'autre (sans bac à sable, ça serait possible et incroyablement dangereux). Pour échanger de tels messages, l'API {{domxref('window.postMessage','postMessage')}} est la seule méthode sécurisée.</p> + +<h3 id="Configurer_les_directives_CSP">Configurer les directives CSP</h3> + +<p>{{Glossary("CSP")}} fournit <a href="/fr/docs/Web/Security/CSP/CSP_policy_directives">un ensemble d'en-têtes HTTP</a> conçus pour améliorer la sécurité d'un document HTML. Lorsqu'on utilise des <em>iframe</em>, il faut s'assurer de <a href="/fr/docs/Web/HTTP/X-Frame-Options">configurer son serveur pour envoyer un en-tête <code>X-Frame-Options</code> approprié</a>. Cela peut empêcher d'autres sites web d'intégrer le contenu de votre page dans d'autres pages web (ce qui serait une première étape pour faire du {{interwiki('wikipedia','clickjacking')}} ou effectuer d'autres attaques). Pour plus d'informations sur ce sujet, <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">le billet de Frederik Braun (en anglais)</a> est particulièrement intéressant.</p> + +<h2 id="Placez_le_code_HTML_dans_un_bac_à_sable_(sandboxing)">Placez le code HTML dans un bac à sable (<em>sandboxing</em>)</h2> + +<p>Nous avons déjà évoqué la mise en bac à sable pour les contenus embarqués mais cela peut également concerner votre propre contenu. Il est parfois avantageux d'aller encore plus loin en découpant sa page web en plusieurs <em>iframes</em>, chacune mise dans un bac à sable, en gérant un minimum de privilèges et en les coordinant depuis le document principal (<a href="http://www.html5rocks.com/tutorials/security/sandboxed-iframes/">Mike West décrit ce sujet en détails</a> et explique comment la séparation des privilèges permet d'améliorer le niveau de sécurité). Découpage une page de cette façon peut également permettre d'obtenir de meilleures performances car les arbres {{glossary("DOM")}} manipulés sont plus légers.</p> + +<p>En utilisant les deux nouveaux attributs d'<code>iframe</code> : {{htmlattrxref('seamless','iframe')}} et {{htmlattrxref('srcdoc','iframe')}}, vous pouvez intégrer des fragments de code HTML dans un document HTML. Pour supporter les navigateurs historiques, il est possible de fournir un contenu alternatif via une URL avec <code>src</code> (cela peut être une <a href="/fr/docs/Web/HTTP/data_URIs">URI de données</a>). Voici un exemple simple :</p> + +<pre class="brush: html"><iframe + sandbox + seamless + src="fallback.html" + srcdoc=" + <p> + Ce paragraphe est dans un bac à sable. + </p> + "> + Du contenu pour les navigateurs qui ne supportent pas + les iframes. +</iframe></pre> + +<div class="note"> +<p>Pour l'attribut <code>srcdoc</code>, les quotes doivent être échappées (<code>&quot;</code>) et les ampersandes doivent être doublement échappées (<code>&amp;amp;</code> pour représenter une ampersande simple (&)).</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement('iframe')}}</li> +</ul> diff --git a/files/fr/apprendre/html/comment/mettre_en_place_une_hiérarchie_de_titres/index.html b/files/fr/apprendre/html/comment/mettre_en_place_une_hiérarchie_de_titres/index.html new file mode 100644 index 0000000000..454bef6dcf --- /dev/null +++ b/files/fr/apprendre/html/comment/mettre_en_place_une_hiérarchie_de_titres/index.html @@ -0,0 +1,94 @@ +--- +title: Mettre en place une hiérarchie de titres +slug: Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres +tags: + - Beginner + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<p class="summary">Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment utiliser des titres et les hiérarchiser dans un document web.</td> + </tr> + </tbody> +</table> + +<h2 id="Pourquoi_utiliser_des_titres">Pourquoi utiliser des titres ?</h2> + +<p>Les titres forment le squelette d'un texte sans fournir de longues explications. Prenons un exemple simple : même si ces deux textes sont en anglais, lequel semble le plus clair ?</p> + +<p><img alt="[Picture comparing a document with headings to a document without headings]" src="https://mdn.mozillademos.org/files/10717/Screenshot%20from%202015-05-05%2013:47:50.png" style="width: 100%;"></p> + +<p>Voilà une bonne partie de la réponse à la question posée avant.</p> + +<p>Comme vous pouvez le voir, un lecteur utilisera les titres et leurs niveaux pour déterminer quel contenu est présent et s'il est utile de poursuivre la lecture pour trouver le contenu recherché. Nous passons généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">très peu de temps sur une page web</a> et consulter les titres fait partie du processus que nous déroulons pour déterminer s'il faut rester sur la page ou la quitter. Pour cette raison, il est préférable d'avoir une organisation claire pour les titres afin que le lecteur se repère facilement et continue à consulter la page.</p> + +<p>Vous faut-il plus d'arguments ? Savez-vous que certaines personnes ne lisent pas les pages web mais les écoutent grâce à des logiciels appelés {{interwiki('wikipedia',"Lecteur_d'écran","lecteurs d'écrans")}}. Ces logiciels permettent d'accéder rapidement à un contenu textuel donné. Parmi les techniques utilisées par ces logiciels, de nombreuses se basent sur les titres. Si les titres ne sont pas définis, pensez-vous que ces visiteurs prendront la peine d'écouter l'intégralité du document ?</p> + +<p>Enfin, le plan d'un document, composé des titres, est souvent utilisé par les moteurs de recherche pour déterminer la pertinence d'un article sur un sujet de recherche donné. Chaque niveau de titre (de 1 à 6) aura un « poids » différent : un titre de niveau 1 sera jugé plus pertinent qu'un titre de niveau 2 et ainsi de suite.</p> + +<h2 id="Les_titres_HTML">Les titres HTML</h2> + +<p>HTML fournit des éléments qui permettent de créer des titres dans des documents HTML : ce sont les éléments {{htmlelement('h1')}}, {{htmlelement('h2')}} et jusqu'à {{htmlelement('h6')}}.</p> + +<h3 id="Ajouter_le_titre_principal">Ajouter le titre principal</h3> + +<p>Au début du document, vous pouvez écrire le titre de plus au niveau entre des balises {{htmlelement('h1')}} :</p> + +<pre class="brush: html"><h1>Améliorez vos compétences sur le Web !</h1></pre> + +<p>Si vous considérez le document comme un arbre, le tronc sera le titre <code><h1></code>. Cela implique qu'un document ne doit avoir qu'un seul titre de niveau 1. Continuons les explications car ce sujet revient souvent dans les discussions. D'un point de vue technique, rien ne vous empêche d'utiliser plusieurs titres de niveau 1 dans vos documents. Cependant, d'un point de vue sémantique, cela serait bizarre car un titre de niveau 1 introduit un sujet totalement différent. Si vous jugez nécessaire d'avoir plusieurs titres de niveau 1 dans votre document, cela signifie peut être que le document doit être découpé en plusieurs documents dont chacun aurait un titre de niveau 1 distinct.</p> + +<p>Un autre argument en faveur d'un unique titre de niveau 1 serait l'impact sur le référencement. <a href="http://www.searchenginejournal.com/in-2014-how-important-is-an-h1-tag-for-seo/">Ce point est plus discutable</a> car les algorithmes des moteurs de recherche sont des secrets bien gardés, cela dit, certaines observations tendent à montrer que les niveaux de titres ont un impact sur le classement d'un site et que plus un niveau de titre est utilisé, plus l'impact sur le classement s'affaiblit.</p> + +<div class="note"> +<p><strong>Attention :</strong> On voit souvent les titres de niveau 1 utilisés pour mettre en avant le logo d'un site web ou sa marque. Comme ces informations ne sont pas les informations les plus structurantes ni les plus importantes, il est préférable d'éviter ce genre de détournement.</p> +</div> + +<h3 id="Ajouter_des_sous-titres">Ajouter des sous-titres</h3> + +<p>Sauf si votre document est très court, vous devrez le découper en sections. Chaque section commence avec un titre {{htmlelement("h2")}} :</p> + +<pre class="brush: html">... +<h2>Organisez la structure de votre document avec HTML</h2> +... +<h2>Ajustez le style de votre document avec CSS</h2> +...</pre> + +<p>Si besoins, vous pouvez découper vos sections en sous-sections et ainsi de suite en utilisant des éléments {{htmlelement("h3")}} jusqu'à {{htmlelement("h6")}}. Cela dit, si vous arrivez à un niveau de découpage avec {{htmlelement("h4")}} voire inférieur, cela peut signifier que votre document est trop long et qu'il serait préférable de le découper pour en faciliter la lecture.</p> + +<p>Lorsque vous créer des sections et sous-sections, il y a quelques points à prendre en compte afin d'améliorer l'expérience du lecteur :</p> + +<dl> + <dt>Gardez une hiérarchie cohérente</dt> + <dd>Autrement dit, cela signifie que vous devriez éviter de sauter des niveaux de titres (par exemple passer directement d'un niveau <code><h1></code> ou <code><h2></code> à un niveau <code><h4></code>). Vos lecteurs,<a href="https://www.youtube.com/watch?v=AmUPhEVWu_E"> notamment ceux qui utilisent des lecteurs d'écran</a>, pourraient penser que quelque chose manque à votre page.</dd> + <dt>Utilisez les niveaux de titre pour leur sémantique et non pour leur mise en forme</dt> + <dd>Le rôle de HTML est de fournir des informations sémantiques (sur le sens). La mise en forme par défaut d'un élément HTML donné n'a pas de rôle particulier et peut être modifiée avec {{Glossary("CSS")}}. Lorsqu'on s'occupe des titres, on peut utiliser <a href="/fr/docs/Web/CSS/font-size">la propriété CSS <code>font-size</code></a> afin de modifier la taille de la police utilisée.</dd> + <dt>N'utilisez pas les niveaux de titres pour représenter des sous-titres ou des slogans</dt> + <dd>Une des notions qui manque à HTML est le fait de ne pas avoir d'éléments particulier pour représenter un sous-titre ou un slogan. Certains développeurs utilisent les éléments de titre à cet effet mais cela entraîne des cassures dans la hiérarchie des titres et pose des problèmes d'accessibilité. Bien qu'il y ait quelques tentatives pour résoudre ce problème avec l'élément {{HTMLElement('hgroup')}}, il est préférable d'utiliser un élément {{htmlelement("p")}} ou {{htmlelement("span")}} avec un attribut {{htmlattrxref('class')}} donné.</dd> +</dl> + +<h2 id="Gérer_des_niveaux_de_titre_dynamiques">Gérer des niveaux de titre dynamiques</h2> + +<p>L'élément {{htmlelement("section")}} est apparu avec HTML5 pour marquer les différentes sections d'un document HTML, chacune de ces sections étant <em>a priori</em> suivie d'un titre approprié.</p> + +<p>Supposons que votre plan évolue (ce qui peut arriver si le HTML est généré de façon dynamique par le serveur) et que vous décidiez que certains <code><h3></code> devraient en fait être des <code><h2></code>. De même, si vous compilez plusieurs pages web en un e-book, cela peut être ennuyant que d'avoir à revoir tous les différents titres.</p> + +<p>Si vos <code><section></code> sont imbriquées de façon logique, HTML5 indique que chaque section peut commencer avec <code><h1></code> et que ceux-ci continueront à former un plan valide. L'idée est plutôt bonne mais souffre de quelques inconvénients : le code est moins lisible et il n'est plus possible d'appliquer une mise en forme différente pour les <code><h1></code> si ceux-ci n'ont pas la même importance.</p> + +<p>Pour plus de détails, lire l'article <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sectionnement et plan d'un document HTML5</a>.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">Les éléments de titre</a></li> +</ul> diff --git a/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html b/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html new file mode 100644 index 0000000000..c821781539 --- /dev/null +++ b/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html @@ -0,0 +1,188 @@ +--- +title: Mettre l'accent sur un contenu ou indiquer qu'un texte est important +slug: >- + Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important +tags: + - Beginner + - Composing + - Guide + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance +--- +<p class="summary">Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML ismple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment marquer des passages de texte contenus dans votre document qui seraient spéciaux ou particulièrement importants pour les lecteurs.</td> + </tr> + </tbody> +</table> + +<p>Les dialogues ne se résument pas uniquement à des séries de mots : le ton importe également. Dans les œuvres couchées sur le papier, ce sont la ponctuation et la mise en forme qui permettent de retranscrire ces informations. Quelle que soit l'outil utilisé, le but est d'ajouter des informations implicites.</p> + +<p>Voici un exemple simple :</p> + +<blockquote> +<p>Je suis en retard.</p> + +<p>Je suis en retard ?</p> +</blockquote> + +<p>Dans cet exemple, la première phrase exprime une connaissance (je sais que je suis en retard) alors que la seconde évoque un doute ou pose une question. On remarquera que l'ordre des mots n'a pas changé, seule la ponctuation change cette nuance. À l'oral, cela se serait traduit par un changement de ton.</p> + +<p>La mise en forme permet également d'ajouter des nuances. Voici un deuxième exemple :</p> + +<blockquote> +<p>Je suis sympa, même si parfois je suis méchant.</p> +</blockquote> + +<p>Cette phrase est plutôt neutre. Ajoutons quelque chose pour changer ça :</p> + +<blockquote> +<p>Je suis <em>sympa</em>, même si parfois je suis méchant.</p> + +<p>Je suis sympa, même si parfois je suis <em>méchant</em>.</p> +</blockquote> + +<p>Remarquez-vous le changement que cela apporte ? L'italique accentue l'adjectif « sympa » ou « méchant ». En imprimerie, l'accentuation est portée par la mise en forme (ici la mise en italique). Il faudrait plus de contexte pour saisir tout le sens de cette phrase mais la mise en forme ajoute clairement une intonation.</p> + +<p>Cet article ne porte pas sur la mise en forme du document. Ce n'est pas le rôle de HTML que de mettre en forme un document (en revanche, la tâche est toute indiquée pour {{Glossary('CSS')}} qui vous aidera à contrôler l'aspect visuel de votre page web). Ici, nous verrons comment ajouter le <em>sens</em> porté par la mise en forme. Or, ajouter du sens est <em>le</em> rôle de HTML. Une fois que le sens est présent dans le document, alors, on pourra le mettre en forme grâce à <a href="/fr/Apprendre/CSS/Howto">CSS</a>.</p> + +<p>Ici, nous évoquerons trois nuances qui peuvent être exprimées par HTML : <em>l'emphase</em>, <em>l'importance</em> et <em>la pertinence</em><em>.</em></p> + +<h2 id="L'emphase">L'emphase</h2> + +<p>L'élément {{htmlelement('em')}} (<code><em></code> pour <em>emphase</em>) permet d'exprimer une accentuation particulière sur un ou plusieurs mots (qui se serait traduite à l'oral par un changement de ton).</p> + +<pre class="brush: html">Allons-nous <em>au cinéma</em> ce soir ? +<code>Allons-nous au cinéma <em>ce soir</em></code> ? +</pre> + +<p>Par défaut, un navigateur graphique affiche le texte contenu dans un élément <code><em></code> en italique mais cette mise en forme peut être changée avec CSS. Les lecteurs d'écran utiliseront un ton différent pour lire ce texte. Pour résumer, <em><code><em></code> signifie emphase et pas italique.</em></p> + +<h2 id="L'importance">L'importance</h2> + +<p>L'élément {{htmlelement("strong")}} permet d'indiquer une importance forte (c'est en quelque sorte une emphase renforcée).</p> + +<pre class="brush: html"><code><p> + <strong>Ne pas</strong> toucher ces produits chimiques. + Ces produits chimiques sont <strong>corrosifs !</strong> +</p></code> +</pre> + +<p>Ici aussi, par défaut les navigateurs graphiques afficheront le texte contenu dans <code><strong></code> en gras. Mais là encore, <em><code><strong></code> signifie « très important » et pas « gras » !</em> La mise en forme pourra être adaptée librement avec CSS. De même, un lecteur d'écran lira le texte différemment car celui-ci est important (et non parce qu'il est affiché en gras).</p> + +<h2 id="La_pertinence">La pertinence</h2> + +<p><code><strong></code> permet d'indiquer du texte qui est important pour le contexte courant. L'élément {{htmlelement("mark")}}, en revanche, signifie que le texte est pertinent par rapport au contenu destiné au lecteur. Un exemple courant est l'utilisation des résultats liés à une recherche :</p> + +<pre class="brush: html"><p> + « ce » apparaît 3 fois dans le texte : + <mark>Ce</mark> chat a tué <mark>ce</mark> + rat et <mark>ce</mark> moineau. +</p> +</pre> + +<p>Là encore, la mise en forme appliquée peut être modifiée. Par défaut, le texte sera affiché sur un fond jaune :</p> + +<p>{{EmbedLiveSample('La_pertinence', '100%', 64)}}</p> + +<div class="note"> +<p>Attention lorsqu'on utilise <code><mark></code> pour marquer des résultats liés à une recherche. Si la recherche renvoie des correspondances partielles, cela pourrait casser les éléments <code><mark></code>. Par exemple : <code>Le chat a couru après <mark>ce</mark>s oiseaux</code>. Cela entraînera des problèmes d'accessibilité car les lecteurs d'écran ne sauront pas traiter (ou traiteront mal) les mots ainsi découpés.</p> +</div> + +<h2 id="Les_éléments_associés_à_la_sémantique">Les éléments associés à la sémantique</h2> + +<p>Si vous souhaitez afficher un texte avec une mise en forme particulière, pensez d'abord au sens que vous souhaitez communiquer. Si le sens peut être transmis par {{htmlelement('em')}}, {{htmlelement('strong')}} ou {{htmlelement("mark")}}, utilisez ces éléments (plutôt que CSS seul, ce qui serait une mauvaise pratique).</p> + +<p>Il existe d'autres cas pour lesquels on affiche habituellement le texte en italique ou en gras et qui correspondent à une sémantique particulière qui peut être transmise grâce à des éléments HTML :</p> + +<ul> + <li>{{htmlelement("cite")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les titres d'œuvres citées</a></li> + <li>{{htmlelement("dfn")}} pour <a href="/fr/Apprendre/HTML/Comment/Définir_des_termes_avec_HTML">la première occurence d'un terme</a></li> + <li>{{htmlelement("q")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les citations dans le texte du document</a></li> + <li>{{htmlelement("var")}} pour <a href="/fr/Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML">les variables mathématiques</a></li> +</ul> + +<p>HTML ne permet pas de couvrir tous les cas de figures (sinon utiliser HTML correctement serait un calvaire de perfectionnisme). En règle générale, si vous souhaitez afficher du texte de façon différente et qu'il existe un élément HTML pour transmettre ce sens : utilisez-le, sinon vous pouvez utiliser l'élément neutre {{htmlelement("span")}} en spécifiant sa sémantique avec l'attribut {{htmlattrxref("class")}} et en le mettant en forme grâce à CSS.</p> + +<p>Les éléments que nous avons évoqués jusqu'à présent (à l'exception de <code><span></code>) ont tous une sémantique claire. En revanche, cela peut être plus ambigu avec les éléments {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}}. Ces éléments HTML permettent d'écrire du texte en gras, italique ou de le souligner. Ils sont apparus lorsque CSS n'existait pas ou avant qu'il ne soit supporté largement. Avec HTML5, ces éléments ont vu leur sémantique précisée.</p> + +<p>Voici la règle à respecter : s'il n'existe pas d'élément approprié permettant de retranscrire précisément le sens d'un texte qui serait généralement affiché en gras, italique ou souligné, alors on pourra utiliser <code><b></code>, <code><i></code> ou <code><u></code> à la place de <code><span></code>. Attention toutefois à ne pas oublier l'accessibilité : la mise en italique n'est pas particulièrement utile pour les personnes utilisant des lecteurs d'écran ou pour les personnes qui utilisent un alphabet non latin.</p> + +<ul> + <li>{{HTMLElement('i')}} permet généralement de retranscrire du texte placé en italique : des termes d'une langue étrangère, des dénominations taxonomiques, des termes techniques, des pensées, etc.</li> + <li>{{HTMLElement('b')}} permet de retranscrire du texte généralement affiché en gras : des mots-clés, des noms de produits, etc.</li> + <li>{{HTMLElement('u')}} permet de retranscrire des noms propres, des fautes d'orthographe</li> +</ul> + +<div class="note"> +<p>Léger avertissement à propos du soulignement : <strong>les visiteurs associent fortement le soulignement avec des hyperliens.</strong> De fait, on ne soulignera généralement que les liens d'une page. <code><u></code> ne doit être utilisé que lorsque la sémantique qu'il porte est sans équivoque. Dans ces cas, CSS pourra être utilisé pour définir un motif de soulignement différent, plus approprié. L'exemple qui suit illustre comment obtenir ce résultat.</p> +</div> + +<pre class="brush: html"><!-- Des noms scientifiques --> +<p> + Le colibri à gorge rubis (<i>Archilocus colubris</i>) + est l'espèce de colibri la plus répandue en Amérique + du Nord orientale. +</p> + +<!-- Des termes étrangers --> +<p> + Le menu comportait de nombreux termes exotiques comme + <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i> + et <i lang="en">pancakes</i>. +</p> + +<!-- Une faute d'orthographe --> +<p> + Un jour, j'écrirai <u class="erreur-orthographe">mieu</u>. +</p> + +<!-- Des mots-clés mis en avant dans un mode d'emploi --> +<ol> + <li> + <b>Tranchez</b> le pain en deux tranches. + </li> + <li> + <b>Insérez</b> une tranche de tomate et + une feuille de salade entre les tranches. + </li> +</ol> +</pre> + +<div id="instructions-with-b"> +<pre class="brush: css">/* Voici des mises en forme alternatives +permettant au lecteur de repérer la différence */ + +b { + font-weight: normal; + font-variant: small-caps; +} + +.erreur-orthographe { + text-decoration: underline red wavy; +} +</pre> +</div> + +<p>{{EmbedLiveSample('Les_éléments_associés_à_la_sémantique', '100%',192) }}</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("em")}}</li> + <li>{{htmlelement("strong")}}</li> + <li>{{htmlelement("mark")}}</li> + <li>{{htmlelement("b")}}</li> + <li>{{htmlelement("i")}}</li> + <li>{{htmlelement("u")}}</li> +</ul> diff --git a/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html b/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html new file mode 100644 index 0000000000..d67fd6a93d --- /dev/null +++ b/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html @@ -0,0 +1,79 @@ +--- +title: Utiliser les attributs de données +slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes +tags: + - Guide + - HTML + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<div>{{LearnSidebar}}</div> + +<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. <a href="/fr/docs/Web/HTML/Attributs_universels#attr-data-*">Les attributs <code>data-*</code></a> nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.</p> + +<h2 id="Syntaxe_HTML">Syntaxe HTML</h2> + +<p>La syntaxe est simple. Tout attribut d'un élément dont le nom commence par <code>data-</code> est un attribut de données (<em>data attribute</em>). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :</p> + +<pre class="brush: html"><article + id="voitureelectrique" + data-columns="3" + data-index-number="12314" + data-parent="voitures"> +... +</article></pre> + +<h2 id="Accéder_via_du_code_JavaScript">Accéder via du code JavaScript</h2> + +<p>Lire les valeurs de ces attributs avec du <a href="/fr/docs/Web/JavaScript">JavaScript</a> est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.</p> + +<p>Pour obtenir un attribut <code>data</code> avec l'objet <code>dataset</code>, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe <code>data-</code> (notez que les tirets sont convertis en <em><a href="https://fr.wikipedia.org/wiki/CamelCase">camelCase</a></em>).</p> + +<pre class="brush: js">var article = document.getElementById('voitureelectrique'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "voitures"</pre> + +<p>Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre <code>article.dataset.columns = 5</code> mettrait l'attribut à <code>"5"</code>.</p> + +<h2 id="Accéder_via_du_code_CSS">Accéder via du code CSS</h2> + +<p>Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les <a href="/fr/docs/Web/CSS">CSS</a>. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des <a href="/fr/docs/Web/CSS/content">contenus générés</a> en CSS avec la fonction {{cssxref("attr")}} :</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>Vous pouvez également utiliser les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">sélecteurs d'attributs</a> en CSS pour modifier les styles en fonction des données :</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p>Tout cela est visible dans l'exemple<a href="https://jsbin.com/ujiday/2/edit"> JSBin</a>. </p> + +<p>Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">capture vidéo d'écran</a> où sont utilisés les contenus générés et les transitions CSS (<a href="https://jsbin.com/atawaz/3/edit">exemple JSBin</a>).</p> + +<p>Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.</p> + +<h2 id="Problèmes">Problèmes</h2> + +<p>Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. </p> + +<p>Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures <a href="https://caniuse.com/#feat=dataset">ne prennent pas en charge le <code>dataset</code></a>. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la <a href="https://jsperf.com/data-dataset">la performance de lecture des attributs de données</a>, au stockage dans des structures de données JavaScript est assez faible. Utiliser un <code>dataset</code> est même plus lent que lire les données avec <code>getAttribute()</code>.</p> + +<p>Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.</p> + +<p>Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Cet article est une adaptation de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">« Utiliser les attributs de données en JavaScript et CSS »</a> publié sur hacks.mozilla.org (en anglais).</li> + <li>Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez {{domxref("SVGElement.dataset")}} et {{SVGAttr("data-*")}} pour davantage d'informations.</li> + <li><em><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a></em> (Sitepoint) (en anglais)</li> +</ul> diff --git a/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html b/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html new file mode 100644 index 0000000000..7db20d6d76 --- /dev/null +++ b/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html @@ -0,0 +1,99 @@ +--- +title: Utiliser JavaScript au sein d'une page web +slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web +tags: + - Beginner + - HTML + - JavaScript + - OpenPractices +translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.</td> + </tr> + </tbody> +</table> + +<h2 id="À_propos_de_JavaScript">À propos de JavaScript</h2> + +<p>{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.</p> + +<div class="note"> +<p>Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">les bases de JavaScript</a>. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter <a href="/en-US/docs/Web/JavaScript/Guide">le Guide JavaScript</a>.</p> +</div> + +<h2 id="Comment_déclencher_le_code_JavaScript_depuis_le_document_HTML">Comment déclencher le code JavaScript depuis le document HTML</h2> + +<p>Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser <code>script</code> : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.</p> + +<h3 id="Faire_référence_à_un_script_externe">Faire référence à un script externe</h3> + +<p>Généralement, un script est écrit dans un fichier <code>.js</code> à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut <code>src</code> pointant vers le fichier du script en utilisant l'URL du fichier :</p> + +<pre class="brush: html"><script src="chemin/vers/le/script.js"></script></pre> + +<h3 id="Inscrire_le_code_JavaScript_dans_le_document_HTML">Inscrire le code JavaScript dans le document HTML</h3> + +<p>Il est également possible d'insérer du code JavaScript directement dans la balise <code><script></code> sans fournir d'attribut <code>src</code>.</p> + +<pre class="brush: html"><script> +window.addEventListener('load', function () { + console.log('Cette fonction est exécutée une fois quand la page est chargée.'); +}); +</script></pre> + +<p>Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :</p> + +<ul> + <li>de rester concentré-e sur le contenu en cours</li> + <li>d'écrire du HTML qui se suffit à lui-même</li> + <li>d'écrire des applications JavaScript structurées</li> +</ul> + +<h2 id="Utiliser_les_scripts_de_façon_accessible">Utiliser les scripts de façon accessible</h2> + +<p>L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :</p> + +<ul> + <li><strong>Tout le contenu d'un document doit être disponible sous forme de texte (structuré).</strong> HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en <a href="/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML">listes non ordonnées</a> de <a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">liens</a>.</li> + <li><strong>Toutes les fonctionnalités doivent être accessibles depuis le clavier.</strong> + <ul> + <li>Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.</li> + <li>Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier.</li> + <li>Testez votre site en utilisant uniquement le clavier.</li> + </ul> + </li> + <li><strong>N'utilisez pas de limites de temps arbitraires.</strong> Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée.</li> + <li><strong>Les animations doivent être courtes et légères, sans clignotement.</strong> Les clignotements peuvent agacer, ou pire, <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">entraîner des crises d'épilepsie</a>. Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler.</li> + <li><strong>Laissez les utilisateurs initier les interactions.</strong> Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement.</li> + <li><strong>Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé.</strong> Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit. + <ul> + <li><em>A minima</em>, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : <code><noscript>Pour utiliser ce site, merci d'activer JavaScript.</noscript></code></li> + <li>Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur.</li> + <li>Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement.</li> + <li> + <p><em>Puisque tout le monde, ou presque, a JavaScript activé, <code><noscript></code> ne représente donc pas une excuse pour écrire des scripts inaccessibles.</em></p> + </li> + </ul> + </li> +</ul> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("script")}}</li> + <li>{{htmlelement("noscript")}}</li> + <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">Une introduction pour utiliser JavaScript de façon accessible, par James Edwards (en anglais)</a></li> + <li><a href="http://www.w3.org/TR/WCAG20/">Les consignes d'accessibilité préconisées par le W3C</a></li> +</ul> |