diff options
Diffstat (limited to 'files/fr/learn/html')
27 files changed, 646 insertions, 678 deletions
diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html index a3839113a3..f9fcdc2434 100644 --- a/files/fr/learn/html/cheatsheet/index.html +++ b/files/fr/learn/html/cheatsheet/index.html @@ -14,174 +14,271 @@ original_slug: Apprendre/HTML/Cheatsheet <p>Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (<em>cheatsheet</em>) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une <a href="/fr/docs/Web/HTML/Element">documentation HTML exhaustive</a> ainsi que différents <a href="/fr/Apprendre/HTML/Comment">tutoriels HTML détaillés</a>. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.</p> <div class="note"> -<p><strong>Rappel :</strong> Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.</p> +<p><strong>Note :</strong> Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.</p> </div> -<h2 id="Mise_en_forme_inline">Mise en forme <em>inline</em></h2> +<h2>Éléments en ligne</h2> -<p>Un élément dit « en ligne » ou <em>inline</em> prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.</p> +<p>Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <code><body></code>.</p> -<table class="nostripe standard-table"> +<table class="standard-table"> <thead> <tr> - <th scope="col">Utilisation</th> - <th scope="col">Fragment de code</th> - <th scope="col">Résultat</th> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> </tr> </thead> <tbody> <tr> - <td style="vertical-align: top;">Un lien simple</td> - <td style="vertical-align: top;"><code><a href="https://developer.mozilla.org">Un lien vers MDN</a></code></td> - <td style="vertical-align: top;"><a href="https://developer.mozilla.org">Un lien vers MDN</a></td> + <td>Un lien</td> + <td>{{HTMLElement("a")}}</td> + <td id="a-example"><pre class="brush: html"><a href="https://example.org"> +Un lien vers example.org</a>.</pre> + {{EmbedLiveSample("a-example", 100, 60)}}</td> </tr> <tr> - <td>Une image simple</td> - <td><code><img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" /></code></td> - <td><img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png"></td> + <td>Une image</td> + <td>{{HTMLElement("img")}}</td> + <td id="img-example"><pre class="brush: html"><img src="beast.png" width="25" /></pre> + {{EmbedLiveSample("img-example", 100, 60)}}</td> </tr> <tr> - <td>Un texte avec emphase</td> - <td><code><em>Je suis distingué</em></code></td> - <td><em>Je suis distingué</em></td> + <td>Un conteneur en ligne</td> + <td>{{HTMLElement("span")}}</td> + <td id="span-example"><pre class="brush: html">Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.</pre> + {{EmbedLiveSample("span-example", 100, 60)}}</td> </tr> <tr> - <td>Un texte marqué comme important</td> - <td><code><strong>Je suis important</strong></code></td> - <td><strong>Je suis important</strong></td> + <td>Emphase du texte</td> + <td>{{HTMLElement("em")}}</td> + <td id="em-example"><pre class="brush: html"><em>La classe non ?</em>.</pre> + {{EmbedLiveSample("em-example", 100, 60)}}</td> </tr> <tr> - <td>Un texte mis en avant</td> - <td><code><mark>Remarquez-moi</mark></code></td> - <td><mark>Remarquez-moi</mark></td> + <td>Texte idiomatique</td> + <td>{{HTMLElement("i")}}</td> + <td id="i-example"><pre class="brush: html"> +Marque la phrase <i>généralement en italique</i>.</pre> + {{EmbedLiveSample("i-example", 100, 60)}}</td> </tr> <tr> - <td>Barrer du texte qui n'est plus pertinent</td> - <td><code><s>Je ne suis plus d'actualité ou plus pertinent</s></code></td> - <td><s>Je ne suis plus d'actualité ou plus pertinent</s></td> + <td>Texte d'attention</td> + <td>{{HTMLElement("b")}}</td> + <td id="b-example"><pre class="brush: html"> +Met en avant un <b>mot ou une phrase d'une certaine importance</b>.</pre> + {{EmbedLiveSample("b-example", 100, 60)}}</td> </tr> <tr> - <td>Souligner pour ajouter une annotation non-textuelle</td> - <td><code>Ceci est <u>mal orthographié</u></code></td> - <td>Ceci est <u>mal orthographié</u></td> + <td>Texte d'importance</td> + <td>{{HTMLElement("strong")}}</td> + <td id="strong-example"><pre class="brush: html"><strong>Ce contenu est important !</strong></pre> + {{EmbedLiveSample("strong-example", 100, 60)}}</td> </tr> <tr> - <td>Du texte qui doit être affiché en indice</td> - <td><code>H<sub>2</sub>O</code></td> - <td>H<sub>2</sub>O</td> + <td>Marquer du texte</td> + <td>{{HTMLElement("mark")}}</td> + <td id="mark-example"><pre class="brush: html"><mark>Vous me voyez ?</mark></pre> + {{EmbedLiveSample("mark-example", 100, 60)}}</td> </tr> <tr> - <td>Du texte qui doit être affiché en exposant</td> - <td><code>M<sup>me</sup> de Bovary</code></td> - <td>M<sup>me</sup> de Bovary</td> + <td>Texte barré</td> + <td>{{HTMLElement("s")}}</td> + <td id="s-example"><pre class="brush: html"><s>Je ne suis plus pertinent.</s></pre> + {{EmbedLiveSample("s-example", 100, 60)}}</td> </tr> <tr> - <td>Une citation dans le cours du texte</td> - <td><code>Il a dit : <q>Je suis ton père.</q></code></td> - <td>Il a dit : <q>Je suis ton père.</q></td> + <td>Mise en indice</td> + <td>{{HTMLElement("sub")}}</td> + <td id="sub-example"><pre class="brush: html">H<sub>2</sub>O</pre> + {{EmbedLiveSample("sub-example", 100, 60)}}</td> + </tr> + <tr> + <td>Texte de commentaire</td> + <td>{{HTMLElement("small")}}</td> + <td id="small-example"><pre class="brush: html"> +Utilisé pour représenter <small>les petites +notes </small> d'un document.</pre> +{{EmbedLiveSample("small-example", 100, 60)}}</td> + </tr> + <tr> + <td>Adresse</td> + <td>{{HTMLElement("address")}}</td> + <td id="address-example"><pre class="brush: html"><address>15 Rue du Bourg</address></pre> +{{EmbedLiveSample("address-example", 100, 60)}}</td> + </tr> + <tr> + <td>Citation textuelle</td> + <td>{{HTMLElement("cite")}}</td> + <td id="cite-example"><pre class="brush: html">Pour plus d'informations sur les monstres, +voir <cite>Le monstrueux livre des monstres</cite>.</pre> + {{EmbedLiveSample("cite-example", 100, 60)}}</td> + </tr> + <tr> + <td>Mise en exposant</td> + <td>{{HTMLElement("sup")}}</td> + <td id="sup-example"><pre class="brush: html">x<sup>2</sup></pre> + {{EmbedLiveSample("sup-example", 100, 60)}}</td> + </tr> + <tr> + <td>Citation en ligne</td> + <td>{{HTMLElement("q")}}</td> + <td id="q-example"><pre class="brush: html"> +<q>Toi aussi mon fils ?</q>, a-t-il dit.</pre> +{{EmbedLiveSample("q-example", 100, 60)}}</td> </tr> <tr> <td>Un saut de ligne</td> - <td><code>Ligne 1 <br/> Ligne 2</code></td> - <td>Ligne 1<br> - Ligne 2</td> + <td>{{HTMLElement("br")}}</td> + <td id="br-example"><pre class="brush: html">Ligne 1<br>Ligne 2</pre> +{{EmbedLiveSample("br-example", 100, 80)}}</td> </tr> <tr> - <td>Du code informatique (code « machine »)</td> - <td><code><code>System.print.File("coucou")</code></code></td> - <td><code>System.print.File("coucou")</code></td> + <td>Un saut de ligne possible</td> + <td>{{HTMLElement("wbr")}}</td> + <td id="wbr-example"><pre class="brush: html"> +<div style="width: 200px"> + Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch. +</div></pre> +{{EmbedLiveSample("wbr-example", 100, 80)}}</td> </tr> <tr> - <td>Un fichier audio intégré</td> - <td><code><audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio></code></td> - <td> - <audio>L'élément <code>audio</code> n'est pas supporté.</audio> - </td> + <td>Date</td> + <td>{{HTMLElement("time")}}</td> + <td id="time-example"><pre class="brush: html"> +Utilisé pour mettre en forme la date. Par exemple : +<time datetime="2020-05-24" pubdate> +Publié le 24 mai 2020</time>.</pre> +{{EmbedLiveSample("time-example", 100, 60)}}</td> </tr> <tr> - <td>Un fichier vidéo intégré</td> - <td><code><video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video></code></td> - <td> - <video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video> - </td> + <td>Code</td> + <td>{{HTMLElement("code")}}</td> + <td id="code-example"><pre class="brush: html"> +Ce texte est au format normal, +mais <code>celui-ci représente du code</code>.</pre> +{{EmbedLiveSample("code-example", 100, 60)}}</td> + </tr> + <tr> + <td>Audio</td> + <td>{{HTMLElement("audio")}}</td> + <td id="audio-example"><pre class="brush: html"> +<audio controls="controls"> + <source="t-rex-roar.mp3" type="audio/mpeg"> + Votre navigateur ne prend pas en charge audio. +</audio></pre> +{{EmbedLiveSample("audio-example", 100, 80)}}</td> + </tr> + <tr> + <td>Video</td> + <td>{{HTMLElement("video")}}</td> + <td id="video-example"><pre class="brush: html"> +<video controls width="250" + src="https://archive.org/download/ElephantsDream/ed_hd.ogv" > + L'élément <code>video</code> n'est pas pris en charge. +</video></pre> +{{EmbedLiveSample("video-example", 100, 200)}}</td> </tr> </tbody> </table> -<h2 id="Mise_en_forme_block">Mise en forme <em>block</em></h2> +<h2>Éléments de bloc</h2> -<p>Les éléments de bloc (<em>block</em> en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.</p> +<p>Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.</p> -<table class="nostripe standard-table"> +<table class="standard-table"> <thead> <tr> - <th scope="col">Utilisation</th> - <th scope="col">Fragment de code</th> - <th scope="col">Résultat</th> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> </tr> </thead> <tbody> <tr> - <td style="vertical-align: top;">Un paragraphe simple</td> - <td style="vertical-align: top;"> - <p><code><p>Je suis un paragraphe</p></code><br> - <code><p>Je suis un autre paragraphe</p> </code></p> - </td> - <td style="vertical-align: top;"> - <p>Je suis un paragraphe</p> - - <p>Je suis un autre paragraphe</p> + <td>Un paragraphe</td> + <td>{{HTMLElement("p")}}</td> + <td id="p-example"><pre class="brush: html"> +<p>Je suis un paragraphe</p> +<p>Et un autre paragraph</p></pre> +{{EmbedLiveSample("p-example", 100, 150)}} </td> </tr> <tr> - <td style="vertical-align: top;">Une liste non-ordonnée</td> - <td style="vertical-align: top;"><code><ul><br> - <li>Je suis un élément</li><br> - <li>Je suis un autre élément</li><br> - <ul></code></td> - <td style="vertical-align: top;"> - <ul> - <li>Je suis un élément</li> - <li>Je suis un autre élément</li> - </ul> - </td> + <td>Une citation étendue</td> + <td>{{HTMLElement("blockquote")}}</td> + <td id="blockquote-example"><pre class="brush: html">Ils sont alors dit : +<blockquote>L'élément blockquote indique une citation étendue.</blockquote></pre> +{{EmbedLiveSample("blockquote-example", 100, 100)}} + </td> </tr> <tr> - <td style="vertical-align: top;">Une liste ordonnée</td> - <td style="vertical-align: top;"><code><ol><br> - <li>Je suis le premier élément</li><br> - <li>Je suis le deuxième élément</li><br> - <ol></code></td> - <td style="vertical-align: top;"> - <ol> - <li>Je suis le premier élément</li> - <li>Je suis le deuxième élément</li> - </ol> - </td> + <td>Information supplémentaire</td> + <td>{{HTMLElement("details")}}</td> + <td id="details-example"><pre class="brush: html"> +<details> + <summary>Anti-sèche HTML</summary> + <p>Éléments en ligne</p> + <p>Éléments de bloc</p> +</details></pre> +{{EmbedLiveSample("details-example", 100, 150)}} + </td> </tr> <tr> - <td style="vertical-align: top;">Une ligne horizontale</td> - <td style="vertical-align: top;"><code><hr/></code></td> - <td style="vertical-align: top;"> - <hr></td> + <td>Une liste non-ordonnée</td> + <td>{{HTMLElement("ul")}}</td> + <td id="ul-example"><pre class="brush: html"> +<ul><br> + <li>Je suis un élément de liste</li><br> + <li>Et moi un autre</li><br> +</ul></pre> +{{EmbedLiveSample("ul-example", 100, 100)}} + </td> </tr> <tr> - <td style="vertical-align: top;">Des titres de différents niveaux (du plus important au moins important)</td> - <td style="vertical-align: top;"> - <p><h2>Un titre de niveau 2</h2><br> - <h3>Un titre de niveau 3</h3><br> - <h4>Un titre de niveau 4</h4><br> - <h5>Un titre de niveau 5</h5></p> - </td> - <td style="vertical-align: top;"> - <h2 id="Un_titre_de_niveau_2">Un titre de niveau 2</h2> - - <h3 id="Un_titre_de_niveau_3">Un titre de niveau 3</h3> - - <h4 id="Un_titre_de_niveau_4">Un titre de niveau 4</h4> - - <h5 id="Un_titre_de_niveau_5">Un titre de niveau 5</h5> + <td>Une liste ordonnée</td> + <td>{{HTMLElement("ol")}}</td> + <td id="ol-example"><pre class="brush: html"> +<ol><br> + <li>Je suis le premier élément</li><br> + <li>Et moi le deuxième</li><br> +</ol></pre> +{{EmbedLiveSample("ol-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Une liste de définitions</td> + <td>{{HTMLElement("dl")}}</td> + <td id="dl-example"><pre class="brush: html"> +<dl> + <dt>Un terme</dt><br> + <dd>La définition du terme</dd> + <dt>Un autre terme</dt> + <dd>La définition d'un autre terme</dd> +</dl></pre> +{{EmbedLiveSample("dl-example", 100, 150)}} </td> </tr> + <tr> + <td>Un séparateur horizontal</td> + <td>{{HTMLElement("hr")}}</td> + <td id="hr-example"><pre class="brush: html"> +avant<hr>après</pre> +{{EmbedLiveSample("hr-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Un titre</td> + <td>{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}</td> + <td id="h1-h6-example"><pre class="brush: html"> +<h1> Titre de niveau 1 </h1> +<h2> Titre de niveau 2 </h2> +<h3> Titre de niveau 3 </h3> +<h4> Titre de niveau 4 </h4> +<h5> Titre de niveau 5 </h5> +<h6> Titre de niveau 6 </h6></pre> +{{EmbedLiveSample("h1-h6-example", 100, 350)}} + </td> + </tr> </tbody> -</table> +</table>
\ No newline at end of file diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html index 5d6e826597..2bd7ccebb6 100644 --- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -9,11 +9,9 @@ tags: translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_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"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -27,7 +25,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image </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> +<p><strong>Attention :</strong> 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> diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.html b/files/fr/learn/html/howto/define_terms_with_html/index.html index ba6015387c..c4a834b1a4 100644 --- a/files/fr/learn/html/howto/define_terms_with_html/index.html +++ b/files/fr/learn/html/howto/define_terms_with_html/index.html @@ -9,15 +9,13 @@ tags: translation_of: Learn/HTML/Howto/Define_terms_with_HTML original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_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"> +<table class="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> + <td>Vous devez 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> @@ -33,8 +31,6 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML <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> @@ -69,7 +65,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML </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> +<p><strong>Note :</strong> 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> @@ -91,7 +87,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML <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> +<p><strong>Note :</strong> 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> @@ -123,7 +119,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML </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> +<p><strong>Note :</strong> 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> diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html index 62b8556ca8..e5f130e8ca 100644 --- a/files/fr/learn/html/howto/index.html +++ b/files/fr/learn/html/howto/index.html @@ -13,16 +13,14 @@ original_slug: Apprendre/HTML/Comment <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> + <li><a href="/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li> + <li><a href="/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="/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> @@ -30,35 +28,32 @@ original_slug: Apprendre/HTML/Comment <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> + <li><a href="/fr/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="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li> + <li><a href="/fr/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="/fr/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li> + <li><a href="/fr/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="/fr/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li> + <li><a href="/fr/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> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li> + <li><a href="/fr/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> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li> + <li><a href="/fr/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="/fr/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> @@ -66,25 +61,21 @@ original_slug: Apprendre/HTML/Comment <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> + <li><a href="/fr/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li> + <li><a href="/fr/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> + <li><a href="/fr/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="/fr/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> @@ -99,42 +90,40 @@ original_slug: Apprendre/HTML/Comment <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> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li> + <li><a href="/fr/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> + <li><a href="/fr/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li> + <li><a href="/fr/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> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li> + <li><a href="/fr/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> + <li><a href="/fr/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li> + <li><a href="/fr/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> + <li><a href="/fr/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="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> + <li><a href="/fr/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="/fr/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> @@ -142,9 +131,7 @@ original_slug: Apprendre/HTML/Comment <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> + <li><a href="/fr/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="/fr/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html index c920171729..e57980829e 100644 --- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html @@ -9,11 +9,9 @@ tags: translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web --- -<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"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -31,7 +29,7 @@ original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web <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> +<p><strong>Note :</strong> 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="/fr/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="/fr/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> @@ -67,7 +65,7 @@ window.addEventListener('load', function () { <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>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="/fr/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> diff --git a/files/fr/learn/html/index.html b/files/fr/learn/html/index.html index 3e7ba5b847..95e31501ca 100644 --- a/files/fr/learn/html/index.html +++ b/files/fr/learn/html/index.html @@ -41,27 +41,21 @@ original_slug: Apprendre/HTML <dl> <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a></dt> <dd>Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a></dt> + <dt><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a></dt> <dd>Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">Tableaux HTML</a></dt> + <dt><a href="/fr/docs/Learn/HTML/Tables">Tableaux HTML</a></dt> <dd>Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Formulaire HTML</a></dt> + <dt><a href="/fr/docs/Learn/HTML/Forms">Formulaire HTML</a></dt> <dd>Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.</dd> </dl> -<article class="approved"> -<div class="boxed translate-rendered text-content"> <h2 id="Résolution_de_problèmes_courants_en_HTML">Résolution de problèmes courants en HTML</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Utilisation du HTML pour la solution de problèmes courants</a> fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.</p> +<p><a href="/fr/docs/Learn/HTML/Howto">Utilisation du HTML pour la solution de problèmes courants</a> fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.</p> <h2 id="Voir_aussi">Voir aussi</h2> -<div class="document-head" id="wiki-document-head"> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> sur MDN</dt> + <dt><a href="/fr/docs/Web/HTML">HTML (HyperText Markup Language)</a> sur MDN</dt> <dd>Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.</dd> -</dl> -</div> -</div> -</article> +</dl>
\ No newline at end of file diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html index 4a6d9d8f3a..d3602ccd19 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</p> +<p>Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -34,11 +34,11 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting </tbody> </table> -<h2 id="Listes_descriptives"><span>Listes descriptives</span></h2> +<h2 id="Listes_descriptives">Listes descriptives</h2> -<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">des listes simples en HTML</a>, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — <strong>les <span>listes descriptives</span></strong>. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :</p> +<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">des listes simples en HTML</a>, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — <strong>les listes descriptives</strong>. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :</p> -<pre class="notranslate">soliloque +<pre>soliloque Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce). monologue Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents. @@ -47,7 +47,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen <p>Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (<strong>d</strong>escription <strong>t</strong>erm) et chaque description d'un élément {{htmlelement("dd")}} (<strong>d</strong>escription <strong>d</strong>efinition). Terminons en balisant l'exemple ci‑dessus :</p> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt>soliloque</dt> <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd> <dt>monologue</dt> @@ -69,11 +69,13 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen <p>Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :</p> -<dl> - <dt>aparté</dt> - <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> - <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd> -</dl> +<pre class="brush: html"> +<dl> + <dt>aparté</dt> + <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> + <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd> +</dl> +</pre> <h3 id="Apprentissage_interactif_balisez_une_série_de_définitions">Apprentissage interactif : balisez une série de définitions</h3> @@ -81,10 +83,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen <p>Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, cliquez sur<em> Voir la solution</em>.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -108,7 +107,7 @@ Une couleur brun léger.</textarea> -<pre class="brush: css notranslate">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -130,7 +129,7 @@ body { -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -207,9 +206,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Citations">Citations</h2> @@ -219,38 +217,38 @@ textarea.onkeyup = function(){ <p>Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <code><blockquote></code> :</p> -<pre class="brush: html notranslate"><p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc +<pre class="brush: html"><p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p></pre> +<h4>Exemple de bloc de citation</h4> <p>Pour le changer en bloc de citation, on ferait simplement ceci :</p> -<pre class="brush: html notranslate"><blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p> </blockquote></pre> <p>Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :</p> - -<blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> -<p>L'<strong>Élément HTML <code><blockquote></code></strong> (ou <em>Élément HTML bloc de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p> -</blockquote> +<p>{{EmbedLiveSample("Blocs_de_citation")}}</p> <h3 id="Citations_en_ligne">Citations en ligne</h3> <p>Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <code><q></code> :</p> -<pre class="brush: html notranslate"><p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu +<h4>Exemple de citation en ligne</h4> + +<pre class="brush: html"><p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p></pre> <p>Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :</p> -<p>L'élément citation — <code><q></code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p> +<p>{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}</p> <h3 id="Citations_2">Citations</h3> <p>Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un <code>cite</code> sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <code><cite></code> à la source de la citation d'une manière ou d'une autre :</p> -<pre class="brush: html notranslate"><p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> <cite>page blockquote du MDN</cite></a>: </p> @@ -285,10 +283,7 @@ pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p <p>Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour obtenir la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -307,7 +302,7 @@ pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -327,7 +322,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -404,15 +399,14 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Abréviations">Abréviations</h2> <p>Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :</p> -<pre class="notranslate"><p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> +<pre><p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> <p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p></pre> @@ -425,17 +419,14 @@ textarea.onkeyup = function(){ <p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p> <div class="note"> -<p><strong>Note </strong>: Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <code><abbr></code>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.</p> +<p><strong>Note :</strong> Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <code><abbr></code>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.</p> </div> <h3 id="Apprentissage_actif_marquer_une_abréviation">Apprentissage actif : marquer une abréviation</h3> <p>Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.</p> -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -452,7 +443,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -472,7 +463,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -549,21 +540,20 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<div>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</div> +<div>{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}</div> <h2 id="Balisage_des_détails_de_contact">Balisage des détails de contact</h2> <p>HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Chris Mills, Manchester, The Grim North, UK</p> </address></pre> <p>Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas <em>n'importe quelle</em> adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p> </address></pre> @@ -571,7 +561,7 @@ textarea.onkeyup = function(){ <p>Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :</p> -<pre class="brush: html notranslate"><p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> +<pre class="brush: html"><p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> <p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> <p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p></pre> @@ -581,7 +571,7 @@ textarea.onkeyup = function(){ <p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> -<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p> +<p>Si x^2 égale 9, x doit valoir 3 ou -3.</p> <h2 id="Représentation_du_code_informatique">Représentation du code informatique</h2> @@ -597,10 +587,10 @@ textarea.onkeyup = function(){ <p>Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>) :</p> -<pre class="brush: html notranslate"><pre><code>var para = document.querySelector('p'); +<pre class="brush: html"><pre><code>var para = document.querySelector('p'); para.onclick = function() { - alert('<span>Owww, arrête de me toucher !</span>'); + alert('Owww, arrête de me toucher !'); }</code></pre> <p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p> @@ -623,7 +613,7 @@ para.onclick = function() { <p>HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :</p> -<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 janvier 2016</<span class="pl-ent">time</span>></pre> +<pre class="brush: html"><time datetime="2016-01-20">20 janvier 2016</time></pre> <p>En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :</p> @@ -634,31 +624,31 @@ para.onclick = function() { <li>20/01/16</li> <li>01/20/16</li> <li>Le 20 du mois prochain</li> - <li><span lang="fr">20e Janvier 2016</span></li> - <li><span lang="ja">2016年1月20日</span></li> - <li><span lang="ja">etc.</span></li> + <li>20e Janvier 2016</li> + <li>2016年1月20日</li> + <li>etc.</li> </ul> <p>Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.</p> <p>L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :</p> -<pre class="brush: html notranslate"><!-- Simple date standard --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 janvier 2016</<span class="pl-ent">time</span>> +<pre class="brush: html"><!-- Simple date standard --> +<time datetime="2016-01-20">20 janvier 2016</time> <!-- Juste l'année et le mois --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>janvier 2016</<span class="pl-ent">time</span>> +<time datetime="2016-01">janvier 2016</time> <!-- Juste le mois et les jour --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 janvier</<span class="pl-ent">time</span>> +<time datetime="01-20">20 janvier</time> <!-- Juste l'heure, heure et minutes --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19h30</<span class="pl-ent">time</span>> +<time datetime="19:30">19h30</time> <!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19h30m1,856s</<span class="pl-ent">time</span>> +<time datetime="19:30:01.856">19h30m1,856s</time> <!-- Date et heure --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>19h30, le 20 janvier 2016</<span class="pl-ent">time</span>> +<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> <!-- Date et heure avec décalage de fuseau horaire --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>19h30, le 20 janvier 2016 corespond à 20h30 en France</<span class="pl-ent">time</span>> +<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time> <!-- Appel d'un numéro de semains donné --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>La 4e semaine de 2016</<span class="pl-ent">time</span>></pre> +<time datetime="2016-W04">La 4e semaine de 2016</time></pre> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html index 95ce137c9b..abaeb6d167 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web <em>une toile</em>. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.</p> +<p>Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web <em>une toile</em>. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -39,30 +39,30 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web <em>une toile</em> — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).</p> <div class="note"> -<p><strong>Note </strong>: Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).</p> +<p><strong>Note :</strong> Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).</p> </div> <p>La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.</p> -<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="bbc-homepage.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="bbc-homepage.png"></p> <h2 id="Anatomie_dun_lien">Anatomie d'un lien</h2> <p>Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une <strong>Hypertext Reference</strong>) contenant l'adresse web vers laquelle vous voulez que le lien pointe.</p> -<pre class="brush: html notranslate"><p>Je suis en train de créer un lien à +<pre class="brush: html"><p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>. </p></pre> <p>qui donne le résultat suivant :</p> -<p>Je suis en train de créer un lien à <a class="ignore-external" href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p> +<p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p> <h3 id="Ajouter_des_informations_dassistance_avec_lattribut_title">Ajouter des informations d'assistance avec l'attribut title</h3> <p>L'autre attribut qu'il est possible d'ajouter à un lien est <code>title</code> ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :</p> -<pre class="brush: html notranslate"><p>Je suis en train de créer un lien à +<pre class="brush: html"><p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>. @@ -70,10 +70,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Voici le résultat (le contenu de <code>title</code> apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :</p> -<p>Je suis en train de créer un lien vers <a class="ignore-external" href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil de Mozilla</a></p> +<p>Je suis en train de créer un lien vers <a href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil de Mozilla</a></p> <div class="note"> -<p><strong>Note </strong>: le <code>title</code> d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de <code>title</code>. Si une information de <code>title</code> est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.</p> +<p><strong>Note :</strong> le <code>title</code> d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de <code>title</code>. Si une information de <code>title</code> est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.</p> </div> <h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3> @@ -90,12 +90,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne">éléments bloc </a>. Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <code><a></a></code>.</p> -<pre class="brush: html notranslate"><a href="https://www.mozilla.org/fr/"> +<pre class="brush: html"><a href="https://www.mozilla.org/fr/"> <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"> </a></pre> <div class="note"> -<p><strong>Note </strong>: Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.</p> +<p><strong>Note :</strong> Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.</p> </div> <h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2> @@ -106,7 +106,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> -<p><img alt="Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf." src="dir-struct.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf." src="dir-struct.png"></p> <p>La <strong>racine</strong> de cette structure de répertoires s'appelle <code>creating-hyperlinks</code>. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier <code>index.html</code> et un <code>contacts.html</code>. Sur un site réel, <code>index.html</code> serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).</p> @@ -116,38 +116,38 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <li> <p><strong>Dans un même dossier </strong>: si vous voulez inclure un hyperlien dans <code>index.html</code> (celui de plus haut niveau) pointant vers <code>contacts.html</code>, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est <code>contacts.html</code> :</p> - <pre class="brush: html notranslate"><p>Voulez‑vous rencontrer un membre du personnel en particulier ? + <pre class="brush: html"><p>Voulez‑vous rencontrer un membre du personnel en particulier ? Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p></pre> </li> <li> <p><strong>Descendre dans les sous-répertoires </strong>: si vous désirez inclure un hyperlien dans <code>index.html</code> (<code>celui</code> de plus haut niveau) pointant vers <code>projects/index.html</code>, vous avez besoin de descendre dans le dossier<code>projects</code> avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera <code>projects/index.html</code> :</p> - <pre class="brush: html notranslate"><p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p></pre> + <pre class="brush: html"><p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p></pre> </li> <li> <p><strong>Monter dans les dossiers parents </strong>: si vous voulez inclure un hyperlien dans <code>projects/index.html</code> qui pointe vers <code>pdfs/projects-brief.pdf</code>, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier <code>pdfs</code>. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — <code>..</code> —, de sorte que l'URL à utiliser sera <code>../pdfs/project‑brief.pdf</code> :</p> - <pre class="brush: html notranslate"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> + <pre class="brush: html"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> </li> </ul> <div class="note"> -<p><strong>Note </strong>: Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. <code>../../../complexe/path/to/my/file.html</code>.</p> +<p><strong>Note :</strong> Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. <code>../../../complexe/path/to/my/file.html</code>.</p> </div> <h3 id="Fragments_de_documents">Fragments de documents</h3> <p>Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme <strong>fragment de document</strong>), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :</p> -<pre class="brush: html notranslate"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> +<pre class="brush: html"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> <p>Puis, pour faire un lien vers cet <code>id</code> précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :</p> -<pre class="brush: html notranslate"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> +<pre class="brush: html"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> <p>Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers <em>une autre partie du même document</em> :</p> -<pre class="brush: html notranslate"><p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p></pre> +<pre class="brush: html"><p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p></pre> <h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3> @@ -184,13 +184,13 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a& <p><em><strong>Bon</strong> texte de lien:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Télécharger Firefox </a></p></pre> <p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Cliquer ici </a> pour télécharger Firefox</p> @@ -225,7 +225,7 @@ pour télécharger Firefox</p> <p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p> -<pre class="brush: html notranslate"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> +<pre class="brush: html"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> Télécharger le rapport des ventes (PDF, 10Mo) </a></p> @@ -241,10 +241,10 @@ pour télécharger Firefox</p> <p>Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut <code>download</code> pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :</p> -<pre class="notranslate"><code><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" download="firefox-latest-64bit-installer.exe"> Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France) -</a></code></pre> +</a></pre> <h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2> @@ -270,10 +270,10 @@ pour télécharger Firefox</p> <p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p> -<p><img alt="Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux." src="accueil.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux." src="accueil.png"></p> <div class="note"> -<p><strong>Note </strong>: si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> pour voir la réponse correcte.</p> +<p><strong>Note :</strong> si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> pour voir la réponse correcte.</p> </div> <h2 id="Liens_de_courriel">Liens de courriel</h2> @@ -282,7 +282,7 @@ pour télécharger Firefox</p> <p>Sous sa forme la plus basique et la plus communément utilisée, un lien <code>mailto:</code> indique simplement l'adresse du destinataire voulu. Par exemple :</p> -<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> +<pre class="brush: html"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> </pre> <p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p> @@ -295,7 +295,7 @@ pour télécharger Firefox</p> <p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p> -<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel"> +<pre class="brush: html"><a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel"> Envoyer un mail avec copie, copie cachée, sujet et corps de message </a></pre> diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.html b/files/fr/learn/html/introduction_to_html/debugging_html/index.html index 34d758d938..ed0cfa6a2b 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.</p> +<p>Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -36,7 +36,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <p>Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.</p> -<p><img alt="Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne »." src="fr-erreur.png" style="display: block; margin: 0px auto;">Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez <code>println!(Salut, Ô Monde!");</code> il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.</p> +<p><img alt="Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne »." src="fr-erreur.png">Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez <code>println!(Salut, Ô Monde!");</code> il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.</p> <p>Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.</p> @@ -60,7 +60,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <p>HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !</p> <div class="note"> -<p><strong>Note </strong>: HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.</p> +<p><strong>Note :</strong> HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.</p> </div> <h3 id="Apprentissage_actif_étude_avec_un_code_permissif">Apprentissage actif : étude avec un code permissif</h3> @@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <ol> <li>Primo, télécharchez notre démo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example </a>et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit <strong>malformé</strong>, par opposition à <strong>bien-formé</strong>).</li> - <li>Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :<img alt="Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. " src="fr-html-errone.png" style="display: block; margin: 0px auto;"></li> + <li>Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :<img alt="Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. " src="fr-html-errone.png"></li> <li>Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément <code>body</code> est affiché) : <pre> <h1>Exemple de HTML à déboguer</h1> @@ -100,7 +100,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML </ul> </li> <li>Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">Découverte des outils de développement du navigateur</a>.</li> - <li>Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : <img alt="L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur." src="fr-inspecteur.png" style="display: block; margin: 0px auto;"></li> + <li>Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : <img alt="L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur." src="fr-inspecteur.png"></li> <li>Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes <em>devraient</em> donner le même résultat) : <ul> <li>Les éléments <code>p</code> et <code>li</code> ont été pourvus de balises fermantes.</li> @@ -127,9 +127,9 @@ en HTML. Voici un exemple :</strong> <p>La meilleure stratégie consiste à faire passer votre page HTML par le <a href="https://validator.w3.org/">Markup Validation Service (</a>Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.</p> -<p><img alt="La page d'accueil du validateur HTML" src="fr-w3c.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="La page d'accueil du validateur HTML" src="fr-w3c.png"></p> -<p>Pour définir le HTML à valider, vous pouvez donner une adresse web (<em><span>Validate by</span> URI</em>) , téléverser un fichier HTML (<em>Validate by File Upload</em>) ou entrer directement du code HTML (<em>Validate by Direct Input</em>).</p> +<p>Pour définir le HTML à valider, vous pouvez donner une adresse web (<em>Validate by URI</em>) , téléverser un fichier HTML (<em>Validate by File Upload</em>) ou entrer directement du code HTML (<em>Validate by Direct Input</em>).</p> <h3 id="Apprentissage_actif_validation_d'un_document_HTML">Apprentissage actif : validation d'un document HTML</h3> @@ -144,7 +144,7 @@ en HTML. Voici un exemple :</strong> <p>Cela vous donnera une liste d'erreurs et autres informations.</p> -<p><img alt="La liste des résultats de la validation de HTML par le service de validation du W3C." src="fr-liste-erreur.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="La liste des résultats de la validation de HTML par le service de validation du W3C." src="fr-liste-erreur.png"></p> <h4 id="Interprétation_des_messages_d'erreur">Interprétation des messages d'erreur</h4> @@ -159,7 +159,7 @@ en HTML. Voici un exemple :</strong> <pre>exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html></pre> <div class="note"> - <p><strong>Note</strong> : un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.</p> + <p><strong>Note :</strong> un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.</p> </div> </li> <li>« Unclosed element <code>ul</code> » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} <em>est</em> correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.</li> @@ -167,9 +167,9 @@ en HTML. Voici un exemple :</strong> <p>Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.</p> -<p>Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie <span>: </span></p> +<p>Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : </p> -<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="valid-html-banner.png" style="display: block; margin: 0 auto;"></p> +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="valid-html-banner.png"></p> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html index 37fcd02cc2..2ffb0e3cdf 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}<br> </div> -<p class="summary">De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</p> +<p>De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -56,7 +56,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur Un « site web typique » pourrait ressembler à quelque chose comme ceci :</dd> </dl> -<p><img alt="un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page." src="ecran.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page." src="ecran.png"></p> <h2 id="HTML_pour_structurer_un_contenu">HTML pour structurer un contenu</h2> @@ -65,7 +65,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur <p>C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?</p> <div class="note"> -<p><strong>Note </strong>: Les daltoniens représentent environ <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a> ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait <a href="https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle">285 millions de personnes aveugles et malvoyantes</a> dans le monde, alors que la population totale était <a href="https://fr.wikipedia.org/wiki/Population_mondiale">d'environ 7 milliards </a>d'habitants).</p> +<p><strong>Note :</strong> Les daltoniens représentent environ <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a> ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait <a href="https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle">285 millions de personnes aveugles et malvoyantes</a> dans le monde, alors que la population totale était <a href="https://fr.wikipedia.org/wiki/Population_mondiale">d'environ 7 milliards </a>d'habitants).</p> </div> <p>Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure">ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences</a>.</p> @@ -174,7 +174,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur <ul> <li>{{HTMLElement('main')}} est relatif au contenu <em>unique de la page</em>. N'utilisez <code><main></code> que une seule fois par page et placez-le directement à l'intérieur de l'élement {{HTMLElement('body')}}. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments.</li> <li>{{HTMLElement('article')}} entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.)</li> - <li>{{HTMLElement('section')}} ressemble à <code><article></code>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un <code><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">heading</a></code> ; notez également que vous pouvez fractionner un <code><article></code> en plusieurs <code><section></code> ou bien des <code><section></code> en divers <code><article></code>, selon le contexte.</li> + <li>{{HTMLElement('section')}} ressemble à <code><article></code>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un <code><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">heading</a></code> ; notez également que vous pouvez fractionner un <code><article></code> en plusieurs <code><section></code> ou bien des <code><section></code> en divers <code><article></code>, selon le contexte.</li> <li>{{HTMLElement('aside')}} contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc).</li> <li>{{HTMLElement('header')}} représente un groupe de contenus introductoires. Enfant de {{HTMLElement('body')}}, il définit l'en-tête général de la page web, mais enfant de {{HTMLElement('article')}} ou {{HTMLElement('section')}} il définit un en‑tête propre à cette section (ne confondez pas <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter%20un%20titre">titles et headings</a>).</li> <li>{{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.</li> @@ -212,7 +212,7 @@ alors qu'il titubait en travers de la porte <span class="editor-note"> <p>Ce n'est pas vraiment un élément <code><aside></code> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <code><section></code>, car il ne fait pas partie du contenu principal de la page. Donc un <code><div></code> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.</p> <div class="warning"> -<p><strong>Avertissement</strong> : les <code>div</code> sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.</p> +<p><strong>Attention :</strong> les <code>div</code> sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.</p> </div> <h3 id="Sauts_de_ligne_et_traits_horizontaux">Sauts de ligne et traits horizontaux</h3> @@ -226,7 +226,7 @@ Qui aimait écrire du HTML<br> Mais ses structures et sémantiques affligeantes<br> rendaient de ses marquages la lecture inélégante.</p></pre> -<p>Sans éléments <code><br></code>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html">HTML ignore la plupart des blancs</a>) ; avec des <br> dans le code, voici le rendu de ce qui précède :</p> +<p>Sans éléments <code><br></code>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html">HTML ignore la plupart des blancs</a>) ; avec des <br> dans le code, voici le rendu de ce qui précède :</p> <p>Il y avait une fois une fille nommée Nell<br> Qui aimait écrire du HTML<br> @@ -235,27 +235,25 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <p><code>Les éléments <hr></code> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :</p> +<h3>Exemple avec hr</h3> + <pre><p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p> <hr> <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p></pre> <p>sera rendu ainsi :</p> - -<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p> - -<hr> -<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p> +<p>{{EmbedLiveSample("Exemple_avec_hr")}}</p> <h2 id="Planification_dun_site_web_simple">Planification d'un site web simple</h2> <p>Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !</p> <ol> - <li>Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. <img alt="les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité." src="fr_commun.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. <img alt="Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page." src="fr-structure.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. <img alt="Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays." src="fr-liste.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.<img alt="Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter." src="fr-tri.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. <img alt="Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat." src="fr-map.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> + <li>Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. <img alt="les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité." src="fr_commun.png"></li> + <li>Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. <img alt="Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page." src="fr-structure.png"></li> + <li>Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. <img alt="Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays." src="fr-liste.png"></li> + <li>Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.<img alt="Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter." src="fr-tri.png"></li> + <li>Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. <img alt="Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat." src="fr-map.png"></li> </ol> <h3 id="Apprentissage_actif_créez_la_cartographie_de_votre_propre_site">Apprentissage actif : créez la cartographie de votre propre site</h3> @@ -263,7 +261,7 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <p>Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?</p> <div class="note"> -<p><strong>Note </strong>: Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.</p> +<p><strong>Note :</strong> Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -273,7 +271,7 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">Using HTML sections and outlines </a>: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.</li> + <li><a href="/fr/docs/Web/HTML/Element/Heading_Elements">Using HTML sections and outlines </a>: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.</li> </ul> <p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</p> diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html index 5636377789..dce8e89b0e 100644 --- a/files/fr/learn/html/introduction_to_html/getting_started/index.html +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.</p> +<p>Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -44,14 +44,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <pre class="brush: html"><p>Mon chat est très grincheux</p></pre> <div class="note"> -<p><strong>Note : </strong>Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.</p> +<p><strong>Note :</strong> Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.</p> </div> <h2 id="Anatomie_d'un_élément_HTML">Anatomie d'un élément HTML</h2> <p>Regardons notre élément paragraphe d'un peu plus près :</p> -<p><img alt="" src="chat-grincheuxl.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="" src="chat-grincheuxl.png"></p> <p>Les principales parties de notre élément sont :</p> @@ -68,10 +68,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <p>Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -88,7 +85,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started </div> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -109,7 +106,7 @@ body { } </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -186,9 +183,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}</p> <h3 id="Eléments_imbriqués">Eléments imbriqués</h3> @@ -223,15 +219,15 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}</p> <div class="note"> -<p><strong>Note </strong>: HTML5 a redéfini les catégories d'éléments dans HTML5 : voir <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">catégories de contenu d'éléments</a>. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.</p> +<p><strong>Note :</strong> HTML5 a redéfini les catégories d'éléments dans HTML5 : voir <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">catégories de contenu d'éléments</a>. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.</p> </div> <div class="note"> -<p> <strong>Note</strong> : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">les types de boîtes des CSS </a>portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.</p> +<p><strong>Note :</strong> les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">les types de boîtes des CSS </a>portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.</p> </div> <div class="note"> -<p><strong>Note </strong>: Vous trouverez des pages de référence utiles incluant des listes d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne">éléments en ligne</a>.</p> +<p><strong>Note :</strong> Vous trouverez des pages de référence utiles incluant des listes d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne">éléments en ligne</a>.</p> </div> <h3 id="Éléments_vides">Éléments vides</h3> @@ -248,7 +244,7 @@ textarea.onkeyup = function(){ <p>Les éléments peuvent aussi avoir des attributs, qui comme suit:</p> -<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="attribut-chat-grincheux.png" style="display: block; margin: 0px auto;"></p> +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="attribut-chat-grincheux.png"></p> <p>Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut <code>class</code> vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un <a href="/fr/docs/Web/CSS">style CSS</a> ou un comportement particulier, par exemple.</p> @@ -274,10 +270,7 @@ textarea.onkeyup = function(){ <p>Si vous faites une erreur, vous pouvez toujours réinitialiser la <em>zone de saisie</em> en cliquant sur le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, cliquez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -294,7 +287,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -314,7 +307,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -391,9 +384,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}</p> <h3 id="Les_attributs_booléens">Les attributs booléens</h3> @@ -488,12 +480,12 @@ textarea.onkeyup = function(){ </ol> <div class="note"> -<p><strong>Note</strong>: Vous pouvez également trouver ce modèle HTML dans le<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html"> dépôt GitHub MDN Learning Area</a>.</p> +<p><strong>Note :</strong> Vous pouvez également trouver ce modèle HTML dans le<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html"> dépôt GitHub MDN Learning Area</a>.</p> </div> <p>Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:</p> -<p><img alt="Une simple page HTML affichant Voici ma page" src="fr-capture-modele.png" style="display: block; margin: 0px auto;">Dans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :</p> +<p><img alt="Une simple page HTML affichant Voici ma page" src="fr-capture-modele.png">Dans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :</p> <ul> <li>Au début du document, juste après la balise d'ouverture <body>, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante <h1> et la balise fermante </ h1> ;</li> @@ -505,10 +497,7 @@ textarea.onkeyup = function(){ <p>Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour l'afficher.</p> -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<pre class="brush: html"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -525,7 +514,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -549,7 +538,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -626,9 +615,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> <h3 id="Espace_vide_en_HTML">Espace vide en HTML</h3> @@ -689,7 +677,7 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note</strong>: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : <a href="https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML">Liste des entités caractère de XML et HTML</a>.</p> +<p><strong>Note :</strong> Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : <a href="https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML">Liste des entités caractère de XML et HTML</a>.</p> </div> <h2 id="Commentaires_en_HTML">Commentaires en HTML</h2> @@ -711,7 +699,7 @@ textarea.onkeyup = function(){ <p>Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !</p> <div class="note"> -<p><strong>Note</strong>: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style <a href="/fr/docs/Learn/CSS">CSS</a>. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.</p> +<p><strong>Note :</strong> À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style <a href="/fr/docs/Learn/CSS">CSS</a>. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.</p> </div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html index b0755184e9..213a383e88 100644 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> -<p class="summary">L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.</p> +<p>L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis:</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <p>La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.</p> -<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg"></p> <p>Le contenu structuré facilite la lecture et la rend plus agréable.</p> @@ -90,7 +90,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <p>Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !</p> -<p><img alt="Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer." src="recette.png" style="display: block; margin: 0px auto;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> +<p><img alt="Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer." src="recette.png"></p> <p>Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :</p> @@ -109,10 +109,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <p>Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton <em>Réinitialiser</em>. Si vous êtes bloqués, appuyez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 50px;"> </div> @@ -129,7 +126,7 @@ Mes jambes sont en carton et je suis mariée à un poisson.</textarea> <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -149,7 +146,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -227,9 +224,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 370) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}</p> <h3 id="Pourquoi_a-t-on_besoin_de_sémantique">Pourquoi a-t-on besoin de sémantique ?</h3> @@ -282,11 +278,7 @@ houmous <p>Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -304,7 +296,7 @@ houmous</textarea> <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -324,7 +316,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -402,9 +394,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}</p> <h3 id="Listes_ordonnées">Listes ordonnées</h3> @@ -430,11 +421,7 @@ Roulez sur 300 mètres, l'école est sur votre droite</pre> <p>Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.</p> -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 50px;"> </div> @@ -453,7 +440,7 @@ Roulez sur 300 mètres, l'école est sur votre droite</textarea> <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -473,7 +460,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -551,18 +538,14 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}</p> <h3 id="Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine">Apprentissage actif : mettre des balises pour une recette de cuisine</h3> <p>Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.</p> -<div class="hidden"> -<h6 id="Playable_code_4">Playable code</h6> - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 50px;"> </div> @@ -605,7 +588,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -625,7 +608,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -703,9 +686,8 @@ function insertAtCaret(text) { updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}</p> <p>Si vous êtes bloqué, vous pouvez cliquer sur le bouton <em>Voir la solution</em>, ou alors regarder l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> sur le dépôt GitHub.</p> @@ -775,14 +757,11 @@ function insertAtCaret(text) { <pre class="brush: html"><p>Ce liquide est <strong>hautement toxique</strong> — si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p></pre> -<h3 id="Apprentissage_actif_soulignez_l'important_!">Apprentissage actif : soulignez l'important !</h3> +<h3 id="Apprentissage_actif_soulignez_l'important">Apprentissage actif : soulignez l'important</h3> <p>Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.</p> -<div class="hidden"> -<h6 id="Playable_code_5">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -804,7 +783,7 @@ si vous en buvez, <strong>vous pourriez en <em>mourir</em>< <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -825,7 +804,7 @@ body { }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -902,9 +881,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}</p> <h3 id="Italique_gras_soulignement…">Italique, gras, soulignement…</h3> @@ -916,12 +894,12 @@ textarea.onkeyup = function(){ <ul> <li>{{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée…</li> - <li>{{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, <span>une phrase liminaire</span>…</li> + <li>{{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…</li> <li>{{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...</li> </ul> <div class="note"> -<p>Un petit avertissement à propos du soulignement : <strong>les gens associent fortement soulignement et hyperliens</strong>. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <code><u></code> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.</p> +<p><strong>Note :</strong> Un petit avertissement à propos du soulignement : <strong>les gens associent fortement soulignement et hyperliens</strong>. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <code><u></code> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.</p> </div> <pre class="brush: html"><!-- noms scientifiques --> diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html index fdd62cd744..d4a5b51dbd 100644 --- a/files/fr/learn/html/introduction_to_html/index.html +++ b/files/fr/learn/html/introduction_to_html/index.html @@ -16,14 +16,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML --- <div>{{LearnSidebar}}</div> -<p class="summary">Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.</p> +<p>Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.</p> <h2 id="Prérequis">Prérequis</h2> <p>Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">cet article</a> et comprendre comment créer et gérer des fichiers tel qu'expliqué dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">cet autre article</a> — ces deux articles font partie du module <a href="/fr/docs/Learn/Getting_started_with_the_web">Démarrer avec le Web</a> qui s'adresse aux débutants.</p> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html index 748b35d142..faa34e068d 100644 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -16,9 +16,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <code><head></code> en HTML.</p> +<p>Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <code><head></code> en HTML.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index e3ce2ceabc..0fa7c74921 100644 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -7,9 +7,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <div>{{LearnSidebar}}<br> {{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.</p> +<p>Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -61,7 +61,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <li>appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.</li> </ul> -<h2 id="Conseils_et_astuces"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.5px;"><strong>Conseils et astuces</strong></span></font></h2> +<h2 id="Conseils_et_astuces"><strong>Conseils et astuces</strong></h2> <ul> <li>Utilisez le « <a href="https://validator.w3.org/">W3C HTML validator »</a> pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).</li> @@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <p>La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.</p> -<p><img alt="L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue." src="oiseaux.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue." src="oiseaux.png"></p> <h2 id="Évaluation">Évaluation</h2> diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 8bb80d773c..af254c337d 100644 --- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -8,9 +8,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.</p> +<p>L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <h2 id="Quest-ce_que_len-tête_de_HTML">Qu'est-ce que l'en-tête de HTML ?</h2> -<p>Revoyons le document HTML de base de l' <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document">article précédent</a>:</p> +<p>Revoyons le document HTML de base de l' <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document">article précédent</a>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -40,12 +40,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :</p> -<pre class="brush: html notranslate"><head> +<pre class="brush: html"><head> <meta charset="utf-8"> <title>Ma page test</title> </head></pre> -<p>Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.</p> +<p>Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.</p> <h2 id="Ajouter_un_titre">Ajouter un titre</h2> @@ -67,7 +67,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML </ol> </li> <li>Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : - <p><img alt="Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>." src="fr-element-title.png" style="display: block; margin: 0px auto;">Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <code><title></code> apparaît !</p> + <p><img alt="Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>." src="fr-element-title.png">Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <code><title></code> apparaît !</p> </li> <li> <p>Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.</p> @@ -76,7 +76,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Le contenu de l'élément <code><title></code> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( <em>Marques-pages > Marquer cette page</em> ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <code><title></code> est suggéré comme nom pour le marque-page.</p> -<p><img alt="Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>." src="fr-bookmarked.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>." src="fr-bookmarked.png"></p> <p>Le contenu de <code><title></code> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.</p> @@ -88,27 +88,27 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :</p> -<pre class="brush: html notranslate"><meta charset="utf-8"></pre> +<pre class="brush: html"><meta charset="utf-8"></pre> <p>Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. <code>utf-8</code> <em> </em>est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :</p> -<p><img alt="Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement." src="fr-meta-utf8.png" style="display: block; margin: 0px auto;">Si vous définissez votre encodage de caractères en <code>ISO-8859-1</code> , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :</p> +<p><img alt="Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement." src="fr-meta-utf8.png">Si vous définissez votre encodage de caractères en <code>ISO-8859-1</code> , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :</p> -<p><img alt="Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement." src="fr-meta-iso.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement." src="fr-meta-iso.png"></p> <div class="note"> -<p><strong>Note</strong> : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage <code>utf-8</code> sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.</p> +<p><strong>Note :</strong> Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage <code>utf-8</code> sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.</p> </div> <h3 id="Apprentissage_actif_expérience_avec_lencodage_des_caractères">Apprentissage actif : expérience avec l'encodage des caractères</h3> -<p><span id="result_box" lang="fr"><span>Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <code><title></code> (la page </span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a><span lang="fr"><span>), faites un essai de modification de la valeur de la métadonnée <code>charset</code> en ISO-8859-1 et ajoutez le japonais à votre page</span><span>.</span> Voici<span> le code que nous avons utilisé :</span></span></p> +<p>Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <code><title></code> (la page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), faites un essai de modification de la valeur de la métadonnée <code>charset</code> en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :</p> -<pre class="brush: html notranslate"><p>Japanese example: ご飯が熱い。</p></pre> +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> <h3 id="Ajouter_le_nom_de_lauteur_et_une_description">Ajouter le nom de l'auteur et une description</h3> -<p><span id="result_box" lang="fr"><span>De nombreux éléments <code><meta></code> icontiennent les attributs <code>name</code> et <code>content</code> :</span></span></p> +<p>De nombreux éléments <code><meta></code> icontiennent les attributs <code>name</code> et <code>content</code> :</p> <ul> <li><code>name</code> définit le type de méta élément ; le type d'informations contenu.</li> @@ -117,10 +117,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :</p> -<pre class="brush: html notranslate"><meta name="author" content="Chris Mills"> -<meta name="description" content="<span id="result_box" lang="fr"><span>La Zone Apprentissage des documents web -du MDN a pour but de donner </span><span>aux débutants du Web tout ce qu'ils doivent -savoir pour commencer le développement de pages webs et d'applications</span><span>.</span></span>"></pre> +<pre class="brush: html"><meta name="author" content="Chris Mills"> +<meta name="description" content="La Zone Apprentissage des documents web +du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent +savoir pour commencer le développement de pages webs et d'applications."></pre> <p>Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.</p> @@ -134,24 +134,24 @@ savoir pour commencer le développement de pages webs et d'applications</span><s <li>Allez sur la page d'accueil de <a href="/fr/">Mozilla Developer Network</a>.</li> <li>Regardez le source de la page (Clic droit/<kbd>Ctrl</kbd>, choissisez « <em>Code source de la page</em> » dans le menu contextuel.)</li> <li>Trouvez la balise méta <code>description</code>. Elle ressemble à ceci : - <pre id="line1"><meta name="description" content="<span><a class="attribute-value">MDN Web Docs fournit + <pre><meta name="description" content="<a class="attribute-value">MDN Web Docs fournit des informations sur les technologies web ouvertes comme HTML, CSS et les API utilisées pour les sites web et les applications web. On y trouve également de la documentation destinées aux développeurs à propos des produits Mozilla tels que les - outils de développement de Firefox.</a>"></span></pre> + outils de développement de Firefox.</a>"></pre> </li> <li>Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <code><meta></code> description et de l'élément <code><title></code> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! - <p><img alt='Une page de recherche Google pour "MDN web docs"' src="fr-google.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + <p><img alt='Une page de recherche Google pour "MDN web docs"' src="fr-google.png"></p> </li> </ol> <div class="note"> -<p><strong>Note</strong> : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de <a href="https://www.google.com/webmasters/tools/">Google's webmaster tools</a> - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.</p> +<p><strong>Note :</strong> Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de <a href="https://www.google.com/webmasters/tools/">Google's webmaster tools</a> - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.</p> </div> <div class="note"> -<p><strong>Note</strong>: Plusieurs fonctions <code><meta></code> ne sont plus utilisées. Par exemple, l'élément <code><meta></code> <code>keyword</code> (<code><meta name= "keywords" content="mettez, vos, mot-clés, ici"></code>) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.</p> +<p><strong>Note :</strong> Plusieurs fonctions <code><meta></code> ne sont plus utilisées. Par exemple, l'élément <code><meta></code> <code>keyword</code> (<code><meta name= "keywords" content="mettez, vos, mot-clés, ici"></code>) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.</p> </div> <h3 id="Autres_types_de_métadonnées">Autres types de métadonnées</h3> @@ -160,23 +160,23 @@ savoir pour commencer le développement de pages webs et d'applications</span><s <p>Par exemple, <a href="https://ogp.me/">Open Graph Data</a> est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :</p> -<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> -<meta property="og:description" content=<span>"<a class="attribute-value">MDN Web Docs fournit des +<pre class="brush: html"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> +<meta property="og:description" content="<a class="attribute-value">MDN Web Docs fournit des informations sur les technologies web ouvertes comme HTML, CSS et les API utilisées pour les sites web et les applications web. On y trouve également de la documentation destinées aux développeurs à propos des produits -Mozilla tels que les outils de développement de Firefox.</a>"></span> +Mozilla tels que les outils de développement de Firefox.</a>"> <meta property="og:title" content="Mozilla Developer Network"></pre> <p>En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.</p> -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="facebook-output.png" style="display: block; margin: 0 auto;">Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:</p> +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="facebook-output.png">Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:</p> -<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> <h2 id="Ajouter_des_icônes_personnalisées_à_un_site">Ajouter des icônes personnalisées à un site</h2> -<p><span id="result_box" lang="fr"><span>Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.</span></span></p> +<p>Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.</p> <p>La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.</p> @@ -185,17 +185,17 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <ol> <li>Enregistrez-la dans le même répertoire que la page d'index du site, sous le format <code>.ico</code> (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme <code>.gif</code> ou <code>.png</code>, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)</li> <li>Ajoutez la ligne suivante dans votre <code><head></code> du HTML pour la référencer : - <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> </li> </ol> <p>Voici un exemple de favicône dans un panneau de favoris :</p> -<p><img alt="Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté." src="fr-library.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté." src="fr-library.png"></p> <p>Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :</p> -<pre class="brush: html notranslate"><!-- troisième-génération iPad avec haute-résolution Retina display: --> +<pre class="brush: html"><!-- troisième-génération iPad avec haute-résolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> <!-- iPhone avec haute-résolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> @@ -218,15 +218,15 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <li> <p>L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, <code>rel="stylesheet"</code> indiquant qu'il s'agit de la feuille de style du document, et <code>href</code> indiquant le chemin d'accès au fichier la contenant :</p> - <pre class="brush: html notranslate"><link rel="stylesheet" href="mon_fichier_css.css"></pre> + <pre class="brush: html"><link rel="stylesheet" href="mon_fichier_css.css"></pre> </li> <li> <p>L'élément {{htmlelement("script")}} ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture <code></body></code>), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant de lui appliquer le JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur déclenchera une erreur).</p> - <pre class="brush: html notranslate"><script src="mon-fichier-js.js"></script></pre> + <pre class="brush: html"><script src="mon-fichier-js.js"></script></pre> <div class="note"> - <p><strong>Note </strong>: L'élément <code><script></code> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <code><script></code>.</p> + <p><strong>Note :</strong> L'élément <code><script></code> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <code><script></code>.</p> </div> </li> </ul> @@ -241,7 +241,7 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <p>Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :</p> -<p><img alt="Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page." src="js-css-exemple.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page." src="js-css-exemple.png"></p> <ul> <li>Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier.</li> @@ -249,20 +249,20 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> </ul> <div class="note"> -<p><strong>Note </strong>: Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> .</p> +<p><strong>Note :</strong> Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> .</p> </div> <h2 id="Définition_de_la_langue_principale_du_document">Définition de la langue principale du document</h2> -<p>Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'<a href="/en-US/docs/Web/HTML/Global_attributes/lang">attribut <code>lang</code></a> <span class="short_text" id="result_box" lang="fr"><span>à la balise ouvrante HTML (voir</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p> +<p>Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'<a href="/fr/docs/Web/HTML/Global_attributes/lang">attribut <code>lang</code></a> à la balise ouvrante HTML (voir <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p> -<pre class="brush: html notranslate"><html lang="fr"></pre> +<pre class="brush: html"><html lang="fr"></pre> <p>Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)</p> <p>Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :</p> -<pre class="brush: html notranslate"><p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p></pre> +<pre class="brush: html"><p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p></pre> <p>Ces codes sont définis par la norme <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Vous en trouverez plus sur <a href="https://www.w3.org/International/articles/language-tags/">Etiquettes langues en HTML et XML (en)</a>.</p> diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 5c2520b633..e8cddd0909 100644 --- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -14,13 +14,9 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag <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"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -35,7 +31,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag <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><a href="/fr/docs/Web/SVG">SVG</a> est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.</p> <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> @@ -46,7 +42,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag <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> +<p><strong>Note :</strong> Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web</a>.</p> </div> <h2 id="La_méthode_rapide_htmlelement(img)">La méthode rapide : {{htmlelement("img")}}</h2> @@ -80,12 +76,13 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag </ul> <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via <code><img></code>). - <pre class="brush: css"><code>background: url("image-de-secours.png");</code> -background-image<code>: url(image.svg); -background-size: contain;</code></pre> + <pre class="brush: css">background: url("image-de-secours.png"); +background-image: url(image.svg); +background-size: contain;</pre> </li> <li>Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, <a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas#Un_mot_sur_les_serveurs_Web">cet article pourra vous aider à résoudre le problème</a>.</li> </ul> diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html index 762a36442a..abda8ddf31 100644 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .</p> +<p>Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions élémentaires en informatique, <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, fondamentaux du HTML (comme décrit dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le Web).</a></td> + <td>Notions élémentaires en informatique, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, fondamentaux du HTML (comme décrit dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le Web).</a></td> </tr> <tr> <th scope="row">Objectifs :</th> @@ -39,7 +39,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}. C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — <code>src</code> (souvent appelé par son nom entier: <em>source</em>). L'attribut <code>src</code> contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément {{htmlelement("a")}} <code>href=</code> attribue des valeurs.</p> <div class="note"> -<p><strong>Note</strong>: Vous devriez lire <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url">Une brève présentation des URL et des chemins</a> pour vous rafraîchir la mémoire avant de continuer.</p> +<p><strong>Note :</strong> Vous devriez lire <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url">Une brève présentation des URL et des chemins</a> pour vous rafraîchir la mémoire avant de continuer.</p> </div> <p>Donc, par exemple, si votre image s'appelle <code>dinosaur.jpg</code>, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :</p> @@ -53,7 +53,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Ainsi de suite.</p> <div class="note"> -<p><strong>Note</strong>: Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. <code>dinosaur.jpg</code> est infiniment mieux que <code>img835.png</code>.</p> +<p><strong>Note :</strong> Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. <code>dinosaur.jpg</code> est infiniment mieux que <code>img835.png</code>.</p> </div> <p>Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :</p> @@ -63,7 +63,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.</p> <div class="warning"> -<p><strong>Attention ! :</strong> La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :<br> +<p><strong>Attention :</strong> La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :<br> <br> 1) Ce soit votre image (vous en êtes le créateur),<br> 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,<br> @@ -74,14 +74,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Le code au-dessus vous donnera, à peu prés, le résultat suivant :</p> -<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="basic-image.png"></p> <div class="note"> -<p><strong>Note</strong>: Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.</p> +<p><strong>Note :</strong> Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.</p> </div> <div class="note"> -<p><strong>Note</strong>: Vous trouverez les exemples finis de cette section sur <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> (regardez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">code source </a>.)</p> +<p><strong>Note :</strong> Vous trouverez les exemples finis de cette section sur <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> (regardez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">code source </a>.)</p> </div> <h3 id="Texte_alternatif">Texte alternatif</h3> @@ -94,7 +94,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>La manière la plus simple de tester votre texte <code>alt</code> est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée <code>dinosooooor.jpg</code>, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :</p> -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="alt-text.png"></p> <p>Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :</p> @@ -111,14 +111,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <ul> <li><strong>Decoration. </strong>Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un <code>alt=""</code> vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.</li> <li><strong>Contenu. </strong>Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un <em>bref</em> <em> </em><code>alt</code> text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de <code>alt</code> text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement <code>alt=""</code>.</li> - <li><strong>Lien.</strong> Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien">Lien texte accessible </a>. Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <code><a></code>, soit dans l'attribut <code>alt</code> de l'image – utilisez ce qui marche le mieux dans votre cas.</li> - <li><strong>Texte.</strong> Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/text-shadow">utilisez CSS</a> pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut <code>alt</code> .</li> + <li><strong>Lien.</strong> Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien">Lien texte accessible </a>. Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <code><a></code>, soit dans l'attribut <code>alt</code> de l'image – utilisez ce qui marche le mieux dans votre cas.</li> + <li><strong>Texte.</strong> Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, <a href="/fr/docs/Web/CSS/text-shadow">utilisez CSS</a> pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut <code>alt</code> .</li> </ul> <p>Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.</p> <div class="note"> -<p><strong>Note</strong>: Pour plus d'informations, voyez notre guide <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Textes Alternatifs</a></p> +<p><strong>Note :</strong> Pour plus d'informations, voyez notre guide <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Textes Alternatifs</a></p> </div> <h3 id="Largeur_et_hauteur_width-height">Largeur et hauteur (width-height)</h3> @@ -133,19 +133,19 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :</p> -<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="alt-text-with-width-height.png"></p> <p>C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.</p> <p>De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur. Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon <a href="https://fr.wikipedia.org/wiki/Format_d%27image">Format d'image</a>. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.</p> <div class="note"> -<p><strong>Note</strong>: Si vous devez absolument modifier une taille d' image, vous devriez vous servir de <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> .</p> +<p><strong>Note :</strong> Si vous devez absolument modifier une taille d' image, vous devriez vous servir de <a href="/fr/Apprendre/CSS">CSS</a> .</p> </div> <h3 id="Titre_dimages">Titre d'images</h3> -<p>Comme décrit dans le chapitre <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens </a>, vous pouvez aussi ajouter un attribut <code>title</code> aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :</p> +<p>Comme décrit dans le chapitre <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens </a>, vous pouvez aussi ajouter un attribut <code>title</code> aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :</p> <pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -156,7 +156,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Cela donne une info-bulle avec le texte entré dans l'attribut <code>title</code> :</p> -<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> +<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="image-with-title.png"></p> <p>Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.</p> @@ -178,12 +178,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton <em>Reset</em> . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - - - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -200,9 +195,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <input id="solution" type="button" value="Show solution"> </div></pre> - - -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -222,9 +215,7 @@ body { background: #f5f9fa; }</pre> - - -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -302,10 +293,7 @@ textarea.onkeyup = function(){ updateCode(); };</pre> - -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> @@ -340,7 +328,7 @@ textarea.onkeyup = function(){ <p>L'élément {{htmlelement("figcaption")}} dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.</p> <div class="note"> -<p><strong>Note</strong>: D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte <code>alt</code> devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.</p> +<p><strong>Note :</strong> D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte <code>alt</code> devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.</p> </div> <p>Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :</p> @@ -364,10 +352,7 @@ textarea.onkeyup = function(){ <p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton <em>Reset</em> . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -385,7 +370,7 @@ textarea.onkeyup = function(){ -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -407,7 +392,7 @@ body { -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -485,12 +470,7 @@ textarea.onkeyup = function(){ updateCode(); };</pre> - - - -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Images_darrière-plan_CSS">Images d'arrière-plan CSS</h2> @@ -505,7 +485,7 @@ textarea.onkeyup = function(){ <p>En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.</p> <div class="note"> -<p><strong>Note</strong>: Vous en apprendrez beaucoup plus sur les <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> dans notre topic <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> .</p> +<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> dans notre topic <a href="/fr/Apprendre/CSS">CSS</a> .</p> </div> <p>C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.</p> @@ -515,10 +495,10 @@ textarea.onkeyup = function(){ <h2 id="Dans_ce_module">Dans ce module :</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> </ul> diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html index 86eb86cd9f..445c2724fe 100644 --- a/files/fr/learn/html/multimedia_and_embedding/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/index.html @@ -29,7 +29,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding <p>Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">introduction au HTML</a>. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.</p> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html index bf2054f890..37cd4e8230 100644 --- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -8,13 +8,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !</p> +<p>Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding">Multimedia et Intégration</a>.</td> + <td>Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module <a href="/fr/Apprendre/HTML/Multimedia_and_embedding">Multimedia et Intégration</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -30,7 +30,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>Allez dans le répertoire <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.</p> <div class="note"> -<p><strong>Note</strong>: le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.</p> +<p><strong>Note :</strong> le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.</p> </div> <h2 id="Énoncé_du_projet">Énoncé du projet</h2> @@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>Puis, créez une version paysage de 1200px de large de <code>red-panda.jpg</code>, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p> <div class="note"> -<p><strong>Note</strong>: Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. <a href="https://tinypng.com/">tinypng.com</a> est une bonne aide pour faire ça aisément.</p> +<p><strong>Note :</strong> Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. <a href="https://tinypng.com/">tinypng.com</a> est une bonne aide pour faire ça aisément.</p> </div> <h3 id="Ajouter_un_logo_à_l'en-tête">Ajouter un logo à l'en-tête</h3> @@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>Assurez-vous de faire correspondre les bonnes images avec les liens corrects !</p> <div class="note"> -<p><strong>Note</strong>: Pour tester correctement les exemples <code>srcset</code>/<code>sizes</code>, vous devez charger votre site sur un serveur (utiliser <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> +<p><strong>Note :</strong> Pour tester correctement les exemples <code>srcset</code>/<code>sizes</code>, vous devez charger votre site sur un serveur (utiliser <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans <a href="/fr/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> </div> <h3 id="Un_panda_rouge_créatif">Un panda rouge créatif</h3> @@ -85,9 +85,9 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.</p> -<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p> +<p><img alt="A wide shot of our example splash page" src="wide-shot.png"></p> -<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p> +<p><img alt="A narrow shot of our example splash page" src="narrow-shot.png"></p> <h2 id="Évaluation">Évaluation</h2> @@ -100,12 +100,12 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <h2 id="Dans_ce_module">Dans ce module :</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des objets aux "iframes" - autres techniques d'intégration</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Images adaptatives</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des objets aux "iframes" - autres techniques d'intégration</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page web</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Images adaptatives</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></li> </ul> <p> </p> diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index a35a7d6131..c840ee2f9e 100644 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -21,13 +21,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les <code><iframe></code> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.</p> +<p>Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les <code><iframe></code> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et articles précédents de ce module.</td> + <td>Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et articles précédents de ce module.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <p> </p> -<p>Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les <a href="https://developer.mozilla.org/fr/docs/Glossary/Java">applets Java</a> et <a href="https://developer.mozilla.org/fr/docs/Glossary/Adobe_Flash">Flash</a> — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.</p> +<p>Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les <a href="/fr/docs/Glossary/Java">applets Java</a> et <a href="/fr/docs/Glossary/Adobe_Flash">Flash</a> — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.</p> <p>Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il est régulièrement utilisé aujourd'hui.</p> @@ -73,10 +73,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <p>Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Afficher la solution</em> pour voir la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 250px;"> </div> @@ -92,7 +89,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <input id="solution" type="button" value="Afficher la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -112,7 +109,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -190,10 +187,7 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Iframes_en_détail">Iframes en détail</h2> @@ -212,7 +206,7 @@ textarea.onkeyup = function(){ <dl> <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> - <dd>Si activé, <code><iframe></code> pourra être mis en mode plein écran avec <a href="/en-US/docs/Web/API/Fullscreen_API">Full Screen API</a> (un peu hors‑sujet dans cet article).</dd> + <dd>Si activé, <code><iframe></code> pourra être mis en mode plein écran avec <a href="/fr/docs/Web/API/Fullscreen_API">Full Screen API</a> (un peu hors‑sujet dans cet article).</dd> <dt>{{htmlattrxref('frameborder','iframe')}}</dt> <dd>Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}<code>: none;</code> dans le {{Glossary('CSS')}}.</dd> <dt>{{htmlattrxref('src','iframe')}}</dt> @@ -226,7 +220,7 @@ textarea.onkeyup = function(){ </dl> <div class="note"> -<p><strong>Note </strong>: Afin d'améliorer la vitesse, il est pertinent de définir l'attribut <code>src</code> de <code>iframe</code> avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).</p> +<p><strong>Note :</strong> Afin d'améliorer la vitesse, il est pertinent de définir l'attribut <code>src</code> de <code>iframe</code> avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).</p> </div> <h3 id="Problèmes_de_sécurité">Problèmes de sécurité</h3> @@ -236,10 +230,10 @@ textarea.onkeyup = function(){ <p>Fabricants de navigateurs et développeurs Web ont appris à la dure que <code><iframe></code> constitue sur le Web une cible commune (terme officiel : un <strong>vecteur d'attaque</strong>) pour des personnes mal intentionnées (souvent appelés <strong>hackeurs (</strong>pirates), ou plus exactement, <strong>crackeurs</strong>). <code><iframe></code> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <code><iframe></code> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.</p> <div class="note"> -<p>Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <code><iframe></code> : les hackeurs incorporent un <code><iframe></code> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.</p> +<p><strong>Note :</strong> Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <code><iframe></code> : les hackeurs incorporent un <code><iframe></code> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.</p> </div> -<p>Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trouver en direct sur Github</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">code source</a> aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la <em>Console</em> dans les <a href="https://developer.mozilla.org/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em> (<em>Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre</em>) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <code><iframe></code> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.</p> +<p>Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trouver en direct sur Github</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">code source</a> aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la <em>Console</em> dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em> (<em>Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre</em>) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <code><iframe></code> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.</p> <h4 id="N'intégrer_que_si_nécessaire">N'intégrer que si nécessaire</h4> @@ -263,7 +257,7 @@ textarea.onkeyup = function(){ <p>L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que <a href="https://letsencrypt.org/">Let's Encrypt</a> facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, <em>et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP</em> (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <code><iframe></code>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut <code>src</code> de <code><iframe></code> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.</p> <div class="note"> -<p><strong>Note</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.</p> +<p><strong>Note :</strong> <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.</p> </div> <h4 id="Toujours_utiliser_l'attribut_sandbox">Toujours utiliser l'attribut <code>sandbox</code></h4> @@ -275,15 +269,15 @@ textarea.onkeyup = function(){ <p>Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut <code>sandbox=""</code>) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez <em>jamais</em> mettre à la fois les valeurs <code>allow-scripts</code> et <code>allow-same-origin</code> aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».</p> <div class="note"> -<p><strong>Note </strong>: Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <code><iframe></code>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.</p> +<p><strong>Note :</strong> Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <code><iframe></code>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.</p> </div> <h4 id="Configurer_les_directives_CSP">Configurer les directives CSP</h4> -<p>{{Glossary("CSP")}} est un acronyme pour « <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong> » (politique de sécurité du contenu) ; les directives CSP fournissent un <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">ensemble d'en‑têtes HTTP</a> (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <code><iframe></code>, vous pouvez <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configurer votre serveur pour qu'il adresse une en‑tête appropriée <code>X-Frame-Options</code></a>.</em> Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.</p> +<p>{{Glossary("CSP")}} est un acronyme pour « <strong><a href="/fr/docs/Web/Security/CSP">content security policy</a></strong> » (politique de sécurité du contenu) ; les directives CSP fournissent un <a href="/fr/docs/Web/Security/CSP/CSP_policy_directives">ensemble d'en‑têtes HTTP</a> (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <code><iframe></code>, vous pouvez <em><a href="/fr/docs/Web/HTTP/X-Frame-Options">configurer votre serveur pour qu'il adresse une en‑tête appropriée <code>X-Frame-Options</code></a>.</em> Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.</p> <div class="note"> -<p><strong>Note </strong>: Lisez le post de Frederik Braun sur <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.</p> +<p><strong>Note :</strong> Lisez le post de Frederik Braun sur <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.</p> </div> <h2 id="Les_éléments_<embed>_et_<object>">Les éléments <embed> et <object></h2> @@ -291,7 +285,7 @@ textarea.onkeyup = function(){ <p>Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !</p> <div class="note"> -<p><strong>Note </strong>: Un <strong>greffon</strong> est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.</p> +<p><strong>Note :</strong> Un <strong>greffon</strong> est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.</p> </div> <p>Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.</p> @@ -342,7 +336,7 @@ textarea.onkeyup = function(){ <p> </p> <div class="note"> -<p><strong>Note </strong>: <code><object></code> requiert un attribut <code>data</code>, un attribut <code>type</code>, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). <code>typemustmatch</code> empêche le fichier incorporé d'être exécuté avant que l'attribut <code>type</code> indique le type exact de média. <code>typemustmatch</code> peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).</p> +<p><strong>Note :</strong> <code><object></code> requiert un attribut <code>data</code>, un attribut <code>type</code>, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). <code>typemustmatch</code> empêche le fichier incorporé d'être exécuté avant que l'attribut <code>type</code> indique le type exact de média. <code>typemustmatch</code> peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).</p> </div> <p>Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">en direct sur Github</a> ainsi que <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">le code source</a> également):</p> @@ -375,7 +369,7 @@ textarea.onkeyup = function(){ <li><strong>Restez à l'écart des risques supplémentaires en matière de sécurité.</strong><strong> </strong>Adobe Flash est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoirement</a> non‑sûr<a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">,</a> même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">demandé qu'Adobe arrête</a><a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso"> Flash.</a></li> </ul> -<p>Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la <a href="https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vidéo HTML5</a> pour vos besoins en médias, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour les images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst écrivait déjà il y a quelques années</a> qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.</p> +<p>Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la <a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vidéo HTML5</a> pour vos besoins en médias, <a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="/fr/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour les images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst écrivait déjà il y a quelques années</a> qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.</p> <h2 id="Résumé">Résumé</h2> @@ -392,12 +386,12 @@ textarea.onkeyup = function(){ <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et Vidéo</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></li> - <li><a href="/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="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écrans d'accueil Mozilla</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et Vidéo</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écrans d'accueil Mozilla</a></li> </ul> <p> </p> diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html index 4ee6bee321..29f0d234da 100644 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page <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 — <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a>/<a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).</p> + <p><strong>Note :</strong> Toutes les nouvelles fonctionnalités présentées dans cet article — <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a>/<a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).</p> </div> <h2 id="Comment_créer_des_images_adaptatives">Comment créer des images adaptatives ?</h2> @@ -97,7 +97,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page </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 (<code>vw</code>), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.</p> +<p><strong>Note :</strong> pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (<code>px</code>, <code>em</code>) ou relative au viewport (<code>vw</code>), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.</p> </div> <p>Ainsi, une fois ces attributs en place, le navigateur va :</p> @@ -112,14 +112,14 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page <p>Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média <code>(max-width: 480px)</code> sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier <code>elva-fairy-480w.jpg</code> sera chargé, car sa largeur intrinsèque (<code>480w</code>) est celle qui est la plus proche de <code>440px</code>. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.</p> <div class="note"> - <p><strong>Note :</strong> lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction <code>document.querySelector("html").clientWidth</code> dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page <code>about:debugging</code> de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.</p> + <p><strong>Note :</strong> lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction <code>document.querySelector("html").clientWidth</code> dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page <code>about:debugging</code> de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.</p> <p>Pour observer les images chargées, vous pouvez utiliser l'onglet <a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a> dans les outils de développement de Firefox.</p> </div> <p>Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-src"><code>src</code></a>.</p> <div class="note"> -<p><strong>Note :</strong> dans l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> du document, vous trouvez la ligne <code><meta name="viewport" content="width=device-width"></code> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).</p> +<p><strong>Note :</strong> dans l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> du document, vous trouvez la ligne <code><meta name="viewport" content="width=device-width"></code> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).</p> </div> @@ -169,7 +169,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page <p><img alt="Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre." src="picture-element-wide.png"><img alt="Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit." src="picture-element-narrow.png"></p> <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> +<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> diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 4854d24907..75e2a70ecd 100644 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -18,13 +18,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.</p> +<p>Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a>.</td> + <td>Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et <a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a>.</td> </tr> <tr> <th scope="row">Objectifs :</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">fichiers d'échantillons audio et vidéo et exemples de code</a> pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.</p> <div class="note"> -<p><strong>Note </strong>: Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, et <a href="https://vimeo.com/">Vimeo</a>. Pour l'audio, voyez <a href="https://soundcloud.com/">Soundcloud</a> par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.</p> +<p><strong>Note :</strong> Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, et <a href="https://vimeo.com/">Vimeo</a>. Pour l'audio, voyez <a href="https://soundcloud.com/">Soundcloud</a> par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.</p> </div> <h3 id="L'_élément_<video>">L' élément <video></h3> @@ -59,14 +59,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <dt>{{htmlattrxref("src","video")}}</dt> <dd>De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut <code>src</code> (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière.</dd> <dt>{{htmlattrxref("controls","video")}}</dt> - <dd>Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'<a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie">épilepsie</a>.) Vous devez vous servir de l'attribut <code>controls</code> pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'<a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLMediaElement">API JavaScript </a>adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.</dd> + <dd>Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'<a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie">épilepsie</a>.) Vous devez vous servir de l'attribut <code>controls</code> pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'<a href="/fr/docs/Web/API/HTMLMediaElement">API JavaScript </a>adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.</dd> <dt>Le paragraphe dans la balise <code><video></code></dt> <dd>Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <code><video></code> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.</dd> </dl> <p>La vidéo intégrée donnerait quelque chose comme ça :</p> -<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> +<p><img alt="A simple video player showing a video of a small white rabbit" src="simple-video.png"></p> <p>Faites un essai avec <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">l'exemple ici</a>. (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">code source</a>.)</p> @@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.</p> <div class="note"> -<p><strong>Note </strong>: Ce n'est pas si simple, comme vous pouvez le voir dans le <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité des codecs audio-vidéo</a>. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.</p> +<p><strong>Note :</strong> Ce n'est pas si simple, comme vous pouvez le voir dans le <a href="/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité des codecs audio-vidéo</a>. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.</p> </div> <p>Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.</p> @@ -95,7 +95,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p> </p> <div class="note"> -<p><strong>Note : </strong>Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats <strong>MP3 </strong>(pour l'audio) et <strong>MP4/H.264</strong> (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.</p> +<p><strong>Note :</strong> Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats <strong>MP3 </strong>(pour l'audio) et <strong>MP4/H.264</strong> (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.</p> <p> </p> </div> @@ -115,7 +115,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p> </p> <div class="note"> -<p><strong>Note</strong> : L'<a href="/en-US/docs/Web/HTML/Supported_media_formats">article sur les formats média pris en charge</a> contient quelques types {{glossary("MIME type","MIME")}} courants.</p> +<p><strong>Note :</strong> L'<a href="/fr/docs/Web/HTML/Supported_media_formats">article sur les formats média pris en charge</a> contient quelques types {{glossary("MIME type","MIME")}} courants.</p> </div> <h3 id="Autres_fonctionnalités_de_<video>">Autres fonctionnalités de <video></h3> @@ -133,7 +133,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Cela produit une sortie du type suivant :</p> -<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;"></p> +<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="extra-video-features.png"></p> <p>Voici les nouvelles fonctionnalités :</p> @@ -174,10 +174,10 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Vous verrez quelque chose de ce genre dans un navigateur :</p> -<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> +<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="audio-player.png"></p> <div class="note"> -<p><strong>Note</strong>: Vous pouver <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">lancer la démo de l'audio en direct </a>sur Github (voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">code source de l'interpréteur</a>.)</p> +<p><strong>Note :</strong> Vous pouver <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">lancer la démo de l'audio en direct </a>sur Github (voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">code source de l'interpréteur</a>.)</p> </div> <p>Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :</p> @@ -202,7 +202,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.</p> <div class="note"> -<p><strong>Note </strong>: « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.</p> +<p><strong>Note :</strong> « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.</p> </div> <p>WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :</p> @@ -218,7 +218,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Un fichier WebVTT typique ressemblera à :</p> -<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT +<pre>WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -248,12 +248,12 @@ Ceci est le deuxième. <p>Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :</p> -<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> +<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="video-player-with-captions.png"></p> -<p>Pour plus de détails, lisez <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous‑titres aux vidéos HTML5</a>. Vous <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trouverez un exemple</a>, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a> aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. </p> +<p>Pour plus de détails, lisez <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous‑titres aux vidéos HTML5</a>. Vous <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trouverez un exemple</a>, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a> aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. </p> <div class="note"> -<p><strong>Note </strong>: Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.</p> +<p><strong>Note :</strong> Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.</p> </div> <h3 id="Apprentissage_interactif_intégrer_vos_propres_vidéos_et_audios">Apprentissage interactif : intégrer vos propres vidéos et audios</h3> @@ -285,9 +285,9 @@ Ceci est le deuxième. <li>{{htmlelement("video")}}</li> <li>{{htmlelement("source")}}</li> <li>{{htmlelement("track")}}</li> - <li><a href="https://developer.mozilla.org/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Ajouter des légendes et sous-titres aux vidéos HTML5</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Intégration Audio et Vidéo </a>: de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.</li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipuler l'Audio et la Vidéo</a>: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).</li> + <li><a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Ajouter des légendes et sous-titres aux vidéos HTML5</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Intégration Audio et Vidéo </a>: de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.</li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipuler l'Audio et la Vidéo</a>: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).</li> <li>Options automatisées pour la <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduction multimédia</a>.</li> </ul> @@ -298,12 +298,12 @@ Ceci est le deuxième. <h2 id="Contenu_du_module">Contenu du module :</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page Web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Ajouter des images "responsive" à une page Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page Web</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Ajouter des images "responsive" à une page Web</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> </ul> <p> </p> diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html index 11669b25e7..7a6f46a012 100644 --- a/files/fr/learn/html/tables/advanced/index.html +++ b/files/fr/learn/html/tables/advanced/index.html @@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Tableaux/Advanced <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> -<p class="summary">Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.</p> +<p>Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -55,7 +55,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced <p>Le titre est placé directement sous la balise <code><table></code>.</p> <div class="note"> -<p><strong>Note</strong> : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <code><table></code> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <code><caption></code>, car <code>summary</code> est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant (il n'apparaît pas dans la page).</p> +<p><strong>Note :</strong> L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <code><table></code> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <code><caption></code>, car <code>summary</code> est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant (il n'apparaît pas dans la page).</p> </div> <h3 id="Apprentissage_actif_Ajouter_un_titre">Apprentissage actif : Ajouter un titre</h3> @@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced </ol> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver notre version sur GitHub — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">voir aussi directement</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver notre version sur GitHub — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">voir aussi directement</a>).</p> </div> <h2 id="Ajout_d'une_structure_avec_<thead>_<tfoot>_et_<tbody>">Ajout d'une structure avec <thead>, <tfoot>, et <tbody></h2> @@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced </ul> <div class="note"> -<p><strong>Note</strong> : <code><tbody></code> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <code><tbody></code> et regardez le code HTML dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement de votre navigateur</a> — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.</p> +<p><strong>Note :</strong> <code><tbody></code> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <code><tbody></code> et regardez le code HTML dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement de votre navigateur</a> — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.</p> </div> <h3 id="Apprentissage_actif_Ajout_d'une_structure_au_tableau">Apprentissage actif : Ajout d'une structure au tableau</h3> @@ -115,15 +115,12 @@ tfoot { </ol> <div class="note"> -<p><strong>Note</strong> : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (<a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a> est un bon moyen de commencer ; il y a aussi un article spécifique sur <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">l'esthétique des tables</a>).</p> +<p><strong>Note :</strong> Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (<a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a> est un bon moyen de commencer ; il y a aussi un article spécifique sur <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">l'esthétique des tables</a>).</p> </div> <p>Le code de votre tableau fini devrait ressembler à quelque chose comme :</p> -<div class="hidden"> -<h6 id="Hidden_example">Hidden example</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -228,12 +225,11 @@ tfoot { </body> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi le trouver sur Github <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">voir aussi le résultat</a> directement).</p> +<p><strong>Note :</strong> Vous pouvez aussi le trouver sur Github <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">voir aussi le résultat</a> directement).</p> </div> <h2 id="Tableaux_imbriqués">Tableaux imbriqués</h2> @@ -270,7 +266,7 @@ tfoot { <p>Voici la sortie qui en résulte :</p> -<table id="table1"> +<table> <tbody> <tr> <th>title1</th> @@ -278,8 +274,8 @@ tfoot { <th>title3</th> </tr> <tr> - <td id="nested"> - <table id="table2"> + <td> + <table> <tbody> <tr> <td>cell1</td> @@ -370,18 +366,18 @@ tfoot { <p>Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.</p> <div class="note"> -<p><strong>Note :</strong> Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/" title="Vision Impairment Data">données de l'OMS en 2017</a>.</p> +<p><strong>Note :</strong> Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/" title="Vision Impairment Data">données de l'OMS en 2017</a>.</p> </div> <p>Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.</p> -<h3 class="attTitle" id="Utilisation_des_en-têtes_de_colonnes_et_de_lignes">Utilisation des en-têtes de colonnes et de lignes</h3> +<h3 id="Utilisation_des_en-têtes_de_colonnes_et_de_lignes">Utilisation des en-têtes de colonnes et de lignes</h3> <p>Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes. La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.</p> <p>Nous avons déjà traité des en-têtes dans notre article précédent — voir <a href="/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Ajouter des en-têtes avec <th></a> .</p> -<h3 class="attTitle" id="L'attribut_scope">L'attribut <code>scope</code></h3> +<h3 id="L'attribut_scope">L'attribut <code>scope</code></h3> <p>Aux balises <code><th></code>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <code><th></code> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :</p> @@ -409,7 +405,7 @@ tfoot { <p><code>scope</code> a deux autres valeurs possibles — <code>colgroup</code> et <code>rowgroup</code>. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<code><th></code>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut <code>scope="colgroup"</code>, alors que les autres doivent recevront un attribut <code>scope="col"</code>.</p> -<h3 class="attTitle" id="Les_attributs_id_et_headers">Les attributs <code>id</code> et <code>headers</code></h3> +<h3 id="Les_attributs_id_et_headers">Les attributs <code>id</code> et <code>headers</code></h3> <p>Une alternative à l'usage de l'attribut <code>scope</code> est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :</p> @@ -445,7 +441,7 @@ tfoot { </tbody></pre> <div class="note"> -<p><strong>Note</strong>: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise <strong>beaucoup</strong> plus de balisage et ne laisse aucune marge d'erreur. L'approche <code>scope</code> est généralement suffisante pour la plupart des tableaux.</p> +<p><strong>Note :</strong> Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise <strong>beaucoup</strong> plus de balisage et ne laisse aucune marge d'erreur. L'approche <code>scope</code> est généralement suffisante pour la plupart des tableaux.</p> </div> <h3 id="Apprentissage_actif_jouer_avec_scope_et_headers">Apprentissage actif : jouer avec <code>scope</code> et <code>headers</code></h3> @@ -457,7 +453,7 @@ tfoot { </ol> <div class="note"> -<p><strong>Note</strong> : Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">voir aussi directement</a>)<br> +<p><strong>Note :</strong> Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">voir aussi directement</a>)<br> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">voir aussi directement</a>).</p> </div> @@ -474,7 +470,7 @@ tfoot { <ul> <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Tableaux HTML : notions de base</a></li> <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a></li> - <li><a class="new" href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data" rel="nofollow">Structuration de données sur les planètes</a></li> + <li><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></li> </ul> </div> </div> diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html index b4e3cf6667..fe9ef9ef91 100644 --- a/files/fr/learn/html/tables/basics/index.html +++ b/files/fr/learn/html/tables/basics/index.html @@ -23,20 +23,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics <div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> -<blockquote> -<dl> - <dd>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</dd> -</dl> -</blockquote> +<p>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</p> -<dl> -</dl> - -<table class="learn-box standard-table" style="height: 97px; width: 672px;"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les bases de HTML (voir <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>).</td> + <td>Les bases de HTML (voir <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -47,17 +40,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics <h2 id="Quest-ce_quun_tableau">Qu'est-ce qu'un tableau ?</h2> -<p>Un tableau est un ensemble structuré de données (<strong>table de données</strong>) présentées en lignes et colonnes. <span class="translation">Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier</span>.</p> +<p>Un tableau est un ensemble structuré de données (<strong>table de données</strong>) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.</p> -<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="numbers-table.png"></p> -<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> +<p><img alt="A swimming timetable showing a sample data table" src="swimming-timetable.png"></p> -<p><span class="translation">Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800</span> :</p> +<p>Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :</p> -<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="1800-census.jpg"></p> -<p><span class="translation">Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web</span> .</p> +<p>Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .</p> <h3 id="Comment_fonctionne_un_tableau">Comment fonctionne un tableau ?</h3> @@ -197,13 +190,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics </tbody> </table> -<p><span class="translation">Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.</span></p> +<p>Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.</p> <h3 id="Style_de_tableau">Style de tableau</h3> <p>Vous pouvez également <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder sur l'exemple réel</a> sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un CSS plus signifiant.</p> -<p>Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec <a href="/en-US/docs/Learn/CSS">CSS</a>, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Style et tableaux</a> quand vous aurez fini ici.</p> +<p>Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec <a href="/fr/docs/Learn/CSS">CSS</a>, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Style et tableaux</a> quand vous aurez fini ici.</p> <p>Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">feuille de style ici</a>, et également <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">un exemple HTML d'application de cette feuille de style là</a> — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.</p> @@ -227,10 +220,10 @@ original_slug: Apprendre/HTML/Tableaux/Basics <li>Avant tout, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire de votre ordinateur.</li> <li>Le contenu de chaque tableau est encadré par ces deux balises : <strong><code><a href="/fr/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Ajoutez‑les dans le corps de votre HTML.</li> <li>Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément <strong><code><a href="/fr/docs/Web/HTML/Element/td"><td></a></code></strong> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : - <pre class="brush: html notranslate"><td>Bonjour, je suis votre première cellule.</td></pre> + <pre class="brush: html"><td>Bonjour, je suis votre première cellule.</td></pre> </li> <li>Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : - <pre class="brush: html notranslate"><td>Bonjour, je suis votre première cellule </td> + <pre class="brush: html"><td>Bonjour, je suis votre première cellule </td> <td>je suis votre deuxième cellule</td> <td>je suis votre troisième cellule</td> <td>je suis votre quatrième cellule</td></pre> @@ -244,7 +237,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <ol> <li>Placez les quatre cellules que vous avez créées entre deux balises <code><tr></code> ainsi : - <pre class="brush: html notranslate"><tr> + <pre class="brush: html"><tr> <td>Bonjour, je suis votre première cellule </td> <td>je suis votre deuxième cellule </td> <td>je suis votre troisième cellule </td> @@ -274,14 +267,14 @@ original_slug: Apprendre/HTML/Tableaux/Basics </table> <div class="note"> -<p><strong>Note</strong>: Vous pouvez également trouver cela sur GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">voir en direct aussi</a>).</p> +<p><strong>Note :</strong> Vous pouvez également trouver cela sur GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">voir en direct aussi</a>).</p> </div> -<h2 id="Ajouter_des_en-têtes_avec_<th>"><a id="Adding_headers_with_%3Cth%3E_elements" name="Adding_headers_with_%3Cth%3E_elements"></a>Ajouter des en-têtes avec <th></h2> +<h2 id="Ajouter_des_en-têtes_avec_<th>">Ajouter des en-têtes avec <th></h2> <p>Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td>&nbsp;</td> <td>Knocky</td> @@ -369,12 +362,12 @@ original_slug: Apprendre/HTML/Tableaux/Basics <ol> <li>En premier lieu, faites une copie des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.</li> - <li>Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <code><td></code>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <code><td></code> des cellules entourant le tableau par des <code><th></code>.</li> + <li>Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <strong><code><a href="/fr/docs/Web/HTML/Element/th"><th></a></code></strong> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <code><td></code>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <code><td></code> des cellules entourant le tableau par des <code><th></code>.</li> <li>Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.</li> </ol> <div class="note"> -<p><strong>Note</strong> : Vous pouvez trouver notre exemple achevé <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">voir en direct aussi</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver notre exemple achevé <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">voir en direct aussi</a>).</p> </div> <h3 id="Pourquoi_les_en-têtes_sont-ils_utiles">Pourquoi les en-têtes sont-ils utiles ?</h3> @@ -382,7 +375,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <p>Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.</p> <div class="note"> -<p><strong>Note</strong> : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.</p> +<p><strong>Note :</strong> Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.</p> </div> <p>Les en-têtes de tableau ont un autre avantage — avec l'attribut <code>scope</code> (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.</p> @@ -393,7 +386,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <p>Le code initial ressemble à cela :</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Animaux</th> </tr> @@ -461,19 +454,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics </ol> <div class="note"> -<p><strong>Note</strong> : Vous pouvez trouver l'exemple achevé dans <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">voir en direct aussi</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver l'exemple achevé dans <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">voir en direct aussi</a>).</p> </div> -<table id="tabular" style="background-color: white;"> -</table> - <h2 id="Attribuer_un_style_commun_aux_colonnes">Attribuer un style commun aux colonnes</h2> -<p>Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque <code><td></code> ou <code><th></code> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.</p> +<p>Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <strong><code><a href="/fr/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/fr/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque <code><td></code> ou <code><th></code> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.</p> +<h3>Premier exemple</h3> <p>Observez l'exemple simple suivant :</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> @@ -489,27 +480,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics </table></pre> <p>Ce qui nous donne comme résultat :</p> - -<table> - <tbody> - <tr> - <th>Data 1</th> - <th style="background-color: yellow;">Data 2</th> - </tr> - <tr> - <td>Calcutta</td> - <td style="background-color: yellow;">Orange</td> - </tr> - <tr> - <td>Robots</td> - <td style="background-color: yellow;">Jazz</td> - </tr> - </tbody> -</table> +<p>{{EmbedLiveSample("Premier_exemple")}}</p> <p>Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne (nous aurions probablement défini une <code>classe</code> dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <code><col></code>. Les éléments <code><col></code> sont utilisés dans un conteneur <code><colgroup></code> juste en-dessous de la balise <code><table></code>. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit :</p> -<pre class="brush: html notranslate"> <table> +<h3>Autres exemples</h3> + +<pre class="brush: html"> <table> <colgroup> <col> <col style="background-color: yellow"> @@ -532,13 +509,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics <p>Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <code><col></code> avec un attribut span, comme ceci :</p> -<pre class="brush: html notranslate"><colgroup> +<pre class="brush: html"><colgroup> <col style="background-color: yellow" span="2"> </colgroup></pre> <p>Comme <code>colspan</code> et <code>rowspan</code>, <code>span</code> reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.</p> -<h3 id="Apprentissage_actif_colgroup_et_col"><a id="Active_learning_colgroup_and_col" name="Active_learning_colgroup_and_col"></a>Apprentissage actif : <code>colgroup</code> et <code>col</code></h3> +<h3 id="Apprentissage_actif_colgroup_et_col">Apprentissage actif : <code>colgroup</code> et <code>col</code></h3> <p>Maintenant, il est temps de vous y mettre vous-même.</p> @@ -559,7 +536,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <li>Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li> </ol> -<p><span lang="fr">Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version </span> <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (à<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html"> voir aussi</a> directement) <span lang="fr">sur GitHub</span> .</p> +<p>Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (à<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html"> voir aussi</a> directement) sur GitHub .</p> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html index 1344ec014c..e29779b351 100644 --- a/files/fr/learn/html/tables/index.html +++ b/files/fr/learn/html/tables/index.html @@ -15,14 +15,14 @@ original_slug: Apprendre/HTML/Tableaux --- <div>{{LearnSidebar}}</div> -<p class="summary">Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de <a href="/en-US/docs/Learn/CSS">CSS</a> pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.</p> +<p>Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de <a href="/fr/docs/Learn/CSS">CSS</a> pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.</p> <h2 id="Prérequis">Prérequis</h2> <p>Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html index 9732baa868..303bf2fdf9 100644 --- a/files/fr/learn/html/tables/structuring_planet_data/index.html +++ b/files/fr/learn/html/tables/structuring_planet_data/index.html @@ -8,27 +8,27 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data <div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> -<p class="summary"><span id="result_box" lang="fr"><span>Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.</span></span></p> +<p>Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td><span id="result_box" lang="fr"><span>Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.</span></span></td> + <td>Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.</td> </tr> <tr> <th scope="row">Objectif :</th> - <td><span id="result_box" lang="fr"><span>Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.</span></span></td> + <td>Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.</td> </tr> </tbody> </table> <h2 id="Point_de_départ">Point de départ</h2> -<p><span id="result_box" lang="fr"><span>Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.</span></span></p> +<p>Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez aussi utiliser un site comme<a class="external external-icon" href="https://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <code><script></code>/<code><style></code> dans la page HTML.</p> +<p><strong>Note :</strong> Vous pouvez aussi utiliser un site comme<a class="external external-icon" href="https://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <code><script></code>/<code><style></code> dans la page HTML.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> @@ -37,7 +37,7 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data <p>Le tableau terminé devrait ressembler à celui-ci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="assessment-table.png"></p> <p>Vous pouvez aussi <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder l'exemple ici</a> (sans regarder le code source — ne trichez pas !)</p> |