initial commit

161 files changed, 37869 insertions, 0 deletions

diff --git a/files/fr/apprendre/a11y/accessibility_troubleshooting/index.html b/files/fr/apprendre/a11y/accessibility_troubleshooting/index.html
new file mode 100644
index 0000000000..27f7489b2e
--- /dev/null
+++ b/files/fr/apprendre/a11y/accessibility_troubleshooting/index.html
@@ -0,0 +1,117 @@
+---
+title: 'Évaluation: dépannage d''accessibilité'
+slug: Apprendre/a11y/Accessibility_troubleshooting
+tags:
+  - Accessibilité
+  - Apprendre
+  - CSS
+  - Débutant
+  - HTML
+  - JavaScript
+translation_of: Learn/Accessibility/Accessibility_troubleshooting
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p>
+
+<p><span class="tlid-translation translation"><span title="">Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation"><span title="">Conditions préalables:</span></span></th>
+   <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la</span></span>  <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation">Objectif:</span></th>
+   <td><span class="tlid-translation translation"><span title="">Tester les connaissances de base sur les principes fondamentaux d'accessibilité.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target">
+<div class="text-wrap tlid-copy-target">
+<h2 class="result-shield-container tlid-copy-target" id="Point_de_départ"><span class="tlid-translation translation"><span title="">Point de départ</span></span></h2>
+
+<div class="result-shield-container tlid-copy-target"> </div>
+</div>
+</div>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Pour lancer cette évaluation, vous devez aller chercher le </span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. <span class="tlid-translation translation"><span title="">Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Le site d'évaluation terminé devrait ressembler à ceci:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement.</span> <span title="">Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!</span></span></p>
+
+<h2 id="Résumé_du_projet"><span class="tlid-translation translation"><span title="">Résumé du projet</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours.</span> <span title="">Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.</span></span></p>
+
+<div class="text-wrap tlid-copy-target">
+<h3 class="result-shield-container tlid-copy-target" id="Couleur"><span class="tlid-translation translation"><span title="">Couleur</span></span></h3>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Le texte est difficile à lire en raison du schéma de couleurs actuel.</span> <span title="">Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?</span></span></p>
+
+<h3 id="Semantic_HTML">Semantic HTML</h3>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">La partie du menu de navigation du site </span></span> ( <code>&lt;div class="nav"&gt;&lt;/div&gt;</code>) <span class="tlid-translation translation"><span title="">pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié.</span> <span title="">Lequel devrait-il être mis à jour?</span> <span title="">Faites la mise à jour.</span></span></li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques.</span> <span title="">Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.</span></span></p>
+</div>
+
+<h3 id="Les_images"><font>Les images</font></h3>
+
+<p><span class="tlid-translation translation"><span title="">Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran.</span> <span title="">Pouvez-vous réparer ceci?</span></span></p>
+
+<h3 id="Le_lecteur_audio">Le lecteur audio</h3>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Le lecteur </span></span> <font> <code>&lt;audio&gt;</code> </font> <span class="tlid-translation translation"><span title="">n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Le lecteur</span></span> <font> <code>&lt;audio&gt;</code> </font> <span class="tlid-translation translation"><span title="">n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5.</span> <span title="">Comment pouvez-vous leur permettre d'accéder encore à l'audio?</span></span></li>
+</ol>
+
+<h3 id="Les_formulaires">Les formulaires</h3>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">L'élément</span></span> <font> <code>&lt;input&gt;</code> </font> <span class="tlid-translation translation"><span title="">dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants.</span> <span title="">Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran?</span></span> <font>?</font></li>
+ <li><span class="tlid-translation translation"><span title="">Les deux éléments</span></span> <font> <code>&lt;input&gt;</code> </font> <span class="tlid-translation translation"><span title="">du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir?</span> <span title="">Notez que vous devrez également mettre à jour certaines règles CSS.</span></span></li>
+</ol>
+
+<h3 id="Le_contrôle_afficher_masquer_les_commentaires"><span class="tlid-translation translation"><span title="">Le contrôle afficher / masquer les commentaires</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier.</span> <span title="">Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?</span></span></p>
+
+<h3 id="La_table"><font>La table</font></h3>
+
+<p><span class="tlid-translation translation"><span title="">Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre.</span> <span title="">Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?</span></span></p>
+
+<h3 id="Autres_considérations"><span class="tlid-translation translation"><span title="">Autres considérations?</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?</span></span></p>
+
+<h2 id="Évaluation"><span class="tlid-translation translation"><span title="">Évaluation</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige.</span> <span title="">Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la</span></span><font> </font><a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a><font>, </font> <span class="tlid-translation translation"><span title="">ou sur le canal IRC</span></span> <font> <a href="irc://irc.mozilla.org/mdn">#mdn</a> </font> <span class="tlid-translation translation"><span title="">sur </span></span> <font> <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. </font> <span class="tlid-translation translation"><span title="">Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!</span></span></p>
+
+<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p>
+
+<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
diff --git a/files/fr/apprendre/a11y/css_and_javascript/index.html b/files/fr/apprendre/a11y/css_and_javascript/index.html
new file mode 100644
index 0000000000..3f59d3a489
--- /dev/null
+++ b/files/fr/apprendre/a11y/css_and_javascript/index.html
@@ -0,0 +1,368 @@
+---
+title: Meilleures pratiques d'accessibilité CSS et JavaScript
+slug: Apprendre/a11y/CSS_and_JavaScript
+tags:
+  - Accessibilité
+  - Apprendre
+  - Article
+  - CSS
+  - Codage des scripts
+  - Guide
+  - JavaScript
+  - contraste
+  - couleur
+  - discret
+translation_of: Learn/Accessibility/CSS_and_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>
+
+<p class="summary"><span class="tlid-translation translation"><span title="">CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés.</span> <span title="">Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de</span></span>  <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th>
+   <td><span class="tlid-translation translation"><span title="">Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_et_JavaScript_des_technologies_accessibles"><span class="tlid-translation translation"><span title="">CSS et JavaScript, des technologies accessibles ?</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation.</span> <span title="">En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.</span></span></p>
+
+<h2 id="CSS">CSS</h2>
+
+<p><span class="tlid-translation translation"><span title="">Commençons par regarder le CSS.</span></span></p>
+
+<h3 id="Sémantique_correcte_et_attentes_de_lutilisateur"><span class="tlid-translation translation"><span title="">Sémantique correcte et attentes de l'utilisateur</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire.</span> <span title="">Comme nous l’avons souvent mentionné dans notre article </span></span> <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title="">vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié.</span> <span title="">Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés.</span> <span title="">L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs </span></span> — <span class="tlid-translation translation"><span title="">les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu.</span> <span title="">De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive.</span> <span title="">Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.</span></span></p>
+
+<h4 id="Structure_du_contenu_du_texte_standard"><span class="tlid-translation translation"><span title="">Structure du contenu du texte "standard"</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Titres, paragraphes, listes</span></span> — <span class="tlid-translation translation"><span title="">le contenu de texte de base de votre page :</span></span></p>
+
+<pre class="brush: html">&lt;h1&gt;<span class="tlid-translation translation"><span title="">En-têtes</span></span>&lt;/h1&gt;
+
+&lt;p&gt;<span class="tlid-translation translation"><span title="">paragraphes</span></span>&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;<span class="tlid-translation translation"><span title="">Ma liste</span></span>&lt;/li&gt;
+  &lt;li&gt;<span class="tlid-translation translation"><span title="">a deux éléments</span></span>.&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Quelques styles CSS typiques pourraient ressembler à ceci :</span></span></p>
+
+<pre class="brush: css">h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}</pre>
+
+<p><span class="tlid-translation translation"><span title="">Vous devriez </span></span>:</p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Sélectionnez une taille de police</span></span>, une hauteur de ligne, un<span class="tlid-translation translation"><span title=""> espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte</span></span> principal<span class="tlid-translation translation"><span title="">.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Vos listes devraient ressembler à des listes</span></span>.</li>
+ <li>La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a> et <a href="/fr/docs/Learn/CSS/Styling_text"> Introduction au style de texte</a> <span class="tlid-translation translation"><span title="">pour plus d'informations.</span></span></p>
+
+<h4 id="Texte_mis_en_emphase"><span class="tlid-translation translation"><span title="">Texte mis en emphase</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">On met en avant une portion de texte grâce au balises <em>inline</em> <code>&lt;em&gt;</code> :</span></span></p>
+
+<pre class="brush: html">&lt;p&gt; <span class="tlid-translation translation"><span title="">L'eau est</span></span> &lt;em&gt; <span class="tlid-translation translation"><span title="">très chaud</span></span>e &lt;/em&gt;.&lt;/p&gt;
+
+&lt;p&gt; <span class="tlid-translation translation"><span title="">Les gouttelettes d’eau accumulées sur les surfaces s’appellent</span></span>  &lt;strong&gt;condensation&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :</span></span></p>
+
+<pre class="brush: css">strong, em {
+  color: #a60000;
+}</pre>
+
+<p><span class="tlid-translation translation"><span title="">Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative.</span> <span title="">Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion.</span> <span title="">Pour mettre des contenus en avant de manière efficace, voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Emphasis_and_importance">Fondamentaux du texte HTML</a>.</p>
+
+<h4 id="Les_abréviations"><span class="tlid-translation translation"><span title="">Les abréviations</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :</span></span></p>
+
+<pre class="brush: html">&lt;p&gt; <span class="tlid-translation translation"><span title="">Le contenu web est marqué à l'aide de</span></span>  &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments</span></span> :</p>
+
+<pre class="brush: css">abbr {
+  color: #a60000;
+}</pre>
+
+<p><span class="tlid-translation translation"><span title="">Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue.</span> <span title="">Pour plus d'informations sur les abréviations, voir </span></span><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">Abréviations</a>.</p>
+
+<div class="text-wrap tlid-copy-target">
+<h4 class="result-shield-container tlid-copy-target" id="Liens"><span class="tlid-translation translation"><span title="">Liens</span></span></h4>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :</span></span></p>
+
+<pre class="brush: html">&lt;p&gt; <span class="tlid-translation translation"><span title="">Visiter la</span></span>  &lt;a href="https://www.mozilla.org"&gt; <span class="tlid-translation translation"><span title="">Page d'accueil de Mozilla</span></span> &lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Un style de lien très simple est présenté ci-dessous :</span></span></p>
+
+<pre class="brush: css">a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}</pre>
+
+<p><span class="tlid-translation translation"><span title="">Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge)</span><span title="">.</span> <span title="">De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé.</span> <span title="">L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens.</span> <span title="">Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour</span></span> — <span class="tlid-translation translation"><span title="">ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier</span></span>.</p>
+
+<h4 id="Éléments_form"><span class="tlid-translation translation"><span title="">Éléments form</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Éléments permettant aux utilisateurs de saisir des données sur des sites web :</span></span></p>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;label for="name"&gt;<span class="tlid-translation translation"><span title="">Entrez votre nom</span></span>&lt;/label&gt;
+  &lt;input type="text" id="name" name="name"&gt;
+&lt;/div&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez voir de bons exemples de CSS dans notre exemple</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/form-css.html">en direct</a>).</p>
+
+<p><span class="tlid-translation translation"><span title="">La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus).</span> <span title="">Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.</span></span></p>
+
+<h4 id="Tableaux"><span class="tlid-translation translation"><span title="">Tableaux</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Tableaux pour la présentation des données tabulées</span></span>.</p>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez voir un bon exemple simple de </span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/table-css.html">en direct</a>).</p>
+
+<p><span class="tlid-translation translation"><span title="">En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse.</span> <span title="">Il est judicieux de vous assurer que les en-têtes de table se démarquent </span></span> (<span class="tlid-translation translation"><span title="">normalement en gras</span></span>), <span class="tlid-translation translation"><span title="">et de zébrer les lignes via le pseudo-sélecteur <code>:nth-child(n) </code>pour faciliter la lecture.</span></span></p>
+
+<h3 id="Couleur_et_contraste_de_couleur"><span class="tlid-translation translation"><span title="">Couleur et contraste de couleur</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte </span></span><span class="tlid-translation translation"><span title="">contraste bien avec la couleur de fond</span></span>. <span class="tlid-translation translation"><span title="">Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes.</span> <span title="">Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier.</span> <span title="">Par exemple, le</span></span><span class="tlid-translation translation"><span title=""> </span></span><a href="https://webaim.org/resources/contrastchecker/">vérificateur de contraste de couleur</a> du WebAIM est <span class="tlid-translation translation"><span title="">simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.</span></span></p>
+
+<div class="note">
+<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil</span></span>.</p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur.</span> <span title="">Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.</span></span></p>
+
+<h3 id="Cacher_des_choses"><span class="tlid-translation translation"><span title="">Cacher des choses</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps.</span> <span title="">Par exemple, dans notre </span></span><a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Exemple de boîte d'information à onglets</a> (voir notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>), <span class="tlid-translation translation"><span title="">nous avons trois panneaux d’informations, mais nous les</span></span> <a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">positionnons</a> <span class="tlid-translation translation"><span title="">les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi</span> <span title="">accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner)</span></span>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<p><span class="tlid-translation translation"><span title="">Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre.</span> <span title="">Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Par contre, vous ne devriez pas utiliser</span></span> {{cssxref("visibility")}}<code>:hidden</code> ou {{cssxref("display")}}<code>:none</code>, <span class="tlid-translation translation"><span title="">car ils masquent le contenu des lecteurs d'écran s</span><span title="">auf si vous souhaitez que ce contenu leur soit masqué.</span></span></p>
+
+<div class="note">
+<p><strong>Note </strong>: <span class="subtitle"><a href="https://webaim.org/techniques/css/invisiblecontent/">Contenu invisible juste pour les utilisateurs de lecteur d'écran</a> </span> <span class="tlid-translation translation"><span title="">contient beaucoup plus de détails utiles concernant ce sujet.</span></span></p>
+</div>
+
+<h3 id="Accepter_que_les_utilisateurs_puissent_remplacer_les_styles"><span class="tlid-translation translation"><span title="">Accepter que les utilisateurs puissent remplacer les styles</span></span></h3>
+
+<h4 id="Acceptez_que_les_utilisateurs_puissent_remplacer_vos_styles"><span class="tlid-translation translation"><span title="">Acceptez que les utilisateurs puissent remplacer vos style</span></span>s</h4>
+
+<p><span class="tlid-translation translation"><span title="">Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Voir </span></span><a href="/fr/docs/Outils/Éditeur_de_style">Éditeur de Style</a> <span class="tlid-translation translation"><span title="">pour un guide utile expliquant comment le faire manuellement dans Firefox, et </span></span><a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer</a> <span class="tlid-translation translation"><span title="">par Adrian Gordon pour</span> <span title="">les instructions IE équivalentes (EN).</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour</span></span> <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, et <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Les utilisateurs peuvent le faire pour diverses raisons.</span> <span title="">Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire.</span> <span title="">Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception.</span> <span title="">Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.</span></span></p>
+
+<h2 id="JavaScript">JavaScript</h2>
+
+<p><span class="tlid-translation translation"><span title="">JavaScript peut également compromettre l’accessibilité, selon son utilisation.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière.</span> <span title="">Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions.</span> <span title="">Comme nous l'avons vu dans notre article</span></span> <a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title=""> les principales considérations sont les suivantes :</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Bonne sémantique : Utiliser le bon élément pour le bon travail.</span> <span title="">Par exemple, assurez-vous que vous utilisez les en-têtes et les paragraphes, et les éléments</span></span> {{htmlelement("button")}} et {{htmlelement("a")}}.</li>
+ <li><span class="tlid-translation translation"><span title="">S'assurer que le contenu est disponible sous forme de texte, soit directement sous forme de contenu textuel, soit par un libellé</span></span> <span class="tlid-translation translation"><span title="">pour des éléments</span></span> <code>&lt;form&gt;</code> soit par <a href="/fr/docs/Apprendre/a11y/HTML#Alternatives_textuelles">textes par défaut</a> <span class="tlid-translation translation"><span title="">pour les images.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir </span></span><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>. <span class="tlid-translation translation"><span title="">Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé.</span> <span title="">Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran.</span> <span title="">Le prochain article couvrira également cela en détail.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de </span></span><a href="/fr/docs/Web/API/WebGL_API">L'API WebGL : graphismes 2D et 3D pour le web</a> <span class="tlid-translation translation"><span title="">sera rendu sur un élément</span></span> {{htmlelement("canvas")}}, <span class="tlid-translation translation"><span title="">qui n'a pour l'instant aucune possibilité de fournir</span> <span title="">textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants.</span> <span title="">On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des</span></span> <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> faite <span class="tlid-translation translation"><span title="">pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.</span></span></p>
+
+<h3 id="Le_problème_avec_trop_de_JavaScript"><span class="tlid-translation translation"><span title="">Le problème avec trop de JavaScript</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript.</span> <span title="">Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé</span><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail !</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait.</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte.</span> <span title="">Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.</span></span></p>
+
+<h3 id="Le_garder_discret"><span class="tlid-translation translation"><span title="">Le garder discret</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Lors de la création de votre contenu, gardez à l'esprit </span></span> <span class="tlid-translation translation"><span title="">l'idée d'un</span></span> <strong><span class="tlid-translation translation"><span title="">JavaScript</span></span> discret, en retrait</strong><span class="tlid-translation translation"><span title="">.</span> <span title="">JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible.</span> La règle est d'utiliser <span title="">lorsque cela est possible les fonctionnalités intégrées au navigateur.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">De bons exemples d'utilisation de JavaScript discret incluent :</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données.</span> <span title="">S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Fournir des commandes personnalisées pour les </span></span>  <code>&lt;video&gt;</code> <span class="tlid-translation translation"><span title="">HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur</span></span> <code>&lt;video&gt;</code> <span class="tlid-translation translation"><span title="">par défaut ne sont pas des touches</span> <span title="">accessibles dans la plupart des navigateurs).</span></span></li>
+</ul>
+
+<p id="Client-side_form_validation"><span class="tlid-translation translation"><span title="">Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (<span class="tlid-translation translation"><span title="">voir aussi la </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">démonstration en direct</a>). <span class="tlid-translation translation"><span title="">Ici, vous verrez un formulaire simple.</span> <span title="">Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Ce type de validation de formulaire est discret </span></span>— <span class="tlid-translation translation"><span title="">vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client</span><span title=""> (en désactivant JavaScript dans le navigateur, par exemple).</span> <span title="">La validation côté client est toujours très utile pour signaler les erreurs </span></span>—<span class="tlid-translation translation"><span title=""> les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page.</span> <span title="">C'est un avantage certain en termes de convivialité.</span></span></p>
+
+<div class="note">
+<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La validation côté serveur n'a pas été implémentée dans cette simple démonstration</span></span>.</p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons également rendu cette validation de formulaire assez accessible.</span> <span title="">Nous avons utilisé des éléments</span></span> {{htmlelement("label")}} <span class="tlid-translation translation"><span title="">pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :</span></span></p>
+
+<pre class="brush: html">&lt;label for="name"&gt; <span class="tlid-translation translation"><span title="">Entrez votre nom</span></span> :&lt;/label&gt;
+&lt;input type="text" name="name" id="name"&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Nous ne faisons la validation qu'une fois le formulaire soumis </span></span>—<span class="tlid-translation translation"><span title=""> ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :</span></span></p>
+
+<pre class="brush: js">form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(var i = 0; i &lt; formItems.length; i++) {
+    var testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci</span></span>.</p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres).</span> <span title="">Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie</span></span> (<code>if(testItem.input.value === '')</code>).</p>
+
+<p><span class="tlid-translation translation"><span title="">Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis.</span> <span title="">S'il y a des erreurs </span></span> (<code>if(errorList.innerHTML !== '')</code>)  <span class="tlid-translation translation"><span title="">nous arrêtons la soumission du formulaire</span></span> ( <span class="tlid-translation translation"><span title="">à l'aide de</span></span><a href="/fr/docs/Web/API/Event/preventDefault"> event.preventDefault()</a>), <span class="tlid-translation translation"><span title="">et affichons tous les messages d'erreur créés (voir ci-dessous).</span> <span title="">Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste</span></span> <code>errorList</code>.</p>
+
+<pre class="brush: js">function createLink(testItem) {
+  var listItem = document.createElement('li');
+  var anchor = document.createElement('a');
+  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}</pre>
+
+<p><span class="tlid-translation translation"><span title="">Chaque lien a un double objectif </span></span>—<span class="tlid-translation translation"><span title=""> il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.</span></span></p>
+
+<div class="note">
+<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">La partie </span></span> <code>focus()</code>  <span class="tlid-translation translation"><span title="">de cet exemple est un peu délicate.</span> <span title="">Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc </span></span> <code>onclick</code>/<code>focus()</code>.  <span class="tlid-translation translation"><span title="">Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc</span></span> <code>onclick</code>/<code>focus()</code>  <span class="tlid-translation translation"><span title="">pour le focaliser.</span> <span title="">Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien).</span> <span title="">Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir</span></span> {{bug(277178)}}).</p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">De plus, le champ</span></span> <code>errorField</code> <span class="tlid-translation translation"><span title="">est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question</span> <span title="">en remontant au début de la page</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :</span></span></p>
+
+<pre>&lt;div class="errors" role="alert" aria-relevant="all"&gt;
+  &lt;ul&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Nous expliquerons ces attributs dans notre prochain article, qui couvre</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> <span class="tlid-translation translation"><span title="">de manière beaucoup plus détaillée.</span></span></p>
+
+<div class="note">
+<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs</span></span> <code>required</code>, <code>min</code>/<code>minlength</code>, et <code>max</code>/<code>maxlength</code>  (voir {{htmlelement("input")}} <span class="tlid-translation translation"><span title="">référence d'élément pour plus d'informations).</span> <span title="">Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: WebAIM's <a href="https://webaim.org/techniques/formvalidation/">Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)</a> <span class="tlid-translation translation"><span title="">fournit des informations supplémentaires utiles sur la validation de formulaire accessible.</span></span></p>
+</div>
+
+<h3 id="Autres_problèmes_daccessibilité_JavaScript"><span class="tlid-translation translation"><span title="">Autres problèmes d'accessibilité JavaScript</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité.</span> Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente<span title="">.</span></span></p>
+
+<h4 id="Événements_spécifiques_à_la_souris"><span class="tlid-translation translation"><span title="">Événements spécifiques à la souris</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements.</span> <span title="">Certains événements peuvent avoir des problèmes d'accessibilité.</span> <span title="">L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que  </span></span> <a href="/fr/docs/Web/Events/mouseover"> mouseover</a>, <a href="/fr/docs/Web/Events/mouseout"> mouseout</a>, <a href="/fr/docs/Web/Events/dblclick"> dblclick</a>, <span class="tlid-translation translation"><span title="">etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique)</span></span> —<a href="/fr/docs/Web/Events/focus">focus</a> et <a href="/fr/docs/Web/Events/blur">blur (event)</a> <span class="tlid-translation translation"><span title="">fourniraient une accessibilité aux utilisateurs de clavier.</span></span> </p>
+
+<p><span class="tlid-translation translation"><span title="">Regardons un exemple qui illustre cela.</span> <span title="">Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons créé un exemple très simple, que vous pouvez trouver sur </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">Exemple d'événements de souris et de clavier</a> (<span class="tlid-translation translation"><span title="">voir aussi le</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">code source</a>). <span class="tlid-translation translation"><span title="">Le code comporte deux fonctions qui affichent et cachent l'image agrandie ;</span> <span title="">ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :</span></span></p>
+
+<pre class="brush: js">imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement.</span> <span title="">Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête).</span> <span title="">Cela peut être fait en tapant sur l'image, car nous avons inclus</span></span>  <code>tabindex="0"</code> <span class="tlid-translation translation"><span title="">dessus.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">L'événement </span></span><a href="/fr/docs/Web/API/Element/click_event">click</a><span class="tlid-translation translation"><span title=""> est intéressant </span></span>—<span class="tlid-translation translation"><span title=""> cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement </span></span><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">element.onclick</a>  <span class="tlid-translation translation"><span title="">après avoir  pressé <kbd>Entrée</kbd>  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile</span><span title="">.</span> <span title="">Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir</span></span> <a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>).</p>
+
+<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Ensuite, WAI-ARIA !</span></span></p>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>
+
+<div>
+<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">HTML : une bonne base pour l'accessibilité</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li>
+</ul>
+</div>
diff --git a/files/fr/apprendre/a11y/html/index.html b/files/fr/apprendre/a11y/html/index.html
new file mode 100644
index 0000000000..03b80cbb80
--- /dev/null
+++ b/files/fr/apprendre/a11y/html/index.html
@@ -0,0 +1,530 @@
+---
+title: 'HTML : une bonne base pour l''accessibilité'
+slug: Apprendre/a11y/HTML
+tags:
+  - Accessibilité
+  - Article
+  - Clavier
+  - Débutant
+  - Forms
+  - HTML
+  - Liens
+  - a11y
+  - boutons
+  - sémantique
+translation_of: Learn/Accessibility/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div>
+
+<p>Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Compétences informatiques de base, compréhension basique de HTML (voir<a href="/fr/Apprendre/HTML/Introduction_à_HTML"> </a><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">I</a><a href="/fr/Apprendre/HTML/Introduction_à_HTML">ntroduction à HTML</a>), et compréhension de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec les fonctionnalités de HTML qui bénéficient à l'accessibilité, et comment les utiliser de manière appropriée dans vos documents web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_et_accessibilité">HTML et accessibilité</h2>
+
+<p>Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.</p>
+
+<p>Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;Lire la vidéo&lt;/div&gt;</pre>
+
+<p>Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Lire la vidéo&lt;/button&gt;</pre>
+
+<p>Non seulement  <code>&lt;button&gt;</code> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.</p>
+
+<p>Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :</p>
+
+<ol>
+ <li><strong>Facilite les développements</strong> — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.</li>
+ <li><strong>Meilleur pour le mobile</strong> — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. </li>
+ <li><strong>Bon pour le SEO</strong> — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des <code>&lt;div&gt;</code> non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.</li>
+</ol>
+
+<p>Continuons et jetons un œil au HTML accessible dans le détail.</p>
+
+<div class="note">
+<p><strong>Note </strong>: C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders">gérer les problèmes courants d'accessibilité</a> pour plus de détails.</p>
+</div>
+
+<h2 id="Une_bonne_sémantique">Une bonne sémantique</h2>
+
+<p>Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.</p>
+
+<p>En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.</p>
+
+<p>Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.</p>
+
+<p>L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.</p>
+
+<h3 id="Contenus_textuels">Contenus textuels</h3>
+
+<p>L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :</p>
+
+<pre class="brush: html example-good line-numbers language-html notranslate">&lt;h1&gt;Mon titre&lt;/h1&gt;
+
+&lt;p&gt;Ceci est la premère section de mon document.&lt;/p&gt;
+
+&lt;p&gt;Je vais ajouter ici un autre paragraphe.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Voici&lt;/li&gt;
+  &lt;li&gt;une liste pour&lt;/li&gt;
+  &lt;li&gt;toi à lire.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;Mon sous-titre&lt;/h2&gt;
+
+&lt;p&gt;Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!&lt;/p&gt;
+
+&lt;h2&gt;Mon second sous-titre&lt;/h2&gt;
+
+&lt;p&gt;Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.&lt;/p&gt;</pre>
+
+<p>Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir <a href="https://mdn.github.io/learning-area/accessibility/html/good-semantics.html">la bonne sémantique</a>). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver :</p>
+
+<ol>
+ <li>Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc.</li>
+ <li>Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant.</li>
+ <li>Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran.</li>
+ <li>Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique.</li>
+</ol>
+
+<p>Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :</p>
+
+<pre class="brush: html example-bad line-numbers  language-html notranslate">&lt;font size="7"&gt;Mon titre&lt;/font&gt;
+&lt;br&gt;&lt;br&gt;
+Ceci est la première section de mon document.
+&lt;br&gt;&lt;br&gt;
+Je vais ajouter ici un autre paragraphe.
+&lt;br&gt;&lt;br&gt;
+1. Voici
+&lt;br&gt;&lt;br&gt;
+2. une liste pour
+&lt;br&gt;&lt;br&gt;
+3. toi à lire.
+&lt;br&gt;&lt;br&gt;
+&lt;font size="5"&gt;Mon sous-titre&lt;/font&gt;
+&lt;br&gt;&lt;br&gt;
+&lt;p&gt;Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!
+&lt;br&gt;&lt;br&gt;
+&lt;font size="5"&gt;My 2nd subheading&lt;/font&gt;
+&lt;br&gt;&lt;br&gt;
+Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</pre>
+
+<p>Si vous essayez notre version plus longue avec un lecteur d'écran (voir <a href="https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">la mauvaise sémantique</a>), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.</p>
+
+<p>Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.</p>
+
+<h4 id="Utiliser_un_langage_clair">Utiliser un langage clair</h4>
+
+<p>Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple :</p>
+
+<ul>
+ <li>N'utilisez pas des tirets si vous le pouvez. Au lieu d'écrire 5–7, écrivez 5 à 7.</li>
+ <li>Explicitez les abréviations — au lieu d'écrire Jan, écrivez Janvier.</li>
+ <li>Explicitez les acronymes, au moins une ou deux fois. Au lieu d'écrire "HTML" en premier lieu, écrivez Hypertext Markup Language.</li>
+</ul>
+
+<h3 id="Disposition_des_pages">Disposition des pages</h3>
+
+<p>Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués.</p>
+
+<p>Essayez notre exemple <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, qui ressemble à quelque chose comme ça :</p>
+
+<pre class="brush: html notranslate">&lt;table width="1200"&gt;
+      &lt;!-- main heading row --&gt;
+      &lt;tr id="heading"&gt;
+        &lt;td colspan="6"&gt;
+
+          &lt;h1 align="center"&gt;Header&lt;/h1&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- nav menu row  --&gt;
+      &lt;tr id="nav" bgcolor="#ffffff"&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Home&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Our team&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Projects&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Contact&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="300"&gt;
+          &lt;form width="300"&gt;
+            &lt;input type="search" name="q" placeholder="Search query" width="300"&gt;
+          &lt;/form&gt;
+        &lt;/td&gt;
+        &lt;td width="100"&gt;
+          &lt;button width="100"&gt;Go!&lt;/button&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- main content and aside row --&gt;
+      &lt;tr id="main"&gt;
+        &lt;td id="content" colspan="4" bgcolor="#ffffff"&gt;
+
+          &lt;!-- main content goes here --&gt;
+        &lt;/td&gt;
+        &lt;td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"&gt;
+          &lt;h2&gt;Related&lt;/h2&gt;
+
+          &lt;!-- aside content goes here --&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- footer row --&gt;
+      &lt;tr id="footer" bgcolor="#ffffff"&gt;
+        &lt;td colspan="6"&gt;
+          &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/table&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données).</span> <span title="">Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage,</span> <span title="">design manquant de souplesse).</span> <span title="">Ne les utilisez pas !</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un</span></span>  <a href="https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">exemple plus moderne de structure de site Web</a>, <span class="tlid-translation translation"><span title="">qui pourrait ressembler à ceci :</span></span></p>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+  &lt;h1&gt;<span class="tlid-translation translation"><span title="">Entête</span></span>&lt;/h1&gt;
+&lt;/header&gt;
+
+&lt;nav&gt;
+  &lt;!--  <span class="tlid-translation translation"><span title="">navigation principale ici</span></span>  --&gt;
+&lt;/nav&gt;
+
+&lt;!--  <span class="tlid-translation translation"><span title="">Voici le contenu principal de notre page</span></span>  --&gt;
+&lt;main&gt;
+
+  &lt;!--  <span class="tlid-translation translation"><span title="">Il contient un article</span></span>  --&gt;
+  &lt;article&gt;
+    &lt;h2&gt;<span class="tlid-translation translation"><span title="">Intitulé de l'article</span></span>&lt;/h2&gt;
+
+    &lt;!--  <span class="tlid-translation translation"><span title="">contenu de l'article ici</span></span>  --&gt;
+  &lt;/article&gt;
+
+  &lt;aside&gt;
+    &lt;h2&gt;<span class="tlid-translation translation"><span title="">en relation</span></span>&lt;/h2&gt;
+
+    &lt;!--  <span class="tlid-translation translation"><span title="">à part le contenu ici</span></span>  --&gt;
+  &lt;/aside&gt;
+
+&lt;/main&gt;
+
+&lt;!--  <span class="tlid-translation translation"><span title="">Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web.</span></span> --&gt;
+
+&lt;footer&gt;
+  &lt;!--  <span class="tlid-translation translation"><span title="">contenu du pied de page ici</span></span>  --&gt;
+&lt;/footer&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse.</span> <span title="">Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir </span></span><a href="/fr/docs/Web/HTML/Element#Content_sectioning">Référence des éléments HTML</a>). <span class="tlid-translation translation"><span title="">Vous pouvez créer une disposition en utilisant uniquement des éléments</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">imbriqués, mais il est préférable d'utiliser</span> des <span title="">éléments de sectionnement appropriés pour envelopper votre navigation principale</span></span> ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), <span class="tlid-translation translation"><span title="">en répétant des unités de contenu</span></span> ({{htmlelement("article")}}), <span class="tlid-translation translation"><span title=""> etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir</span></span> <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5</a> <span class="tlid-translation translation"><span title="">pour une idée de la prise en charge du lecteur d’écran</span></span>).</p>
+
+<div class="note">
+<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer.</span> <span title="">les utilisateurs de lecteur d’écran qui se liront auront du sens.</span></span></p>
+</div>
+
+<h3 id="Contrôles_de_linterface_utilisateur"><span class="tlid-translation translation"><span title="">Contrôles de l'interface utilisateur</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire.</span> <span title="">Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles.</span> <span title="">Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier.</span> <span title="">Vous pouvez essayer ceci en utilisant notre exemple </span></span><a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilité du clavier natif</a> (<span class="tlid-translation translation"><span title="">voir le</span></span> <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">code source</a>) – <span class="tlid-translation translation"><span title="">ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation;</span> <span title="">après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ;</span> <span title="">les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents,</span> <span title="">par exemple, l'élément</span></span>  {{htmlelement("select")}} <span class="tlid-translation translation"><span title="">peut avoir ses options affichées et alterner entre les touches fléchées haut et bas).</span></span> </p>
+
+<div class="note">
+<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles.</span> <span title="">Voir</span></span> comment <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility">gérer les problèmes courants d'accessibilité</a> <span class="tlid-translation translation"><span title="">pour plus de détails.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés,</span></span> par exemple :</p>
+
+<pre class="brush: html example-good notranslate">&lt;h1&gt;<span class="tlid-translation translation"><span title="">Liens</span></span>&lt;/h1&gt;
+
+&lt;p&gt; <span class="tlid-translation translation"><span title="">Ceci est un lien vers</span></span>  &lt;a href="https://www.mozilla.org"&gt;Mozilla&lt;/a&gt;.&lt;/p&gt;
+
+&lt;p&gt; <span class="tlid-translation translation"><span title="">Un autre lien, pour</span></span>  &lt;a href="https://developer.mozilla.org"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
+
+&lt;h2&gt;<span class="tlid-translation translation"><span title="">Boutons</span></span>&lt;/h2&gt;
+
+&lt;p&gt;
+  &lt;button data-message="This is from the first button"&gt;<span class="tlid-translation translation"><span title="">Cliquez moi</span></span>!&lt;/button&gt;
+  &lt;button data-message="This is from the second button"&gt; <span class="tlid-translation translation"><span title="">Cliquez moi aussi</span></span> !&lt;/button&gt;
+  &lt;button data-message="This is from the third button"&gt;<span class="tlid-translation translation"><span title="">Et moi</span></span>!&lt;/button&gt;
+&lt;/p&gt;
+
+&lt;h2&gt;formulaire&lt;/h2&gt;
+
+&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt; <span class="tlid-translation translation"><span title="">Remplis ton nom</span></span> :&lt;/label&gt;
+    &lt;input type="text" id="name" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt; <span class="tlid-translation translation"><span title="">Entrez votre âge</span></span> :&lt;/label&gt;
+    &lt;input type="text" id="age" name="age"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="mood"&gt; <span class="tlid-translation translation"><span title="">Choisissez votre humeur</span></span> :&lt;/label&gt;
+    &lt;select id="mood" name="mood"&gt;
+      &lt;option&gt;<span class="tlid-translation translation">Heureux</span>&lt;/option&gt;
+      &lt;option&gt; <span class="tlid-translation translation"><span title="">Triste</span></span> &lt;/option&gt;
+      &lt;option&gt; <span class="tlid-translation translation">Fâché</span> &lt;/option&gt;
+      &lt;option&gt; <span class="tlid-translation translation">Préoccupé</span> &lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément </span></span> {{htmlelement("label")}} <span class="tlid-translation translation"><span title="">pour les contrôles de formulaire).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML.</span> <span title="">Par exemple, vous voyez parfois des boutons balisés en utilisant</span></span> {{htmlelement("div")}}s, <span class="tlid-translation translation"><span title=""> par exemple :</span></span></p>
+
+<pre class="brush: html example-bad notranslate">&lt;div data-message="This is from the first button"&gt; <span class="tlid-translation translation"><span title="">Cliquez-moi!</span></span>&lt;/div&gt;
+&lt;div data-message="This is from the second button"&gt; <span class="tlid-translation translation"><span title=""> Cliquez moi aussi!</span></span>&lt;/div&gt;
+&lt;div data-message="This is from the third button"&gt; <span class="tlid-translation translation"><span title="">Et moi!</span></span>&lt;/div&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments</span></span>  {{htmlelement("button")}}. <span class="tlid-translation translation"><span title="">De plus, vous n’obtenez aucun des styles CSS par défaut</span> que <span title="">les boutons ont.</span></span></p>
+
+<h4 id="Remettre_laccessibilité_au_clavier"><span class="tlid-translation translation"><span title="">Remettre l'accessibilité au clavier</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple</span></span> <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> – <span class="tlid-translation translation"><span title=""> voir également le</span></span> <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). <span class="tlid-translation translation"><span title="">Ici, nous avons donné à nos faux boutons <code>&lt;div&gt;</code> la possibilité</span> <span title="">se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut</span></span> <code>tabindex="0"</code> :</p>
+
+<pre class="brush: html notranslate">&lt;div data-message="This is from the first button" tabindex="0"&gt; <span class="tlid-translation translation"><span title="">Cliquez-moi!</span></span>&lt;/div&gt;
+&lt;div data-message="This is from the second button" tabindex="0"&gt; <span class="tlid-translation translation"><span title="">Cliquez moi aussi!</span></span>&lt;/div&gt;
+&lt;div data-message="This is from the third button" tabindex="0"&gt; <span class="tlid-translation translation"><span title="">Et moi!</span></span>&lt;/div&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Fondamentalement, l'attribut</span></span> {{htmlattrxref("tabindex")}} <span class="tlid-translation translation"><span title="">est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut.</span> <span title="">C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure.</span> <span title="">Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique.</span> <span title="">Il y a deux autres options pour</span></span> <code>tabindex</code> :</p>
+
+<ul>
+ <li><code>tabindex="0"</code> – <span class="tlid-translation translation"><span title="">comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir.</span> <span title="">C’est la valeur la plus utile de</span></span> <code>tabindex</code>.</li>
+ <li><code>tabindex="-1"</code> – <span class="tlid-translation translation"><span title="">cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex.</span> <span title="">via JavaScript, ou en tant que cible de liens.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour.</span> <span title="">Pour ce faire, nous avons dû ajouter le bout de code JavaScript</span></span> suivant :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+}</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Ici, nous ajoutons un écouteur à l’objet</span></span> <code class="language-js">d<code>ocument</code></code> <span class="tlid-translation translation"><span title="">pour détecter le moment où un bouton a été appuyé sur le clavier.</span> <span title="">Nous vérifions quel bouton a été pressé via la propriété</span></span> <code class="language-js"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code></code> <span class="tlid-translation translation"><span title="">de l'objet événement;</span> <span title="">s'il s'agit du code clé qui correspond</span></span> <code class="language-js"> Return/Enter</code>, <span class="tlid-translation translation"><span title="">nous exécutons la fonction stockée dans le gestionnaire du bouton </span></span> <code class="language-js"> <code>onclick</code></code> <span class="tlid-translation translation"><span title=""> à l'aide de </span></span><code class="language-js"><code>document.activeElement.onclick()</code></code><span class="tlid-translation translation"><span title="">. </span></span><code class="language-js"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement">activeElement</a></code></code><span class="tlid-translation translation"><span title=""> nous donne l'élément qui est actuellement ciblé sur la page.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation"><span title=""><strong>Note :</strong> N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), </span></span><code class="language-js"><code>addEventListener</code></code><span class="tlid-translation translation"><span title=""> ne fonctionnera pas.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes.</span></span> <span class="tlid-translation translation"><span title=""><strong>Mieux vaut utiliser le bon élément pour le bon travail en premier lieu</strong>.</span></span></p>
+
+<h4 id="Étiquettes_de_texte_significatives"><span class="tlid-translation translation"><span title="">Étiquettes de texte significatives</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs.</span> <span title="">Ne vous contentez pas d'utiliser </span></span>« <span class="tlid-translation translation"><span title="">Cliquez ici</span></span> »<span class="tlid-translation translation"><span title=""> pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire.</span> <span title="">La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.</span></span></p>
+
+<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></code></p>
+
+<p><span class="tlid-translation translation"><span title="">Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :</span></span></p>
+
+<pre class="brush: html example-good notranslate"><code class="language-js">&lt;p&gt;</code> <span class="tlid-translation translation"><span title="">Les baleines sont vraiment des créatures géniales</span></span> <code class="language-js">. &lt;a href="whales.html"&gt;</code> <span class="tlid-translation translation"><span title="">En savoir plus sur les baleines</span></span> <code class="language-js">&lt;/a&gt;.&lt;/p&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">c'est un mauvais texte du lien :</span></span></p>
+
+<pre class="brush: html example-bad notranslate"><code class="language-js">&lt;p&gt;</code> <span class="tlid-translation translation"><span title="">Les baleines sont des créatures vraiment impressionnantes.</span> <span title="">Pour en savoir plus sur les baleines,</span></span> <code class="language-js"> &lt;a href="whales.html"&gt;</code><span class="tlid-translation translation"><span title="">cliquez ici</span></span><code class="language-js">&lt;/a&gt;.&lt;/p&gt;</code>
+</pre>
+
+<div class="note">
+<p><code class="language-js"><strong>Note</strong>:</code><span class="tlid-translation translation"><span title="">Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur</span></span> la <code class="language-js"><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">création d'hyperliens</a></code>. <span class="tlid-translation translation"><span title="">Vous pouvez également voir quelques bons et mauvais exemples dans</span></span> <code class="language-js"><a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html">Bons-liens.html</a> et <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html">Mauvais-liens.html</a>.</code></p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire.</span> <span title="">Ce qui suit semble être un exemple assez raisonnable :</span></span></p>
+
+<pre class="brush: html example-bad notranslate"> <span class="tlid-translation translation"><span title="">Remplis ton nom</span></span> <code class="language-js">: &lt;input type="text" id="name" name="name"&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Cependant, ce n'est pas très utile pour les utilisateurs handicapés.</span> <span title="">Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas.</span> <span title="">Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type </span></span>« <span class="tlid-translation translation"><span title="">éditer le texte".</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Ce qui suit est un exemple bien meilleur :</span></span></p>
+
+<pre class="brush: html example-good notranslate"><code class="language-js">&lt;div&gt;
+  &lt;label for="name"&gt;</code><span class="tlid-translation translation"><span title="">Entrez votre nom</span></span><code class="language-js">:&lt;/label&gt;
+  &lt;input type="text" id="name" name="name"&gt;
+&lt;/div&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Avec le code comme celui-ci, le label sera clairement associée à input;</span> <span title="">la description ressemblera davantage à "Entrez votre nom: éditez le texte".</span></span></p>
+
+<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></code></p>
+
+<p><span class="tlid-translation translation"><span title="">En prime, dans la plupart des navigateurs, associer a un</span></span> <code class="language-js">label</code><span class="tlid-translation translation"><span title=""> à une</span></span> <code class="language-js"> form input</code> <span class="tlid-translation translation"><span title="">signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément</span></span> <code class="language-js"> label</code>. <span class="tlid-translation translation"><span title="">Cela donne à </span></span><code class="language-js">input</code><span class="tlid-translation translation"><span title=""> une zone de résultats plus grande, ce qui facilite la sélection</span></span></p>
+
+<div class="note">
+<p><code class="language-js"><strong>Note</strong>:</code><span class="tlid-translation translation"><span title="">vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans</span></span> <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html">exemple de bon formulaire</a><span class="tlid-translation translation"><span title=""> et </span></span><a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html">exemple de mauvais formulaire</a><span class="tlid-translation translation"><span title="">.</span></span></p>
+</div>
+
+<h2 id="Tableaux_de_données_accessibles"><span class="tlid-translation translation"><span title="">Tableaux de données accessibles</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Une table de données de base peut être écrite avec un balisage très simple, par exemple :</span></span></p>
+
+<pre class="brush: html notranslate"><code class="language-js">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Nom&lt;/td&gt;
+    &lt;td&gt;Age&lt;/td&gt;
+    &lt;td&gt;Sexe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Gabriel&lt;/td&gt;
+    &lt;td&gt;13&lt;/td&gt;
+    &lt;td&gt;Male&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Elva&lt;/td&gt;
+    &lt;td&gt;8&lt;/td&gt;
+    &lt;td&gt;Femelle&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Freida&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+    &lt;td&gt;Femelle&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données.</span> <span title="">Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Regardez maintenant notre </span></span> tableau d'exemple sur les groupes punk – <span class="tlid-translation translation"><span title="">vous pouvez voir quelques aides à l'accessibilité au travail ici :</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Les en-têtes de tableau sont définis à l'aide d'éléments</span></span><code class="language-js"> {{htmlelement("th")}} — </code> <span class="tlid-translation translation"><span title="">vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut</span></span> <code class="language-js"> <code>scope</code></code><span class="tlid-translation translation"><span title="">. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">L'élément </span></span><code class="language-js">{{htmlelement("caption")}}</code><span class="tlid-translation translation"><span title=""> et l'attribut summary </span></span> <code class="language-js"> <code>&lt;table&gt;</code></code> <span class="tlid-translation translation"><span title="">effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table.</span> </span> <code class="language-js"> <code>&lt;caption&gt;</code></code><span class="tlid-translation translation"><span title=""> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile.</span> <span title="">Vous n'avez pas vraiment besoin des deux.</span></span></li>
+</ul>
+
+<div class="note">
+<p><code class="language-js"><strong>Note</strong> :</code> <span class="tlid-translation translation"><span title="">voir notre article</span></span>  <code class="language-js"><a href="/fr/docs/Apprendre/HTML/Tableaux/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a> </code> <span class="tlid-translation translation"><span title="">pour plus de détails sur les tables de données accessibles.</span></span></p>
+</div>
+
+<h2 id="Alternatives_textuelles"><span class="tlid-translation translation"><span title="">Alternatives textuelles</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants.</span> <span title="">Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble</span></span> <code class="language-js">{{htmlelement("img")}}</code><span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons un exemple simple écrit, </span></span><code class="language-js"><a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a></code><span class="tlid-translation translation"><span title="">, comporte quatre copies de la même image :</span></span></p>
+
+<pre class="notranslate"><code class="language-js">&lt;img src="dinosaur.png"&gt;
+
+&lt;img src="dinosaur.png"
+     alt="</code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">."&gt;
+
+&lt;img src="dinosaur.png"
+     alt="</code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">."
+     title="</code> <span class="tlid-translation translation"><span title="">Le dinosaure rouge de Mozilla</span></span> <code class="language-js">"&gt;
+
+
+&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+
+&lt;p id="dino-label"&gt;</code> <span class="tlid-translation translation"><span title="">Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">.&lt;/p&gt;
+</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit </span></span>« <span class="tlid-translation translation"><span title="">/dinosaur.png, image</span></span> »<span class="tlid-translation translation"><span title="">.</span> <span title="">Il lit le nom du fichier pour essayer de fournir de l'aide.</span> <span title="">Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.</span></span></p>
+
+<div class="note">
+<p><code class="language-js"><strong>Note</strong>:</code> <span class="tlid-translation translation"><span title="">c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder.</span> <span title="">Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller.</span> <span title="">Juste ne le faite pas !</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt </span></span>– « <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées.</span></span> »</p>
+
+<p><span class="tlid-translation translation"><span title="">Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé</span></span> <code class="language-js"><strong>alt text</strong></code> <span class="tlid-translation translation"><span title="">n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">chaque fois que possible.</span> <span title="">Notez que le contenu de l'attribut</span></span> <code class="language-js"> <code>alt</code></code><span class="tlid-translation translation"><span title=""> doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement.</span> <span title="">Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification.</span> <span title="">S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.</span></span></p>
+
+<div class="note">
+<p><code class="language-js"><strong>Note </strong>:</code> <span class="tlid-translation translation"><span title="">Lisez </span></span><code class="language-js"><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a> et<a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web"> Images adaptatives</a></code> <span class="tlid-translation translation"><span title="">pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus.</span> <span title="">Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier.</span> <span title="">En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.</span></span></p>
+
+<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></code></p>
+
+<p><span class="tlid-translation translation"><span title="">Jetons un autre coup d'oeil à la quatrième méthode :</span></span></p>
+
+<pre class="brush: html notranslate"><code class="language-js">&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+
+&lt;p id="dino-label"&gt;</code> <span class="tlid-translation translation"><span title="">Le Tyrannosaure rouge Mozilla</span></span> <code class="language-js"> ... &lt;/p&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Dans ce cas, nous n'utilisons pas du tout l'attribut </span></span><code class="language-js"><code>alt</code></code> <span class="tlid-translation translation"><span title="">Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un</span></span> <code class="language-js"> <code>id</code></code><span class="tlid-translation translation"><span title=""> puis nous avons utilisé l'attribut</span></span> <code class="language-js"> <code>aria-labelledby</code></code> <span class="tlid-translation translation"><span title="">pour :</span> <span title="">faire référence à cela</span></span> <code class="language-js"> <code>id</code></code><span class="tlid-translation translation"><span title="">, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt</span></span> <code class="language-js"> text/label</code><span class="tlid-translation translation"><span title=""> pour cette image.</span> <span title="">Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec </span></span><code class="language-js"><code>alt</code></code><span class="tlid-translation translation"><span title="">.</span></span></p>
+
+<div class="note">
+<p><code class="language-js"><strong>Note</strong>: <code>aria-labelledby</code></code> <span class="tlid-translation translation"><span title="">fait partie de la spécification </span></span><code class="language-js"><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI ARIA</a></code><span class="tlid-translation translation"><span title="">, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant.</span> <span title="">Pour en savoir plus sur son fonctionnement, lisez notre article</span></span> <code class="language-js"><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basic</a></code><span class="tlid-translation translation"><span title="">.</span></span></p>
+</div>
+
+<h3 id="Autres_mécanismes_alternatifs_de_texte"><span class="tlid-translation translation"><span title="">Autres mécanismes alternatifs de texte</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif.</span> <span title="">Par exemple, il existe un attribut </span></span><code class="language-js"><code>longdesc</code></code><span class="tlid-translation translation"><span title=""> destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :</span></span></p>
+
+<pre class="brush: html notranslate"><code class="language-js">
+&lt;img src="dinosaur.png" longdesc="dino-info.html"&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente).</span> <span title="">Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran.</span> <span title="">Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">HTML5 comprend deux nouveaux éléments</span></span> <code class="language-js"> — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — </code> <span class="tlid-translation translation"><span title="">qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :</span></span></p>
+
+<pre class="brush: html notranslate"><code class="language-js">&lt;figure&gt;
+  &lt;img src="dinosaur.png" alt="</code> <span class="tlid-translation translation"><span title="">Le Mozilla Tyrannosaurus</span></span> <code class="language-js">"&gt;
+  &lt;figcaption&gt;</code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span> <code class="language-js">.&lt;/figcaption&gt;
+&lt;/figure&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.</span></span></p>
+
+<h3 id="Attributs_alt_vides"><span class="tlid-translation translation"><span title="">Attributs alt vides</span></span></h3>
+
+<pre class="brush: html notranslate"><code class="language-js">
+&lt;h3&gt;
+  &lt;img src="article-icon.png" alt=""&gt;
+  </code> <span class="tlid-translation translation"><span title="">Tyrannosaurus Rex: le roi des dinosaures</span></span> <code class="language-js">
+&lt;/h3&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle.</span> <span title="">Vous remarquerez dans l'exemple de code ci-dessus que l'attribut </span></span> <code class="language-js"> <code>alt</code> </code> <span class="tlid-translation translation"><span title="">de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement </span></span>« <span class="tlid-translation translation"><span title="">image</span></span> »<span class="tlid-translation translation"><span title="">, ou similaire)</span> <span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">La raison d'utiliser un vide </span></span><code class="language-js"><code>alt</code></code> <span class="tlid-translation translation"><span title="">au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">n'est fourni.</span> <span title="">Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée.</span> <span title="">Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">sur vos images.</span> <span title="">Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.</span></span></p>
+
+<div class="note">
+<p><code class="language-js"><strong>Note</strong> :</code><span class="tlid-translation translation"><span title=""> si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.</span></span></p>
+</div>
+
+<div class="text-wrap tlid-copy-target">
+<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas.</span> <span title="">Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases.</span> <span title="">Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p>
diff --git a/files/fr/apprendre/a11y/index.html b/files/fr/apprendre/a11y/index.html
new file mode 100644
index 0000000000..23ff90513d
--- /dev/null
+++ b/files/fr/apprendre/a11y/index.html
@@ -0,0 +1,56 @@
+---
+title: Accessibilité
+slug: Apprendre/a11y
+tags:
+  - ARIA
+  - Accessibilité
+  - Apprendre
+  - CSS
+  - Débutant
+  - HTML
+  - JavaScript
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du <a href="/fr/Apprendre/HTML">HTML</a>, du <a href="/fr/Apprendre/CSS">CSS</a> et du <a href="/fr/Apprendre/JavaScript">JavaScript</a>), effectuer <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">des tests sur les différents navigateurs</a> et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/Apprendre/JavaScript">JavaScript</a> en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a></dt>
+ <dd>Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.</dd>
+ <dt><a href="/fr/docs/Learn/Accessibility/HTML">HTML : une bonne base pour l'accessibilité</a></dt>
+ <dd>Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.</dd>
+ <dt><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></dt>
+ <dd>Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.</dd>
+ <dt><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">Principes de base du WAI-ARIA</a></dt>
+ <dd>À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.</dd>
+ <dt><a href="/fr/docs/Learn/Accessibility/Multimedia">Accessibilité pour les contenus multimédias</a></dt>
+ <dd>Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.</dd>
+ <dt><a href="/fr/docs/Learn/Accessibility/Mobile">Accessibilité mobile</a></dt>
+ <dd>On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.</dd>
+</dl>
+
+<h2 id="Évaluations">Évaluations</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Diagnostic et amélioration de l'accessibilité</a></dt>
+ <dd>Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today (en anglais)</a> — une excellente série de didacticiels vidéo de Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources (en anglais)</a> — comprend des exemples de code, des références pour les lecteurs d'écran et d'autres ressources utiles.</li>
+ <li><a href="https://www.webaim.org/resources/">Ressources relatives à WebAIM (en anglais)</a> — comprend des guides, des listes de vérification, des outils et bien plus encore.</li>
+</ul>
diff --git a/files/fr/apprendre/a11y/mobile/index.html b/files/fr/apprendre/a11y/mobile/index.html
new file mode 100644
index 0000000000..6fd7b657d1
--- /dev/null
+++ b/files/fr/apprendre/a11y/mobile/index.html
@@ -0,0 +1,311 @@
+---
+title: Accessibilité mobile
+slug: Apprendre/a11y/Mobile
+tags:
+  - Accessibilité
+  - Article
+  - Débutant
+  - Mobile
+  - responsive
+  - toucher
+translation_of: Learn/Accessibility/Mobile
+---
+<div>
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+
+<p class="summary"><span class="tlid-translation translation"><span title="">L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes.</span> <span title="">Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td><span class="tlid-translation translation"><span title="">Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la</span></span>  <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td><span class="tlid-translation translation"><span title="">Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Accessibilité_sur_les_appareils_mobiles"><span class="tlid-translation translation"><span title="">Accessibilité sur les appareils mobiles</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes.</span> <span title="">Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès.</span> <span title="">Les navigateurs mobiles modernes ont tendance à avoir un bon support pour</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, <span class="tlid-translation translation"><span title="">aussi</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Certaines exceptions nécessitent une attention particulière pour le mobile;</span> <span title="">les principaux sont:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à-dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.</span></span></li>
+</ul>
+
+<h2 id="Résumé_des_tests_de_lecteur_d'écran_sur_Android_et_iOS"><span class="tlid-translation translation"><span title="">Résumé des tests de lecteur d'écran sur Android et iOS</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels.</span> <span title="">Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</span></span></p>
+
+<h3 id="Android_TalkBack">Android TalkBack</h3>
+
+<p><span class="tlid-translation translation"><span title="">Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour l'activer, sélectionnez Paramètres&gt; Accessibilité&gt; TalkBack, puis appuyez sur le curseur pour l'activer.</span> <span title="">Suivez toute invite supplémentaire à l'écran qui vous est présentée.</span></span></p>
+
+<p><strong>Note:</strong>  <span class="tlid-translation translation"><span title="">Les anciennes versions de TalkBack sont activées dans</span></span> <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">slightly different ways</a>.</p>
+
+<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes.</span> <span title="">Par exemple:</span></span></p>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle.</span> <span title="">L'appareil lira chaque option.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.</span></span></li>
+</ol>
+
+<p><span class="tlid-translation translation"><span title="">Si vous souhaitez désactiver TalkBack:</span></span></p>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Accédez à votre application Paramètres en utilisant les gestes ci-dessus.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Accédez à Accessibilité&gt; TalkBack</span></span> .</li>
+ <li><span class="tlid-translation translation"><span title="">Accédez au commutateur et activez-le pour le désactiver.</span></span> .</li>
+</ol>
+
+<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide.</span> <span title="">Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite.</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Pour une liste plus complète des gestes TalkBack, voir</span></span>  <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p>
+
+<h4 id="Déverrouiller_le_téléphone"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage.</span> <span title="">Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez également explorer en touchant le bouton <em>Déverrouiller</em> en bas au centre de l'écran, puis en appuyant deux fois.</span></span></p>
+
+<h4 id="Menus_globaux_et_locaux"><span class="tlid-translation translation"><span title="">Menus globaux et locaux</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil.</span> <span title="">Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.</span></span></p>
+
+<h4 id="Pour_accéder_à_ces_menus"><span class="tlid-translation translation"><span title=""><strong>Pour accéder à ces menus</strong>:</span></span></h4>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Accédez au menu global en glissant rapidement vers le bas, puis à droite</span></span> .</li>
+ <li><span class="tlid-translation translation"><span title="">Accédez au menu local en balayant rapidement vers le haut, puis à droite.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour naviguer entre les différentes options.</span></span> .</li>
+ <li><span class="tlid-translation translation"><span title="">Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.</span></span></li>
+</ol>
+
+<p><span class="tlid-translation translation"><span title="">Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir</span></span>  <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p>
+
+<h4 id="Parcourir_des_pages_Web"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Par exemple, avec TalkBack activé:</span></span></p>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span>
+  <ul>
+   <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant</span></span> .</li>
+   <li><span class="tlid-translation translation"><span title="">Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir.</span> <span title="">Répétez pour chaque </span></span>caractère<span class="tlid-translation translation"><span title="">.</span></span></li>
+   <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li>
+  </ul>
+ </li>
+ <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page.</span></span> .</li>
+ <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Appuyez deux fois pour le sélectionner.</span> <span title="">Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.</span></span></li>
+</ol>
+
+<p><strong>Note:</strong>  <span class="tlid-translation translation"><span title="">Voir  </span></span> aussi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&amp;ref_topic=3529932">Get started on Android with TalkBack</a> <span class="tlid-translation translation"><span title="">pour obtenir une documentation plus complète.</span></span></p>
+
+<h3 id="iOS_VoiceOver">iOS VoiceOver</h3>
+
+<p><span class="tlid-translation translation"><span title="">Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour l'activer, accédez à l'application <em>Paramètres</em>, puis sélectionnez <em>Général</em> &gt; <em>Accessibilité</em> &gt; <em>VoiceOver</em>.</span> <span title="">Appuyez sur le curseur <em>VoiceOver</em> pour l'activer (vous verrez également un certain nombre d'autres options liées à <em>VoiceOver</em> sur cette page).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents</span></span> :</p>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez;</span> <span title="">votre appareil parlera de l'élément sur lequel vous avez tapé.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt avec trois doigts pour faire défiler une page.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.</span></span></li>
+</ol>
+
+<p><span class="tlid-translation translation"><span title="">Pour le désactiver à nouveau, revenez à <em>Paramètres</em>&gt; <em>Général</em>&gt; <em>Accessibilité</em>&gt; <em>VoiceOver</em> en utilisant les gestes ci-dessus, puis basculez le curseur <em>VoiceOver</em> sur Désactivé.</span></span></p>
+
+<h4 id="Déverrouiller_le_téléphone_2"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude.</span> <span title="">Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.</span></span></p>
+
+<h4 id="Utiliser_le_rotor"><span class="tlid-translation translation"><span title="">Utiliser le rotor</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes.</span> <span title="">Pour l'utiliser:</span></span></p>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Tournez deux doigts sur l’écran comme si vous tourniez un cadran.</span> <span title="">Chaque option sera lue à voix haute au fur et à mesure que vous tournez.</span> <span title="">Vous pouvez aller et venir pour parcourir les options.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Une fois que vous avez trouvé l'option que vous voulez:</span></span>
+  <ul>
+   <li><span class="tlid-translation translation"><span title="">Relâchez vos doigts pour le sélectionner.</span></span></li>
+   <li><span class="tlid-translation translation"><span title="">S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.</span></span></li>
+  </ul>
+ </li>
+</ol>
+
+<p><span class="tlid-translation translation"><span title="">Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).</span></span></p>
+
+<h4 id="Parcourir_des_pages_Web_2"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Essayons la navigation Web avec VoiceOver:</span></span></p>
+
+<ol>
+ <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span>
+  <ul>
+   <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.</span></span></li>
+   <li><span class="tlid-translation translation"><span title="">Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner.</span> <span title="">Appuyez deux fois pour le taper.</span></span></li>
+   <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li>
+  </ul>
+ </li>
+ <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page.</span> <span title="">Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Par défaut, l’option de rotor sélectionnée sera Speaking Rate;</span> <span title="">vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre.</span> <span title="">Voici quelques exemples d'options disponibles:</span></span>
+  <ul>
+   <li><span class="tlid-translation translation"><span title=""><em>Taux de parole</em> : Modifiez le taux de parole.</span></span></li>
+   <li><span class="tlid-translation translation"><span title=""><em>Conteneurs </em>: déplacez-vous entre différents conteneurs sémantiques de la page.</span></span></li>
+   <li><span class="tlid-translation translation"><span title=""><em>En-têtes </em>: déplacez-vous entre les en-têtes de la page.</span></span></li>
+   <li><span class="tlid-translation translation"><span title=""><em>Liens</em> : permet de se déplacer entre les liens de la page.</span></span></li>
+   <li><span class="tlid-translation translation"><span title=""><em>Contrôles de formulaire </em>: déplacez-vous entre les contrôles de formulaire de la page.</span></span></li>
+   <li><span class="tlid-translation translation"><span title=""><em>Langue</em> : déplacez-vous entre différentes traductions, si elles sont disponibles.</span></span></li>
+  </ul>
+ </li>
+ <li><span class="tlid-translation translation"><span title="">S<em>électionnez les en-têtes</em>.</span> <span title="">Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.</span></span></li>
+</ol>
+
+<p><strong>Note:</strong>  <span class="tlid-translation translation"><span title="">Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir </span></span> aussi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p>
+
+<h2 id="Mécanismes_de_contrôle"><span class="tlid-translation translation"><span title="">Mécanismes de contrôle</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle</span></span>  (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). <span class="tlid-translation translation"><span title="">En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Par exemple, l'événement </span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a>  <span class="tlid-translation translation"><span title="">est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile.</span> <span title="">Essayez notre</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> exemple (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) <span class="tlid-translation translation"><span title="">pour voir ce que nous entendons.</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Sinon, des événements spécifiques à la souris, tels que </span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> et <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> <span class="tlid-translation translation"><span title="">créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Si vous essayez de contrôler notre exemple</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) <span class="tlid-translation translation"><span title="">avec un clavier ou une touche, vous verrez le problème.</span> <span title="">Cela se produit car nous utilisons un code tel que:</span></span></p>
+
+<pre><code>div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:</span></span></p>
+
+<pre><code>div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> aussi).</p>
+
+<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à</span></span>   <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p>
+
+<h2 id="Responsive_design">Responsive design</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">Responsive design</a> <span class="tlid-translation translation"><span title="">a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils.</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Adéquation des mises en page pour les appareils mobiles.</span> <span title="">Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible.</span> <span title="">Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, et <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li>
+ <li><span class="tlid-translation translation"><span title="">Conserver les tailles d’image téléchargées.</span> <span title="">En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes.</span> <span title="">Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant.</span> <span title="">Vous pouvez gérer cela en utilisant</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li>
+ <li><span class="tlid-translation translation"><span title="">Penser aux hautes résolutions.</span> <span title="">De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net.</span> <span title="">Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives.</span> <span title="">De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels.</span> <span title="">SVG a une petite taille de fichier et restera net quelle que soit la taille affichée</span></span>   (voir <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> <span class="tlid-translation translation"><span title="">pour plus de détails</span></span> ).</li>
+</ul>
+
+<p><strong>Note: </strong> <span class="tlid-translation translation"><span title="">Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).</span></span></p>
+
+<h3 id="Considérations_mobiles_spécifiques"><span class="tlid-translation translation"><span title="">Considérations mobiles spécifiques</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile.</span> <span title="">Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.</span></span></p>
+
+<h4 id="Ne_pas_désactiver_le_zoom"><span class="tlid-translation translation"><span title="">Ne pas désactiver le zoom</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">En utilisant</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, <span class="tlid-translation translation"><span title="">il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre</span></span> {{htmlelement("head")}}:</p>
+
+<pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;</code></pre>
+
+<p><span class="tlid-translation translation"><span title="">Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée.</span> <span title="">Il y a certaines situations où le zoom peut casser l'interface utilisateur;</span> <span title="">Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.</span></span></p>
+
+<h4 id="Garder_les_menus_accessibles"><span class="tlid-translation translation"><span title="">Garder les menus accessibles</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si</span> <span title="">c'est nécessaire - lorsque le site est visualisé sur mobile.</span> <span title="">Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans</span></span> {{anch("Control mechanisms")}} <span class="tlid-translation translation"><span title="">ci-dessus, et que</span> <span title="">le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation.</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Cliquez ici pour un</span></span>  <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p>
+
+<h2 id="Entrée_utilisateur"><span class="tlid-translation translation"><span title="">Entrée utilisateur</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau.</span> <span title="">Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire.</span> <span title="">Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu</span></span>  {{htmlelement("select")}}  <span class="tlid-translation translation"><span title="">contenant les options les plus courantes (ce qui aide également à</span> <span title="">cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes.</span> <span title="">Vous pouvez voir un exemple simple de cette idée en action dans</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> ( <span class="tlid-translation translation"><span title="">voir le</span></span> <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p>
+
+<p><span class="tlid-translation translation"><span title="">Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil.</span> <span title="">Voir</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a>  <span class="tlid-translation translation"><span title=""> pour quelques exemples</span></span> (voir <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — <span class="tlid-translation translation"><span title="">essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Les types</span></span>  <code>number</code>, <code>tel</code>, et <code>email</code> <span class="tlid-translation translation"><span title="">affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Les types</span></span> <code>time</code> et <code>date</code> <span class="tlid-translation translation"><span title="">affichent des sélecteurs appropriés pour la sélection des heures et des dates.</span></span> .</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités.</span> <span title="">Reportez-vous à </span></span>  <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a>  <span class="tlid-translation translation"><span title="">pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article </span></span> <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> <span class="tlid-translation translation"><span title="">pour en savoir plus.</span></span> .</p>
+
+<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre.</span> <span title="">Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.</span></span></p>
+
+<div class="text-wrap tlid-copy-target">
+<h4 class="result-shield-container tlid-copy-target" id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h4>
+</div>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — <span class="tlid-translation translation"><span title="">Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.</span></span></li>
+ <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — <span class="tlid-translation translation"><span title="">Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.</span></span></li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+
+<div>
+<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/fr/apprendre/a11y/multimedia/index.html b/files/fr/apprendre/a11y/multimedia/index.html
new file mode 100644
index 0000000000..e8b03c52b0
--- /dev/null
+++ b/files/fr/apprendre/a11y/multimedia/index.html
@@ -0,0 +1,374 @@
+---
+title: Accessible multimedia
+slug: Apprendre/a11y/Multimedia
+tags:
+  - Accessibilité
+  - Apprendre
+  - Audio
+  - Débutant
+  - HTML
+  - Images
+  - JavaScript
+  - Multimedia
+  - Video
+translation_of: Learn/Accessibility/Multimedia
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>
+
+<p class="summary"><span class="tlid-translation translation"><span title="">Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs.</span> <span title="">Cet article montre comment.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation"><span title="">Conditions</span></span> requise:</th>
+   <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de</span></span> <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité?</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td><span class="tlid-translation translation"><span title="">Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre</span></span> .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Multimédia_et_accessibilité"><span class="tlid-translation translation"><span title="">Multimédia et accessibilité</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes.</span> <span title="">(avec</span></span>  <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> l'attribut).</p>
+
+<p><span class="tlid-translation translation"><span title="">Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia.</span> <span title="">Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</span></span></p>
+
+<h2 id="Simple_images">Simple images</h2>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article</span></span>  <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a>  — <span class="tlid-translation translation"><span title=""> vous pouvez vous y référer pour plus de détails.</span> <span title="">En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.</span></span></p>
+
+<p> </p>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Par exemple</span></span>:</div>
+</div>
+
+<pre class="brush: html">&lt;img src="dinosaur.png"
+     alt=" <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees</span></span> ."&gt;
+</pre>
+
+<h2 id="Commandes_audio_et_vidéo_accessibles"><span class="tlid-translation translation"><span title="">Commandes audio et vidéo accessibles</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas?</span> <span title="">Enquêtons</span></span> .</p>
+
+<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs"><span class="tlid-translation translation"><span title="">Le problème avec les contrôles HTML5 natifs</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement.</span> <span title="">Par exemple (voir</span></span>  <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">code source</a> et <a href="https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">en direct</a>):</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt; <span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> &lt;a href="viper.mp3"&gt; <span class="tlid-translation translation"><span title="">lien vers l\'audio</span></span> &lt;/a&gt;  <span class="tlid-translation translation"><span title="">au lieu</span></span> .&lt;/p&gt;
+&lt;/audio&gt;
+
+&lt;br&gt;
+
+&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;<span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> &lt;a href="rabbit320.mp4"&gt;<span class="tlid-translation translation"><span title="">lien vers la</span></span> video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia.</span> <span title="">Il semble que dans Firefox et Chrome</span></span> :</p>
+
+<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p>
+
+<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p>
+
+<p><span class="tlid-translation translation"><span title="">Cependant, il y a des problèmes avec ces contrôles</span></span> :</p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site.</span></span> .</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés.</span> <span title="">Regardons comment.</span></span></p>
+
+<h3 id="Création_de_contrôles_audio_et_vidéo_personnalisés"><span class="tlid-translation translation"><span title="">Création de contrôles audio et vidéo personnalisés</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même.</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés</span></span> .</p>
+
+<h4 id="Basic_setup">Basic setup</h4>
+
+<p><span class="tlid-translation translation"><span title="">Tout d'abord, prenez une copie de notre</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> <span class="tlid-translation translation"><span title="">fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</span></span></p>
+
+<pre class="brush: html">&lt;section class="player"&gt;
+  &lt;video controls&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;<span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> &lt;a href="rabbit320.mp4"&gt;<span class="tlid-translation translation"><span title="">lien vers la</span></span> video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+
+  &lt;div class="controls"&gt;
+    &lt;button class="playpause"&gt;Play&lt;/button&gt;
+    &lt;button class="stop"&gt;Stop&lt;/button&gt;
+    &lt;button class="rwd"&gt;Rwd&lt;/button&gt;
+    &lt;button class="fwd"&gt;Fwd&lt;/button&gt;
+    &lt;div class="time"&gt;00:00&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="JavaScript_basic_setup">JavaScript basic setup</h4>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons inséré quelques boutons de commande simples sous notre vidéo.</span> <span title="">Bien sûr, ces contrôles ne feront rien par défaut;</span> <span title="">pour ajouter des fonctionnalités, nous allons utiliser JavaScript</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</span></span></p>
+
+<pre class="brush: js">var playPauseBtn = document.querySelector('.playpause');
+var stopBtn = document.querySelector('.stop');
+var rwdBtn = document.querySelector('.rwd');
+var fwdBtn = document.querySelector('.fwd');
+var timeLabel = document.querySelector('.time');</pre>
+
+<p><span class="tlid-translation translation"><span title="">Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:</span></span></p>
+
+<pre class="brush: js">var player = document.querySelector('video');</pre>
+
+<p><span class="tlid-translation translation"><span title="">Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés.</span> <span title="">Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:</span></span></p>
+
+<pre class="brush: js">player.removeAttribute('controls');</pre>
+
+<p><span class="tlid-translation translation"><span title="">Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.</span></span></p>
+
+<h4 id="Câbler_nos_boutons"><span class="tlid-translation translation"><span title="">Câbler nos boutons</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Commençons par configurer le bouton lecture / pause.</span> <span title="">Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous.</span> <span title="">Ajoutez-le à votre code, en bas:</span></span></p>
+
+<pre class="brush: js">playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};</pre>
+
+<p><span class="tlid-translation translation"><span title="">Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</span></span></p>
+
+<pre class="brush: js">stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};</pre>
+
+<p><span class="tlid-translation translation"><span title="">Il n'y a pas de fonction</span></span>  <code>stop()</code>  <span class="tlid-translation translation"><span title="">disponible sur</span></span> {{domxref("HTMLMediaElement")}}s,  <span class="tlid-translation translation"><span title="">nous le mettons donc en</span></span> <code>pause()</code>  <span class="tlid-translation translation"><span title="">et, dans le même temps, définissons la valeur</span></span> <code>currentTime</code> sur 0.</p>
+
+<p><span class="tlid-translation translation"><span title="">Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre</span></span>  code:</p>
+
+<pre class="brush: js">rwdBtn.onclick = function() {
+  player.currentTime -= 3;
+};
+
+fwdBtn.onclick = function() {
+  player.currentTime += 3;
+  if(player.currentTime &gt;= player.duration || player.paused) {
+    player.pause();
+    player.currentTime = 0;
+    playPauseBtn.textContent = 'Play';
+  }
+};</pre>
+
+<p><span class="tlid-translation translation"><span title="">Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à </span></span>  <code>currentTime</code> <span class="tlid-translation translation"><span title="">chaque fois qu’on clique dessus.</span> <span title="">Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Notez que nous vérifions également si la durée</span></span>  <code>currentTime</code> <span class="tlid-translation translation"><span title="">est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé.</span> <span title="">Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée.</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</span></span></p>
+
+<pre class="brush: js">player.ontimeupdate = function() {
+  var minutes = Math.floor(player.currentTime / 60);
+  var seconds = Math.floor(player.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes&lt;10) {
+    minuteValue = "0" + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds&lt;10) {
+    secondValue = "0" + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  mediaTime = minuteValue + ":" + secondValue;
+  timeLabel.textContent = mediaTime;
+};</pre>
+
+<p><span class="tlid-translation translation"><span title="">Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction.</span> <span title="">Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.</span></span></p>
+
+<h4 id="Lectures_complémentaires"><span class="tlid-translation translation"><span title="">Lectures complémentaires</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio.</span> <span title="">Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:</span></span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés.</span> <span title="">Voir</span></span>  <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> ( <span class="tlid-translation translation"><span title="">également</span></span> <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">voir le code source</a>).</p>
+
+<h2 id="Transcriptions_audio"><span class="tlid-translation translation"><span title="">Transcriptions audio</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte.</span> <span title="">Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">En termes de création de la transcription, vos options sont les suivantes:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que</span></span>  <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, ou <a href="https://www.rev.com/">Rev</a>. <span class="tlid-translation translation"><span title="">Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions.</span> <span title="">Vous pouvez même essayer de les faire vous-même.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que </span></span>  <a href="https://trint.com">Trint</a>. <span class="tlid-translation translation"><span title="">Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous.</span> <span title="">Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés.</span> <span title="">Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement.</span></span> . </li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez.</span> <span title="">la précision et le temps requis pour produire la transcription varient selon les services.</span> <span title="">Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée.</span> <span title="">Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs.</span> <span title="">Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.</span></span></p>
+
+<h3 id="Exemples_de_transcription"><span class="tlid-translation translation"><span title="">Exemples de transcription</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil.</span> <span title="">Par exemple, jetez un coup d’œil à</span></span>  <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> <em>et choisissez plus &gt; Transcript</em>.</p>
+
+<p><span class="tlid-translation translation"><span title="">Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué;</span> <span title="">voir notre exemple</span></span>  <a href="https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">transcription audio-ui</a> exemple (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">code source</a>).</p>
+
+<h3 id="Descriptions_audio"><span class="tlid-translation translation"><span title="">Descriptions audio</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Cependant, il y a des cas extrêmes.</span> <span title="">Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique.</span> <span title="">Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription.</span> <span title="">Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.</span></span></p>
+
+<div class="note">
+<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Une transcription audio aidera en général plusieurs groupes d'utilisateurs.</span> <span title="">En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant.</span> <span title="">Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.</span></span></p>
+</div>
+
+<h2 id="Pistes_de_texte_vidéo"><span class="tlid-translation translation"><span title="">Pistes de texte vidéo</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo.</span></span> .</p>
+
+<div class="note">
+<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées.</span> <span title="">Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque).</span> <span title="">.)</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:</span></span></p>
+
+<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p>
+
+<p><span class="tlid-translation translation"><span title="">Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple</span></span></p>
+
+<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p><span class="tlid-translation translation"><span title="">Il existe différents types de pistes de texte avec des objectifs différents.</span> <span title="">Les principaux que vous rencontrerez sont:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement.</span> <span title="">.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.</span></span></li>
+</ul>
+
+<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5"><span class="tlid-translation translation"><span title="">Implémentation de pistes de texte vidéo HTML5</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées.</span> <span title="">Ces chaînes de texte sont appelées cues</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">Un fichier WebVTT typique ressemblera à ceci:</span></span></p>
+
+<pre>WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+ <span class="tlid-translation translation"><span title="">Ceci est le premier sous-titre.</span></span>
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+ <span class="tlid-translation translation"><span title="">C'est le deuxième</span></span> .
+
+  ...</pre>
+
+<p><span class="tlid-translation translation"><span title="">Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Enregistrez-le en tant que fichier .vtt dans un endroit approprié.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Lien vers le fichier .vtt avec </span></span> <span class="tlid-translation translation"><span title="">l'élément</span></span> {{htmlelement("track")}} . <code>&lt;track&gt;</code>  <span class="tlid-translation translation"><span title="">devrait être placé dans</span></span> <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code>,  <span class="tlid-translation translation"><span title="">mais après tout </span></span> <code>&lt;source&gt;</code> <span class="tlid-translation translation"><span title="">éléments</span></span> .  <span class="tlid-translation translation"><span title="">Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions.</span> <span title="">De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres.</span></span> .</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Voici un exemple:</span></span></p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</span></span></p>
+
+<p><img alt='Video player with standard 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><span class="tlid-translation translation"><span title="">Pour plus de détails, veuillez lire</span></span>  <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous titres à des vidéos HTML 5</a>.  <span class="tlid-translation translation"><span title="">Vous trouverez</span></span> <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">un exemple</a>  <span class="tlid-translation translation"><span title="">qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi</span></span><span class="tlid-translation translation"><span title=""> le</span></span> <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a>.) <span class="tlid-translation translation"><span title="">Cet exemple utilise du JavaScript.</span> <span title="">pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.</span></span></p>
+
+<div class="note">
+<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte.</span> <span title="">Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.</span></span></p>
+</div>
+
+<h2 id="Autre_contenu_multimédia"><span class="tlid-translation translation"><span title="">Autre contenu multimédia</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web.</span> <span title="">Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:</span></span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">HTML5 canvas</a></li>
+ <li>Flash</li>
+ <li>Silverlight</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas.</span> <span title="">Dans certains cas, ce n'est pas si grave, par exemple:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section</span></span> {{anch("Transcript examples")}} .</li>
+ <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies.</span> <span title="">Par exemple, voir</span></span>  <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, ou <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Cependant, il est difficile de rendre les autres multimédias accessibles.</span> <span title="">Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier.</span> <span title="">Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.</span></span></p>
+
+<div class="text-wrap tlid-copy-target">
+<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/apprendre/a11y/wai-aria_basics/index.html b/files/fr/apprendre/a11y/wai-aria_basics/index.html
new file mode 100644
index 0000000000..6a55cde5cb
--- /dev/null
+++ b/files/fr/apprendre/a11y/wai-aria_basics/index.html
@@ -0,0 +1,425 @@
+---
+title: Les bases de WAI-ARIA
+slug: Apprendre/a11y/WAI-ARIA_basics
+tags:
+  - ARIA
+  - Accessibilité
+  - Apprendre
+  - Article
+  - Débutant
+  - Guide
+  - HTML
+  - JavaScript
+  - WAI-ARIA
+  - sémantique
+translation_of: Learn/Accessibility/WAI-ARIA_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div>
+
+<p class="summary"><span class="tlid-translation translation"><span title="">Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript.</span> <span title="">WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe.</span> <span title="">Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">  Prerequis:</th>
+   <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des </span></span><a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th>
+   <td><span class="tlid-translation translation"><span title="">Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant</span></span>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est_WAI-ARIA"><span class="tlid-translation translation"><span title="">Qu'est WAI-ARIA?</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</span></span></p>
+
+<h3 id="Un_nouvel_ensemble_de_problèmes"><span class="tlid-translation translation"><span title="">Un nouvel ensemble de problèmes</span></span></h3>
+
+<p>Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.</p>
+
+<p><span class="tlid-translation translation"><span title="">Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes </span></span>  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  <span class="tlid-translation translation"><span title="">Avant de les utiliser, les développeurs utilisaient simplement</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s avec des identifiants ou des classes, par exemple</span></span> <code>&lt;div class="nav"&gt;</code> <span class="tlid-translation translation"><span title="">, mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation.</span></span> .</p>
+
+<p><span class="tlid-translation translation"><span title="">La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation</span></span> (<span class="tlid-translation translation"><span title="">ou autre</span></span>), <span class="tlid-translation translation"><span title="">par exemple:</span></span></p>
+
+<pre class="brush: html">&lt;a href="#hidden" class="hidden"&gt;<span class="tlid-translation translation"><span title="">Passer à la navigation</span></span>&lt;/a&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux</span></span>  input <span class="tlid-translation translation"><span title=""> pour rendre de tels contrôles:</span></span></p>
+
+<pre class="brush: html">&lt;input type="date"&gt;
+&lt;input type="range"&gt;</pre>
+
+<p><span class="tlid-translation translation"><span title="">Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web.</span> <span title="">En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments </span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.</span></span></p>
+
+<h3 id="Entrez_WAI-ARIA">Entrez WAI-ARIA</h3>
+
+<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> <span class="tlid-translation translation"><span title="">est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque.</span> <span title="">Trois caractéristiques principales sont définies dans la spécification:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title=""><strong>Rôles</strong> - Ceux-ci définissent ce qu'un élément est ou fait.</span> <span title="">Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple</span> <span title="">role = "navigation"</span></span> ({{htmlelement("nav")}}) ou <code>role="complementary"</code> ({{htmlelement("aside")}}) <span class="tlid-translation translation"><span title="">, mais il en existe d'autres qui décrivent différentes structures de pages, telles que</span></span> <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, <span class="tlid-translation translation"><span title="">etc., que l'on trouve couramment dans les UIs</span></span>.</li>
+ <li><strong><span class="tlid-translation translation"><span title="">Propriétés</span></span></strong>  — <span class="tlid-translation translation"><span title="">Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique.</span> <span title="">Par exemple</span></span><span class="tlid-translation translation"><span title="">,</span></span><span class="tlid-translation translation"><span title=""> </span></span> <code>aria-required="true"</code><span class="tlid-translation translation"><span title=""> spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que </span></span> <code>aria-labelledby="label"</code> <span class="tlid-translation translation"><span title="">vous permet de mettre un ID sur un élément, puis de le référencer </span><span title="">en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec</span></span> <code>&lt;label for="input"&gt;</code>. <span class="tlid-translation translation"><span title="">À titre d'exemple, vous pouvez utiliser</span></span> <code>aria-labelledby</code>  <span class="tlid-translation translation"><span title="">pour spécifier qu'une description de clé contenue dans un</span></span> {{htmlelement("div")}}  <span class="tlid-translation translation"><span title="">est le </span></span> label  <span class="tlid-translation translation"><span title="">de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image</span></span> —  <span class="tlid-translation translation"><span title="">spécifiez les informations existantes sur la page en tant que texte alternatif d’image</span></span>,  <span class="tlid-translation translation"><span title="">plutôt que de devoir les répéter à l'intérieur de l'attribut</span></span> <code>alt</code>.  <span class="tlid-translation translation"><span title="">Vous pouvez voir un exemple de celà à </span></span><a href="/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles">Alternatives textuelles</a>.</li>
+ <li><strong><span class="tlid-translation translation"><span title="">États</span></span></strong>  —  <span class="tlid-translation translation"><span title="">Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que</span></span> <code>aria-disabled="true"</code>, <span class="tlid-translation translation"><span title="">qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée.</span> <span title="">Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations).</span> <span title="">WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.</span></span></p>
+
+<div class="note">
+<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la</span></span> <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">définition des rôles</a>.</p>
+
+<p><span class="tlid-translation translation"><span title="">La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir</span></span>  <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Définitions des états et des propriétés (tous les attributs aria- *)</a>.</p>
+</div>
+
+<h3 id="Où_WAI-ARIA_est_supporté">Où WAI-ARIA est supporté?</h3>
+
+<p>Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:</p>
+
+<ol>
+ <li>Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA</li>
+ <li>Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer</li>
+</ol>
+
+<p>Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir <a href="https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Rough Guide: browsers, operating systems and screen reader support updated</a>.</p>
+
+<p>Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile.</p>
+
+<ol>
+ <li>Browser support is generally quite good — at the time of writing, <a href="http://caniuse.com/#feat=wai-aria">caniuse.com</a> stated that global browser support for WAI-ARIA was around 88%.</li>
+ <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a><span> article.</span></li>
+</ol>
+
+<p>In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p>
+</div>
+
+<h3 id="When_should_you_use_WAI-ARIA">When should you use WAI-ARIA?</h3>
+
+<p>We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:</p>
+
+<ol>
+ <li><strong>Signposts/Landmarks</strong>: ARIA's <code>role</code> attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, etc.</li>
+ <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li>
+ <li><strong>Enhancing keyboard accessibility</strong>: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using <code>tabindex</code>).</li>
+ <li><strong>Accessibility of non-semantic controls</strong>: When a series of nested <code>&lt;div&gt;</code>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like <code>button</code>, <code>listbox</code>, or <code>tabgroup</code>, and properties like <code>aria-required</code> or <code>aria-posinset</code> to provide further clues as to functionality.</li>
+</ol>
+
+<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/en-US/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p>
+
+<p>But again, only use it when necessary!</p>
+
+<div class="note">
+<p><strong>Note</strong>: Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p>
+</div>
+
+<h2 id="Practical_WAI-ARIA_implementations">Practical WAI-ARIA implementations</h2>
+
+<p>In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.</p>
+
+<p>See our section on <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p>
+
+<h3 id="SignpostsLandmarks">Signposts/Landmarks</h3>
+
+<p>WAI-ARIA adds the <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions"><code>role</code> attribute</a> to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">website-no-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">see it live</a>) has the following structure:</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;...&lt;/h1&gt;
+  &lt;nav&gt;
+    &lt;ul&gt;...&lt;/ul&gt;
+    &lt;form&gt;
+      &lt;!-- search form  --&gt;
+    &lt;/form&gt;
+  &lt;/nav&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;article&gt;...&lt;/article&gt;
+  &lt;aside&gt;...&lt;/aside&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:</p>
+
+<ul>
+ <li>On the <code>&lt;header&gt;</code> element — "banner, 2 items" (it contains a heading and the <code>&lt;nav&gt;</code>).</li>
+ <li>On the <code>&lt;nav&gt;</code> element — "navigation 2 items" (it contains a list and a form).</li>
+ <li>On the <code>&lt;main&gt;</code> element — "main 2 items" (it contains an article and an aside).</li>
+ <li>On the <code>&lt;aside&gt;</code> element — "complementary 2 items" (it contains a heading and a list).</li>
+ <li>On the search form input — "Search query, insertion at beginning of text".</li>
+ <li>On the <code>&lt;footer&gt;</code> element — "footer 1 item".</li>
+</ul>
+
+<p>If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p>
+
+<p>However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<code>&lt;input type="search"&gt;</code>). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.</p>
+
+<p>Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html">index.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css">style.css</a>), or navigating to our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>), which has a structure like this:</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;...&lt;/h1&gt;
+  &lt;nav role="navigation"&gt;
+    &lt;ul&gt;...&lt;/ul&gt;
+    &lt;form role="search"&gt;
+      &lt;!-- search form  --&gt;
+    &lt;/form&gt;
+  &lt;/nav&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;article role="article"&gt;...&lt;/article&gt;
+  &lt;aside role="complementary"&gt;...&lt;/aside&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code>, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.</p>
+
+<pre class="brush: html">&lt;input type="search" name="q" placeholder="Search query" aria-label="Search through site content"&gt;</pre>
+
+<p>Now if we use VoiceOver to look at this example, we get some improvements:</p>
+
+<ul>
+ <li>The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.</li>
+ <li>The label text contained in the <code>aria-label</code> attribute is read out when the form input is highlighted.</li>
+</ul>
+
+<p>Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <code>&lt;div&gt;</code>s, you should definitely include the ARIA roles to provide these much needed semantics!</p>
+
+<p>The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates.</p>
+
+<h3 id="Dynamic_content_updates">Dynamic content updates</h3>
+
+<p>Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.</p>
+
+<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p>
+
+<p>Let's look at a quick example — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (also <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">see it running live</a>). In this example we have a simple random quote box:</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Random quote&lt;/h1&gt;
+  &lt;blockquote&gt;
+    &lt;p&gt;&lt;/p&gt;
+  &lt;/blockquote&gt;
+&lt;/section&gt;</pre>
+
+<p>Our JavaScript loads a JSON file via <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p>
+
+<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre>
+
+<p>This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.</p>
+
+<p>WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a></code> property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:</p>
+
+<ul>
+ <li><code>off:</code> The default. Updates should not be announced.</li>
+ <li><code>polite</code>: Updates should be announced only if the user is idle.</li>
+ <li><code>assertive</code>: Updates should be announced to the user as soon as possible.</li>
+</ul>
+
+<p>We'd like you to take a copy of <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a>, and update your <code>&lt;section&gt;</code> tag as follows:</p>
+
+<pre class="brush: html">&lt;section aria-live="assertive"&gt;</pre>
+
+<p>This will cause a screenreader to read out the content as it is updated.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p>
+</div>
+
+<p>There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a></code> property to the section. Update your <code>&lt;section&gt;</code> tag again, like so:</p>
+
+<pre class="brush: html">&lt;section aria-live="assertive" aria-atomic="true"&gt;</pre>
+
+<p>The <code>aria-atomic="true"</code> attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p>
+</div>
+
+<h3 id="Enhancing_keyboard_accessibility">Enhancing keyboard accessibility</h3>
+
+<p>As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <code>&lt;select&gt;</code> box).</p>
+
+<p>However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.</p>
+
+<p>In terms of making non-focusable code focusable, WAI-ARIA extends the <code>tabindex</code> attribute with some new values:</p>
+
+<ul>
+ <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li>
+ <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li>
+</ul>
+
+<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p>
+
+<h3 id="Accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</h3>
+
+<p>This follows on from the previous section — when a series of nested <code>&lt;div&gt;</code>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.</p>
+
+<h4 id="Form_validation_and_error_alerts">Form validation and error alerts</h4>
+
+<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<ul>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li>
+ <li>An <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> value of <code>all</code> instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.</li>
+</ul>
+
+<p>We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?</p>
+
+<ol>
+ <li>At this point, take a copy of our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validation.js</a> files, and save them in a local directory.</li>
+ <li>Open them both in a text editor and have a look at how the code works.</li>
+ <li>First of all, add a paragraph just above the opening <code>&lt;form&gt;</code> tag, like the one below, and mark both the form <code>&lt;label&gt;</code>s with an asterisk. This is normally how we mark required fields for sighted users.
+  <pre class="brush: html">&lt;p&gt;Fields marked with an asterisk (*) are required.&lt;/p&gt;</pre>
+ </li>
+ <li>This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></code> attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <code>&lt;input&gt;</code> elements like so:
+  <pre class="brush: html">&lt;input type="text" name="name" id="name" aria-required="true"&gt;
+
+&lt;input type="number" name="age" id="age" aria-required="true"&gt;</pre>
+ </li>
+ <li>If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".</li>
+ <li>It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></code> properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 <code>placeholder</code> attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this:
+  <pre class="brush: html">&lt;input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true"&gt;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p>
+</div>
+
+<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code>&lt;label&gt;</code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a><span class="subtitle"> for more details.</span></p>
+
+<p><span class="subtitle">There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</span></p>
+
+<p><span class="subtitle">If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</span></p>
+
+<pre class="brush: html">&lt;p class="hidden-alert" aria-live="assertive"&gt;&lt;/p&gt;</pre>
+
+<p>which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the <code>aria-disabled</code> state, and some visual indicators too:</p>
+
+<pre class="brush: js">function toggleMusician(bool) {
+  var instruItem = formItems[formItems.length-1];
+  if(bool) {
+    instruItem.input.disabled = false;
+    instruItem.label.style.color = '#000';
+    instruItem.input.setAttribute('aria-disabled', 'false');
+    hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
+  } else {
+    instruItem.input.disabled = true;
+    instruItem.label.style.color = '#999';
+    instruItem.input.setAttribute('aria-disabled', 'true');
+    instruItem.input.removeAttribute('aria-label');
+    hiddenAlert.textContent = 'Instruments played field now disabled.';
+  }
+}</pre>
+
+<h4 id="Describing_non-semantic_buttons_as_buttons">Describing non-semantic buttons as buttons</h4>
+
+<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p>
+
+<p>But what about screenreaders? They still won't see the elements as buttons. If we test our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.</p>
+
+<p>We can fix this using a WAI-ARIA role. Make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>, and add <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> to each button <code>&lt;div&gt;</code>, for example:</p>
+
+<pre>&lt;div data-message="This is from the first button" tabindex="0" role="button"&gt;Click me!&lt;/div&gt;</pre>
+
+<p>Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p>
+</div>
+
+<h4 id="Guiding_users_through_complex_widgets">Guiding users through complex widgets</h4>
+
+<p>There are a whole host of other <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">roles</a> that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example <code><a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. You can see a number of userful examples in the <a href="https://dequeuniversity.com/library/">Deque university code library</a>, to give you an idea of how such controls can be made accessible.</p>
+
+<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p>
+
+<p>This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.</p>
+
+<p>To improve things, we've created a new version of the example called <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">see it running live</a>). We've updated the structure of the tabbed interface like so:</p>
+
+<pre class="brush: html">&lt;ul role="tablist"&gt;
+  &lt;li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0"&gt;Tab 1&lt;/li&gt;
+  &lt;li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0"&gt;Tab 2&lt;/li&gt;
+  &lt;li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0"&gt;Tab 3&lt;/li&gt;
+&lt;/ul&gt;
+&lt;div class="panels"&gt;
+  &lt;article class="active-panel" role="tabpanel" aria-hidden="false"&gt;
+    ...
+  &lt;/article&gt;
+  &lt;article role="tabpanel" aria-hidden="true"&gt;
+    ...
+  &lt;/article&gt;
+  &lt;article role="tabpanel" aria-hidden="true"&gt;
+    ...
+  &lt;/article&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p>
+</div>
+
+<p>The new features are as follows:</p>
+
+<ul>
+ <li>New roles — <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code> — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li>
+ <li><code>tabindex="0"</code> — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — This property allows you to specify what position in a series an element is in. Along with <code>aria-setsize</code>, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.</li>
+</ul>
+
+<p>In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the <code>aria-hidden</code> settings (only the non-hidden tab ever has <code>aria-hidden="false"</code> set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code>  attribute.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — ARIA roles reference.</li>
+ <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — properties and states reference.</li>
+ <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.</li>
+ <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.</li>
+ <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">HTML : une bonne base pour l'accessibilité</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/Mobile">Accessibilité mobile</a></li>
+ <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li>
+</ul>
diff --git a/files/fr/apprendre/a11y/what_is_accessibility/index.html b/files/fr/apprendre/a11y/what_is_accessibility/index.html
new file mode 100644
index 0000000000..047e2763a1
--- /dev/null
+++ b/files/fr/apprendre/a11y/what_is_accessibility/index.html
@@ -0,0 +1,198 @@
+---
+title: Qu'est ce que l'accessibilité?
+slug: Apprendre/a11y/What_is_accessibility
+tags:
+  - Accessibilité
+  - Aide technique
+  - Apprendre
+  - Article
+  - CSS
+  - Clavier
+  - Débutant
+  - HTML
+  - JavaScript
+  - Lecteur d'écran
+  - Outils
+  - Utilisateurs
+translation_of: Learn/Accessibility/What_is_accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div>
+
+<p class="summary">Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Compétences de base en informatique, une compréhension basique de l'HTML et du CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Se familiariser avec l'accessibilité en découvrant ce que c'est et en quoi cela vous affecte en tant que développeur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest-ce_donc_que_laccessibilité">Qu'est-ce donc que l'accessibilité?</h2>
+
+<p>L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.</p>
+
+<p>On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits.</p>
+
+<p>Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles.</p>
+
+<p>L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous :</p>
+
+<ul>
+ <li>Le HTML sémantique (qui rend votre site plus accessible) rend également votre site plus optimisé pour les moteurs de recherche, ce qui améliore le référencement de votre site.</li>
+ <li>Se préoccuper de l'accessibilité c'est faire preuve d'éthique et de morale, ce qui améliore votre image publique.</li>
+ <li>Des bonnes pratiques améliorent l'accessibilité rendent également votre site plus facilement utilisable par différents groupes comme les utilisateurs de téléphones portables, les personnes ayant un faible débit, etc. En fait, tout le monde peut tirer un bénéfice de ces améliorations.</li>
+ <li>A-t-on mentionné que c'est la loi dans certaines régions ?</li>
+</ul>
+
+<h2 id="Quel_genre_de_handicap_devons_nous_envisager">Quel genre de handicap devons nous envisager ?</h2>
+
+<p>Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — <em>vous n'êtes pas vos utilisateurs</em>. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de <strong>technologies d'assistance</strong>).</p>
+
+<div class="note">
+<p><strong>Note </strong>: L'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs352/fr/">Handicap et santé</a> de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »</p>
+</div>
+
+<h3 id="Les_personnes_ayant_des_troubles_de_la_vue">Les personnes ayant des troubles de la vue</h3>
+
+<p>Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute:</p>
+
+<ul>
+ <li>Certains, comme <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) et <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows), sont payants.</li>
+ <li>D'autres, comme <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows et Mac OS X), et <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux) sont gratuits.</li>
+ <li>Certains sont intégrés au système d'exploitation, comme <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X et iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (sur Chrome OS), et <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
+</ul>
+
+<p>Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guide pour tester les lecteurs d'écrans sur différents navigateurs (en)</a> pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.</p>
+
+<p>{{EmbedYouTube("IK97XMibEws")}}</p>
+
+<p>Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/">Cécité et déficience visuelle</a>). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis.</p>
+
+<h3 id="Les_personnes_ayant_des_troubles_de_laudition">Les personnes ayant des troubles de l'audition</h3>
+
+<p>Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en)</a> ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs.</p>
+
+<p>Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes.</p>
+
+<p>Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs300/fr/">Surdité et déficience auditive</a> de l'Organisation Mondiale de la Santé.</p>
+
+<h3 id="Les_personnes_ayant_des_troubles_de_la_mobilité">Les personnes ayant des troubles de la mobilité</h3>
+
+<p>Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur.</p>
+
+<p>Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.</p>
+
+<p>En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche <kbd>Tab</kbd> ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test d'accessibilité avec le clavier intégré entre différents navigateurs(en)</a>.</p>
+
+<p class="titre-principal">De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble <a href="https://www.insee.fr/fr/statistiques/1372411?sommaire=1372421">L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans</a> de l'INSEE.</p>
+
+<h3 id="Personnes_ayant_des_déficiences_cognitives"><span class="tlid-translation translation"><span title="">Personnes ayant des déficiences cognitives</span></span></h3>
+
+<p><span class="tlid-translation translation"><span title="">La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que</span></span>  <a href="https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah">TDAH-trouble d'hyperactivité avec déficit de l'attention</a>, <a href="https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php">TSA-trouble du spectre de l’autisme</a>,  <span class="tlid-translation translation"><span title="">aux personnes atteintes de</span></span> <a href="http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s">schizophrénie</a>, <span class="tlid-translation translation"><span title="">et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc.</span></span> </p>
+
+<p><span class="tlid-translation translation"><span title="">Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page</span></span>.</p>
+
+<p><span class="tlid-translation translation"><span title="">Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ;</span> l<span title="">a meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">les pages sont cohérentes </span></span>— <span class="tlid-translation translation"><span title="">la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">les outils sont bien conçus et faciles à utiliser</span></span>.</li>
+ <li><span class="tlid-translation translation"><span title="">Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Les workflows sont logiques, simples et nécessitent le moins d’interactions possible.</span> <span title="">Par exemple, l'inscription et la connexion à un site web sont souvent complexes.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">les points importants et le contenu sont mis en évidence.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions</span></span>.</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception.</span> Elle<span title="">s profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">En termes de statistiques, encore une fois, les chiffres sont importants.</span> Le</span>  r<a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">apport 2014 sur le statut d'invalidité </a> <span class="tlid-translation translation"><span title="">(PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive</span></span> .</p>
+
+<div class="note">
+<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">La page</span></span> <a href="https://apprendreaeduquer.fr/fonctions-cognitives/">cognitives</a> <span class="tlid-translation translation"><span title="">de </span></span>apprendreaeduquer<span class="tlid-translation translation"><span title=""> fournit une extension utile de ces idées et mérite certainement d'être lue.</span></span> </p>
+</div>
+
+<h2 id="Implémentation_de_laccessibilité_dans_votre_projet"><span class="tlid-translation translation"><span title="">Implémentation de l'accessibilité dans votre projet</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet.</span> <span title="">Ce mythe peut en réalité être vrai si :</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Vous essayez de "moderniser" l'accessibilité sur un site Web existant qui présente d'importants problèmes d'accessibilité.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Vous avez seulement commencé à prendre en compte l'accessibilité et à découvrir des problèmes liés aux dernières étapes d'un projet.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles).</span> <span title="">Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes</span></span>  <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">alternative text</a>  <span class="tlid-translation translation"><span title="">ou le texte du lien incorrect </span></span>—<span class="tlid-translation translation"><span title=""> voir</span></span> <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), <span class="tlid-translation translation"><span title="">et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment.</span> <span title="">des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ?</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ?</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Les boutons de mon UI sont-ils accessibles via le clavier et les interfaces tactiles ?</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives.</span> <span title="">Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ?</span> <span title="">Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ?</span> <span title="">Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Aussi, soyez réaliste.</span> <span title="">"100% d'accessibilité" est un idéal impossible à obtenir </span></span>— <span class="tlid-translation translation"><span title="">vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser </span></span>— <span class="tlid-translation translation"><span title="">mais vous devez en faire autant que vous le pouvez.</span> <span title="">Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données.</span> <span title="">Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer.</span></span> </p>
+
+<p><span class="tlid-translation translation"><span title="">D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible.</span> <span title="">Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.</span></span></p>
+
+<div class="note">
+<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">Notre article</span></span> <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility"> Gérer les problèmes courants d'accessibilité</a> <span class="tlid-translation translation"><span title="">couvre les spécificités d'accessibilité qui doivent être testées plus en détail.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Résumer</span></span> :</p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Pensez à l'accessibilité dès le début d'un projet et testez tôt et souvent.</span> <span title="">Comme tout autre bogue, un problème d'accessibilité devient d'autant plus coûteux à résoudre qu'il est découvert tard</span></span>.</li>
+ <li><span class="tlid-translation translation"><span title="">N'oubliez pas que de nombreuses pratiques optimales en matière d'accessibilité profitent à tout le monde, pas uniquement aux utilisateurs handicapés.</span> <span title="">Par exemple, le balisage sémantique lean n’est pas seulement bon pour les lecteurs d’écran, il est également rapide à charger et performant, donc meilleur pour tout le monde, en particulier pour les appareils mobiles et/ou les connexions lentes.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Publier une déclaration d'accessibilité sur votre site et interagir avec les personnes ayant des problèmes</span></span>.</li>
+</ul>
+
+<h2 id="Directives_daccessibilité_et_loi"><span class="tlid-translation translation"><span title="">Directives d'accessibilité et loi</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue.</span> <span title="">Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité.</span> <span title="">Celles-ci s'appellent le</span></span> <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> (WCAG),  <span class="tlid-translation translation"><span title="">et ne constituent en aucun cas une lecture brève.</span> <span title="">Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes.</span> <span title="">Le meilleur endroit pour commencer à apprendre et </span></span> <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. <span class="tlid-translation translation"><span title="">Il n'est pas nécessaire d'apprendre le WCAG par cœur </span></span>— <span class="tlid-translation translation"><span title="">soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations).</span></span> </li>
+ <li><span class="tlid-translation translation"><span title="">Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population </span></span>— <span class="tlid-translation translation"><span title="">par exemple</span></span>  <a href="http://www.section508.gov/content/learn">Section 508 of the Rehabilitation Act</a> en US, <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Federal Ordinance on Barrier-Free Information Technology</a> en Germany, la lois sur <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act</a> <span class="tlid-translation translation"><span title="">Royaume-Uni</span></span>, <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a> en Italy, le <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Disability Discrimination Act</a> en Australia, etc.</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée.</span> <span title="">pour savoir quelles sont vos lois.</span> <span title="">Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent</span></span>.</p>
+
+<p><span class="tlid-translation translation"><span title="">Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus.</span> <span title="">En cas de doute, demandez conseil à un avocat qualifié.</span> <span title="">Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.</span></span></p>
+
+<h2 id="API_daccessibilité"><span class="tlid-translation translation"><span title="">API d'accessibilité</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Les navigateurs web utilisent des <strong>API d’accessibilité</strong> spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) </span></span>— <span class="tlid-translation translation"><span title="">les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou</span> <span title="">JavaScript.</span> <span title="">Ces informations sont structurées dans une arborescence d'informations appelée <strong>arborescence d'accessibilité</strong>.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles</span></span> :</p>
+
+<ul>
+ <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
+ <li>Mac OS X: NSAccessibility</li>
+ <li>Linux: AT-SPI</li>
+ <li>Android: Accessibility framework</li>
+ <li>iOS: UIAccessibility</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la</span></span>  <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA specification</a>,  <span class="tlid-translation translation"><span title="">qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité.</span> <span title="">Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p>
+
+<div class="text-wrap tlid-copy-target">
+<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail.</span> <span title="">Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.</span></span></p>
+
+<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>
diff --git a/files/fr/apprendre/accessibilité/index.html b/files/fr/apprendre/accessibilité/index.html
new file mode 100644
index 0000000000..403b3ff2fe
--- /dev/null
+++ b/files/fr/apprendre/accessibilité/index.html
@@ -0,0 +1,94 @@
+---
+title: Qu'est-ce que l'accessibilité ?
+slug: Apprendre/Accessibilité
+tags:
+  - Accessibility
+  - Beginner
+  - Intro
+  - NeedsActiveLearning
+  - Web
+translation_of: Learn/Common_questions/What_is_accessibility
+---
+<div class="summary">
+<p>Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Principes_généraux_de_l'accessibilité">Principes généraux de l'accessibilité</h3>
+
+<p>En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur.</p>
+
+<p>Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, <em>nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité</em>.</p>
+
+<h3 id="L'accessibilité_sur_le_Web">L'accessibilité sur le Web</h3>
+
+<p>Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres.</p>
+
+<p>Prenons l'exemple de la vidéo :</p>
+
+<dl>
+ <dt>Déficience auditive</dt>
+ <dd>Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète.</dd>
+ <dd>Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.</dd>
+ <dt>Déficience visuelle</dt>
+ <dd>Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.</dd>
+ <dt>Mise en pause</dt>
+ <dd>Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information.</dd>
+ <dt>Utilisation du clavier</dt>
+ <dd>Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier.</dd>
+</dl>
+
+<h4 id="Les_bases_de_l'accessibilité_web">Les bases de l'accessibilité web</h4>
+
+<p>Afin qu'un page web soit un minimum accessible, il faut :</p>
+
+<ul>
+ <li>Fournir des alternatives textuelles pour toutes les images du site qui sont utilisées pour porter du sens. Cela permettra aux personnes atteint d'une déficience visuelle d'utiliser un logiciel pour lire cette description ou aux personnes avec des connexions erratiques de récupérer le texte et de l'afficher avant l'image.</li>
+ <li>S'assurer que tous les utilisateurs peuvent manipuler les interfaces graphiques (par exemple les menus déroulants) avec le clavier (par exemple avec la touche tabulation ou la touche Entrée).</li>
+ <li>Fournir un attribut qui définisse le langage utilisé pour le contenu de la page afin qu'un logiciel lecteur d'écran puisse lire le texte correctement.</li>
+ <li>S'assurer que tous les utilisateurs puissent naviguer entre les différents éléments d'une page avec le clavier sans être « piégés » dans un endroit de la page (c'est généralement la touche tabulation qui est utilisée pour ce type d'actions)</li>
+</ul>
+
+<p>Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité.</p>
+
+<h3 id="Les_défendeurs_de_l'accessibilité">Les défendeurs de l'accessibilité</h3>
+
+<p>Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (<em>WAI</em> ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité.</p>
+
+<h2 id="Plus_de_détails">Plus de détails</h2>
+
+<p>Vous pouvez vous référer à :</p>
+
+<ul>
+ <li><a href="https://fr.wikipedia.org/wiki/Accessibilit%C3%A9">L'article Wikipédia</a> sur l'accessibilité</li>
+ <li><a href="http://www.w3.org/WAI/">Le site WAI (le projet W3C's Web Accessibility Initiative) (en anglais)</a></li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique.</p>
+
+<ul>
+ <li>Pour le design, nous vous conseillons de lire <a href="/fr/Apprendre/Concevoir_site_tous_types_utilisateurs">Concevoir un site pour tous les types d'utilisateurs</a>.</li>
+ <li>Pour l'aspect technique, vous pourriez commencer par voir comment <a href="/fr/Apprendre/HTML/Howto/Add_images_to_a_webpage">intégrer des images dans des pages web</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/choisir_installer_paramétrer_un_éditeur_de_texte/index.html b/files/fr/apprendre/choisir_installer_paramétrer_un_éditeur_de_texte/index.html
new file mode 100644
index 0000000000..d2dd87360c
--- /dev/null
+++ b/files/fr/apprendre/choisir_installer_paramétrer_un_éditeur_de_texte/index.html
@@ -0,0 +1,292 @@
+---
+title: 'Choisir, installer et paramétrer un éditeur de texte'
+slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte
+tags:
+  - Beginner
+  - Composing
+  - Guide
+  - NeedsActiveLearning
+  - Tools
+translation_of: Learn/Common_questions/Available_text_editors
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez déjà connaître <a href="/fr/Learn/What_software_do_I_need">les différents logiciels nécessaires pour construire un site web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre comment choisir un éditeur de texte qui répondra à vos besoins en tant que développeur web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.</p>
+
+<p>La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes.</p>
+
+<p>Voici quelques questions qui peuvent vous aider à choisir :</p>
+
+<ul>
+ <li>Quel système d'exploitation (<em>OS</em>) utilisez-vous pour travailler ?</li>
+ <li>Quelles technologies souhaitez-vous manipuler ?</li>
+ <li>Quelles types de fonctionnalités de bases attendez-vous de la part d'un éditeur de texte ?</li>
+ <li>Souhaitez-vous ajoutez des fonctionnalités supplémentaires à votre éditeur de texte ?</li>
+ <li>Souhaitez-vous bénéficier d'aide ou d'un support pour votre éditeur de texte ?</li>
+ <li>Est-ce que le style et l'apparence du logiciel sont importants pour vous ?</li>
+</ul>
+
+<p>Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.</p>
+</div>
+
+<p>Voici un tableau de quelques éditeurs de texte connus :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Éditeur</th>
+   <th scope="col">Licence</th>
+   <th scope="col">Prix</th>
+   <th scope="col">Système d'exploitation</th>
+   <th scope="col">Support</th>
+   <th scope="col">Documentation</th>
+   <th scope="col">Extensible</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://atom.io/">Atom</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://discuss.atom.io/categories">Forum</a></td>
+   <td><a href="https://atom.io/docs/latest/">Manuel en ligne</a></td>
+   <td style="text-align: center;"><a href="https://atom.io/packages">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://brackets.io/">Brackets</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td>
+   <td><a href="https://github.com/adobe/brackets/wiki" rel="external">Wiki GitHub</a></td>
+   <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://panic.com/coda/" rel="external">Coda</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">99 $</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">e-mail</a></td>
+   <td><a href="https://panic.com/coda/#book">eBook</a></td>
+   <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td>
+   <td>GPL 3</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">liste de diffusion (anglophone)</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Manuel en ligne</a> / Tutoriel en français depuis l'éditeur / <a href="http://doc.ubuntu-fr.org/emacs">pages sur Ubuntu-fr</a></td>
+   <td style="text-align: center;">Oui</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">75 $</td>
+   <td>Mac</td>
+   <td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">e-mail</a></td>
+   <td>Pas de documentation utilisateur mais il existe une <a href="http://wiki.macrabbit.com/">documentation pour les extensions (<em>plug-ins</em>)</a></td>
+   <td style="text-align: center;">Oui</td>
+  </tr>
+  <tr>
+   <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td>
+   <td>GPL</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Liste de diffusion (anglophone)</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td>
+   <td><a href="https://help.gnome.org/users/gedit/stable/">Manuel en ligne</a> (en français) / <a href="http://doc.ubuntu-fr.org/gedit">Introduction sur Ubuntu-fr</a></td>
+   <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td>
+   <td>MPL</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td>
+   <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Manuel en ligne</a></td>
+   <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td>
+   <td><a href="https://notepad-plus-plus.org/fr/news/notepad-6.1.1-gpl-enhancement.html">GPL modifiée</a></td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows</td>
+   <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td>
+   <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.pspad.com/fr/">PSPad</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows</td>
+   <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td>
+   <td><a href="http://gogogadgetscott.info/pspad/">Aide en ligne</a></td>
+   <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">$70</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td>
+   <td><a href="http://www.sublimetext.com/docs/3/">Documentation officielle</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> documentation officieuse</a></td>
+   <td style="text-align: center;"><a href="https://sublime.wbond.net/">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://macromates.com/" rel="external">TextMate</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">$50</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">liste de diffusion (anglophone)</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td>
+   <td><a href="http://manual.macromates.com/en/">Manuel en ligne</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Mac</td>
+   <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td>
+   <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">Manuel PDF</a></td>
+   <td style="text-align: center;">Non</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.vim.org/" rel="external">Vim</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Licence ouverte spécifique</a></td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.vim.org/maillist.php#vim" rel="external">Liste de diffusion (anglophone)</a>, <a href="http://tuppervim.org/">tuppervim (communauté francophone)</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/">Manuel en ligne</a>, tutoriel en français disponible depuis l'éditeur, <a href="http://doc.ubuntu-fr.org/vim">introduction sur Ubuntu-fr (en français)</a></td>
+   <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&amp;direction=descending" rel="external">Oui</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/Débuter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Critères_de_choix">Critères de choix</h3>
+
+<p>Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ?</p>
+
+<h4 id="Quel_est_le_système_d'exploitation_que_j'utiliser_pour_travailler">Quel est le système d'exploitation que j'utiliser pour travailler ?</h4>
+
+<p>Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre.</p>
+
+<p>Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles).</p>
+
+<h4 id="Quelles_sont_les_technologies_que_je_serai_amené-e_à_manipuler">Quelles sont les technologies que je serai amené-e à manipuler ?</h4>
+
+<p>De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme :</p>
+
+<ul>
+ <li><strong>La coloration du code.</strong> Cela permet que les fichiers soient plus lisibles grâce à la coloration des mots-clés des langages utilisés.</li>
+ <li><strong>L'auto-complétion.</strong> Cela vous permet de gagner du temps en complétant automatiquement les portions de codes (par exemple en fermant automatiquement les balises HTML, en suggérant des valeurs de propriétés CSS, etc.).</li>
+ <li><strong>Les fragments (<em>snippets</em>) de code. </strong>Vous verrez, lorsque vous utiliserez HTML (ou d'autres technologies), que pour chaque document, certains éléments sont répétés à chaque fois. Le logiciel vous épargnera de nombreux copier-coller en insérant automatiquement le fragment à répéter et vous pourrez vous concentrer sur le contenu « utile » des documents.</li>
+</ul>
+
+<p>La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}.</p>
+
+<h4 id="Quelles_sont_les_fonctionnalités_de_base_dont_j'ai_besoin">Quelles sont les fonctionnalités de base dont j'ai besoin ?</h4>
+
+<p>Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles :</p>
+
+<ul>
+ <li>Chercher et remplacer, dans un ou plusieurs documents à la fois, notamment grâce aux {{Glossary("Expressions rationnelles", "expressions rationnelles")}} ou à d'autres motifs de recherche</li>
+ <li>Aller rapidement à une ligne donnée</li>
+ <li>Pouvoir voir deux parties d'un même document simultanément (utile pour les longs documents)</li>
+ <li>Voir le HTML tel qu'il est rendu dans le navigateur</li>
+ <li>Sélectionner du texte simultanément sur plusieurs zones</li>
+ <li>Voir l'arborescence des répertoires et des fichiers de votre/vos projet(s)</li>
+ <li>Formater automatiquement votre code grâce à l'éditeur</li>
+ <li>Vérifier l'orthographe ou le code</li>
+</ul>
+
+<h4 id="Est-ce_que_je_souhaite_ajouter_des_fonctionnalités_supplémentaires_à_mon_éditeur_de_texte">Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ?</h4>
+
+<p>Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins.</p>
+
+<p>Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (<em>plugins</em>) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur.</p>
+
+<p>Si vous appréciez avoir de <em>nombreuses</em> fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour <em>Integrated Development Environment</em> en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont :</p>
+
+<ul>
+ <li><a href="http://www.aptana.com/">Aptana Studio</a></li>
+ <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li>
+ <li><a href="http://komodoide.com/" rel="external">Komodo</a></li>
+ <li><a href="https://netbeans.org/" rel="external">NetBeans</a></li>
+ <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li>
+ <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li>
+</ul>
+
+<h4 id="Ai-je_besoin_d'aide_ou_d'un_support_pour_utiliser_mon_éditeur_de_texte">Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ?</h4>
+
+<p>Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants :</p>
+
+<ol>
+ <li>Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne)</li>
+ <li>Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC)</li>
+</ol>
+
+<p>N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur.</p>
+
+<h4 id="Est-ce_que_l'apparence_de_mon_éditeur_est_importante">Est-ce que l'apparence de mon éditeur est importante ?</h4>
+
+<p>Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles.</p>
+
+<h3 id="Installation_et_paramétrage">Installation et paramétrage</h3>
+
+<p>L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe :</p>
+
+<ul>
+ <li><strong>Windows :</strong> Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier <code>.exe</code> ou <code>.msi</code>. Il peut arriver que le logiciel soit empaqueté dans un format compressé tel que <code>.zip</code>, <code>.7z</code>, ou <code>.rar</code>. Dans ce cas, vous aurez besoin d'installer un programme supplémentaire pour extraire le contenu de l'archive compressée. Par défaut, Windows gère le format <code>.zip</code>.</li>
+ <li><strong>Mac :</strong> Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier <code>.dmg</code>. Vous pouvez également trouver certains éditeurs sur l'Apple Store, ce qui simplifie le processus d'installation.</li>
+ <li><strong>Linux :</strong> Les distributions les plus populaires vous permettent d'utiliser un gestionnaire de paquets avec une interface graphique (Logithèque Ubuntu, mintInstall, Logithèque GNOME, etc.). Vous trouverez généralement un fichier <code>.deb</code> ou <code>.rpm</code> qui correspond au logiciel empaqueté. Dans la plupart des cas, vous pourrez également le dépôt de paquets de votre distribution. Dans le pire des cas, il vous faudra compiler l'éditeur à partir du code source. Prenez le temps de vérifier les instructions d'installations et les compatibilités sur le site web de l'éditeur.</li>
+</ul>
+
+<p>Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les <em>associations de fichiers</em>. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers :</p>
+
+<ul>
+ <li>Windows
+  <ul>
+   <li><a href="http://windows.microsoft.com/fr-fr/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li>
+   <li><a href="http://windows.microsoft.com/fr-fr/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li>
+  </ul>
+ </li>
+ <li><a href="http://www.youtips.com/fr/mac/changer-lapplication-par-defaut/" rel="external">Mac OS X</a></li>
+ <li>Linux
+  <ul>
+   <li><a href="http://doc.ubuntu-fr.org/changer_l_association_par_defaut_des_fichiers_avec_les_applications" rel="external">Ubuntu Unity</a></li>
+   <li><a href="http://www.generation-linux.fr/index.php?post/2008/02/10/59-associations-de-fichier-dans-gnome" rel="external">GNOME</a></li>
+   <li><a href="https://userbase.kde.org/Dolphin/File_Management/fr#Modifier_une_association_de_fichiers_.C3.A0_la_vol.C3.A9e-">KDE</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser <a href="/fr/Learn/Set_up_a_basic_working_environment">votre environnement de travail</a> ou vous pouvez aussi démarrer tout de suite et écrire <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">votre première page web</a>.</p>
diff --git a/files/fr/apprendre/commencer_avec_le_web/gérer_les_fichiers/index.html b/files/fr/apprendre/commencer_avec_le_web/gérer_les_fichiers/index.html
new file mode 100644
index 0000000000..b2dc72e8de
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/gérer_les_fichiers/index.html
@@ -0,0 +1,113 @@
+---
+title: Gérer les fichiers
+slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers
+tags:
+  - Création site
+  - Débutant
+  - Fichiers
+  - Guide
+  - HTML
+  - Site Web
+  - Theorie
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">téléverser ces fichiers sur un serveur</a>. <em>Gérer les fichiers</em> aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.</p>
+</div>
+
+<h2 id="Où_placer_votre_site_web_sur_votre_ordinateur">Où placer votre site web sur votre ordinateur ?</h2>
+
+<p>Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.</p>
+
+<ol>
+ <li>Sélectionnez un endroit où stocker vos projets de sites web. Là, créez un nouveau dossier appelé <code>projets-web</code> (ou similaire). C'est l'endroit où vivront vos divers projets de sites web.</li>
+ <li>À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler <code>site-test</code> (ou plus imaginatif).</li>
+</ol>
+
+<h2 id="Un_rapide_aparté_sur_la_casse_et_l'espacement">Un rapide aparté sur la casse et l'espacement</h2>
+
+<p>Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison :</p>
+
+<ol>
+ <li>Nombre d'ordinateurs, notamment des serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement <code>site-test/MonImage.jpg</code> et que, dans un autre fichier, vous faites référence à <code>site-test/monimage.jpg</code>, cela peut ne pas fonctionner.</li>
+ <li>Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : <code> mon-fichier.html</code> vs. <code>mon_fichier.html</code>.</li>
+</ol>
+
+<p>La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard.</p>
+
+<h2 id="Quelle_structure_mettre_en_place_pour_votre_site_web">Quelle structure mettre en place pour votre site web ?</h2>
+
+<p>Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code> : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé <code>index.html</code> puis enregistrez‑le dans votre dossier <code>site-test</code>.</li>
+ <li><strong>un dossier<code> images</code></strong> : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé <code>images</code> dans votre dossier <code>site-test</code>.</li>
+ <li><strong>un dossier <code>styles</code> </strong>: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé <code>styles</code> dans votre dossier <code>site-test</code>.</li>
+ <li><strong>un dossier <code>scripts</code></strong> : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé <code>scripts</code> dans votre dossier <code>site-test</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : <strong>Masquer les extensions pour les types de fichiers connus</strong>. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   <strong>Options des dossiers...</strong>, en enlevant la coche de <strong>Masquer les extensions pour les types de fichier connus</strong> puis en cliquant sur <strong>OK</strong>. Pour des informations propres à votre version de Windows, recherchez sur le Web !</p>
+</div>
+
+<h2 id="Les_chemins_de_fichiers">Les chemins de fichiers</h2>
+
+<p>Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans <code>index.html</code> pour que la page affiche l'image choisie dans l'article « <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site web ?</a> ».</p>
+
+<ol>
+ <li>Copiez l'image précédemment choisie dans votre dossier <code>images</code>.</li>
+ <li>Ouvrez le fichier <code>index.html</code> et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Ma page de test&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Mon image de test"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>La ligne qui contient <code>&lt;img src="" alt="Mon image de test"&gt;</code> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier <code>images</code> et ce dossier se situe dans le même dossier qu'<code>index.html</code>. Pour parcourir l'arborescence des fichiers depuis <code>index.html</code> jusqu'à l'image, le chemin à utiliser est <code>images/votre‑fichier‑image</code>. Par exemple, si l'image est nommée <code>firefox‑icon.png</code>, le chemin sera <code>images/firefox-icon.png</code>.</li>
+ <li>Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans <code>src=""</code>.</li>
+ <li>Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Quelques règles générales à propos des chemins de fichier :</p>
+
+<ul>
+ <li>Pour utiliser un fichier qui est dans le même répertoire que le fichier HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple <code>mon-image.jpg</code>).</li>
+ <li>Pour faire référence à un fichier dans un sous‑répertoire, on écrira le nom du répertoire, suivi d'une barre oblique (<em>/</em>) suivi du nom du fichier. Par exemple : <code>mon-sous-repertoire/mon-image.jpg</code>.</li>
+ <li>Pour faire référence à un fichier qui se situe dans le répertoire <strong>parent</strong> par rapport au fichier HTML, il faut écrire deux points (..). Par exemple, si votre fichier <code>index.html</code> se situe dans un sous-dossier de <code>site-test</code> et que <code>mon-image.jpg</code> se situe à l'intérieur de <code>site-test</code>, vous pouvez faire référence à votre image <code>mon-image.jpg</code> depuis <code>index.html</code> en écrivant <code>../mon-image.jpg</code>.</li>
+ <li>Ces différentes règles peuvent être combinées autant que nécessaire : par exemple <code>../sous-dossier/autre-sous-dossier/mon-image.jpg</code>.</li>
+</ul>
+
+<p>Pour le moment, c'est tout ce qu'il y a à savoir.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Le système de fichiers Windows utilise des barres obliques inversées (<em>backslash</em> : « \ ») et non des barres obliques (<em>slash</em> : « / »), par exemple <code>C:\windows</code>. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..</p>
+</div>
+
+<h2 id="Autre_chose">Autre chose ?</h2>
+
+<p>C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;">{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li>
+ <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li>
+ <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencer_avec_le_web/index.html b/files/fr/apprendre/commencer_avec_le_web/index.html
new file mode 100644
index 0000000000..88479469c9
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/index.html
@@ -0,0 +1,62 @@
+---
+title: Commencer avec le Web
+slug: Apprendre/Commencer_avec_le_web
+tags:
+  - CSS
+  - Conception
+  - Débutant
+  - Guide
+  - HTML
+  - Index
+  - Theorie
+  - Web
+  - publication
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Commencer avec le Web</em> est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.</p>
+</div>
+
+<h2 id="L'histoire_de_votre_premier_site_web">L'histoire de votre premier site web</h2>
+
+<p>Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer.</p>
+
+<p>En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y !</p>
+
+<h3 id="Installer_les_outils_de_base"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les outils de base</a></h3>
+
+<p>Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de "frameworks" ou encore d'outils de tests disponibles. Dans <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">cet article</a> nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web.</p>
+
+<h3 id="Quel_sera_l'aspect_de_votre_site"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel sera l'aspect de votre site ?</a></h3>
+
+<p>Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant ? Quelles polices de caractères et quelles couleurs utiliser ? Dans <a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">cet article</a>, nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site.</p>
+
+<h3 id="Gestion_des_fichiers"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gestion des fichiers</a></h3>
+
+<p>Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. Dans <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">cet article</a>, nous détaillerons cette problématique tout en expliquant comment donner une structure cohérente à votre site web.</p>
+
+<h3 id="Les_bases_de_HTML"><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases de HTML</a></h3>
+
+<p>Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a> vous donne assez d'informations pour que vous soyez un familier du HTML.</p>
+
+<h3 id="Les_bases_des_CSS"><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Les bases des CSS</a></h3>
+
+<p>Les <em>Cascading Stylesheets</em> (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">« Les bases des CSS »</a> vous apprendra tout ce dont vous avez besoin pour commencer.</p>
+
+<h3 id="Les_bases_de_JavaScript"><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a></h3>
+
+<p>JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a> vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.</p>
+
+<h3 id="Publier_votre_site_web"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site web</a></h3>
+
+<p>Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. <a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a> décrit comment mettre en ligne votre site web avec un effort minimum.</p>
+
+<h3 id="Le_fonctionnement_du_Web"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></h3>
+
+<p>Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. <a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a> décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Le Web démystifié </a>: une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</p>
diff --git a/files/fr/apprendre/commencer_avec_le_web/installation_outils_de_base/index.html b/files/fr/apprendre/commencer_avec_le_web/installation_outils_de_base/index.html
new file mode 100644
index 0000000000..0a7ad53559
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/installation_outils_de_base/index.html
@@ -0,0 +1,76 @@
+---
+title: Installation des outils de base
+slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base
+tags:
+  - Apprendre
+  - Débutant
+  - Navigateurs
+  - Outils
+  - Setup
+  - Web
+  - Éditeurs de texte
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}<br>
+{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation.</p>
+</div>
+
+<h2 id="Quels_outils_utilisent_les_professionnels">Quels outils utilisent les professionnels ?</h2>
+
+<ul>
+ <li><strong>Un ordinateur</strong>. Ça peut sembler évident, mais certains d'entre vous lisent cet article depuis leur téléphone ou un terminal de bibliothèque. Pour du développement web sérieux, il est préférable d'investir dans un ordinateur de bureau tournant sous Linux, Mac ou Windows.</li>
+ <li><strong>Un éditeur de texte</strong>, pour y écrire du code. Cela peut être un éditeur gratuit (ex : <a href="https://code.visualstudio.com/">Visual Studio Code, </a><a href="https://atom.io/">Atom,</a> <a href="https://www.sublimetext.com/">Sublime Text</a> ou <a href="https://notepad-plus-plus.org/">Notepad++</a>) ou un éditeur hybride (<a href="http://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). <span id="result_box" lang="fr"><span>Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.</span></span></li>
+ <li><strong>Un navigateur web</strong>, pour y tester le code. Les navigateurs les plus utilisés sont <a href="https://www.mozilla.org/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">Internet Explorer et </a> <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> . <span id="result_box" lang="fr"><span>Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).</span></span></li>
+ <li><strong>Un éditeur graphique</strong>, comme <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://krita.org/">Krita</a> ou <a href="http://www.adobe.com/uk/products/photoshop.html">Photoshop</a> pour réaliser les images de vos pages web.</li>
+ <li><strong>Un système de contrôle de versions</strong>, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, <a href="http://git-scm.com/">Git</a> est l'outil lde contrôle de version le plus connu et le service d'hébergement de code <a href="https://github.com">GitHub</a>, fondé sur Git, est également très populaire<strong>.</strong></li>
+ <li><strong>Un programme FTP</strong>, <span id="result_box" lang="fr"><span>utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs</span></span>  (<a href="http://git-scm.com/">Git</a> <span class="short_text" id="result_box" lang="fr"><span>remplace de plus en plus le FTP à cette fin)</span></span>. Il existe une grande quantité de programmes de ce genre comme <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> et <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Un système d'automatisation</strong>, comme <a href="http://gruntjs.com/">Grunt</a> ou <a href="http://gulpjs.com/">Gulp</a>, pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests.</li>
+ <li>Des modèles, bibliothèques, frameworks, etc. pour accélérer le développement de fonctionnalités courantes.</li>
+ <li>Et encore plus d'outils !</li>
+</ul>
+
+<h2 id="De_quels_outils_ai-je_besoin_tout_de_suite">De quels outils ai-je besoin tout de suite ?</h2>
+
+<p>Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes.</p>
+
+<h3 id="Installer_un_éditeur_de_texte">Installer un éditeur de texte</h3>
+
+<p>Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose <a href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29">Notepad</a> et<a href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29"> </a>macOS, <a href="https://fr.wikipedia.org/wiki/TextEdit">TextEdit</a>. Pour les distributions Linux cela varie. Ubuntu propose <a href="https://fr.wikipedia.org/wiki/Gedit">gedit</a> par défaut.</p>
+
+<p>Pour le développement web, <span id="result_box" lang="fr"><span>vous trouverez surement mieux que Notepad ou TextEdit</span></span>. Nous vous recommandons de commencer avec <a href="https://code.visualstudio.com/">Visual Studio Code</a>,  <span id="result_box" lang="fr"><span>qui est un éditeur libre offrant des aperçus en direct et des conseils de code. </span></span></p>
+
+<h3 id="Installer_un_navigateur_moderne">Installer un navigateur moderne</h3>
+
+<p>Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris :</p>
+
+<ul>
+ <li>Linux : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li>
+ <li>Windows : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>,  <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> <span id="result_box" lang="fr"><span>(Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur).</span></span></li>
+ <li>Mac : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari est proposé sur iOS et macOS par défaut).</li>
+</ul>
+
+<p>Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.</p>
+
+<p><strong>Note</strong>: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.</p>
+
+<h3 id="Installer_un_serveur_web_local">Installer un serveur web local</h3>
+
+<p>Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: <a href="/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local">Comment installer en local un serveur de tests ?</a></p>
+
+<p>{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li>
+ <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li>
+ <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencer_avec_le_web/le_fonctionnement_du_web/index.html b/files/fr/apprendre/commencer_avec_le_web/le_fonctionnement_du_web/index.html
new file mode 100644
index 0000000000..bc98c99021
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/le_fonctionnement_du_web/index.html
@@ -0,0 +1,111 @@
+---
+title: Le fonctionnement du Web
+slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web
+tags:
+  - Apprendre
+  - Client
+  - DNS
+  - Débutant
+  - HTTP
+  - IP
+  - Infrastructure
+  - Serveur
+  - TCP
+  - Web
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.</p>
+</div>
+
+<p>Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.</p>
+
+<h2 id="Des_clients_et_des_serveurs">Des clients et des serveurs</h2>
+
+<p>Les ordinateurs qui se connectent au Web sont appelés des <strong>clients </strong>et des <strong>serveurs</strong>. Voici un diagramme simplifié qui illustre comment ils interagissent :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Les clients correspondent aux appareils des utilisateurs connectés sur Internet (par exemple, votre ordinateur connecté par Wi-Fi ou votre téléphone connecté sur le réseau mobile) et aux logiciels d'accès au web (par exemple, les navigateurs comme Firefox ou Chrome).</li>
+ <li>Les serveurs sont des ordinateurs qui stockent des pages web, des sites ou des applications. Lorsqu'un appareil « client » souhaite accéder à une page web, une copie de la page est téléchargée depuis le serveur vers le client, la machine utilisée affiche alors le contenu dans le navigateur web de l'utilisateur.</li>
+</ul>
+
+<h2 id="Les_autres_composants_du_Web">Les autres composants du Web</h2>
+
+<p>Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article.</p>
+
+<p>Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>En plus du client et du serveur, nous devons aussi mentionner :</p>
+
+<ul>
+ <li><strong>la connexion Internet </strong>: elle permet l'envoi et la réception de données sur le web. Dans notre comparaison, elle correspond à la rue entre la maison et le magasin.</li>
+ <li><strong>TCP/IP</strong> : <em><strong>T</strong>ransmission <strong>C</strong>ontrol <strong>P</strong>rotocol / <strong>I</strong>nternet <strong>P</strong>rotocol</em> (en français : protocole de contrôle de transmission et protocole Internet) sont des protocoles définissant comment les données voyagent sur le web. C'est comme les mécanismes de transport qui vous permettent de passer une commande, d'aller au magasin et d'acheter vos marchandises. Dans notre exemple, ce serait une voiture ou un vélo (ou quoi que ce soit d'autre que vous trouveriez).</li>
+ <li><strong>DNS </strong>: <em><strong>D</strong>omain <strong>N</strong>ame <strong>S</strong>ystem</em> (serveur de noms de domaines) est une sorte d'annuaire pour sites web. Lorsque vous saisissez une adresse dans le navigateur, ce dernier consulte le DNS pour trouver l'adresse réelle du site web avant de la récupérer. Le navigateur a besoin de savoir sur quel serveur le site web est situé pour pouvoir envoyer des requêtes HTTP au bon endroit (voir ci-après). Cela correspond à la recherche de l'adresse du magasin pour pouvoir vous y rendre.</li>
+ <li><strong>HTTP</strong> : <em><strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol</em> (protocole de transfert hypertexte) est un {{Glossary("Protocol" , "protocole")}} d'application définissant le language de communication entre les clients et les serveurs. C'est la langue utilisée pour commander vos produits.</li>
+ <li><strong>les fichiers composants </strong>: un site web est constitué de divers fichiers. Ils peuvent être vus comme diverses parties des produits achetés au magasin. Ces fichiers peuvent être rangés dans deux catégories :
+  <ul>
+   <li><strong>les fichiers de code </strong>: les sites web sont constitués essentiellement de HTML, de CSS et de JavaScript (nous découvrirons d'autres technologies plus tard).</li>
+   <li><strong>les ressources :</strong> ce vocable recouvre tous les autres matériaux utilisés pour construire un site web : images, musiques, vidéos, documents Word et PDF.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Donc_que_se_passe-t-il_exactement">Donc que se passe-t-il, exactement ?</h2>
+
+<p>Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) :</p>
+
+<ol>
+ <li>le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).</li>
+ <li>le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.</li>
+ <li>si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).</li>
+ <li>le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).</li>
+</ol>
+
+<h2 id="Des_explications_sur_le_DNS">Des explications sur le DNS</h2>
+
+<p>Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.</p>
+
+<p>Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.</p>
+
+<p>Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir <code>63.245.215.20</code> dans la barre d'adresse d'un nouvel onglet de votre navigateur.</p>
+
+<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Explications_sur_les_paquets">Explications sur les paquets</h2>
+
+<p>Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour décrire le format avec lequel les données étaient envoyées depuis le serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données sont envoyées sur le Web, elles sont envoyées en milliers de petits morceaux afin que de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/Fonctionnement_Internet">Comment Internet fonctionne</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a> (en) <em>(<span class="short_text" id="result_box" lang="fr"><span>HTTP - un protocole de niveau application</span></span>)</em></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a> (en) <em>(<span class="short_text" id="result_box" lang="fr"><span>HTTP: Allons-y !</span></span>)</em></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a> (en) <em>(<span class="short_text" id="result_box" lang="fr"><span>HTTP: Codes de réponse</span></span>)</em></li>
+</ul>
+
+<h2 id="Crédit">Crédit</h2>
+
+<p>Photo de rue : <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, par <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installation des outils de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel sera l'aspect de votre site web ?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Les bases de CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site web</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencer_avec_le_web/les_bases_css/index.html b/files/fr/apprendre/commencer_avec_le_web/les_bases_css/index.html
new file mode 100644
index 0000000000..c547529be9
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/les_bases_css/index.html
@@ -0,0 +1,287 @@
+---
+title: Les bases des CSS
+slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS
+tags:
+  - Apprendre
+  - CSS
+  - Code CSS
+  - Débutant
+  - Styles
+  - Web
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>Les CSS (<em>Cascading Style Sheets</em> en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. <em>Les bases des CSS</em> présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?</p>
+</div>
+
+<h2 id="Donc_que_sont_les_CSS_réellement">Donc, que sont les CSS, réellement ?</h2>
+
+<p>De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un <em>langage de feuille de style</em>, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner <strong>tous</strong> les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom <code>style.css</code> dans votre répertoire <code>styles</code>.</p>
+
+<p>Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur (si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a> et <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a> pour savoir par où commencer).</p>
+
+<ol>
+ <li>Ouvrez votre fichier <code>index.html</code> et copiez la ligne suivante quelque part au sein de l'élément <code>head</code> (c'est-à-dire entre les balises <code>&lt;head&gt;</code> et <code>&lt;/head&gt;</code>) :
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Sauvegardez <code>index.html</code> puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !</p>
+
+<h3 id="Anatomie_d'une_règle_CSS">Anatomie d'une règle CSS</h3>
+
+<p>Regardons un peu plus en détails ce que nous avons écrit en CSS :</p>
+
+<p><img alt="Diagramme expliquant les différents éléments d'une déclaration CSS" src="https://mdn.mozillademos.org/files/11525/CSS.svg" style="display: block; height: 293px; margin: 0px auto; width: 353px;"></p>
+
+<p>Cette structure s'appelle <strong>un ensemble de règles </strong>(ou seulement « une règle »). Les différentes parties se nomment :</p>
+
+<dl>
+ <dt>Sélecteur</dt>
+ <dd>C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments <code>p</code>). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.</dd>
+ <dt>Déclaration</dt>
+ <dd>C'est une règle simple comme <code>color: red;</code> qui détermine les <strong>propriétés</strong><strong> </strong>de l'élément que l'on veut mettre en forme.</dd>
+ <dt>Propriétés</dt>
+ <dd>Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, <code>color</code> est une propriété des éléments <code>p</code>). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.</dd>
+ <dt>Valeur de la propriété</dt>
+ <dd>À droite de la propriété, après les deux points, on a <strong>la valeur de la propriété</strong>. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que <code>red</code> pour la propriété <code>color</code>).</dd>
+</dl>
+
+<p>Les autres éléments importants de la syntaxe sont :</p>
+
+<ul>
+ <li>chaque ensemble de règles, à l'exception du sélecteur, doit être entre accolades (<code>{}</code>).</li>
+ <li>pour chaque déclaration, il faut utiliser deux points (<code>:</code>) pour séparer la propriété de ses valeurs.</li>
+ <li>pour chaque ensemble de règles, il faut utiliser un point-virgule (<code>;</code>) pour séparer les déclarations entre elles.</li>
+</ul>
+
+<p>Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Sélectionner_plusieurs_éléments">Sélectionner plusieurs éléments</h3>
+
+<p>Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :</p>
+
+<pre class="brush: css">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Les_différents_types_de_sélecteurs">Les différents types de sélecteurs</h3>
+
+<p>Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que <strong>les sélecteurs d'élément</strong> qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom du sélecteur</th>
+   <th scope="col">Ce qu'il sélectionne</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)</td>
+   <td>Tous les éléments HTML d'un type donné.</td>
+   <td><code>p</code><br>
+    sélectionne tous les <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Sélecteur d'ID</td>
+   <td>L'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).</td>
+   <td><code>#my-id</code><br>
+    sélectionne <code>&lt;p id="my-id"&gt;</code> ou <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Sélecteur de classe</td>
+   <td>Les éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe).</td>
+   <td><code>.my-class</code><br>
+    sélectionne <code>&lt;p class="my-class"&gt;</code> et <code>&lt;a class="my-class!"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Sélecteur d'attribut</td>
+   <td>Les éléments de la page qui possèdent l'attribut donné.</td>
+   <td><code>img[src]</code><br>
+    sélectionne <code>&lt;img src="monimage.png"&gt;</code> mais pas <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Sélecteur de pseudo-classe</td>
+   <td>Les éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).</td>
+   <td><code>a:hover</code><br>
+    sélectionne <code>&lt;a&gt;</code> mais uniquement quand le pointeur de la souris est au-dessus du lien.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il existe plein d'autres sélecteurs, pour tous les découvrir, vous pouvez lire notre <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs">guide sur les sélecteurs</a>.</p>
+
+<h2 id="Les_polices_(fontes)_et_le_texte">Les polices (fontes) et le texte</h2>
+
+<p>Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier <code>style.css</code> pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.</p>
+
+<ol>
+ <li>Pour commencer, revenez quelques étapes en arrière et récupérez le <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">résultat de Google Fonts</a> enregistré quelque part. Ensuite, ajoutez l'élément <code>&lt;link ... &gt;</code> quelque part au sein de <code>head</code> dans le fichier <code>index.html</code> (c'est-à-dire quelque part entre les balises <code>&lt;head&gt;</code> et <code>&lt;/head&gt;</code>). Ça devrait ressembler à :
+
+  <pre class="brush: html">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Ensuite, supprimez la règle existante dans votre fichier <code>style.css</code>. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme.</li>
+ <li>Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec <code>modèle</code> avec la ligne fournie par Google Fonts qui contient <code>font-family</code> (<code>font-family</code> représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<code>&lt;html&gt;</code> est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même <code>font-size</code> et <code>font-family</code>) :
+  <pre class="brush: css">html {
+  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
+  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: Tout ce qui est entre <code>/*</code> et <code>*/</code> dans un document CSS est un <strong>commentaire</strong>  <strong>de CSS. </strong> Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.</p>
+  </div>
+ </li>
+ <li>Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (<em>body</em>) du document soit plus lisible :
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Vous pouvez ajuster ces valeurs en <code>px</code> comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Boîtes_boîtes_encore_et_toujours_des_boîtes">Boîtes, boîtes, encore et toujours des boîtes</h2>
+
+<p>Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>C'est pour cette raison que l'architecture de CSS est principalement basée sur un <em>modèle de boîtes</em>.<em> </em>Chacun de ces blocs prend un certain espace sur la page, de cette façon :</p>
+
+<ul>
+ <li><code>padding</code>, l'espace autour, proche du contenu (par exemple, l'espace autour du texte d'un paragraphe) (en français, on pourrait traduire cela par du « remplissage » mais le terme <em>padding</em> étant communément utilisé lorsqu'on parle de CSS, on continuera à utiliser ce terme)</li>
+ <li><code>border</code>, la ligne qui est juste autour du <em>padding </em>(en français cela correspond à la bordure)</li>
+ <li><code>margin</code>, l'espace extérieur, autour de l'élément (en français cela correspond à la marge)</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>Dans cette section, nous utilisons aussi :</p>
+
+<ul>
+ <li><code>width</code> (la largeur de l'élément)</li>
+ <li><code>background-color</code>, la couleur derrière le contenu de l'élément et son <em>padding</em></li>
+ <li><code>color</code>, la couleur du contenu de l'élément (généralement du texte)</li>
+ <li><code>text-shadow</code>, affiche une ombre portée sur le texte à l'intérieur de l'élément</li>
+ <li><code>display</code>, définit le mode d'affichage d'un élément (on ne s'occupera pas de cette propriété pour le moment)</li>
+</ul>
+
+<p>Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font.</p>
+
+<h3 id="Changer_la_couleur_de_la_page">Changer la couleur de la page</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Cette règle permet de définir la couleur utilisée en arrière-plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie <a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site#Couleur_du_th%C3%A8me">lors de la conception de votre site</a>.</p>
+
+<h3 id="Mettre_en_forme_le_corps_de_page">Mettre en forme le corps de page</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Occupons-nous de l'élément <code>body</code>. Cet ensemble de règles contient plusieurs déclarations, étudions les, une par une :</p>
+
+<ul>
+ <li><code>width: 600px;</code> — cette déclaration impose une largeur de 600 pixels pour le corps de la page.</li>
+ <li><code>margin: 0 auto;</code> — Ici on a deux valeurs pour la propriété. Lorsqu'on utilise deux valeurs sur une propriété comme <code>margin</code> ou <code>padding</code>, la première valeur est utilisée pour le haut <strong>et</strong> le bas de l'élément (dans ce cas : <code>0</code>) et la seconde valeur est utilisée pour les côtés gauche <strong>et</strong> droit (la valeur <code>auto</code> qu'on utilise ici est une valeur spéciale qui divise l'espace horizontal disponible en parts égales entre la gauche et la droite. Il est aussi possible d'utiliser une, trois ou quatre valeurs, pour plus d'informations, voir <a href="/fr/docs/Web/CSS/margin#Valeurs">cet article</a> qui explique comment cela fonctionne.</li>
+ <li><code>background-color: #FF9500;</code> — comme on l'a vu auparavant, cela permet de définir la couleur utilisée en arrière-plan. Ce code couleur correspond à un rouge orangé qui sera utilisé pour le corps de la page, cela permettra d'avoir un contraste avec le bleu foncé utilisé pour l'élément <code>html</code>. N'hésitez pas à modifier cette valeur pour voir ce que ça donne, vous pouvez utiliser <code>white</code> ou une autre valeur si vous préférez.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — ici on a quatre valeurs pour le <em>padding</em> afin de créer un peu d'espace autour du contenu. On n'a donc aucun espace pour le <em>padding</em> en haut du corps de la page, on a 20 pixels à gauche, en bas et à droite. Dans l'ordre, les valeurs correspondent au haut, à la droite, au bas et à la gauche.</li>
+ <li><code>border: 5px solid black;</code> — cette déclaration permet d'utiliser une bordure pleine, large de 5 pixels pour entourer tout le corps de la page.</li>
+</ul>
+
+<h3 id="Positionner_le_titre_et_le_mettre_en_forme">Positionner le titre et le mettre en forme</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un <strong>style par défaut</strong> à l'élément {{htmlelement("h1")}} (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à <code>margin: 0;</code>.</p>
+
+<p>Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de <code>html</code>.</p>
+
+<p>Une propriété intéressante qu'on a utilisé ici est <code>text-shadow</code>. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs :</p>
+
+<ul>
+ <li>La première correspond au <strong>décalage horizontal</strong>, exprimé en pixels, de l'ombre par rapport au texte. Autrement dit, plus la valeur est élevée, plus l'ombre porte loin. Une valeur négative déplace l'ombre vers la gauche.</li>
+ <li>La deuxième valeur correspond au <strong>décalage vertical</strong> entre l'ombre et le texte. Autrement dit, plus la valeur est élevée, plus l'ombre va vers le bas. Une valeur négative déplace l'ombre vers le haut.</li>
+ <li>La troisième valeur correspond au <strong>rayon de flou</strong> pour l'ombre, exprimé en pixel. Autrement dit, plus la valeur est élevée, plus l'ombre sera floue.</li>
+ <li>La quatrième valeur définit la couleur utilisée pour l'ombre.</li>
+</ul>
+
+<p>Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne.</p>
+
+<h3 id="Centrer_l'image">Centrer l'image</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser <code>margin: 0 auto</code>, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément <code>body</code> est un <strong>élément de bloc</strong>, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments <strong><em>inline</em></strong> (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise <code>display: block;</code> pour que l'image se comporte comme un élément de bloc.</p>
+
+<div class="note">
+<p><strong>Note </strong>: C'est tout à fait normal si vous ne comprenez pas complètement <code>display: block;</code> et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour <code>display</code> sont expliquées sur <a href="/fr/docs/Web/CSS/display">la page de référence de la propriété <code>display</code></a>.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir <a href="http://mdn.github.io/beginner-html-site-styled/">notre version finale ici</a>) :</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Si vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">le code final de cet exemple disponible sur GitHub</a>.</p>
+
+<p>Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page <a href="/fr/Apprendre/CSS">Apprendre CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li>
+ <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li>
+ <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencer_avec_le_web/les_bases_html/index.html b/files/fr/apprendre/commencer_avec_le_web/les_bases_html/index.html
new file mode 100644
index 0000000000..b486e94905
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/les_bases_html/index.html
@@ -0,0 +1,230 @@
+---
+title: Les bases du HTML
+slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
+tags:
+  - Apprendre
+  - Bases HTML
+  - Code HTML
+  - Débutant
+  - HTML
+  - Site Web
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p><strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.</p>
+</div>
+
+<h2 id="Qu'est-ce_que_HTML_réellement">Qu'est-ce que HTML, réellement ?</h2>
+
+<p>HTML n'est pas un langage de programmation. C'est un <em>langage de balises</em> qui définit la structure de votre contenu. HTML se compose d'une série d'<strong>{{Glossary("element", "éléments")}}</strong>, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :</p>
+
+<pre>Mon chat est très grincheux</pre>
+
+<p>Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe :</p>
+
+<pre class="brush: html">&lt;p&gt;Mon chat est très grincheux&lt;/p&gt;</pre>
+
+<h3 id="Anatomie_d'un_élément_HTML">Anatomie d'un élément HTML</h3>
+
+<p>Regardons de plus près cet élément paragraphe :</p>
+
+<p><img alt="Diagramme décrivant la structure d'un élément HTML" src="https://mdn.mozillademos.org/files/14739/chat-grincheuxl.png" style="display: block; height: 213px; margin: 0px auto; width: 422px;"></p>
+
+<p>Les composants principaux de notre élément sont :</p>
+
+<ol>
+ <li><strong>La balise ouvrante :</strong> celle-ci se compose du nom de l'élément (ici « p »), entre deux <strong>chevrons</strong>. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.</li>
+ <li><strong>La balise fermante :</strong> ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats.</li>
+ <li><strong>Le contenu :</strong> C'est le contenu de l'élément. Ici, c'est simplement du texte.</li>
+ <li><strong>L'élément :</strong> Il est composé de la balise ouvrante, de la balise fermante et du contenu.</li>
+</ol>
+
+<p>Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :</p>
+
+<p><img alt="Diagramme explicitant un attribut" src="https://mdn.mozillademos.org/files/14741/attribut-chat-grincheux.png" style="display: block; height: 103px; margin: 0px auto; width: 515px;"></p>
+
+<p>Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut <code>class</code> permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.</p>
+
+<p>Un attribut doit toujours avoir :</p>
+
+<ol>
+ <li>Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ;</li>
+ <li>Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;</li>
+ <li>Des guillemets anglais (") pour encadrer la valeur de l'attribut.</li>
+</ol>
+
+<h3 id="Imbriquer_des_éléments">Imbriquer des éléments</h3>
+
+<p>Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'<strong>imbrication</strong>. Par exemple, si vous souhaitez montrer que votre chat est <strong>très</strong> grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :</p>
+
+<pre class="example-good brush: html">&lt;p&gt;Mon chat est &lt;strong&gt;très&lt;/strong&gt; grincheux.&lt;/p&gt;</pre>
+
+<p>Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;Mon chat est &lt;strong&gt;très grincheux.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !</p>
+
+<h3 id="Les_éléments_vides">Les éléments vides</h3>
+
+<p>Certains éléments n'ont pas de contenu. Ces éléments sont appelés <strong>éléments vides</strong>. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML :</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="Mon image test" /&gt;</pre>
+
+<p>Cet élément contient deux attributs mais les balises ouvrante <code>&lt;img&gt;</code> et fermante <code>&lt;/img&gt;</code> sont remplacées par une balise auto-fermante <code>&lt;img /&gt;</code> et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé.</p>
+
+<h3 id="Anatomie_d'un_document_HTML">Anatomie d'un document HTML</h3>
+
+<p>Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l'exemple contenu dans le fichier <code>index.html</code> (qu'on a créé dans l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a>) :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Ma page de test&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="Mon image de test"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Cet exemple contient :</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — le <em>doctype</em>. Au début de HTML, dans les années 1991-1992, les <em>doctypes</em> étaient utilisés pour faire référence à des ensembles de règles qu'on pouvait utiliser pour dire qu'un document était du HTML « valide » et détecter les erreurs de balisage. Cependant, ceux-ci ne sont plus utilisés aujourd'hui et sont juste présents pour s'assurer que la page puisse fonctionner y compris sur les anciens navigateurs. Pour le moment, c'est tout ce qu'il y a à savoir à propos des <em>doctypes</em>.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — l'élément <code>&lt;html&gt;</code>. Cet élément encadre tout le contenu de la page. Cet élément est parfois appelé l'élément racine.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — l'élément <code>&lt;head&gt;</code>. Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans cet élément qu'on mettra des {{Glossary("keyword", "mots-clés")}}, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères à utiliser et ainsi de suite.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — l'élément {{htmlelement("body")}}. Cet élément est celui qui contient <em>tout</em> le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains. Généralement, utf-8 permet de gérer n'importe quel texte que vous pourriez utiliser sur la page. Il n'y a pas de raison de ne pas le définir, et il permet d'éviter certains problèmes plus tard.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages.</li>
+</ul>
+
+<h2 id="Images">Images</h2>
+
+<p>Regardons à nouveau l'élément image :</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="Mon image de test"&gt;</pre>
+
+<p>Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut <code>src</code> (pour source) qui contient le chemin vers le fichier de l'image.</p>
+
+<p>Nous avons aussi utilisé l'attribut <code>alt</code> (pour <strong>alt</strong>ernatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :</p>
+
+<ol>
+ <li>ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;</li>
+ <li>quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut <code>src</code> et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :</li>
+</ol>
+
+<p><img alt="Mon image de test" src="https://mdn.mozillademos.org/files/9349/" style="display: block; height: 39px; margin: 1px auto; width: 207px;"></p>
+
+<p>Le point important qu'il faut retenir est que l'attribut est utilisé pour <strong>décrire</strong> l'image. Le texte contenu dans cet attribut doit fournir suffisamment d'informations pour que le lecteur puisse savoir ce que l'image représente. Par exemple, le texte que j'utilise « Mon image de test » n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo Firefox, qui représente un renard de feu entourant la Terre ».</p>
+
+<p>Essayez d'améliorer le texte alternatif pour l'image maintenant.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Pour plus d'informations sur l'accessibilité, vous trouverez la section <a href="/fr/docs/Accessibilité">Accessibilité de MDN</a>.</p>
+</div>
+
+<h2 id="Baliser_le_texte">Baliser le texte</h2>
+
+<p>Dans cette section, nous verrons quelques-uns des éléments HTML de base pour baliser le texte.</p>
+
+<h3 id="Les_titres">Les titres</h3>
+
+<p>Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : {{htmlelement("h1")}}–{{htmlelement("h6")}}. La plupart du temps, 3-4 niveaux suffisent amplement :</p>
+
+<pre class="brush: html">&lt;h1&gt;Mon titre principal&lt;/h1&gt;
+&lt;h2&gt;Mon titre de section&lt;/h2&gt;
+&lt;h3&gt;Mon sous-titre&lt;/h3&gt;
+&lt;h4&gt;Mon sous-sous-titre&lt;/h4&gt;</pre>
+
+<p>Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments. Vous pouvez le placer au-dessus de l'élément {{htmlelement("img")}} dans votre document HTML.</p>
+
+<h3 id="Les_paragraphes">Les paragraphes</h3>
+
+<p>Comme expliqué auparavant, les éléments {{htmlelement("p")}} sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page :</p>
+
+<pre class="brush: html">&lt;p&gt;Voici un paragraphe&lt;/p&gt;</pre>
+
+<p>Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous avez décidé <a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site"><em>à quoi ressemblera votre site web</em></a>. Vous pouvez placer votre texte dans un ou plusieurs paragraphes, directement sous l'élément &lt;img&gt;.</p>
+
+<h3 id="Les_listes">Les listes</h3>
+
+<p>Une grande partie du contenu sur le Web est présente sous forme de listes. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :</p>
+
+<ol>
+ <li><strong>Les listes non-ordonnées</strong> sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance (par exemple une liste d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (<strong>ul</strong> signifie <em><strong>u</strong>nordered <strong>l</strong>ist</em> liste non-ordonnée en anglais)</li>
+ <li><strong>Les listes ordonnées</strong> sont des listes pour lesquelles l'ordre des éléments est important (par exemple une recette). La balise utilisée pour ces listes est l'élément {{htmlelement("ol")}} (<strong>ol</strong> signifie <em><strong>o</strong>rdered <strong>l</strong>ist</em> liste ordonnée en anglais)</li>
+</ol>
+
+<p>Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (<strong>l</strong>ist <strong>i</strong>tem).</p>
+
+<p>Par exemple, si on souhaite modifier un paragraphe en une liste :</p>
+
+<pre class="brush: html">&lt;p&gt;Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... &lt;/p&gt;</pre>
+
+<p>On pourrait faire :</p>
+
+<pre class="brush: html">&lt;p&gt;Mozilla est une communauté mondiale composée de &lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologues&lt;/li&gt;
+  &lt;li&gt;chercheurs&lt;/li&gt;
+  &lt;li&gt;bâtisseurs&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;travaillant ensemble...&lt;/p&gt;</pre>
+
+<p><strong>Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page. Vous pouvez l'ajouter après l'image.</strong></p>
+
+<h2 id="Les_liens">Les liens</h2>
+
+<p>Les liens sont très importants, ce sont eux qui font que le web est une <strong><em>toile</em></strong> sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d'utiliser l'élément {{htmlelement("a")}} (le <em>a</em> est un raccourci pour « <strong>a</strong>ncre »). Pour transformer du texte en un lien, suivez ces étapes :</p>
+
+<ol>
+ <li>Choisissez un texte (ici, nous travaillerons avec le texte « Manifeste Mozilla ».</li>
+ <li>Encadrez le texte dans un élément &lt;a&gt; :
+  <pre class="brush: html">&lt;a&gt;Manifeste Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Fournissez un attribut <code>href</code> pour l'élément &lt;a&gt;, de cette façon :
+  <pre class="brush: html">&lt;a href=""&gt;Manifeste Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez diriger les utilisateurs :
+  <pre class="brush: html">&lt;a href="https://www.mozilla.org/fr/about/manifesto/"&gt;Manifeste Mozilla&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Attention à ne pas oublier la partie avec <code>https://</code> ou <code>http://</code> qui représente le <em>protocole</em> utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.</p>
+
+<div class="note">
+<p><code>href</code> peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> en anglais, ce qui signifie « référence hypertexte » en français.</p>
+</div>
+
+<p>Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également <a href="http://mdn.github.io/beginner-html-site/">la voir ici</a>) :<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">l'exemple fini disponible sur GitHub</a>.</p>
+
+<p>Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page <a href="/fr/Apprendre/HTML">Apprendre HTML</a>.</p>
+
+<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li>
+ <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li>
+ <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencer_avec_le_web/les_bases_javascript/index.html b/files/fr/apprendre/commencer_avec_le_web/les_bases_javascript/index.html
new file mode 100644
index 0000000000..05d0540779
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/les_bases_javascript/index.html
@@ -0,0 +1,412 @@
+---
+title: Les bases de JavaScript
+slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript
+tags:
+  - Apprendre
+  - Code JavaScript
+  - Débutant
+  - JavaScript
+  - Web
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.</p>
+</div>
+
+<h2 id="Qu'est_le_JavaScript_réellement">Qu'est le JavaScript, réellement ?</h2>
+
+<p>{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.</p>
+
+<p>JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !</p>
+
+<p>JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :</p>
+
+<ul>
+ <li>des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio.</li>
+ <li>des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook.</li>
+ <li>des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications.</li>
+</ul>
+
+<p>Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre <a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript">centre d'apprentissage JavaScript</a>, et le reste du MDN.</p>
+
+<p>Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !</p>
+
+<h2 id="Un_exemple_«_hello_world_»">Un exemple « hello world »</h2>
+
+<p>Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.</p>
+
+<p>Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (<a href="https://fr.wikipedia.org/wiki/Hello_world">la norme en matière d'exemples de programmation de base</a>).</p>
+
+<div class="warning">
+<p><strong>Important </strong>: Si vous rejoignez cette série d'articles en cours de route, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">téléchargez cet exemple de code</a> et utilisez‑le comme point de départ.</p>
+</div>
+
+<ol>
+ <li>Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier <code>scripts</code> que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.</li>
+ <li>Ensuite, dans votre fichier <code>index.html</code>, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante <code>&lt;/body&gt;</code> :
+  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).</li>
+ <li>Maintenant ajoutez le code suivant dans <code>main.js</code> :
+  <pre class="brush: js">let myHeading = document.querySelector('h1');
+myHeading.textContent = 'Bonjour, monde !';</pre>
+ </li>
+ <li>Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez <code>index.html</code> dans votre navigateur. Vous devriez obtenir quelque chose comme :<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.</p>
+</div>
+
+<h3 id="Que_s'est-il_passé">Que s'est-il passé ?</h3>
+
+<p>Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée <code>myHeading</code>. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.</p>
+
+<p>Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable <code>myHeading</code> (elle représente le contenu du titre).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.</p>
+</div>
+
+<h2 id="Les_bases_du_JavaScript_en_accéléré">Les bases du JavaScript en accéléré</h2>
+
+<p>Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !</p>
+
+<div class="warning">
+<p><strong>Important </strong>: Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire <a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">Découvrir les outils de développement présents dans le navigateur</a>.</p>
+</div>
+
+<h3 id="Variables">Variables</h3>
+
+<p>Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé <code>let</code> en le faisant suivre de son nom :</p>
+
+<pre class="brush: js">let myVariable;</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Guide des points‑virgule en JavaScript</a> pour plus de détails.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">cet article</a> sur les règles de nommage des variables). Si vous avez un doute, vous pouvez <a href="https://mothereff.in/js-variables">vérifier le nom de votre variable</a> pour voir s'il est valide.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : JavaScript est sensible à la casse — <code>myVariable</code> est une variable différente de <code>myvariable</code>. Si vous avez des problèmes dans votre code, vérifiez la casse  !</p>
+</div>
+
+<p>Une fois une variable déclarée, vous pouvez lui donner une valeur :</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :</p>
+
+<pre class="brush: js">let myVariable = 'Bob';</pre>
+
+<p>Vous retrouvez la valeur en appelant simplement la variable par son nom :</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :</p>
+
+<pre class="brush: js">let myVariable = 'Bob';
+myVariable = 'Étienne';</pre>
+
+<p>Notez que les variables peuvent contenir des<a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives"> types différents de données</a> :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variable</th>
+   <th scope="col">Explication</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String", "Chaîne de caractères")}}</th>
+   <td>Une suite de caractères connue sous le nom de chaîne. Pour indiquer que la valeur est une chaîne, il faut la placer entre guillemets.</td>
+   <td><code>let myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary( "Number" ,"Nombre")}}</th>
+   <td>Un nombre. Les nombres ne sont pas entre guillemets.</td>
+   <td><code>let myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary( "Boolean" ,"Booléen")}}</th>
+   <td>Une valeur qui signifie vrai ou faux. <code>true</code>/<code>false</code> sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets.</td>
+   <td><code>let myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary( "Array" ,"Tableau")}}</th>
+   <td>Une structure qui permet de stocker plusieurs valeurs dans une seule variable.</td>
+   <td>
+    <p><code>let myVariable = [1,'Bob','Étienne',10];</code><br>
+     Référez‑vous à chaque élément du tableau ainsi <code>: myVariable[0]</code>, <code>myVariable[1]</code>, etc.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary( "Object" ,"Objet")}}</th>
+   <td>À la base de toute chose. Tout est un objet en JavaScript et peut être stocké dans une variable. Gardez cela en mémoire tout au long de ce cours.</td>
+   <td><code>let myVariable = document.querySelector('h1'); </code>tous les exemples au dessus sont aussi des objets.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.</p>
+
+<h3 id="Commentaires">Commentaires</h3>
+
+<p>Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :</p>
+
+<pre class="brush: js">/*
+Tout ce qui est écrit ici est entre commentaires.
+*/</pre>
+
+<p>Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :</p>
+
+<pre class="brush: js" style="font-size: 14px;">// Voici un commentaire</pre>
+
+<h3 id="Opérateurs">Opérateurs</h3>
+
+<p>Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Opérateur</th>
+   <th scope="col">Explication</th>
+   <th scope="col">Symbole(s)</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Addition</th>
+   <td>Utilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Bonjour " + "monde !";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Soustraction, multiplication, division</th>
+   <td>Les opérations mathématiques de base.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // pour multiplier, on utilise un astérisque<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Assignation</th>
+   <td>On a déjà vu cet opérateur : il affecte une valeur à une variable.</td>
+   <td><code>=</code></td>
+   <td><code>let myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Égalité</th>
+   <td>Teste si deux valeurs sont égales et renvoie un booléen <code>true</code>/<code>false</code> comme résultat.</td>
+   <td><code>===</code></td>
+   <td><code>let myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Négation , N'égale pas</th>
+   <td>
+    <p>Renvoie la valeur logique opposée à ce qu'il précède ; il change <code>true</code> en <code>false</code>, etc. Utilisé avec l'opérateur d'égalité, l'opérateur de négation teste que deux valeurs <em>ne sont pas</em> égales.</p>
+   </td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>L'expression de base est vraie, mais la comparaison renvoie <code>false</code> parce que nous la nions :</p>
+
+    <p><code>let myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>On teste ici que "<code>myVariable</code> n'est PAS égale à 3". Cela renvoie <code>false</code>, car elle est égale à 3.</p>
+
+    <p><code><code>let myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs">Expressions et opérateurs</a> pour la liste complète.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez <code>"35" + "25"</code> dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez <code>35 + 25</code>, vous obtiendrez le bon résultat.</p>
+</div>
+
+<h3 id="Structures_conditionnelles">Structures conditionnelles</h3>
+
+<p>Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est <code>if ... else</code>. Par exemple :</p>
+
+<pre class="brush: js">let iceCream = 'chocolat';
+if (iceCream === 'chocolat') {
+  alert("J'adore la glace au chocolat !");
+} else {
+  alert("Ooooh, mais j'aurais préféré au chocolat.");
+}</pre>
+
+<p>L'expression contenue dans <code>if ( ... )</code> correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">iceCream</span></font> avec la chaîne de caractères <code>chocolat</code> pour voir si elles sont égales. Si cette comparaison renvoie <code>true</code>, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  <code>else</code>, qui est exécuté.</p>
+
+<h3 id="Fonctions">Fonctions</h3>
+
+<p>Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">let myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('Bonjour !');</pre>
+ </li>
+</ol>
+
+<p>Ces fonctions (<code>querySelector</code> et <code>alert</code>) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble.</p>
+
+<p>Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — <code>()</code> —, c'est probablement une fonction. Les fonctions prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.</p>
+
+<p>Par exemple, la fonction <code>alert()</code> fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.</p>
+
+<p>La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :</p>
+
+<pre class="brush: js">multiply(4, 7);
+multiply(20, 20);
+multiply(0.5, 3);</pre>
+
+<div class="note">
+<p><strong>Note</strong> : L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/return"><code>return</code></a> indique au navigateur qu'il faut renvoyer la variable <code>result</code> en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables">cet article</a>).</p>
+</div>
+
+<h3 id="Événements">Événements</h3>
+
+<p>Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est <a href="/fr/docs/Web/Events/click">l'événement cliquer</a>, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :</p>
+
+<pre class="brush: js">document.querySelector('html').addEventListener('click', function() {
+    alert('Aïe, arrêtez de cliquer !!');
+});</pre>
+
+<p>Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique.</p>
+
+<p>On pourra noter que :</p>
+
+<pre class="brush: js">document.querySelector('html').addEventListener('click', function() {});</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush: js">let myHTML = document.querySelector('html');
+myHTML.addEventListener('click', function() {});</pre>
+
+<p>La première syntaxe est simplement plus courte.</p>
+
+<h2 id="Booster_notre_site_web">Booster notre site web</h2>
+
+<p>Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire.</p>
+
+<h3 id="Ajouter_un_changeur_d'image">Ajouter un changeur d'image</h3>
+
+<p>Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.</p>
+
+<ol>
+ <li>Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.</li>
+ <li>Enregistrez cette image dans votre dossier <code>images</code>.</li>
+ <li>Renommez cette image « firefox2.png » (sans les guillemets).</li>
+ <li>Dans le fichier <code>main.js</code>, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) :
+  <pre class="brush: js">let myImage = document.querySelector('img');
+
+myImage.addEventListener('click', function() {
+    let mySrc = myImage.getAttribute('src');
+    if (mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute('src', 'images/firefox2.png');
+    } else {
+      myImage.setAttribute('src', 'images/firefox-icon.png');
+    }
+});</pre>
+ </li>
+ <li>Sauvegardez tous les fichiers puis chargez <code>index.html</code> dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !</li>
+</ol>
+
+<p>Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable <code>myImage</code>. Ensuite, nous égalons la propriété du gestionnaire d'événement <code>onclick </code>de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :</p>
+
+<ol>
+ <li>nous récupèrons la valeur de l'attribut <code>src</code> de l'image.</li>
+ <li>nous utilisons une structure conditionnelle pour voir si la valeur de <code>src</code> est égale au chemin de l'image originale :
+  <ol>
+   <li>si c'est le cas, nous changeons la valeur de <code>src</code> et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.</li>
+   <li>si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de <code>src</code> revient à sa valeur initiale.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Ajouter_un_message_d'accueil_personnalisé">Ajouter un message d'accueil personnalisé</h3>
+
+<p>Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.</p>
+
+<ol>
+ <li>Dans le fichier <code>index.html</code>, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} :
+
+  <pre class="brush: html">&lt;button&gt;Changer d'utilisateur&lt;/button&gt;</pre>
+ </li>
+ <li>Dans le fichier <code>main.js</code>, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables :
+  <pre class="brush: js">let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) :
+  <pre class="brush: js">function setUserName() {
+  let myName = prompt('Veuillez saisir votre nom.');
+  localStorage.setItem('nom', myName);
+  myHeading.textContent = 'Mozilla est cool, ' + myName;
+}</pre>
+  Cette fonction utilise la fonction <a href="/fr/docs/Web/API/Window/prompt"><code>prompt()</code></a> qui affiche une boîte de dialogue, un peu comme <code>alert()</code> sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur <strong>OK</strong><em>.</em> Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée <code>localStorage</code>. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction <code>setItem()</code> de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé <code>'nom'</code>. La valeur stockée ici est la valeur de la variable <code>myName</code> qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété <code>textContent</code> du titre pour lui affecter un nouveau contenu.</li>
+ <li>Ajoutons ensuite ce bloc <code>if ... else</code>. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur :
+  <pre class="brush: js">if (!localStorage.getItem('nom')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('nom');
+  myHeading.textContent = 'Mozilla est cool, ' + storedName;
+}</pre>
+  Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée <code>nom</code>. Si non, la fonction <code>setUserName()</code> est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode <code>getItem()</code> et on définit le contenu de <code>textContent</code> pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans  <code>setUserName().</code></li>
+ <li>Enfin, on associe le gestionnaire <code>onclick</code> au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction <code>setUserName()</code>. Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite:
+  <pre class="brush: js">myButton.addEventListener('click', function() {
+  setUserName();
+});
+</pre>
+ </li>
+</ol>
+
+<p>Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API <code>localStorage</code>, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi <a href="https://mdn.github.io/beginner-html-site-scripted/">voir la version que nous avons obtenue ici</a>) :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">ceux disponibles sur GitHub qui correspondent à notre modèle finalisé</a>.</p>
+
+<p>Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser <a href="/fr/docs/Web/JavaScript/Guide">notre Guide JavaScript</a>.</p>
+
+<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li>
+ <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li>
+ <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencer_avec_le_web/publier_votre_site_web/index.html b/files/fr/apprendre/commencer_avec_le_web/publier_votre_site_web/index.html
new file mode 100644
index 0000000000..c4997f9cdf
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/publier_votre_site_web/index.html
@@ -0,0 +1,128 @@
+---
+title: Publier votre site web
+slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web
+tags:
+  - Apprentissage
+  - Codage
+  - Débutant
+  - FTP
+  - GitHub
+  - Google App Engine
+  - Learn
+  - Web
+  - publier
+  - serveur web
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.</p>
+</div>
+
+<h2 id="Quelles_sont_les_options">Quelles sont les options ?</h2>
+
+<p>La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant,  puis nous vous présenterons une méthode actuellement fonctionnelle.</p>
+
+<h3 id="Trouver_un_hébergement_et_un_nom_de_domaine">Trouver un hébergement et un nom de domaine</h3>
+
+<p>Si vous voulez un contrôle total sur la publication de votre site web, alors vous aurez probablement besoin de dépenser de l'argent pour acheter :</p>
+
+<ul>
+ <li>un hébergement — espace pour fichiers loué sur un <a href="/fr/Learn/What_is_a_web_server">serveur web</a> d'une société d'hébergement. Vous mettez les fichiers de votre site web dans cet espace et le serveur web en fournit le contenu aux utilisateurs qui le demandent.</li>
+ <li>un <a href="/fr/Learn/Understanding_domain_names">nom de domaine</a> — l'adresse unique où les visiteurs peuvent trouver votre site web, comme <code>https://www.mozilla.org</code> ou http://<code>www.bbc.co.uk</code>. Vous louez votre nom de domaine à un<strong> bureau d'enregistrement de domaines</strong>.</li>
+</ul>
+
+<p>De nombreux sites professionnels sont mis en ligne de cette façon.</p>
+
+<p>En plus, vous aurez besoin d'un programme {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (voir <a href="/en-US/Learn/How_much_does_it_cost#Software">Combien ça coûte : les logiciels</a> pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Suggestions_pour_trouver_hébergement_et_domaines">Suggestions pour trouver hébergement et domaines</h4>
+
+<ul>
+ <li>Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré.</li>
+ <li>Votre {{Glossary("ISP", "Fournisseur d'Accès Internet")}} (FAI) fournit peut-être un hébergement limité pour un petit site web. Le jeu des fonctionnalités disponibles sera restreint, mais parfait pour vos premières expérimentations — contactez‑les et demandez !</li>
+ <li>Il existe quelques services gratuits tels que <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a> et <a href="https://wordpress.com/">Wordpress</a>. À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web.</li>
+ <li>Parfois, des sociétés fournissent hébergement et domaine dans un même paquet.</li>
+</ul>
+
+<h3 id="Utiliser_un_outil_en_ligne_comme_GitHub_ou_Google_App_Engine">Utiliser un outil en ligne comme GitHub ou Google App Engine</h3>
+
+<p>Certains outils vous permettent de publier votre site web en ligne :</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le <strong>système de gestion de versions</strong> <a href="http://git-scm.com/">Git</a><strong>. </strong>Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée <a href="https://pages.github.com/">pages GitHub</a>, qui vous permet de présenter du code de site web en direct sur le web.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> pour plus d'information.</li>
+</ul>
+
+<p>À la différence de la plupart des hébergements, ces outils sont d'utilisation gratuite, mais vous n'avez accès qu'à un ensemble limité de fonctionnalités.</p>
+
+<h3 id="Utiliser_un_EDI_web_tel_que_Thimble">Utiliser un EDI web tel que Thimble</h3>
+
+<p>Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web —  le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).</p>
+
+<p>Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org/">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JSBin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publier_via_GitHub">Publier via GitHub</h2>
+
+<p>Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.</p>
+
+<ol>
+ <li>Pour commencer, <a href="https://github.com/join">inscrivez-vous sur GitHub</a> et vérifiez votre adresse e-mail.</li>
+ <li>Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.</li>
+ <li>Sur cette page, dans le champ <em>Repository name</em>, entrez <em>username</em>.github.io : <em>username</em> est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera <em>bobsmith.github.io</em>.<br>
+  Également, cochez <em>Initialize this repository with a README</em>, puis cliquez sur <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur <em>Commit changes</em>.
+  <div class="note">
+  <p><strong>Note :</strong> Assurez-vous que votre dossier comporte bien un fichier <em>index.html.</em></p>
+  </div>
+ </li>
+ <li>Maintenant, naviguez jusqu'à <em>username</em>.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur <em> chrisdavidmills</em>, allez à  <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.
+  <div class="note">
+  <p><strong>Note :</strong> Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.</p>
+  </div>
+ </li>
+</ol>
+
+<p>Pour en savoir plus, voyez <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Lectures_pour_approfondir">Lectures pour approfondir</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web</a></li>
+ <li><a href="/fr/docs/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li>
+ <li><a href="/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte">Combien ça coûte de faire quelque chose sur le Web ?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website </a>: un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Hébergement de sites web statiques gratuit ou peu cher</a>, un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}</p>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installation des outils de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel sera l'aspect de votre site web ?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Les bases de CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site web</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li>
+</ul>
+</div>
+</article>
diff --git a/files/fr/apprendre/commencer_avec_le_web/quel_aspect_pour_votre_site/index.html b/files/fr/apprendre/commencer_avec_le_web/quel_aspect_pour_votre_site/index.html
new file mode 100644
index 0000000000..8fbe02c8ab
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/quel_aspect_pour_votre_site/index.html
@@ -0,0 +1,110 @@
+---
+title: Quel sera l'aspect de votre site web ?
+slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
+tags:
+  - Apprendre
+  - Composition
+  - Conception
+  - Débutant
+  - Planification
+  - Polices de caractères
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p><em>Quel sera l'aspect de votre site web ?</em> parle de planifier et concevoir (<em>design</em>), travaux à faire <em>avant</em> d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».</p>
+</div>
+
+<h2 id="Commençons_par_le_commencement_planification">Commençons par le commencement : planification</h2>
+
+<p>Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes.</p>
+
+<p>Pour commencer, posez-vous ces questions :</p>
+
+<ol>
+ <li><strong>De quoi va parler mon site web ? <span class="rangySelectionBoundary" id="selectionBoundary_1425749353675_3651330400869959" style="display: none; line-height: 0;"></span></strong>Aimez-vous les chiens, New York ou Pacman ?<span class="rangySelectionBoundary" id="selectionBoundary_1425749353674_43453967859601583" style="display: none; line-height: 0;"></span></li>
+ <li><strong>Quelles informations vais-je présenter sur le sujet ? </strong>Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.</li>
+ <li><strong>Quelle sera l'apparence de mon site web, </strong>en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans <a href="https://www.mozilla.org/fr/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p>
+</div>
+
+<h2 id="Esquisse_de_votre_concept">Esquisse de votre concept</h2>
+
+<p>Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Note</strong> : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.</p>
+
+<p>Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.</p>
+</div>
+
+<h2 id="Choix_de_vos_ressources">Choix de vos ressources</h2>
+
+<p>À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.</p>
+
+<h3 id="Texte">Texte</h3>
+
+<p>Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez songé un peu plus tôt. Gardez-les à proximité.</p>
+
+<h3 id="Couleur_du_thème">Couleur du thème</h3>
+
+<p>Pour choisir une couleur, utilisez une <a href="http://www.code-couleur.com/index.html">palette de couleurs</a> e<span class="rangySelectionBoundary" id="selectionBoundary_1425762098497_6429490650551564" style="display: none; line-height: 0;"></span>t trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme <code>#660066</code>. Ceci est appelé un <em>code hexadécimal</em> et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Images">Images</h3>
+
+<p>Pour choisir une image, allez sur <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> e<span class="rangySelectionBoundary" id="selectionBoundary_1425762299623_916803299754344" style="display: none; line-height: 0;"></span>t cherchez une image qui convient.</p>
+
+<ol>
+ <li>Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.</li>
+ <li>Appuyez sur le bouton<em> Afficher l'image</em>.</li>
+ <li>Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez <em>Enregistrer l'image sous…</em> et choisissez un endroit sûr pour enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<div class="note">
+<p><strong>Note</strong> : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur <strong>Outils de recherche</strong>, puis  2)<strong> Droits d'usage</strong> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 id="Police_de_caractères">Police de caractères</h3>
+
+<p>Pour choisir une police :</p>
+
+<ol>
+ <li>Allez sur <a href="http://www.google.com/fonts">Google Fonts</a> et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.</li>
+ <li>Cliquez sur l'icône<em> « + »</em> (<em>ajouter</em>) à côté de la police que vous voulez.</li>
+ <li>Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).</li>
+ <li>Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li>
+ <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li>
+ <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li>
+ <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencer_avec_le_web/the_web_and_web_standards/index.html b/files/fr/apprendre/commencer_avec_le_web/the_web_and_web_standards/index.html
new file mode 100644
index 0000000000..9db46369dd
--- /dev/null
+++ b/files/fr/apprendre/commencer_avec_le_web/the_web_and_web_standards/index.html
@@ -0,0 +1,171 @@
+---
+title: Le web et ses normes
+slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards
+tags:
+  - Apprendre
+  - Débutant
+  - Front-end
+  - Normes Web
+  - Standards Web
+  - Web
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr">{{learnsidebar}}</p>
+
+<p dir="ltr">Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.</p>
+
+<h2 dir="ltr" id="Une_brève_histoire_du_web">Une brève histoire du web</h2>
+
+<p dir="ltr">Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)</p>
+
+<p dir="ltr">À la fin des années 60, l'armée américaine a développé un réseau de communication nommé <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la <a href="https://fr.wikipedia.org/wiki/Commutation_de_paquets">commutation de paquets</a> et constituait la première implémentation de la suite de protocoles <a href="https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet">TCP/IP</a>. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet</p>
+
+<p dir="ltr">En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?</p>
+
+<p dir="ltr">Avance rapide jusqu'en 1989, où TimBL a écrit <a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a> et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.</p>
+
+<p dir="ltr">À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — <a href="/fr/docs/Web/HTTP">HTTP</a>, <a href="/fr/docs/Web/HTML">HTML</a>, le premier navigateur, qui s'appelait <a href="https://fr.wikipedia.org/wiki/WorldWideWeb_(navigateur)">WorldWideWeb</a>, un serveur HTTP et quelques pages web à lire.</p>
+
+<p dir="ltr">Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.</p>
+
+<p dir="ltr">Un dernier point important à évoquer est la fondation en 1994 par TimBL du <a href="https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a> (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le <a href="/fr/docs/Web/CSS">CSS</a> et le <a href="/fr/docs/Web/JavaScript">JavaScript</a>, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.</p>
+
+<h2 dir="ltr" id="Les_standards_du_Web">Les standards du Web</h2>
+
+<p dir="ltr"><strong>Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).</strong></p>
+
+<p dir="ltr">Par exemple <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a> décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.</p>
+
+<p dir="ltr">Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le <a href="https://whatwg.org/">WHATWG</a> (à l'origine de la modernisation du langage HTML), <a href="https://www.ecma-international.org/">ECMA</a> (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), <a href="https://www.khronos.org/">Khronos</a> (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.</p>
+
+<h3 dir="ltr" id="Normes_ouvertes">Normes "ouvertes"</h3>
+
+<p dir="ltr">L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.</p>
+
+<p dir="ltr">Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.</p>
+
+<p dir="ltr">Cela permet au Web de rester une ressource publique librement accessible.</p>
+
+<h3 dir="ltr" id="Ne_cassez_pas_le_web">Ne cassez pas le web</h3>
+
+<p dir="ltr">Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("<em>don't break the web</em>") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.</p>
+
+<h2 id="Être_développeur_web_cest_bien">Être développeur web, c'est bien</h2>
+
+<p>L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?</p>
+
+<p>Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.</p>
+
+<p><em>La seule constante est la variation.</em></p>
+
+<p>Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.</p>
+
+<p>Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.</p>
+
+<h2 id="Vue_densemble_des_outils_Web_modernes">Vue d'ensemble des outils Web modernes</h2>
+
+<p>Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du web</a>.</p>
+
+<h3 id="Navigateurs_web">Navigateurs web</h3>
+
+<p>Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme <a href="https://www.mozilla.org/fr/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/fr/safari/">Safari</a>, <a href="https://www.microsoft.com/fr-fr/windows/microsoft-edge">Edge</a>.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p>Hypertext Transfer Protocol, ou <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme</p>
+
+<pre class="notranslate">"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
+
+"Bien sûr Navigateur Web - Les voilà"
+
+[Télécharge les fichiers et affiche la page]</pre>
+
+<p>La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.</p>
+
+<h3 id="HTML_CSS_et_JavaScript">HTML, CSS et JavaScript</h3>
+
+<p><a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a> sont les trois principales technologies utilisées pour créer un site web:</p>
+
+<ul>
+ <li>
+  <p>Hypertext Markup Language, ou <strong>HTML</strong>, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :</p>
+
+  <pre class="brush: html notranslate">&lt;h1&gt;Ceci est un titre de haut niveau&lt;/h1&gt;
+
+&lt;p&gt;Voilà un paragraphe de texte&lt;/p&gt;
+
+&lt;img src="chat.jpg" alt="Une image de mon chat"&gt;</pre>
+
+  <p>Si nous faisions une analogie avec la construction d'une maison, le HTML serait les fondations et les murs de la maison, qui lui fournissent une architecture et maintien l'ensemble d'un bloc.</p>
+ </li>
+ <li>
+  <p>Les Feuilles de Style en cascade (<strong>CSS </strong>- Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:</p>
+
+  <pre class="brush: css notranslate">p  {
+  color: red;
+}</pre>
+
+  <p>Dans notre méthaphore domestique, le CSS serait la peinture, la tapisserie, les tapis et les tableaux que vous utiliseriez pour décorer votre maison.</p>
+ </li>
+ <li>
+  <p><strong>JavaScript</strong> est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :</p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  'J'ai changé le texte!';</pre>
+
+  <p>Dans l'analogie de la maison, JavaScript serait le four, la télévision, le sèche-cheveux — Tout ce qui donne des fonctionnalités utiles à votre logement.</p>
+ </li>
+</ul>
+
+<h3 id="Outils">Outils</h3>
+
+<p>Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :</p>
+
+<ul>
+ <li>Les <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">outils de développement</a> des navigateurs modernes qui permettent de déboguer votre code.</li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Des outils de test</a> pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.</li>
+ <li>Des bibliothèques et des cadres de travail (frameworks) basés sur JavaScript qui permettent de créer certains types de sites web beaucoup plus rapidement et efficacement .</li>
+ <li>Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.</li>
+ <li>Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.</li>
+</ul>
+
+<h3 id="Langages_et_frameworks_«_côté_serveur_»">Langages et frameworks « côté serveur »</h3>
+
+<p>HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.</p>
+
+<p>Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.</p>
+
+<p>On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.</p>
+
+<h2 id="Les_bonnes_pratiques_du_web">Les bonnes pratiques du web</h2>
+
+<p>Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.</p>
+
+<p>Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:</p>
+
+<ul>
+ <li>L'utilisateur 1 peut utiliser un iPhone avec un écran petit et étroit.</li>
+ <li>L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.</li>
+ <li>L'utilisateur 3 peut être aveugle et utiliser un lecteur d'écran pour accéder au contenu de la page web.</li>
+ <li>L'utilisateur 4 utilise peut-être un très vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes.</li>
+</ul>
+
+<p>Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.</p>
+
+<p>Vous rencontrerez les concepts suivants à un moment donné de vos études.</p>
+
+<ul>
+ <li><strong>La compatibilité entre navigateurs</strong> consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.</li>
+ <li><strong>La conception web réactive (responsive) </strong>consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.</li>
+ <li><strong>La performance</strong> signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.</li>
+ <li><strong>L'accessibilité</strong> consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?</li>
+ <li><strong>L'internationalisation </strong>signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).</li>
+ <li><strong>Confidentialité et sécurité</strong>. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.</li>
+</ul>
+
+<h2 dir="ltr" id="Voir_aussi">Voir aussi</h2>
+
+<ul dir="ltr">
+ <li><a href="https://fr.wikipedia.org/wiki/World_Wide_Web#Histoire">Histoire du World Wide Web</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Apprendre/Fonctionnement_Internet">Le fonctionnement de l'Internet</a></li>
+</ul>
diff --git a/files/fr/apprendre/commencez_votre_projet_web/index.html b/files/fr/apprendre/commencez_votre_projet_web/index.html
new file mode 100644
index 0000000000..f5e17cdff0
--- /dev/null
+++ b/files/fr/apprendre/commencez_votre_projet_web/index.html
@@ -0,0 +1,186 @@
+---
+title: Commencez votre projet Web
+slug: Apprendre/Commencez_votre_projet_web
+tags:
+  - Beginner
+  - Composing
+  - Web
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div class="summary">
+<p>Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis </th>
+   <td>Aucun</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif </th>
+   <td>Apprendre à définir les objectifs pour donner une direction à votre projet.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pour_commencer">Pour commencer</h2>
+
+<p>Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est <em>ce que vous</em><em> voulez accomplir</em>. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.</p>
+
+<p>Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose </p>
+
+<ul>
+ <li>Qu'est-ce que je veux accomplir exactement ?</li>
+ <li>Comment un site web aiderait à atteindre mes objectifs ?</li>
+ <li>Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?</li>
+</ul>
+
+<p>Se poser ces questions et y répondre constituent la <em>conceptualisation</em> du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a pas la pédagogie active disponible pour l'instant. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir  d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après.<br>
+ <br>
+ La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire.<br>
+ <br>
+ Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.</p>
+
+<div class="note">
+<p><strong>Remarque </strong> Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent <a href="https://fr.wikipedia.org/wiki/Id%C3%A9ation">l'idéation</a>, <a href="https://fr.wikipedia.org/wiki/Planification">la planification</a> et <a href="https://fr.wikipedia.org/wiki/Gestion_de_projet">la gestion de projet</a>.</p>
+</div>
+
+<h3 id="Qu'est-ce_que_je_veux_accomplir_exactement">Qu'est-ce que je veux accomplir exactement ?</h3>
+
+<p>C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi  vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.</p>
+
+<p>Supposons que vous êtes un musicien. Vous pourriez souhaiter </p>
+
+<ul>
+ <li>Permettre aux gens d'écouter votre musique.</li>
+ <li>Vendre des goodies.</li>
+ <li>Rencontrer d'autres musiciens.</li>
+ <li>Parler de votre musique.</li>
+ <li>Enseigner la musique à travers des vidéos.</li>
+ <li>Publier des photos de vos chats.</li>
+</ul>
+
+<p>Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important </p>
+
+<ol>
+ <li>Permettre aux gens d'écouter votre musique</li>
+ <li>Parler de votre musique.</li>
+ <li>Rencontrer d'autres musiciens.</li>
+ <li>Vendre des goodies.</li>
+ <li>Enseigner la musique à travers des vidéos.</li>
+ <li>Publier des photos de vos chats.</li>
+</ol>
+
+<p>Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?).</p>
+
+<p>Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante.</p>
+
+<h3 id="Comment_un_site_web_pourrait-il_répondre_à_mes_objectifs">Comment un site web pourrait-il répondre à mes objectifs ?</h3>
+
+<p>Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ?</p>
+
+<p>Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web.</p>
+
+<p>Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons.</p>
+
+<p>Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de <em>regrouper</em> toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'<em>interaction</em> entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous.</p>
+
+<p>Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles.</p>
+
+<h3 id="Qu'est-ce_qui_doit_être_fait_et_dans_quel_ordre_pour_atteindre_mes_objectifs">Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?</h3>
+
+<p>Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note  vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.</p>
+
+<p>Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Objectifs</th>
+   <th scope="col">Choses à faire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Permettre aux gens d'écouter votre musique</td>
+   <td>
+    <ol>
+     <li>Enregistrer de la musique</li>
+     <li>Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous faire cela avec les services web existants ?)</li>
+     <li>Donner aux gens l'accès à votre musique sur une partie de votre site web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Parler de votre musique</td>
+   <td>
+    <ol>
+     <li>Écrire quelques articles pour lancer la discussion</li>
+     <li>Définir l'apparence et le format des articles</li>
+     <li>Publier ces articles sur le site web (Comment faire cela ?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Rencontrer d'autres musiciens</td>
+   <td>
+    <ol>
+     <li>Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)</li>
+     <li>Définir comment les gens vont trouver ces moyens de contact à partir de votre site</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Vendre des goodies</td>
+   <td>
+    <ol>
+     <li>Créer les goodies</li>
+     <li>Stocker les goodies</li>
+     <li>Trouver un moyen de gérer l'expédition</li>
+     <li>
+      <div class="almost_half_cell" id="gt-res-content">
+      <div dir="ltr" style="zoom: 1;">Trouver un moyen de gérer le paiement</div>
+      </div>
+     </li>
+     <li>Faire un système sur votre site pour que les gens passe des commandes</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Enseigner la musique à travers des vidéos</td>
+   <td>
+    <ol>
+     <li>Enregistrer vos leçons vidéos</li>
+     <li>Préparer les fichiers vidéos consultables en ligne (encore une fois, pourriez-vous le faire avec les services web existants ?)</li>
+     <li>Donner aux gens l'accès à vos vidéos sur une partie de votre site web</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes.</p>
+
+<p>Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?).</p>
+
+<h3 id="Conclusion">Conclusion</h3>
+
+<p>Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li>Commencer à apprendre la technique  <a href="/fr/Apprendre/Fonctionnement_Internet">Comment fonctionne l'Internet ?</a></li>
+ <li>Approfondir le design et la conception  <a href="/fr/Apprendre/Concevoir_page_web">Conception d'une page web</a></li>
+</ul>
diff --git a/files/fr/apprendre/comment_contribuer/index.html b/files/fr/apprendre/comment_contribuer/index.html
new file mode 100644
index 0000000000..29814aaee9
--- /dev/null
+++ b/files/fr/apprendre/comment_contribuer/index.html
@@ -0,0 +1,85 @@
+---
+title: Comment contribuer à l'Espace d'apprentissage du MDN
+slug: Apprendre/Comment_contribuer
+tags:
+  - Apprendre
+  - Documentation
+  - Débutant
+  - Guide
+  - contribuer
+translation_of: Learn/How_to_contribute
+---
+<p>{{LearnSidebar}}</p>
+
+<blockquote>
+<p>Si vous êtes parvenu à cette page du premier coup ou après avoir longuement cherché, cela signifie probablement que vous souhaitez contribuer à l'« Espace d'Apprentissage du MDN » (aussi appelée Learning Area). Excellente nouvelle !</p>
+
+<p><span class="seoSummary">Sur cette page, vous trouverez tout ce dont vous aurez besoin pour aider à améliorer le contenu pédagogique sur MDN. Vous pouvez contribuer de nombreuses façons, selon le temps que vous avez ou que vous souhaitez y passer, que vous soyez <a href="#I'm_a_beginner">un débutant</a>, <a href="#I'm_a_web_developer">un développeur web</a>, ou <a href="#I'm_a_teacher">un enseignant</a>.</span></p>
+</blockquote>
+
+<div class="note">
+<p>Note : Vous pouvez trouver un guide pour écrire un nouvel article sur <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">C</a><a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">omment rédiger un article pour aider les gens à se familiariser avec le Web..</a></p>
+</div>
+
+<h2 id="Trouver_une_tâche_spécifique">Trouver une tâche spécifique</h2>
+
+<p><strong><span id="result_box" lang="fr"><span>Un moyen courant utilisé par les contributeurs à l'« Espace d'Apprentissage » est de lire les articles, corriger les fautes de frappe et suggérer des améliorations.</span></span></strong> <strong> Vos exemples sont également les bienvenus sur notre </strong> <strong><a href="https://github.com/mdn/learning-area/">dépôt GitHub</a>,</strong> <strong>et vous pouvez prendre contact avec nous si vous voulez demander ce qui doit être fait.</strong></p>
+
+<p>Contribuer représente également une excellente méthode pour apprendre tout en s'amusant. Si vous vous sentez perdu et/ou si vous avez des questions, n'hésitez pas à nous contacter via <a href="https://lists.mozilla.org/listinfo/dev-mdc">la liste de diffusion (anglophone)</a> ou <a href="irc://irc.mozilla.org/mdn">notre canal IRC (anglophone)</a> (voir en pied de page pour plus de détails). <a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> est le responsable du projet pour l'« Espace d'Apprentissage » — vous pouvez aussi essayer de le contacter directement.</p>
+
+<p>Les paragraphes suivants donnent quelques idées générales des types de tâches que vous pouvez réaliser.</p>
+
+<h2 id="Je_suis_un_débutant"><a id="I'm_a_beginner" name="I'm_a_beginner">Je suis un débutant</a></h2>
+
+<p>Fantastique ! Les retours des débutants sont particulièrement précieux lorsqu'il s'agit d'écrire des articles pédagogiques. Votre point de vue est unique, car vous faites partie du public visé par ces articles, <span id="result_box" lang="fr"><span>ce qui peut faire de vous un membre inestimable de notre équipe.</span></span> <span id="result_box" lang="fr"><span>En effet, si vous utilisez un de nos articles pour apprendre quelque chose et que vous êtes bloqué, ou si vous trouvez l'article déroutant d'une certaine manière, vous pouvez le corriger ou nous le faire savoir afin que nous puissions être sûrs qu'il sera corrigé.</span></span></p>
+
+<p>Voici quelques façons de contribuer :</p>
+
+<dl>
+ <dt><a href="/fr/docs/Project%3AMDN/contribuer/Règles_d_étiquettage">Ajouter des étiquettes aux articles</a> (<em>5 min</em>)</dt>
+ <dd>Étiqueter le contenu de MDN est le moyen le plus simple de contribuer sur MDN. <span id="result_box" lang="fr"><span>Comme beaucoup de nos fonctionnalités utilisent des balises pour aider à présenter l'information dans son contexte, aider à l'étiquetage est une contribution très précieuse.</span> <span>Jetez un oeil sur les listes</span></span> <a href="https://developer.mozilla.org/fr/docs/Glossaire#Contribute">des termes du glossaire</a> et <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">aux articles de la section d'apprentissage</a> qui n'ont pas d'étiquettes. <em>(Pour le français, utiliser des termes français, ceux qu'un francophone envisagera de rechercher)</em></dd>
+ <dt><a href="/fr/docs/Glossaire">Lire et effectuer une relecture d'un terme du glossaire</a> (<em>5 min</em>)</dt>
+ <dd>Nous avons besoin de votre regard neuf sur le contenu qui a été rédigé. Si vous trouvez qu'un terme du glossaire est difficile à comprendre, cela signifie que sa définition doit être améliorée. N'hésitez pas à apporter les changements que vous estimez nécessaires. Si vous ne pensez pas avoir les compétences requises pour modifier l'entrée en question, dites-le nous <a href="https://lists.mozilla.org/listinfo/dev-mdc">sur la liste de diffusion</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Rédiger une nouvelle définition dans le glossaire</a> (<em>20 minutes</em>)</dt>
+ <dd>La méthode la plus efficace pour apprendre quelque chose de nouveau est de : choisir un concept que vous aimeriez comprendre, en apprendre le plus possible à ce sujet et expliquer ce concept dans le glossaire. Expliquer quelque chose aux autres est une excellente façon de vérifier que vous avez bien compris et aide énormément à ancrer cette connaissance dans votre mémoire. Vous aurez ainsi fait quelque chose pour vous et aussi pour les autres. Gagnant gagnant !</dd>
+ <dt><a href="/fr/Apprendre/Index">Lire et effectuer une relecture d'un article pédagogique</a> (<em>2 heures</em>)</dt>
+ <dd>Cetta action a beaucoup d'analogies avec la relecture d'un terme du glossaire présentée plus haut ; mais elle prendra plus de temps car les articles sont généralement plus longs.</dd>
+</dl>
+
+<h2 id="Je_suis_un_développeur_web"><a id="I'm_a_web_developer" name="I'm_a_web_developer">Je suis un développeur web</a></h2>
+
+<p>Parfait, vos compétences techniques sont l'ingrédient idéal pour que nous soyons sûrs de fournir un contenu pédagogique <strong>et </strong>techniquement précis pour les débutants. Cette section du MDN est dédiée à l'apprentissage des concepts du Web, il est donc nécessaire que les explications fournies soient aussi simples que possible, sans être simplistes et donc inutilisables . Il est plus important d'être compréhensible que de donner une foultitude de détails.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Glossaire">Lire et effectuer une relecture d'une définition du glossaire</a> (<em>5 min</em>)</dt>
+ <dd>En tant que développeur web, vous pouvez nous aider à ce que le contenu soit précis sur le plan technique, sans pour autant qu'il soit pédant. N'hésitez pas à modifier les articles si vous pensez que c'est nécessaire. Si vous souhaitez échanger sur le sujet avant d'éditer, n'hésitez pas à nous contacter via <a href="https://lists.mozilla.org/listinfo/dev-mdc">la liste de diffusion (anglophone)</a> ou <a href="irc://irc.mozilla.org/mdn">notre canal IRC (anglophone)</a>.</dd>
+ <dt><a href="/fr/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Écrire une nouvelle définition dans le glossaire</a> (<em>20 minutes</em>)</dt>
+ <dd>Clarifier le jargon technique est une bonne méthode pour apprendre et être techniquement précis et clair. Les débutants vous en remercieront. <a href="https://developer.mozilla.org/fr/docs/Glossaire#Contribute">Quelques termes ne sont pas encore définis</a> et ont besoin de vous, choisissez-en un qui vous intéresse et allez-y.</dd>
+ <dt><a href="/fr/Apprendre/Index">Lire et effectuer une relecture d'un article pédagogique</a> (<em>2 heures</em>)</dt>
+ <dd>Cette action ressemble beaucoup à celle de la relecture d'un terme du glossaire (présentée plus haut). Elle demande plus de temps car les articles sont généralement plus longs.</dd>
+ <dt><a href="/fr/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Écrire un nouvel article pour la section Apprendre</a> (<em>4 heures ou plus</em>)</dt>
+ <dd>MDN manque de ressources à destination des débutants à propos des technologies web (<a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS">CSS</a>, <a href="/fr/Apprendre/JavaScript">JavaScript</a>, etc.). Certains articles et contenus existent déjà mais ont besoin d'être revus et remaniés. Dépassez vos limites en mettant les technologies web à la portée des débutants.</dd>
+ <dt><a href="/fr/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Créer exercices, exemples de code et outils d'apprentissage interactifs</a> (? heures)</dt>
+ <dd>Les différents articles pédagogiques ont besoin d'éléments d'« Apprentissage actif » car chacun apprend mieux en faisant soi-même. Ces éléments peuvent être des exercices ou du contenu interactif qui permette à un utilisateur d'appliquer et de manipuler les concepts détaillés dans un article. De nombreux outils existent pour créer de tels exemples de code : <a href="https://jsfiddle.net/">JSFiddle</a> ou similaire pour construire un contenu interactif et avec <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>, libérez votre créativité !</dd>
+</dl>
+
+<h2 id="Je_suis_un_enseignant"><a id="I'm_a_teacher" name="I'm_a_teacher">Je suis un enseignant</a></h2>
+
+<p>MDN est connu pour son excellence sur le plan technique et moins connu, à juste titre, pour son contenu à destination des débutants. C'est là que nous avons besoin de vous, comme enseignant ou formateur. Vous pouvez nous aider à améliorer la pédagogie et la cohérence éducative du contenu du MDN.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Glossaire">Lire et effectuer une relecture d'une définition du glossaire</a> (<em>15 min</em>)</dt>
+ <dd>Consultez une des définitions du glossaire et amendez-la si nécessaire. Si vous souhaitez discuter du contenu avant de publier, n'hésitez pas à nous contacter via <a href="https://lists.mozilla.org/listinfo/dev-mdc">la liste de diffusion (anglophone)</a> ou <a href="irc://irc.mozilla.org/mdn">notre canal IRC (anglophone)</a>.</dd>
+ <dt><a href="/fr/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Écrire une nouvelle définition dans le glossaire</a> (<em>1 heure</em>)</dt>
+ <dd>Définir les termes de façon simple et claire pour fournir un aperçu efficace des concepts est essentiel pour s'adresser aux débutants. Votre expérience de pédagogue peut être tout particulièrement utile pour créer un excellent glossaire. <a href="https://developer.mozilla.org/fr/docs/Glossaire#Contribute">De nombreux termes ne sont pas encore définis</a>, choisissez-en un puis allez-y !</dd>
+ <dt><a href="/fr/docs/tag/needsSchema">Ajouter des illustrations et/ou des schémas à des articles</a> (<em>1 heure</em>)</dt>
+ <dd>Comme vous le savez, les illustrations sont indispensables pour apprendre. Or, c'est quelque chose qui manque souvent sur MDN et vos compétences peuvent faire la différence dans ce domaine. Consultez <a href="/en-US/docs/tag/needsSchema">la liste des articles en manque d'illustration</a> et choisissez-en un pour lequel vous souhaitez ajouter des éléments graphiques.</dd>
+ <dt><a href="/fr/Apprendre/Index">Lire et  effectuer une relecture d'un article pédagogique</a> (<em>2 heures</em>)</dt>
+ <dd>Cette action ressemble beaucoup à la relecture d'un terme du glossaire présentée plus haut. Elle prend plus de temps car les articles sont généralement plus longs.</dd>
+ <dt><a href="/fr/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Écrire un nouvel article dans la section « Apprendre »</a> (<em>4 heures</em>)</dt>
+ <dd>Cette section a besoin d'articles simples et directs sur le web et les notions fonctionnelles attenantes. Ces articles doivent être écrits dans un but pédagogique : il ne s'agit pas de couvrir l'exhaustivité d'un domaine ou d'un concept mais d'en expliquer l'essentiel. Cet équilibre est difficile à trouver et c'est là que votre expérience toute particulière entre en jeu.</dd>
+ <dt><a href="/fr/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Créer des exercices, des <abbr title="Multiple Choice Tests">quizz</abbr> ou des outils d'apprentissage interactifs</a> (<em>? heures</em>)</dt>
+ <dd>Les différents articles pédagogiques ont besoin d'éléments de « apprentissage actif » car chacun apprend mieux en faisant soi-même. Ces éléments peuvent être des exercices ou du contenu interactif qui permet à un utilisateur d'appliquer et de manipuler les concepts détaillés dans un article. De nombreux outils existent pour créer de tels exemples : <a href="https://jsfiddle.net/">JSFiddle</a>, <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Libérez votre créativité !</dd>
+ <dt><a href="/fr/docs/MDN/Contribute/Howto/Create_learning_pathways">Créer des chemins d'apprentissage</a> (<em>? hours</em>)</dt>
+ <dd>Afin de fournir des tutoriels progressifs et compréhensibles, les articles doivent être organisés en suites logiques. Cette organisation permet d'utiliser le contenu existant et d'identifier ce qui manque (auquel cas un nouvel article sera le bienvenu).</dd>
+</dl>
diff --git a/files/fr/apprendre/common_questions/configurer_un_serveur_de_test_local/index.html b/files/fr/apprendre/common_questions/configurer_un_serveur_de_test_local/index.html
new file mode 100644
index 0000000000..c9deed5e9b
--- /dev/null
+++ b/files/fr/apprendre/common_questions/configurer_un_serveur_de_test_local/index.html
@@ -0,0 +1,109 @@
+---
+title: Comment configurer un serveur de test local ?
+slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local
+tags:
+  - Apprendre
+  - Débutant
+  - Express
+  - Flask
+  - Node
+  - PHP
+  - Python
+  - Serveurs
+  - django
+  - lamp
+  - localhost
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir <a href="/en-US/docs/Learn/How_the_Internet_works">comment Internet fonctionne</a> et <a href="/en-US/docs/Learn/What_is_a_Web_server">ce qu'est un serveur Web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Vous apprendrez à configurer un serveur de test local.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Fichiers_locaux_contre_fichiers_distants">Fichiers locaux contre fichiers distants</h2>
+
+<p>Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant <em>Fichier</em> &gt; <em>Ouvrir...</em> et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.</p>
+
+<p>Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par <code>file://</code> suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par <code>http://</code> ou <code>https://</code> ; dans ce cas le fichier a été servi via HTTP.</p>
+
+<h2 id="Le_problème_du_test_local">Le problème du test local</h2>
+
+<p>Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :</p>
+
+<ul>
+ <li><strong>Ils sont basés sur des requêtes asynchrones</strong>. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récolter des données depuis le serveur </a>) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> pour en savoir plus).</li>
+ <li><strong>Ils mettent en œuvre un langage spécifique, tournant sur le serveur</strong>. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.</li>
+</ul>
+
+<h2 id="Créer_un_serveur_HTTP_local_simple">Créer un serveur HTTP local simple</h2>
+
+<p>Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module <code>SimpleHTTPServer</code> de Python permet une mise en œuvre simple de cette solution.</p>
+
+<p>Voilà la marche à suivre :</p>
+
+<ol>
+ <li>
+  <p>Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :</p>
+
+  <ul>
+   <li>Allez à <a href="https://www.python.org/">python.org</a></li>
+   <li>Sous Télécharger, cliquez le lien pour Python "3.xxx".</li>
+   <li>Tout en bas de la page,  télécharger le fichier pointé par le lien <em>Windows x86 executable installer</em>.</li>
+   <li>Exécuter ce programme quand le téléchargement est fini.</li>
+   <li>Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".</li>
+   <li>Cliquer <em>Install</em>, puis <em>Fermer</em> quand l'installation est complète.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :</p>
+
+  <pre class="brush: bash notranslate">python -V</pre>
+ </li>
+ <li>
+  <p>Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande <code>cd</code>, placer votre répertoire de travail dans le dossier contenant l'exemple.</p>
+
+  <pre class="brush: bash notranslate">#inclure le nom du dossier pour y s'y rendre,
+#par exemple
+cd Bureau
+# utiliser deux points pour remonter dans
+#le dossier parent si nécessaire
+cd ..</pre>
+ </li>
+ <li>
+  <p>Entrer la commande pour démarrer le serveur dans ce dossier.</p>
+
+  <pre class="brush: bash notranslate"># Si la version de Python retournée est ultérieur à 3.X
+python3 -m http.server
+# Si la version de Python retournée est ultérieur à 2.X
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL <code>localhost:8000</code> dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple <code>python -m http.server 7800</code> (Python 3.x) ou <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse <code>localhost:7800</code>.</p>
+</div>
+
+<h2 id="Faire_fonctionner_localement_des_langages_serveur">Faire fonctionner localement des langages serveur</h2>
+
+<p>Le module <code>SimpleHTTPServer</code> de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :</p>
+
+<ul>
+ <li>Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask en utilisant <code>pip3 install flask</code>.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple <code>python3 python-example.py</code>, puis consulter <code>localhost:5000</code> dans votre navigateur.</li>
+ <li>Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un  noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut  interpréter PHP. De bonnes options pour tester PHP localement sont <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.</li>
+</ul>
diff --git a/files/fr/apprendre/common_questions/index.html b/files/fr/apprendre/common_questions/index.html
new file mode 100644
index 0000000000..3dc2df9fca
--- /dev/null
+++ b/files/fr/apprendre/common_questions/index.html
@@ -0,0 +1,127 @@
+---
+title: Questions fréquentes
+slug: Apprendre/Common_questions
+tags:
+  - Learn
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur <a href="/en-US/docs/Learn/HTML">HTML</a> ou <a href="/en-US/docs/Learn/CSS">CSS</a>.) Ces articles sont conçus pour être lus de manière indépendante.</p>
+
+<h2 id="Comment_le_Web_fonctionne">Comment le Web fonctionne</h2>
+
+<p>Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement.</p>
+
+<dl>
+ <dt>
+ <h3 id="Comment_fonctionne_Internet"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">Comment fonctionne Internet?</a></h3>
+ </dt>
+ <dd><strong>Internet</strong> est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.</dd>
+ <dt>
+ <h3 id="Quelle_est_la_différence_entre_une_page_web_un_site_web_un_serveur_web_et_un_moteur_de_recherche"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?</a></h3>
+ </dt>
+ <dd>Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.</dd>
+ <dt>
+ <h3 id="Quest-ce_quune_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL?</a></h3>
+ </dt>
+ <dd>Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.</dd>
+ <dt>
+ <h3 id="Quest-ce_quun_nom_de_domaine"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Qu'est-ce qu'un nom de domaine?</a></h3>
+ </dt>
+ <dd>Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.</dd>
+ <dt>
+ <h3 id="Quest-ce_quun_serveur_Web"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur Web?</a></h3>
+ </dt>
+ <dd>Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.</dd>
+ <dt>
+ <h3 id="Que_sont_les_liens_hypertextes"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Que sont les liens hypertextes?</a></h3>
+ </dt>
+ <dd>Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.</dd>
+</dl>
+
+<h2 id="Outils_et_installation">Outils et installation</h2>
+
+<p>Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.</p>
+
+<dl>
+ <dt>
+ <h3 id="Combien_ça_coûte_de_créer_quelque_chose_sur_le_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de créer quelque chose sur le Web?</a></h3>
+ </dt>
+ <dd>Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).</dd>
+ <dt>
+ <h3 id="Quel_logiciel_est_nécessaire_pour_construire_un_site_web"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Quel logiciel est nécessaire pour construire un site web?</a></h3>
+ </dt>
+ <dd>Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.</dd>
+ <dt>
+ <h3 id="Quels_sont_les_éditeurs_disponibles"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">Quels sont les éditeurs disponibles?</a></h3>
+ </dt>
+ <dd>Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.</dd>
+ <dt>
+ <h3 id="Comment_installer_un_environnement_de_base_pour_travailler"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">Comment installer un environnement de base pour travailler?</a></h3>
+ </dt>
+ <dd>Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.</dd>
+ <dt>
+ <h3 id="Que_sont_les_outils_de_développement_du_navigateur"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement du navigateur?</a></h3>
+ </dt>
+ <dd>Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.</dd>
+ <dt>
+ <h3 id="Comment_être_sûr_que_votre_site_fonctionne_correctement"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Comment être sûr que votre site fonctionne correctement?</a></h3>
+ </dt>
+ <dd>Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.</dd>
+ <dt>
+ <h3 id="Comment_transférer_des_fichiers_vers_un_serveur_web"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">Comment transférer des fichiers vers un serveur web?</a></h3>
+ </dt>
+ <dd>Cet article montre comment mettre son site en ligne en utilisant un outil <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.</dd>
+ <dt>
+ <h3 id="Comment_utiliser_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">Comment utiliser GitHub Pages?</a></h3>
+ </dt>
+ <dd>Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.</dd>
+ <dt>
+ <h3 id="Comment_héberger_son_site_sur_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger son site sur Google App Engine?</a></h3>
+ </dt>
+ <dd>Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.</dd>
+ <dt>
+ <h3 id="Quels_outils_sont_disponibles_pour_corriger_et_améliorer_les_performances_du_site_web"><a href="/en-US/docs/Tools/Performance">Quels outils sont disponibles pour corriger et améliorer les performances du site web?</a></h3>
+ </dt>
+ <dd>Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.</dd>
+</dl>
+
+<h2 id="Conception_et_accessibilité">Conception et accessibilité</h2>
+
+<p>Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="Comment_démarrer_dans_la_conception_de_mon_site_web"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">Comment démarrer dans la conception  de mon site web?</a></h3>
+ </dt>
+ <dd>Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.</dd>
+ <dt>
+ <h3 id="Que_contiennent_les_mises_en_page_classiques"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">Que contiennent les mises en page classiques?</a></h3>
+ </dt>
+ <dd>Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.</dd>
+ <dt>
+ <h3 id="Quest-ce-que_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">Qu'est-ce-que l'accessibilité?</a></h3>
+ </dt>
+ <dd>Cet article est une introduction aux concepts de base de l'accessibilité web.</dd>
+ <dt>
+ <h3 id="Comment_concevoir_pour_tous_les_types_dutilisateurs"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">Comment concevoir pour tous les types d'utilisateurs?</a></h3>
+ </dt>
+ <dd>Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.</dd>
+ <dt>
+ <h3 id="Quelles_fonctionnalités_HTML_favorisent_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">Quelles fonctionnalités HTML favorisent l'accessibilité?</a></h3>
+ </dt>
+ <dd>Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.</dd>
+</dl>
+
+<h2 id="Questions_HTML_CSS_et_JavaScript">Questions HTML, CSS et JavaScript</h2>
+
+<p>Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Utiliser CSS pour résoudre des problèmes courants</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a></li>
+</ul>
diff --git a/files/fr/apprendre/comprendre_les_url/index.html b/files/fr/apprendre/comprendre_les_url/index.html
new file mode 100644
index 0000000000..85448c44bb
--- /dev/null
+++ b/files/fr/apprendre/comprendre_les_url/index.html
@@ -0,0 +1,158 @@
+---
+title: Comprendre les URL et leur structure
+slug: Apprendre/Comprendre_les_URL
+tags:
+  - Beginner
+  - Infrastructure
+  - Learn
+  - NeedsActiveLearning
+  - URL
+translation_of: Learn/Common_questions/What_is_a_URL
+---
+<div class="summary">
+<p>Cet article aborde les <em>Uniform Resource Locators</em> (URL) en expliquant leur rôle et leur structure.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir <a href="/fr/Apprendre/Fonctionnement_Internet">comment fonctionne Internet</a>, <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est une serveur web</a> et <a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">les concepts sous-jacents aux liens sur le Web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir ce qu'est une URL et comprendre son rôle sur le Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="seoSummary">Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les <strong><dfn>URL</dfn></strong> sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.</span></p>
+
+<p><strong>URL</strong> signifie <em>Uniform Resource Locator</em> (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a pour le moment pas d'élément de pédagogie active. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Les_bases_l'anatomie_d'une_URL">Les bases : l'anatomie d'une URL</h3>
+
+<p>Voici quelques exemples d'URL :</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/fr/docs/Apprendre/
+https://developer.mozilla.org/fr/search?q=URL</pre>
+
+<p>Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML).</p>
+
+<p>Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL :</p>
+
+<pre>http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&amp;clé2=valeur2#QuelquePartDansLeDocument</pre>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/11679/protocole_1.png"></dt>
+ <dd><code>http://</code> correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme <code>mailto:</code> (qui permet d'ouvrir un client de messagerie électronique) ou <code>ftp:</code> qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.</dd>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/11681/nom_de_domaine2.png" style="height: 204px; width: 380px;"></dt>
+ <dd><code>www.exemple.com</code> correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).</dd>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/11683/port_3.png"></dt>
+ <dd><code>:80</code> correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.</dd>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/11685/chemin_4.png"></dt>
+ <dd><code>/chemin/vers/monfichier.html</code> est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».</dd>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/11693/parametres_5.png"></dt>
+ <dd><code>?clé1=valeur1&amp;clé2=valeur2</code> sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&amp;). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.</dd>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/11695/ancre_6.png"></dt>
+ <dd><code>#QuelquePartDansLeDocument</code> correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">d'autres fragments et d'autres règles</a> pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.</p>
+</div>
+
+<p>On peut comparer les URL avec les adresses postales : le <em>protocole</em> représente le service postal qu'on souhaite utiliser, le <em>nom de domaine</em> correspond à la ville et le <em>port</em> au code postal, le <em>chemin</em> indique le bâtiment où la lettre doit être acheminée et les <em>paramètres</em> pourraient indique le numéro de l'appartement, enfin l'<em>ancre</em> désigne la personne à laquelle la lettre est adressée.</p>
+
+<h3 id="Comment_utiliser_les_URL">Comment utiliser les URL</h3>
+
+<p>N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout !</p>
+
+<p>Le langage {{Glossary("HTML")}} — <a href="/fr/docs/Learn/HTML/HTML_tags">que nous verrons par la suite</a> — permet de tirer parti des URL :</p>
+
+<ul>
+ <li>en créant des liens vers d'autres documents grâce à l'élément {{HTMLElement("a")}} ;</li>
+ <li>en lient des document avec les ressources associées grâce aux éléments {{HTMLElement("link")}} et {{HTMLElement("script")}} ;</li>
+ <li>en affichant des médias comme des images (avec l'élément {{HTMLElement("img")}}), des vidéos (avec l'élément {{HTMLElement("video")}}), des sons ou de la musique (avec l'élément {{HTMLElement("audio")}}), etc. ;</li>
+ <li>en affichant d'autres documents HTML grâce à l'élément {{HTMLElement("iframe")}}.</li>
+</ul>
+
+<p>D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive.</p>
+
+<h3 id="Les_URL_absolues_et_les_URL_relatives">Les URL absolues et les URL relatives</h3>
+
+<p>L'URL que nous avons disséquée avant est une URL <em>absolue</em> et il existe également des URL <em>relatives</em>. Expliquons ici cette différence.</p>
+
+<p>Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires.</p>
+
+<p>Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole <code>"/</code>", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant.</p>
+
+<p>Prenons quelques exemples concrets pour illustrer le concept.</p>
+
+<h4 id="Exemples_d'URL_absolues">Exemples d'URL absolues</h4>
+
+<dl>
+ <dt>URL complète</dt>
+ <dd>
+ <pre>https://developer.mozilla.org/fr/docs/Apprendre</pre>
+ </dd>
+ <dt>Protocole implicite</dt>
+ <dd>
+ <pre>//developer.mozilla.org/fr/docs/Apprendre</pre>
+
+ <p>Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.</p>
+ </dd>
+ <dt>Nom de domaine implicite</dt>
+ <dd>
+ <pre>/fr/docs/Apprendre</pre>
+
+ <p>Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.</p>
+
+ <div class="note">
+ <p><strong>Note :</strong> <em>Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole</em>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h4 id="Exemples_d'URL_relatives">Exemples d'URL relatives</h4>
+
+<p>Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  <code>https://developer.mozilla.org/fr/docs/Apprendre</code></p>
+
+<dl>
+ <dt>Sous-ressources</dt>
+ <dd>
+ <pre>Compétences/Infrastructure/Comprendre_les_URL
+</pre>
+ L'URL ne commence pas pas <code>/</code>, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : <code>https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL</code></dd>
+ <dt>Remonter dans l'arborescence des dossiers</dt>
+ <dd>
+ <pre>../CSS/display</pre>
+
+ <p>Dans ce cas, on utilise la convention, héritée du monde UNIX :  <code>../</code> indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici <code>https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display</code>, qui peut être simplifiée en : <code>https://developer.mozilla.org/fr/docs/CSS/display</code></p>
+ </dd>
+</dl>
+
+<h3 id="Les_URL_sémantiques">Les URL sémantiques</h3>
+
+<p>Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>URL sémantiques</em></a>.  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.</p>
+
+<p>Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :</p>
+
+<ul>
+ <li>Elles sont plus simples à manipuler</li>
+ <li>Elles clarifient la situation pour le visiteur et indiquent où il est, ce qu'il fait et avec qui il intéragit sur le Web</li>
+ <li>Elles peuvent être utilisées par certains moteurs de recherche pour améliorer le classement des pages associées à un terme donné.</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li>
+</ul>
diff --git a/files/fr/apprendre/comprendre_noms_de_domaine/index.html b/files/fr/apprendre/comprendre_noms_de_domaine/index.html
new file mode 100644
index 0000000000..bc8bc301ef
--- /dev/null
+++ b/files/fr/apprendre/comprendre_noms_de_domaine/index.html
@@ -0,0 +1,162 @@
+---
+title: Comprendre les noms de domaine
+slug: Apprendre/Comprendre_noms_de_domaine
+tags:
+  - Beginner
+  - Domain names
+  - Infrastructure
+  - Learn
+  - Web
+translation_of: Learn/Common_questions/What_is_a_domain_name
+---
+<div class="summary">
+<p>Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Pour commencer, vous devez comprendre <a href="/fr/Apprendre/Fonctionnement_Internet">comment Internet fonctionne</a> et ce que sont les <a href="/en-US/Learn/Understanding_URLs">URL</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="seoSummary">Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.</span></p>
+
+<p>Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple <code>173.194.121.32</code>). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple <code>2001:0db8:85a3:0042:1000:8a2e:0370:7334</code>). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Ce contenu a besoin d'être enrichi, <a href="/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p>
+
+<ul>
+ <li><a href="http://www.afnic.fr/fr/votre-nom-de-domaine/qu-est-ce-qu-un-nom-de-domaine/">Qu'est-ce qu'un nom de domaine</a> sur le site de l'AFNIC</li>
+ <li><a href="https://www.youtube.com/watch?v=QHVK666TFUI">Le DNS</a>, présentation de Stéphane Bortzmeyer réalisée dans le cadre de « Il était une fois Internet » (CC BY-SA)</li>
+</ul>
+
+<h2 id="Allons_plus_loin">Allons plus loin</h2>
+
+<h3 id="La_structure_d'un_nom_de_domaine">La structure d'un nom de domaine</h3>
+
+<p>Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus <strong>de droite à gauche</strong> :</p>
+
+<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11241/structure_fr.png" style="height: 76px; width: 252px;"></p>
+
+<p>Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.</p>
+
+<dl>
+ <dt>{{Glossary("TLD")}} (<em>Top-Level Domain</em> en anglais qui signifie domaine de premier niveau)</dt>
+ <dd>Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net).</dd>
+ <dt>Composant</dt>
+ <dd>Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou <em>Secondary Level Domain</em> (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : <a href="https://mozilla.org">mozilla.org</a>), on peut créer d'autres noms de domaines sous celui-ci (par exemple : <a href="https://developer.mozilla.org">developer.mozilla.org</a>), ceux-ci sont parfois appelés « sous-domaines ».</dd>
+</dl>
+
+<h3 id="Acheter_un_nom_de_domaine">Acheter un nom de domaine</h3>
+
+<h4 id="Qui_possède_un_nom_de_domaine">Qui possède un nom de domaine ?</h4>
+
+<p>Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine.</p>
+
+<p>Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.</p>
+</div>
+
+<h4 id="Trouver_un_nom_de_domaine_disponible">Trouver un nom de domaine disponible</h4>
+
+<p>Pour déterminer si un nom de domaine est disponible :</p>
+
+<ul>
+ <li>vous pouvez vous rendre sur le site d'un bureau d'enregistrement. La plupart fournissent un service « whois » (littéralement « qui est-ce ? » en anglais) qui indique si un nom de domaine est disponible.</li>
+ <li>si vous utilisez un système qui possède un outil en ligne de commande, vous pouvez y saisir la commande <code>whois</code>. Voici un exemple avec <code>mozilla.org</code>:</li>
+</ul>
+
+<pre>$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+</pre>
+
+<p>Comme on peut le voir ici, on ne peut pas réserver <code>mozilla.org</code> car ce nom de domaine est déjà réservé par la Fondation Mozilla.</p>
+
+<p>Essayons avec un autre, par exemple <code>unnométrange.fr</code> :</p>
+
+<pre>&gt; whois unnométrange.fr
+...
+%% No entries found in the AFNIC Database.</pre>
+
+<p>On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs <code>whois</code> (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom !</p>
+
+<h4 id="Obtenir_un_nom_de_domaine">Obtenir un nom de domaine</h4>
+
+<p>Le processus est assez simple :</p>
+
+<ol>
+ <li>Aller sur le site web d'un bureau d'enregistrement</li>
+ <li>Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse</li>
+ <li>Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !</li>
+ <li>Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.</p>
+</div>
+
+<h4 id="Rafraîchissement_du_DNS">Rafraîchissement du DNS</h4>
+
+<p>Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».</p>
+
+<div class="note">
+<p><strong>Note :</strong> Ce temps est parfois appelé <strong>temps de propagation</strong>. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.</p>
+</div>
+
+<h3 id="Comment_fonctionne_une_requête_DNS">Comment fonctionne une requête DNS ?</h3>
+
+<p>Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :</p>
+
+<ol>
+ <li>Vous saisissez <code>mozilla.org</code> dans la barre d'adresse du navigateur.</li>
+ <li>Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout.</li>
+ <li>Si votre ordinateur ne connait pas l'adresse IP associée au nom <code>mozilla.org</code>, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé.</li>
+ <li>Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.</li>
+</ol>
+
+<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.</p>
+</div>
+
+<h2 id="Étapes_suivantes">Étapes suivantes</h2>
+
+<p>Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite :</p>
+
+<ul>
+ <li>Si vous souhaitez commencer, débutez en explorant les différents design possibles décrit sur <a href="/fr/Apprendre/Concevoir_page_web">concevoirr une page web</a>.</li>
+ <li>Construire un site web peut coûter de l'argent. Vous trouverez les différentes informations sur <a href="/fr/docs/Learn/How_much_does_it_cost">combien coûte la construction d'un site web</a>.</li>
+ <li>Vous pouvez aussi approfondir en consultant l'article sur <a href="https://fr.wikipedia.org/wiki/Nom_de_domaine">les noms de domaine</a> sur Wikipédia.</li>
+</ul>
diff --git a/files/fr/apprendre/compétences/index.html b/files/fr/apprendre/compétences/index.html
new file mode 100644
index 0000000000..df0051d1a2
--- /dev/null
+++ b/files/fr/apprendre/compétences/index.html
@@ -0,0 +1,21 @@
+---
+title: Compétences
+slug: Apprendre/Compétences
+tags:
+  - Index
+translation_of: Learn
+---
+<p>Lorsqu'il s'agit d'apprendre le développement Web, il existe plusieurs compétences, listées par <a href="https://webmaker.org" rel="external">WebMaker</a> dans la <a href="https://webmaker.org/literacy" rel="external">littéracie web</a> : une carte destinée aux débutants pour apprendre les bases. Sur MDN, les articles de cette section sont consacrés au développement de sites web et sont destinés à tous publics :</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/Mécanismes_Web">Les mécanismes du Web</a></dt>
+ <dd>Comprendre l'écosystème du Web.</dd>
+ <dt><a href="/fr/Apprendre/Infrastructure">Infrastructure</a></dt>
+ <dd>Comprendre l'aspect technique du Web.</dd>
+ <dt><a href="/fr/Apprendre/Coder-scripter">Coder/Scripter</a></dt>
+ <dd>Créer des expériences interactives sur le Web.</dd>
+ <dt><a href="/fr/Apprendre/Design_Accessibilité">Conception et accessibilité</a></dt>
+ <dd>Utiliser les ressources du Web pour communiquer efficacement avec tout le monde.</dd>
+ <dt><a href="/fr/Apprendre/Redaction_web">Écrire pour le Web</a></dt>
+ <dd>Créer et organiser du contenu sur le Web.</dd>
+</dl>
diff --git a/files/fr/apprendre/concevoir_page_web/index.html b/files/fr/apprendre/concevoir_page_web/index.html
new file mode 100644
index 0000000000..0c50cec44c
--- /dev/null
+++ b/files/fr/apprendre/concevoir_page_web/index.html
@@ -0,0 +1,126 @@
+---
+title: Conception d'une page web
+slug: Apprendre/Concevoir_page_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - HTML
+  - NeedsActiveLearning
+translation_of: Learn/Common_questions/Common_web_layouts
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Assurez-vous d'avoir d'abord identifié <a href="/fr/Apprendre/Commencez_votre_projet_web">ce que vous souhaitez accomplir</a> avec votre projet web.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre où (et comment !) disposer des éléments dans vos pages web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.</p>
+
+<p>Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :</p>
+
+<dl>
+ <dt>En-tête</dt>
+ <dd>Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.</dd>
+ <dt>Contenu principal</dt>
+ <dd>Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.</dd>
+ <dt>Contenu secondaire</dt>
+ <dd>Il peut s'agir :
+ <ol>
+  <li>d'informations complémentaires au contenu principal ;</li>
+  <li>d'informations partagées entre un sous-ensemble de pages ;</li>
+  <li>d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.</li>
+ </ol>
+ </dd>
+ <dt>Bas de page</dt>
+ <dd>Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.</dd>
+</dl>
+
+<p>Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où <strong>1 </strong>représente l'entête ; <strong>2,  </strong>le bas de page ; <strong>A</strong>, le contenu principal ; et <strong>B1, B2</strong>, le contenu secondaire) :</p>
+
+<p><strong>Dispostion à une colonne : </strong>particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.</p>
+
+<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Disposition à deux colonnes :</strong> souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.</p>
+
+<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Disposition à trois colonnes :</strong> adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).</p>
+
+<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p>
+
+<p>Il est aussi possible de mélanger tous ces modèles classiques :</p>
+
+<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p>
+
+<p>Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.</p>
+
+<p>Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Aucun exercice pratique n'est disponible actuellement. <a href="/fr/docs/MDN/Débuter_sur_MDN">S.V.P., pensez à contribuer !</a></em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Regardons maintenant quelques exemples concrets tirés de sites connus.</p>
+
+<h3 id="Disposition_à_une_colonne">Disposition à une colonne</h3>
+
+<p><strong><a href="http://www.invisionapp.com/" rel="external">Invision</a> </strong>: un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.</p>
+
+<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;">        <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.</p>
+
+<h3 id="Disposition_à_deux_colonnes">Disposition à deux colonnes</h3>
+
+<p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).</p>
+
+<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;">        <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être <em>directement relié</em>.</p>
+
+<h3 id="Attention_c'est_un_piège_!">Attention, c'est un piège !</h3>
+
+<p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…</p>
+
+<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;">        <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p>
+
+<p>…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (<em>float</em> en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.</p>
+
+<p>Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de  MICA forment une ligne de force verticale.</p>
+
+<p>Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.</p>
+
+<h3 id="Une_disposition_en_apparence_beaucoup_plus_complexe">Une disposition en apparence beaucoup plus complexe</h3>
+
+<p><strong>L'<a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opéra de Paris</a>.</strong></p>
+
+<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;">        <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p>
+
+<p>Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).</p>
+
+<p>Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Deux options s'offrent maintenant à vous :</p>
+
+<ul>
+ <li>Approfondir vos connaissances <a href="/fr/Apprendre/Commencer_avec_le_web">sur les bases de la conception web</a>.</li>
+ <li>Mettre le tout en pratique en <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créant votre toute première page web</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/concevoir_site_tous_types_utilisateurs/index.html b/files/fr/apprendre/concevoir_site_tous_types_utilisateurs/index.html
new file mode 100644
index 0000000000..8d6ae0ad6a
--- /dev/null
+++ b/files/fr/apprendre/concevoir_site_tous_types_utilisateurs/index.html
@@ -0,0 +1,247 @@
+---
+title: Concevoir un site pour tous les types d'utilisateurs
+slug: Apprendre/Concevoir_site_tous_types_utilisateurs
+tags:
+  - Accessibility
+  - Beginner
+  - Design
+  - Mobile
+  - NeedsActiveLearning
+translation_of: Learn/Common_questions/Design_for_all_types_of_users
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avoir lu <a href="/fr/Learn/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a> (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec <a href="/fr/Apprendre/Concevoir_page_web">l'anatomie d'une page web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les points les plus importants et facile à mettre en œuvre pour atteindre un tel objectif.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Le_contraste_des_couleurs">Le contraste des couleurs</h3>
+
+<p>Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil.</p>
+
+<p>Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste.</p>
+
+<p>Pour contrôler le contraste, vous pouvez télécharger et installer <a href="http://www.paciellogroup.com/resources/contrastanalyser/">l'analyseur de contraste</a> du Groupe Paciello.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.</p>
+</div>
+
+<p>Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :</p>
+
+<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p>
+
+<p>Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..</p>
+
+<h3 id="Taille_de_police_(ou_taille_de_fonte)">Taille de police (ou taille de fonte)</h3>
+
+<p>La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives.</p>
+
+<h4 id="Les_unités_absolues">Les unités absolues</h4>
+
+<p>Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (<code>px</code>). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :</p>
+
+<pre>body { font-size:16px; }</pre>
+
+<p>… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».</p>
+
+<p>Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.</p>
+
+<h4 id="Les_unités_relatives">Les unités relatives</h4>
+
+<p>Également appelées <em>unités proportionnelles,</em> les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur.</p>
+
+<p>Les unités relatives sont exprimées en <code>em</code>, <code>%</code> et <code>rem</code>:</p>
+
+<dl>
+ <dt>Les tailles exprimées en pourcentages : <code>%</code></dt>
+ <dd>Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).</dd>
+ <dt>Les tailles exprimées en em : <code>em</code></dt>
+ <dd>Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).</dd>
+ <dt>Les tailles exprimées en rem : <code>rem</code></dt>
+ <dd>Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec <code>em</code>.</dd>
+</dl>
+
+<p>Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (<code>h1</code>) dont la taille soit équivalente à 32px et qu'au sein de ce <code>&lt;h1&gt;</code> on ait un élément <code>span</code> avec une classe <code>subheading</code>, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).</p>
+
+<p>Voici le code HTML qu'on utilisera :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Tests sur les tailles de police&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+    &lt;h1&gt;Voici notre titre principal
+        &lt;span class="subheading"&gt;Et voici notre sous-titre&lt;/span&gt;
+    &lt;/h1&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :</p>
+
+<pre class="brush: css">body { font-size:100%; }
+/* 100% de la taille de base du navigateur, en
+général, le texte sera affiché sur 16 pixels */
+
+h1 { font-size:200%; }
+/* Deux fois la taille du corps de la page,
+soit 32 pixels */
+
+span.subheading { font-size:50%; }
+/* La moitié du h1,soit 16 pixels, ce qui revient
+à la taille de base originelle */
+</pre>
+
+<p>Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :</p>
+
+<pre class="brush: css">body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur
+dans la plupart des cas ça correspondra à 16 pixels */
+
+h1 { font-size:2em; }
+/* deux fois la taille du coros, soit 32 pixels */
+
+span.subheading { font-size:0.5em; }
+/* la moitié de la taille de h1, 16 pixels
+ce qui revient à taille originelle */</pre>
+
+<p>Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.</p>
+
+<p>C'est là qu'interviennent les <code>rem</code>. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :</p>
+
+<pre class="brush: css">body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur,
+soit 16 pixels dans la plupart des cas */
+
+h1 { font-size:2rem; }
+/* deux fois la taille du corps soit 32 pixels */
+
+span.subheading { font-size:1rem; }
+/* la taille originale */</pre>
+
+<p>C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'<a href="http://caniuse.com/#search=rem">Internet Explorer 9 et dans n'importe quel autre navigateur récent</a>, n'hésitez pas à l'utiliser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.</p>
+</div>
+
+<h4 id="Pourquoi_aurais-je_besoin_d'utiliser_des_unités_proportionnelles">Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?</h4>
+
+<p>Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.</p>
+
+<p>Il est généralement conseillé de :</p>
+
+<ul>
+ <li>Décrire les tailles de police en unité <code>rem</code>, cela ne posera aucun problème à la plupart des navigateurs ;</li>
+ <li>Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des <code>em</code>s, quitte à faire un peu de mathématique en chemin.</p>
+</div>
+
+<h3 id="Largeur_de_ligne">Largeur de ligne</h3>
+
+<p>Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.</p>
+
+<p>Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.</p>
+
+<p>Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Tests sur les tailles de police&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;div class="container"&gt;
+    &lt;h1&gt;Le titre principal
+        &lt;span class="subheading"&gt;Et le sous-titre&lt;/span&gt;
+    &lt;/h1&gt;
+
+    &lt;p&gt;[Un grand texte qui s'étire sur plusieurs lignes]&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ici, nous avons un <code>div</code> avec une classe <code>container</code>. Il est possible de mettre en forme le <code>div</code> en réglant sa largeur avec la propriété <code>width</code> ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété <code>max-width</code>. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété <code>max-width</code> pour avoir au maximum 70 caractères par ligne :</p>
+
+<pre class="brush: css">div.container { max-width:70em; }</pre>
+
+<h3 id="Fournir_un_contenu_alternative_pour_les_images_les_sons_et_les_vidéos">Fournir un contenu alternative pour les images, les sons et les vidéos</h3>
+
+<p>Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.</p>
+
+<h4 id="Les_images">Les images</h4>
+
+<p>Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :</p>
+
+<ul>
+ <li>Vos lecteurs souffrant d'une déficience visuelle utiliseront un logiciel lecteur d'écran qui ne pourra restituer que du texte.</li>
+ <li>Vos lecteurs peuvent naviguer depuis un intranet très strict qui bloque les images provenant d'un {{Glossary("CDN")}}.</li>
+ <li>Vos lecteurs peuvent avoir désactivé l'affichage des images pour économiser de la bande passante, ceci est notamment valable pour les appareils mobiles (voir ci-après).</li>
+</ul>
+
+<dl>
+ <dt>Les images décoratives</dt>
+ <dd>Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut <code>alt</code> : <code>&lt;img src="deco.gif" alt=""&gt;</code> afin qu'elles n'encombrent pas le texte.</dd>
+ <dt>Les images informatives</dt>
+ <dd>Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut <code>alt</code> par rapport au contenu de l'image.</dd>
+</dl>
+
+<p>Si l'image peut être décrite succintement, vous pouvez fournir un attribut <code>alt</code> qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut <code>longdesc</code>. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'utilisation voire l'existence de <code>longdesc</code> ont toujours été débatues. Veuillez vous référer à la page du W3C' <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> pour une explication complète et des exemples détaillés.</p>
+</div>
+
+<h4 id="AudioVidéo">Audio/Vidéo</h4>
+
+<p>Il est également nécessaire de fournir des alternatives à du contenu multimédia.</p>
+
+<dl>
+ <dt>Sous-titrage</dt>
+ <dd>Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant.</dd>
+ <dt>Transcription</dt>
+ <dd>Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo.</dd>
+</dl>
+
+<h3 id="Compression_des_images">Compression des images</h3>
+
+<p>Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :</p>
+
+<ul>
+ <li><strong>Logiciels à installer :</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (toutes les plates-formes, <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li>
+ <li><strong>Outils en lignes : </strong><a href="http://smush.it/">smushit!</a> de Yahoo!,   <a href="http://tools.dynamicdrive.com/imageoptimizer/">Online Image Optimizer</a> de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante)</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec <a href="/en-US/docs/Learn/Basics_of_UX_Design">les bases de l'ergonomie ou UX (<em>User Experience</em> en anglais)</a>.</p>
diff --git a/files/fr/apprendre/confidentialité_intégrité_et_disponibilité/index.html b/files/fr/apprendre/confidentialité_intégrité_et_disponibilité/index.html
new file mode 100644
index 0000000000..ad4bbca21b
--- /dev/null
+++ b/files/fr/apprendre/confidentialité_intégrité_et_disponibilité/index.html
@@ -0,0 +1,54 @@
+---
+title: 'Confidentialité, intégrité et disponibilité'
+slug: Apprendre/Confidentialité_intégrité_et_disponibilité
+tags:
+  - Beginner
+  - Security
+  - Tutorial
+translation_of: 'Archive/Security/Confidentiality,_Integrity,_and_Availability'
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>Cet article aborde les objectifs majeurs qu'on retrouve en sécurité : la confidentialité, l'intégrité et la disponibilité.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Il n'y a pas de prérequis pour cet article.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Vous apprendrez les concepts de confidentialité, d'intégrité et de disponibilité et comment ceux-ci peuvent affecter les données et les systèmes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En sécurité de l'information, le modèle classique définit trois objectifs : maintenir la confidentialité, l'intégrité et la disponibilité des données. Chacun de ces objectifs porte sur un aspect différent de protection des informations.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'éléments de pédagogie active pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="La_confidentialité">La confidentialité</h3>
+
+<p><em>La confidentialité</em> correspond à la protection des informations afin que celles-ci ne soient pas accessibles pour des personnes ou entités non-autorisées. Autrement dit, seules les personnes autorisées doivent pouvoir accéder aux données sensibles. Prenons par exemple les données de votre compte bancaire. Vous devriez pouvoir y accéder, cela ne fait aucun doute, les employés de la banque qui traitent avec vous ont également besoin d'y accéder mais en dehors de ces personnes, nul autre ne devrait pouvoir y accéder. Échouer à conserver cettte confidentialité signifie que quelqu'un qui n'aurait pas du accéder aux données a réussi à le faire. Cet accès peut avoir été accidentel ou intentionnel. Un tel échec est généralement appelé « faille » ou « brêche » et, généralement, il n'existe pas de solution pour empêcher à l'intrus de consulter les données auxquelles il a eu accès. Une fois qu'un secret a été révélé, il n'est plus possible de le cacher à nouveau. Si les informations de votre compte en banque sont publiées sur un site web public, tout le monde pourra avoir accès à ces données et il sera impossible d'effacer ce qui aura été consulté de la mémoire des personnes, de notes écrites, de captures d'écrans… De nos jours, la plupart des incidents de sécurités rapportés dans les médias sont dus à des échecs en termes de confidentialité.</p>
+
+<p>Pour résumer, une faille dans la confidentialité signifique que quelqu'un a eu accès à des informations alors qu'il n'aurait pas du pouvoir y accéder.</p>
+
+<h3 id="L'intégrité">L'intégrité</h3>
+
+<p><em>L'intégrité</em> correspond au fait de s'assurer de l'authenticité des informations auxquelles on accède :  les informations ne doivent pas avoir été modifiées et doivent provenir d'une source sûre. Prenons l'exemple d'un site web sur lequel vous vendez des produits. Si un attaquant peut acheter des produits sur votre site et modifier les prix des produits, il pourra acheter n'importe quoi à n'importe quel prix. Il y aurait donc une faille d'intégrité car les informations (ici le prix d'un produit) ont été modifiées sans votre autorisation. Un autre scénario où on peut observer une telle faille d'intégrité peut être le suivant : vous essayez de vous connecter à un site web et un attaquant malveillant intercepte les communications entre vous et le « vrai » site pour vous rediriger vers un autre site web. Dans ce cas, c'est la source d'information qui n'est pas sûre et c'est pour cette raison qu'on a une faille d'intégrité.</p>
+
+<h3 id="La_disponibilité">La disponibilité</h3>
+
+<p><em>La disponibilité</em> signifie que les informations peuvent être consultées par les utilisateurs autorisés.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/Vulnérabilités">Les vulnérabilités</a></li>
+</ul>
diff --git a/files/fr/apprendre/contrôles_de_sécurité/index.html b/files/fr/apprendre/contrôles_de_sécurité/index.html
new file mode 100644
index 0000000000..fee809e1c8
--- /dev/null
+++ b/files/fr/apprendre/contrôles_de_sécurité/index.html
@@ -0,0 +1,49 @@
+---
+title: Contrôles de sécurité
+slug: Apprendre/Contrôles_de_sécurité
+tags:
+  - Beginner
+  - Security
+  - Tutorial
+translation_of: Archive/Security/Controls
+---
+<p>{{draft}}</p>
+
+<div class="summary">
+<p>Cet article aborde les contrôles de sécurité : leurs différentes catégories, pourquoi ils sont toujours pertinents ainsi que leurs différentes faiblesses.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable connaître <a href="/fr/Apprendre/Confidentialité_intégrité_et_disponibilité">les objectifs majeurs en termes de sécurité</a>, <a href="/fr/Apprendre/Les_vulnérabilités">ce qu'est une vulnérabilité</a> et <a href="/fr/Apprendre/Les_menaces">ce qu'est une menace</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre ce qu'est un contrôle de sécurité et comment une combinaison de contrôles de sécurité permet de protéger des données et des systèmes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les données sensibles doivent être protégées afin qu'elles ne souffrent pas d'un défaut de confidentialité, d'integrité ou de disponibilité. Les mesures de protection (aussi appelées « contrôles de sécurité ») se distinguent en deux catégories. Tout d'abord, les faiblesses d'un système doivent être corrigées. Si un système possède une faille connue qu'un attaquant peut exploiter, le système doit être mis à jour afin que la vulnérabilité soit retirée ou réduite. Ensuite, le système ne doit offrir que les fonctionnalités nécessaires à chaque utilisateur autorisé, personne ne doit pouvoir utiliser des fonctionnalités dont il n'a pas besoin. C'est ce qu'on appelle <em>les moindres privilèges</em>.  Limiter les fonctionnalités accessibles et résoudre les failles connues visent un même but : fournir le minimum de chances à un attaquant pour entrer dans un système.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a pas encore de matériau interactif pour cet article. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Il existe trois types de contrôles de sécurité :</p>
+
+<ul>
+ <li><em>Les contrôles de gestion </em>: Ces contrôles portent sur la gestion du risque et sur la gestion de la sécurité du système d'informations.</li>
+ <li><em>Les contrôles opérationnels </em>: ces contrôles sont implémentés et utilisés par les personnes (et non par les systèmes).</li>
+ <li><em>Les contrôles techniques </em>: ces contrôles sont principalement implémentés et utilisés par les systèmes (matériels ou logiciels).</li>
+</ul>
+
+<p>Ces trois types de contrôles sont nécessaires afin d'obtenir une sécurité robuste. Ainsi, une règle de sécurité relève d'un contrôle de gestion mais est implémentée par des personnes (contrôle opérationnel) et des systèmes (contrôle technique). Prenons l'exemple du hameçonnage. Une entreprise peut décider d'avoir des règles afin que les utilisateurs ne visitent pas de sites web malveillants. Les contrôles de sécurité contre le hameçonnage incluent : des contrôles de gestion pour définir la règle à suivre, des contrôles techniques pour surveiller le contenu des <em>e-mails</em> et des sites web visités et des contrôles opérationnels en formant les utilisateurs afin que ceux-ci réalisent quand ils font face à une tentative de hameçonnage.</p>
+
+<p>La mise en place de contrôles de sécurité a généralement un inconvénient : les systèmes soumis aux contrôles sont moins pratiques voire plus difficiles à utiliser. Lorsque l'utilisabilité pose problème, de nombreux utilisateurs contourneront les contrôles de sécurité. Par exemple, si les mots de passe doivent être longs et complexes, les utilisateurs pourraient être amenés à les écrire sur des notes. Trouver le bon équilibre entre sécurité, utilisabilité et fonctionnalité est un défi complexe à relever mais qu'il est nécessaire de résoudre convenablement.</p>
+
+<p>Un autre principe fondamental des contrôles de sécurité consiste à utiliser plusieurs couches de sécurité. Des données sensibles peuvent par exemple être stockées sur un serveur protégé par différents contrôles : un pare-feu réseau, un pare-feu interne et des correctifs liés au système d'exploitation. Avoir plusieurs couches de sécurité permet de  parer au cas où une couche ne fonctionne pas ou ne permet pas de contrevenir à une menace donnée. Généralement, c'est une bonne idée que d'utiliser une combinaison de contre-mesures entre le réseau et le serveur et de contre-mesures internes au serveur.</p>
diff --git a/files/fr/apprendre/css/building_blocks/advanced_styling_effects/index.html b/files/fr/apprendre/css/building_blocks/advanced_styling_effects/index.html
new file mode 100644
index 0000000000..d33fa050a1
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/advanced_styling_effects/index.html
@@ -0,0 +1,435 @@
+---
+title: Effets de boîte avancés
+slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects
+tags:
+  - Article
+  - Boîtes
+  - CSS
+  - Codage
+  - Débutant
+  - Filtres
+  - Modes de mélange de couleurs
+  - Stylisation
+  - effets
+  - ombres de boîtes
+translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions de HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Donner des idées sur l'utilisation d'effets avancés pour les boîtes et apprendre quelques outils de style natifs propres au langage des CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ombres_des_boîtes">Ombres des boîtes</h2>
+
+<p>Revenons au module <a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p>
+
+<p>Vous trouverez les exemples de cet article dans le fichier  <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">code source</a> également).</p>
+
+<h3 id="Ombre_simple_pour_une_boîte">Ombre simple pour une boîte</h3>
+
+<p>Débutons avec un exemple simple. D'abord, un peu de HTML :</p>
+
+<div id="example_1">
+<pre class="brush: html">&lt;article class="simple"&gt;
+  &lt;p&gt;&lt;strong&gt;Attention&lt;/strong&gt; : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>Puis la CSS:</p>
+
+<pre class="brush: css">p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  color: white ;
+<code class="language-css"><span class="property token">  text-align</span><span class="punctuation token">:</span> center</code> ;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+}
+
+.simple {
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+}</pre>
+</div>
+
+<p>donnent le résultat suivant :</p>
+
+<p>{{ EmbedLiveSample('example_1', '100%', 100) }}</p>
+
+<p>Notez les quatre éléments valeur de la propriété <code>box-shadow</code> :</p>
+
+<ol>
+ <li>La première valeur est la mesure du <strong>décalage horizontal</strong> — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte.</li>
+ <li>La deuxième valeur est la mesure du <strong>décalage vertical</strong> — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte.</li>
+ <li>La troisième valeur est le <strong>rayon de flou</strong> — il représente la « quantité » de flou appliquée à l'ombre.</li>
+ <li>La valeur de la couleur : <strong>couleur de base</strong> de l'ombre.</li>
+</ol>
+
+<p>Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.</p>
+
+<h3 id="Ombres_multiples_pour_une_boîte">Ombres multiples pour une boîte</h3>
+
+<p>Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :</p>
+
+<div id="example_2">
+<div class="hidden">
+<pre class="brush: html">&lt;article class="multiple"&gt;
+  &lt;p&gt;&lt;strong&gt;Attention&lt;/strong&gt; : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.&lt;/p&gt;
+&lt;/article&gt;</pre>
+</div>
+
+<pre class="brush: css">p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  color: white;
+  text-align: center;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); }
+
+.multiple { box-shadow: 1px 1px 1px black,
+                        2px 2px 1px black,
+                        3px 3px 1px red,
+                        4px 4px 1px red,
+                        5px 5px 1px black,
+                        6px 6px 1px black; }
+</pre>
+</div>
+
+<p>Nous obtenons le résultat suivant :</p>
+
+<p>{{ EmbedLiveSample('example_2', '100%', 100) }}</p>
+
+<p>Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.</p>
+
+<h3 id="Autres_fonctionnalités_des_ombres_de_boîtes">Autres fonctionnalités des ombres de boîtes</h3>
+
+<p>Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé <code>inset</code> — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie.</p>
+
+<p>D'abord un HTML différent pour cet exemple :</p>
+
+<div id="example_3">
+<pre class="brush: html">&lt;button&gt;Appuyez ici !&lt;/button&gt;</pre>
+
+<pre class="brush: css">button {
+  width: 150px;
+  font-size: 1.1rem;
+  line-height: 2;
+  border-radius: 10px;
+  border: none;
+  background-image: linear-gradient(to bottom right, #777, #ddd);
+  box-shadow: 1px 1px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}
+
+button:focus, button:hover {
+  background-image: linear-gradient(to bottom right, #888, #eee);
+}
+
+button:active {
+  box-shadow: inset 2px 2px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}</pre>
+</div>
+
+<p>Et voici le résultat :</p>
+
+<p>{{ EmbedLiveSample('example_3', '100%', 70) }}</p>
+
+<p> </p>
+
+<p>Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.</p>
+
+<p>Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.</p>
+
+<div class="note">
+<p><strong>Note </strong>: il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code>  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p>
+</div>
+
+<h2 id="Filtres">Filtres</h2>
+
+<p>Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles :  vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants.</p>
+
+<p>Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété <code>filter</code> et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple <code>drop-shadow()</code> fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}}  et donne des effets analogues.  Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède :</p>
+
+<p>Tout d'abord, un HTML simple :</p>
+
+<pre class="brush: html">&lt;p class="filter"&gt;Filtre&lt;/p&gt;
+
+&lt;p class="box-shadow"&gt;Ombre de boîte&lt;/p&gt;
+</pre>
+
+<p>Et maintenant un peu de CSS pour créer une ombre portée à chacun :</p>
+
+<pre class="brush: css">p {
+  margin: 1rem auto;
+  padding: 20px;
+  <code class="language-css"><span class="property token">text-align</span><span class="punctuation token">:</span> center</code> ;
+  width: 100px;
+  border: 5px dashed red;
+}
+
+.filter {
+  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+}
+
+.box-shadow {
+  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
+}</pre>
+
+<p>Vous obtiendrez le résultat suivant :</p>
+
+<p>{{ EmbedLiveSample('Filtres', '100%', 200) }}</p>
+
+<p>Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur.</p>
+
+<p>Quelques autres points à noter :</p>
+
+<ul>
+ <li>Les filtres sont une fonctionnalité très récente — ils sont pris en charge dans la plupart des navigateurs modernes, y compris Microsoft Edge, mais ils ne sont pas du tout pris en charge dans Internet Explorer. Si vous utilisez des filtres dans vos designs, vous devrez vous assurer que le contenu reste utilisable sans filtres.</li>
+ <li>Comme vous pouvez le voir, nous avons inclus une version de la propriété <code>filter</code> préfixée par <code>-webkit-</code>. On appelle cela un {{glossary("Vendor Prefix")}} (préfixe fournisseur) : c'est parfois utilisé par un navigateur avant de rendre définitive l'implémentation d'une nouvelle fonctionnalité. Cela permet de la prendre en charge et de l'expérimenter sans entrer en conflit avec la version non préfixée. Les préfixes fournisseur ne sont pas destinés à être utilisés par les développeurs web, mais ils sont parfois utilisés dans les pages de production si ces fonctionnalités expérimentales sont vraiment désirées. Dans notre cas, la version <code>-webkit-</code> de la propriété est actuellement requise pour une prise en charge par Chrome/Safari/Opera, alors que Edge et Firefox utilisent la version finale non préfixée.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p>
+</div>
+
+<p>Vous pouvez voir d'autres exemples de filtres sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">code source</a>).</p>
+
+<h2 id="Modes_de_mélange_de_couleurs">Modes de mélange de couleurs</h2>
+
+<p>Les modes de mélanges de couleurs des CSS  permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop.</p>
+
+<p>Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :</p>
+
+<ul>
+ <li>{{cssxref("background-blend-mode")}} qui mélange plusieurs images d'arrière‑plan et des couleurs sur un seul élément.</li>
+ <li>{{cssxref("mix-blend-mode")}} qui mélange les couleurs de l'élément auquel la propriété est appliquée avec un élément de superposition — à la fois le fond et le contenu.</li>
+</ul>
+
+<p>Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a>  (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">code source</a>) et à la page de référence de {{cssxref("&lt;blend-mode&gt;")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p>
+</div>
+
+<h3 id="background-blend-mode">background-blend-mode</h3>
+
+<p>Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs :</p>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;/div&gt;
+&lt;div class="multiply"&gt;
+&lt;/div&gt;</pre>
+
+<p>Maintenant la CSS — nous ajoutons aux <code>&lt;div&gt;</code> une image d'arrière‑plan sur un fond vert :</p>
+
+<pre class="brush: css">div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+.multiply {
+  background-blend-mode: multiply;
+}</pre>
+
+<p>Le résultat obtenu est le suivant  — à gauche l'original et le mode mélange <code>multiply</code> à droite :</p>
+
+<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p>
+
+<h3 id="mix-blend-mode">mix-blend-mode</h3>
+
+<p>Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même <code>&lt;div&gt;</code>, mais chacun est posé sur un fond mauve pour montrer les effets du mélange :</p>
+
+<pre class="brush: html">&lt;article&gt;
+  Mode sans mélange
+  &lt;div&gt;
+
+  &lt;/div&gt;
+  &lt;div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;
+
+&lt;article&gt;
+  Mélange "multiply"
+  &lt;div class="multiply-mix"&gt;
+
+  &lt;/div&gt;
+  &lt;div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<p>Voici la CSS avec laquelle nous stylisons :</p>
+
+<pre class="brush: css">article {
+  width: 280px;
+  height: 180px;
+  margin: 10px;
+  position: relative;
+  display: inline-block;
+}
+
+div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+}
+
+article div:first-child {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+article div:last-child {
+  background-color: purple;
+  position: absolute;
+  bottom: -10px;
+  right: 0;
+  z-index: -1;
+}
+
+.multiply-mix {
+  mix-blend-mode: multiply;
+}</pre>
+
+<p>Nous obtenons le résultat suivant :</p>
+
+<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p>
+
+<p>Vous voyez ici que <code>mix-blend-mode: multiply;</code> a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <code>&lt;div&gt;</code> situé dessous.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p>
+</div>
+
+<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2>
+
+<p>L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire <code>-webkit-text-fill-color: transparent;</code> cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur <code>-webkit-</code> même pour les navigateurs non-Webkit/Chrome :</p>
+
+<pre class="brush: css">.text-clip {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}</pre>
+
+<p>Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe <code>-webkit-</code> ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe <code>-webkit-</code> que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes.</p>
+
+<p>Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>,  allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p>
+</div>
+
+<h2 id="Apprentissage_actif_expérimenter_certains_effets">Apprentissage actif : expérimenter certains effets</h2>
+
+<p>À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous.</p>
+
+<p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> l'exemple avec le bouton correspondant.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;Zone de saisie HTML&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;div class="style-me"&gt;
+&lt;/div&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Zone de saisie de la CSS&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;.style-me {
+  width: 280px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background-color: red;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
+              linear-gradient(to bottom right, #f33, #a33);
+} &lt;/textarea&gt;
+
+  &lt;h2&gt;Zone de rendu&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Réinitialiser" style="margin: 10px 10px 0 0;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/apprendre/css/building_blocks/backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..53299b96fe
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/backgrounds_and_borders/index.html
@@ -0,0 +1,318 @@
+---
+title: Arrière-plans et bordures
+slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
+translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Compétences informatique basiques , <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2>
+
+<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} </code>
+</pre>
+
+<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p>
+
+<h3 id="Couleur_de_fond">Couleur de fond</h3>
+
+<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
+
+<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p>
+
+<p><strong>Expérimentez avec ce code, en faisant varier les valeurs  <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> dans les différentes déclarations.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
+
+<h3 id="Images_de_fond">Images de fond</h3>
+
+<p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p>
+
+<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
+
+<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
+
+<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4>
+
+<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
+
+<ul>
+ <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li>
+ <li><code>repeat-x</code> — répétition horizontale.</li>
+ <li><code>repeat-y</code> — répétition verticale.</li>
+ <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li>
+</ul>
+
+<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à  </strong><code>no-repeat</code><strong>, une seule étoile apparaît donc. Remplacez par </strong><code>repeat-x</code><strong> et </strong><code>repeat-y</code><strong>  et observez.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
+
+<h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4>
+
+<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
+
+<p>On peut aussi utiliser les mots-clé :</p>
+
+<ul>
+ <li><code>cover</code> — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.</li>
+ <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li>
+</ul>
+
+<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p>
+
+<p>Essayez ce qui suit :</p>
+
+<ul>
+ <li>Changez les dimensions de l'arrière-plan.</li>
+ <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li>
+ <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
+
+<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4>
+
+<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: La valeur par défaut de  <code>background-position</code> est <code>(0,0)</code>.</p>
+</div>
+
+<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p>
+
+<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} </code>
+</pre>
+
+<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} </code>
+</pre>
+
+<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p>
+
+<pre class="brush: css notranslate">.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}</pre>
+
+<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : </p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+} </code></pre>
+
+<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p>
+</div>
+
+<h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3>
+
+<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p>
+
+<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
+
+<p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
+
+<h3 id="Images_de_fond_multiples"> Images de fond multiples</h3>
+
+<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code> , chacune séparé par une virgule.</p>
+
+<p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: on peut joyeusement mélanger gradients et images de fond classiques.</p>
+</div>
+
+<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que  <code>background-image</code>:</p>
+
+<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;</pre>
+
+<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l' <code>image3</code> recevra la première valeur, et l' <code>image4</code> recevra la seconde valeur.</p>
+
+<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
+
+<h3 id="Attachement_du_fond">Attachement du fond</h3>
+
+<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:</p>
+
+<ul>
+ <li><code>scroll</code>: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.</li>
+ <li><code>fixed</code>: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.</li>
+ <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li>
+</ul>
+
+<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p>
+
+<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background </h3>
+
+<p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p>
+
+<p>If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with <code>no-repeat</code> and a position, then a color.</p>
+
+<p>There are a few rules that need to be followed when writing background image shorthand values, for example:</p>
+
+<ul>
+ <li>A <code>background-color</code> may only be specified after the final comma.</li>
+ <li>The value for <code>background-size</code> may only be included immediately after <code>background-position</code>, separated with the '/' character, like this: <code>center/80%</code>.</li>
+</ul>
+
+<p>Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
+
+<h3 id="Arrière-plans_et_accessibilité">Arrière-plans et accessibilité</h3>
+
+<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p>
+
+<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p>
+
+<h2 id="Bordures">Bordures</h2>
+
+<p>When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.</p>
+
+<p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border: 1px solid black;
+} </code></pre>
+
+<p>Or we can target one edge of the box, for example:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top: 1px solid black;
+} </code></pre>
+
+<p>The individual properties for these shorthands would be:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+} </code></pre>
+
+<p>And for the longhands:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p>
+</div>
+
+<p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
+
+<h3 id="Coins_arrondis">Coins arrondis</h3>
+
+<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}}  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p>
+
+<p>Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-radius: 10px;
+} </code></pre>
+
+<p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-right-radius: 1em 10%;
+} </code></pre>
+
+<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
+
+<h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2>
+
+<p>Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :</p>
+
+<ol>
+ <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li>
+ <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li>
+ <li>Donnez au <code>&lt;h2&gt;</code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p>
+
+<p>Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_cours">Dans ce cours</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/cascade_et_heritage/index.html b/files/fr/apprendre/css/building_blocks/cascade_et_heritage/index.html
new file mode 100644
index 0000000000..4f394ae7f2
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/cascade_et_heritage/index.html
@@ -0,0 +1,343 @@
+---
+title: Cascade et héritage
+slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
+tags:
+  - Apprendre
+  - CSS
+  - Cascade
+  - Débutant
+  - Héritage
+  - Règles
+  - ordre dans le source
+  - spécificité
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.</p>
+
+<p>Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Règles_contradictoires">Règles contradictoires</h2>
+
+<p>CSS est l'acronyme de <strong>Cascading Style Sheets</strong>, qu'on peut traduire par <em>feuilles de style en cascade</em> et la compréhension de ce premier mot <em>cascading</em> est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.</p>
+
+<p>À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La <strong>cascade</strong>, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.</p>
+
+<p>Le concept d'<strong>héritage</strong> est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.</p>
+
+<p>Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.</p>
+
+<h3 id="La_cascade">La cascade</h3>
+
+<p>À un niveau élémentaire, la <strong>cascade</strong> des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.</p>
+
+<p>Dans l'exemple ci-dessous deux règles pourraient s'appliquer à <code>h1</code>. Au final <code>h1</code> est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Spécificité">Spécificité</h3>
+
+<p>Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :</p>
+
+<ul>
+ <li>Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ;</li>
+ <li>Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut <code>class</code> a la valeur choisie — son score est plus important.</li>
+</ul>
+
+<p>Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à <code>h1</code>. Au final <code>h1</code> est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.</p>
+
+<h3 id="Héritage">Héritage</h3>
+
+<p>L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.</p>
+
+<p>Par exemple, si vous fixez une <code>color</code> et une <code>font-family</code> pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la <a href="/fr/docs/Web/CSS/color#Specifications">section des spécifications de la propriété color</a>, par exemple.</p>
+</div>
+
+<h2 id="Comprendre_comment_ces_concepts_se_combinent">Comprendre comment ces concepts se combinent</h2>
+
+<p>Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !</p>
+
+<h2 id="Comprendre_lhéritage">Comprendre l'héritage</h2>
+
+<p>Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un  {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (<code>padding</code>) et une couleur de police pour la <code>&lt;ul&gt;</code> extérieure.</p>
+
+<p>La couleur est transmise aux enfants directs, et aussi enfants indirects — les <code>&lt;li&gt;</code> de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe <code>special</code> à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !</p>
+
+<p>Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.</p>
+
+<h3 id="Contrôler_lhéritage">Contrôler l'héritage</h3>
+
+<p>CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à <code>inherit</code>.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  <code>inherit</code>, sinon il est identique à <code>initial</code>.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.</p>
+</div>
+
+<p>Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.</p>
+
+<p>Par exemple :</p>
+
+<ol>
+ <li>Le deuxième item de la liste est dans la classe <code>my-class-1</code>. Cela définit la couleur de l'élément <code>&lt;a&gt;</code> qu'il contient à <code>inherit</code>. Si vous supprimez cette règle, quelle est la couleur du lien ?</li>
+ <li>Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.</li>
+ <li>Quels liens changeront de couleur si on redéfinit la couleur de l'élément  <code>&lt;a&gt;</code> — par exemple <code>a { color: red; }</code> ?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="Réinitialiser_la_valeur_de_toutes_les_propriétés">Réinitialiser la valeur de toutes les propriétés</h3>
+
+<p>En CSS, la propriété raccourci <code>all</code> peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (<code>inherit</code>, <code>initial</code>, <code>unset</code>, ou <code>revert</code>). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.</p>
+
+<p>Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément <code>&lt;blockquote&gt;</code> lui-même, le second <code>&lt;blockquote&gt;</code> appartient à une classe qui définit la valeur de <code>all</code> à <code>unset</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Essayez de donner à <code>all</code> l'une des autres valeurs possibles et observez les changements.</p>
+
+<h2 id="Comprendre_la_cascade">Comprendre la cascade</h2>
+
+<p><span>Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le </span><code>&lt;body&gt;</code><span>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.</span></p>
+
+<p>Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :</p>
+
+<ol>
+ <li><strong>Importance</strong></li>
+ <li><strong>Spécificité</strong></li>
+ <li><strong>Ordre d'apparition dans le source</strong></li>
+</ol>
+
+<p>Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.</p>
+
+<h3 id="Ordre_dapparition_dans_le_source">Ordre d'apparition dans le source </h3>
+
+<p>Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..</p>
+
+<h3 id="Spécificité_2">Spécificité</h3>
+
+<p>L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une <strong>spécificité</strong> plus élevée —  elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.</p>
+
+<p>Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.</p>
+
+<p>Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.</p>
+
+<p>Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.</p>
+
+<p>Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :</p>
+
+<ol>
+ <li><strong>Milliers </strong>: ajouter 1 dans cette colonne si la déclaration apparaît dans un  {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.</li>
+ <li><strong>Centaines </strong>: ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.</li>
+ <li><strong>Dizaines </strong>: ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.</li>
+ <li><strong>Unités </strong>: ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Le sélecteur  universel (<code>*</code>), les combinateurs (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' '), et la pseudo-class de négation (<code>:not</code>) n'affectent en rien la spécificité.</p>
+</div>
+
+<p>Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la <a href="/fr/docs/Web/CSS/CSS_Selectors">référence MDN des sélecteurs</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sélecteur</th>
+   <th scope="col">Milliers</th>
+   <th scope="col">Centaines</th>
+   <th scope="col">Dizaines</th>
+   <th scope="col">Unités</th>
+   <th scope="col">Spécificité</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="fr"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifiant</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément </td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Avant de continuer, regardons un exemple en action.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.</p>
+
+<ul>
+ <li>Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un.</li>
+ <li>Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104.</li>
+ <li>Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un <em>million</em> de sélecteurs de <strong>class</strong> combinés ne prendront jamais le dessus sur <em>un</em> sélecteur d'<strong>id</strong>.</p>
+
+<p>Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.</p>
+</div>
+
+<h3 id="!important">!important</h3>
+
+<p>Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale  <code>!important</code> mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.</p>
+
+<p>Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.</p>
+
+<ol>
+ <li>Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.</li>
+ <li>Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !</li>
+ <li>Les deux éléments sont dans la classe <code>better</code>, mais le deuxième a aussi l'{{htmlattrxref("id")}}  <code>winning</code>. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément,  alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.</li>
+ <li>Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration <code>!important</code> dans la deuxième règle — écrit après  <code>border: none</code>,  ce mot-clé signifie que cette déclaration l'emporte sur le <code>border</code> définie dans la règle précédente, même si l'ID a une spécificité plus élevée.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: La seule façon de dépasser cette déclaration  <code>!important</code> serait d'ajouter un <code>!important</code> dans une déclaration de même<em> spécificité</em> apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.</p>
+</div>
+
+<p>Il est utile de connaître  <code>!important</code> , ne serait-ce que pour le reconnaître dans le code des autres. <strong>Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.</strong> <code>!important</code> modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.</p>
+
+<p>Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser <code>!important</code>. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.</p>
+
+<h2 id="Où_sont_écrites_les_règles_CSS">Où sont écrites les règles CSS</h2>
+
+<p>Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.</p>
+
+<h2 id="En_résumé">En résumé</h2>
+
+<p>Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :</p>
+
+<ol>
+ <li>Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).</li>
+ <li>Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).</li>
+ <li>Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).</li>
+ <li>Déclarations <code>!important</code> dans les feuilles de style d'auteur.</li>
+ <li>Déclarations <code>!important</code> dans les feuilles de style utilisateur.</li>
+</ol>
+
+<p>Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant <code>!important</code> dans leurs règles.</p>
+
+<h2 id="Activité_jouer_dans_la_cascade">Activité : jouer dans la cascade</h2>
+
+<p>Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur <code>&lt;color&gt;</code>. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.</p>
+
+<p>Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">jetez un coup d'œil à la solution ici</a>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p>
+
+<h2 id="À_suivre">À suivre</h2>
+
+<p>Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.</p>
+
+<p>Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.</p>
+
+<p>En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_cours">Dans ce cours</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/debugging_css/index.html b/files/fr/apprendre/css/building_blocks/debugging_css/index.html
new file mode 100644
index 0000000000..01f17c25a5
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/debugging_css/index.html
@@ -0,0 +1,202 @@
+---
+title: Debugging CSS
+slug: Apprendre/CSS/Building_blocks/Debugging_CSS
+translation_of: Learn/CSS/Building_blocks/Debugging_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Comment_accéder_aux_outils_de_développement_du_navigateur">Comment accéder aux outils de développement du navigateur</h2>
+
+<p>L'article <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement de navigateurs</a> est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.</p>
+
+<p>You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, and <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.</p>
+
+<p>In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">an example file</a>. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.</p>
+
+<h2 id="The_DOM_versus_view_source">The DOM versus view source</h2>
+
+<p>Something that can trip up newcomers to DevTools is the difference between what you see when you <a href="/en-US/docs/Tools/View_source">view the source</a> of a webpage, or look at the HTML file you put on the server, and what you can see in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.</p>
+
+<p>In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <code>&lt;h2&gt;</code> but closing with an <code>&lt;/h3&gt;</code>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <code>&lt;h2&gt;</code> with an <code>&lt;/h2&gt;</code>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.</p>
+
+<p>View Source in comparison, is simply the HTML source code as stored on the server. The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.</p>
+
+<h2 id="Inspecting_the_applied_CSS">Inspecting the applied CSS</h2>
+
+<p>Select an element on your page, either by right/ctrl-clicking on it and selecting <em>Inspect</em>, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of <code>box1</code>; this is the first element on the page with a bordered box drawn around it.</p>
+
+<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
+
+<p>If you look at the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code>&lt;body&gt;</code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p>
+
+<p>Also useful is the ability to expand out shorthand properties. In our example the <code>margin</code> shorthand is used.</p>
+
+<p><strong>Click on the little arrow to expand the view, showing the different longhand properties and their values.</strong></p>
+
+<p><strong>You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example <code>border-radius</code>, and the CSS will stop applying.</strong></p>
+
+<p>You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.</p>
+
+<p>The following video provides some useful tips on debugging CSS using the Firefox DevTools:</p>
+
+<p>{{EmbedYouTube("O3DAm82vIvU")}}</p>
+
+<h2 id="Editing_values">Editing values</h2>
+
+<p>In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.</p>
+
+<p><strong>With <code>box1</code> selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.</strong></p>
+
+<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
+
+<h2 id="Adding_a_new_property">Adding a new property</h2>
+
+<p>You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <code>&lt;body&gt;</code> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.</p>
+
+<p><strong>You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting <code>font-size</code>, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.</strong></p>
+
+<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p>
+</div>
+
+<h2 id="Understanding_the_box_model">Understanding the box model</h2>
+
+<p>In previous lessons we have discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p>
+
+<p>The <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p>
+
+<p>In this panel, one of the detailed properties is the <code>box-sizing</code> property, which controls what box model the element uses.</p>
+
+<p><strong>Compare the two boxes with classes <code>box1</code> and <code>box2</code>. They both have the same width applied (400px), however <code>box1</code> is visually wider. You can see in the layout panel that it is using <code>content-box</code>. This is the value that takes the size you give the element and then adds on the padding and border width.</strong></p>
+
+<p>The element with a class of <code>box2</code> is using <code>border-box</code>, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case <code>width: 400px</code>.</p>
+
+<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Find out more in <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p>
+</div>
+
+<h2 id="Solving_specificity_issues">Solving specificity issues</h2>
+
+<p>Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.</p>
+
+<p>In our example file there are two words that have been wrapped in an <code>&lt;em&gt;</code> element. One is displaying as orange and the other hotpink. In the CSS we have applied:</p>
+
+<pre class="brush: css notranslate">em {
+  color: hotpink;
+  font-weight: bold;
+}</pre>
+
+<p>Above that in the stylesheet however is a rule with a <code>.special</code> selector:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+}</pre>
+
+<p>As you will recall from the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p>
+
+<p><strong>Inspect the <code>&lt;em&gt;</code> with the class of <code>.special</code> and DevTools will show you that orange is the color that applies, and also shows you the <code>color</code> property applied to the em crossed out. You can now see that the class is overriding the element selector.</strong></p>
+
+<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
+
+<h2 id="Find_out_more_about_the_Firefox_DevTools">Find out more about the Firefox DevTools</h2>
+
+<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/en-US/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/en-US/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p>
+
+<h2 id="Debugging_problems_in_CSS">Debugging problems in CSS</h2>
+
+<p>DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.</p>
+
+<h3 id="Take_a_step_back_from_the_problem">Take a step back from the problem</h3>
+
+<p>Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.</p>
+
+<h3 id="Do_you_have_valid_HTML_and_CSS">Do you have valid HTML and CSS?</h3>
+
+<p>Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.</p>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li>
+ <li><a href="https://validator.w3.org/">HTML validator</a></li>
+</ul>
+
+<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">Is the property and value supported by the browser you are testing in?</h3>
+
+<p>Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.</p>
+
+<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
+
+<p>You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.</p>
+
+<p>{{compat("css.shape-outside")}}</p>
+
+<h3 id="Is_something_else_overriding_your_CSS">Is something else overriding your CSS?</h3>
+
+<p>This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.</p>
+
+<h3 id="Make_a_reduced_test_case_of_the_problem">Make a reduced test case of the problem</h3>
+
+<p>If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.</p>
+
+<p>A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.</p>
+
+<p>To create a reduced test case:</p>
+
+<ol>
+ <li>If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like <a href="https://codepen.io/">CodePen</a> is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.</li>
+ <li>If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript <em>does</em> make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.</li>
+ <li>Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.</li>
+ <li>Remove any CSS that doesn't impact the issue.</li>
+</ol>
+
+<p>In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.</p>
+
+<p>If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.</p>
+
+<p>In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>).</p>
+
+<p>As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/handling_different_text_directions/index.html b/files/fr/apprendre/css/building_blocks/handling_different_text_directions/index.html
new file mode 100644
index 0000000000..7469a614ce
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/handling_different_text_directions/index.html
@@ -0,0 +1,155 @@
+---
+title: Handling different text directions
+slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions
+translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordues en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web à tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le Français) que celles qui se lisent de droite à gauche (comme l'Arabe).</p>
+
+<p>Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le Japonais) — Ces différentes directionnalités sont appelées <strong>writing modes</strong> (modes d'écriture en français). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand the importance of writing modes to modern CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Que_sont_les_modes_décritures">Que sont les modes d'écritures?</h2>
+
+<p>Un mode d'écriture en CSS fait référence au sens d'écriture du texte, soit horizontalement, soit verticalement. La propriété {{cssxref("writing-mode")}} nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.</p>
+
+<p>Dans l'exemple ci-dessous nous avons un titre affiché qui utilise <code>writing-mode: vertical-rl</code>. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
+
+<p>Les trois valeurs possibles pour la propriété <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> sont:</p>
+
+<ul>
+ <li><code>horizontal-tb</code>: Top-to-bottom block flow direction. Sentences run horizontally.</li>
+ <li><code>vertical-rl</code>: Right-to-left block flow direction. Sentences run vertically.</li>
+ <li><code>vertical-lr</code>: Left-to-right block flow direction. Sentences run vertically.</li>
+</ul>
+
+<p>So the <code>writing-mode</code> property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.</p>
+
+<h2 id="Writing_modes_and_block_and_inline_layout">Writing modes and block and inline layout</h2>
+
+<p>We have already discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">block and inline layout</a>, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.</p>
+
+<p>If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses <code>writing-mode: horizontal-tb</code>, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses <code>writing-mode: vertical-rl</code>; this is a writing mode that is written vertically and from right to left.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
+
+<p>When we switch the writing mode, we are changing which direction is block and which is inline. In a <code>horizontal-tb</code> writing mode the block direction runs from top to bottom; in a <code>vertical-rl</code> writing mode the block direction runs right-to-left horizontally. So the <strong>block dimension</strong> is always the direction blocks are displayed on the page in the writing mode in use. The <strong>inline dimension</strong> is always the direction a sentence flows.</p>
+
+<p>This figure shows the two dimensions when in a horizontal writing mode.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p>
+
+<p>This figure shows the two dimensions in a vertical writing mode.</p>
+
+<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
+
+<p>Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.</p>
+
+<h3 id="Direction">Direction</h3>
+
+<p>In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!</p>
+
+<p>Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about <em>start</em> and <em>end</em> along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.</p>
+
+<h2 id="Logical_properties_and_values">Logical properties and values</h2>
+
+<p>The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.</p>
+
+<p>Let's take a look at our two boxes again — one with a <code>horizontal-tb</code> writing mode and one with <code>vertical-rl</code>. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
+
+<p>What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.</p>
+
+<p>To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like <code>width</code> and <code>height</code> — with <strong>logical</strong>, or <strong>flow relative</strong> versions.</p>
+
+<p>The property mapped to <code>width</code> when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for <code>height</code> is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced <code>width</code> with <code>inline-size</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
+
+<h3 id="Logical_margin_border_and_padding_properties">Logical margin, border, and padding properties</h3>
+
+<p>In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.</p>
+
+<p>The <code>margin-top</code> property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.</p>
+
+<p>The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.</p>
+
+<p>You can see a comparison between physical and logical properties below.</p>
+
+<p><strong>If you change the writing mode of the boxes by switching the <code>writing-mode</code> property on <code>.box</code> to <code>vertical-rl</code>, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.</strong></p>
+
+<p><strong>You can also see that the {{htmlelement("h2")}} has a black <code>border-bottom</code>. Can you work out how to make that bottom border always go below the text in both writing modes?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
+
+<p>There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties and Values</a>.</p>
+
+<h3 id="Logical_values">Logical values</h3>
+
+<p>We have so far looked at logical property names. There are also some properties that take physical values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. These values also have mappings, to logical values — <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, and <code>inline-start</code>.</p>
+
+<p>For example, you can float an image left to cause text to wrap round the image. You could replace <code>left</code> with <code>inline-start</code> as shown in the example below.</p>
+
+<p><strong>Change the writing mode on this example to <code>vertical-rl</code> to see what happens to the image. Change <code>inline-start</code> to <code>inline-end</code> to change the float.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
+
+<p>Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.</p>
+
+<div class="blockIndicator note">
+<p>Currently, only Firefox supports flow relative values  for <code>float</code>. If you are using <strong>Google Chrome</strong> or <strong>Microsoft Edge</strong>, you may find that the image did not float.</p>
+</div>
+
+<h3 id="Should_you_use_physical_or_logical_properties">Should you use physical or logical properties?</h3>
+
+<p>The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Test your skills: writing modes</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.</p>
+
+<p>In the next module we will take a good look at overflow in CSS.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/index.html b/files/fr/apprendre/css/building_blocks/index.html
new file mode 100644
index 0000000000..37ab79216a
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/index.html
@@ -0,0 +1,78 @@
+---
+title: Blocs de base en CSS
+slug: Apprendre/CSS/Building_blocks
+tags:
+  - CSS
+  - Débutant
+  - Tutoriel
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p>Ce cours fait suite aux <a href="/fr/docs/Learn/CSS/First_steps">premiers pas avec CSS</a> : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.<br>
+ <br>
+ L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme <a href="/fr/docs/Learn/CSS/Styling_text">le style de texte</a> et la <a href="/fr/docs/Apprendre/CSS/CSS_layout">mise en page CSS</a>.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Avant de commencer ce cours, nous vous recommandons :</p>
+
+<ol>
+ <li>D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.</li>
+ <li>De disposer d'un environnement de travail comme il est décrit dans l'article <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a> et de savoir créer et gérer des fichiers (cf. leçon <a href="/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>).</li>
+ <li>D'être suffisamment à votre aise avec HTML (voir le cours <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">introduction au HTML</a>).</li>
+ <li>D'avoir compris les bases du CSS telles qu'exposées dans le cours <a href="/fr/docs/Learn/CSS/First_steps">premiers pas avec CSS.</a></li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/fr/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance (Cascade et héritage)</a></dt>
+ <dd>Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors (sélecteurs CSS)</a></dt>
+ <dd>Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties :
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model (le modèle des boîtes)</a></dt>
+ <dd>Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders (arrières-plans et bordures)</a></dt>
+ <dd>Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions (manipuler les différentes directions du texte)</a></dt>
+ <dd>Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (<strong>writing modes</strong>). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content (quand ça dépasse)</a></dt>
+ <dd>Autre concept important du CSS: le dépassement (<strong>overflow</strong>) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units (valeurs et unités)</a></dt>
+ <dd>Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS (dimensionner les éléments en CSS)</a></dt>
+ <dd>Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements (images, médias et éléments de formulaires)</a></dt>
+ <dd>Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.</dd>
+ <dt><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page des tableaux</a></dt>
+ <dd>Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS (déboguer le CSS)</a></dt>
+ <dd>Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS (organiser votre CSS)</a></dt>
+ <dd>Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/CSS/Building_blocks/Advanced_styling_effects">Effets de boîte avancés</a></dt>
+ <dd>Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres.</dd>
+</dl>
diff --git a/files/fr/apprendre/css/building_blocks/le_modele_de_boite/index.html b/files/fr/apprendre/css/building_blocks/le_modele_de_boite/index.html
new file mode 100644
index 0000000000..927bbdc232
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/le_modele_de_boite/index.html
@@ -0,0 +1,354 @@
+---
+title: Le modèle de Boîte
+slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
+tags:
+  - Boîte
+  - CSS
+  - Disposition
+  - Débutant
+  - Mise en page
+  - Model
+  - Modèle
+  - Position
+  - Positionnement
+  - border
+  - box
+  - display
+  - margin
+  - padding
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En CSS, tout élement est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des élements d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Compétences informatique basiques, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_Boîtes_en_ligne_et_en_bloc">Les Boîtes "en ligne" et "en bloc"</h2>
+
+<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em>). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis à vis des autres boîtes :</p>
+
+<p>Si une boîte est définie en bloc, elle suivra alors les règles suivantes :</p>
+
+<ul>
+ <li>La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible.</li>
+ <li>La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après.</li>
+ <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) sont toujours respectées.</li>
+ <li>Les propriétés {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}} — correspondantes respectivement aux écarts de remplissage interne, externe et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li>
+</ul>
+
+<p>À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<code>&lt;h1&gt;</code>,<code>&lt;h2&gt;</code>, etc.) et les paragraphes (<code>&lt;p&gt;</code>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.</p>
+
+<p>Si une boîte est positionnée en ligne, alors :</p>
+
+<ul>
+ <li>La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.</li>
+ <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) ne s'appliquent pas.</li>
+ <li>Le padding, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li>
+ <li>Le padding, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li>
+</ul>
+
+<p>Les éléments <code>&lt;a&gt;</code>, utilisés pour les liens, ou encore <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> et <code>&lt;strong&gt;</code> sont tous des éléments qui s'affichent "en ligne" par défaut.</p>
+
+<p>Le type de boîte appliqué à un élement est défini par la valeur de la propriété {{cssxref("display")}} tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieur de positionnement (ou "<em>display</em>" en anglais).</p>
+
+<h2 id="Aparté_Les_positionnements_intérieurs_et_extérieurs">Aparté : Les positionnements intérieurs et extérieurs</h2>
+
+<p>Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement <strong>intérieurs</strong> ("<em>inner dipslay</em>") et <strong>extérieurs</strong> ("<em>outer display</em>"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement <em>extérieur</em> qui détermine si la boîte est "en ligne" ou bien "en bloc".</p>
+
+<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des élements contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p>
+
+<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type depositionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p>
+</div>
+
+<p>Lorque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+
+<p>Les dipositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p>
+
+<h2 id="Exemples_de_quelques_types_de_positionnement">Exemples de quelques types de positionnement</h2>
+
+<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure (un cadre) ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p>
+
+<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenue dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p>
+
+<p>Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <code>&lt;span&gt;</code>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <code>&lt;span&gt;</code> une classe CSS nommée "block" qui lui attribue la propriété <code>display: block;</code>, ce qui explique la différence de mise en page observée.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+
+<p>Nous avons dans cet exemple le comportement typique d'un élément en ligne (<code>inline</code>), observant chacune des règles énoncées plus haut : l'élément <code>&lt;span&gt;</code> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - <em>en ligne</em> donc - des autres éléments.</p>
+
+<p>Nous avons en suite un élément <code>&lt;ul&gt;</code> dont la propriété de positionnement est <code>display: inline-flex;</code>, ce qui fait du <code>&lt;ul&gt;</code> une boîte en ligne, contenant des éléments de liste (<code>&lt;li&gt;</code>) dipsosés en "flex".</p>
+
+<p>Pour finir, nous avons deux paragraphes, tous deux définis en <code>display: inline;</code>. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc.</p>
+
+<p><strong>Dans cet exemple, nous vous invitons à passer de <code>display: inline;</code> à <code>display: block;</code> ou encore de <code>display: inline-flex;</code> à <code>display: flex;</code> pour observer les modifications apportées par ces modes de positionnement.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+
+<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environement dans la mise en page.</p>
+
+<p>Pour le reste de la leçon, nous ne parlerons plus que du <strong>type de positionnement extérieur</strong>.</p>
+
+<h2 id="Quest-ce_que_le_Modèle_de_Boîte_en_CSS">Qu'est-ce que le Modèle de Boîte en CSS ?</h2>
+
+<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir le <em>margin</em> (remplissage extérieur), le <em>border</em> (cadre), le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p>
+
+<h3 id="Les_composants_dune_boîte">Les composants d'une boîte</h3>
+
+<p>Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :</p>
+
+<ul>
+ <li><strong>La boîte de contenu </strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS {{cssxref("width")}} et {{cssxref("height")}}.</li>
+ <li><strong>La boîte de padding</strong> <strong>(marge intérieure) </strong>: Le padding est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("padding")}} et ses autres propriétés connexes.</li>
+ <li><strong>La boîte du cadre </strong>: Le cadre englobe le contenu et le padding pour former une bordure. Sa taille et son style sont paramétrés par la propriété {{cssxref("border")}} et ses propriétés sous-jacentes.</li>
+ <li><strong>La boîte de margin (marge extérieure)</strong> : Le margin est la couche la plus à l'extérieur, englobant le contenu, le padding and le border. Comme le padding, il s'agit d'une zone vierge d'espacement mais qui est cette fois située a l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("margin")}} et ses autres propriétés connexes.</li>
+</ul>
+
+<p>Le schéma ci-dessous montre la structure de ces différentes couches:</p>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="Le_Modèle_Standard_de_Boîte_CSS">Le Modèle Standard de Boîte CSS</h3>
+
+<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille des padding et du border (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. Le margin étant extérieur, il ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p>
+
+<p>En prenant une boîte définie avec les valeurs suivantes de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code> :</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de <code>padding</code> et de <code>border</code> (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de <code>width</code> et de <code>height</code>.</p>
+
+<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Le margin (marge extérieure) n'est pas comptabilisé dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc au border (le cadre) et ne s'étend pas au margin.</p>
+</div>
+
+<h3 id="Le_Modèle_Alternatif_de_Boîte_CSS">Le Modèle Alternatif de Boîte CSS</h3>
+
+<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constament les dimensions du border et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le padding et le border. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension la taille du padding et du border. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes: width = 350px, height = 150px.</p>
+
+<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut  définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte du cadre</strong> (la "<em>border box</em>") comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répendu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide de ces quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code>&lt;html&gt;</code> et en utilisant l'effet cascade du CSS en paramètrant tous les autres éléments sur la valeur hérité du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du coté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p>
+</div>
+
+<h2 id="Manipuler_les_modèles_de_boîtes">Manipuler les modèles de boîtes</h2>
+
+<p>Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe <code>.box</code> qui leur confère les mêmes valeurs pour les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. La seule différence est que la seconde boîte utilise le modèle alternatif.</p>
+
+<p><strong>Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe <code>.alternate</code>) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p>
+</div>
+
+<h3 id="Utiliser_les_DevTools_pour_voir_le_modèle_de_boîte">Utiliser les DevTools pour voir le modèle de boîte</h3>
+
+<p>Les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit &gt; Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, border et margin) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p>
+
+<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="Margins_paddings_et_borders">Margins, paddings, et borders</h2>
+
+<p>Nous avons déjà rencontré ensemble les propriétés {{cssxref("margin")}}, {{cssxref("padding")}} et {{cssxref("border")}}, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatres côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparement chaque côté pour plus de personalisation.</p>
+
+<p>Regardons de plus près ces nouvelles propriétés.</p>
+
+<h3 id="Les_Margins_Marges_extérieures">Les Margins (Marges extérieures)</h3>
+
+<p>Le margin est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). Le margin repousse les éléments alentours de le boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, le margin est toujours décompté en surplus de la taille totale de la boîte et est ajouté après que celle-ci a été calculée.</p>
+
+<p>On peut fixer les quatres margins d'une boîte d'un seul coup à l'aide de la propriété {{cssxref("margin")}}, ou bien régler chaque côté individuelement avec les propriétés équivalentes suivantes :</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou suprimés (si le margin est négatif) par vos soins.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+
+<h4 id="La_fusion_des_marges">La fusion des marges</h4>
+
+<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des margins qui se touchent, alors ces margins fusionnent pour ne faire plus qu'un seul margin qui aura pour taille la plus grande des deux tailles des margins initiaux.</p>
+
+<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux margins se touchent, ils fusionnent ensemble, et ainsi le margin final entre les deux paragraphes est de 50 pixels et non 80, la somme des deux margins.</p>
+
+<p><strong>Vous pouvez tester cette propriété par vous même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. Le margin visible entre les deux paragraphes demeure inchangé — il conserve sa taille de 50 pixels qui provient du <code>margin-bottom</code> du premier paragraphe.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+
+<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p>
+
+<h3 id="Les_Borders_Cadres">Les Borders (Cadres)</h3>
+
+<p>le border (le cadre en français) se situe entre le margin (marge externe) et le padding (marge interne) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille du border s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille du border rends la taille disponible pour le contenu plus petite puisqu'il utilise une partie du <code>width</code> et <code>height</code> disponible.</p>
+
+<p>Pour agir sur le style d'un border, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatres côtés du cadre.</p>
+
+<p>Vous pouvez naturellement fixer la forme taille et couleur des quatres côtés en une seule fois, par le biais de la propriété <code>border</code>.</p>
+
+<p>Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer un cadre (border). Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages du MDN pour les propriétés des borders (données ci-dessus) vous documentent sur les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+
+<h3 id="Les_Paddings_Marges_intérieures">Les Paddings (Marges intérieures)</h3>
+
+<p>Les paddings (ou marges intérieures) se situent entre le border (le cadre) et la zone du contenu. Contrairement aux margins, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu du border (le cadre).</p>
+
+<p>On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété {{cssxref("padding")}}, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>Si vous modifiez les valeurs du padding sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p>
+
+<p><strong>Tentez aussi de modifier la valeur du padding dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu du cadre.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+
+<h2 id="Le_modèle_de_boîte_et_la_disposition_en_ligne">Le modèle de boîte et la disposition en ligne</h2>
+
+<p>Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <code>&lt;span&gt;</code> par exemple ?</p>
+
+<p>Dans l'exemple ci-après, nous avons un élément <code>&lt;span&gt;</code> inclus dans un paragraphe auquel on a défini les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. Vous pouvez alors observer que les paramètres <code>width</code> et <code>height</code> sont totalement ignorés. Les propriétés de <code>margin</code>, <code>padding</code> et <code>border</code> sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+
+<h2 id="le_positionnement_display_inline-block">le positionnement display: inline-block</h2>
+
+<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la diposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p>
+
+<p>C'est la solution apportée par la disposition <code>display: inline-block;</code> qui emprunte des règles des deux dispositions pour satisfaire ces motivations :</p>
+
+<ul>
+ <li>La hauteur (<code>height</code>) et la largeur (<code>width</code>) seront appliqués sur l'élément (et non ignorés).</li>
+ <li>Les propriétés <code>padding</code>, <code>margin</code> et <code>border</code> repousseront bien les éléments alentours.</li>
+</ul>
+
+<p>Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés <code>width</code> et <code>height</code> le définissent ainsi.</p>
+
+<p><strong>Dans cet exemple, nous avons ajouté la propriété <code>display: inline-block;</code> à notre élément <code>&lt;span&gt;</code>. Changez donc la valeur en <code>display: block;</code> ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+
+<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code>&lt;a&gt;</code> est par défaut "en ligne", comme un <code>&lt;span&gt;</code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p>
+
+<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux lien <code>&lt;a&gt;</code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <code>&lt;ul&gt;</code>. Ceci est dû au fait que <code>&lt;a&gt;</code> est un élément en ligne.</p>
+
+<p><strong>Ajoutez la propriété <code>display: inline-block;</code>  en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du padding régler ce problème.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !</p>
+
+<p>Dans la leçon suivante, ce sont les arrières-plans et cadres qui capterons notre attention, afin de rendre votre mise en page plus attrayante.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/overflowing_content/index.html b/files/fr/apprendre/css/building_blocks/overflowing_content/index.html
new file mode 100644
index 0000000000..3b13da9e6b
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/overflowing_content/index.html
@@ -0,0 +1,123 @@
+---
+title: Overflow - Débordements de contenu
+slug: Apprendre/CSS/Building_blocks/Overflowing_content
+translation_of: Learn/CSS/Building_blocks/Overflowing_content
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Dans ce cours nous allons étudier un autre concept important en CSS — <strong>overflow (débordement)</strong>. Un overflow (débordement de contenu) correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Comprendre le principe de l'overflow et comment le gérer.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest_ce_quun_overflow">Qu'est ce qu'un overflow?</h2>
+
+<p>Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs  {{cssxref("width")}} et {{cssxref("height")}} (ou {{cssxref("inline-size")}} et {{cssxref("block-size")}}). Un overflow correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas d'overflow fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.</p>
+
+<h2 id="CSS_essaie_déviter_les_pertes_de_données">CSS essaie d'éviter les pertes de données</h2>
+
+<p>Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.</p>
+
+<p>Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur <code>height</code>. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+
+<p>Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+
+<p>Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ?</p>
+
+<p>Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.</p>
+
+<p>Si vous avez défini une boîte avec des valeurs <code>width</code> ou <code>height</code>, CSS part du principe que vous savez ce que vous faîtes et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.</p>
+
+<p>Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter l'overflow. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant!</p>
+
+<h2 id="La_propriété_overflow">La propriété overflow</h2>
+
+<p>La propriété  {{cssxref("overflow")}} est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est <code>visible</code>, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.</p>
+
+<p>Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir <code>overflow: hidden</code> pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+
+<p>Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez <code>overflow: scroll</code> alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu.</p>
+
+<p><strong>Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+
+<p>Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe <code>y</code>, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété {{cssxref("overflow-y")}}, qui définit <code>overflow-y: scroll</code> afin de faire défiler uniquement sur l'axe <code>y</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+
+<p>Vous pourriez également faire défiler sur l'axe x en utilisant {{cssxref("overflow-x")}}, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés {{cssxref("word-break")}} ou {{cssxref("overflow-wrap")}}. En complément, certaines méthodes présentées dans le cours <a href="/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a> peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+
+<p>Comme pour <code>scroll</code>, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété <code>overflow</code> en déclarant deux valeurs. Si deux mots clés sont spécifiés , le premier s'applique à <code>overflow-x</code> et le second à <code>overflow-y</code>. Sinon, <code>overflow-x</code> et <code>overflow-y</code> sont définis sur la même valeur. Par exemple, <code>overflow: scroll hidden</code> définira <code>overflow-x</code> sur <code>scroll</code> et <code>overflow-y</code> sur <code>hidden</code>.</p>
+</div>
+
+<p>Si vous souhaitez que les barres de défilement n'apparaissent que si il y a plus de contenu que la boîte ne peut en contenir, utilisez <code>overflow: auto</code>. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs Desktop ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.</p>
+
+<p><strong>Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+
+<h2 id="Overflow_crée_un_Block_Formatting_Context">Overflow crée un "Block Formatting Context"</h2>
+
+<p>Il existe un concept dans le CSS de "<strong>Block Formatting Context</strong>" (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur d'overflow comme <code>scroll</code> ou <code>auto</code> vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de <code>overflow</code> devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.</p>
+
+<h2 id="Débordements_indésirables_en_web_design">Débordements indésirables en web design</h2>
+
+<p>Les méthodes de mise en page modernes (comme étudiées dans le module <a href="/docs/Apprendre/CSS/CSS_layout">La mise en page avec le CSS</a>) gèrent très bien l'overflow. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un overflow ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.</p>
+
+<p>Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes d'overflow. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'overflow pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.</p>
+
+<h2 id="Testez-vous!">Testez-vous!</h2>
+
+<p>Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Testez vos compétences: overflow</a>.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cette courte leçon a introduit le concept d'overflow ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un overflow éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un overflow problématique.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/selectors/combinateurs/index.html b/files/fr/apprendre/css/building_blocks/selectors/combinateurs/index.html
new file mode 100644
index 0000000000..080ef78d83
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/selectors/combinateurs/index.html
@@ -0,0 +1,114 @@
+---
+title: Combinateurs
+slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
+tags:
+  - CSS
+  - Sélecteurs
+  - combinateurs
+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Combinateur_descendant">Combinateur descendant</h2>
+
+<p>Le <strong>combinateur descendant</strong>— en général représenté par un seul espace (<code> </code>) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.</p>
+
+<pre class="brush: css notranslate">body article p
+</pre>
+
+<p>Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <code>&lt;p&gt;</code>, qui est à l'intérieur d'un élément de classe <code>.box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+
+<h2 id="Combinateur_enfant">Combinateur enfant</h2>
+
+<p>Le combinateur enfant (<code>&gt;</code>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <code>&lt;p&gt;</code> qui sont des enfants directs des éléments <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article &gt; p</pre>
+
+<p>Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <code>&lt;li&gt;</code> qui sont un enfant direct d'un <code>&lt;ul&gt;</code>, et leur ai donné une bordure supérieure.</p>
+
+<p>si vous supprimez le <code>&gt;</code> qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <code>&lt;li&gt;</code> auront une bordure rouge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+
+<h2 id="Combinateur_frère_adjacents">Combinateur frère adjacents</h2>
+
+<p>Le sélecteur de frère adjacent (<code>+</code>) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <code>&lt;img&gt;</code> qui viennent juste après les éléments <code>&lt;p&gt;</code>:</p>
+
+<pre class="brush: css notranslate">p + img</pre>
+
+<p>Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <code>&lt;h1&gt;</code>, et le stylisons.</p>
+
+<p>Si vous insérez un autre élément tel qu'un <code>&lt;h2&gt;</code> entre le <code>&lt;h1&gt;</code> et le <code>&lt;p&gt;</code>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+
+<h2 id="Combinateur_général_de_frères">Combinateur général de frères</h2>
+
+<p>Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (<code>~</code>). Pour sélectionner tous les éléments <code>&lt;img&gt;</code> qui viennent n'importe où après les éléments <code>&lt;p&gt;</code>, nous ferions ceci:</p>
+
+<pre class="brush: css notranslate">p ~ img</pre>
+
+<p>Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <code>&lt;p&gt;</code> qui viennent après le <code>&lt;h1&gt;</code>, et même s'il y a aussi un <code>&lt;div&gt;</code> dans le document, le <code>&lt;p&gt;</code> qui vient après qu'il est sélectionné.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+
+<h2 id="Utilisation_de_combinateurs">Utilisation de combinateurs</h2>
+
+<p>Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <code>&lt;ul&gt;</code>, je pourrais utiliser ce qui suit.</p>
+
+<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+
+<p>Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.</p>
+
+<p>Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.</p>
+
+<h2 id="Testez_vos_compétences!">Testez vos compétences!</h2>
+
+<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p>
+
+<h2 id="Passer_à_la_suite">Passer à la suite</h2>
+
+<p>Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le <a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">modèle de Boîte</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li>
+   <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a></li>
+   <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments">Pseudo-classes and pseudo-élements</a></li>
+   <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs">Combinateurs</a></li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">Le modèle de Boîte</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content">Débordement de contenu</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">Valeurs et unités</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Taille des élements</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li>
+ <li><a href="/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/selectors/index.html b/files/fr/apprendre/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..359c762301
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/selectors/index.html
@@ -0,0 +1,223 @@
+---
+title: Sélecteurs CSS
+slug: Apprendre/CSS/Building_blocks/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest_ce_quun_sélecteur">Qu'est ce qu'un sélecteur ?</h2>
+
+<p>Vous les avez déjà rencontré : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet </em>de ce sélecteur.</p>
+
+<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>Vous avez rencontrés plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe  <code>.special</code>.</p>
+
+<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, une spécification mature, la prise en charge par les navigateurs est donc complète.</p>
+
+<h2 id="Listes_de_sélecteurs">Listes de sélecteurs</h2>
+
+<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p>
+
+<pre class="brush: css notranslate"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :</p>
+
+<pre class="brush: css notranslate"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.</p>
+
+<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p>En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni <code>h1</code> ni les éléments de classe <code>.special</code> ne seront mis en forme.</p>
+
+<pre class="brush: css notranslate"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="Types_de_sélecteurs">Types de sélecteurs</h2>
+
+<p>On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.</p>
+
+<h3 id="Sélecteurs_de_type_de_classe_et_dID">Sélecteurs de type, de classe , et d'ID</h3>
+
+<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code>&lt;h1&gt;</code> :</p>
+
+<pre class="brush: css notranslate">h1 { }</pre>
+
+<p>On trouve aussi les sélecteurs ciblant une classe :</p>
+
+<pre class="brush: css notranslate">.box { }</pre>
+
+<p>ou une  ID :</p>
+
+<pre class="brush: css notranslate">#unique { }</pre>
+
+<h3 id="Sélecteurs_dattribut">Sélecteurs d'attribut</h3>
+
+<p>Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :</p>
+
+<pre class="brush: css notranslate">a[title] { }</pre>
+
+<p>Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :</p>
+
+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+
+<h3 id="Pseudo-classes_et_pseudo-éléments">Pseudo-classes et pseudo-éléments</h3>
+
+<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p>
+
+<pre class="brush: css notranslate">a:hover { }</pre>
+
+<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code>&lt;p&gt;</code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre  <code>&lt;span&gt;</code>  et qu'après coup on appliquait un style sur cet élément.</p>
+
+<pre class="brush: css notranslate">p::first-line { }</pre>
+
+<h3 id="Combinateurs">Combinateurs</h3>
+
+<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code>&lt;article&gt;</code>  grâce au combinateur enfant (<code>&gt;</code>) :</p>
+
+<pre class="brush: css notranslate">article &gt; p { }</pre>
+
+<h2 id="À_faire_ensuite">À faire ensuite</h2>
+
+<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ;  vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">sélecteurs de type, de classe, et d'ID</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Table_de_référence_des_sélecteurs">Table de référence des sélecteurs</h2>
+
+<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous  rechercherez des informations sur les sélecteurs.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sélecteur</th>
+   <th scope="col">Exemple</th>
+   <th scope="col">Tutoriel CSS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">Sélecteurs de type</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d'ID</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur descendant</a></td>
+   <td><code>article p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur enfant</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Combinateur_de_voisin_direct">Sélecteur de frére adjacent</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de frère général</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/selectors/pseudo-classes_et_pseudo-éléments/index.html b/files/fr/apprendre/css/building_blocks/selectors/pseudo-classes_et_pseudo-éléments/index.html
new file mode 100644
index 0000000000..6bfb96e324
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/selectors/pseudo-classes_et_pseudo-éléments/index.html
@@ -0,0 +1,399 @@
+---
+title: Pseudo-classes et pseudo-éléments
+slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments
+tags:
+  - Apprendre
+  - CSS
+  - Débutant
+  - Pseudo
+  - Pseudo-class
+  - Pseudo-element
+  - Sélecteurs
+translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Voyons maintenant les sélecteurs de<span> <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest_ce_quune_pseudo-classe">Qu'est ce qu'une pseudo-classe ?</h2>
+
+<p>Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.</p>
+
+<p>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p>
+
+<pre class="notranslate">:<em>pseudo-class-name</em></pre>
+
+<h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3>
+
+<p>Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>
+
+<p>Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible <em>dans tous les cas</em> le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)</p>
+
+<p>{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>
+
+<p>Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li>
+</ul>
+
+<h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3>
+
+<p>Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées <em>pseudo-classes dynamiques</em>, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :</p>
+
+<p><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br>
+ <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>
+
+<h2 id="Quest_ce_quun_pseudo-élément">Qu'est ce qu'un pseudo-élément ?</h2>
+
+<p>Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points <code>::</code>.</p>
+
+<pre class="notranslate"><em>::pseudo-element-name</em></pre>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p>
+</div>
+
+<p>Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément &lt;span&gt; et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.</p>
+
+<p>Le pseudo-sélecteur d'éléments <code>::first-line</code>  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>
+
+<p>Il agit comme si un <code>&lt;span&gt;</code> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.</p>
+
+<p>Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.</p>
+
+<h2 id="Combiner_pseudo-classes_et_pseudo-éléments">Combiner pseudo-classes et pseudo-éléments</h2>
+
+<p>Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs <code>:first-child</code> et <code>::first-line</code> Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <code>&lt;p&gt;</code>, qui se trouve à l'intérieur d'un élément <code>&lt;article&gt;</code></p>
+
+<pre class="brush: css notranslate"><code>article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}</code></pre>
+
+<h2 id="Générer_du_contenu_avec_before_et_after">Générer du contenu avec ::before et ::after</h2>
+
+<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/en-US/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p>
+
+<p>Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément <code>::before</code> en  <code>::after</code> et voir le texte inséré à la fin de l'élément au lieu du début.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>
+
+<p>L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.</p>
+
+<p>Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>
+
+<p>Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.</p>
+
+<p>Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément <code>::before</code> pseudo-element. Nous l'avons défini en <code>display: block</code> afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>
+
+<p>L'utilisation des pseudo-éléments <code>::before</code> et <code>::after</code> avec la propriété <code>content</code> est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.</p>
+
+<h2 id="Section_de_référence">Section de référence</h2>
+
+<p>Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.</p>
+
+<h3 id="Pseudo-classes">Pseudo-classes</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sélecteur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref(":active") }}</td>
+   <td>Matches when the user activates (for example clicks on) an element.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":any-link") }}</td>
+   <td>Matches both the <code>:link</code> and <code>:visited</code> states of a link.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":blank") }}</td>
+   <td>Matches an <a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code> element</a> whose input value is empty.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":checked") }}</td>
+   <td>Matches a radio button or checkbox in the selected state.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":current") }}</td>
+   <td>Matches the element, or an ancestor of the element, that is currently being displayed.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":default") }}</td>
+   <td>Matches the one or more UI elements that are the default among a set of similar elements.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":dir") }}</td>
+   <td>Select an element based on its directionality (value of the HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> property).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":disabled") }}</td>
+   <td>Matches user interface elements that are in an disabled state.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":empty") }}</td>
+   <td>Matches an element that has no children except optionally white space.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":enabled") }}</td>
+   <td>Matches user interface elements that are in an enabled state.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first") }}</td>
+   <td>In <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-child") }}</td>
+   <td>Matches an element that is first among its siblings.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-of-type") }}</td>
+   <td>Matches an element which is first of a certain type among its siblings.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus") }}</td>
+   <td>Matches when an element has focus.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-visible")}}</td>
+   <td>Matches when an element has focus and the focus should be visible to the user.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-within") }}</td>
+   <td>Matches an element with focus plus an element with a descendent that has focus.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":future") }}</td>
+   <td>Matches the elements after the current element.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":hover") }}</td>
+   <td>Matches when the user hovers over an element.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":indeterminate") }}</td>
+   <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":in-range") }}</td>
+   <td>Matches an element with a range when its value is in-range.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":invalid") }}</td>
+   <td>Matches an element, such as an <code>&lt;input&gt;</code>, in an invalid state.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":lang") }}</td>
+   <td>Matches an element based on language (value of the HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-child") }}</td>
+   <td>Matches an element which is last among its siblings.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-of-type") }}</td>
+   <td>Matches an element of a certain type that is last among its siblings.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":left") }}</td>
+   <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":link")}}</td>
+   <td>Matches unvisited links.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":local-link")}}</td>
+   <td>Matches links pointing to pages that are in the same site as the current document.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":is", ":is()")}}</td>
+   <td>Matches any of the selectors in the selector list that is passed in.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":not") }}</td>
+   <td>Matches things not matched by selectors that are passed in as a value to this selector.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-child") }}</td>
+   <td>Matches elements from a list of siblings — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-of-type") }}</td>
+   <td>Matches elements from a list of siblings that are of a certain type (e.g. <code>&lt;p&gt;</code> elements) — the siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-child") }}</td>
+   <td>Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-of-type") }}</td>
+   <td>Matches elements from a list of siblings that are of a certain type (e.g. <code>&lt;p&gt;</code> elements), counting backwards from the end. The siblings are matched by a formula of the form <var>an+b</var> (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-child") }}</td>
+   <td>Matches an element that has no siblings.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-of-type") }}</td>
+   <td>Matches an element that is the only one of its type among its siblings.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":optional") }}</td>
+   <td>Matches form elements that are not required.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":out-of-range") }}</td>
+   <td>Matches an element with a range when its value is out of range.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":past") }}</td>
+   <td>Matches the elements before the current element.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":placeholder-shown") }}</td>
+   <td>Matches an input element that is showing placeholder text.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":playing") }}</td>
+   <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":paused") }}</td>
+   <td>Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-only") }}</td>
+   <td>Matches an element if it is not user-alterable.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-write") }}</td>
+   <td>Matches an element if it is user-alterable.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":required") }}</td>
+   <td>Matches form elements that are required.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":right") }}</td>
+   <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":root") }}</td>
+   <td>Matches an element that is the root of the document.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":scope") }}</td>
+   <td>Matches any element that is a scope element.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":valid") }}</td>
+   <td>Matches an element such as an <code>&lt;input&gt;</code> element, in a valid state.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":target") }}</td>
+   <td>Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment</a>).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":visited") }}</td>
+   <td>Matches visited links.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pseudo-éléments">Pseudo-éléments</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sélecteur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref("::after") }}</td>
+   <td>Matches a stylable element appearing after the originating element's actual content.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::before") }}</td>
+   <td>Matches a stylable element appearing before the originating element's actual content.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-letter") }}</td>
+   <td>Matches the first letter of the element.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-line") }}</td>
+   <td>Matches the first line of the containing element.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::grammar-error") }}</td>
+   <td>Matches a portion of the document containing a grammar error as flagged by the browser.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::selection") }}</td>
+   <td>Matches the portion of the document that has been selected.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::spelling-error") }}</td>
+   <td>Matches a portion of the document containing a spelling error as flagged by the browser.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_cours">Dans ce cours</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/selectors/sélecteurs_d_atrribut/index.html b/files/fr/apprendre/css/building_blocks/selectors/sélecteurs_d_atrribut/index.html
new file mode 100644
index 0000000000..415d455e9b
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/selectors/sélecteurs_d_atrribut/index.html
@@ -0,0 +1,177 @@
+---
+title: Sélecteurs d'attribut
+slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
+tags:
+  - Apprendre
+  - Attribut
+  - CSS
+  - Débutant
+  - Sélecteurs
+translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2>
+
+<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sélecteur</th>
+   <th scope="col">Exemple</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>]</code></td>
+   <td><code>a[title]</code></td>
+   <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>=<em>value</em>]</code></td>
+   <td><code>a[href="https://example.com"]</code></td>
+   <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
+   <td><code>p[class~="special"]</code></td>
+   <td>
+    <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p>
+
+    <p>Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
+   <td><code>div[lang|="zh"]</code></td>
+   <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :</p>
+
+<ul>
+ <li>Avec <code>li[class]</code> on cible tout élément <code>&lt;li&gt;</code> possédant un attribut <code>class</code>. On cible ainsi tous les list items sauf le premier.</li>
+ <li><code>li[class="a"]</code> cible les <code>&lt;li&gt;</code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code>&lt;li&gt;</code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li>
+ <li><code>li[class~="a"]</code> cible tout élément <code>&lt;li&gt;</code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
+
+<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2>
+
+<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes  <code>box-warning</code> et <code>box-error</code>,  vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sélecteur</th>
+   <th scope="col">Exemple</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
+   <td><code>li[class^="box-"]</code></td>
+   <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
+   <td><code>li[class$="-box"]</code></td>
+   <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>*=value<em> </em>]</code></td>
+   <td><code>li[class*="box"]</code></td>
+   <td>élément sélectionné quand la<br>
+    la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'exemple suivant montre ces sélecteurs en action :</p>
+
+<ul>
+ <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li>
+ <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li>
+ <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelquepart un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
+
+<h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2>
+
+<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant la parenthèse fermante. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p>
+
+<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>
+</div>
+
+<h2 id="À_faire_vous-mêmes">À faire vous-mêmes</h2>
+
+<p>Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :</p>
+
+<ul>
+ <li>Cibler l'élément <code>&lt;a&gt;</code> ayant un attribut <code>title</code> et colorer sa bordure en rose (<code>border-color: pink</code>).</li>
+ <li>Cibler l'élément <code>&lt;a&gt;</code> dont l'attribut <code>href</code> contient le mot <code>contact</code> quelque part dans sa valeur et colorer sa bordure en orange (<code>border-color: orange</code>).</li>
+ <li>Cibler l'élément <code>&lt;a&gt;</code> dont la valeur <code>href</code> commence par <code>https</code> et colorer sa bordure en vert (<code>border-color: green</code>).</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> —  mais essayez d'abord de la trouver par vous-même !</p>
+</div>
+
+<h2 id="Pas_suivants">Pas suivants</h2>
+
+<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_cours">Dans ce cours</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/selectors/sélecteurs_de_type_classe_id/index.html b/files/fr/apprendre/css/building_blocks/selectors/sélecteurs_de_type_classe_id/index.html
new file mode 100644
index 0000000000..f6d0580279
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/selectors/sélecteurs_de_type_classe_id/index.html
@@ -0,0 +1,117 @@
+---
+title: 'Sélecteurs de type, de classe et d''ID'
+slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID
+translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sélecteur_de_type">Sélecteur de type</h2>
+
+<p>Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> et <code>&lt;strong&gt;</code> est ainsi mise en forme.</p>
+
+<p><strong>Essayez d'ajouter une règle CSS pour sélectionner l'élément <code>&lt;h1&gt;</code> et changer sa couleur en bleu.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
+
+<h2 id="Le_sélecteur_universel">Le sélecteur universel</h2>
+
+<p>Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
+
+<p>On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.</p>
+
+<h3 id="Utiliser_le_sélecteur_universel_pour_rendre_les_sélecteurs_plus_lisibles">Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles</h3>
+
+<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code>&lt;article&gt;</code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> :  </p>
+
+<pre class="brush: css">article :first-child {
+
+}</pre>
+
+<p>On peut néanmoins confondre ce sélecteur avec <code>article:first-child</code> ciblant les éléments <code>&lt;article&gt;</code>  qui sont le premier descendant d'un élément.</p>
+
+<p>Pour éviter cette confusion, on peut ajouter le sélecteur universel <code>*</code> à  <code>:first-child</code>,  le fonctionnement de ce dernier sera plus clair : il cible <em>tout</em> élément premier descendant d'un élément <code>&lt;article&gt;</code> :</p>
+
+<pre class="brush: css">article *:first-child {
+
+} </pre>
+
+<h2 id="Sélecteurs_de_classe">Sélecteurs de classe</h2>
+
+<p>Le sélecteur de classe commence par un point  <code>.</code> et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée <code>.highlight</code> et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
+
+<h3 id="Cibler_des_classes_dun_élément_donné">Cibler des classes d'un élément donné</h3>
+
+<p>On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe <code>highlight</code> met en surbrillance, mais elle le fait différemment quand elle s'applique à un &lt;span&gt; ou à un titre &lt;h1&gt;. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
+
+<p>Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.</p>
+
+<h3 id="Cibler_un_élément_appartenant_à_plus_dune_classe">Cibler un élément appartenant à plus d'une classe</h3>
+
+<p>Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.</p>
+
+<p>L'exemple ci-dessous présente trois <code>&lt;div&gt;</code> contenant chacun une note. Si la boîte est dans la classe  <code>notebox</code> elle a une bordure grise. Si de plus elle est dans la classe <code>warning</code> ou <code>danger</code>, on change la {{cssxref("border-color")}}.</p>
+
+<p>On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
+
+<h2 id="Sélecteurs_dID">Sélecteurs d'ID</h2>
+
+<p>Un sélecteur d'ID commence par un <code>#</code> plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'<code>id</code> associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p>
+</div>
+
+<h2 id="Prochain_article">Prochain article</h2>
+
+<p>Notre exploration des sélecteurs se poursuit par l'étude des <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut">sélecteurs d'attributs</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_cours">Dans ce cours</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/sizing_items_in_css/index.html b/files/fr/apprendre/css/building_blocks/sizing_items_in_css/index.html
new file mode 100644
index 0000000000..8349fb5a59
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/sizing_items_in_css/index.html
@@ -0,0 +1,135 @@
+---
+title: Définir la taille des éléments en CSS
+slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<div></div>
+
+<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.</div>
+
+<div></div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>
+    <p>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Découvrir comment spécifier la taille des éléments en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="La_taille_naturelle_ou_intrinsèque_des_choses">La taille naturelle ou intrinsèque des choses</h2>
+
+<p>Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle même.</p>
+
+<p>Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code>&lt;img&gt;</code> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("div")}} à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code>&lt;div&gt;</code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.</p>
+
+<h2 id="Spécifier_une_taille">Spécifier une taille</h2>
+
+<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code>&lt;div&gt;</code> de l'exemple précédent — nous pouvons lui donner une  {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.</p>
+
+<h3 id="Avec_les_pourcentages">Avec les pourcentages</h3>
+
+<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code>&lt;div&gt;</code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code>&lt;div</code><code>&gt;</code> aurait normalement occupé dans l'élément parent.</p>
+
+<h3 id="Marges_et_remplissage_en_pourcentages">Marges et remplissage en pourcentages</h3>
+
+<p>Si vous définissez les <code>margins</code> (marges exterieurs) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p>
+
+<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p>
+
+<h2 id="tailles_min-_et_max-">tailles min- et max- </h2>
+
+<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p>
+
+<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p>
+
+<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p>
+
+<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p>
+
+<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p>
+
+<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p>
+</div>
+
+<h2 id="Unités_de_la_fenêtre_daffichage">Unités de la fenêtre d'affichage</h2>
+
+<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre —  <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p>
+
+<p><code>1vh</code> correspond à 1% dela hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de {{cssxref("font-size")}} 10vh.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code>&lt;iframe&gt;</code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p>
+
+<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_cours">Dans ce cours</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/building_blocks/styling_tables/index.html b/files/fr/apprendre/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..9d6087e1a4
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,307 @@
+---
+title: Mise en page de tableaux
+slug: Apprendre/CSS/Building_blocks/Styling_tables
+tags:
+  - Article
+  - CSS
+  - Codage
+  - Débutant
+  - Guide
+  - HTML
+  - Style
+  - Tableaux
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Notions de HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre à donner effectivement un style aux tableaux HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Un_tableau_HTML_typique">Un tableau HTML typique</h2>
+
+<p>Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Récapitulatif des groupes punk les plus célébres du RU&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Groupe&lt;/th&gt;
+      &lt;th scope="col"&gt;Année de formation&lt;/th&gt;
+      &lt;th scope="col"&gt;Nombre d'albums&lt;/th&gt;
+      &lt;th scope="col"&gt;Morceau le plus célèbre&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+      ... quelques lignes supprimées pour condenser le texte
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>) :</p>
+
+<p><img alt="Liste des groupes punk du Royaume Uni" src="https://mdn.mozillademos.org/files/16114/punk.png" style="display: block; height: 275px; margin: 0px auto; width: 1012px;"></p>
+
+<p>Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.</p>
+
+<h2 id="Mettre_en_forme_notre_tableau">Mettre en forme notre tableau</h2>
+
+<p>Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.</p>
+
+<ol>
+ <li>Pour débuter, faites une copie locale de l'<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">exemple de balisage</a>, téléchargez les images (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise.png</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin.jpg</a>) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.</li>
+ <li>Ensuite, créez un nouveau fichier nommé <code>style.css</code> et enregistrez‑le dans le même répertoire que les autres fichiers.</li>
+ <li>Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} :
+  <pre class="brush: html">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="Espacement_et_disposition">Espacement et disposition</h3>
+
+<p>La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier <code>style.css</code> :</p>
+
+<pre class="brush: css">/* espacement */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>Voici les choses les plus importantes à noter :</p>
+
+<p>Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.</p>
+
+<ul>
+ <li>Définir pour le tableau la valeur <code>fixed</code> pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec <code>table-layout: fixed</code>, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur <code>thead th:nth-child(n)</code> ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
+  <br>
+  Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).</li>
+ <li>La valeur <code>collapse</code> pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : <img alt="Encadrement des éléments d'un tableau" src="https://mdn.mozillademos.org/files/16116/cadre_1.png" style="display: block; height: 68px; margin: 0px auto; width: 231px;"> Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec <code>border-collapse : collapse;</code>, les bordures se condensent en une seule, ce qui est beaucoup mieux :<img alt="Avec border-collapse: collapse; les encadrements se condensent" src="https://mdn.mozillademos.org/files/16117/cadre_2.png" style="display: block; height: 59px; margin: 0px auto; width: 223px;"></li>
+ <li>Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons  plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.</li>
+ <li>Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.</li>
+</ul>
+
+<p>À ce stade, le tableau a déjà meilleure mine :</p>
+
+<p><img alt="Première mise en forme du tableau" src="https://mdn.mozillademos.org/files/16118/punk_A.png" style="display: block; height: 460px; margin: 0px auto; width: 1096px;"></p>
+
+<h3 id="Simple_typographie">Simple typographie</h3>
+
+<p>Maintenant, différencions un peu nos polices de caractère.</p>
+
+<p>Tout d'abord, nous avons trouvé une police sur <a href="https://www.google.com/fonts">Google Fonts</a> convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.</p>
+
+<p>D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML <code>head</code>, juste au‑dessus de l'élément <code>&lt;link&gt;</code> déjà présent :</p>
+
+<pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>Puis ajoutons le CSS suivant dans le fichier <code>style.css</code> :</p>
+
+<pre class="brush: css">/* typographie */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p>Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.</p>
+
+<ul>
+ <li>Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ».</li>
+ <li>Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif.</li>
+ <li>Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à <code>left</code> et les en–têtes à <code>center</code>, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules.</li>
+ <li>Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données.</li>
+</ul>
+
+<p>Cela fait un peu plus propre :</p>
+
+<p><img alt="Deuxième mise en forme : modifications des polices de caractères." src="https://mdn.mozillademos.org/files/16119/punk_B.png" style="display: block; height: 531px; margin: 0px auto; width: 1055px;"></p>
+
+<h3 id="Graphisme_et_couleurs">Graphisme et couleurs</h3>
+
+<p>Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.</p>
+
+<p>Commençons par ajouter le CSS suivant à la fin du fichier <code>style.css</code> :</p>
+
+<pre>thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.</p>
+
+<p>Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.</p>
+
+<p>Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.</p>
+
+<h4 id="Zébrures">Zébrures</h4>
+
+<p>Nous avons souhaité dédier un paragraphe séparé à la  mise en place de <strong>zèbrures</strong> — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier <code>style.css</code> :</p>
+
+<pre class="brush: css">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés <code>odd</code> (impair) et <code>even </code>(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes)</li>
+ <li>Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un <code>.png</code> semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture.</li>
+ <li>Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur <code>:nth-child</code> disposent encore d'une teinte de fond pour les lignes du corps de tableau.</li>
+</ul>
+
+<p>Et voici l'explosion de couleurs résultante :</p>
+
+<p><img alt="Troisième mise en forme : coloriage agressif" src="https://mdn.mozillademos.org/files/16120/punk_C.png" style="display: block; height: 496px; margin: 0px auto; width: 1257px;"></p>
+
+<p>Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.</p>
+
+<h3 id="Styliser_lintitulé">Styliser l'intitulé</h3>
+
+<p>Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier <code>style.css</code>  :</p>
+
+<pre class="brush: css">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p>Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur <code>bottom</code>. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>) :</p>
+
+<p><img alt="Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin" src="https://mdn.mozillademos.org/files/16121/punk_D.png" style="display: block; height: 539px; margin: 0px auto; width: 1254px;"></p>
+
+<h2 id="Apprentissage_actif_mettez_en_page_votre_propre_tableau">Apprentissage actif : mettez en page votre propre tableau</h2>
+
+<p>Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.</p>
+
+<h2 id="Quelques_conseils_rapides">Quelques conseils rapides</h2>
+
+<p>Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :</p>
+
+<ul>
+ <li>Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable.</li>
+ <li>Utilisez {{cssxref("table-layout")}}<code>: fixed</code> pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}).</li>
+ <li>Utilisez {{cssxref("border-collapse")}}<code>: collapse</code> pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler.</li>
+ <li>Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire.</li>
+ <li>Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture.</li>
+ <li>Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre.</li>
+</ul>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes <code>blend</code> et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p>
+
+
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/building_blocks/values_and_units/index.html b/files/fr/apprendre/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..59fe695fe4
--- /dev/null
+++ b/files/fr/apprendre/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,392 @@
+---
+title: Valeurs et unités CSS
+slug: Apprendre/CSS/Building_blocks/Values_and_units
+translation_of: Learn/CSS/Building_blocks/Values_and_units
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Chaque propriété utilisée en CSS a un type de valeur définissant un ensemble de valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon nous allons observer quelques uns des types de valeurs les plus fréquemment utilisés, et leurs valeurs et unités les plus communes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest-ce_quune_valeur_CSS">Qu'est-ce qu'une valeur CSS?</h2>
+
+<p>Dans les spécifications CSS et sur les pages de propriétés ici sur MDN, vous pourrez identifier les types de valeurs car ils sont entourés par des chevrons, tel que <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> ou <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>. Quand vous voyez le type de valeur <code>&lt;color&gt;</code>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Oui, les types de valeur CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex: la propriété {{cssxref("color")}}, comparée au type de données <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a>). Vous pourriez aussi être désorienté entre les ttypes de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p>
+</div>
+
+<p>Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction <code>rgb()</code>:</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} </code>
+</pre>
+
+<p>Un type de valeurs en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <code>&lt;color&gt;</code> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser —  mot-clés, valeurs hex, fonctions <code>rgb()</code>, etc. Vous pouvez utiliser <em>n'importe quelle</em> valeur <code>&lt;color&gt;</code> disponible, en supposant qu'elle soit supportée par votre navigateur. La pageMDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.</p>
+
+<p>Observons quelques uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.</p>
+
+<h2 id="Nombres_longueurs_et_pourcentages">Nombres, longueurs et pourcentages</h2>
+
+<p>Il éxiste de nombreux types de valeurs numériques que vous pourrez trouver vous même en utilisant CSS. Les suivants sont tous classés comme numériques:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type de donnée</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
+   <td><code>&lt;integer&gt;</code> est un nombre entier comme <code>1024</code> ou <code>-55</code>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
+   <td><code>&lt;number&gt;</code> représente un nombre décimal — il peut avoir, ou non, un point décimal avec un composant fractionnaire. Par exemple, <code>0.255</code>, <code>128</code>, ou <code>-1.2</code>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/dimension">&lt;dimension&gt;</a></code></td>
+   <td><code>&lt;dimension&gt;</code> est un <code>&lt;number&gt;</code> avec une unité attachée à lui. Par exemple, <code>45deg</code>, <code>5s</code>, ou <code>10px</code>. <code>&lt;dimension&gt;</code> est divisé en d'autres catégories incluant les types <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/time">&lt;time&gt;</a></code>, <code>et <a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
+   <td><code>&lt;percentage&gt;</code> représente une fraction d'une autre valeur.  Par exemple, <code>50%</code>. Les valeurs de pourcentage sont toujours relatives à une qutre quantité. Par exemple, la longeur d'un élément est relative à la longueur de son élément parent.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Longueurs">Longueurs</h3>
+
+<p>The numeric type you will come across most frequently is <code>&lt;length&gt;</code>. For example <code>10px</code> (pixels) or <code>30em</code>. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.</p>
+
+<h4 id="Absolute_length_units">Absolute length units</h4>
+
+<p>The following are all <strong>absolute</strong> length units — they are not relative to anything else, and are generally considered to always be the same size.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unit</th>
+   <th scope="col">Name</th>
+   <th scope="col">Equivalent to</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centimeters</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimeters</td>
+   <td>1mm = 1/10th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Quarter-millimeters</td>
+   <td>1Q = 1/40th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Inches</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas</td>
+   <td>1pc = 1/6th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Points</td>
+   <td>1pt = 1/72th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixels</td>
+   <td>1px = 1/96th of 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use <code>cm</code> (centimeters) on screen. The only value that you will commonly use is <code>px</code> (pixels).</p>
+
+<h4 id="Relative_length_units">Relative length units</h4>
+
+<p>Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other element scales relative to everything else on the page. Some of the most useful units for web development are listed in the table below.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unit</th>
+   <th scope="col">Relative to</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>Font size of the parent, in the case of typographical properties like <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, and font size of the element itself, in the case of other properties like <code><a href="/en-US/docs/Web/CSS/width">width</a></code>.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>x-height of the element's font.</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>The advance measure (width) of the glyph "0" of the element's font.</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>Font size of the root element.</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>Line height of the element.</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>1% of the viewport's width.</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>1% of the viewport's height.</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>1% of the viewport's smaller dimension.</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1% of the viewport's larger dimension.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exploring_an_example">Exploring an example</h4>
+
+<p>In the example below, you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit, this width will remain the same no matter what else changes.</p>
+
+<p>The second box has a width set in <code>vw</code> (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change. However this example is embedded into the page using an <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, so this won't work. To see this in action you'll have to <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">try the example after opening it in its own browser tab</a>.</p>
+
+<p>The third box uses <code>em</code> units. These are relative to the font size. I've set a font size of <code>1em</code> on the containing {{htmlelement("div")}}, which has a class of <code>.wrapper</code>. Change this value to <code>1.5em</code> and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.</p>
+
+<p>After following the instructions above, try playing with the values in other ways, to see what you get.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+
+<h4 id="ems_and_rems">ems and rems</h4>
+
+<p><code>em</code> and <code>rem</code> are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like <a href="/en-US/docs/Learn/CSS/Styling_text">styling text</a> or <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>. The below example provides a demonstration.</p>
+
+<p>The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of <em>ems</em> and the second a class of <em>rems</em>.</p>
+
+<p>To start with, we set 16px as the font size on the <code>&lt;html&gt;</code> element.</p>
+
+<p><strong>To recap, the em unit means "my parent element's font-size"</strong> in the case of typography. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>ems</code> take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to <code>1.3em</code> — 1.3 times its parent's font size.</p>
+
+<p><strong>To recap, the rem unit means "The root element's font-size"</strong>. (rem stands for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>rems</code> take their sizing from the root element (<code>&lt;html&gt;</code>). This means that each successive level of nesting does not keep getting larger.</p>
+
+<p>However, if you change the <code>&lt;html&gt;</code> <code>font-size</code> in the CSS you will see that everything else changes relative to it — both <code>rem</code>- and <code>em</code>-sized text.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+
+<h3 id="Percentages">Percentages</h3>
+
+<p>In a lot of cases, a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's <code>font-size</code> as a percentage it will be a percentage of the <code>font-size</code> of the element's parent. If you use a percentage for a <code>width</code> value, it will be a percentage of the <code>width</code> of the parent.</p>
+
+<p>In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.</p>
+
+<p>The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!</p>
+
+<p><strong>Try changing the width of the wrapper or the percentage value to see how this works.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+
+<p>The next example has font sizes set in percentages. Each <code>&lt;li&gt;</code> has a <code>font-size</code> of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+
+<p>Note that, while many value types accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code> then you can use a length or a percentage. If the allowed value only includes <code>&lt;length&gt;</code>, it is not possible to use a percentage.</p>
+
+<h3 id="Numbers">Numbers</h3>
+
+<p>Some value types accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the <code>opacity</code> property, which controls the opacity of an element (how transparent it is). This property accepts a number between <code>0</code> (fully transparent) and <code>1</code> (fully opaque).</p>
+
+<p><strong>In the below example, try changing the value of <code>opacity</code> to various decimal values between <code>0</code> and <code>1</code> and see how the box and its contents become more or less opaque.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: When you use a number in CSS as a value it should not be surrounded in quotes.</p>
+</div>
+
+<h2 id="Color">Color</h2>
+
+<p>There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.</p>
+
+<p>The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.</p>
+</div>
+
+<h3 id="Color_keywords">Color keywords</h3>
+
+<p>Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> value type.</p>
+
+<p><strong>Try playing with different color values in the live examples below, to get more of an idea how they work.</strong></p>
+
+<h3 id="Hexadecimal_RGB_values">Hexadecimal RGB values</h3>
+
+<p>The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so <code>0123456789abcdef</code>. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)</p>
+
+<p>These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+
+<p><strong>Again, try changing the values to see how the colors vary.</strong></p>
+
+<h3 id="RGB_and_RGBA_values">RGB and RGBA values</h3>
+
+<p>The third scheme we'll talk about here is RGB. An RGB value is a function — <code>rgb()</code> — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.</p>
+
+<p>Let's rewrite our last example to use RGB colors:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+
+<p>You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values. However, there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to <code>0</code> it will make the color fully transparent, whereas <code>1</code> will make it fully opaque. Values in between give you different levels of transparency.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.</p>
+</div>
+
+<p>In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+
+<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.</p>
+</div>
+
+<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3>
+
+<p>Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p>
+
+<ul>
+ <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles around a color wheel.</li>
+ <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li>
+ <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li>
+</ul>
+
+<p>We can update the RGB example to use HSL colors like this:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+
+<p>Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+
+<p>You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!</p>
+
+<h2 id="Images">Images</h2>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> value type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p>
+
+<p>In the example below, we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: there are some other possible values for <code>&lt;image&gt;</code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> data type if you want to read about them.</p>
+</div>
+
+<h2 id="Position">Position</h2>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> value type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.</p>
+
+<p>A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to <code>center</code>.</p>
+
+<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+
+<p><strong>Play around with these values to see how you can push the image around.</strong></p>
+
+<h2 id="Strings_and_identifiers">Strings and identifiers</h2>
+
+<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code>&lt;color&gt;</code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p>
+
+<p>There are places where you use strings in CSS. For example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. In this case, the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+
+<h2 id="Functions">Functions</h2>
+
+<p>The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p>
+
+<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.</p>
+
+<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use <code>calc()</code> to tell the browser to do it for us.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and units</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p>
+
+<p>The key thing to remember is that each property has a defined list of allowed value types, and each value type has a definition explaining what the values are. You can then look up the specifics here on MDN.</p>
+
+<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/fr/apprendre/css/comment/créer_de_belles_boîtes/index.html b/files/fr/apprendre/css/comment/créer_de_belles_boîtes/index.html
new file mode 100644
index 0000000000..8e6fdc1761
--- /dev/null
+++ b/files/fr/apprendre/css/comment/créer_de_belles_boîtes/index.html
@@ -0,0 +1,314 @@
+---
+title: Créer de belles boîtes
+slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
+tags:
+  - Apprendre
+  - CSS
+  - Débutant
+translation_of: Learn/CSS/Howto/create_fancy_boxes
+---
+<p class="summary">Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p>
+
+<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition en CSS</a>.</p>
+
+<p>D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (<code>border-*</code>) et d'arrière-plan (<code>background-*</code>) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.</p>
+
+<p>Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :</p>
+
+<pre class="brush: html">&lt;div class="joli"&gt;Coucou ! Je veux être joli.&lt;/div&gt;</pre>
+
+<p>Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?</p>
+
+<ul>
+ <li>Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc.</li>
+ <li>Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc.</li>
+ <li>Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}}</li>
+ <li>Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc.</li>
+</ul>
+
+<p>En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.</p>
+
+<h2 id="Jouer_avec_le_modèle_de_boîte">Jouer avec le modèle de boîte</h2>
+
+<p>Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour <code>padding</code> et/ou <code>margin</code> ou quand on utilise un <code>border-radius</code> supérieur à la taille de la boîte.</p>
+
+<h3 id="Créer_des_cercles">Créer des cercles</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="joli"&gt;Coucou ! Je veux être joli.&lt;/div&gt;</pre>
+</div>
+
+<p>Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?</p>
+
+<pre class="brush: css">.joli {
+  /* Mieux vaut centrer le texte dans un
+     cercle. */
+  text-align : center;
+
+  /* On fait attention à ce que le texte
+     ne touche pas la bordure. On placera
+     donc le texte avec un remplissage, ce
+     qui donnera une meilleure impression
+     pour le cercle. */
+  padding : 1em;
+
+  /* La bordure marquera le cercle. On
+     pourrait également utiliser un arrière-
+     plan car celui-ci aurait été contenu
+     par border-radius */
+  border : 0.5em solid black;
+
+  /* Assurons-nous que la boîte soit carrée
+     pour obtenir un cercle bien rond plutôt
+     qu'une ellipse ;) */
+  width  : 4em;
+  height : 4em;
+
+  /* Enfin, transformons le carré en cercle */
+  border-radius: 100%;
+}</pre>
+
+<p>Et voilà comment on obtient un cercle :</p>
+
+<p>{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}</p>
+
+<h2 id="Les_arrière-plans">Les arrière-plans</h2>
+
+<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p>
+
+<p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p>
+
+<ul>
+ <li>On peut définir <a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li>
+ <li>Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="joli"&gt;Coucou ! Je veux être joli.&lt;/div&gt;</pre>
+</div>
+
+<p>Passons à la manipulation :</p>
+
+<pre class="brush: css">.joli {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* La couche la plus basse sera
+     peinte avec un gris clair uni */
+  background-color: #E4E4D9;
+
+  /* Ensuite on applique des gradients
+     linéaires les uns sur les autres
+     pour créer un effet de bandes colorées.
+     Comme vous pouvez le voir, les gradients
+     sont considérés et manipulés comme des
+     images */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+}</pre>
+
+<p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="http://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">notre article dédié</a>.</p>
+</div>
+
+<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2>
+
+<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/en-US/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p>
+
+<h3 id="Un_nuage">Un nuage</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="joli"&gt;Coucou ! Je veux être joli.&lt;/div&gt;</pre>
+</div>
+
+<p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p>
+
+<pre class="brush: css">.joli {
+  text-align: center;
+
+  /* On utilise la même astuce que pour
+     cercles vus avant */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* On fait de la place pour les « oreilles »
+     du nuage */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* Enfin, le cercle n'est pas tout à fait complet
+     car on veut que la base soit plate.
+     Vous pouvez adapter ici comme bon vous semble
+     si vous souhaitez que la base ne soit pas
+     linéaire */
+  border-radius: 100% 100% 0 0;
+}
+
+/* Voici les styles qu'on appliquera aux deux
+   pseudo-éléments ::before et ::after. */
+.joli::before,
+.joli::after {
+  /* Cette déclaration est nécessaire pour afficher
+     les pseudo-éléments même si leur valeur est la
+     chaîne vide */
+  content: '';
+
+  /* On positionne les pseudo-éléments à droite et à
+     gauche de la boîte mais toujours en bas */
+  position: absolute;
+  bottom  : 0;
+
+  /* On s'assure que les pseudo-éléments passent sous
+     le contenu qu'il y aurait. */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.joli::before {
+  /* Voici la taille pour l'oreille gauche
+     du nuage */
+  width  : 125px;
+  height : 125px;
+
+  /* On la décale un peu à gauche */
+  left    : -80px;
+
+  /* Pour que le bas du nuage reste droit, il
+     faut s'assurer que le coin en bas à gauche
+     soit bien un angle droit. */
+  border-bottom-right-radius: 0;
+}
+
+.joli::after {
+  /* Voici la taille pour l'oreille droite */
+  width  : 100px;
+  height : 100px;
+
+  /* On la décale un peu à droite */
+  right   : -60px;
+
+ /* Pour que le bas du nuage reste droit, il
+    faut s'assurer que le coin en bas à droite
+    soit bien un angle droit. */
+  border-bottom-left-radius: 0;
+}</pre>
+
+<p>{{EmbedLiveSample('Un_nuage', '100%', '160') }}</p>
+
+<h3 id="Une_citation">Une citation</h3>
+
+<p>Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :</p>
+
+<pre class="brush: html">&lt;blockquote&gt;People who think they know everything are a great annoyance to those of us who do. &lt;i&gt;Isaac Asimov&lt;/i&gt;&lt;/blockquote&gt;
+&lt;blockquote lang="fr"&gt;L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. &lt;i&gt;Pierre Desproges&lt;/i&gt;&lt;/blockquote&gt;</pre>
+
+<p>Voici la feuille de style que nous allons utiliser :</p>
+
+<pre class="brush: css">blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}</pre>
+
+<p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p>
+
+<h2 id="L'assemblage">L'assemblage</h2>
+
+<p>En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="joli"&gt;Coucou ! Je veux être joli.&lt;/div&gt;</pre>
+</div>
+
+<p>Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.</p>
+
+<pre class="brush: css">.joli {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.joli::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}</pre>
+
+<p>{{EmbedLiveSample("L'assemblage", '100%', '100')}}</p>
+
+<h2 id="La_suite">La suite</h2>
+
+<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition</a>.</p>
diff --git a/files/fr/apprendre/css/comment/generated_content/index.html b/files/fr/apprendre/css/comment/generated_content/index.html
new file mode 100644
index 0000000000..a8b6860177
--- /dev/null
+++ b/files/fr/apprendre/css/comment/generated_content/index.html
@@ -0,0 +1,159 @@
+---
+title: Contenu
+slug: Apprendre/CSS/Comment/Generated_content
+tags:
+  - CSS
+  - 'CSS:Premiers_pas'
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p> </p>
+<p>Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.</p>
+<p>Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.</p>
+<h3 id="Information_:_contenu" name="Information_:_contenu">Information : contenu</h3>
+<p>Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document</p>
+<p>Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+  <caption>
+    Plus de détails</caption>
+  <tbody>
+    <tr>
+      <td>Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document.
+        <p>Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.</p>
+        <p>Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Contenu_textuel" name="Contenu_textuel">Contenu textuel</h4>
+<p>CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez <code>:before</code> ou <code>:after</code> au sélecteur. Dans la déclaration, spécifiez la propriété <code>content</code> en lui donnant comme valeur le contenu textuel.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+  <caption>
+    Exemple</caption>
+  <tbody>
+    <tr>
+      <td>Cette règle ajoute le texte <span style="font-weight: bold; color: navy;">Référence :</span> devant chaque élément de la classe <code>ref</code> :
+        <div style="width: 30em;">
+          <pre class="eval">
+.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Référence : ";
+  }
+</pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+  <caption>
+    Plus de détails</caption>
+  <tbody>
+    <tr>
+      <td>Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> dans la spécification CSS.
+        <p>Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a>, ainsi que <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> dans la spécification CSS.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Contenu_sous_forme_d.27images" name="Contenu_sous_forme_d.27images">Contenu sous forme d'images</h4>
+<p>Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété <code>content</code>.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+  <caption>
+    Exemple</caption>
+  <tbody>
+    <tr>
+      <td>Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe <code>glossaire</code>:
+        <div style="width: 45em;">
+          <pre class="eval">
+a.glossaire:after {content: " " url("../images/glossary-icon.gif");}
+</pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p><br>
+  Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété <code>background</code>. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+  <caption>
+    Exemple</caption>
+  <tbody>
+    <tr>
+      <td>Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image.
+        <p>Le sélecteur spécifie l'id de l'élément. La valeur <code>no-repeat</code> fait que l'image apparaîtra une seule fois :</p>
+        <div style="width: 50em;">
+          <pre class="eval">
+#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;}
+</pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+  <caption>
+    Plus de détails</caption>
+  <tbody>
+    <tr>
+      <td>Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> dans la spécification CSS.</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Action_:_ajout_d.27une_image_de_fond" name="Action_:_ajout_d.27une_image_de_fond">Action : ajout d'une image de fond</h3>
+<p>Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :</p>
+<table style="border: 2px solid #ccc;">
+  <tbody>
+    <tr>
+      <td><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td>
+    </tr>
+  </tbody>
+</table>
+<p>(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)</p>
+<p>Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.</p>
+<div style="width: 40em;">
+  <pre class="eval">background: url("ligne-bleue.png");
+</pre>
+</div>
+<p>La valeur <code>repeat</code> est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :</p>
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+  <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p>
+  <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+    <div style="font-style: italic; width: 24em;">
+      <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
+    </div>
+    <div style="font-style: normal; padding-top: 2px; height: 8em;">
+      <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
+    </div>
+  </div>
+</div>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+  <caption>
+    Challenge</caption>
+  <tbody>
+    <tr>
+      <td>Téléchargez cette image :
+        <table style="border: 2px solid #ccc;">
+          <tbody>
+            <tr>
+              <td><img alt="Image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"></td>
+            </tr>
+          </tbody>
+        </table>
+        <p>Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :</p>
+        <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+          <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p>
+          <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+            <div style="font-style: italic; width: 24em; padding-top: 8px;">
+              <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
+            <div style="font-style: normal; padding-top: 12px; height: 8em;">
+              <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
+<p>Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.</p>
+<p>La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : <strong><a href="/fr/docs/CSS/Premiers_pas/Listes" title="fr/CSS/Premiers_pas/Listes">Listes.</a></strong></p>
diff --git a/files/fr/apprendre/css/comment/index.html b/files/fr/apprendre/css/comment/index.html
new file mode 100644
index 0000000000..28cc40c4fe
--- /dev/null
+++ b/files/fr/apprendre/css/comment/index.html
@@ -0,0 +1,90 @@
+---
+title: Apprendre à utiliser CSS pour résoudre des problèmes
+slug: Apprendre/CSS/Comment
+tags:
+  - Apprendre
+  - CSS
+  - Débutant
+translation_of: Learn/CSS/Howto
+---
+<p> </p>
+
+<p class="summary">Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p>
+
+<h2 id="Scénarios_fréquents">Scénarios fréquents</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basess">Basess</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li>
+</ul>
+
+<h3 id="CSS_et_texte">CSS et texte</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Boîtes_et_mises_en_page">Boîtes et mises en page</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Techniques_avancées_ou_peu_communes">Techniques avancées ou peu communes</h2>
+
+<p>Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :</p>
+
+<h3 id="Général">Général</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li>
+</ul>
+
+<h3 id="Effets_avancés">Effets avancés</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li>
+</ul>
+
+<h3 id="Mise_en_page">Mise en page</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes">Utiliser les boîtes flexibles CSS (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Utiliser une structure CSS avec plusieurs colonnes</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p>
diff --git a/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html b/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html
new file mode 100644
index 0000000000..eedebc7ee6
--- /dev/null
+++ b/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html
@@ -0,0 +1,329 @@
+---
+title: Mettre en forme du texte
+slug: Apprendre/CSS/Comment/Mettre_en_forme_du_texte
+tags:
+  - Apprendre
+  - CSS
+  - Débutant
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p class="summary">La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.</p>
+
+<p>La mise en forme du texte se décline sur deux composantes : la police et la disposition du texte. Ces deux éléments sont des bases, abordées parmi les premiers concepts qu'on voit en CSS. Toutefois, la mise en forme du texte est plus subtile qu'il n'y paraît. Dans cet article, nous détaillerons les différentes possibilités offertes par CSS. Libre à vous de choisir ce dont vous avez besoin ou ce sur quoi vous souhaitez expérimenter.</p>
+
+<h2 id="La_mise_en_forme_simple">La mise en forme simple</h2>
+
+<p>Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :</p>
+
+<ul>
+ <li>{{cssxref("color")}} : modifie la couleur de la police.</li>
+ <li>{{cssxref("font-family")}} : modifie la police utilisée.</li>
+ <li>{{cssxref("font-size")}} : modifie la taille de la fonte.</li>
+ <li>{{cssxref("font-style")}} : permet de passer d'une police italique à une police normale.</li>
+ <li>{{cssxref("font-weight")}} : permet de gérer la graisse d'une police.</li>
+ <li>{{cssxref("font-variant")}} : permet de choisir des variantes de police.</li>
+ <li>{{cssxref("letter-spacing")}} : permet d'ajuster l'interlettrage, quelles que soient les options de crénage (<em>kerning</em>) de la police originale.</li>
+ <li>{{cssxref("text-decoration")}} : permet d'afficher une ligne décorative, au-dessus, en-dessous ou au milieu du texte.</li>
+ <li>{{cssxref("text-shadow")}} : permet de définir une ou plusieurs ombres portées depuis le texte.</li>
+ <li>{{cssxref("text-transform")}} : permet de choisir la capitalisation du texte.</li>
+</ul>
+
+<p>CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :</p>
+
+<ul>
+ <li>{{cssxref("length#em","em")}} : la taille calculée pour la police de l'élément, relative par rapport à la taille de la police de l'élément parent.</li>
+ <li>{{cssxref("length#rem","rem")}} : analogue à <code>em</code> mais toujours relative à la taille de la police pour l'élément racine.</li>
+ <li>{{cssxref("::first-letter")}} : permet de sélectionner la première lettre d'un élément de bloc.</li>
+ <li>{{cssxref("::first-line")}} : permet de sélectionner la première ligne d'un élément de bloc.</li>
+ <li>{{cssxref("::selection")}} : correspond au texte actuellement sélectionné par l'utilisateur.</li>
+</ul>
+
+<p>Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie {{cssxref("font")}}. Celle-ci se décompose (dans l'ordre) en : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}}. Parmi toutes ces propriétés, seules <code>font-size</code> et <code>font-family</code> sont obligatoires pour cette notation raccourcie.</p>
+
+<p>Prenons un exemple pour illustrer ce point.</p>
+
+<p>Voici le fragment de code HTML qu'on utilisera :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  He dressed himself "all in his best," and at last got out into the streets.
+  The people were by this time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
+  regarded every one with a delighted smile. He looked so irresistibly pleasant,
+  in a word, that three or four good-humoured fellows said, "Good morning, sir!
+  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
+  blithe sounds he had ever heard, those were the blithest in his ears.
+&lt;/p&gt;
+&lt;p class="fancy"&gt;
+  He dressed himself "all in his best," and at last got out into the streets.
+  The people were by this time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
+  regarded every one with a delighted smile. He looked so irresistibly pleasant,
+  in a word, that three or four good-humoured fellows said, "Good morning, sir!
+  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
+  blithe sounds he had ever heard, those were the blithest in his ears.
+&lt;/p&gt;</pre>
+
+<p>Et voilà la feuille de style CSS qu'on appliquera :</p>
+
+<pre class="brush: css">/* Voici un disposition simple pour que
+   les paragraphes soient côte à côte. */
+p {
+  box-sizing: border-box;
+  width     : 50%;
+  padding   : 1em;
+  float     : left;
+}
+
+.fancy {
+  font: 0.85rem/150% Helvetica, Arial, sans-serif;
+}
+
+.fancy::first-line {
+  font-variant: small-caps;
+}
+
+.fancy::first-letter {
+  font-family: serif;
+  font-size  : 3rem;
+
+  float      : left;
+  background : blanchedalmond;
+  color      : goldenrod;
+  border     : 0.5rem solid gold;
+  padding    : 1rem;
+  margin     : 0 0.5rem 0 0;
+}</pre>
+
+<p>Ces deux éléments permettront d'aboutir au résultat suivant :</p>
+
+<p>{{EmbedLiveSample('La_mise_en_forme_simple', '100%', '320')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les styles de police vous permettent de faire de nombreuses choses. Toutefois, le Web reste un média principalement basé sur le texte et les polices ont donc leur importance. Nous vous encourageons donc à utiliser les mécanismes offerts par CSS pour améliorer la lisibilité du texte. Pour cela, vous pouvez consulter <a href="http://www.pompage.net/traduction/8-facons-simples-d-ameliorer-la-typographie-dans-vos">les différentes règles typographiques recommandées pour le Web</a>.</p>
+</div>
+
+<h2 id="Paramètres_avancées_des_polices_d'écriture">Paramètres avancées des polices d'écriture</h2>
+
+<p>CSS fournit des propriétés, encore plus avancées, dédiées aux polices d'écriture. Cependant, ces propriétés sont toujours expérimentales et parfois mal supportées par certains navigateurs ou spécifiques à certaines langues (généralement les langues non latines) :</p>
+
+<ul>
+ <li>{{cssxref("font-kerning")}} : active ou désactive les options de crénage.</li>
+ <li>{{cssxref("font-feature-settings")}} : active ou désactive les différentes fonctionnalités des polices <a href="https://fr.wikipedia.org/wiki/OpenType">OpenType</a>.</li>
+ <li>{{cssxref("font-variant-alternates")}} : permet de contrôler l'utilisation de glyphes alternatifs pour une fonte donnée.</li>
+ <li>{{cssxref("font-variant-caps")}} : permet de contrôler l'utilisation de glyphes capitaux alternatifs.</li>
+ <li>{{cssxref("font-variant-east-asian")}} : permet de contrôler l'utilisation de glyphes alternatifs pour les scripts d'Asie orientale comme le japonais ou le chinois.</li>
+ <li>{{cssxref("font-variant-ligatures")}} : permet de contrôler les ligatures et formes contextuelles qui sont utilisées dans le texte.</li>
+ <li>{{cssxref("font-variant-numeric")}} : permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.</li>
+ <li>{{cssxref("font-variant-position")}} : permet de contrôler l'utilisation de glyphes alternatifs de moindre taille pour les textes positionnés en indice ou en exposant par rapport à la ligne de base.</li>
+ <li>{{cssxref("font-size-adjust")}} : permet d'ajuster la taille visuelle de la fonte sans modifier la taille intrinsèque de la fonte.</li>
+ <li>{{cssxref("font-stretch")}} : permet de choisir des formes alternatives, plus ou moins étirées, d'une police donnée.</li>
+ <li>{{cssxref("text-decoration-color")}} : définit la couleur utilisée lorsqu'une ligne est dessinée sur, sous ou à travers le texte.</li>
+ <li>{{cssxref("text-decoration-line")}} : définit le type de ligne décorative qui peut être ajoutée à un élément.</li>
+ <li>{{cssxref("text-decoration-style")}} : définit le style des lignes dessinées sur le texte.</li>
+ <li>{{cssxref("text-underline-position")}} : définit la position du soulignement mis en place lorsque la propriété <code>text-decoration-line</code> vaut <code>underline</code>.</li>
+ <li>{{cssxref("text-rendering")}} : essaie d'optimiser le rendu du texte.</li>
+</ul>
+
+<h2 id="Appliquer_des_fontes">Appliquer des fontes</h2>
+
+<p>Il existe des milliers de polices, quelques unes sont très connues mais on peut s'y perdre rapidement. La typographie, l'art des polices ne sont pas nouveaux, cela dit, le Web apporte son lot de contraintes spécifiques et les fontes ne sont parfois pas aussi adaptées que sur le papier. Voyons ici comment gérer cela.</p>
+
+<p>La propriété {{cssxref("font-family")}} vous permet de choisir la police de caractères que vous souhaitez appliquer à votre texte. Cette propriété fonctionne avec une valeur qui s'écrit sous la forme d'une liste de noms de polices, chacun séparé par des virgules. Le navigateur parcourera les polices de gauche à droite afin d'utiliser celle qui est disponible sur la machine.</p>
+
+<pre class="brush: css">body {
+  /* Si la police "Open Sans" est disponible, c'est
+     celle-ci qui serait utilisée pour mettre en forme
+     le texte. Sinon, ce sera la police Arial qui sera
+     utilisée et enfin, si Arial n'est pas disponible,
+     ce sera la police sans-serif disponible, par défaut
+     sur le système, qui sera utilisée. */
+  font-family: "Open Sans", Arial, sans-serif;
+}</pre>
+
+<h3 id="Les_polices_par_défaut">Les polices par défaut</h3>
+
+<p>Tout d'abord, CSS définit cinq noms de polices génériques : <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code>, et <code>fantasy</code>. Celles-ci sont choisies par le navigateur selon le système d'exploitation utilisé (il est possible que les différents navigateurs choisissent des polices différentes). C'est en quelque sorte les polices de dernier recours à utiliser. Les polices désignées par <code>serif</code>, <code>sans-serif</code> et <code>monospace</code> devraient être assez prévisibles. En revanche, celles désignées par <code>cursive</code> et <code>fantasy</code> sont moins prévisibles et nous vous conseillons donc de les utiliser avec précaution.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On ne peut jamais être sûr à 100% des polices disponibles sur un ordinateur, aussi, c'est une bonne pratique que de toujours ajouter une police générique en dernier dans la liste des valeurs pour la propriété <code>font-family</code>.</p>
+</div>
+
+<h3 id="Les_polices_adaptées_au_Web">Les polices adaptées au Web</h3>
+
+<p>Les polices génériques sont convenables mais imprévisibles. La plupart du temps, on souhaite mieux contrôler la police qui sera utilisée pour afficher le contenu textuel. On a vu juste avant qu'il était impossible de déterminer à coup sûr les polices disponibles sur un système. Toutefois, on peut s'aider de statistiques pour parier sur différentes polices fréquemment utilisées. Parmi les différents systèmes d'exploitation courants (Windows, Mac, certaines distribution Linux grand public, Android, et iOS), il existe un ensemble de polices largement répandues. Ces polices sont parfois appelées « <em>web fonts</em> » car elles peuvent être utilisées sans trop de risque sur le Web.</p>
+
+<p>Bien entendu, les systèmes d'exploitation évoluent et la liste des <em>web</em><em> fonts</em> peut évoluer au cour du temps. Cependant, à l'heure où nous écrivons ces lignes, on peut considérer que les polices suivantes sont largement répandues (notamment grâce à l'initiative <em><a href="https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a></em> de Microsoft à la fin des années 90) :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col" style="white-space: nowrap;">Type générique</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Arial</td>
+   <td>sans-serif</td>
+   <td>On considère généralement qu'il est préférable d'ajouter également <em>Helvetica</em> devant <em>Arial</em>. En effet, les polices sont presque identiques et bien qu'Arial soit plus répandue, <em>Helvetica</em> est plus appréciée (en termes de forme).</td>
+  </tr>
+  <tr>
+   <td>Courier New</td>
+   <td>monospace</td>
+   <td>Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée <em>Courier</em>. C'est une bonne pratique d'utiliser les deux tout en favorisant <em>Courier New</em> dans l'ordre des priorités.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Georgia</td>
+   <td>serif</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Times New Roman</td>
+   <td>serif</td>
+   <td>Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée <em>Times</em>. C'est une bonne pratique d'utiliser les deux tout en favorisant <em>Times New Roman</em> dans l'ordre des priorités.</td>
+  </tr>
+  <tr>
+   <td>Trebuchet MS</td>
+   <td>serif</td>
+   <td>Attention, celle-ci n'est pas fortement répandue sur les systèmes d'exploitation mobiles.</td>
+  </tr>
+  <tr>
+   <td>Verdana</td>
+   <td>sans-serif</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Parmi les différentes ressources disponibles sur le sujet, <a href="http://www.cssfontstack.com/">cssfontstack.com</a> maintient une liste des <em>web fonts</em> disponibles sur Windows et Mac OS. Cela peut vous aider à décider les polices à utiliser pour votre site.</p>
+</div>
+
+<h3 id="Les_polices_personnalisées">Les polices personnalisées</h3>
+
+<p>Enfin, si vous souhaitez utiliser votre propre police sur votre site web, la meilleur façon reste d'intégrer cette police dans votre site web.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> les polices sont sujettes au droit d'auteur (<em>copyright</em>) et vous devez donc vérifier, avant de les utiliser, que vous pouvez les intégrer sur votre site. Certains sites vous permettent d'en utiliser certaines gratuitement, comme <a href="https://www.google.com/fonts">Google Fonts</a>. D'autres, vous permettent d'acheter le droit d'utiliser certaines polices comme, par exemple, <a href="http://www.fonts.com/">fonts.com</a>.</p>
+</div>
+
+<p>L'intégration d'une police personnalisée se fait en trois étapes :</p>
+
+<ol>
+ <li>Assurez-vous que la police soit disponible sur votre serveur web. Pour assurer une meilleure rétro-compatibilité, la police doit idéalement être disponible sous quatre format :
+  <ul>
+   <li><a href="https://fr.wikipedia.org/wiki/Web_Open_Font_Format">WOFF et WOFF2</a>, supportés par les navigateurs modernes (WOFF2 remplacera WOFF)</li>
+   <li><a href="https://fr.wikipedia.org/wiki/Embedded_OpenType">EOT</a>, supporté par {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} avant sa version 9</li>
+   <li>SVG, supporté par l'ancienne version de Safari pour iOS (il est peu probable que celle-ci soit encore utilisée)</li>
+   <li><a href="https://fr.wikipedia.org/wiki/OpenType">OTF</a>, supporté par les anciennes versions des navigateurs par défaut Android.</li>
+  </ul>
+ </li>
+ <li>Utilisez la déclaration {{cssxref("@font-face")}} en utilisant les adresses des fichiers et les autres caractéristiques (comme le nom)</li>
+ <li>Utilisez le nom déclaré pour la police personnalisée dans la liste des valeurs fournies à la propriété {{cssxref("font-family")}}.</li>
+</ol>
+
+<p>Voici un exemple d'un telle mise en œuvre.</p>
+
+<p>On utilisera ce fragment de code HTML :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  He dressed himself "all in his best," and at last
+  got out into the streets. The people were by this
+  time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his
+  hands behind him, Scrooge regarded every one with
+  a delighted smile. He looked so irresistibly
+  pleasant, in a word, that three or four good-humoured
+  fellows said, "Good morning, sir! A merry Christmas
+  to you!" And Scrooge said often afterwards, that of
+  all the blithe sounds he had ever heard, those were
+  the blithest in his ears.
+&lt;/p&gt;
+&lt;p class="fancy"&gt;
+  He dressed himself "all in his best," and at last
+  got out into the streets. The people were by this
+  time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his
+  hands behind him, Scrooge regarded every one with
+  a delighted smile. He looked so irresistibly
+  pleasant, in a word, that three or four good-humoured
+  fellows said, "Good morning, sir! A merry Christmas
+  to you!" And Scrooge said often afterwards, that of
+  all the blithe sounds he had ever heard, those were
+  the blithest in his ears.
+&lt;/p&gt;</pre>
+
+<p>Et on appliquera cette feuille de style CSS :</p>
+
+<pre class="brush: css">/* Une disposition simple pour voir
+   les paragraphes côte à côte. */
+p {
+  box-sizing: border-box;
+  width     : 50%;
+  padding   : 1em;
+  float     : left;
+}
+
+@font-face {
+  /* Là on définit le nom pour la police
+     personnalisé, on l'utilisera dans la
+     liste */
+  font-family:"Open Sans";
+
+  /* Ici, on liste les fichiers de police,
+     la syntaxe est détaillée ici :
+     http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */
+  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot");
+  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.f641a7d4e80f.svg#OpenSansRegular") format('svg');
+
+  /* Ici, on définit la graisse et le style de la police */
+  font-weight:normal;
+  font-style:normal;
+}
+
+/* Enfin, il suffit simplement d'ajouter la
+   police personnalisée dans la liste des valeurs
+   pour font. */
+.fancy {
+  font: 0.85rem/150% "Open Sans", Helvetica, Arial, sans-serif;
+}
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p>{{EmbedLiveSample('Les_polices_personnalisées', '100%', '320')}}</p>
+
+<h2 id="La_disposition_du_texte">La disposition du texte</h2>
+
+<p>La disposition du teexte concerne les aspects liés aux sauts de ligne et à la position du texte par rapport à la ligne de base ou par rapport à son contenant.</p>
+
+<ul>
+ <li>{{cssxref("line-height")}} : définit la hauteur d'une ligne de texte, quelle que soit la taille actuelle de la police utilisée.</li>
+ <li>{{cssxref("text-align")}} : décrit la façon dont le texte est aligné par rapport à son bloc.</li>
+ <li>{{cssxref("text-indent")}} : définit l'espace qu'on ajoute à gauche du texte avant de commencer la première ligne du texte.</li>
+ <li>{{cssxref("text-overflow")}} : définit la façon dont le contenu qui « déborde » est affiché (ou non).</li>
+ <li>{{cssxref("white-space")}} : définit la façon dont les blancs et les sauts de ligne sont gérés au sein de l'élément.</li>
+ <li>{{cssxref("word-break")}} : définit si on ajoute ou non des césures au sein des mots pour passer à la ligne.</li>
+ <li>{{cssxref("word-spacing")}} : ajuste la distance entre les mots (inter mot).</li>
+</ul>
+
+<p>De la même façon qu'avec la mise en forme du texte, la disposition du texte est concernée par quelques propriétés expérimentales, assez peu supportées par certains navigateurs ou dédiées aux langues non latines. Celles-ci permettent de résoudre plusieurs problèmes d'ordre typographique et il est donc intéressant de les connaître (sans que cela doive devenir une source de préoccupation majeure).</p>
+
+<ul>
+ <li>{{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue utilisée et généralement, on laissera cette tâche à HTML car cet aspect est fortement lié au contenu même).</li>
+ <li>{{cssxref("hyphens")}} : active ou désactive l'ajout de trait d'union pour former les césures en fin de ligne.</li>
+ <li>{{cssxref("line-break")}} : active ou désactive les sauts de lignes pour les langues asiatiques.</li>
+ <li>{{cssxref("text-align-last")}} : définit la façon dont la dernière ligne d'un bloc (ou une ligne avant un saut à la ligne explicite) est alignée.</li>
+ <li>{{cssxref("text-orientation")}} : définit l'orientation du texte sur une ligne.</li>
+ <li>{{cssxref("word-wrap")}} : définit si le navigateur ajoute ou non des retours à la ligne automatiques pour éviter un débordement du texte.</li>
+ <li>{{cssxref("writing-mode")}} : définit si les lignes du texte sont disposées horizontalement ou verticalement et la direction selon laquelle le bloc s'étend.</li>
+</ul>
+
+<h2 id="La_suite">La suite</h2>
+
+<p>Avec tous ces éléments, vous devriez avoir un bon aperçu des outils CSS qui vous permettent de mettre en forme du texte. Nous vous encourageons à tester ces différentes propriétés et à bidouiller avec ces différents concepts pour concrétiser ces notions. Une fois à l'aise avec ces notions, n'hésitez pas à continuer avec un autre sujet : <a href="/fr/docs/Learn/CSS/Howto/create_fancy_boxes">créer de belles boîtes</a> contenant du texte.</p>
diff --git a/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html b/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html
new file mode 100644
index 0000000000..75baad8dba
--- /dev/null
+++ b/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html
@@ -0,0 +1,46 @@
+---
+title: personnaliser une liste
+slug: Apprendre/CSS/Comment/personnaliser_une_liste
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<p>{{draft}}</p>
+
+<p class="summary">Les listes sont des structures très répandues en HTML et les CSS apportent un ensemble complet de propriétés pour leur donner l'apparence que vous voulez. Comprendre comment utiliser et modifier les styles par défaut est une compétence ordinaire dont vous aurez besoin dès que vous utiliserez les listes.</p>
+
+<p>Les listes {{Glossary("HTML")}} sont des structures très simples et se trouvent sous deux formes différentes : ordonnée ou non. Elles utilisent les balises {{HTMLElement('ul')}}, {{HTMLElement('ol')}}, et {{HTMLElement('li')}}. Vous trouverez tous les détails dans <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">notre article dédié</a>, mais pour le reste de cet article, nous utiliserons le code HTML suivant pour appliquer les styles :</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Je suis un élément de liste&lt;/li&gt;
+  &lt;li&gt;Je suis un autre élément de liste&lt;/li&gt;
+  &lt;li&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Je suis un élément de liste imbriqué&lt;/li&gt;
+      &lt;li&gt;Je suis un autre élément de liste imbriqué&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h2 id="Styles_dédiés">Styles dédiés</h2>
+
+<p>Les CSS fournissent un jeu complet de propriétés pour gérer les puces :</p>
+
+<ul>
+ <li>{{cssxref('list-style')}}<br>
+  Une propriété qui regroupe la gestion de toutes les propriétés suivantes</li>
+ <li>{{cssxref('list-style-type')}}<br>
+  Le type de puce à afficher au début de chaque élément de liste</li>
+ <li>{{cssxref('list-style-position')}}<br>
+  Indique si la puce doit être affichée à l'intérieur ou à l'extérieur de la boîte encadrant l'élement de liste.</li>
+ <li>{{cssxref('list-style-image')}}<br>
+  Permet d'utiliser une image personnalisée au lieu d'un type de puce prédéfini.</li>
+</ul>
+
+<p>En complément, les CSS permettent également d'avoir des <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters">styles de compteurs personnalisés</a> qui vont très bien avec les listes.</p>
+
+<div class="note">
+<p>Les styles de compteurs ne seront pas abordés dans cet article. Si vous souhaitez approfondir ce sujet, nous avons à votre disposition <a href="/fr/docs/Web/CSS/Compteurs_CSS">un article dédié</a>.</p>
+</div>
+
+<h2 id="Indentation_de_liste">Indentation de liste</h2>
+
+<h2 id="Puces_personnalisées">Puces personnalisées</h2>
diff --git a/files/fr/apprendre/css/css_layout/exemples_pratiques_de_positionnement/index.html b/files/fr/apprendre/css/css_layout/exemples_pratiques_de_positionnement/index.html
new file mode 100644
index 0000000000..da821fefd1
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/exemples_pratiques_de_positionnement/index.html
@@ -0,0 +1,407 @@
+---
+title: Exemples pratiques de positionnement
+slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement
+translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
+---
+<div>{{LearnSidebar}}</div>
+
+<p><br>
+ Cet article montre comment construire quelques exemples réels de choses que vous pouvez faire avec le positionnement.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Les bases du HTML (étudier <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (étudier <a href="/fr/docs/Learn/CSS/First_steps">Introduction au CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Avoir une idée des aspects pratiques du positionnement</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Une_boîte_dinformation_à_onglets">Une boîte d'information à onglets</h2>
+
+<p>Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une fonction très courante utilisée lorsque vous voulez regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites Web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où vous pourriez vouloir rendre beaucoup d'informations disponibles sans qu'elles remplissent toute l'interface utilisateur. Notre exemple simple ressemblera à ceci une fois que nous aurons terminé :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+</div>
+
+<p>Vous pourriez vous dire "pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que les onglets permettent de cliquer sur les pages séparées pour créer l'effet ?" Ce code serait plus simple, oui, mais alors chaque "page" séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites " à page unique " deviennent très populaires - en particulier pour les interfaces Web mobiles - parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a JavaScript feature such as <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. At this point in your learning however we want to keep things as simple as possible. There is some JavaScript later on, but only a tiny bit.</p>
+</div>
+
+<p>Pour commencer, nous aimerions que vous fassiez une copie locale du fichier HTML de départ — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le body:</p>
+
+<pre class="brush: html">&lt;section class="info-box"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;div class="panels"&gt;
+    &lt;article class="active-panel"&gt;
+      &lt;h2&gt;The first tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The second tab&lt;/h2&gt;
+
+      &lt;p&gt;This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The third tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!&lt;/p&gt;
+
+      &lt;ol&gt;
+        &lt;li&gt;dui neque eleifend lorem, a auctor libero turpis at sem.&lt;/li&gt;
+        &lt;li&gt;Aliquam ut porttitor urna.&lt;/li&gt;
+        &lt;li&gt;Nulla facilisi&lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/article&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<p>Nous avons un élément {{htmlelement("section")}}  avec une <code>class</code>  <code>info-box</code>, qui contient une {{htmlelement("ul")}} et une {{htmlelement("div")}}. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. la <code>div</code> contient trois éléments {{htmlelement("article")}} , qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.</p>
+
+<p>L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'un onglet est pressé, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre quelques bases de JavaScript dès que possible - plus les fonctionnalités de votre interface utilisateur deviennent complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.</p>
+
+<h3 id="General_setup">General setup</h3>
+
+<p>To begin with, add the following between your opening and closing {{HTMLElement("style")}} tags:</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}</pre>
+
+<p>This is just some general setup to set a sans-serif font on our page, use the <code>border-box</code> {{cssxref("box-sizing")}} model, and get rid of the default {{htmlelement("body")}} margin.</p>
+
+<p>Next, add the following just below your previous CSS:</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}</pre>
+
+<p>This sets a specific width and height on the content, and centers it on the screen using the old <code>margin: 0 auto</code> trick. Previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. It also looks a bit jarring to have different tabs at different heights.</p>
+
+<h3 id="Styling_our_tabs">Styling our tabs</h3>
+
+<p>Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to remove the default {{cssxref("padding-left")}} and {{cssxref("margin-top")}} from the unordered list:</p>
+
+<pre class="brush: css">.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: We are using descendant selectors with <code>.info-box</code> at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.</p>
+</div>
+
+<p>Next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their {{cssxref("list-style-type")}} is set to <code>none</code> to get rid of the bullets, and their {{cssxref("width")}} is set to <code>150px</code> so they will comfortably fit across the info-box. The {{htmlelement("a")}} elements are set to {{cssxref("display")}} inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties.</p>
+
+<p>Add the following CSS:</p>
+
+<pre class="brush: css">.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}</pre>
+
+<p>Finally for this section we'll set some styles on the link states. First, we'll set the <code>:focus</code> and <code>:hover</code> states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a <code>class</code> of <code>active</code> is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:</p>
+
+<pre class="brush: css">.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}</pre>
+
+<h3 id="Styling_the_panels">Styling the panels</h3>
+
+<p>The next job is to style our panels. Let's get going!</p>
+
+<p>First, of all, add the following rule to style the <code>.panels</code> {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} <code>relative</code> to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.</p>
+
+<pre class="brush: css">.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}</pre>
+
+<p>Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.</p>
+
+<p>The second rule we'll add here makes it so that a panel with a <code>class</code> of <code>active-panel</code> set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a <code>z-index</code> of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.</p>
+
+<pre class="brush: css">.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}</pre>
+
+<h3 id="Adding_our_JavaScript">Adding our JavaScript</h3>
+
+<p>The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):</p>
+
+<pre>var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i &lt; tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i &lt; tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i &lt; panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}</pre>
+
+<p>This code does the following:</p>
+
+<ul>
+ <li>First we save a reference to all the tabs and all the panels in two variables called <code>tabs</code> and <code>panels</code>, so we can easily do things to them later on.</li>
+ <li>Then we use a <code>for</code> loop to cycle through all the tabs and run a function called <code>setTabHandler()</code> on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number <code>i</code> that indentifies the tab's position in the <code>tabs</code> array.</li>
+ <li>In the <code>setTabHandler()</code> function, the tab has an <code>onclick</code> event handler set on it, so that when the tab is clicked, the following occurs:
+  <ul>
+   <li>A <code>for</code> loop is used to cycle through all the tabs and remove any classes that are present on them.</li>
+   <li>A <code>class</code> of <code>active</code> is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.</li>
+   <li>A <code>for</code> loop is used to cycle through all the panels and remove any classes that are present on them.</li>
+   <li>A class of <code>active-panel</code> is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>That's it for the first example. Keep your code open, as we'll be adding to it in the second one.</p>
+
+<h2 id="A_fixed_position_tabbed_info-box">A fixed position tabbed info-box</h2>
+
+<p>In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+</div>
+
+<p>As a starting point, you can use your completed example from the first section of the article, or make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> from our Github repo.</p>
+
+<h3 id="HTML_additions">HTML additions</h3>
+
+<p>First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:</p>
+
+<pre class="brush: html">&lt;section class="fake-content"&gt;
+  &lt;h1&gt;Fake content&lt;/h1&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+&lt;/section&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can feel free to change the fake content for some real content if you like.</p>
+</div>
+
+<h3 id="Changes_to_the_existing_CSS">Changes to the existing CSS</h3>
+
+<p>Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your <code>.info-box</code> rule to get rid of <code>margin: 0 auto;</code> (we no longer want the info-box centered), add {{cssxref("position")}}<code>: fixed;</code>, and stick it to the {{cssxref("top")}} of the browser viewport.</p>
+
+<p>It should now look like this:</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}</pre>
+
+<h3 id="Styling_the_main_content">Styling the main content</h3>
+
+<p>The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:</p>
+
+<pre class="brush: css">.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}</pre>
+
+<p>To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.</p>
+
+<p>This marks the end of the second example; we hope you'll find the third just as interesting.</p>
+
+<h2 id="A_sliding_hidden_panel">A sliding hidden panel</h2>
+
+<p>The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.</p>
+
+<p>Our finished example will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+</div>
+
+<p>As a starting point, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:</p>
+
+<pre class="brush: css">&lt;label for="toggle"&gt;❔&lt;/label&gt;
+&lt;input type="checkbox" id="toggle"&gt;
+&lt;aside&gt;
+
+  ...
+
+&lt;/aside&gt;</pre>
+
+<p>To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <code>&lt;label&gt;</code> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <code>&lt;input&gt;</code> checkbox using the <code>for</code> and <code>id</code> attributes.</p>
+
+<div class="note">
+<p><strong>Note</strong>: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.</p>
+</div>
+
+<p>Here we are going to use these elements for a slightly different purpose — another useful side effect of <code>&lt;label&gt;</code> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).</p>
+
+<p>In the below sections we'll explain how this all works.</p>
+
+<h3 id="Styling_the_form_elements">Styling the form elements</h3>
+
+<p>First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:</p>
+
+<pre class="brush: css">label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}</pre>
+
+<p>The first rule styles the <code>&lt;label&gt;</code>; here we've:</p>
+
+<ul>
+ <li>Set a large {{cssxref("font-size")}} to make the icon nice and big.</li>
+ <li>Set {{cssxref("position")}} <code>absolute</code> on it, and used {{cssxref("top")}} and {{cssxref("right")}} to position it nicely in the top-right corner.</li>
+ <li>Set a {{cssxref("z-index")}} of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.</li>
+ <li>Used the {{cssxref("cursor")}} property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.</li>
+</ul>
+
+<p>The second rule sets {{cssxref("position")}} <code>absolute</code> on the actual checkbox <code>&lt;input&gt;</code> element, and hides it off the top of the screen. We don't actually want to see this on our UI.</p>
+
+<h3 id="Styling_the_panel">Styling the panel</h3>
+
+<p>Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:</p>
+
+<pre class="brush: css">aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 100%;
+  padding: 0 20px;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}</pre>
+
+<p>There's a lot going on here — let's discuss it bit by bit:</p>
+
+<ul>
+ <li>First, we set some simple {{cssxref("background-color")}} and {{cssxref("color")}} on the info box.</li>
+ <li>Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.</li>
+ <li>We also include some horizontal {{cssxref("padding")}} to space it out a bit.</li>
+ <li>Next we set {{cssxref("position")}}<code>: fixed;</code> on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the {{cssxref("top")}} of the viewport, and set it so that by default it is offscreen to the {{cssxref("right")}}.</li>
+ <li>Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the <code>&lt;label&gt;</code> will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...</li>
+</ul>
+
+<h3 id="Setting_the_checked_state">Setting the checked state</h3>
+
+<p>There is one final bit of CSS to add — put the following at the bottom of your CSS:</p>
+
+<pre class="brush: css">input[type=checkbox]:checked + aside {
+  right: 0px;
+}</pre>
+
+<p>The selector is pretty complex here — we are selecting the <code>&lt;aside&gt;</code> element adjacent to the <code>&lt;input&gt;</code> element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the <code>&lt;aside&gt;</code> to <code>0px</code>, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.</p>
+
+<p>So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/flexbox/index.html b/files/fr/apprendre/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..bcf02e9910
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/flexbox/index.html
@@ -0,0 +1,341 @@
+---
+title: Flexbox
+slug: Apprendre/CSS/CSS_layout/Flexbox
+tags:
+  - Apprentissage
+  - Article
+  - Boîtes modulables
+  - CSS
+  - Codage
+  - Disposition
+  - Débutant
+  - Guide
+  - Mise en page avec les CSS
+  - Mises en page
+  - flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre à utiliser le système Flexbox pour créer des mises en page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2>
+
+<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p>
+
+<p>Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :</p>
+
+<ul>
+ <li>centrer verticalement un bloc de contenu dans son parent ;</li>
+ <li>faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;</li>
+ <li>faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.</li>
+</ul>
+
+<p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p>
+
+<h2 id="Voici_un_exemple_simple"><span>Voici un exemple simple</span></h2>
+
+<p>Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">voir en direct ici</a> aussi.</p>
+
+<p>Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.</p>
+
+<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p>
+
+<h2 id="Détermination_des_éléments_à_disposer_en_boîtes_flexibles">Détermination des éléments à disposer en boîtes flexibles</h2>
+
+<p>Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur <code>flex</code> à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :</p>
+
+<pre class="brush: css">section {
+  display: flex;
+}</pre>
+
+<p>Voici le résultat :</p>
+
+<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p>
+
+<p>Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez aussi définir une valeur <code>inline-flex</code> pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p>
+</div>
+
+<h2 id="Aparté_sur_le_modèle_flex"><span>Aparté sur le modèle flex</span></h2>
+
+<p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p>
+
+<p><img alt="Terminologie pour les boîtes modulables" class="default internal" src="https://mdn.mozillademos.org/files/16096/termes_flex.png" style="display: block; height: 333px; margin: 0px auto; width: 563px;"></p>
+
+<ul>
+ <li>L'<strong>axe principal</strong> <strong>(main axis) </strong>est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'<strong>origine principale</strong> <strong>(main start) </strong>et la <strong>fin principale (main end)</strong>.</li>
+ <li>L'<strong>axe croisé </strong><strong> </strong>est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début<strong> (cross start)</strong> et la fin (<strong>cross end</strong>) de l'axe croisé.</li>
+ <li>L'élément parent dont la propriété est <code>display: flex</code>  ({{htmlelement("section")}} dans notre exemple) est appelé le <strong>conteneur flex</strong> (<strong>flex container</strong>).</li>
+ <li>Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés <strong>éléments flex (flex items) </strong>(les éléments {{htmlelement("article")}}} dans notre exemple).</li>
+</ul>
+
+<p>Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.</p>
+
+<h2 id="Colonnes_ou_lignes">Colonnes ou lignes ?</h2>
+
+<p>Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à <code>row</code> : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).</p>
+
+<p>Ajoutons la déclaration suivante dans la règle :</p>
+
+<pre class="brush: css">flex-direction: column;</pre>
+
+<p>Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p>
+</div>
+
+<h2 id="Enveloppement">Enveloppement</h2>
+
+<p>Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, essayez <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">directement</a> (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :</p>
+
+<p><img alt="Débordement des éléments modulables" src="https://mdn.mozillademos.org/files/16098/Exemple_flexbox_2.png" style="display: block; height: 663px; margin: 0px auto; width: 933px;"></p>
+
+<p>Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour <code>section</code> :</p>
+
+<pre class="brush: css">flex-wrap: wrap;</pre>
+
+<p>Essayons ; la disposition est bien meilleure avec cet ajout :</p>
+
+<p><img alt="Conditionnement des éléments modulables" src="https://mdn.mozillademos.org/files/16099/Exemple_flexbox_3.png" style="display: block; height: 918px; margin: 0px auto; width: 933px;">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p>
+
+<p>Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en <code>row-reverse</code> — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.</p>
+
+<h2 id="Forme_abrégée_«_flex-flow_»">Forme abrégée « flex-flow »</h2>
+
+<p>Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer</p>
+
+<pre class="brush: css">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>par</p>
+
+<pre class="brush: css">flex-flow: row wrap;</pre>
+
+<h2 id="Taille_modulable_des_éléments_flex">Taille modulable des éléments flex</h2>
+
+<p>Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> ou prenez une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> comme nouveau point de départ (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">voir en direct</a>).</p>
+
+<p>Ajoutez d'abord la règle ci-dessous en fin de la CSS :</p>
+
+<pre class="brush: css">article {
+  flex: 1;
+}</pre>
+
+<p>Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.</p>
+
+<p>Maintenant ajoutons cette règle en-dessous de la précédente :</p>
+
+<pre class="brush: css">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.</p>
+
+<p>Vous pouvez également définir une valeur minimale de taille dans la valeur <code>flex</code>. Modifiez comme suit vos règles <code>article</code> existantes :</p>
+
+<pre class="brush: css">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : <em>quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.</em></p>
+
+<p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p>
+
+<p><img alt="Modulation de la largeur" src="https://mdn.mozillademos.org/files/16100/Exemple_flexbox_4.png" style="border-style: solid; border-width: 1px; display: block; height: 484px; margin: 0px auto; width: 1001px;"></p>
+
+<p>Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.</p>
+
+<h2 id="Flex_forme_abrégée_vs_forme_longue">Flex : forme abrégée vs forme longue</h2>
+
+<p>{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :</p>
+
+<ul>
+ <li>une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ;</li>
+ <li>une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ;</li>
+ <li>une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}.</li>
+</ul>
+
+<p>Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.</p>
+
+<h2 id="Alignement_horizontal_et_vertical">Alignement horizontal et vertical</h2>
+
+<p>Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">voir aussi en direct</a>). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.</p>
+
+<p><img alt="Alignement" src="https://mdn.mozillademos.org/files/16101/Exemple_flexbox_5.png" style="display: block; height: 105px; margin: 0px auto; width: 960px;"></p>
+
+<p>D'abord, faites une copie locale de cet exemple.</p>
+
+<p>Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :</p>
+
+<pre class="brush: css">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.</p>
+
+<p>{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).</p>
+
+<ul>
+ <li>Par défaut, la valeur est <code>stretch</code>, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut.</li>
+ <li>Avec la valeur <code>center</code>, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.</li>
+ <li>Il y a également des valeurs comme <code>flex-start</code> et <code>flex-end</code> qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails.</li>
+</ul>
+
+<p>Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:</p>
+
+<pre class="brush: css">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>Voyez l'effet obtenu, puis supprimez ensuite la règle.</p>
+
+<p>{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.</p>
+
+<ul>
+ <li>La valeur par défaut est <code>flex-start</code>. Tous les éléments sont disposés vers l'origine de l'axe principal.</li>
+ <li>Vous utiliserez  <code>flex-end</code> pour les disposer vers la fin.</li>
+ <li><code>center</code> est aussi une valeur possible pour <code>justify-content</code>. Avec elle, les éléments flex sont placés vers le centre de l'axe principal.</li>
+ <li>La valeur <code>space-around</code>, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun.</li>
+ <li>Une autre valeur, <code>space-between</code>, est semblable à <code>space-around</code> mais elle ne laisse pas d'espace aux extrémités.</li>
+</ul>
+
+<p>N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.</p>
+
+<h2 id="Ordonner_les_éléments_flex">Ordonner les éléments flex</h2>
+
+<p>Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.</p>
+
+<p>Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :</p>
+
+<pre class="brush: css">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :</p>
+
+<ul>
+ <li>par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;</li>
+ <li>les éléments flex avec des valeurs <code>order</code> plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;</li>
+ <li>les éléments flex avec les mêmes valeurs pour <code>order</code> sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs <code>order</code> de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier.</li>
+ <li>Le troisième élément suit le deuxième, car il a la même valeur pour <code>order</code> et qu'il est placé après dans le code source.</li>
+</ul>
+
+<p>Vous pouvez donner des valeurs négatives à <code>order</code> pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :</p>
+
+<pre class="brush: css">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Boîtes_flex_imbriquées">Boîtes flex imbriquées</h2>
+
+<p>Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">à voir en direct également</a>).</p>
+
+<p><img alt="Imbrications avec flexbox" src="https://mdn.mozillademos.org/files/16102/Exemple_flexbox_6.png" style="border-style: solid; border-width: 1px; display: block; height: 559px; margin: 0px auto; width: 1003px;"></p>
+
+<p>Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :</p>
+
+<pre>section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Regardez le code utilisé pour cette disposition.</p>
+
+<p>Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.</p>
+
+<pre class="brush: css">section {
+  display: flex;
+}</pre>
+
+<p>Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.</p>
+
+<pre class="brush: css">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur <code>flex:1 100px;</code> pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.</p>
+
+<pre class="brush: css">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.</p>
+
+<pre class="brush: css">button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>La prise en charge de Flexbox est disponible avec la plupart des  navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).</p>
+
+<p>Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.</p>
+
+<p>Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.</p>
+
+<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.</p>
+
+<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
+</div>
diff --git a/files/fr/apprendre/css/css_layout/flexbox_skills/index.html b/files/fr/apprendre/css/css_layout/flexbox_skills/index.html
new file mode 100644
index 0000000000..8cb4d16891
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/flexbox_skills/index.html
@@ -0,0 +1,99 @@
+---
+title: 'Testez vos compétences : Flexbox'
+slug: Apprendre/CSS/CSS_layout/Flexbox_skills
+translation_of: Learn/CSS/CSS_layout/Flexbox_skills
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}</div>
+
+<p>Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br>
+ <br>
+ If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p>
+</div>
+
+<h2 id="Flex_Layout_One">Flex Layout One</h2>
+
+<p>Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.</p>
+
+<p><img alt="Flex items laid out as a row with space between them." src="https://mdn.mozillademos.org/files/16938/flex-task1.png" style="height: 135px; width: 1441px;"></p>
+
+<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Flex_Layout_Two">Flex Layout Two</h2>
+
+<p>Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.</p>
+
+<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="https://mdn.mozillademos.org/files/16939/flex-task2.png" style="height: 586px; width: 1424px;"></p>
+
+<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}</p>
+
+<p>Questions supplémentaires:</p>
+
+<ul>
+ <li>Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Flex_Layout_Three">Flex Layout Three</h2>
+
+<p>Il y a deux éléments dans le HTML ci-dessous, une div avec une classe <code>.parent</code> qui contient une autre div avec une classe <code>.child</code>. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.</p>
+
+<p><img alt="A box centered inside another box." src="https://mdn.mozillademos.org/files/16940/flex-task3.png" style="height: 632px; width: 840px;"></p>
+
+<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Flex_Layout_Four">Flex Layout Four</h2>
+
+<p>Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.<br>
+  </p>
+
+<p><img alt="A set of items displayed as rows." src="https://mdn.mozillademos.org/files/16941/flex-task4.png" style="height: 445px; width: 942px;"></p>
+
+<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>You can practice these examples in the Interactive Editors mentioned above.</p>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
+ <li>Write a post asking for assessment and/or help at the<a href="https://discourse.mozilla.org/c/mdn"> MDN Discourse forum</a>. Add the "learning" tag to your post so we are able to more easily find it. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".</li>
+   <li>Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.</li>
+   <li>A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</p>
diff --git a/files/fr/apprendre/css/css_layout/floats/index.html b/files/fr/apprendre/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..a4814ac036
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/floats/index.html
@@ -0,0 +1,509 @@
+---
+title: Les boîtes flottantes
+slug: Apprendre/CSS/CSS_layout/Floats
+tags:
+  - Article
+  - Boîtes flottantes
+  - CSS
+  - Codage
+  - Débutant
+  - Dégagement
+  - Flotteurs
+  - Guide
+  - Mise en page
+  - colonnes
+  - multi‑colonne
+translation_of: Learn/CSS/CSS_layout/Floats
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les bases du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée de la manière dont fonctionne CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction au CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété <code>clear</code> et autres méthodes de dégagement des boîtes flottantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2>
+
+<p>La propriété <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p>
+
+<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p>
+
+<p>Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.</p>
+
+<p>Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.</p>
+
+<h2 id="Exemple_simple_de_boîte_flottante">Exemple simple de boîte flottante</h2>
+
+<p>Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier <code>index.html</code> sur votre ordinateur initialisé avec un <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html" rel="noopener">simple modèle HTML</a> et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.</p>
+
+<p>Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément <code>body</code> en supprimant tout ce qu'il y avait avant :</p>
+
+
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+
+&lt;img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;</pre>
+
+<p>Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier <code>.css</code> séparé — comme vous voulez):</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour <code>.box</code> :</p>
+
+<pre class="brush: css">.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Float_Example_1">Float Example 1</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>
+
+<p>Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété <code>float</code> (l'élément <code>box</code> dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (<code>left</code>) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.</p>
+
+<p>Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur <code>right</code> à la propriété <code>float</code> et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.</p>
+
+<p>Ajoutez une classe <code>special</code> au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.</p>
+
+<pre class="brush: css">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p>
+
+<div id="Float_2">
+<div class="hidden">
+<h6 id="Float_Example_2">Float Example 2</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>
+
+<p>Les lignes du paragraphe  suivant la boîte flottante  ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.</p>
+
+<h2 id="Dégagement_des_boîtes_flottantes">Dégagement des boîtes flottantes</h2>
+
+<p>Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.</p>
+
+<p>Dans le HTML de l'exemple précédent, donnez la classe <code>cleared</code> au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :</p>
+
+<pre class="brush: css">.cleared {
+  clear: left;
+}
+</pre>
+
+<div id="Float_3">
+<div class="hidden">
+<h6 id="Float_Example_3">Float Example 3</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>
+
+<p>Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété  <code>clear</code> accepte les valeurs suivantes :</p>
+
+<ul>
+ <li><code>left</code> : dégage les élément à gauche de la boîte flottante.</li>
+ <li><code>right</code> : dégage les éléments à droite.</li>
+ <li><code>both </code>: dégage de tous élément flottant, à gauche et à droite.</li>
+</ul>
+
+<h2 id="Dégagement_de_boîtes_autour_dune_boîte_flottante">Dégagement de boîtes autour d'une boîte flottante</h2>
+
+<p>Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe <code>wrapper</code>.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Dans la CSS, ajoutez la règle suivante pour la classe <code>.wrapper</code> et actualisez la page :</p>
+
+<pre class="brush: css">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p>
+
+<div id="Float_4">
+<div class="hidden">
+<h6 id="Float_Example_4">Float Example 4</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>
+
+<p>Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.</p>
+
+<h3 id="Le_«_clearfix_hack_»">Le « clearfix hack »</h3>
+
+<p>La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur <code>both</code> à la propriété <code>clear</code>.</p>
+
+<p>Ajoutez ceci à la CSS de notre exemple :</p>
+
+<pre class="brush: css">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <code>&lt;div&gt;</code> en dessous avec la règle <code>clear: both</code>.</p>
+
+<div id="Float_5">
+<div class="hidden">
+<h6 id="Float_Example_5">Float Example 5</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;      </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>
+
+<h3 id="Utilisation_du_débordement">Utilisation du débordement</h3>
+
+<p>Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de <code>wrapper</code> à autre chose que <code>visible</code>.</p>
+
+<p>Supprimez les éléments <code>clearfix</code> de la CSS su paragraphe précédent et, à la place, ajoutez <code>overflow: auto</code> aux règles pour <code>wrapper</code>. À nouveau, la boîte doit être dégagée.</p>
+
+<pre class="brush: css">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}</pre>
+
+<div id="Float_6">
+<div class="hidden">
+<h6 id="Float_Example_6">Float Example 6</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>
+
+<p>Cet exemple fonctionne en créant ce que l'on appelle un <strong>block formatting context</strong> (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.</p>
+
+<h3 id="«_display_flow-root_»">« display: flow-root »</h3>
+
+<p>La solution moderne de ce problème consiste à utiliser la valeur <code>flow-root</code> pour le propriété <code>display</code>. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez <code>overflow: auto</code> de la règle <code>.wrapper</code> et ajoutez <code>display: flow-root</code>. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.</p>
+
+<pre class="brush: css">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}</pre>
+
+<div id="Float_7">
+<div class="hidden">
+<h6 id="Float_Example_7">Float Example 7</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/apprendre/css/css_layout/fundamental_layout_comprehension/index.html
new file mode 100644
index 0000000000..c97cc64ba9
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/fundamental_layout_comprehension/index.html
@@ -0,0 +1,81 @@
+---
+title: Compréhension fondamentale de la mise en page
+slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension
+translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><font>Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également.<span> </span></font><font>Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</font></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><strong style="">Conditions préalables</strong>:</th>
+   <td><span style="">Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</span></td>
+  </tr>
+  <tr>
+   <th scope="row"><strong style="">Objectif</strong>:</th>
+   <td><span style="">Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="dossier_de_projet"><font><font>dossier de projet</font></font></h2>
+
+<p><span style="">Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>
+
+<h3 id="configuration_de_base"><font><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>configuration de base</font></span></font></h3>
+
+<p style=""><font><font>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images<span> </span></font></font><a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension" rel="noopener" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none; white-space: pre-line;"><font><font>ici</font></font></a><font><font><span> </span>.</font></font></p>
+
+<p style=""><font><font>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>images</code><font><font>.<span> </span></font><font>Ouvrir le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>index.html</code><font><font>fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.</font></font></p>
+
+<p style=""><font><font>Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>
+
+<h3 id="Votre_section_detâches"><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font><font>Votre<span> </span></font></font></span><font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#Your_tasks" style="margin: 0px; padding: 0px; border: 0px; color: inherit; text-decoration: none;"><span><font>section de</font></span></a><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>tâches</font></span></font></h3>
+
+<p style=""><font><font>Vous devez maintenant implémenter votre mise en page.<span> </span></font><font>Les tâches que vous devez accomplir sont:</font></font></p>
+
+<ol style="">
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les<span> </span></font><font>éléments<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML &lt;article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, en syndication)."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>&lt;article&gt;</code></a><font><font>et<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML &lt;apartement> représente une partie d'un document dont le contenu est uniquement indirectement lié au contenu principal du document."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>&lt;aside&gt;</code></a><font><font>doivent s'afficher sous la forme d'une disposition à deux colonnes.<span> </span></font><font>La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</font></font></li>
+</ol>
+
+<p style=""><font><font>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</font></font></p>
+
+<ul style="">
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnement</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flotte</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flexbox</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>CSS Grid Layout</font></font></li>
+</ul>
+
+<p style=""><font><font>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses.<span> </span></font><font>Essayez différentes approches et voyez laquelle fonctionne le mieux.<span> </span></font><font>Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>.</font></font></p>
+
+<h2 id="Evaluation">Evaluation</h2>
+
+<p><font><font>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige.<span> </span></font><font>Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le<span> </span></font></font><a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener" style=""><font><font>fil de discussion relatif à cet exercice</font></font></a><font><font><span> </span>ou sur le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style=""><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>sur<span> </span></font></font><a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener" style=""><font><font>Mozilla IRC</font></font></a><font><font><span> </span>.<span> </span></font><font>Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</font></font></p>
+
+<h2 id="Dans_ce_module_Section" style=""><font><font>Dans ce module<span> </span></font></font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#In_this_module" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><span><font><font>Section</font></font></span></a></h2>
+
+<ul style="">
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Introduction à la mise en page CSS</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Débit normal</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flexbox</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>la grille</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flotteurs</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Positionnement</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Mise en page à plusieurs colonnes</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Conception sensible</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Guide du débutant aux questions des médias</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Méthodes de mise en page héritées</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Soutenir les anciens navigateurs</font></font></a></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Évaluation fondamentale de la compréhension de la mise en page.</font></font></a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/grids/index.html b/files/fr/apprendre/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..4fd7782640
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/grids/index.html
@@ -0,0 +1,715 @@
+---
+title: Grilles
+slug: Apprendre/CSS/CSS_layout/Grids
+tags:
+  - Apprendre
+  - Article
+  - CSS
+  - Codage
+  - Didacticiel
+  - Débutant
+  - Guide
+  - Mise en page
+  - Trames
+  - Trames CSS
+  - quadrillage du design
+  - structure du quadrillage
+  - système de trames
+translation_of: Learn/CSS/CSS_layout/Grids
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest_quune_disposition_en_trame">Qu'est qu'une disposition en trame ?</h2>
+
+<p>Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.</p>
+
+<p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p>
+
+<p><img alt="Schéma du quadrillage" src="https://mdn.mozillademos.org/files/16104/grille.png" style="display: block; height: 346px; margin: 0px auto; width: 747px;"></p>
+
+<h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2>
+
+<p>Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.</p>
+
+<h3 id="Définition_dune_trame">Définition d'une trame</h3>
+
+<p>Pour débuter, téléchargez et ouvrez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">le fichier de départ</a> dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.</p>
+
+<p>Pour définir un tramage, on affecte la valeur <code>grid</code> à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+}</pre>
+
+<p>Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer <code>display: grid</code> fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.</p>
+
+<p>Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}</pre>
+
+<p>Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Simple_Grid_Example">Simple Grid Example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}          </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+ &lt;div&gt;Un&lt;/div&gt;
+ &lt;div&gt;Deux&lt;/div&gt;
+ &lt;div&gt;Trois&lt;/div&gt;
+ &lt;div&gt;Quatre&lt;/div&gt;
+ &lt;div&gt;Cinq&lt;/div&gt;
+ &lt;div&gt;Six&lt;/div&gt;
+ &lt;div&gt;Sept&lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+} </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>
+
+<h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3>
+
+<p>En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.</p>
+
+<p>En changeant la liste des chaînes par la suivante, on crée trois chaînes de <code>1fr</code>.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}</pre>
+
+<p>Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité <code>fr</code> ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}</pre>
+
+<p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+ &lt;div&gt;Un&lt;/div&gt;
+ &lt;div&gt;Deux&lt;/div&gt;
+ &lt;div&gt;Trois&lt;/div&gt;
+ &lt;div&gt;Quatre&lt;/div&gt;
+ &lt;div&gt;Cinq&lt;/div&gt;
+ &lt;div&gt;Six&lt;/div&gt;
+ &lt;div&gt;Sept&lt;/div&gt;
+&lt;/div&gt;                         </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p>
+</div>
+
+<h3 id="Espaces_entre_pistes">Espaces entre pistes</h3>
+
+<p>Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}</pre>
+
+<p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p>
+
+<div id="Grid_3">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+ &lt;div&gt;Un&lt;/div&gt;
+ &lt;div&gt;Deux&lt;/div&gt;
+ &lt;div&gt;Trois&lt;/div&gt;
+ &lt;div&gt;Quatre&lt;/div&gt;
+ &lt;div&gt;Cinq&lt;/div&gt;
+ &lt;div&gt;Six&lt;/div&gt;
+ &lt;div&gt;Sept&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}</pre>
+
+<h3 id="Répétition_des_listes_de_pistes">Répétition des listes de pistes</h3>
+
+<p>Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}</pre>
+
+<p>Nous obtenons 3 chaînes de <code>1fr</code> de large, comme précédemment. La première valeur passée à la fonction <code>repeat</code> est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.</p>
+
+<h3 id="Trame_implicite_et_explicite">Trame implicite et explicite</h3>
+
+<p>Nous n'avons jusqu'à présent défini que des  chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec <code>grid-template-columns</code> <strong>ou</strong> <code>grid-template-rows</code>. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame  implicite sont analogues aux axes principal et croisé de Flexbox.</p>
+
+<p>Par défaut, les rangées de la trame implicite sont <code>auto</code> dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés  {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p>
+
+<div id="Grid_4">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}                  </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+ &lt;div&gt;Un&lt;/div&gt;
+ &lt;div&gt;Deux&lt;/div&gt;
+ &lt;div&gt;Trois&lt;/div&gt;
+ &lt;div&gt;Quatre&lt;/div&gt;
+ &lt;div&gt;Cinq&lt;/div&gt;
+ &lt;div&gt;Six&lt;/div&gt;
+ &lt;div&gt;Sept&lt;/div&gt;
+&lt;/div&gt;
+                        </pre>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>
+
+<h3 id="La_fonction_minmax">La fonction minmax()</h3>
+
+<p>Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'<em>au moins</em> 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.</p>
+
+<p>La fonction <code>minmax</code> nous permet de fixer une taille maximale et minimale pour une trame, par exemple <code>minmax(100px, auto)</code>. La taille minimale est de 100 px, mais la maximale est <code>auto</code> — elle  s'agrandira selon le contenu. Changeons <code>grid-auto-rows</code> en utilisant une valeur <code>minmax</code> :</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}</pre>
+
+<p>Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.</p>
+
+<h3 id="Autant_de_chaînes_que_possibles">Autant de chaînes que possibles</h3>
+
+<p>Il est possible de combiner nos savoirs à propos des listes de pistes, la notation <code>repeat</code> et <code>minmax()</code> pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de <code>grid-template-columns</code> égale à <code>repeat()</code> avec le mot-clé <code>auto-fill</code> comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez <code>minmax()</code> avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.</p>
+
+<p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p>
+
+<div id="Grid_5">
+<div class="hidden">
+<h6 id="As_many_columns_as_will_fit">As many columns as will fit</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+&lt;/div&gt;                       </pre>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>
+
+<p>Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.</p>
+
+<h2 id="Placement_sur_les_lignes">Placement sur les lignes</h2>
+
+<p>Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en  relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.</p>
+
+<p>Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+</ul>
+
+<p>Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :</p>
+
+<ul>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+</ul>
+
+<p>Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un <code>/</code> — une barre inclinée.</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">Pour débuter, téléchargez ce fichier</a>. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.</p>
+
+<p>À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :</p>
+
+<pre class="brush: css">header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_6">
+<div class="hidden">
+<h6 id="Line-based_placement">Line-based placement</h6>
+
+<pre class="brush: css">                body {
+                    width: 90%;
+                    max-width: 900px;
+                    margin: 2em auto;
+                    font: .9em/1.2 Arial, Helvetica, sans-serif;
+                }
+
+                .container {
+                    display: grid;
+                    grid-template-columns: 1fr 3fr;
+                    grid-gap: 20px;
+                }
+header {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+
+article {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+aside {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+footer {
+    grid-column: 1 / 3;
+    grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;<span>Voici mon joli blog</span>&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;Mon article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;
+    &lt;h2&gt;Autres sujets&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
+&lt;/div&gt;               </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p>
+</div>
+
+<h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2>
+
+<p>Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.</p>
+
+<p>Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.</p>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}</pre>
+
+<p>Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !</p>
+
+<div id="Grid_7">
+<div class="hidden">
+<h6 id="Line-based_placement_2">Line-based placement</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+
+.container {
+  display: grid;
+  grid-template-areas:
+  "header header"
+  "sidebar content"
+  "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;<span>Voici mon joli blog</span>&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;Mon article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;
+    &lt;h2&gt;Autres sujets&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
+&lt;/div&gt;               </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>
+
+<p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p>
+
+<ul>
+ <li>toute cellule du quadrillage doit être remplie.</li>
+ <li>pour couvrir deux cellules, répétez le nom.</li>
+ <li>pour laisser une cellule vide, utilisez un point <code>.</code> .</li>
+ <li>les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple.</li>
+ <li>les zones ne peuvent pas être répétées dans des emplacements différents.</li>
+</ul>
+
+<p>Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.</p>
+
+<h2 id="«_CSS_Grid_»_une_structure_de_quadrillage">« CSS Grid » : une structure de quadrillage</h2>
+
+<p>Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">Chargez le fichier de départ</a>. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement  sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.</p>
+
+<pre class="brush: css">header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_8">
+<div class="hidden">
+<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0,1fr));
+  grid-gap: 20px;
+}
+
+header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;<span>Voici mon joli blog</span>&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;Mon article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;
+    &lt;h2&gt;Autres sujets&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contactez moi@monsite.com&lt;/footer&gt;
+&lt;/div&gt;               </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>
+
+<p>Si vous utilisez <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur &gt; Mise en page &gt; Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p>
+
+<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16109/trames.png" style="height: 677px; width: 1363px;"></p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
+
+
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/index.html b/files/fr/apprendre/css/css_layout/index.html
new file mode 100644
index 0000000000..c8ae618a03
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/index.html
@@ -0,0 +1,72 @@
+---
+title: La mise en page avec le CSS
+slug: Apprendre/CSS/CSS_layout
+tags:
+  - CSS
+  - Débutant
+  - Floating
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Positionnement
+  - colonne multiple
+  - flexbox
+  - float
+  - grid
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">À ce stade, les principes fondamentaux du CSS ont été vus, comment composer le texte et comment styliser et manipuler les boîtes dans lesquelles se trouve votre contenu. Maintenant, il est temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec le CSS, en regardant les différents paramètres d'affichage, les outils modernes tels « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Avant de commencer ce module, vous devriez déjà :</p>
+
+<ol>
+ <li>connaître les bases du HTML, telles qu'exposées dans le module <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML.</a></li>
+ <li> être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>.</li>
+ <li> savoir <a href="https://developer.mozilla.org/fr/Apprendre/CSS/styliser_boites">styliser les boîtes.</a></li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans un programme de codage en ligne tel que <a href="http://jsbin.com/">JSBin ou</a> <a href="https://codepen.io/#">Thimble</a></p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></dt>
+ <dd>Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de {{cssxref ("display")}} — et présente certains des concepts que nous couvrirons dans de ce module.</dd>
+ <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></dt>
+ <dd>Les éléments se placent d'eux‑même sur les pages web selon un <em>cours normal</em> — sauf à ce nous fassions quelque chose pour changer cela. Cet article explique les fondamentaux du cours normal pour permettre de comprendre comment le modifier.</dd>
+ <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="/fr/docs/Glossaire/Flexbox">Flexbox</a> est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique tous les fondamentaux.</dd>
+ <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids">Grilles</a></dt>
+ <dd>CSS Grid Layout est un système de mise en page bidimensionnelle pour le web. Il vous permet de disposer le contenu en lignes et en colonnes, et possède de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous donnera tout ce que vous devez savoir pour commencer avec la mise en page.</dd>
+ <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">Flotteurs</a></dt>
+ <dd>À l'origine, pour les images flottantes à l'intérieur de blocs de texte, la propriété {{cssxref ("float")}} est devenue l'un des outils les plus couramment utilisés pour créer des mises en page sur plusieurs colonnes sur des pages Web. Avec l'avènement de Flexbox et de Grid, il est maintenant revenu à son objectif initial, comme l'explique cet article.</dd>
+ <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Positioning">Positionnement</a></dt>
+ <dd>Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en restant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour {{cssxref ("position")}} et comment les utiliser.</dd>
+ <dt><a href="/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></dt>
+ <dd>L'indication d'une disposition sur plusieurs colonnes vous permet de placer le contenu en colonnes, comme vous pouvez le voir sur un journal. Cet article explique comme utiliser cette fonctionnalité.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a></dt>
+ <dd>Les systèmes de grilles sont une fonctionnalité très courante pour les mises en page avec les CSS. Avant la mise en œuvre de « CSS Grid Layout », celle‑ci s'opérait avec des flotteurs ou autres dispositions. Imaginez la mise en page comme un ensemble de colonnes (par ex. 4, 6 ou 12), puis disposez les colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent, afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet ancien.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des navigateurs plus anciens</a></dt>
+ <dd>
+ <p>Dans ce module, nous vous recommandons d'utiliser Flexbox et Grid comme principales méthodes de mise en page pour votre design. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le web — au fur et à mesure du développement de nouvelles fonctionnalités, les priorités données varieront. Cet article explique comment utiliser les techniques modernes du web sans exclure les utilisateurs des anciennes.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension des fondamentaux de la mise en page</a></dt>
+ <dd>Une évaluation pour tester vos connaissances des différentes méthodes de mise en page Web.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a></dt>
+ <dd> Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.</dd>
+</dl>
diff --git a/files/fr/apprendre/css/css_layout/introduction/index.html b/files/fr/apprendre/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..c8ffefec6c
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/introduction/index.html
@@ -0,0 +1,716 @@
+---
+title: Introduction à la mise en page en CSS
+slug: Apprendre/CSS/CSS_layout/Introduction
+tags:
+  - Apprendre
+  - Article
+  - Boîtes flexibles
+  - CSS
+  - Débutant
+  - Flottants
+  - Flux
+  - Grille
+  - Intro
+  - Mise en page
+  - Positionnement
+  - Tableaux
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}</div>
+
+<p class="summary">Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:</p>
+
+<ul>
+ <li>le cours normal</li>
+ <li>la propriété {{cssxref("display")}}</li>
+ <li>Flexbox</li>
+ <li>les trames</li>
+ <li>les flotteurs</li>
+ <li>le positionnement</li>
+ <li>la mise en page des tableaux</li>
+ <li>la disposition sur plusieurs colonnes</li>
+</ul>
+
+<p>Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.</p>
+
+<h2 id="Cours_normal">Cours normal</h2>
+
+<p>Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;J'aime mon chat.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Acheter des croquettes&lt;/li&gt;
+  &lt;li&gt;Exercice&lt;/li&gt;
+  &lt;li&gt;Haut les cœurs, ami&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;La fin !&lt;/p&gt;</pre>
+
+<p>Par défaut, le navigateur affichera ce code ainsi :</p>
+
+<p>{{ EmbedLiveSample('Cours_normal', '100%', 200) }}</p>
+
+<p>Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.</p>
+
+<p>Les éléments disposés en empilement sont désignés comme étant des éléments <em>blocs</em>, par opposition aux éléments <em>en ligne</em> qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.</p>
+
+<div class="note">
+<p><strong>Note</strong>: « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p>
+</div>
+
+<p>Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.</p>
+
+<p>Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :</p>
+
+<ul>
+ <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li>
+ <li><strong>Flotteurs</strong> — appliquer à {{cssxref("float")}} une valeur comme <code>left</code> peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.</li>
+ <li><strong>La propriété {{cssxref("position")}}</strong> — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. <code>static</code> est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.</li>
+ <li><strong>Mise en page de tableaux</strong> — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant <code>display: table</code> et les propriétés associées.</li>
+ <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li>
+</ul>
+
+<h2 id="La_propriété_«_display_»">La propriété « display »</h2>
+
+<p>Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété <code>display</code>. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété <code>display</code>. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est <code>display: block</code>. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est <code>display: inline</code> par défaut.</p>
+
+<p>Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est <code>display: block</code> par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de <code>display</code> pour <code>inline</code>, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.</p>
+
+<p>En plus de pouvoir changer la présentation par défaut en faisant passer un élément de <code>block</code> à <code>inline</code> et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de <code>display</code>. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont <code>display: flex</code> et <code>display: grid</code>.</p>
+
+<h2 id="Flexbox">Flexbox</h2>
+
+<p>Flexbox est l'abréviation pour <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p>
+
+<p>Le balisage HTML ci-dessous crée un élément conteneur de la classe <code>wrapper</code>, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.</p>
+
+<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Flexbox_Exemple_1">Flexbox Exemple 1</h6>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>En plus des propriétés ci-dessus applicables au conteneur <code>flex</code>, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.</p>
+
+<p>À titre d'exemple, nous pouvons donner la valeur <code>1</code> à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Un&lt;/div&gt;
+    &lt;div class="box2"&gt;Deux&lt;/div&gt;
+    &lt;div class="box3"&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
+</div>
+
+<h2 id="Disposition_en_trame">Disposition en trame</h2>
+
+<p>Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.</p>
+
+<p>À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à <code>display</code> — <code>display: grid</code>. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre <code>display: grid</code>, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de <code>1fr</code> chacune et deux lignes de <code>100px</code>. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Grid_example_1">Grid example 1</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Un&lt;/div&gt;
+    &lt;div class="box2"&gt;Deux&lt;/div&gt;
+    &lt;div class="box3"&gt;Trois&lt;/div&gt;
+    &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+    &lt;div class="box5"&gt;Cinq&lt;/div&gt;
+    &lt;div class="box6"&gt;Six&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Grid_example_2">Grid example 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;Un&lt;/div&gt;
+    &lt;div class="box2"&gt;Deux&lt;/div&gt;
+    &lt;div class="box3"&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p>
+</div>
+
+<p>La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.</p>
+
+<h2 id="Flotteurs_boîtes_flottantes">Flotteurs (boîtes flottantes)</h2>
+
+<p>Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.</p>
+
+<p>La propriété {{cssxref("float")}} a quatre valeurs possibles :</p>
+
+<ul>
+ <li><code>left</code> — fait flotter l'élément sur la gauche.</li>
+ <li><code>right</code> — fait flotter l'élément sur la droite.</li>
+ <li><code>none</code> — indique que rien ne flotte. C'est la valeur par défaut.</li>
+ <li><code>inherit</code> — indique que la valeur de la propriété <code>float</code> sera héritée de celle de l'élément parent.</li>
+</ul>
+
+<p>Dans l'exemple ci‑dessous nous faisons flotter un élément <code>&lt;div&gt;</code> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Floats_example">Floats example</h6>
+
+<pre class="brush: css">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;h1&gt;Exemple simple de boîte flottante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Boîte flottante&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p>
+</div>
+
+<h2 id="Techniques_de_positionnement">Techniques de positionnement</h2>
+
+<p>Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.</p>
+
+<p>Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.</p>
+
+<p>Il y a cinq types de positionnement à connaître :</p>
+
+<ul>
+ <li><strong>positionnement statique</strong> : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ».</li>
+ <li><strong>positionnement relatif : </strong>modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page.</li>
+ <li><strong>positionnement absolu</strong> : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément <code>&lt;html&gt;</code> (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle.</li>
+ <li><strong>positionnement fixe : </strong>tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page.</li>
+ <li><strong>positionnement collant : </strong>nouvelle méthode de positionnement qui fait qu'un élément se comporte comme <code>position: static</code> jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était <code>position: fixed</code>.</li>
+</ul>
+
+<h3 id="Exemple_simple_de_positionnement">Exemple simple de positionnement</h3>
+
+<p>Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:</p>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement&lt;/h1&gt;
+
+&lt;p&gt;Je suis un élément de niveau bloc de base.&lt;/p&gt;
+&lt;p class="positioned"&gt;Je suis un élément de niveau bloc de base.&lt;/p&gt;
+&lt;p&gt;Je suis un élément de niveau bloc de base.&lt;/p&gt;</pre>
+
+<p>Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :</p>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>Le rendu est le suivant:</p>
+
+<p>{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}</p>
+
+<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+
+<p>Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :</p>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Ici, nous donnons au paragraphe médian à la propriété  {{cssxref("position")}} la valeur <code>relative</code> — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.</p>
+
+<p>Ajouter ce code donne le résultat suivant :</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Relative_positioning_example">Relative positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement relatif&lt;/h1&gt;
+
+&lt;p&gt;Je suis un élément de niveau bloc de base.&lt;/p&gt;
+&lt;p class="positioned"&gt;Voici un élément avec un positionnement relatif.&lt;/p&gt;
+&lt;p&gt;Je suis un élément de niveau bloc de base.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+
+<p>Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.</p>
+
+<p>En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :</p>
+
+<pre class="brush: css">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur <code>absolute</code> et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement absolu&lt;/h1&gt;
+
+&lt;p&gt;Je suis un élément de niveau bloc de base.&lt;/p&gt;
+&lt;p class="positioned"&gt;Voici un élément avec un positionnement absolu.&lt;/p&gt;
+&lt;p&gt;Je suis un élément de niveau bloc de base.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: absolute;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p>
+
+<h3 id="Positionnement_fixé">Positionnement fixé</h3>
+
+<p>Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.</p>
+
+<p>Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété <code>position: fixed</code>.</p>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement fixé&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixé&lt;/div&gt;
+
+&lt;p&gt;Paragraphe 1.&lt;/p&gt;
+&lt;p&gt;Paragraphe 2.&lt;/p&gt;
+&lt;p&gt;Paragraphe 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement fixé&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixé&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Positionnement_collant">Positionnement collant</h3>
+
+<p>Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété <code>position: sticky</code>, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si <code>position: fixed</code> lui était appliqué.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement collant&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Collé&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: pour plus de précisions à propos du positionnement, voir l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p>
+</div>
+
+<h2 id="Les_tableaux_CSS">Les tableaux CSS</h2>
+
+<p>Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).</p>
+
+<p>La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».</p>
+
+<p>Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Tout d'abord, dites‑nous votre nom et votre âge.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;Prénom :&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Nom :&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Âge :&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.</p>
+
+<p>Notez que les propriétés <code>display: table-caption;</code> et <code>caption-side: bottom;</code> ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}})  placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments <code>input</code> dans le code source. Voilà une bonne dose de souplesse.</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 400px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>Ce qui nous donne le résultat suivant:</p>
+
+<p>{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}</p>
+
+<p>Vous pouvez également examiner cet exemple directement à <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">code source également</a>).</p>
+
+<h2 id="Disposition_sur_plusieurs_colonnes">Disposition sur plusieurs colonnes</h2>
+
+<p>Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.</p>
+
+<p>Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.</p>
+
+<p>Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <code>&lt;div&gt;</code> de la classe <code>container</code>.</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;h1&gt;Disposition en colonnes&lt;/h1&gt;
+
+    &lt;p&gt;Paragraphe 1.&lt;/p&gt;
+    &lt;p&gt;Paragraphe 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>Noux utilisons une propriété <code>column-width</code> de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Multicol_example">Multicol example</h6>
+
+<pre class="brush: html">    &lt;div class="container"&gt;
+        &lt;h2&gt;Disposition en colonnes&lt;/h2&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;
+        </pre>
+
+<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !</p>
+
+<p>{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">La mise en page avec les CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/le_positionnement/index.html b/files/fr/apprendre/css/css_layout/le_positionnement/index.html
new file mode 100644
index 0000000000..54349c6fef
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/le_positionnement/index.html
@@ -0,0 +1,558 @@
+---
+title: Le positionnement
+slug: Apprendre/CSS/CSS_layout/Le_positionnement
+tags:
+  - Agencement
+  - Article
+  - CSS
+  - Codage de script
+  - Disposition
+  - Débutant
+  - Guide
+  - Mise en page
+  - Positionnement
+  - absolu
+  - fixe
+  - relatif
+  - statique
+translation_of: Learn/CSS/CSS_layout/Positioning
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Savoir comment fonctionne le positionnement avec les CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> sur le dépôt Github (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">code source ici</a>) et utilisez-le comme point de départ.</p>
+
+<h2 id="Introduction_au_positionnement">Introduction au positionnement</h2>
+
+<p>Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.</p>
+
+<p>Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.</p>
+
+<h3 id="Positionnement_«_static_»">Positionnement « static »</h3>
+
+<p>Le positionnement <code>static</code> est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».</p>
+
+<p>Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe <code>positioned</code> pour le deuxième {{htmlelement("p")}} dans le HTML:</p>
+
+<pre class="brush: html notranslate">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p>Puis ajoutez la règle suivante au bas de votre CSS:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: static;
+  background: yellow; }</pre>
+
+<p>Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p>
+</div>
+
+<h3 id="Positionnement_«_relative_»">Positionnement « relative »</h3>
+
+<p>Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de <code>position</code> dans le code :</p>
+
+<pre class="brush: css notranslate">position: relative;</pre>
+
+<p>Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.</p>
+
+<h3 id="Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»">Présentation de « top », « bottom », « left » et « right »</h3>
+
+<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle <code>.positioned</code> dans la CSS :</p>
+
+<pre class="notranslate">top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>Remarque </strong>: les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p>
+</div>
+
+<p>Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :</p>
+
+<div id="example_1">
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Positionnement relatif&lt;/h1&gt;
+&lt;p&gt;Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.&lt;/p&gt;
+&lt;p class="positioned"&gt;Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.&lt;/p&gt;
+&lt;p&gt;Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.&lt;/p&gt;
+&lt;p&gt;Les éléments « inline » &lt;span&gt;comme celui-ci &lt;/span&gt;ou &lt;span&gt;cet autre&lt;/span&gt; sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants &lt;span&gt;se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte&lt;/span&gt; ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto; }
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px; }
+span {
+  background: red;
+  border: 1px solid black; }
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px; }</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('example_1', '100%', 500) }}</p>
+
+<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela <span class="st">peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif</span>. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p>
+</div>
+
+<h3 id="Positionnement_«_absolute_»">Positionnement « absolute »</h3>
+
+<p>Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de <code>position</code> dans le code :</p>
+
+<pre class="notranslate">position: absolute;</pre>
+
+<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :</p>
+
+<div id="example_2">
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Positionnement absolu&lt;/h1&gt;
+&lt;p&gt;Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.&lt;/p&gt;
+&lt;p class="positioned"&gt;Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.&lt;/p&gt;
+&lt;p&gt;Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.&lt;/p&gt;
+&lt;p&gt;Les éléments « inline » &lt;span&gt;comme celui-ci &lt;/span&gt;ou &lt;span&gt;cet autre&lt;/span&gt; sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants &lt;span&gt;se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte&lt;/span&gt; ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto; }
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px; }
+span {
+  background: red;
+  border: 1px solid black; }
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px; }</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('example_2', '100%', 420) }}</p>
+
+<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. <span class="st">Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste.</span> C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p>
+
+<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu <span class="st">de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant.</span> Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p>
+
+<div class="note">
+<p><strong>Note</strong> : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p>
+</div>
+
+<h3 id="Contextes_de_positionnement">Contextes de positionnement</h3>
+
+<p>Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément <strong>le contexte de positionnement</strong> de l'élément.</p>
+
+<p>Nous pouvons changer ce <strong>contexte de positionnement</strong> — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:</p>
+
+<pre class="notranslate">position: relative;</pre>
+
+<p>Cela devrait donner le résultat suivant:</p>
+
+<div id="example_3">
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Contextes de positionnement&lt;/h1&gt;
+
+&lt;p&gt;Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.&lt;/p&gt;
+&lt;p class="positioned"&gt;Maintenant je suis positionné de manière absolue par rapport à l'élément &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt;, et non par rapport à l'élément &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; !&lt;/p&gt;
+&lt;p&gt;Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.&lt;/p&gt;
+&lt;p&gt;Les éléments « inline » &lt;span&gt;comme celui-ci &lt;/span&gt;ou &lt;span&gt;cet autre&lt;/span&gt; sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants &lt;span&gt;se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte&lt;/span&gt; ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('example_3','100%', 420) }}</p>
+
+<p><span class="st">À présent, l</span>'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p>
+</div>
+
+<h3 id="Présentation_du_z-index">Présentation du z-index</h3>
+
+<p>Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?</p>
+
+<p>Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :</p>
+
+<pre class="notranslate">p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe <code>.positioned</code> original, là où les deux se chevauchent. C'est parce que le paragraphe <code>.positioned</code> est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.</p>
+
+<p>Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe <strong>z</strong>. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).</p>
+
+<p>Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un <code>z-index</code>  <code>auto</code>, qui est effectivement 0.</p>
+
+<p>Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle <code>p:nth-of-type(1)</code> :</p>
+
+<pre class="notranslate">z-index: 1;</pre>
+
+<p>Voici maintenant l'exemple terminé :</p>
+
+<div id="example_4">
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;z-index&lt;/h1&gt;
+
+
+&lt;p&gt;Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.&lt;/p&gt;
+&lt;p class="positioned"&gt;Maintenant je suis positionné de manière absolue par rapport à l'élément &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt;, et non par rapport à l'élément &lt;code&gt;&amp;lt;html&amp;lt;html&amp;gt;&lt;/code&gt; !&lt;/p&gt;
+&lt;p&gt;Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.&lt;/p&gt;
+&lt;p&gt;Les éléments « inline » &lt;span&gt;comme celui-ci &lt;/span&gt;ou &lt;span&gt;cet autre&lt;/span&gt; sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants &lt;span&gt;se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte&lt;/span&gt; ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative; }
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px; }
+span {
+  background: red;
+  border: 1px solid black; }
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px; }
+p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+  z-index: 1; }
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('example_4', '100%', 400) }}</p>
+
+<p>Notez que <code>z-index</code> n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.</p>
+
+<div class="note">
+<p><strong>Note</strong> : sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p>
+</div>
+
+<h3 id="Positionnement_«_fixed_»">Positionnement « fixed »</h3>
+
+<p>Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.</p>
+
+<p>Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de <code>p:nth-of-type(1)</code> et <code>.positioned</code> de la CSS.</p>
+
+<p>Maintenant, mettez à jour la règle <code>body</code> : supprimez la déclaration <code>position : relative ;</code> et ajoutez une hauteur fixe, ainsi :</p>
+
+<pre class="notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>Maintenant, donnez la position <code>fixed</code> à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :</p>
+
+<pre class="notranslate">h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p><code>top: 0;</code> est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique <code>margin: 0 auto;</code> pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.</p>
+
+<p>Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :</p>
+
+<pre class="notranslate">p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p>Voici l'exemple terminé :</p>
+
+<div id="example_5">
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Positionnement fixe&lt;/h1&gt;
+
+&lt;p&gt;Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.&lt;/p&gt;
+&lt;p class="positioned"&gt;Je ne suis plus positionné...&lt;/p&gt;
+&lt;p&gt;Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.&lt;/p&gt;
+&lt;p&gt;Les éléments « inline » &lt;span&gt;comme celui-ci &lt;/span&gt;ou &lt;span&gt;cet autre&lt;/span&gt; sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants &lt;span&gt;se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte&lt;/span&gt; ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+h1 {
+  position: fixed;
+  top: 0px;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+
+p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('example_5', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Note</strong> : à ce stade de l'article, vous pouvez voir un exemple en direct ici  <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p>
+</div>
+
+<h3 id="«_position_sticky_»">« position: sticky »</h3>
+
+<p>Il y a une autre valeur de positionnement disponible appelée <code>position : sticky</code>. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Exemple_de_positionnement_collant">Exemple de positionnement collant</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Positionnement collant&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Collant : relatif en deça, fixe au delà&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<p>Une utilisation courante pleine d'intérêt de <code>position: sticky</code> permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Positionnement collant&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Abeille&lt;/dd&gt;
+    &lt;dd&gt;Abricot&lt;/dd&gt;
+    &lt;dd&gt;Altimètre&lt;/dd&gt;
+    &lt;dd&gt;Avion&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Banane&lt;/dd&gt;
+    &lt;dd&gt;Betterave&lt;/dd&gt;
+    &lt;dd&gt;Bœuf&lt;/dd&gt;
+    &lt;dd&gt;Bouvreuil&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculateur&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Chameau&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dindon&lt;/dd&gt;
+    &lt;dd&gt;Drapeau&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Eau&lt;/dd&gt;
+    &lt;dd&gt;Éléphant&lt;/dd&gt;
+    &lt;dd&gt;Escadrille&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute <code>position : sticky</code> à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.</p>
+
+<pre class="brush: css notranslate">dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<div id="Sticky_2">
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Positionnement collant&lt;/h1&gt;
+
+&lt;dl&gt;
+&lt;dt&gt;A&lt;/dt&gt;
+&lt;dd&gt;Abeille&lt;/dd&gt;
+&lt;dd&gt;Abricot&lt;/dd&gt;
+&lt;dd&gt;Altimètre&lt;/dd&gt;
+&lt;dd&gt;Avion&lt;/dd&gt;
+&lt;dt&gt;B&lt;/dt&gt;
+&lt;dd&gt;Banane&lt;/dd&gt;
+&lt;dd&gt;Betterave&lt;/dd&gt;
+&lt;dd&gt;Bœuf&lt;/dd&gt;
+&lt;dd&gt;Bouvreuil&lt;/dd&gt;
+&lt;dd&gt;Buzzard&lt;/dd&gt;
+&lt;dt&gt;C&lt;/dt&gt;
+&lt;dd&gt;Calculateur&lt;/dd&gt;
+&lt;dd&gt;Camera&lt;/dd&gt;
+&lt;dd&gt;Cane&lt;/dd&gt;
+&lt;dd&gt;Chameau&lt;/dd&gt;
+&lt;dt&gt;D&lt;/dt&gt;
+&lt;dd&gt;Dime&lt;/dd&gt;
+&lt;dd&gt;Dindon&lt;/dd&gt;
+&lt;dd&gt;Drapeau&lt;/dd&gt;
+&lt;dd&gt;Drone&lt;/dd&gt;
+&lt;dt&gt;E&lt;/dt&gt;
+&lt;dd&gt;Eau&lt;/dd&gt;
+&lt;dd&gt;Éléphant&lt;/dd&gt;
+&lt;dd&gt;Escadrille&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Référence de la propriété {{cssxref("position")}}.</li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li>
+</ul>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/legacy_layout_methods/index.html b/files/fr/apprendre/css/css_layout/legacy_layout_methods/index.html
new file mode 100644
index 0000000000..d778686c58
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/legacy_layout_methods/index.html
@@ -0,0 +1,585 @@
+---
+title: Méthodes de mises en page traditionnelles
+slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods
+tags:
+  - Apprendre
+  - Boîtes flottantes
+  - CSS
+  - Disposition
+  - Débutant
+  - Guide
+  - Héritage
+  - systèmes de trames
+translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Les fondamentaux du HTML (voyez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>) et une idée du fonctionnement de CSS (voyez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a> et <a href="/fr/docs/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mise_en_page_et_systèmes_de_trames_avant_CSS_Grid_Layout">Mise en page et systèmes de trames avant CSS Grid Layout</h2>
+
+<p>Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».</p>
+
+<p>Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.</p>
+
+<p>Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.</p>
+
+<p>Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.</p>
+
+<h2 id="Disposition_sur_deux_colonnes">Disposition sur deux colonnes</h2>
+
+<p>Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier <code>index.html</code> sur l'ordinateur, en le remplissant avec le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modèle HTML simple</a> et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.</p>
+
+<p>Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de <code>body</code> par ceci :</p>
+
+<pre class="brush: html">&lt;h1&gt;Exemple de disposition sur 2 colonnes&lt;/h1&gt;
+&lt;div&gt;
+  &lt;h2&gt;Première colonne&lt;/h2&gt;
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Seconde colonne&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément  {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.</p>
+
+<p>Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}</pre>
+
+<p>Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :</p>
+
+<pre class="brush: css">div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}</pre>
+
+<p>Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :</p>
+
+<pre class="brush: css">div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}</pre>
+
+<p>En mettant tout ensemble, voici le résultat :</p>
+
+<div id="Floated_Two_Col">
+<div class="hidden">
+<h6 id="Simple_two-column_layout">Simple two-column layout</h6>
+
+<pre class="brush: html">&lt;h1&gt;Exemple de disposition sur 2 colonnes&lt;/h1&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Première colonne&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Seconde colonne&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p>
+
+<p>Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une <strong>disposition fluide</strong>, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son  <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p>
+</div>
+
+<h2 id="Ancienne_création_d'un_cadre_de_trames">Ancienne création d'un cadre de trames</h2>
+
+<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p>
+
+<p>Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons  calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.</p>
+
+<p>Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.</p>
+
+<h3 id="Une_simple_trame_de_largeurs_fixes">Une simple trame de largeurs fixes</h3>
+
+<p>Créons d'abord une trame à colonnes à largeur fixe.</p>
+
+<p>Commençons par faire une copie locale du fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> qui comporte le balisage suivant dans <code>body</code>.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col span1"&gt;13&lt;/div&gt;
+    &lt;div class="col span6"&gt;14&lt;/div&gt;
+    &lt;div class="col span3"&gt;15&lt;/div&gt;
+    &lt;div class="col span2"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p>
+
+<p>À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à <code>border-box</code> sur tous les éléments du site (voir <a href="/fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte">Modification totale du modèle de boîte</a> pour plus d'explications).</p>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}</pre>
+
+<p>Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :</p>
+
+<pre class="brush: css">.row {
+  clear: both;
+}</pre>
+
+<p>Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.</p>
+
+<p>Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.</p>
+
+<p>Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.</p>
+
+<p>L'étape suivante consiste à créer un règle pour la classe <code>.col</code> la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et  une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :</p>
+
+<pre class="brush: css">.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p>
+</div>
+
+<p>Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.</p>
+
+<p>Ajoutez ce qui suit en bas de la CSS :</p>
+
+<pre class="brush: css">/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */
+.col.span2 { width: 140px; }
+/* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */
+.col.span3 { width: 220px; }
+/* et ainsi de suite... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }</pre>
+
+<p>Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p>
+</div>
+
+<p>Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :</p>
+
+<pre class="brush: css">&lt;div class="row"&gt;
+  &lt;div class="col span8"&gt;13&lt;/div&gt;
+  &lt;div class="col span4"&gt;14&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !</p>
+
+<h3 id="Creation_d'une_trame_fluide">Creation d'une trame fluide</h3>
+
+<p>Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.</p>
+
+<p>L'équation qui transforme une largeur fixe en pourcentage est la suivante :</p>
+
+<pre>cible / contexte = résultat</pre>
+
+<p>Pour la largeur de la première colonne, la <strong>largeur cible</strong> est de 60 pixels et le <strong>contexte</strong> est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.</p>
+
+<pre>60 / 960 = 0.0625</pre>
+
+<p>Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.</p>
+
+<p>En faisant de même pour la largeur de la gouttière :</p>
+
+<pre>20 / 960 = 0.02083333333</pre>
+
+<p>Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle <code>.col</code> et de {{cssxref("padding-right")}} dans la règle <code>.wrapper</code>.</p>
+
+<h4 id="Mise_à_jour_de_la_trame">Mise à jour de la trame</h4>
+
+<p>Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a> comme point de départ.</p>
+
+<p>Mettez à jour la deuxième règle CSS (avec le sélecteur <code>.wrapper</code>) comme suit :</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}</pre>
+
+<p>Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.</p>
+
+<p>Ensuite, mettez à jour les quatre règles CSS (du sélecteur <code>.col</code>) ainsi :</p>
+
+<pre class="brush: css">.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes  les règles <code>.col.span</code> en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.</p>
+
+<p>Mettez à jour le bloc bas des règles CSS avec ce qui suit :</p>
+
+<pre class="brush: css">/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */
+.col.span3 { width: 22.91666666%; }
+/* Et ainsi de suite... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }</pre>
+
+<p>Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p>
+</div>
+
+<h3 id="Faciliter_les_calculs_avec_la_fonction_calc()">Faciliter les calculs avec la fonction calc()</h3>
+
+<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p>
+
+<p>Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction <code>calc()</code> nous permet de faire ce calcul dans la valeur <code>width</code> même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :</p>
+
+<pre class="brush: css">.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}</pre>
+
+<p>Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :</p>
+
+<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi  <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p>
+</div>
+
+<h3 id="Systèmes_de_trames_«_sémantiques_»_vs._«_non_sémantiques_»">Systèmes de trames « sémantiques » vs. « non sémantiques »</h3>
+
+<p>Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes <code>span2</code>, <code>span3</code>, etc.</p>
+
+<p>Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe <code>content</code> que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe <code>span8</code>, ce qui vous donne une règle :</p>
+
+<pre class="brush: css">.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p>
+</div>
+
+<h3 id="Décalage_du_conteneur_d'une_trame">Décalage du conteneur d'une trame</h3>
+
+<p>La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe <code>offset</code> pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !</p>
+
+<p>Essayons.</p>
+
+<p>Démarrons avec le code précédent ou utilisons le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> comme point de départ.</p>
+
+<p>Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :</p>
+
+<pre class="brush: css">.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}</pre>
+
+<p>Ou, si vous préférez calculer le pourcentage vous-même, utilisez :</p>
+
+<pre class="brush: css">.offset-by-one {
+  margin-left: 10.41666666%;
+}</pre>
+
+<p>Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :</p>
+
+<pre class="brush: html">&lt;div class="col span6"&gt;14&lt;/div&gt;</pre>
+
+<p>remplacez‑le par :</p>
+
+<pre class="brush: html">&lt;div class="col span5 offset-by-one"&gt;14&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p>
+</div>
+
+<p>Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">l'exécution directement</a>). L'exemple terminé doit ressembler à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p>
+
+<div class="note">
+<p><strong>Note </strong>: Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p>
+</div>
+
+<h3 id="Limitations_des_trames_de_boîtes_flottantes">Limitations des trames de boîtes flottantes</h3>
+
+<p>En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.</p>
+
+<p>N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.</p>
+
+<p>La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..</p>
+
+<h2 id="Trames_Flexbox">Trames Flexbox ?</h2>
+
+<p>Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.</p>
+
+<p>Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes <code>wrapper</code>, <code>row</code> et <code>col</code> :</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}</pre>
+
+<p>Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> (voir aussi en  <a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">exécution directe</a>).</p>
+
+<p>Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées  pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à <code>display : flex</code>.</p>
+
+<p>Pour <code>.col</code> nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété  {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à <code>auto</code>. Comme la valeur {{cssxref("width")}} de l'élément est fixée, <code>auto</code> utilisera cette valeur en tant que valeur de <code>flex-basis</code>.</p>
+
+<p>Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p>
+
+<p>Pour corriger cela, nous avons encore besoin d'inclure les classes <code>span</code> pour donner une largeur qui remplave la valeur donnée par <code>flex-basis</code> pour cet élément.</p>
+
+<p>Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.</p>
+
+<p>Flexbox est un design <strong>mono-dimensionnel</strong> par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes <strong>et</strong> pour les lignes, ce qui signifie que si nous utilisons Flexbox pour  une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.</p>
+
+<p>Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.</p>
+
+<h2 id="Systèmes_de_trame_tierces_parties">Systèmes de trame tierces parties</h2>
+
+<p>Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que <a href="http://getbootstrap.com/">Bootstrap</a> et <a href="http://foundation.zurb.com/">Foundation</a> incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.</p>
+
+<p>Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.</p>
+
+<p>Commençons par visiter le <a href="http://getskeleton.com/">site web de Skeleton</a> et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers <em>skeleton.css</em> et <em>normalize.css</em> dans un nouveau répertoire.</p>
+
+<p>Faites une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> et enregistrez le dans le même répertoire que <em>skeleton.css</em> et <em>normalize.css</em>.</p>
+
+<p>Incorporez les .css <em>skeleton</em> et <em>normalize</em> dans la page HTML, en ajoutant ce qui suit dans <code>head</code> :</p>
+
+<pre class="brush: html">&lt;link href="normalize.css" rel="stylesheet"&gt;
+&lt;link href="skeleton.css" rel="stylesheet"&gt;</pre>
+
+<p>Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.</p>
+
+<div class="note">
+<p><strong>Note</strong> : <a href="/en-US/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p>
+</div>
+
+<p>Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;13&lt;/div&gt;
+    &lt;div class="col"&gt;14&lt;/div&gt;
+    &lt;div class="col"&gt;15&lt;/div&gt;
+    &lt;div class="col"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe <code>container</code> — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.</p>
+
+<p>Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on se sert de cette classe. L'élément <code>&lt;div&gt;</code> est centré en utilisant la valeur <code>auto</code> pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur <code>border-box</code> comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.</p>
+
+<pre class="brush: css">.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}</pre>
+
+<p>Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <code>&lt;div&gt;</code> supplémentaire ou d'un autre élément de la classe <code>row</code> imbriqué entre le <code>&lt;div&gt;</code> de <code>content </code>et les véritables conteneurs <code>&lt;div&gt; </code>de contenu. Nous avons aussi déjà fait cela.</p>
+
+<p>Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes <code>one column</code> pour qu'elles se répartissent à raison de une par colonne.</p>
+
+<p>Ajoutez maintenant cet extrait de lignes de code :</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="one column"&gt;1&lt;/div&gt;
+    &lt;div class="one column"&gt;2&lt;/div&gt;
+    &lt;div class="one column"&gt;3&lt;/div&gt;
+    /* and so on */
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :</p>
+
+<pre class="brush: html">&lt;div class="row"&gt;
+  &lt;div class="one column"&gt;13&lt;/div&gt;
+  &lt;div class="six columns"&gt;14&lt;/div&gt;
+  &lt;div class="three columns"&gt;15&lt;/div&gt;
+  &lt;div class="two columns"&gt;16&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi  <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p>
+</div>
+
+<p>Si vous regardez dans le fichier <em>skeleton.css</em> vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.</p>
+
+<pre class="brush: css">.three.columns { width: 22%; }</pre>
+
+<p>Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.</p>
+
+<p>Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences  entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/media_queries/index.html b/files/fr/apprendre/css/css_layout/media_queries/index.html
new file mode 100644
index 0000000000..c82e846273
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/media_queries/index.html
@@ -0,0 +1,425 @@
+---
+title: Guide du débutant des Media Queries
+slug: Apprendre/CSS/CSS_layout/Media_queries
+translation_of: Learn/CSS/CSS_layout/Media_queries
+---
+<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<p>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand how to use media queries, and the most common approach for using them to create responsive designs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Media_Query_Basics">Media Query Basics</h2>
+
+<p>The simplest media query syntax looks like this:</p>
+
+<pre class="brush: css">@media <em>media-type</em> and (<em>media-feature-rule</em>) {
+  /* CSS rules go here */
+}</pre>
+
+<p>It consists of:</p>
+
+<ul>
+ <li>A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).</li>
+ <li>A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.</li>
+ <li>A set of CSS rules that will be applied if the test passes and the media type is correct.</li>
+</ul>
+
+<h3 id="Media_types">Media types</h3>
+
+<p>The possible types of media you can specify are:</p>
+
+<ul>
+ <li><code>all</code></li>
+ <li><code>print</code></li>
+ <li><code>screen</code></li>
+ <li><code>speech</code></li>
+</ul>
+
+<p>The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.</p>
+
+<pre class="brush: css"><code>@media print {
+    body {
+        font-size: 12pt;
+    }
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: the media type here is different from the so-called {{glossary("MIME type")}}.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p>
+</div>
+
+<h3 id="Media_feature_rules">Media feature rules</h3>
+
+<p>After specifying the type, you can then target a media feature with a rule.</p>
+
+<h4 id="Width_and_height">Width and height</h4>
+
+<p>The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the <code>min-width</code>, <code>max-width</code>, and <code>width</code> media features.</p>
+
+<p>These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.</p>
+
+<pre class="brush: css"><code>@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">view the source</a>.</p>
+
+<p>The <code>width</code> (and <code>height</code>) media features can be used as ranges, and therefore be prefixed with <code>min-</code> or <code>max-</code> to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use <code>max-width</code>:</p>
+
+<pre class="brush: css"><code>@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">view the source</a>.</p>
+
+<p>In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see <code>width</code> or <code>height</code> used alone.</p>
+
+<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p>
+
+<h4 id="Orientation">Orientation</h4>
+
+<p>One well-supported media feature is <code>orientation</code>, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.</p>
+
+<pre class="brush: css"><code>@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">view the source</a>.</p>
+
+<p>A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.</p>
+
+<h4 id="Use_of_pointing_devices">Use of pointing devices</h4>
+
+<p>As part of the Level 4 specification, the <code>hover</code> media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.</p>
+
+<pre class="brush: css"><code>@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">view the source</a>.</p>
+
+<p>If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.</p>
+
+<p>Also in Level 4 is the <code>pointer</code> media feature. This takes three possible values, <code>none</code>, <code>fine</code> and <code>coarse</code>. A <code>fine</code> pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A <code>coarse</code> pointer is your finger on a touchscreen. The value <code>none</code> means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.</p>
+
+<p>Using <code>pointer</code> can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.</p>
+
+<h2 id="More_complex_media_queries">More complex media queries</h2>
+
+<p>With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.</p>
+
+<h3 id="and_logic_in_media_queries">"and" logic in media queries</h3>
+
+<p>To combine media features you can use <code>and</code> in much the same way as we have used <code>and</code> above to combine a media type and feature. For example, we might want to test for a <code>min-width</code> and <code>orientation</code>. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.</p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">view the source</a>.</p>
+
+<h3 id="or_logic_in_media_queries">"or" logic in media queries</h3>
+
+<p>If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.</p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">view the source</a>.</p>
+
+<h3 id="not_logic_in_media_queries">"not" logic in media queries</h3>
+
+<p>You can negate an entire media query by using the <code>not</code> operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.</p>
+
+<pre class="brush: css"><code>@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">view the source</a>.</p>
+
+<h2 id="How_to_choose_breakpoints">How to choose breakpoints</h2>
+
+<p>In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.</p>
+
+<p>There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as <strong>breakpoints</strong>.</p>
+
+<p>The <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p>
+
+<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p>
+
+<h2 id="Active_learning_mobile_first_responsive_design">Active learning: mobile first responsive design</h2>
+
+<p>Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as <strong>mobile first</strong> responsive design and is quite often the best approach to follow.</p>
+
+<p>The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.</p>
+
+<p>The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.</p>
+
+<h3 id="Walkthrough_a_simple_mobile-first_layout">Walkthrough: a simple mobile-first layout</h3>
+
+<p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p>
+
+<pre class="brush: css"><code>* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+</code></pre>
+
+<p>We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.</p>
+
+<pre class="brush: html"><code>&lt;body&gt;
+    &lt;div class="wrapper"&gt;
+      &lt;header&gt;
+        &lt;nav&gt;
+          &lt;ul&gt;
+            &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Meet the team&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/nav&gt;
+      &lt;/header&gt;
+      &lt;main&gt;
+        &lt;article&gt;
+          &lt;div class="content"&gt;
+            &lt;h1&gt;Veggies!&lt;/h1&gt;
+            &lt;p&gt;
+              ...
+            &lt;/p&gt;
+          &lt;/div&gt;
+          &lt;aside class="related"&gt;
+            &lt;p&gt;
+              ...
+            &lt;/p&gt;
+          &lt;/aside&gt;
+        &lt;/article&gt;
+
+        &lt;aside class="sidebar"&gt;
+          &lt;h2&gt;External vegetable-based links&lt;/h2&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              ...
+            &lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/aside&gt;
+      &lt;/main&gt;
+
+      &lt;footer&gt;&lt;p&gt;&amp;copy;2019&lt;/p&gt;&lt;/footer&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+</code></pre>
+
+<p>This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.</p>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">Open step 1</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">view the source</a>.</p>
+
+<p><strong>If you want to follow on and implement this example as we go, make a local copy of <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a> on your computer.</strong></p>
+
+<p>From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.</p>
+
+<p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+</code></pre>
+
+<p>This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.</p>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">Open step 2</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">view the source</a>.</p>
+
+<p>Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.</p>
+
+<p><strong>Again, add the below code into the bottom of your step1.html CSS.</strong></p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}</code>
+</pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">Open step 3</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">view the source</a>.</p>
+
+<p>If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.</p>
+
+<h2 id="Do_you_really_need_a_media_query">Do you really need a media query?</h2>
+
+<p>Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.</p>
+
+<p>This could be achieved using the following:</p>
+
+<pre class="brush: html"><code>&lt;ul class="grid"&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 1&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 2&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 3&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 4&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 5&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<pre class="brush: css"><code>.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">Open the grid layout example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">view the source</a>.</p>
+
+<p>With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.</p>
+
+<p>You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the <code>pointer</code> media feature.</p>
+
+<p>You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/multiple-column_layout/index.html b/files/fr/apprendre/css/css_layout/multiple-column_layout/index.html
new file mode 100644
index 0000000000..b4fb4b03d7
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/multiple-column_layout/index.html
@@ -0,0 +1,415 @@
+---
+title: Disposition sur plusieurs colonnes
+slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout
+tags:
+  - Apprendre
+  - Apprentissage
+  - CSS
+  - Colonnes multiples
+  - Disposition
+  - Débutant
+  - Guide
+  - Multi-col
+translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Un_exemple_élémentaire">Un exemple élémentaire</h2>
+
+<p>Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  « <em>multicol</em> ». Vous pourrez effectuer le suivi de cet article en  <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">téléchargeant le fichier de depart multicol</a> et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.</p>
+
+<p>Notre point de départ contient un HTML très simple ; une enveloppe de la classe <code>container</code> dans laquelle nous avons placé un en‑tête et quelques paragraphes.</p>
+
+<p>L'élément {{htmlelement("div")}} de la classe <code>container</code> sera notre conteneur multi‑colonnes. Nous basculons dans une disposition <em>multicol</em> en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété <code>column-count</code> crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+
+<p>Les colonnes créées sont de largeur variable — le navigateur colcule automatiquement l'espace à donner à chacune d'entre elles.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="column-count_example">column-count example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+    </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple exemple &lt;i&gt;multicol&lt;/i&gt;&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p>
+
+<p>Modifiez la CSS pour utiliser <code>column-width</code> ainsi :</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+
+<p>Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.</p>
+
+<div id="Multicol_2">
+<div class="hidden">
+<h6 id="column-width_example">column-width example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple exemple &lt;i&gt;multicol&lt;/i&gt;&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p>
+
+<h2 id="Style_des_colonnes">Style des colonnes</h2>
+
+<p>Les colonnes créées avec <em>multicol</em> ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :</p>
+
+<ul>
+ <li>modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}.</li>
+ <li>ajouter une règle entre colonnes avec {{cssxref("column-rule")}}.</li>
+</ul>
+
+<p>En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété <code>column-gap</code> :</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+  column-gap: 20px;
+}</pre>
+
+<p>Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec <code>column-rule</code>. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, <code>column-rule</code>, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et  {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<p>Ajoutons des règles pour les divers styles et couleurs.</p>
+
+<div id="Multicol_3">
+<div class="hidden">
+<h6 id="Styling_the_columns">Styling the columns</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+.container {
+ column-count: 3;
+ column-gap: 20px;
+ column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple exemple &lt;i&gt;multicol&lt;/i&gt;&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p>
+
+<p>Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  <code>column-gap</code>. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.</p>
+
+<h2 id="Colonnes_et_coupures">Colonnes et coupures</h2>
+
+<p>Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur <em>multicol</em>, il est découpé en colonnes de texte pour permettre cette disposition.</p>
+
+<p>Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé <em>multicol</em> pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.</p>
+
+<div id="Multicol_4">
+<div class="hidden">
+<h6 id="Cards_example">Cards example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}            </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="card"&gt;
+    &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+    &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p>
+
+<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p>
+
+<p>Il est également préférable d'ajouter l'ancienne propriété <code>page-break-inside: avoid</code> pour une meilleure prise en charge par les divers navigateurs.</p>
+
+<pre class="brush: css">.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+</pre>
+
+<p>Actualisez la page et les boîtes devraient rester entières.</p>
+
+<div id="Multicol_5">
+<div class="hidden">
+<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}              </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="card"&gt;
+    &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+    &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;Je suis un titre&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/normal_flow/index.html b/files/fr/apprendre/css/css_layout/normal_flow/index.html
new file mode 100644
index 0000000000..c3d51d3313
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/normal_flow/index.html
@@ -0,0 +1,108 @@
+---
+title: Cours normal
+slug: Apprendre/CSS/CSS_layout/Normal_Flow
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p>
+
+<p class="summary">Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont les CSS fonctionnent (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.</p>
+
+<p>Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.</p>
+
+<h2 id="Disposition_des_éléments_par_défaut">Disposition des éléments par défaut</h2>
+
+<p>Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.</p>
+
+<p>Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec <code>display: bloc ;</code> (ou même <code>display: inline-block ;</code> qui mélange les caractéristiques des deux).</p>
+
+<p>Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.</p>
+
+<p>Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.</p>
+
+<p>Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.</p>
+
+<p>Voici un exemple simple expliquant cela :</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html">&lt;h2&gt;Cours d'un document de base&lt;/h2&gt;
+
+&lt;p&gt;Je suis un élément de niveau bloc de base.
+ Mes éléments de niveau bloc adjacents sont sur de
+ nouvelles lignes en dessous de moi.&lt;/p&gt;
+
+&lt;p&gt;Par défaut, nous occupons 100% de la largeur
+ de notre élément parent et nous sommes aussi hauts
+ que notre contenu enfant. Nos largeur et hauteur totales
+ sont égales à la largeur/hauteur de notre
+ contenu + remplissage + encadrement.&lt;/p&gt;
+
+&lt;p&gt;Nous sommes séparés de nos marges.
+ Comme il y a fusion des marges, nous sommes séparés
+ par la largeur de l'une de nos marges et non les deux.&lt;/p&gt;
+
+&lt;p&gt;Des éléments <code>inline</code> &lt;span&gt;comme celui-ci&lt;/span&gt; ou
+ &lt;span&gt;celui‑là&lt;/span&gt; sont placés sur la même ligne et
+ les nœuds de texte adjacents, s'il y a de la place sur
+ la même ligne. Les débordements des éléments inline
+ &lt;span&gt;sont placés sur une nouvelle ligne si possible
+ (comme celle‑ci contenant du texte)&lt;/span&gt;, sinon ils
+ sont placés sur une nouvelle ligne, comme cette image :
+ &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/prise_en_charge_des_anciens_navigateurs/index.html b/files/fr/apprendre/css/css_layout/prise_en_charge_des_anciens_navigateurs/index.html
new file mode 100644
index 0000000000..c56a030d08
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/prise_en_charge_des_anciens_navigateurs/index.html
@@ -0,0 +1,237 @@
+---
+title: Prise en charge des anciens navigateurs
+slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
+translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> and <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand how to provide support for your layouts on older browsers that might not support the features you want to use.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_the_browser_landscape_for_your_site">What is the browser landscape for your site?</h2>
+
+<p>Every website is different in terms of target audience. Before deciding on the approach to take, find out the number of visitors coming to your site using older browsers. This is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. If you have no analytics or this is a brand new site, then there are sites such as <a href="http://gs.statcounter.com/">Statcounter</a> that can provide statistics filtered by location.</p>
+
+<p>You should also consider the type of devices and the way people use your site, for example, you may expect a higher than an average number of mobile devices. Accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical. In my experience, developers are often very worried about the experience of 1% of users in an old version of Internet Explorer, while not considering at all the far greater number who have accessibility needs.</p>
+
+<h2 id="What_is_the_support_for_the_features_you_want_to_use">What is the support for the features you want to use?</h2>
+
+<p>Once you know the browsers that come to your site, you can assess any technology that you want to use against how well it is supported and how easily you can provide an alternative for visitors who do not have that technology available. We are trying to make this easy for you at MDN, by providing browser compatibility information on each page detailing a CSS property. For example, take a look at the page for {{cssxref("grid-template-columns")}}. At the bottom of this page is a table, which lists major browsers along with the version they began supporting this property.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+
+<p>Another popular way to find out about how well a feature is supported is the <a href="https://caniuse.com/">Can I Use</a> website. This site lists the majority of Web Platform features with information about their browser support status. You can view usage statistics by location — useful if you work on a site that has users mostly for a specific area of the world. You can even link your Google Analytics account to get analysis based on your user data.</p>
+
+<p>Understanding the technology your users have, and the support for things you might want to use puts you in a good place to make all of your decisions and to know how best to support all of your users.</p>
+
+<h2 id="Support_doesnt_mean_looks_the_same">Support doesn't mean "looks the same"</h2>
+
+<p>A website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.</p>
+
+<p>A basic level of support comes from structuring your content well so that the normal flow of your page makes sense. A user with a very limited feature phone might not get much of your CSS, but the content will flow in a way that makes reading easy. Therefore, a well-structured HTML document should always be your starting point. <em>If you remove your stylesheet, does your content make sense?</em></p>
+
+<p>One option is to leave this plain view of the site as the fallback for people using very old or limited browsers. If you have a tiny number of people coming to the site in these browsers it may not make commercial sense to pour time into trying to give them a similar experience to people on modern browsers. It would be better to spend the time on things which make the site more accessible, thus serving far more users. There is a middle ground between a plain HTML page and all the bells and whistles, and CSS has actually made creating these fallbacks pretty straightforward.</p>
+
+<h2 id="Creating_fallbacks_in_CSS">Creating fallbacks in CSS</h2>
+
+<p>CSS specifications contain information that explains what the browser does when two layout methods are applied to the same item. This means that there is a definition for what happens if a floated item, for example, is also a Grid Item using CSS Grid Layout. Couple this information with the knowledge that browsers ignore CSS that they don’t understand, and you have a way to create simple layouts using the <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">legacy techniques</a> we have already covered, which are then overwritten by your Grid layout in modern browsers that understand it.</p>
+
+<p>In the below example, we have floated three <code>&lt;div&gt;</code>s so they display in a row. Any browser that does not support <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid Layout</a> will see the row of boxes as a floated layout. A floated item that becomes a grid item loses the float behaviour, which means that by turning the wrapper into a Grid Container, the floated items become Grid Items. If the browser supports Grid Layout it will display the grid view, if not it ignores the and<code>display: grid</code> related properties and the floated layout is used.</p>
+
+<div id="Example1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The {{cssxref("clear")}} property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a Grid Layout.</p>
+</div>
+
+<h3 id="Fallback_Methods">Fallback Methods</h3>
+
+<p>There are a number of layout methods which can be used in a similar way to this float example. You can choose the one that makes the most sense for the layout pattern you need to create.</p>
+
+<dl>
+ <dd>Float and <strong><strong>clear</strong></strong></dd>
+ <dd>As shown above, the float and clear properties cease to affect the layout if floated or cleared items become flex or grid items.</dd>
+ <dt>display: inline-block</dt>
+ <dd>This method can be used to create column layouts, if an item has <code>display: inline-block</code> set but then becomes a flex or grid item, the inline-block behaviour is ignored.</dd>
+ <dt>display: table</dt>
+ <dd>The method of creating CSS Tables described in the <a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">introduction</a> to these lessons can be used as a fallback. Items that have CSS table layouts set on them will lose this behaviour if they become flex or grid items. Importantly, the anonymous boxes created to fix up the table structure are not created.</dd>
+ <dt>Multiple-column Layout</dt>
+ <dd>For certain layouts you could use <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> as a fallback, if your container has any of the <code>column-*</code> properties defined on it and then becomes a grid container, the multicol behaviour will not happen.</dd>
+ <dt>Flexbox as a Fallback for Grid</dt>
+ <dd><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> has greater browser support than Grid due to being supported by IE10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for Flexbox in older browsers. If you make a flex container into a grid container, any <code>flex</code> property applied to the children will be ignored.</dd>
+</dl>
+
+<p>For many layout tweaks in older browsers, you may find you can give a decent experience by using CSS in this way. We add a simpler layout based on older and well-supported techniques, then use the newer CSS to create the layout that over 90% of your audience will see. There are cases, however, when the fallback code will need to include something that the new browsers will also interpret. A good example of this is if we were to add percentage widths to our floated items to make the columns more like the grid display, stretching to fill the container.</p>
+
+<p>In the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. In Grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the Grid Layout is introduced.</p>
+
+<div id="Example2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p>
+</div>
+
+<p>To deal with this issue we need to have a way to detect if Grid is supported and therefore if it will override the width. CSS has a solution for us here.</p>
+
+<h2 id="Feature_queries">Feature queries</h2>
+
+<p>Feature queries allow you to test whether a browser supports any particular CSS feature. This means that you can write some CSS for browsers that don’t support a certain feature, then check to see if the browser has support and if so throw in your fancy layout.</p>
+
+<p>If we add a feature query to the above example, we can use it to set the widths of our items back to <code>auto</code>  if we know that we have grid support.</p>
+
+<div id="Example3">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p>
+</div>
+
+<p>Support for feature queries is very good across modern browsers, however, you should note that it is the browsers that do not support CSS Grid, which also doesn’t support feature queries. This means that an approach as detailed above will work for those browsers. What we are doing is writing our old CSS first, outside of any feature query. Browsers that do not support Grid, and do not support the feature query will use that layout information they can understand and completely ignore everything else. The browsers that support the feature query also support CSS Grid and so will run the grid code and the code inside the feature query.</p>
+
+<p>The specification for feature queries also contains the ability to test if a browser does not support a feature — this is only helpful if the browser does support feature queries. In the future, an approach of checking for lack of support will work, as the browsers that don’t have feature query support go away. For now, however, use the approach of doing the older CSS, then overwriting it, for the best support.</p>
+
+<h2 id="Older_versions_of_Flexbox">Older versions of Flexbox</h2>
+
+<p>In older versions of browsers, you can find previous iterations of the Flexbox specification. At the time of writing, this is mostly an issue with Internet Explorer 10, which uses the <code>-ms-</code>  prefix for Flexbox. This also means that there are some outdated articles and tutorials in existence; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">this useful guide</a> helps you check what you are looking at and can also help if you need flex support in very old browsers.</p>
+
+<h2 id="The_IE10_and_11_prefixed_version_of_Grid">The IE10 and 11 prefixed version of Grid</h2>
+
+<p>The CSS Grid specification was initially prototyped In Internet Explorer 10; this means that while IE10 and IE11 do not have <em>modern</em> grid support, they do have a version of Grid layout that is very usable, although different to the modern specification documented on this site. The IE10 and 11 implementations is  <code>-ms-</code> prefixed, which means you can use it for these browsers and it will be ignored by non-Microsoft browsers. Edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid CSS.</p>
+
+<p>The guide to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Progressive Enhancement in Grid Layout</a> can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers.</p>
+
+<h2 id="Testing_older_browsers">Testing older browsers</h2>
+
+<p>With the majority of browsers supporting Flexbox and Grid, it can be reasonably hard to test older browsers. One way is to use an online testing tool such as Sauce Labs, as detailed in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a> module.</p>
+
+<p>You can also download and install Virtual Machines, and run older versions of browsers in a contained environment on your own computer. Having access to older versions of Internet Explorer is particularly useful, and for that purpose, Microsoft has made <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">a range of Virtual Machines available for free download</a>. These are available for Mac, Windows and Linux operating systems and so are a great way to test in old and modern Windows browsers even if you are not using a Windows computer.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You now have the knowledge to confidently use techniques such as Grid and Flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+ <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Using CSS Grid: Supporting Browsers Without Grid</a></li>
+ <li><a href="https://24ways.org/2012/css3-grid-layout/">A tutorial which uses the IE10 and 11 version of Grid</a></li>
+ <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Should I try to use the IE10 implementation of Grid Layout</a>?</li>
+ <li><a href="https://24ways.org/2017/cascading-web-design/">Cascading Web Design with Feature Queries</a></li>
+ <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Using Feature Queries (Video)</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/css_layout/responsive_design/index.html b/files/fr/apprendre/css/css_layout/responsive_design/index.html
new file mode 100644
index 0000000000..323df1a7f6
--- /dev/null
+++ b/files/fr/apprendre/css/css_layout/responsive_design/index.html
@@ -0,0 +1,334 @@
+---
+title: Responsive design
+slug: Apprendre/CSS/CSS_layout/Responsive_Design
+tags:
+  - Images
+  - Media Queries
+  - RWD
+  - Responsive web design
+  - Typographie
+  - flexbox
+  - grid
+  - grille fluide
+translation_of: Learn/CSS/CSS_layout/Responsive_Design
+---
+<div>{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</div>
+
+<p>Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de <em>responsive web design</em> (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Les bases du HTML (étudier <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (édutier <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas en CSS</a> et <a href="/fr/docs/Apprendre/CSS/Building_blocks">Blocs de base en CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Comprendre les concepts fondamentaux et l'histoire du responsive design.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Historique_de_la_mise_en_page_des_sites_Web">Historique de la mise en page des sites Web</h2>
+
+<p>A une époque, vous aviez deux options pour concevoir un site Web :</p>
+
+<ul>
+ <li>Vous pourriez créer un <em>site liquide</em>, qui s'étirerait pour remplir la fenêtre du navigateur</li>
+ <li>ou un site <em>à largeur fixe</em>, qui aurait une taille fixe en pixels.</li>
+</ul>
+
+<p>Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.</p>
+
+<figure><img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p>
+</div>
+
+<p>Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.</p>
+
+<figure><img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p>
+</div>
+
+<p>Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.</p>
+
+<p>De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.</p>
+
+<h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2>
+
+<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a> <sup>(EN)</sup>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p>
+
+<p>Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.</p>
+
+<h2 id="Responsive_design">Responsive design</h2>
+
+<p>Le terme de responsive design a été <a href="https://alistapart.com/article/responsive-web-design/">inventé par Ethan Marcotte en 2010</a>, et décrit la combinaison de trois techniques.</p>
+
+<ol>
+ <li>La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publié en 2009 sur A List Apart).</li>
+ <li>La deuxième technique était l'idée <a href="http://unstoppablerobotninja.com/entry/fluid-images">d'images fluides</a>. En utilisant une technique très simple de réglage de la propriété <code>max-width</code> à <code>100%</code>,  les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.</li>
+ <li>Le troisième élément clé était la <a href="/fr/docs/Web/CSS/Media_Queries">media query</a>. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.</li>
+</ol>
+
+<p>Il est important de comprendre que <strong>le responsive web design n'est pas une technologie à part</strong> - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.<br>
+ <br>
+ Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.</p>
+
+<h2 id="Media_Queries">Media Queries</h2>
+
+<p>Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.</p>
+
+<p>Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur <code>.container</code> ne sera appliqué que si ces deux éléments sont vrais.</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.</p>
+
+<p>Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.</p>
+
+<p>Pour en savoir plus, consultez la documentation MDN pour les <a href="/fr/docs/Web/CSS/Media_Queries">Media Queries</a>.</p>
+
+<h2 id="Grilles_flexibles">Grilles flexibles</h2>
+
+<p>Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.</p>
+
+<p>En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.</p>
+
+<p>Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser <a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">floats</a>. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.</p>
+
+<pre class="notranslate"><code>target / context = result </code>
+</pre>
+
+<p>Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.</p>
+
+<pre class="brush: css notranslate"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p>Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur <a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a>. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.</p>
+
+<p>L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :<br>
+  </p>
+
+<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>Sur des écrans plus larges, ils se positionnent sur deux colonnes :</p>
+
+<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p>
+</div>
+
+<h2 id="Techniques_modernes_de_mise_en_page">Techniques modernes de mise en page</h2>
+
+<p>Les méthodes de mise en page modernes telles que <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p>
+
+<h3 id="Multicol">Multicol</h3>
+
+<p>La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un <code>column-count</code>, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p>Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="Flexbox">Flexbox</h3>
+
+<p>Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de <code>flex-grow</code> et <code>flex-shrink</code>  vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.</p>
+
+<p>Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation <code>flex: 1</code> comme décrit dans la rubrique de mise en page <a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex">Flexbox: Taille modulable des éléments flex</a>.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p>
+</div>
+
+<h3 id="CSS_grid">CSS grid</h3>
+
+<p>Dans la mise en page en grille CSS, l'unité <code>fr</code> permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de <code>1fr</code>. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section <a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité "fr"</a>.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p>
+</div>
+
+<h2 id="Images_responsives">Images responsives</h2>
+
+<p>L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :</p>
+
+<pre class="brush: css notranslate"><code>img {
+  max-width: 100%:
+} </code>
+</pre>
+
+<p>Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.</p>
+
+<p>Les images responsives, en utilisant l'élément {{htmlelement("picture")}}  et les attributs {{htmlelement("img")}} <code>srcset</code> et <code>sizes</code>  permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.</p>
+
+<p>Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.</p>
+
+<p>Vous pouvez trouver un <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p>
+
+<h2 id="Typographie_responsive">Typographie responsive</h2>
+
+<p>L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.</p>
+
+<p>Dans cet exemple, nous voulons fixer notre titre de niveau 1 à <code>4rem</code>, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins <code>1200px</code>.</p>
+
+<pre class="brush: css notranslate"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p>Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.</p>
+
+<p>Sur un mobile, le titre est plus petit :</p>
+
+<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>Sur le bureau cependant, nous voyons la plus grande taille de titre :</p>
+
+<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p>
+</div>
+
+<p>Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.</p>
+
+<h3 id="Utilisation_dunités_de_visualisation_pour_une_typographie_réactive">Utilisation d'unités de visualisation pour une typographie réactive</h3>
+
+<p>Une approche intéressante consiste à utiliser l'unité viewport <code>vw</code> pour permettre une typographie réactive. <code>1vw</code> est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de <code>vw</code>, elle sera toujours liée à la taille de la fenêtre.</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité <code>vw</code>, car ce texte est toujours lié à la taille de la fenêtre de visualisation. <strong>Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.</strong></p>
+
+<p>Il existe une solution, et elle consiste à utiliser <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>. Si vous ajoutez l'unité <code>vw</code> à un ensemble de valeurs utilisant une taille fixe telle que <code>em</code>s ou <code>rem</code>s, le texte sera toujours zoomable. En fait, l'unité <code>vw</code> s'ajoute à cette valeur zoomée :</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.</p>
+
+<div class="blockIndicator note">
+<p>Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p>
+</div>
+
+<h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2>
+
+<p>Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <code>&lt;head&gt;</code> du document.</p>
+
+<pre class="brush: html notranslate"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.</p>
+
+<p>Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.</p>
+
+<p>Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.</p>
+
+<p>Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant <code>width = device-width</code>, vous remplacez la largeur par défaut d'Apple de <code>width = 960px </code>par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.</p>
+
+<p><strong>Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.</strong></p>
+
+<p>Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.</p>
+
+<ul>
+ <li><code>initial-scale</code>: Définit le zoom initial de la page, que nous définissons à 1.</li>
+ <li><code>height</code>: Definit une hauteur spécifique pour la fenêtre.</li>
+ <li><code>minimum-scale</code>: Définit le niveau minimal de zoom</li>
+ <li><code>maximum-scale</code>: Définit le niveau maximal de zoom.</li>
+ <li><code>user-scalable</code>: Empêche le zoom si défini à <code>no</code>.</li>
+</ul>
+
+<p>Vous devriez éviter d'utiliser <code>minimum-scale</code>, <code>maximum-scale</code>, et en particulier la définition de <code>user-scalable</code> sur <code>no</code>. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p>
+</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.</p>
+
+<p>Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.</p>
+
+<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">Le positionnement</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Media_queries">Guide du débutant pour les Medias Queries</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Prise_en_charge_des_anciens_navigateurs">Prise en charge des anciens navigateurs</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/formatage_texte_css/index.html b/files/fr/apprendre/css/formatage_texte_css/index.html
new file mode 100644
index 0000000000..fd4f2408cb
--- /dev/null
+++ b/files/fr/apprendre/css/formatage_texte_css/index.html
@@ -0,0 +1,269 @@
+---
+title: Mise en forme basique du texte avec CSS
+slug: Apprendre/CSS/formatage_texte_CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Example
+  - Guide
+  - Learn
+  - NeedsActiveLearning
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div class="summary">
+<p>Cet article explique comment mettre en forme le texte de documents {{Glossary("HTML")}} en utilisant les propriétés {{Glossary("CSS")}} les plus communes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez être familier avec <a href="/fr/Apprendre/CSS/CSS_properties">les propriétés CSS et comment les utiliser</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Vous allez apprendre comment mettre en forme du texte en utilisant les propriétés CSS adéquates.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Depuis sa première mouture, CSS s'est spécialisé dans la mise en forme (autrement dit l'apparence) des sites web, permettant au HTML de se concentrer uniquement sur la structure du document.</p>
+
+<p>Avec plus de 250 propriétés, CSS est très riche. Dans cet article, nous n'en aborderons que certaines, utilisées pour le formatage du texte :</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("font-family")}} (pour utiliser différentes polices)</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("font-style")}} (pour, par exemple, mettre en italique)</li>
+ <li>{{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-decoration")}} (pour ajouter des lignes dessous, dessus et en travers du texte)</li>
+ <li>{{cssxref("text-transform")}} (pour modifier la casse du texte)</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<p>Une fois que vous vous serez familiarisé avec ces propriétés, nous vous encourageons à explorer d'autres propriétés de formatage du texte telles que {{cssxref("hyphens")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-indent")}}, {{cssxref("text-overflow")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-spacing")}}), les sélecteurs spécifiques ({{cssxref("::first-letter")}} ou {{cssxref("::first-line")}}), ou les unités CSS utilisées pour la taille du texte ({{cssxref("length","em","#em")}} et {{cssxref("length","rem","#rem")}}). Pour personnaliser totalement votre texte, vous pouvez également utiliser vos propres polices de caractère grâce à {{cssxref("@font-face")}}.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a actuellement pas de contenu pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="color"><code>color</code></h3>
+
+<p>La propriété {{cssxref("color")}} modifie la couleur du texte en faisant appel à divers {{cssxref("color_value","systèmes de notation","#rgb()")}} : hexadécimal, rouge-vert-bleu (aussi appelé RGB pour <em>red-green-blue</em>), teinte-saturation-lumière (ou HSL pour <em>hue-saturation-lightness</em>). Vous pouvez aussi utiliser un {{cssxref("color_value","mot-clé désignant une couleur","#Mots-cl.C3.A9s")}}. Voici un exemple illustrant comment colorer le texte en vert.</p>
+
+<p>Pour commencer, intéressons nous au fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;p&gt;Je suis un paragraphe vert.&lt;/p&gt;</pre>
+
+<p>Maintenant appliquons le style ci-dessous :</p>
+
+<pre class="brush: css">p {
+  color: green;              /* C'est vert avec le mot clé "green" */
+  color: <code>#008000;            /* C'est vert avec la notation hexadecimale */</code>
+  color: rgb(0,128,0);       /* <code>C'est vert avec la notation RGB</code> */
+  color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */
+}</pre>
+
+<div class="note">
+<p><strong>Astuce de pro :</strong> le code précédent peut-être très utile en CSS. En effet, les navigateurs qui supportent mal la gestion de couleurs HSL, se rabattent sur le modèle RGB, puis hexadécimal, et en dernier recours aux mots-clés s'ils ne supportent aucune autre syntaxe.</p>
+</div>
+
+<p>Voici le résultat :</p>
+
+<p>{{EmbedLiveSample('color','100%')}}</p>
+
+<h3 id="font-family"><code>font-family</code></h3>
+
+<p>La propriété {{cssxref("font-family")}} est très utile pour ajouter une touche personnelle à votre site, <code>font-family</code> définit en effet une liste de polices dans lesquelles votre texte peut apparaître.</p>
+
+<p>La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Ce peut-être <code>serif</code>, <code>sans-serif</code> ou <code>monospace</code>. Voici un exemple :</p>
+
+<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;p class="serif"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
+&lt;p class="sansserif"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;</pre>
+
+<p>Appliquons lui le style suivant :</p>
+
+<pre class="brush: css" style="font-size: 14px;">.sansserif {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.serif {
+  font-family: "Times New Roman", Times, serif;
+}
+</pre>
+
+<p>Voici le résultat :</p>
+
+<p>{{EmbedLiveSample('font-family','100%')}}</p>
+
+<h3 id="font-size"><code>font-size</code></h3>
+
+<p>La propriété {{cssxref("font-size")}} ajuste la taille du texte, en utilisant une de ces unités :</p>
+
+<dl>
+ <dt>{{cssxref("length","px","#px")}}</dt>
+ <dd>L'unité <code><strong>px</strong></code> détermine la hauteur en pixels de votre texte.</dd>
+ <dt>{{cssxref("length","em","#em")}}</dt>
+ <dd><code><strong>em</strong></code> spécifie la largeur de la lettre "M" avec la police utilisée. Les <em>ems</em> sont des unités de typographie communes, parce qu'elles permettent de définir facilement des tailles relatives par rapport à la police et taille actuelle. Ainsi, en indiquant une taille de police de <code>1.5em,</code> on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément parent. Si l'élément parent n'a pas de taille absolue, <code>1em</code> vaut par défaut <code>16px</code>.</dd>
+ <dt>{{cssxref("length","rem","#rem")}}</dt>
+ <dd><code><strong>rem</strong></code> est beaucoup plus facile à utiliser comme unité qu'<em>em</em> car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l'héritage d'un quelconque élement parent.</dd>
+ <dt>{{cssxref("length","pt","#pt")}}</dt>
+ <dd><code><strong>pt</strong></code> est l'abréviation de <strong>point</strong>, une unité typographique très courante dans le monde de l'impression. Les navigateurs transposent les points en pixels, mais avec une certaine irrégularité, il est donc préférable d'éviter cette unité.</dd>
+</dl>
+
+<p>Voici une illustration de la différence entre <code>em</code> et <code>rem</code>, grâce à ce fragment de code HTML :</p>
+
+<pre class="brush: html">&lt;div&gt;Je mesure 1rem (par défaut)
+  &lt;div class="rem"&gt;Je mesure 0.8rem.
+    &lt;div class="rem"&gt;Je mesure aussi 0.8rem.
+      &lt;div class="rem"&gt;Ici, je mesure également 0.8rem.&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;hr&gt;
+
+&lt;div&gt;Je mesure 1em (par défaut)
+  &lt;div class="em"&gt;Je mesure 0.8em.
+    &lt;div class="em"&gt;Je mesure aussi 0.8em.
+      &lt;div class="em"&gt;Ici, je mesure également 0.8em.&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>En utilisant le style suivant :</p>
+
+<pre class="brush: css">.rem {
+  font-size: 0.8rem;
+}
+
+.em {
+  font-size: 0.8em
+}
+</pre>
+
+<p>Le résultat obtenu est le suivant :</p>
+
+<p>{{EmbedLiveSample('font-size','100%')}}</p>
+
+<h3 id="font-weight"><code>font-weight</code></h3>
+
+<p>La propriété {{cssxref("font-weight")}} définit l'épaisseur des caractères, généralement à l'aide des valeurs <code>normal</code> ou <code>bold</code>. Voici un exemple :</p>
+
+<pre class="brush: css">.bold {
+  font-weight: bold;
+}</pre>
+
+<h3 id="font-style"><code>font-style</code></h3>
+
+<p>La propriété {{cssxref("font-style")}} détermine si le texte doit être affiché normalement, en italique ou en oblique respectivement grâce à <code>normal</code>, <code>italic</code>, et <code>oblique</code> :</p>
+
+<pre class="brush: css">.italic {
+  font-style: italic;
+}</pre>
+
+<h3 id="line-height"><code>line-height</code></h3>
+
+<p>La propriété {{cssxref("line-height")}} définit la hauteur de la ligne en utilisant les mêmes unités que la propriété <code>font-size</code>.</p>
+
+<pre class="brush: css">.line {
+  line-height: 80%;
+}</pre>
+
+<div class="note">
+<p><strong>Astuce de pro :</strong> Vous pouvez appliquer les propriétés {{cssxref("font-style")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}} à l'aide d'une seule propriété « parente » : {{cssxref("font")}}</p>
+
+<p>Les deux exemples suivants afficheront donc exactement la même chose :</p>
+
+<pre class="brush: css">body {
+  font: bold 1em/150% Helvetica, Arial, sans-serif;
+}</pre>
+
+<pre class="brush: css">body {
+  font-weight: bold;
+  font-size  : 1em;
+  line-height: 150%;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<h3 id="text-transform"><code>text-transform</code></h3>
+
+<p>La propriété {{cssxref("text-transform")}} modifie la casse du texte (autrement dit, elle permet d'afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le montre cet exemple :</p>
+
+<pre class="brush: css">.transform {
+  text-transform: uppercase;
+}</pre>
+
+<h3 id="text-align"><code>text-align</code></h3>
+
+<p>La propriété {{cssxref("text-align")}} contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou centré ou justifié (<code>left</code>, <code>right</code>, <code>center</code>, ou <code>justified)</code> : </p>
+
+<pre class="brush: css">.center {
+  text-align: center;
+}</pre>
+
+<h3 id="text-decoration"><code>text-decoration</code></h3>
+
+<p>La propriété {{cssxref("text-decoration")}} permet de faire apparaitre une ligne <u>en dessous</u>, <span style="text-decoration: overline;">au dessus</span>, ou <s>à travers  de votre texte</s>. La valeur par défaut <code>none</code> supprime tout formatage. Voici, par exemple, comment barrer un texte en CSS :</p>
+
+<pre class="brush: css">.strike {
+  text-decoration: line-through;
+}</pre>
+
+<h3 id="text-shadow"><code>text-shadow</code></h3>
+
+<p>La propriété {{cssxref("text-shadow")}} fait apparaître une ou plusieurs ombres derrière le texte à l'aide de quatre paramètres : le décalage horizontal, le décalage vertical, la taille du rayon et la couleur de l'ombre portée. On peut appliquer plusieurs ombres en définissant une liste d'ombres séparées par des virgules et obtenir ainsi à des effets visuels étonnants. Voici trois exemples qui utilisent le code HTML ci-après :</p>
+
+<pre class="brush: html">&lt;p class="simple"&gt;COUCOU&lt;/p&gt;
+&lt;p class="double"&gt;COUCOU&lt;/p&gt;
+&lt;p class="feu"&gt;COUCOU&lt;/p&gt;
+</pre>
+
+<p>Si on applique maintenant ces différents styles :</p>
+
+<pre class="brush: css">p {
+  /* basic font setting */
+  font: bold 3em Impact, sans-serif;
+  text-align: center;
+  letter-spacing: 2px
+}
+
+.simple {
+  text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
+}
+
+.double {
+  text-shadow: 2px 2px 0 white,
+               4px 4px 0 black;
+}
+
+.feu {
+  color: white;
+  text-shadow: 0    0   2px #fefcc9,
+               1px -1px 3px #feec85,
+              -2px -2px 4px #ffae34,
+               2px -4px 5px #ec760c,
+              -2px -6px 6px #cd4606,
+               0   -8px 7px #973716,
+               1px -9px 8px #451b0e;
+}
+</pre>
+
+<p>Voici le résultat final :</p>
+
+<p>{{EmbedLiveSample('text-shadow','100%', 400)}}</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p id="CSS_text_styling">Vous pouvez bien sûr utiliser différentes combinaisons de ces propriétés pour parvenir au résultat visuel souhaité. Pour poursuivre votre apprentissage, vous pouvez jeter un œil à la façon d'<a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">utiliser le CSS dans une page web</a> ou à notre <a href="/fr/docs/Web/CSS/Tutorials">tutoriel CSS</a>.</p>
diff --git a/files/fr/apprendre/css/index.html b/files/fr/apprendre/css/index.html
new file mode 100644
index 0000000000..d47ea70f90
--- /dev/null
+++ b/files/fr/apprendre/css/index.html
@@ -0,0 +1,77 @@
+---
+title: Composer le HTML avec les CSS
+slug: Apprendre/CSS
+tags:
+  - Article
+  - CSS
+  - Codage
+  - Débutant
+  - Longueur
+  - Nécessite du contenu
+  - Renvois
+  - Style
+  - débogage
+  - particularités
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<blockquote>
+<p>Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.</p>
+</blockquote>
+
+<h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2>
+
+<p>Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML —</a> vous pourrez ensuite en apprendre davantage au sujet :</p>
+
+<ul>
+ <li>des CSS, en commençant avec le module <a href="/fr/docs/Learn/CSS/First_steps">Introduction aux CSS</a></li>
+ <li>des <a href="https://developer.mozilla.org/en-US/Learn/HTML#Modules">Modules HTML</a> plus avancés</li>
+ <li>du <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web.</li>
+</ul>
+
+<p id="sect1">Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.</p>
+
+<p>Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a> et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.</p>
+
+<p>Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a></dt>
+ <dd>Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.</dd>
+ <dt><a href="/fr/Apprendre/CSS/styliser_boites">Styliser les boîtes</a></dt>
+ <dd>Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/CSS/Styling_text">Composer du texte</a></dt>
+ <dd>Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.</dd>
+ <dt></dt>
+ <dt><a href="/fr/Apprendre/CSS/CSS_layout">Mise en page avec les CSS</a></dt>
+ <dd>
+ <p>À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.</p>
+ </dd>
+</dl>
+
+<h2 id="Résolution_de_problèmes_courants_avec_les_CSS">Résolution de problèmes courants avec les CSS</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.</p>
+
+<p>Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !</p>
+
+<h2 id="Le_CSS_est_étrange">"Le CSS est étrange"</h2>
+
+<p>Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :</p>
+
+<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS">Les CSS sur MDN</a></dt>
+ <dd>Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.</dd>
+</dl>
diff --git a/files/fr/apprendre/css/introduction_à_css/fundamental_css_comprehension/index.html b/files/fr/apprendre/css/introduction_à_css/fundamental_css_comprehension/index.html
new file mode 100644
index 0000000000..12a6be6d0c
--- /dev/null
+++ b/files/fr/apprendre/css/introduction_à_css/fundamental_css_comprehension/index.html
@@ -0,0 +1,137 @@
+---
+title: Compréhension des fondements des CSS
+slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
+tags:
+  - CSS
+  - Codage
+  - Commentaires
+  - Débutant
+  - Evaluation
+  - Règles
+  - Style
+  - Syntaxe
+  - Sélecteurs
+  - modèle de boîte
+translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</div>
+
+<p class="summary">Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour demarrer cet exercice, vous devez :</p>
+
+<ul>
+ <li>Récupérer et enregistrer le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">fichier HTML de l'exercice</a> ainsi que le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">fichier image associé</a> dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée.</li>
+ <li>Enregistrez le <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">fichier texte des ressources de la CSS</a> — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: À défaut, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">URL</a> pour faire pointer l'élément <code>&lt;img&gt;</code> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <code>&lt;style&gt;</code> dans l'élément <code>head</code> du document.</p>
+</div>
+
+<h2 id="Énoncé_du_projet">Énoncé du projet</h2>
+
+<p>Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.</p>
+
+<p>Construction de base :</p>
+
+<ul>
+ <li>Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme <code>style.css</code>.</li>
+ <li>Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément <code>&lt;link&gt;</code>.</li>
+ <li>Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut  de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.</li>
+ <li>Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page »  fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.</li>
+</ul>
+
+<p>Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :</p>
+
+<ul>
+ <li>Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS.</li>
+ <li>Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que :
+  <ul>
+   <li>entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !).</li>
+   <li>l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li>
+   <li>le pied ait un  gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.</li>
+   <li>l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne).</li>
+  </ul>
+ </li>
+ <li>Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre.</li>
+</ul>
+
+<p>Nouveaux jeux de règles à écrire :</p>
+
+<ul>
+ <li>Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur  donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en <code>em</code>.</li>
+ <li>La marge par défaut appliquée aux éléments &lt;h2&gt; et &lt;p&gt; par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0.</li>
+ <li>Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément <code>&lt;article&gt;</code>), nous devons lui donner une hauteur spécifique. Réglez la hauteur de <code>&lt;article&gt;</code> à 120px, mais exprimez‑la en <code>em</code>. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi.</li>
+ <li>Écrivez un jeu de règles qui donne à <code>&lt;h2&gt;</code> une taille de police effective de 20px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li>
+ <li>Écrivez un jeu de règles qui donne à <code>&lt;p&gt;</code> dans le pied de page une taille de police effective de 15px (mais exprimée en <code>em</code>) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.</li>
+ <li>Comme dernière petite touche, donnez au paragraphe à l'intérieur de <code>&lt;article&gt;</code> une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe <code>&lt;h2&gt;</code> et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Gardez présent à l'esprit que le 2e jeu de règles définit <code>font-size: 10px;</code> pour l'élément <code>&lt;html&gt;</code> — cela signifie que pour tous les enfants de <code>&lt;html&gt;</code>, un <code>em</code> vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un <code>font-size</code> différent placés entre eux et <code>&lt;html&gt;</code> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).</p>
+</div>
+
+<p>Autres choses à prendre en considération :</p>
+
+<ul>
+ <li>Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale.</li>
+ <li>Vous devriez mettre <code>.card</code> en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus.</li>
+</ul>
+
+<h2 id="Conseils_et_astuces">Conseils et astuces</h2>
+
+<ul>
+ <li>Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS.</li>
+ <li>Quand vous calculez le nombre de pixels correspondant à la valeur <code>em</code> dont vous avez besoin, pensez à la taille de police de base de l'élément racine (<code>&lt;html&gt;</code>), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de <code>em</code>, au moins dans un cas simple comme celui-ci.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :</p>
+
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+
+<p> </p>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">le fil de discussion à propos de cet exercise</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites l'exercice d'abors, il n'y rien à gagner en trichant !</p>
+
+<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS">Comment fonctionnent les CSS</a></li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">Sélecteurs</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Sélecteurs simples</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinaisons et sélecteurs multiples</a></li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Unités et valeurs pour les CSS</a></li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade et héritage</a></li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Débogage des CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Compréhension des fondements des CSS</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/introduction_à_css/la_disposition/index.html b/files/fr/apprendre/css/introduction_à_css/la_disposition/index.html
new file mode 100644
index 0000000000..26b796a214
--- /dev/null
+++ b/files/fr/apprendre/css/introduction_à_css/la_disposition/index.html
@@ -0,0 +1,403 @@
+---
+title: La disposition en CSS
+slug: Apprendre/CSS/Introduction_à_CSS/La_disposition
+tags:
+  - Apprendre
+  - CSS
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p>
+
+<p class="summary"><span class="seoSummary">Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément.</span> CSS fournit de nombreux mécanismes pour organiser la disposition du contenu d'un document et les techniques modernes sont suffisamment complexes pour être décrites dans des articles séparés. Dans cet article, nous verrons les techniques de base, utilisées depuis plusieurs années.</p>
+
+<p>Pour organiser correctement la disposition d'un document avec CSS, il y a quelques notions qu'il est préférable de connaître. Le concept le plus important est le flux du texte {{Glossary("HTML")}} et les façons dont on peut le modifier. Ces concepts clés sont essentiels et tous les mécanismes liés à la disposition feront référence à ce qui est expliqué ici..</p>
+
+<h2 id="Le_flux">Le flux</h2>
+
+<p>Simplifié à l'extrême, un document HTML est un document texte organisé avec des {{Glossary("balise","balises")}}. Dans un tel document, le texte « coule » sur les différentes lignes. Autrement dit, le texte est affiché dans le sens de lecture (de gauche à droite pour les langages latins comme le français ou l'italien) et est fragmenté automatiquement pour passer à la ligne à chaque fois que le texte atteint le bord du document.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p>
+
+<p>Chaque {{Glossary("élément")}} du document pourra modifier ce flux de texte :</p>
+
+<ul>
+ <li>Certains éléments suivront simplement le flux, comme s'ils n'existaient pas</li>
+ <li>Certains éléments pourront forcer le passage à la ligne, que le texte ait atteint la limite du document ou non</li>
+ <li>Certains éléments pourront créer un nouveau flux de texte pour leur contenu, flux indépendant du flux de texte « extérieur ».</li>
+</ul>
+
+<h3 id="Les_catégories_d'affichage_des_éléments">Les catégories d'affichage des éléments</h3>
+
+<p>CSS est utilisé pour définir la façon dont un élément HTML se comporte dans ce flux et comment il s'y inscrit. Le comportement d'un élément est défini avec la propriété {{cssxref('display')}}. Cette propriété peut prendre plusieurs valeurs mais voyons ici les quatre valeurs les plus importantes :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur retire l'élément du flux, comme si l'élément et son contenu n'existaient pas.</dd>
+ <dt><code>inline</code></dt>
+ <dd>Cette valeur rend l'élément transparent au sens où il s'inscrit dans le flux de texte global, il est donc associé au texte l'environnant.</dd>
+ <dt><code>block</code></dt>
+ <dd>Cette valeur cassera le flux de texte pour insérer l'élément. Cela provoquera donc un saut de ligne avant et après. Le contenu de cet élément ne fait donc pas partie du flux global et suit donc les contraintes de l'élément définies par <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîte</a>.</dd>
+ <dt><code>inline-block</code></dt>
+ <dd>Cette valeur est en quelque sorte un intermédiaire entre <code>inline</code> et <code>block</code>. Comme avec <code>inline</code>, les boîtes seront placées dans le flux global mais , comme avec <code>block</code>, le contenu ne fera pas partie du texte environnant..</dd>
+</dl>
+
+<p>Prenons un exemple.</p>
+
+<p>Voici le code HTML qui sera utilisé :</p>
+
+<pre class="brush: html">&lt;p class="none"&gt;
+  1. Je suis un chat noir,
+  &lt;span&gt;qui marche sous l'échelle &lt;/span&gt;
+  et qui casse des miroirs.
+&lt;/p&gt;
+
+&lt;p class="inline"&gt;
+  2. Je suis un chat noir,
+  &lt;span&gt;qui marche sous l'échelle &lt;/span&gt;
+  et qui casse des miroirs.
+&lt;/p&gt;
+
+&lt;p class="block"&gt;
+  3. Je suis un chat noir,
+  &lt;span&gt;wqui marche sous l'échelle &lt;/span&gt;
+  et qui casse des miroirs.
+&lt;/p&gt;
+
+&lt;p class="inline-block"&gt;
+  4. Je suis un chat noir,
+  &lt;span&gt;qui marche sous l'échelle &lt;/span&gt;
+  et qui casse des miroirs.
+&lt;/p&gt;
+</pre>
+
+<p>On appliquera la feuille de style CSS suivante :</p>
+
+<pre class="brush: css">span {
+  width: 5em;
+  background: yellow;
+}
+
+.none span         { display: none;         }
+.inline span       { display: inline;       }
+.block span        { display: block;        }
+.inline-block span { display: inline-block; }</pre>
+
+<p>Cela fournira le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Les_catégories_d'affichage_des_éléments", '100%', '300px')}}</p>
+
+<h2 id="Modifier_le_flux">Modifier le flux</h2>
+
+<p>En utilisant la propriété <code>display</code>, vous pouvez déjà modifier le flux. Il est toutefois possible d'aller plus loin.</p>
+
+<h3 id="La_disposition_du_texte">La disposition du texte</h3>
+
+<p>En fin de compte, un document n'est qu'un long flux de texte et CSS fournit de nombreuses propriétés pour gérer la disposition du texte. La disposition du texte regroupe tout ce qui touche aux règles des sauts de ligne et à la façon dont le texte est positionné par rapport à la ligne de base naturelle.</p>
+
+<p>Ces propriétés sont : {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}} et {{cssxref("word-wrap")}}.</p>
+
+<p>À l'exception de <code>text-align</code> et de <code>text-indent</code>, les autres propriétés ont des effets plutôt subtils sur le texte. Quant à <code>vertical-align</code>, il est souvent utilisé avec des boîtes en mode <code>inline-block</code>.</p>
+
+<p>Là encore, un exemple vaut mieux qu'un long discours.</p>
+
+<p>HTML :</p>
+
+<pre class="brush: html">&lt;p lang="en"&gt;WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.&lt;/p&gt;
+&lt;p class="format" lang="en"&gt;WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.&lt;/p&gt;
+</pre>
+
+<p>CSS :</p>
+
+<pre class="brush: css">.format {
+  /* On « tire » la première ligne sur
+     une distance de 2em */
+  text-indent: -2em;
+
+  /* Il faut compenser l'indentation négative
+     si on veut éviter que du texte saute et
+     pour garder l'ensemble du texte dans la
+     boîte de l'élément */
+  padding-left: 2em;
+
+  /* Le texte est aligné par rapport aux deux
+     bords et l'espace entre les mots est ajusté
+     pour le remplissage de la ligne */
+  text-align: justify;
+
+  /* La dernière ligne de texte du bloc est
+     centrée*/
+  -moz-text-align-last: center;
+       text-align-last: center;
+
+  /* Plutôt que le saut de ligne se fasse entre deux mots,
+     il peut être fait en découpant un mot, selon les règles
+     de la langue utilisée. Cela permet de découper le texte
+     clairement avec un trait d'union. Si cela ne vous
+     importe pas, vous pouvez utiliser word-break ou
+     word-wrap à la place  */
+  -webkit-hyphens: auto;
+     -moz-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Comme vous avez pu le voir, certaines propriétés sont écrites plusieurs fois avec un préfixe. Certaines propriétés sont expérimentales pour certains navigateurs et doivent donc être préfixées, c'est une bonne pratique que de les utiliser préfixées tant qu'elles sont expérimentales, tout en fournissant le nom de la propriété standard à la fin afin d'avoir la meilleure rétrocompatibilité possible.</p>
+</div>
+
+<p>Le résultat obtenu sera :</p>
+
+<p>{{EmbedLiveSample('La_disposition_du_texte', '100%', '350')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'astuce utilisée pour compenser l'indentation négative est une astuce assez courante. Tout propriété qui accepte une longueur peut accepter une valeur négative. En jouant avec les valeurs négatives et en les compensant avec d'autres propriétés, il est possible de produire des effets visuels très intéressants, notamment quand on manipule les propriétés liées au modèle de boîte.</p>
+</div>
+
+<h3 id="Le_flottement">Le flottement</h3>
+
+<p>C'est une chose que de gérer du texte mais on va également vouloir positionner une boîte dans le document. Pour commencer, il faut gérer les boîtes flottantes. Les boîtes flottantes sont toujours attachées au flux global de texte mais le texte « coulera » autour. Si cela vous paraît, prenons un exemple.</p>
+
+<h4 id="Le_flottement_simple">Le flottement simple</h4>
+
+<p>HTML :</p>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="excerpt"&gt;"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" &lt;/p&gt;
+  &lt;p&gt; The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>CSS :</p>
+
+<pre class="brush: css">.excerpt {
+  /* Une boîte flottante agira comme un bloc
+     quelle que soit la valeur de display */
+  display: block;
+
+  /* La boîte flottera à gauche ce qui signifie
+     qu'elle sera sur la partie gauche du bloc
+     englobant et que le texte « coulera » sur sa
+     droite. */
+  float: left;
+
+  /* Il est nécessaire de déclarer une largeur pour
+     une boîte flottante. Si on ne le fait pas, la
+     largeur sera calculée automatiquement et occupera
+     autant d'espace que possible. Cela aurait eu le
+     même effet qu'un bloc ordinaire. */
+  width: 40%;
+
+  /* On définit une marge à droite et en bas pour éviter
+     que le texte qui flotte autour soit collé à celui de
+     la boîte */
+  margin: 0 1em 1em 0;
+
+  /* On rend la boîte flottante plus visible avec une
+     oucleur d'arrière-plan */
+  background: lightgrey;
+
+  /* Puisque l'arrière-plan est opaque, on ajoute un écart
+     entre le contenu et les bords de la boîte */
+  padding: 1em;
+}</pre>
+
+<p>Ces éléments permettront d'avoir :</p>
+
+<p>{{ EmbedLiveSample('Le_flottement_simple', '100%', '280') }}</p>
+
+<h4 id="Organiser_une_disposition_avec_le_flottement">Organiser une disposition avec le flottement</h4>
+
+<p>La méthode précédente est simple et illustre comment manipuler le flux. Il est possible d'aller plus loin et d'organiser l'ensemble de la disposition du document avec. Les boîtes flottantes dans une direction donnée s'empilent horizontalement, cela permet de créer très facilement des lignes de boîtes. Les boîtes qui sont des blocs forment s'empilent elles sous forme de colonnes.</p>
+
+<p>Là encore, illustrons le point avec un exemple.</p>
+
+<p>HTML :</p>
+
+<pre class="brush: html">&lt;div class="layout"&gt;
+  &lt;div class="row"&gt;
+    &lt;p class="cell size50"&gt;Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.&lt;/p&gt;
+    &lt;p class="cell size50"&gt;Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;p class="cell size100"&gt;Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;p class="cell size33"&gt;The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.&lt;/p&gt;
+    &lt;p class="cell size33"&gt;
+      "Ding, dong!"&lt;br&gt;
+      "A quarter past," said Scrooge, counting.&lt;br&gt;
+      "Ding, dong!"&lt;br&gt;
+      "Half-past!" said Scrooge.&lt;br&gt;
+      "Ding, dong!"&lt;br&gt;
+      "A quarter to it," said Scrooge.
+    &lt;/p&gt;
+    &lt;p class="cell size33"&gt;
+      "Ding, dong!"&lt;br&gt;
+      "The hour itself," said Scrooge, triumphantly, "and nothing else!"&lt;br&gt;
+      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>CSS :</p>
+
+<pre class="brush: css">/* Le conteneur principal pour la disposition */
+.layout {
+  /* On ajoute un arrière-plan pour le rendre
+     visible */
+  background: lightgrey;
+
+  /* On ajoute un léger interstice pour harmoniser
+     la distance entre le contenu des cellules et
+     la bordure du conteneur principal */
+  padding   : 0.5em;
+}
+
+/* Ici, on empêche les boîtes flottantes de
+   dépasser d'un conteneur (ce qui peut arriver
+   si le conteneur est vide car il aura alors
+   une hauteur nulle). Avec overflow
+   hidden, la boîte flottante ne passera pas à
+   travers et la boîte parente sera agrandie
+   pour éviter un dépassement de la boîte.  */
+.row {
+  overflow: hidden;
+}
+
+/* Chaque cellule sera une boîte flottante à gauche */
+.cell {
+  float : left;
+
+  /* On ajoute du padding pour créer un écart visuel
+     entre les cellules */
+  padding   : 0.5em;
+
+  /* Étant donné qu'on ajoute du padding, il faut
+     s'assurer que cela ne touchera pas la largeur
+     de la boîte. */
+  box-sizing: border-box;
+
+  /* Comme la marge ne peut pas être contrôlée par
+     la propriété box-sizing, on s'assure d'en
+     avoir aucune appliquée ici. */
+  margin    : 0;
+}
+
+/* Voici les tailles appliquées aux boîtes */
+.size33  { width:  33%; } /* Pas un tiers mais presque */
+.size50  { width:  50%; } /* Une moitié */
+.size100 { width: 100%; } /* Une ligne */</pre>
+
+<p>Cela donnera le résultat suivant :</p>
+
+<p>{{EmbedLiveSample('Organiser_une_disposition_avec_le_flottement', '100%', '520')}}</p>
+
+<p>De nombreux <em>frameworks</em> CSS utilisent ces méthodes de boîtes flottantes. C'est une technique robuste et connue mais qui a ses limites : tout doit être géré avec le flux, il n'est pas possible de gérer un ordre arbitraire pour les boîtes, de gérer des dimensionnements variables et il est impossible de centrer verticalement des éléments. Nous vous encourageons à poursuivre la réflexion, <a href="http://www.positioniseverything.net/articles/onetruelayout/">les boîtes flottantes sont étudiées depuis longtemps (article en anglais)</a> et constituent une des solutions les plus robustes pour gérer une disposition simple, compatible avec les navigateurs historiques.</p>
+
+<p>Si vous souhaitez en savoir plus sur les subtilités des boîtes flottantes, nous vous invitons à lire <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> (en anglais) par Chris Coyer.</p>
+
+<h3 id="Le_positionnement">Le positionnement</h3>
+
+<p>Si les boîtes flottantes font partie du flux, il existe un autre mécanisme qui permet d'organiser une disposition en extrayant les boîtes du flux : le positionnement CSS. Le positionnement fonctionne en définissant un contexte de positionnement grâce à la propriété {{cssxref("position")}} puis en permettant aux boites de se positionner en utilisant les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}.</p>
+
+<p>La propriété {{cssxref("position")}} peut prendre quatre valeurs différentes :</p>
+
+<dl>
+ <dt><code>static</code></dt>
+ <dd>La valeur par défaut pour tous les éléments : ils font partie du flux et on ne définit pas un contexte de positionnement spécifique.</dd>
+ <dt><code>relative</code></dt>
+ <dd>Avec cette valeur, les éléments font toujours partie du flux mais peuvent être déplacés visuellement avec les valeurs des propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Ces propriétés définissent le contexte de positionnement des éléments fils.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Le point de position 0,0  représente le coin en haut à gauche de l'élément parent le plus proche qui définit un contexte de positionnement autre que <code>static</code>. S'il n'y a pas de tel parent, la position 0,0 représente le coin en haut à gauche du document.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. La position 0,0 représente le coin en haut à gauche de fenêtre du navigateur ({{Glossary("viewport")}}).</dd>
+</dl>
+
+<p>Les boîtes positionnées de cette façon peuvent s'empiler les unes sur les autres. Dans ce cas, il est possible de changer l'ordre d'empilement grâce à la propriété {{cssxref("z-index")}}.</p>
+
+<p>Une dernière fois, prenons un exemple pour illustrer le concept.</p>
+
+<p>Le code HTML pour le document sera :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  The curtains of his bed were drawn aside, I tell you, by a hand. Not the curtains at his feet, nor the curtains at his back, but those to which his face was addressed. The curtains of his bed were drawn aside; and Scrooge, starting up into a half-recumbent attitude, found himself face to face with the unearthly visitor who drew them: as close to it as I am now to you, and I am standing in the spirit at your elbow.
+  &lt;span class="topleft"&gt;1&lt;/span&gt;
+&lt;/p&gt;
+&lt;p class="relative"&gt;
+  It was a strange figure--like a child: yet not so like a child as like an old man, viewed through some supernatural medium, which gave him the appearance of having receded from the view, and being diminished to a child's proportion. Its hair, which hung about its neck and down its back, was white as if with age; and yet the face had not a wrinkle in it, and the tenderest bloom was on the skin. The arms were very long and muscular; the hands the same, as if its hold were of uncommon strength. Its legs and feet, most delicately formed, were, like those upper members, bare. It wore a tunic of the purest white; and round its waist was bound a lustrous belt, the sheen of which was beautiful. It held a branch of fresh green holly in its hand; and, in singular contradiction of that wintry emblem, had its dress trimmed with summer flowers. But the strangest thing about it was, that from the crown of its head there sprung a bright clear jet of light, by which all this was visible; and which was doubtless the occasion of its using, in its duller moments, a great extinguisher for a cap, which it now held under its arm.
+  &lt;span class="topleft"&gt;2&lt;/span&gt;
+  &lt;span class="stackdown"&gt;3&lt;/span&gt;
+  &lt;span class="stackup"&gt;4&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>La feuille de style CSS sera :</p>
+
+<pre class="brush: css">p {
+  margin: 1em
+}
+
+span {
+  font       : 2em sans-serif;
+  width      : 6rem;
+
+  /* Avoir la hauteur de l'élément et la hauteur
+     de la ligne avec la même valeur permet de
+     centrer verticalement une ligne de texte. */
+  height     : 6rem;
+  line-height: 6rem;
+
+  text-align : center;
+  background : rgba(0, 255, 255, 0.8);
+}
+
+.relative {
+  position: relative;
+}
+
+/* Tous les éléments de la classe "topleft"
+   sont positionnés dans le coin en haut à
+   gauche de leur parent dans le contexte
+   de positionnement */
+.topleft {
+  position: absolute;
+  top     : 0;
+  left    : 0;
+}
+
+.stackup {
+  position: absolute;
+  top     : 37%;
+  left    : 62%;
+
+  /* Tous les éléments de la classe "stackup"
+     sont placés au-dessus des éléments dont
+     le z-index est inférieur à 2 dans le même
+     contexte de positionnement. */
+  z-index : 2;
+}
+
+.stackdown {
+  position: absolute;
+  top     : 50%;
+  left    : 66%;
+
+  /* Tous les éléments de la classe "stackdown"
+     sont placés sous les éléments dont le
+     z-index est supérieur à 1 dans le même
+     contexte de positionnement. */
+  z-index : 1;
+}
+</pre>
+
+<p>La combinaison de ces deux éléments donnera le résultat suivant :</p>
+
+<p>{{EmbedLiveSample('Le_positionnement', '100%', '400')}}</p>
+
+<p>Bien que le positionnement CSS ne soit pas réellement utile pour complètement organiser une disposition, il est généralement judicieux pour obtenir certains effets liés à la navigation, aux bulles d'informations, etc. C'est un mécanisme que vous rencontrerez fréquemment et nous vous encourageons donc à vous familiariser avec. Parmi les ressources qui existent par ailleurs, nous vous conseillons particulièrement de lire l'article <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> (en anglais), de Noah Stokes.</p>
+
+<h2 id="La_suite">La suite</h2>
+
+<p>Le flux, les boîtes flottantes et le positionnement CSS sont les bases qui vous permettront d'approfondir la création d'une disposition en CSS. Suite à cette série d'articles sur les concepts théoriques de CSS, vous connaissez tout ce qu'il faut pour exploiter au mieux CSS. Après ce vernis théorique, vous pouvez aborder <a href="/fr/docs/Apprendre/CSS/Comment">les aspects pratiques de CSS</a>. Si vous souhaitez approfondir les concepts sur la disposition et découvrir les autres mécanismes à ce sujet, vous pouvez consulter les articles sur : les tableaux, <a href="/fr/docs/Web/CSS/Colonnes_CSS3">l'organisation à plusieurs colonnes</a> et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">la disposition avec les boîtes flexibles (<em>flexbox</em>)</a>.</p>
+
+<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p>
diff --git a/files/fr/apprendre/css/les_propriétés_css/index.html b/files/fr/apprendre/css/les_propriétés_css/index.html
new file mode 100644
index 0000000000..96c2f5a5b1
--- /dev/null
+++ b/files/fr/apprendre/css/les_propriétés_css/index.html
@@ -0,0 +1,136 @@
+---
+title: Les propriétés CSS et comment s'en servir
+slug: Apprendre/CSS/Les_propriétés_CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - NeedsActiveLearning
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Comprendre les bases de {{Glossary("HTML")}}, <a href="/fr/Apprendre/HTML/Balises_HTML">des éléments HTML</a>, et <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_link">comment lier des documents HTML aux feuilles de style CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).</p>
+
+<p>La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.</p>
+
+<pre class="brush: css">p {
+   font-family: "Times New Roman", georgia, sans-serif;
+   font-size: 24px;
+}</pre>
+
+<p>Dans l'exemple précédent,  <code>p</code> est un sélecteur qui applique un style à tous les éléments <code>{{HTMLElement("p")}}</code> en même temps. Les propriétés CSS <code>font-family</code> et <code>font-size</code> sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.</p>
+
+<p>Il existe plus de <a href="/fr/docs/Web/CSS/Reference">250 propriétés</a> pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.</p>
+
+<p>Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les <a href="/fr/docs/Web/CSS/Spécificité">sélecteurs les plus précis</a> prend le dessus sur les règles avec les sélecteurs plus basiques.</p>
+
+<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3>
+
+<p>Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.</p>
+
+<p>Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;h1&gt;Je suis un exemple.&lt;/h1&gt;
+&lt;p&gt;Dans cet exemple, je suis un paragraphe.&lt;/p&gt;
+&lt;p&gt;Et je suis un second paragraphe.&lt;/p&gt;
+</pre>
+
+<p>Dans la règle CSS qui suit, le sélecteur d'élement <code>p</code> applique les styles définis à tous les éléments <code>{{HTMLElement("p")}}</code> de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).</p>
+
+<pre class="brush: css">p {
+  font-family: "Helvetica", Arial, sans-serif;
+  font-size  : 12px;
+}</pre>
+
+<p>La prochaine règle CSS s'applique uniquement à l'élément<code> {{HTMLElement("h1")}}</code>. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.</p>
+
+<pre class="brush: css">h1 {
+  font-size  : 24px;
+  font-weight: bold;
+}</pre>
+
+<p>La règle CSS suivante applique les styles demandés à la fois aux éléments <code>{{HTMLElement("h1")}}</code> et aux éléments <code>{{HTMLElement("p")}}</code>, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des <code>h1</code> et à celui des paragraphes.</p>
+
+<pre class="brush: css">h1, p {
+  color: darkmagenta;
+}</pre>
+
+<p>Voici le résultat obtenu avec ce code :</p>
+
+<p>{{EmbedLiveSample('Le_sélecteur_d\'élément')}}</p>
+
+<h3 id="Le_sélecteur_id">Le sélecteur <code>id</code></h3>
+
+<p>L'attribut <code>id</code><strong> </strong>d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur <code>id</code> est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.</p>
+
+<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;p id="coucou"&gt;Coucou monde !&lt;/p&gt; </pre>
+
+<p>La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur <code>id</code>, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (<em>id</em>). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe,  {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.</p>
+
+<pre class="brush: css">#coucou {
+  text-align: center;
+  border    : 1px solid black;
+  padding   : 8px;
+}</pre>
+
+<p>Voici le résultat final obtenu:</p>
+
+<p>{{EmbedLiveSample('Le_sélecteur_id')}}</p>
+
+<h3 id="Le_sélecteur_class">Le sélecteur <code>class</code></h3>
+
+<p>À l'intérieur du code HTML, l'attribut <code>class</code><strong> </strong>permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.</p>
+
+<p>Pour notre prochain exemple, analysez le fragment de code HTML suivant :</p>
+
+<pre class="brush: html">&lt;h1 class="coucou"&gt;Coucou !&lt;/h1&gt;
+&lt;p class="coucou salut"&gt;Retrouvons-nous !&lt;/p&gt;
+&lt;p class="salut"&gt;Et déplaçons des montagnes.&lt;/p&gt;
+</pre>
+
+<p>Nous allons appliquer une règle CSS à tous les éléments contenant la classe <code>coucou</code>. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.</p>
+
+<pre class="brush: css">.coucou {
+  font-style: italic;
+}</pre>
+
+<p>En voici une autre pour tous les éléments avec la classe <code>salut</code>. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.</p>
+
+<pre class="brush: css">.salut {
+  text-decoration: line-through;
+}</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample('Le_sélecteur_class')}}</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en <a href="/fr/Apprendre/CSS/formatage_texte_CSS">apprendre davantage sur le formatage du texte</a> ou commencer à explorer <a href="/fr/docs/Web/CSS/Tutorials">nos tutoriels CSS</a> dès maintenant.</p>
diff --git a/files/fr/apprendre/css/styliser_boites/a_cool_looking_box/index.html b/files/fr/apprendre/css/styliser_boites/a_cool_looking_box/index.html
new file mode 100644
index 0000000000..05b812da1d
--- /dev/null
+++ b/files/fr/apprendre/css/styliser_boites/a_cool_looking_box/index.html
@@ -0,0 +1,98 @@
+---
+title: Une boîte d'aspect rafraîchissant
+slug: Apprendre/CSS/styliser_boites/A_cool_looking_box
+tags:
+  - Apprentissage
+  - Arrière‑plans
+  - Boîte
+  - CSS
+  - Débutant
+  - Evaluation
+  - effets
+  - encadrement
+  - modèle de boîte
+translation_of: Learn/CSS/Building_blocks/A_cool_looking_box
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Départ">Départ</h2>
+
+<p>Pour débuter, vous devez :</p>
+
+<ul>
+ <li>faire des copies locales de ces <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> — enregistrez‑les sous les noms <code>index.html</code> et <code>style.css</code> dans un nouveau répertoire.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Autrement, vous pouvez utiliser un site comme  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code>&lt;style&gt;</code> dans l'élément <code>head</code> du document.</p>
+</div>
+
+<h2 id="Résumé_du_projet">Résumé du projet</h2>
+
+<p>Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.</p>
+
+<h3 id="Généralités">Généralités</h3>
+
+<ul>
+ <li>Appliquez la CSS au HTML.</li>
+</ul>
+
+<h3 id="Composition_de_la_boîte">Composition de la boîte</h3>
+
+<p>Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :</p>
+
+<ul>
+ <li>une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,</li>
+ <li>une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,</li>
+ <li>un texte centré horizontalement,</li>
+ <li>une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur.</li>
+ <li>une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan.</li>
+ <li>la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire.</li>
+ <li>un encadrement avec des coins arrondis subtils,</li>
+ <li>un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée.</li>
+ <li>un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité.</li>
+ <li>des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété <code>inset</code> — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abord, il n'y rien à gagner en trichant !</p>
+
+<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/styliser_boites/creating_fancy_letterheaded_paper/index.html b/files/fr/apprendre/css/styliser_boites/creating_fancy_letterheaded_paper/index.html
new file mode 100644
index 0000000000..8e61584e9d
--- /dev/null
+++ b/files/fr/apprendre/css/styliser_boites/creating_fancy_letterheaded_paper/index.html
@@ -0,0 +1,112 @@
+---
+title: Création d'un en-tête de papier à lettre élégant
+slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper
+tags:
+  - Arrière‑plan
+  - Boîte
+  - Boîtes
+  - CSS
+  - Codage
+  - Débutant
+  - Evaluation
+  - encadrement
+  - en‑tête de lettre
+  - lettre
+  - lettre avec en‑tête
+  - papier
+translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}</div>
+
+<p class="summary">Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Départ">Départ</h2>
+
+<p>Pour débuter cet exercice, vous devez :</p>
+
+<ul>
+ <li>faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> et de la <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> — enregistrez‑les sous les noms  <code>index.html</code> et <code>style.css</code> dans un nouveau répertoire.</li>
+ <li>enregistrer des copies locales des images d'<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">en‑tête</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">pied de page</a> et  <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a> dans le même répertoire que les fichiers de code.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Autrement, vous pouvez utiliser un site comme  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code>&lt;style&gt;</code> dans l'élément <code>head</code> du document.</p>
+</div>
+
+<h2 id="Résumé_du_projet">Résumé du projet</h2>
+
+<p>Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il  faut :</p>
+
+<h3 id="La_lettre">La lettre</h3>
+
+<ul>
+ <li>appliquer la CSS au HTML,</li>
+ <li>ajouter à la lettre une déclaration <code>background</code> qui :
+  <ul>
+   <li>place l'image haute en en‑tête de lettre</li>
+   <li>place l'image basse en pied de lettre</li>
+   <li>ajoute un gradient semi-transparent au‑dessus des deux arrière‑plans ci‑dessus pour donner un peu de texture à la lettre. Faites en sorte qu'il soit légèrement obscurcissant en en‑tête et pied de page, mais totalement transparent sur la plus grande partie du centre de la lettre,</li>
+  </ul>
+ </li>
+ <li>ajouter une autre déclaration <code>background</code> qui mette uniquement l'image haute en en‑tête, en recours pour les navigateurs qui ne prennent pas en charge la précédente déclaration,</li>
+ <li>ajouter un arrière‑plan de couleur blanche à la lettre.</li>
+ <li>ajouter un encadrement plein de 1mm en haut et en bas de la lettre, dans une couleur qui soit en accord avec le schéma de couleur général,</li>
+</ul>
+
+<h3 id="Le_logo">Le logo</h3>
+
+<ul>
+ <li>à l'élément {{htmlelement("h1")}}, ajouter le logo en tant qu'image de fond,</li>
+ <li>ajouter un filtre au logo pour donner une très légère ombre portée,.</li>
+ <li>puis, commenter le filtre et implémenter l'ombre portée d'une autre manière pour être compatible inter-navigateurs, mais qui suive encore la forme ronde de l'image.</li>
+</ul>
+
+<h2 id="Astuces">Astuces</h2>
+
+<ul>
+ <li>Souvenez‑vous que vous pouvez créer un recours pour les navigateurs les plus anciens en faisant la déclaration de la version de recours avant celle qui n'est prise en charge que par les navigateurs modernes. Les anciens navigateurs appliqueront la première déclaration tout en ignorant la seconde, alors que les navigateurs récents appliqueront la première déclaration, mais l'écraseront avec la seconde.</li>
+ <li>Vous êtes bien entendu libre de créer vos propres graphes si vous le souhaitez.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p> </p>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abord, il n'y rien à gagner en trichant !</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li>
+ <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li>
+</ul>
diff --git a/files/fr/apprendre/css/utiliser_css_dans_une_page_web/index.html b/files/fr/apprendre/css/utiliser_css_dans_une_page_web/index.html
new file mode 100644
index 0000000000..ad0a7e209d
--- /dev/null
+++ b/files/fr/apprendre/css/utiliser_css_dans_une_page_web/index.html
@@ -0,0 +1,162 @@
+---
+title: Utiliser le CSS dans une page web
+slug: Apprendre/CSS/Utiliser_CSS_dans_une_page_web
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - NeedsActiveLearning
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div class="summary">
+<p>Cet article explique comment appliquer des styles {{glossary("CSS")}} à vos documents HTML.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Il peut être utile de savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">écrire une page HTML simple</a> et comment <a href="/fr/Learn/Set_up_a_basic_working_environment">configurer les éléments de base d'un site web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre trois méthodes différentes pour ajouter des éléments de style à votre page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il existe deux méthodes permettant d'appliquer du code CSS à vos documents HTML : écrire du CSS directement dans le document HTML ou bien appeler un fichier CSS externe à partir du document HTML.</p>
+
+<p>Voyons comment appeler des informations CSS en utilisant les balises {{htmlelement("style")}} et {{htmlelement("link")}} et analysons ce qui se passe quand les deux balises sont utilisées conjointement.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="La_balise_&lt;style>">La balise  <code>&lt;style&gt;</code></h3>
+
+<p>Lorsque vous souhaitez mettre en forme une page, vous avez la possibilité d'inclure tout le formatage directement dans le document HTML à l'aide de la balise {{htmlelement("style")}} :</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;La fameuse page « Hello World »&lt;/title&gt;
+
+    &lt;style&gt;
+        body {
+            background:white;
+            color:blue;
+        }
+    &lt;/style&gt;
+
+&lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Hello world!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Comme nous l'avons <a href="/en-US/Learn/Set_up_a_basic_working_environment">déjà souligné</a>, ce n'est pas la meilleure méthode pour mettre en forme une page web puisque, dans ce cas, il sera nécessaire de répéter cette portion de code dans toutes les autres pages de votre site. Cela sollicitera de la bande passante supplémentaire et vous fera également perdre du temps puisqu'il faudra recopier les styles à chaque fois pour mettre à jour chaque page.</p>
+
+<p>Néanmoins, comme nous le verrons à la fin, cette façon de procéder peut s'avérer utile lorsque l'objectif est d'appliquer un style à une seule page de votre site.</p>
+
+<h3 id="La_balise_&lt;link>">La balise <code>&lt;link&gt;</code></h3>
+
+<p>La balise <code>{{htmlelement("link")}}</code> permet, entre autres choses, d'appliquer un formatage au document donné à partir d'une feuille de style externe. Lorsqu'un certain nombre de documents HTML utilisent cette même feuille de style, vous pouvez simplement modifier la mise en page de l'ensemble des documents grâce à un seul fichier.</p>
+
+<p>Prenons l'exemple de ce code CSS et plaçons le dans un fichier <code>demo.css</code> :</p>
+
+<pre>/* demo.css */
+ body {
+     background:white;
+     color:blue;
+ }</pre>
+
+<p>Chaque fois qu'on a besoin d'appliquer ce style à un document, il suffit alors d'appeler le fichier <code>demo.css</code> grâce à la balise <code>link</code> :</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;La fameuse page « Hello World »&lt;/title&gt;
+
+    &lt;link rel="stylesheet" href="demo.css"&gt;
+
+&lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Hello world!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div class="note">
+<p>Pour en savoir plus sur la configuration des fichiers sur un serveur, vous pouvez vous reférer à la section <a href="/fr/Learn/Set_up_a_basic_working_environment">Comment configurer les éléments de base d'un site web</a>.</p>
+</div>
+
+<p>Chaque page qui appellera le fichier <code>demo.css</code> via la balise <code>link</code> bénéficiera alors des styles contenus dans le fichier CSS. Cela permet non seulement de réduire la taille des fichiers HTML, de plus le système de cache (du serveur web, des serveurs de proxies et du navigateur) sera capable de lire le fichier <code>demo.css</code> autant de fois que nécessaire alors qu'il ne sera chargé en mémoire qu'une seule fois. Les performances en seront très largement améliorées.</p>
+
+<div class="note">
+<p id="Inferior_alternative.3A_&lt;style>_.2B_.40import"><strong>Alternative imparfaite : <code>&lt;style&gt;</code> + <code>@import</code></strong></p>
+
+<p>A la place de la balise <code>&lt;link&gt;</code>, vous trouverez peut-être parfois cette syntaxe :</p>
+
+<pre>&lt;style type="text/css"&gt;
+        @import url(demo.css);
+    &lt;/style&gt;</pre>
+
+<p>C'est une autre façon d'arriver au même résultat, mais nous recommandons d'utiliser <code>&lt;link&gt;</code> pour des raisons de performance (à l'inverse d' <code>@import</code>, la balise <code>&lt;link&gt;</code> permet en effet le téléchargement en parallèle de plusieurs ressources CSS). Il y a quelques années il était courant d'utiliser <code>@import</code> dans certains cas spécifiques de manière à ce que les anciens navigateurs ne lisent pas les instructions de formatage qu'ils ne supportaient pas correctement.</p>
+</div>
+
+<h3 id="Utiliser_&lt;style>_et_&lt;link>_ensemble">Utiliser <code>&lt;style&gt;</code> et <code>&lt;link&gt;</code> ensemble</h3>
+
+<p>Les possibilités deviennent encore plus intéressantes lorsqu'on mélange les deux méthodes. Dans les paragraphes précédents, nous avons mentionné le fait que la balise <code>style</code> pouvait être utile si la mise en forme s'applique à un seul document du site.</p>
+
+<p>Dans un premier temps on appelle donc toujours le fichier <code>demo.css</code>, ainsi la page affiche un texte bleu sur un fond blanc. Mais pour des raisons spécifiques, il se trouve que pour cette page on préfère un texte rouge. On va alors coupler ces deux méthodes :</p>
+
+<ol>
+ <li>Comme d'habitude on lie en premier notre feuille de style grâce à la balise <code>link</code>.</li>
+ <li>Grâce à la cascade, chaque style s'applique l'un après l'autre.</li>
+ <li>Puis avec une balise <code>style,</code> on annule le texte bleu défini par <code>color</code> sur une seule page du site.</li>
+</ol>
+
+<p>Voici le code du fichier <code>demo.css</code> :</p>
+
+<pre>/* demo.css */
+body {
+    background:white;
+    color:blue;
+}
+</pre>
+
+<p>On comprend que tout le texte de la page doit être en bleu sur un fond blanc. Voici maintenant le document HTML :</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;La fameuse page « Hello World »&lt;/title&gt;
+    &lt;link rel="stylesheet" href="demo.css"&gt;
+
+    &lt;style type="text/css"&gt;
+        body {
+            color:red;
+        }
+    &lt;/style&gt;
+
+&lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Hello world!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>On appelle d'abord la feuille de style de façon à obtenir le fond blanc et un texte bleu. Ensuite, pour cette page seulement, on ignore le formatage du texte en bleu pour le remplacer par la couleur rouge à l'aide de la balise <code>&lt;style&gt;</code>  (<code>demo.css</code> continue néanmoins de gérer tous les autres styles).</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que vous savez comment appliquer des styles CSS à un document HTML, deux options s'offrent à vous :</p>
+
+<ul>
+ <li>Revoir <a href="/fr/Apprendre/CSS/Les_propriétés_CSS">les propriétés CSS et comment s'en servir</a>.</li>
+ <li>Perfectionner vos connaissances en design, en commençant par l'<a href="/fr/docs/Learn/What_is_accessibility">accessibilité</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/découvrir_outils_développement_navigateurs/index.html b/files/fr/apprendre/découvrir_outils_développement_navigateurs/index.html
new file mode 100644
index 0000000000..71d3585366
--- /dev/null
+++ b/files/fr/apprendre/découvrir_outils_développement_navigateurs/index.html
@@ -0,0 +1,171 @@
+---
+title: Découvrir les outils de développement des navigateurs
+slug: Apprendre/Découvrir_outils_développement_navigateurs
+tags:
+  - Beginner
+  - Browser
+  - CSS
+  - CodingScripting
+  - DevTools
+  - HTML
+  - JavaScript
+  - Learn
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div>{{Previous("Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « <em>devtools</em> »).</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser <a href="http://mdn.github.io/beginner-html-site-scripted/">l'exemple construit</a> dans la série d'articles <a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a> et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.</p>
+</div>
+
+<h2 id="Comment_ouvrir_les_outils_de_développement_d'un_navigateur">Comment ouvrir les outils de développement d'un navigateur</h2>
+
+<p>Les <em>devtools</em> s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :</p>
+
+<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 804px; margin: 0px auto; width: 1438px;"></p>
+
+<p>Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :</p>
+
+<ul>
+ <li><em><strong>Au clavier.</strong></em> <em>Ctrl + Shift + I</em>, sauf pour :
+
+  <ul>
+   <li><strong>Internet Explorer. </strong><em>F12 </em></li>
+   <li><strong>Mac OS X. </strong><em><span class="Unicode">⌘ + ⌥ + I </span></em></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>Via les menus. </strong></em></span>
+  <ul>
+   <li><strong>Firefox. </strong>Menu <span class="Unicode"><em><span class="Unicode">➤ </span></em><em><span class="Unicode">Développement ➤ Outils de développement </span></em><span class="Unicode">ou <em>Outils</em></span><em> ➤</em></span><em> Développement Web ➤ Outils de développement</em></li>
+   <li><strong>Chrome.</strong> <em>Affichage<span class="Unicode"> ➤</span> Développement ➤ Outils de développement</em></li>
+   <li><strong>Safari.</strong> <em>Développement<span class="Unicode"> ➤</span> Afficher l'inspecteur web.</em> Si vous ne pouvez pas voir le menu <em>Développement</em>, aller sous <em>Safari<span class="Unicode"> ➤</span> Préférences ➤ Avancé</em> et vérifiez que l'option <em>Afficher le menu de développement</em> est bien coché. </li>
+   <li><strong>Opera</strong>. <em><span class="Unicode">Développement ➤</span> Inspecteur web</em></li>
+  </ul>
+ </li>
+ <li><strong><em>Via un menu contextuel.</em></strong> Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez <em>Examiner l'élément</em> dans le menu qui apparait (<em>Bonus : </em>cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).</li>
+</ul>
+
+<p><img alt="Menu contextuel suite au clic-droit" src="https://mdn.mozillademos.org/files/11505/devtools.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="L'inspecteur_explorateur_du_DOM_et_éditeur_CSS">L'inspecteur : explorateur du DOM et éditeur CSS</h2>
+
+<p>Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.</p>
+
+<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p>
+
+<p>Si vous n'arrivez pas sur l'inspecteur :</p>
+
+<ul>
+ <li>Cliquez ou appuyez l'onglet <em>Inspecteur</em>.</li>
+ <li>Sous Internet Explorer, cliquez ou appuyez sur <em>Explorateur DOM</em>, ou appuyez sur Ctrl + 1.</li>
+ <li>Sous Safari, les contrôles n'apparaissent pas clairement mais vous devriez voir le code HTML si vous n'avez rien sélectionné d'autre. Pour voir le code CSS, appuyez sur le bouton <em>Style</em>.</li>
+</ul>
+
+<h3 id="Manipuler_l'inspecteur_du_DOM">Manipuler l'inspecteur du DOM</h3>
+
+<p>Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :</p>
+
+<p><img alt="Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM" src="https://mdn.mozillademos.org/files/11519/menu_contextuel.png" style="display: block; height: 284px; margin: 0px auto; width: 244px;"></p>
+
+<ul>
+ <li><strong>Supprimer le nœud</strong> (parfois <em>Supprimer l'élément</em>) : supprime l'élément sélectionné du document.</li>
+ <li><strong>Modifier comme HTML</strong> (parfois <em>Ajouter un attribut</em>/<em>Éditer le texte</em>) : permet de changer le HTML et de voir le résultat obtenu à la volée (en <em>live</em>). Cette option est très utile pour déboguer ou tester.</li>
+ <li><strong>:hover/:active/:focus</strong> : force l'état d'un élément à être actif afin de pouvoir voir ce que la mise en forme donne pour cet état.</li>
+ <li><strong>Copier/Copier comme HTML</strong> : permet de copier l'élément HTML actuellement sélectionné.</li>
+ <li>Certains navigateurs disposent également d'options comme <em>Copier le chemin CSS</em> et/ou <em>Copier le chemin XPath</em> qui permettent de copier le sélecteur CSS ou l'expression XPath qui permettrait de sélectionner l'élément HTML en cours.</li>
+</ul>
+
+<p>Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.</p>
+
+<h3 id="Manipuler_l'éditeur_CSS">Manipuler l'éditeur CSS</h3>
+
+<p>Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p>
+
+<p>Ces fonctionnalités sont plutôt pratiques :</p>
+
+<ul>
+ <li>Les règles qui s'appliquent à l'élément courant sont affichées en commençant avec les règles les plus spécifiques et en terminant avec les règles les moins spécifiques.</li>
+ <li>Il est possible de cocher les boîtes à côté de chaque déclaration pour voir l'effet qui serait obtenu si la déclaration était supprimée.</li>
+ <li>Vous pouvez cliquer sur la petite flèche à côté de chaque propriété en notation résumée pour voir les équivalents en notation détaillée.</li>
+ <li>Vous pouvez cliquer sur le nom d'une propriété ou d'une valeur pour éditer une valeur en live et immédiatement voir le changement.</li>
+ <li>À côté de chaque règle, si celle-ci est « dépliée », vous pouvez voir le nom du fichier et la ligne sur laquelle la règle est définie. En cliquant sur le lien, vous arriverez directement sur le fichier CSS que vous pourrez éditer et sauvegarder.</li>
+ <li>Vous pouvez également cliquer sur l'accolade fermant d'une règle donnée pour afficher une nouvelle zone de texte dans laquelle vous pourrez écrire une toute nouvelle déclaration.</li>
+</ul>
+
+<p>Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :</p>
+
+<ul>
+ <li><em>Calculé </em>: cet onglet affiche les styles calculés pour l'élément sélectionné (les valeurs finales, normalisées, appliquées par le navigateur).</li>
+ <li><em>Modèle de boîte </em>: cet onglet représente visuellement le modèle de boîte pour l'élément sélectionner afin de visualiser rapidement le <em>padding</em> (rembourrage), la bordure et la marge appliquée à l'élément. Il permet aussi de voir la taille du contenu.</li>
+ <li><em>Polices </em>: Dans Firefox, cet onglet affiche les polices appliquées à l'élément sélectionné.</li>
+</ul>
+
+<h3 id="En_savoir_plus">En savoir plus</h3>
+
+<p>Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :</p>
+
+<ul>
+ <li><a href="/fr/docs/Outils/Inspecteur">L'inspecteur Firefox</a></li>
+ <li><a href="https://msdn.microsoft.com/library/dn255008%28v=vs.85%29.aspx">L'explorateur de DOM d'Internet Explorer</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">L'inspecteur de DOM Chrome</a> (l'inspecteur d'Opera fonctionne de la même façon)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">L'inspecteur de DOM et l'explorateur de styles Safari</a></li>
+</ul>
+
+<h2 id="La_console_JavaScript">La console JavaScript</h2>
+
+<p>La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur <em>Ctrl + 2</em>.) Cela affichera une fenêtre qui ressemblera à :</p>
+
+<p><img alt="Console JavaScript" src="https://mdn.mozillademos.org/files/11521/console.png" style="border: 1px solid black; display: block; height: 319px; margin: 0px auto; width: 1433px;"></p>
+
+<p>Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('Coucou !');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var monImage = document.createElement('img');
+monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);</pre>
+ </li>
+</ol>
+
+<p>Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('coucou !);</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var monImage = document.createElement('img');
+maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);</pre>
+ </li>
+</ol>
+
+<p>Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !</p>
+
+<h3 id="En_savoir_plus_2">En savoir plus</h3>
+
+<p>Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :</p>
+
+<ul>
+ <li><a href="/fr/docs/Outils/Console_Web">La console web de Firefox</a></li>
+ <li><a href="https://msdn.microsoft.com/library/dn255006%28v=vs.85%29.aspx">La console JavaScript d'Internet Explorer</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">La console JavaScript de Chrome</a> (la console pour Opera fonctionnera de la même façon)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">La console de Safari</a></li>
+</ul>
diff --git a/files/fr/apprendre/fonctionnement_internet/index.html b/files/fr/apprendre/fonctionnement_internet/index.html
new file mode 100644
index 0000000000..b4f81c9acf
--- /dev/null
+++ b/files/fr/apprendre/fonctionnement_internet/index.html
@@ -0,0 +1,97 @@
+---
+title: Le fonctionnement de l'Internet
+slug: Apprendre/Fonctionnement_Internet
+tags:
+  - Beginner
+  - Internet
+  - WebMechanics
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div class="summary">
+<p>Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Aucun, mais nous vous encourageons à lire l'article <a href="/fr/Apprendre/Commencez_votre_projet_web">Commencez votre projet Web</a> avant celui-ci.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Vous apprendrez les rudiments de l'infrastructure technique du Web et vous serez en mesure de distinguer « Internet » et « Web ».</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'<strong>Internet</strong> est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.</p>
+
+<p><a href="https://fr.wikipedia.org/wiki/Internet#Historique" rel="external">L'histoire des débuts de l'Internet est quelque peu nébuleuse</a>. Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a> : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (<em>en anglais seulement</em>)</li>
+</ul>
+
+<h2 id="Allons_plus_loin">Allons plus loin</h2>
+
+<h3 id="Un_réseau_de_base">Un réseau de base</h3>
+
+<p>Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un <a href="https://fr.wikipedia.org/wiki/Ethernet" rel="external">câble Ethernet</a>), soit sans fil (par exemple, via <a href="http://fr.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> ou <a href="http://fr.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Tous ces types de connexions sont possibles sur les ordinateurs modernes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!</p>
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle <em>routeur</em>. Ce <em>routeur</em> n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.</p>
+
+<p>Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.</p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="Un_réseau_de_réseaux">Un réseau de réseaux</h3>
+
+<p>Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul <em>routeur</em> ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un <em>routeur</em> n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux <em>routeurs</em> ? Oui, absolument, et en voici le résultat!</p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.</p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé <em>modem</em>. Ce <em>modem</em> convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.</p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des <em>routeurs</em> qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).</p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Localiser_un_ordinateur">Localiser un ordinateur</h3>
+
+<p>Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie <em>Internet Protocol</em>) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : <code>192.168.2.10</code>  ou de lettres et de chiffres séparés par deux points. <code>2001:0db8:85a3:0000:0000:8a2e:0370:7334</code>.</p>
+
+<p>C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé <em>nom de domaine, </em>est souvent associé aux adresses IP. Par example, <code>google.com</code> est le nom de domaine associé à l'adresse IP <code>173.194.121.32</code>. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.</p>
+
+<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="L'Internet_et_le_web">L'Internet et le web</h3>
+
+<p>Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructre technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés <em>serveurs Web</em>) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'<em>Internet</em> est une infrastructure, alors que le <em>Web</em> est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}.</p>
+
+<h2 id="Étapes_suivantes">Étapes suivantes</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Comprendre la différence entre une page web, un site web, un serveur web et un moteur de recherche</a></li>
+ <li><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li>
+</ul>
diff --git a/files/fr/apprendre/front-end_web_developer/index.html b/files/fr/apprendre/front-end_web_developer/index.html
new file mode 100644
index 0000000000..835ba97d15
--- /dev/null
+++ b/files/fr/apprendre/front-end_web_developer/index.html
@@ -0,0 +1,189 @@
+---
+title: Développeur web front-end
+slug: Apprendre/Front-end_web_developer
+translation_of: Learn/Front-end_web_developer
+---
+<p>{{learnsidebar}}</p>
+
+<p>Bienvenue dans notre parcours d'apprentissage pour les développeurs Web front-end!</p>
+
+<p>Ici, nous vous proposons un cours structuré qui vous apprendra tout ce que vous devez savoir pour devenir un développeur Web front-end. Parcourez simplement chaque section, en apprenant de nouvelles compétences (ou en améliorant celles existantes) au fur et à mesure. Chaque section comprend des exercices et des évaluations pour tester votre compréhension avant d'aller de l'avant.</p>
+
+<h2 id="Sujets_abordés">Sujets abordés</h2>
+
+<p>Les sujets abordés sont :</p>
+
+<ul>
+ <li>Configuration de base et apprendre à apprendre</li>
+ <li>Les normes du Web et les bonnes pratiques (telles que l'accessibilité et la compatibilité entre navigateurs)</li>
+ <li>HTML, le langage qui donne la structure et le sens du contenu Web</li>
+ <li>CSS, le langage utilisé pour styliser les pages Web</li>
+ <li>JavaScript, le langage de script utilisé pour créer des fonctionnalités dynamiques sur le Web</li>
+ <li>Les outils utilisés pour faciliter le développement Web moderne côté client.</li>
+</ul>
+
+<p>Vous pouvez parcourir les sections dans l'ordre, mais chacune d'elles est également indépendante. Par exemple, si vous connaissez déjà le HTML, vous pouvez passer à la section CSS.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Vous n'avez pas besoin de connaissances préalables pour commencer ce cours. Tout ce dont vous avez besoin, c'est d'un ordinateur capable de faire fonctionner des navigateurs web modernes, d'une connexion internet et d'une volonté d'apprendre.</p>
+
+<p>Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module <a href="/en-US/docs/Learn/Getting_started_with_the_web">Commencer avec le web</a>.</p>
+
+<h2 id="Obtenir_de_laide">Obtenir de l'aide</h2>
+
+<p>Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.</p>
+
+<p>Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article <a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> avous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre <a href="https://discourse.mozilla.org/c/mdn/learn/">forum de discussion</a>.</p>
+
+<p>Allons-y. Bonne chance !</p>
+
+<h2 id="Le_parcours_dapprentissage">Le parcours d'apprentissage</h2>
+
+<h3 id="Pour_commencer">Pour commencer</h3>
+
+<p>Temps nécessaire: 1–2 heures</p>
+
+<h4 id="Prérequis_2">Prérequis</h4>
+
+<p>Rien d'autre que des connaissances de base en informatique.</p>
+
+<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose">Comment saurai-je que je suis prêt à passer à autre chose ?</h4>
+
+<p>Il n'y a pas d'évaluation dans cette partie du cours. Mais assurez-vous de ne pas sauter d'étape. Il est important de vous préparer à faire des exercices plus tard dans le cours.</p>
+
+<h4 id="Guides_fondamentaux">Guides fondamentaux</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation des logiciels de base</a> — configuration des outils de base (15 min de lecture)</li>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Contexte du web et des standards du web</a> (45 min de lecture)</li>
+ <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> (45 min de lecture)</li>
+</ul>
+
+<h3 id="Sémantique_et_structure_avec_HTML">Sémantique et structure avec HTML</h3>
+
+<p>Temps nécessaire: 35–50 heures</p>
+
+<h4 id="Prérequis_3">Prérequis</h4>
+
+<p>Rien d'autre que des connaissances informatiques de base, et un environnement de développement web de base.</p>
+
+<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_2">Comment saurai-je que je suis prêt à passer à autre chose ?</h4>
+
+<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p>
+
+<h4 id="Guides_fondamentaux_2">Guides fondamentaux</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> (15–20 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimédia et intégration</a> (15–20 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables">Tableaux HTML</a> (5–10 heures de lecture/exercices)</li>
+</ul>
+
+<h3 id="Design_et_mise_en_page_avec_le_CSS">Design et mise en page avec le CSS</h3>
+
+<p>Temps nécessaire: 90–120 heures</p>
+
+<h4 id="Prérequis_4">Prérequis</h4>
+
+<p>Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">l'introduction au HTML</a> d'abord.</p>
+
+<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_3">Comment saurai-je que je suis prêt à passer à autre chose ?</h4>
+
+<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p>
+
+<h4 id="Guides_fondamentaux_3">Guides fondamentaux</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> (10–15 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks">Les élements de base du CSS</a> (35–45 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text">Mise en forme du texte</a> (15–20 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout">Mise en page CSS</a> (30–40 heures de lecture/exercices)</li>
+</ul>
+
+<h4 id="Ressources_complémentaires">Ressources complémentaires</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li>
+</ul>
+
+<h3 id="Interactivité_avec_JavaScript">Interactivité avec JavaScript</h3>
+
+<p>Temps nécessaire: 135–185 heures</p>
+
+<h4 id="Prérequis_5">Prérequis</h4>
+
+<p>l est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> d'abord.</p>
+
+<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_4">Comment saurai-je que je suis prêt à passer à autre chose ?</h4>
+
+<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p>
+
+<h4 id="Guides_fondamentaux_4">Guides fondamentaux</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas avec JavaScript</a> (30–40 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Les éléments de base de JavaScript</a> (25–35 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">API web côté client</a> (30–40 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a> (25–35 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">JavaScript asynchrone</a> (25–35 heures de lecture/exercices)</li>
+</ul>
+
+<h3 id="Formulaires_web_-_Travailler_avec_les_données_des_utilisateurs">Formulaires web - Travailler avec les données des utilisateurs</h3>
+
+<p>Temps nécessaire: 40–50 heures</p>
+
+<h4 id="Prérequis_6">Prérequis</h4>
+
+<p>Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étant donné la complexité du travail avec les formulaires, il s'agit d'un sujet spécifique.</p>
+
+<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_5">Comment saurai-je que je suis prêt à passer à autre chose ?</h4>
+
+<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.</p>
+
+<h4 id="Guides_fondamentaux_5">Guides fondamentaux</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms">Fomulaires web</a> (40–50 heures)</li>
+</ul>
+
+<h3 id="Faire_profiter_le_Web_à_tout_le_monde">Faire profiter le Web à tout le monde</h3>
+
+<p>Temps nécessaire: 60–75 heures</p>
+
+<h4 id="Prérequis_7">Prérequis</h4>
+
+<p>Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section. De nombreuses techniques et meilleures pratiques concernent de multiples technologies.</p>
+
+<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_6">Comment saurai-je que je suis prêt à passer à autre chose ?</h4>
+
+<p>Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..</p>
+
+<h4 id="Guides_fondamentaux_6">Guides fondamentaux</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests multi-navigateurs</a> (25–30 heures de lecture/exercices)</li>
+ <li><a href="/en-US/docs/Learn/Accessibility">Accessibilité</a> (20–25 heures de lecture/exercices)</li>
+</ul>
+
+<h3 id="Outils_modernes">Outils modernes</h3>
+
+<p>Temps nécessaire: 55–90 heures</p>
+
+<h4 id="Prérequis_8">Prérequis</h4>
+
+<p>Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section, car les outils abordés fonctionnent en parallèle avec bon nombre de ces technologies.</p>
+
+<h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_7">Comment saurai-je que je suis prêt à passer à autre chose ?</h4>
+
+<p>Il n'y a pas d'articles d'évaluation spécifiques dans cet ensemble de modules. Les études de cas à la fin des deuxième et troisième modules vous préparent à saisir l'essentiel des outils modernes.</p>
+
+<h4 id="Guides_fondamentaux_7">Guides fondamentaux</h4>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git et GitHub</a> (5 heures de lecture)</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Comprendre les outils de développement web côté client</a> (20–25 heures de lecture)</li>
+ <li>
+  <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendre les frameworks JavaScript côté client</a> (30-60 heures de lecture/exercices)</p>
+ </li>
+</ul>
diff --git a/files/fr/apprendre/html/balises_html/index.html b/files/fr/apprendre/html/balises_html/index.html
new file mode 100644
index 0000000000..5a9d76db6a
--- /dev/null
+++ b/files/fr/apprendre/html/balises_html/index.html
@@ -0,0 +1,257 @@
+---
+title: Les balises HTML et leur rôle
+slug: Apprendre/HTML/Balises_HTML
+tags:
+  - Beginner
+  - CodingScripting
+  - HTML
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div class="summary">
+<p>Cet article aborde les bases de {{Glossary("HTML")}} : les balises et comment les utiliser.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">la différence entre une page web et un site web</a> et <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">savoir comment créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre ce que sont les balises HTML et comment les utiliser correctement dans un document HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Glossary("HTML")}} (<em>HyperText Markup Language</em>) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).</p>
+
+<p>Un document HTML est un fichier texte qui contient des {{glossary("balise","balises")}} (ou <em>tag</em> en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.</p>
+
+<p>Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur <em>analyse</em> (ou <em>parse</em> en anglais) le document et l'<em>interprète</em> afin d'afficher la page web correctement. Par exemple, si le document contient une balise {{HTMLElement("img")}}, le navigateur chargera l'image associée et affichera l'image <em>à la place</em> de la balise HTML.</p>
+
+<h3 id="La_syntaxe_des_balises">La syntaxe des balises</h3>
+
+<p>Les balises HTML respectent une syntaxe simple et stricte :</p>
+
+<ul>
+ <li><strong>Un chevron ouvrant (&lt;)</strong></li>
+ <li><strong>Le nom de la balise</strong></li>
+ <li><strong>Des attributs </strong>(optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").</li>
+ <li><strong>Un chevron fermant (&gt;)</strong></li>
+</ul>
+
+<p>Voici quelques exemples :</p>
+
+<ul>
+ <li><code>&lt;article&gt;</code></li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code></li>
+ <li><code>&lt;img src="monImage.png" alt=""&gt;</code></li>
+</ul>
+
+<h3 id="Les_éléments_HTML">Les éléments HTML</h3>
+
+<p>Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante <em>doit</em> avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <code>&lt;p&gt;</code> est une balise ouvrante, <code>&lt;/p&gt;</code> sera la balise fermante correspondante.</p>
+
+<p>Un <strong>élément HTML</strong> se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :</p>
+
+<p><img alt="The basic syntax of HTML tags" src="https://mdn.mozillademos.org/files/8573/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>
+
+<p>La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Voici le début du paragraphe
+    &lt;strong&gt;
+      ici un texte important au sein du paragraphe
+    &lt;/strong&gt;
+  et là, la fin du paragraphe.
+&lt;/p&gt;
+</pre>
+
+<div class="note">
+<p><strong>Bonne pratique :</strong> Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments.</p>
+</div>
+
+<h3 id="Les_balises_HTML">Les balises HTML</h3>
+
+<p>HTML contient environ <a href="/fr/docs/Web/HTML/Element">140 balises</a> qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.</p>
+
+<p>Voici quelques-unes des balises les plus fréquemment utilisées :</p>
+
+<dl>
+ <dt>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</dt>
+ <dd>Ces balises permetttent de définir des titres de différents niveaux : <code>h1</code> pour les grands titres et <code>h6</code> pour les titres des sections très spécifiques.</dd>
+ <dt>{{HTMLElement("p")}}</dt>
+ <dd>La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.</dd>
+ <dt>{{HTMLElement("a")}}</dt>
+ <dd>Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc. Les balises {{HTMLElement("a")}} contiennent le texte qui sera utilisé pour le lien, l'attribut {{htmlattrxref("href","a")}} de cet élément est utilisé pour définir l'{{glossary("URL")}} cible : <code>&lt;a href="url_cible"&gt;du texte qui sera lu par l'utilisateur&lt;/a&gt;</code>.</dd>
+ <dt>{{HTMLElement("img")}}</dt>
+ <dd>Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple d'utilisation : <code>&lt;img src="url/vers/mon/image.png" alt="Une description"&gt;</code></dd>
+</dl>
+
+<dl>
+ <dt>{{HTMLElement("div")}} et {{HTMLElement("span")}}</dt>
+ <dd>Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).</dd>
+ <dt>{{HTMLElement("ul")}}, {{HTMLElement("ol")}} et {{HTMLElement("li")}}</dt>
+ <dd>Ces balises sont utilisées pour créer des listes. <code>&lt;ul&gt;</code> permet de définir une liste non-ordonnée et <code>&lt;ol&gt;</code> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise  <code>&lt;li&gt;</code> qui permettra de définir un élément de la liste. Voici un exemple avec <code>&lt;ul&gt;</code> :</dd>
+</dl>
+
+<pre class="brush: html"> &lt;ul&gt;
+  &lt;li&gt;Café&lt;/li&gt;
+  &lt;li&gt;Thé&lt;/li&gt;
+  &lt;li&gt;Lait&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec <a href="/fr/docs/Web/HTML/Element">n'importe quelle balise HTML</a>. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Cet article ne contient pas encore de matériau interactif. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions.</p>
+
+<h3 id="Les_balises_«_auto-fermantes_»_(ou_balises_vides)">Les balises « auto-fermantes » (ou balises vides)</h3>
+
+<p>Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est {{HTMLElement("img")}}. Le navigateur remplace la balise <code>&lt;img&gt;</code> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <code>&lt;img&gt;</code> n'a pas de balise fermante.</p>
+
+<pre class="brush: html">Here some text before an image element
+  &lt;img src="myImage.png" alt=""&gt;
+Here some text after an image element
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires.</p>
+</div>
+
+<h3 id="Les_éléments_spéciaux">Les éléments spéciaux</h3>
+
+<p>En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML.</p>
+
+<h4 id="Le_doctype">Le <em>doctype</em></h4>
+
+<p>Le <em>doctype</em> (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;</pre>
+
+<p>Si vous ne commencez pas votre document par <code>&lt;!DOCTYPE html&gt;</code>, les navigateurs afficheront votre document en <a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p>
+
+<h4 id="Les_commentaires">Les commentaires</h4>
+
+<p>Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).</p>
+
+<p>En HTML, les commentaires sont écrits avec du texte contenu entre <code>&lt;!--</code> et <code>--&gt;</code></p>
+
+<pre class="brush: html">&lt;!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur.--&gt;
+
+Ce texte s'affichera dans le navigateur.
+</pre>
+
+<h3 id="Structure_d'un_document_HTML">Structure d'un document HTML</h3>
+
+<p>La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément {{HTMLElement("title")}} ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).</p>
+
+<dl>
+ <dt>{{HTMLElement("html")}}</dt>
+ <dd>Cet élément définit la <em>racine</em> du document. Chaque document HTML ne contient qu'une <em>racine</em>. Tous les autres éléments doivent être placés dans cet élément.</dd>
+ <dt>{{HTMLElement("head")}}</dt>
+ <dd>Cet élément définit la <em>tête</em> du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives. Les navigateurs pourront utiliser ces méta-données pour améliorer l'ergonomie de la page (nous le verrons par la suite).</dd>
+ <dt>{{HTMLElement("body")}}</dt>
+ <dd>Cet élément définit le <em>corps</em> du document. Il n'y a qu'un seul élément <code>body</code> dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.</dd>
+ <dt>{{HTMLElement("title")}}</dt>
+ <dd>Cet élément définit le <em>titre</em> d'un document. Le <em>titre</em> est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).</dd>
+</dl>
+
+<h4 id="Formel_ou_valide">Formel ou valide ?</h4>
+
+<p>Voici le document HTML formel le plus simple qu'on puisse écrire :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Un document HTML formel&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;!-- Du contenu pour l'utilisateur ici --&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Si on retire les différentes balises optionnelles, on obtient alors le document HTML <em>valide</em> le plus simple qui puisse être écrit :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;title&gt;Et voilà un tout petit document HTML&lt;/title&gt;
+</pre>
+
+<div class="note">
+<p><strong>Bonne pratique :</strong> Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de <code>&lt;head&gt;</code> du contenu de <code>&lt;body&gt;</code>, il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur.</p>
+</div>
+
+<h3 id="Les_éléments_qui_se_chevauchent">Les éléments qui se chevauchent</h3>
+
+<p>Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être <em>imbriqués</em> mais ne peuvent pas se <em>chevaucher.</em></p>
+
+<p>Comment faire se chevaucher des éléments ? Voici un exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  le début de mon paragraphe
+    &lt;strong&gt;
+      du texte important
+&lt;/p&gt;
+&lt;p&gt;
+      un deuxième paragraphe
+    &lt;/strong&gt;
+   et l'élément strong a été bouclé
+   juste avant
+&lt;/p&gt;
+</pre>
+
+<p>Dans l'exemple ci-dessus, l'élément <code>strong</code> chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  mon paragraphe commence ici
+    &lt;strong&gt;
+      du texte important
+    &lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;
+    &lt;strong&gt;
+      un deuxième paragraphe
+    &lt;/strong&gt;
+  dont le début était important aussi
+&lt;/p&gt;
+</pre>
+
+<p>Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec {{Glossary("CSS")}} ou {{Glossary("JavaScript")}} que nous verrons bientôt). Par exemple, si nous avions utilisé une balise {{HTMLElement("div")}} à la place des balises {{HTMLElement("p")}} et {{HTMLElement("strong")}} :</p>
+
+<pre class="brush: html">&lt;div&gt;
+  le début de mon paragraphe
+    &lt;div&gt;
+      du texte important
+    &lt;/div&gt;
+    &lt;div&gt;
+      un deuxième paragraphe
+    &lt;/div&gt;
+  la fin du paragraphe
+&lt;/div&gt;
+</pre>
+
+<p>Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments <code>div</code> ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML.</p>
+
+<h3 id="Vérifier_le_code_HTML">Vérifier le code HTML</h3>
+
+<p>Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est <a href="http://validator.w3.org/" rel="external">le validateur HTML du W3C</a>. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes.</p>
+</div>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.</p>
+
+<ul>
+ <li>Pour que cette page soit (plus) belle, vous pouvez lire <a href="/en-US/docs/Learn/CSS/CSS_properties">l'article sur les propriétés CSS et comment les utiliser</a>.</li>
+ <li>Pour savoir comment publier votre page web, vous pouvez lire <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">comment transférer ses fichiers vers un serveur web</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/html/cheatsheet/index.html b/files/fr/apprendre/html/cheatsheet/index.html
new file mode 100644
index 0000000000..4f07dbb7b6
--- /dev/null
+++ b/files/fr/apprendre/html/cheatsheet/index.html
@@ -0,0 +1,186 @@
+---
+title: Cheatsheet HTML
+slug: Apprendre/HTML/Cheatsheet
+tags:
+  - Cheatsheet
+  - HTML
+  - Intermediate
+  - Learn
+translation_of: Learn/HTML/Cheatsheet
+---
+<div>{{draft}}</div>
+
+<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>
+</div>
+
+<h2 id="Mise_en_forme_inline">Mise en forme <em>inline</em></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>
+
+<table class="nostripe standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Utilisation</th>
+   <th scope="col">Fragment de code</th>
+   <th scope="col">Résultat</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Un lien simple</td>
+   <td style="vertical-align: top;"><code>&lt;a href="https://developer.mozilla.org"&gt;Un lien vers MDN&lt;/a&gt;</code></td>
+   <td style="vertical-align: top;"><a href="https://developer.mozilla.org">Un lien vers MDN</a></td>
+  </tr>
+  <tr>
+   <td>Une image simple</td>
+   <td><code>&lt;img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" /&gt;</code></td>
+   <td><img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png"></td>
+  </tr>
+  <tr>
+   <td>Un texte avec emphase</td>
+   <td><code>&lt;em&gt;Je suis distingué&lt;/em&gt;</code></td>
+   <td><em>Je suis distingué</em></td>
+  </tr>
+  <tr>
+   <td>Un texte marqué comme important</td>
+   <td><code>&lt;strong&gt;Je suis important&lt;/strong&gt;</code></td>
+   <td><strong>Je suis important</strong></td>
+  </tr>
+  <tr>
+   <td>Un texte mis en avant</td>
+   <td><code>&lt;mark&gt;Remarquez-moi&lt;/mark&gt;</code></td>
+   <td><mark>Remarquez-moi</mark></td>
+  </tr>
+  <tr>
+   <td>Barrer du texte qui n'est plus pertinent</td>
+   <td><code>&lt;s&gt;Je ne suis plus d'actualité ou plus pertinent&lt;/s&gt;</code></td>
+   <td><s>Je ne suis plus d'actualité ou plus pertinent</s></td>
+  </tr>
+  <tr>
+   <td>Souligner pour ajouter une annotation non-textuelle</td>
+   <td><code>Ceci est &lt;u&gt;mal orthographié&lt;/u&gt;</code></td>
+   <td>Ceci est <u>mal orthographié</u></td>
+  </tr>
+  <tr>
+   <td>Du texte qui doit être affiché en indice</td>
+   <td><code>H&lt;sub&gt;2&lt;/sub&gt;O</code></td>
+   <td>H<sub>2</sub>O</td>
+  </tr>
+  <tr>
+   <td>Du texte qui doit être affiché en exposant</td>
+   <td><code>M&lt;sup&gt;me&lt;/sup&gt; de Bovary</code></td>
+   <td>M<sup>me</sup> de Bovary</td>
+  </tr>
+  <tr>
+   <td>Une citation dans le cours du texte</td>
+   <td><code>Il a dit : &lt;q&gt;Je suis ton père.&lt;/q&gt;</code></td>
+   <td>Il a dit : <q>Je suis ton père.</q></td>
+  </tr>
+  <tr>
+   <td>Un saut de ligne</td>
+   <td><code>Ligne 1 &lt;br/&gt; Ligne 2</code></td>
+   <td>Ligne 1<br>
+    Ligne 2</td>
+  </tr>
+  <tr>
+   <td>Du code informatique (code « machine »)</td>
+   <td><code>&lt;code&gt;System.print.File("coucou")&lt;/code&gt;</code></td>
+   <td><code>System.print.File("coucou")</code></td>
+  </tr>
+  <tr>
+   <td>Un fichier audio intégré</td>
+   <td><code>&lt;audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3"&gt;L'élément &lt;code&gt;audio&lt;/code&gt; n'est pas supporté.&lt;/audio&gt;</code></td>
+   <td>
+    <audio>L'élément <code>audio</code> n'est pas supporté.</audio>
+   </td>
+  </tr>
+  <tr>
+   <td>Un fichier vidéo intégré</td>
+   <td><code>&lt;video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"&gt;L'élément &lt;code&gt;video&lt;/code&gt; n'est pas supporté.&lt;/video&gt;</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>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mise_en_forme_block">Mise en forme <em>block</em></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>
+
+<table class="nostripe standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Utilisation</th>
+   <th scope="col">Fragment de code</th>
+   <th scope="col">Résultat</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Un paragraphe simple</td>
+   <td style="vertical-align: top;">
+    <p><code>&lt;p&gt;Je suis un paragraphe&lt;/p&gt;</code><br>
+     <code>&lt;p&gt;Je suis un autre paragraphe&lt;/p&gt; </code></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p>Je suis un paragraphe</p>
+
+    <p>Je suis un autre paragraphe</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Une liste non-ordonnée</td>
+   <td style="vertical-align: top;"><code>&lt;ul&gt;<br>
+      &lt;li&gt;Je suis un élément&lt;/li&gt;<br>
+      &lt;li&gt;Je suis un autre élément&lt;/li&gt;<br>
+    &lt;ul&gt;</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>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Une liste ordonnée</td>
+   <td style="vertical-align: top;"><code>&lt;ol&gt;<br>
+      &lt;li&gt;Je suis le premier élément&lt;/li&gt;<br>
+      &lt;li&gt;Je suis le deuxième élément&lt;/li&gt;<br>
+    &lt;ol&gt;</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>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Une ligne horizontale</td>
+   <td style="vertical-align: top;"><code>&lt;hr/&gt;</code></td>
+   <td style="vertical-align: top;">
+    <hr></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>&lt;h2&gt;Un titre de niveau 2&lt;/h2&gt;<br>
+     &lt;h3&gt;Un titre de niveau 3&lt;/h3&gt;<br>
+     &lt;h4&gt;Un titre de niveau 4&lt;/h4&gt;<br>
+     &lt;h5&gt;Un titre de niveau 5&lt;/h5&gt;</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>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html b/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html
new file mode 100644
index 0000000000..a62b555b7d
--- /dev/null
+++ b/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html
@@ -0,0 +1,142 @@
+---
+title: Afficher du code informatique avec HTML
+slug: Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+translation_of: >-
+  Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code
+---
+<div class="summary">
+<p>HTML offre différents éléments pour écrire de la documentation technique. Dans cet article, nous aborderons les éléments HTML qui portent sur la représentation de code informatique.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment utiliser HTML afin de représenter des entrées saisies par un utilisateur, des sorties produites par un système, du code, du texte simple et des variables.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_et_l'informatique">HTML et l'informatique</h2>
+
+<p>{{glossary("HTML")}} a été conçu par des informaticiens et il sert donc particulièrement bien ce domaine. De nombreux éléments HTML sont apparus et/ou ont disparu au cours des années. Ici, nous n'aborderons que ceux qui sont en vigueur actuellement :</p>
+
+<ul>
+ <li>{{HTMLElement('code')}}</li>
+ <li>{{HTMLElement('kbd')}}</li>
+ <li>{{HTMLElement('pre')}}</li>
+ <li>{{HTMLElement('samp')}}</li>
+ <li>{{HTMLElement('var')}}.</li>
+</ul>
+
+<h2 id="Le_texte_préformaté">Le texte préformaté</h2>
+
+<p>Dans un éditeur de texte, la mise en forme s'applique simplement. Il suffit d'utiliser les caractères du clavier, d'appuyer sur la barre d'espace pour indiquer un espace, d'utiliser la touche Entrée pour passer à la ligne, etc. Normalement, chaque lettre a la même largeur et tout est donc bien aligné. Étant donné que ce qui est écrit est écrit avec du texte <em>simple</em> (<em>plain text</em> en anglais), nul besoin de se préoccuper de la couleur du texte, de sa taille de police, de l'italique, etc.</p>
+
+<p>Un navigateur graphique formate le texte en fonction du code HTML et CSS. Cela fait que beaucoup de blancs (les espaces, les tabulations, les sauts de lignes) sont ignorés. Si vous appuyez sur Entrée lorsque vous tapez du code HTML, le navigateur déduira que vous souhaitez bien aligner votre code HTML. En revanche, pour indiquer clairement qu'on souhaite avoir un nouveau paragraphe, il faudra utiliser le bon élément HTML (en l'occurence {{htmlelement("p")}}).</p>
+
+<p>Généralement lorsqu'on écrit un article qui porte sur l'informatique, on veut afficher, dans le navigateur, du texte, tel qu'il serait lorsqu'on le saisit dans un éditeur de texte. Pour ce faire, on utilisera l'élément {{htmlelement("pre")}}. Par défaut, un navigateur graphique affichera le texte contenu dans cet élément avec une police dont tous les caractères ont la même largeur (<em>monospace</em>). Toutefois, vous pourrez adapter la mise en forme à votre gré grâce à {{glossary("CSS")}}. Par exemple, lorsque vous lisez des exemples de code sur MDN, nous utilisons l'élément {{htmlelement("pre")}} (auquel on ajoute quelques couleurs CSS pour améliorer la lisibilité).</p>
+
+<p>On notera qu'on ne peut toujours pas utiliser les caractères réservés (<code>&lt;&gt;&amp;</code>), par exemple :</p>
+
+<pre class="brush: html">&lt;pre&gt;
+Un éditeur de texte est pratique car il suffit
+d'appuyer sur Entrée pour commencer un nouveau
+paragraphe, plutôt que d'avoir à utiliser ces
+grossières balises &amp;lt;p&amp;gt; et &amp;lt;/p&amp;gt;.
+&lt;/pre&gt;</pre>
+
+<p>Cela donnera le résultat suivant :</p>
+
+<p>{{EmbedLiveSample('Le_texte_préformaté','100%',90)}}</p>
+
+<div class="note">
+<p>Par défaut, votre éditeur de texte laissera les lignes s'allonger jusqu'à éventuellement dépasser de l'écran. Le retour à la ligne automatique peut toutefois être activé dans la plupart des éditeurs pour garder un œil sur tout le contenu.</p>
+
+<p>On aura la même chose avec <code>&lt;pre&gt;</code>. Il existe une propriété CSS intitulée {{cssxref("white-space")}} dont la valeur par défaut est <code>nowrap</code>. Si on veut que le retour à la ligne soit automatique, on utilisera la valeur <code>pre-wrap</code>.</p>
+</div>
+
+<h2 id="Retranscrire_du_code">Retranscrire du code</h2>
+
+<p>Naturellement, tout le texte préformaté n'est pass du code informatique. Lorsque vous mentionnez du code informatique dans votre document, vous devriez utiliser l'élément  {{HTMLElement('code')}} :</p>
+
+<pre class="brush: html">Un des mots-clés les plus importants est &lt;code&gt;this&lt;/code&gt;.
+</pre>
+
+<p>Pour indiquer un bloc de code qui s'étend sur plusieurs lignes, vous pouvez imbriquer un élément {{HTMLElement('code')}} dans un élément {{HTMLElement('pre')}}. Certains script tiers tels que la bibliothèque <a href="https://highlightjs.org">highlight.js</a> utiliseront ces balises pour ajouter de la coloration syntaxique à vos exemples de code :</p>
+
+<pre class="brush: html">&lt;pre&gt;&lt;code class="js"&gt;
+function coucou() {
+  console.log('coucou monde !');
+}
+&lt;/code&gt;&lt;/pre&gt;</pre>
+
+<h2 id="Retranscrire_des_entréessorties_(IO)">Retranscrire des entrées/sorties (I/O)</h2>
+
+<p><em>Les entrées </em>sont les informations qui sont saisies, généralement par les utilisateurs, dans un ordinateur. L'ordinateur traite ces données et renvoie une <em>sortie.</em> On utilise parfois les termes anglais respectifs <em>input</em> et <em>output</em>, voire un acronyme pour désigner l'ensemble : I/O.</p>
+
+<h3 id="Comment_retranscrire_une_sortie_informatique">Comment retranscrire une sortie informatique</h3>
+
+<p>L'élément {{HTMLElement('samp')}} indique que l'ordinateur produit un texte :</p>
+
+<pre class="brush: html">Ensuite, vous verrez affiché &lt;samp&gt;thomas@mon-ordinateur:~$&lt;/samp&gt;.
+</pre>
+
+<h3 id="Comment_retranscrire_une_entrée_informatique">Comment retranscrire une entrée informatique</h3>
+
+<p>L'élément {{htmlelement('kbd')}} était initialement utilisé pour représenter une entrée saisie au clavier (<code>kbd</code> étant pour <em>keyboard</em> qui signifie clavier en anglais). Cependant, aujourd'hui, cet élément peut être utilisé pour représenter d'autres types d'entrées (comme les commandes vocales).</p>
+
+<p>L'élément {{htmlelement("kbd")}} permet de marquer l'entrée attendue :</p>
+
+<pre class="brush: html">Saisissez &lt;kbd&gt;ls --color&lt;/kbd&gt; sur l'invite du terminal.
+</pre>
+
+<p>Pour indiquer une touche donnée ou une sous-commande particulière, vous pouvez imbriquer {{htmlelement("kbd")}} avec lui-même :</p>
+
+<pre class="brush: html">Appuyez sur &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;C&lt;/kbd&gt;&lt;/kbd&gt; pour arrêter le processus.
+</pre>
+
+<p>Dans cet exemple, le premier élément <code>&lt;kbd&gt;</code> indique la commande entière alors que les éléments imbriqués indiquent les touches à utiliser.</p>
+
+<h3 id="Assembler_le_tout">Assembler le tout</h3>
+
+<p>Il arrive souvent de combiner <code>&lt;samp&gt;</code> et <code>&lt;kbd&gt;</code>. Par exemple, lorsque l'ordinateur indique des options à l'utilisateur, on pourra imbriquer des éléments <code>&lt;samp&gt;</code> dans des éléments <code>&lt;kbd&gt;</code> :</p>
+
+<pre class="brush: html"><code>Ensuite, choisissez &lt;kbd&gt;&lt;samp&gt;Oui&lt;/samp&gt;&lt;/kbd&gt; ou &lt;kbd&gt;&lt;samp&gt;Non&lt;/samp&gt;&lt;/kbd&gt;</code></pre>
+
+<p>Inversement, quand l'ordinateur indique quoi faire, on pourra imbrique des éléments <code>&lt;kbd&gt;</code> dans des éléments <code>&lt;samp&gt;</code>:</p>
+
+<pre class="brush: html"><code>Attendez que l'invite indique, &lt;samp&gt;Appuyez sur &lt;kbd&gt;Entrée&lt;/kbd&gt; pour continuer.&lt;/samp&gt;</code></pre>
+
+<p>Selon <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">la spécification HTML</a>, il n'est pas nécessaire de jouer profondément sur l'imbrication de ces éléments. L'aspect le plus important de transmettre les informations avec leur sens.</p>
+
+<h2 id="Les_variables_de_programmes_ou_les_variables_mathématiques">Les variables de programmes ou les variables mathématiques</h2>
+
+<p>Dans ce cas, on utilisera l'élément {{htmlelement("var")}}. Les variables peuvent être annotées dans le texte principal mais pas dans les fragments de code.</p>
+
+<pre class="brush: html">Cette fonction utilisera deux paramètres,
+&lt;var&gt;x&lt;/var&gt; et &lt;var&gt;y&lt;/var&gt;.
+</pre>
+
+<div class="note">
+<p>L'élément {{htmlelement("var")}} permet d'écrire des variables pour des formules simples. En revanche, pour les formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> sera beaucoup plus riche et adapté.</p>
+</div>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("code")}}</li>
+ <li>{{htmlelement("kbd")}}</li>
+ <li>{{htmlelement("pre")}}</li>
+ <li>{{htmlelement("samp")}}</li>
+ <li>{{htmlelement("var")}}</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html b/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html
new file mode 100644
index 0000000000..836cd29e95
--- /dev/null
+++ b/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html
@@ -0,0 +1,126 @@
+---
+title: Ajouter une carte de zones cliquables sur une image
+slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image
+tags:
+  - Guide
+  - HTML
+  - Intermediate
+  - Navigation
+translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
+---
+<div class="summary">
+<p>Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir comment <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">créer un document HTML simple</a> et connaître comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">ajouter des images accessibles à une page web.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="warning">
+<p>Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.</p>
+</div>
+
+<h2 id="Les_cartes_imagées_cliquables_et_leurs_inconvénients">Les cartes imagées cliquables et leurs inconvénients</h2>
+
+<p>Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « <em>hotspots</em> » en anglais) qui pointent chacunes vers une ressource distincte.</p>
+
+<p>Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.</p>
+
+<p><a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien">Les liens textuels</a> (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.</p>
+
+<h2 id="Comment_insérer_une_carte_imagée">Comment insérer une carte imagée</h2>
+
+<h3 id="Étape_1_l'image">Étape 1 : l'image</h3>
+
+<p>N'importe quelle image ne fera pas l'affaire pour construire une telle carte.</p>
+
+<ul>
+ <li>L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut <code>alt</code> est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas).</li>
+ <li>L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions.</li>
+ <li>Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">Une image de 72 pixels CSS de long et de large</a> est un minimum acceptable (pour voir le problème posé par de trop petites régions : <a href="http://www.goethe-verlag.com/book2/">50languages.com</a>, où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué</li>
+</ul>
+
+<p>On insère une image <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">de la même façon que d'habitude</a> (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, <code>alt</code> peut être laissé vide : <code>alt=""</code>, si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.</p>
+
+<p>Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut <code>usemap</code> :</p>
+
+<pre class="brush: html">&lt;img
+  src="image-map.png"
+  alt=""
+  usemap="#exemple-map-1" /&gt;
+</pre>
+
+<h3 id="Étape_2_Activer_les_régions_actives">Étape 2 : Activer les régions actives</h3>
+
+<p>Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut <code>usemap</code> vue juste avant :</p>
+
+<pre class="brush: html">&lt;map name="exemple-map-1"&gt;
+
+&lt;/map&gt;
+</pre>
+
+<p>Dans cet élément <code>&lt;map&gt;</code>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.</p>
+
+<p>Les éléments <code>&lt;area&gt;</code> sont des éléments vides mais qui utilisent quatres attributs :</p>
+
+<dl>
+ <dt>{{htmlattrxref('shape','area')}}</dt>
+ <dt>{{htmlattrxref('coords','area')}}</dt>
+ <dd>
+ <p><code>shape</code> (« forme » en anglais) prend l'une de ces quatre valeurs : <code>circle</code> (pour un cercle), <code>rect</code> (pour un rectangle), <code>poly</code> (pour un polygone) ou <code>default</code> (une zone <code>default</code> occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans <code>coords</code>.</p>
+
+ <ul>
+  <li>Pour un cercle (<code>circle</code>) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.</li>
+  <li>Pour un rectange (<code>rect</code>) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.</li>
+  <li>Pour un polygone (<code>poly</code>) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).</li>
+ </ul>
+
+ <p>Les coordonnées exprimées sont données en pixels CSS.</p>
+
+ <p>Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.</p>
+ </dd>
+ <dt>{{htmlattrxref('href','area')}}</dt>
+ <dd>Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.</dd>
+ <dt>{{htmlattrxref('alt','area')}}</dt>
+ <dd>
+ <p>Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte <code>alt</code> ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir <a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien#Écrire_des_liens_accessibles">nos conseils pour écrire des hyperliens accessibles.</a></p>
+
+ <p>Vous pouvez écrire <code>alt=""</code> si l'attribut <code>href</code> est vide <em>et</em> que l'image entière possède déjà un attribut <code>alt</code> renseigné.</p>
+ </dd>
+</dl>
+
+<pre class="brush: html">&lt;map name="exemple-map-1"&gt;
+  &lt;area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="exemple de cercle" /&gt;
+
+  &lt;area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="exemple de rectangle" /&gt;
+
+&lt;/map&gt;</pre>
+
+<h3 id="Étape_3_S'assurer_que_la_carte_fonctionne_pour_chacun">Étape 3 : S'assurer que la carte fonctionne pour chacun</h3>
+
+<p>Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.</p>
+
+<p>Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.</p>
+
+<p>Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder <a href="https://github.com/stowball/jQuery-rwdImageMaps">ce plugin jQuery réalisé par Matt Stow.</a> Dudley Storey illustre une méthode qui consiste à <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">utiliser SVG pour réaliser un effet de carte imagée</a> ainsi qu'une bidouille pour les images matricielles avec <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">une combinaison de SVG</a>.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("map")}}</li>
+ <li>{{htmlelement("area")}}</li>
+ <li><a href="http://www.maschek.hu/imagemap/imgmap">Un éditeur de carte de zones en ligne (en anglais)</a></li>
+ <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Des conseils sur comment gérer les cartes pour des clients mail (en anglais)</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html
new file mode 100644
index 0000000000..37f63b165e
--- /dev/null
+++ b/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html
@@ -0,0 +1,133 @@
+---
+title: Ajouter des citations sur une page web
+slug: Apprendre/HTML/Comment/Ajouter_citations_sur_page_web
+tags:
+  - Beginner
+  - Guide
+  - HTML
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations
+---
+<div class="summary">
+<p>Cet article illustre comment citer quelqu'un de façon précise et en fournissant la source de la citation.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment intégrer des citations et leurs sources.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu {{Glossary('HTML')}}, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.</p>
+
+<p>HTML permet de gérer trois scénarios liés aux citations :</p>
+
+<ul>
+ <li>fournir un extrait complet d'un document tiers</li>
+ <li>citer une seule phrase ou un seul terme</li>
+ <li>faire référence à un document tiers</li>
+</ul>
+
+<h2 id="Comment_rapporter_exactement_les_mots_d'une_personne">Comment rapporter exactement les mots d'une personne</h2>
+
+<h3 id="Citation_en_ligne">Citation en ligne</h3>
+
+<p>HTML fournit l'élément {{htmlelement("q")}} qui permet de créer des citations en ligne. Cela signifie qu'il s'agit de citations suffisamment courtes pour qu'elles puissent être placées dans le cours du texte.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Si vous lisez Cicéron dans la version latine, vous trouverez
+  un passage connu&amp;nbsp;: &lt;q lang="la"&gt;qui dolorem ipsum quia
+  dolor sit amet consectetur adipisci velit.&lt;/q&gt;
+&lt;/p&gt;</pre>
+
+<p>Voilà le résultat qu'on obtient avec un tel code :</p>
+
+<p>{{EmbedLiveSample('Citation_en_ligne','100%')}}</p>
+
+<div class="note">
+<p><code>&lt;q&gt;</code> ne doit pas être utilisé pour écrire des titres d'articles ou de chapitres ou pour mettre un terme en exergue. Si vous avez besoin d'utiliser des guillemets à cet effet, il faudra les écrire manuellement :</p>
+
+<pre><code>C'est</code> « Wingardium Leviôsa » et non « Wingardium Leviosâ »<code>.</code></pre>
+
+<p>Les entités HTML <code>&amp;laquo;</code> et <code>&amp;raquo;</code> permettent de représenter les guillemets. Il faudra utiliser <code>&amp;ldquo;</code> et <code>&amp;rdquo;</code> pour les doubles quotes et  <code>&amp;lsquo;</code> et <code>&amp;rsquo;</code> pour les simples quotes.</p>
+</div>
+
+<p>Par défaut, {{glossary("navigateurs",'les navigateurs web')}} utilisent le symbole de citation approprié pour la langue utilisée. Si vous souhaitez surcharger la mise en forme par défaut, vous pouvez utiliser la propriété CSS {{cssxref('quotes')}}. Par exemple, la règle CSS qui suit imposera les guillemets français :</p>
+
+<pre class="brush: css">:lang(fr) &gt; q {
+  quotes: '« ' ' »';
+}</pre>
+
+<h3 id="Extrait_complet">Extrait complet</h3>
+
+<p>HTML fournit également l'élément {{htmlelement("blockquote")}} pour les citations en bloc (c'est-à-dire les citations suffisamment longues pour qu'elles méritent leurs propres paragraphes). Dans l'exemple suivant, on voit qu'on a plusieurs paragraphes au sein d'une même <code>&lt;blockquote&gt;</code> :</p>
+
+<pre class="brush: html">&lt;p&gt;Les mots employés par Cicéron sont devenus un
+charabia pour simuler du texte mais à l'origine, ils
+n'étaient pas dénués de sens, loin de là&amp;nbsp;:&lt;/p&gt;
+
+&lt;blockquote&gt;
+  &lt;p&gt;
+    Il n'y personne qui recherche ou désire obtenir la
+    douleur en tant que telle car il s'agit de la douleur.
+    Toutefois, occasionnellement, il exist des circonstances
+    selon lesquelles la peine et la douleur peuvent fournir
+    un grand plaisir.
+  &lt;/p&gt;
+
+  &lt;p&gt;
+    Le sage s'en tient donc, sur ces sujets, au principe
+    de sélection : il rejette le plaisir afin de s'assurer de
+    de plus grands plaisir ou alors, il endure certaines
+    douleurs pour s'en prémunir de plus grandes.
+  &lt;/p&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<p>Dans ce cas, la mise en forme appliquée par défaut par le navigateur web est une marge plus large à gauche. Là encore, vous pouvez ajuster la mise en forme à votre convenance en utilisant la propriété CSS {{cssxref('margin')}}.</p>
+
+<h2 id="Comment_fournir_la_source_d'une_citation">Comment fournir la source d'une citation</h2>
+
+<h3 id="Source_implicite">Source implicite</h3>
+
+<p>Citer c'est bien, indiquer les sources c'est encore mieux. De cette façon, une source indépendante peut vérifier que la citation est correcte, voire fournir un contexte plus large pour la citation. À cet effet, l'attribut {{htmlattrxref('cite','q')}} permet d'indiquer l'URL de la source, que ce soit pour un élément {{htmlelement("q")}} ou pour un élément  {{htmlelement("blockquote")}} :</p>
+
+<pre class="brush: html">&lt;q cite="https://fr.wikiquote.org/wiki/Hom%C3%A8re"&gt;<span class="citation">Patience, mon cœur !</span>&lt;/q&gt;</pre>
+
+<p>En pratique, les personnes ne trouvent que très rarement cette information de source (sauf s'ils lisent le code source HTML). On peut donc préférer un lien direct dans la citation :</p>
+
+<pre class="brush: html">&lt;q&gt;&lt;a href="https://fr.wikiquote.org/wiki/Hom%C3%A8re"&gt;<span class="citation">Patience, mon cœur !</span>&lt;/a&gt;&lt;/q&gt;</pre>
+
+<h3 id="Source_explicite">Source explicite</h3>
+
+<p>Pour indiquer de façon explicite l'origine de la citation, il est possible d'utiliser l'élément {{htmlelement("cite")}}. Cet élément peut <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">indiquer l'auteur de la citation ou l'œuvre créative de laquelle elle provient</a>.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;q&gt;La pensée est libre&lt;/q&gt;,
+  &lt;cite id="author"&gt;Cicéron&lt;/cite&gt; dans
+  &lt;cite id="work" lang="la"&gt;De Finibus Bonorum et Malorum&lt;/cite&gt;.
+&lt;/p&gt;
+</pre>
+
+<p>Pour accentuer le caractère explicite de la relation entre la citation et sa source, il est également possible d'ajouter l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></code> :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;q aria-labelledby="author work"&gt;La pensée est libre&lt;/q&gt;,
+  &lt;cite id="author"&gt;Cicéron&lt;/cite&gt; dans
+  &lt;cite id="work" lang="la"&gt;De Finibus Bonorum et Malorum&lt;/cite&gt;.
+&lt;/p&gt;
+</pre>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("q")}}</li>
+ <li>{{htmlelement("blockquote")}}</li>
+ <li>{{htmlelement("cite")}}</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/ajouter_contenu_audio_vidéo_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_contenu_audio_vidéo_page_web/index.html
new file mode 100644
index 0000000000..1e1708e6ea
--- /dev/null
+++ b/files/fr/apprendre/html/comment/ajouter_contenu_audio_vidéo_page_web/index.html
@@ -0,0 +1,153 @@
+---
+title: Ajouter du contenu audio ou vidéo à une page web
+slug: Apprendre/HTML/Comment/Ajouter_contenu_audio_vidéo_page_web
+tags:
+  - Audio
+  - Beginner
+  - Guide
+  - HTML
+  - Video
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div class="summary">
+<p>Dans cet article, nous verrons comment intégrer des éléments vidéo et audio de premier rang, accessibles à chacun, quelle que soit la méthode utilisée.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir comment intégrer des éléments audio et vidéo dans une page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="L'audio_et_la_vidéo_sur_le_web">L'audio et la vidéo sur le web</h2>
+
+<p>Depuis toujours, les développeurs web ont intégré (ou tenté d'intégrer) des vidéos et des sons sur le Web. Après une longue période d'expérimentation, {{glossary("HTML5")}} offre aujourd'hui la meilleure solution et tire parti de nouvelles {{Glossary("API")}} {{Glossary("JavaScript")}} .</p>
+
+<p>Dans cet article, nous expliquerons comment intégrer des fichiers audio et vidéo dans des documents HTML. Nous prendrons le postulat de départ que vous avez déjà ces fichiers disponibles (la création de média n'est pas, à proprement parlé, du développement web et nous n'en parlerons donc pas dans cet article)</p>
+
+<p>Avant de commencer, précisons qu'il existe par ailleurs quelques fournisseurs de vidéos en ligne tels que <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> ou <a href="https://vimeo.com/">Vimeo</a>. Ces sites offrent un moyen pratique pour héberger ou consommer des vidéos et peuvent nous éviter d'avoir à penser à la consommation de bande passante. Ils permettent généralement d'utiliser des scripts JavaScript permettant d'embarquer les vidéos sur une page web. Cette méthode permet d'éviter certaines des difficultés que nous allons aborder, toutefois, cela ne correspond pas exactement au fait d'utiliser HTML pour fournir <strong>directement</strong> du contenu multimédia à vos utilisateurs.</p>
+
+<h2 id="Pour_commencer">Pour commencer</h2>
+
+<p>La façon la plus simple permettant d'intégrer un fichier multimédia dans une page web est d'utiliser l'élément {{htmlelement("audio")}} pour les fichiers sonores et l'élément {{htmlelement("video")}} pour les vidéos. Par exemple :</p>
+
+<pre class="brush: html">&lt;audio src="exemple.ogg" controls&gt;&lt;/audio&gt;
+&lt;video src="exemple.webm" width="375" height="280" controls&gt;&lt;/video&gt;
+</pre>
+
+<p>Ces deux éléments HTML possèdent quelques attributs permettant de contrôler le comportement des éléments :</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} (uniquement pour <code>&lt;video&gt;</code>)</dt>
+ <dd>Ces attributs permettent de contrôler la taille à utiliser pour la vidéo (des propriétés CSS peuvent également être utilisées). Dans tous les cas, les vidéos garderont leur ratio « hauteur / largeur » de départ (des bandes noires viendront occuper l'espace vide).</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>
+ <p>Les utilisateurs doivent être en mesure de contrôler la lecture de la vidéo ou du son (ce point est notamment critique pour les personnes <a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie#.C3.89pid.C3.A9miologie">epileptiques</a>). Il faut donc utiliser l'attribut <code>controls</code> pour que le navigateur fournisse les contrôles natifs ou alors construire votre propre interface, grâce à <a href="/fr/docs/Web/API/HTMLMediaElement">l'API JavaScript appropriée</a>. L'interface utilisateur devra, au minimum, fournir un moyen de lancer la lecture, de l'arrêter et d'ajuster le volume.</p>
+ </dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Cet attribut permet de lancer la vidéo ou la piste audio dès qu'elle est chargée et lors du chargement de la page. Attention, de nombreux utilisateurs peuvent trouver ce comportement « agressif ».</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Cet attribut permet de lire la piste audio ou la vidéo en boucle, en la relançant automatiquement une fois qu'elle a fini. Attention également à utiliser cet attribut avec précaution.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Cet attribut permet de lancer le média avec le son désactivé par défaut.</dd>
+ <dt>{{htmlattrxref("poster","video")}} (video only)</dt>
+ <dd>Cet attribut fournit l'URL d'une image à afficher avant de lancer la vidéo.</dd>
+</dl>
+
+<h2 id="Déjouer_les_pièges_des_codecs">Déjouer les pièges des codecs</h2>
+
+<h3 id="Le_problème_les_navigateurs_supportent_différents_codecs">Le problème : les navigateurs supportent différents codecs</h3>
+
+<p>Les <strong>{{Glossary("Codec","codecs")}}</strong> (tels que Vorbis ou H.264) permettent de convertir du son et de la vidéo en chiffres binaires et aussi de réaliser la conversion inverse. Mais si on ne dispose pas du bon codec, les données exprimées en binaires seront inexploitables.</p>
+
+<div class="note"><strong>Les formats de type « conteneur »</strong> (tel que Ogg) : ces formats font référence à la façon dont les données d'images, de son et les méta-données sont regroupées (« empaquetées ») dans un seul fichier. Le support pour les différents types de conteneur est un problème à part entière mais généralement, les systèmes supportenent les formats de conteneurs associés aux codex qu'ils supportent (par exemple Ogg empaquète de l'audio au format Vorbis et de la vidéo au format Theora ; WebM regroupe le plus souvent de l'audio au format Vorbis avec de la vidéo au format VP8/VP9 ; MP4, quant à lui, empaquète de l'audio AAC et de la vidéo H.26).</div>
+
+<p>Malheureusement, les navigateurs ne supportent pas tous les mêmes codecs, il faut donc, la plupart du temps, fournir différents fichiers pour les différents formats.</p>
+
+<h3 id="Quels_formats_fournir">Quels formats fournir ?</h3>
+
+<p>Le format <strong>MP3 </strong>(pour l'audio) et le format <strong>MP4/H.264</strong> (pour la vidéo) sont très largement supportés. Cepedant, des brevets américains portent sur le format MP3 jusqu'en 2017 au minimum et sur le format H.264 jusqu'en 2027 au minimum. Beaucoup de personnes préfèrent éviter d'utiliser des logiciels restreints à ces brevets, c'est pour cela qu'il est nécessaire de mettre à disposition les fichiers multimédia dans des formats libres (tel qu'<a href="http://xiph.org/vorbis/">Ogg Vorbis</a> pour l'audio et <a href="http://www.webmproject.org/">WebM</a> pour la vidéo).</p>
+
+<p>Dans un monde idéal, à la façon de Wikipédia, il suffirait de fournir les fichiers uniquement dans ces formats ouverts. Cependant, des navigateurs comme Safari et Microsoft Edge (sans parler d'Internet Explorer) ne supportent pas ces formats. Cela laisserait donc beaucoup d'utilisateurs potentiels sur le banc.</p>
+
+<p>Pour plus de détails sur cette compatibilité, consultez notre <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">tableau de compatibilité pour les codecs audio</a> et notre <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité pour les codecs audio-vidéo</a>.</p>
+
+<h3 id="Comment_fournir_le_même_contenu_sous_plusieurs_formats">Comment fournir le même contenu sous plusieurs formats ?</h3>
+
+<p>HTML fournit l'élément {{htmlelement("source")}} qui peut être utilisé avec l'attribut {{htmlattrxref("src","source")}}. Cet attribut, <code>src</code>, ne doit pas être placé au sein même de l'élément <code>&lt;video&gt;</code> ou <code>&lt;audio&gt;</code> car il remplacerait alors le contenu déclaré dans les éléments <code>&lt;source&gt;</code>. Voici un exemple :</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="exemple.mp3" type="audio/mpeg"&gt;
+  &lt;source src="exemple.ogg" type="audio/ogg"&gt;
+&lt;/audio&gt;</pre>
+
+<div class="note">
+<p>Assurez-vous de ne pas oublier l'attribut {{htmlattrxref("type","source")}}. S'il manque, les navigateurs chargeront et essaieront chaque fichier, ce qui prendra plus de temps et consommera plus de ressources. <code>type</code> permet aux navigateurs de sauter tous les fichiers qu'ils ne peuvent pas lire. Dans <a href="/en-US/docs/Web/HTML/Supported_media_formats">cet article sur les formats de médias supportés</a>, les {{glossary("type MIME","types MIME")}} les plus communs sont explicités.</p>
+</div>
+
+<h2 id="Les_transcriptions_et_les_sous-titres">Les transcriptions et les sous-titres</h2>
+
+<p>Transcrire signifie ici qu'on écrit les dialogues oraux sont forme de texte.</p>
+
+<p>De nombreuses personnes ne peuvent pas (ou ne veulent pas) utiliser des contenus audio ou vidéos (par exemple dans un environnement bruyant ou dans une bibliothèque). Pour que votre site puisse être consulté par ces visiteurs, il est donc nécessaire de fournir une transcription textuelle du média ainsi qu'une « piste » de texte qui s'affiche en même temps que la vidéo. Cela prend du temps à réaliser mais cela en vaut le coût..</p>
+
+<p>Les pistes textuelles permettent également d'avoir un meilleur impact pour le référencement ({{glossary("SEO")}}) car les moteurs de recherches utilisent principalement le contenu textuel. Un dialogue d'une vidéo pourra donc être référencé s'il est transcrit.</p>
+
+<h3 id="Les_pistes_textuelles">Les pistes textuelles</h3>
+
+<p>Les chaînes de texte affichées durant une vidéo peuvent prendre différentes formes, dont voici les principales :</p>
+
+<dl>
+ <dt>Les sous-titres</dt>
+ <dd>La traduction des dialogues à l'écrit, éventuellement dans une langue autre que celle parlée dans la vidéo.</dd>
+ <dt>La description</dt>
+ <dd>Une transcription synchronisée des dialogues et les descriptions des sons entendus dans la vidéo (ce qui permet aux personnes de regarder un film sans le son par exemple)</dd>
+ <dt>L'audio-description</dt>
+ <dd>Du texte, décrivant les scènes qui est fourni en audio (notamment pour les personnes souffrant d'une déficience visuelle).</dd>
+</dl>
+
+<p>HTML permet d'inclure facilement de telles pistes :</p>
+
+<ol>
+ <li><a href="/fr/docs/Web/API/Web_Video_Text_Tracks_Format">Il faut écrire un ou plusieurs fichiers texte WebVTT.</a> Un fichier WebVTT contient les textes à utiliser et définit à quels moment ces textes doivent apparaître ou disparraître (dans ces cas, avoir une bonne transcription dès le début aide énormément).</li>
+ <li>Puis lier le ou les fichiers WebVTT à l'élément {{htmlelement("track")}}. <code>&lt;track&gt;</code> se place dans les éléments <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code> et est situé après les éléments <code>&lt;source&gt;</code>. L'attribut {{htmlattrxref("kind","track")}} doit être utilisé pour indiquer s'il s'agit de <code>subtitles</code> (sous-titres), <code>captions</code> (description) ou de <code>descriptions</code> (audio description). L'attribut {{htmlattrxref("srclang","track")}} peut également être utilisé pour compléter et indiquer au navigateur le langage utilisé pour les sous-titres.</li>
+</ol>
+
+<p>Voici un exemple :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="exemple.mp4" type="video/mp4"&gt;
+    &lt;source src="exemple.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="sous-titres-en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Pour plus de détails, n'hésitez pas à lire <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">l'article décrivant comment ajouter des sous-titres et légendes à une vidéo HTML5</a>.</p>
+
+<h2 id="Contenu_de_secours_pour_les_navigateurs_historiques">Contenu de secours pour les navigateurs historiques</h2>
+
+<p>Il est possible d'ajouter un contenu qui sera utilisé dans le cas où le navigateur ne connaît pas ces éléments HTML5. Ce contenu doit être ajouté avant la balise de fermeture. Il est par exemple possible d'ajouter un lien de téléchargement vers le fichier média :</p>
+
+<pre class="brush: html">&lt;video src="exemple.webm" controls&gt;
+    &lt;track kind="captions" src="captions.vtt" srclang="fr"&gt;
+    &lt;a href="exemple.webm"&gt;Télécharger la vidéo&lt;/a&gt;
+&lt;/video&gt;</pre>
+
+<p>Un lien de téléchargement n'est pas parfaitement adapté pour tous les utilisateurs (notamment pour ceux qui sont sur des mobiles) mais c'est une meilleure solution que d'indiquer uniquement que le navigateur doit être mis à jour. <a href="https://dev.opera.com/articles/html5-video-flash-fallback-custom-controls/">Il existe des techniques plus avancées pour répondre à ce cas</a> mais une solution rapide à mettre en œuvre consiste à utiliser les plateformes vidéos évoquées au début de cet article, qui fournissent un script tiers fonctionnel.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Un guide plus détaillé</a></li>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des sous-titres à une vidéo HTML5</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html
new file mode 100644
index 0000000000..943ea7da86
--- /dev/null
+++ b/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html
@@ -0,0 +1,153 @@
+---
+title: Ajouter du contenu Flash dans une page web
+slug: Apprendre/HTML/Comment/Ajouter_contenu_Flash_dans_page_web
+tags:
+  - Accessibility
+  - Advanced
+  - Flash
+  - Guide
+  - HTML
+translation_of: >-
+  Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements
+---
+<div class="summary">
+<p>Cet article illustre pourquoi il est nécessaire que le contenu d'une page web soit accessible sans plugin. Si vous avez besoin de tels plugins (pour un cas bien spécifique ou pour des raisons historiques), nous illustrerons également un cas expliquant comment intégrer du contenu de cette façon.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez savoir <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML basique</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Cet article aborde les méthodes pour insérer du contenu, dépendant d'extensions tierces, dans une page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="warning">
+<p><strong>Résumé :</strong> Des plugins comme Flash représentent une technologie passée, notamment sur les appareils mobiles où ils ne sont pas disponibles. Les navigateurs destinés aux ordinateurs de bureau<a href="http://arstechnica.com/information-technology/2015/04/chrome-starts-pushing-java-off-the-web-by-disabling-plugins/"> vont également abandonner leur support</a>.</p>
+</div>
+
+<h2 id="Tourner_son_clavier_sept_fois_sur_son_bureau_avant_de_dépendre_de_plugins_tiers">Tourner son clavier sept fois sur son bureau avant de dépendre de plugins tiers</h2>
+
+<p>Un <a href="/fr/Add-ons/Plugins"><strong>plugin</strong></a> est un logiciel qui permet d'accéder à un contenu que le navigateur ne peut pas lire/décoder nativement. Il était une fois, les plugins étaient indispensables sur le Web. Il y a quelques années, installer Adobe Flash Player était un passage obligé pour regarder un film en ligne. À cette époque, on avait également de (trop) nombreuses alertes pour mettre à jour Flash Player ou Java Runtime Environment.</p>
+
+<p>Depuis, les technologies web ont grandi et aquis une certaine maturité et une certaine robustesse. Pour la plupart des application, il est donc temps d'arrêter de dépendre de ces plugins et de tirer parti des technologies web. Cela permettra :</p>
+
+<ul>
+ <li><strong>D'élargir votre audience à toutes les personnes qui ont un navigateur. </strong>Tout le monde a un navigateur, les plugins sont beaucoup plus rare, notamment pour les utilisateurs mobiles. Le Web était devenu largement utilisable sans plugins, les gens iront sans aucun doute sur un autre site web concurrent plutôt que d'installer un plugin supplémentaire.</li>
+ <li><strong>De vous épargner <a href="http://webaim.org/techniques/flash/">les maux de tête liés à l'accessibilité</a> et aux plugins comme Flash ou les autres.</strong></li>
+ <li><strong>De rester à l'abri de failles de sécurités répétées. </strong>Il est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">de notoriété publique qu'Adobe Flash est peu sécurisé</a> et ce malgré les nombreux correctifs apportés au cours du temps. En 2015, Alex Stamos, le responsable de la sécurité informatique de Facebook a même demandé à Adobe <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">d'arrêter le développement de Flash.</a></li>
+</ul>
+
+<p>Que faire ? Si vous avez besoin d'une certaine intéractivité sur votre page, {{glossary("JavaScript")}} vous permettra sans aucun doute d'accomplir ce dont vous avez besoin, sans avoir à utiliser d'applets Java ou de composants ActiveX/BHO. Plutôt que d'utiliser Adobe Flash, vous pouvez utiliser <a href="/fr/Apprendre/HTML/Howto/Add_audio_or_video_content_to_a_webpage">la vidéo HTML5</a> pour les cas où vous avez besoin de médias, <a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="/fr/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour réaliser des images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Plusieurs années auparavant, Peter Elst écrivait déjà</a> qu'Adobe Flash était rarement le meilleur outil pour développer sur le Web, notamment pour les jeux et les applications d'entreprises. En ce qui concerne ActiveX, même le navigateur de Microsoft, {{glossary("Microsoft Edge","Edge")}}, ne le supporte plus.</p>
+
+<h2 id="L'histoire_de_deux_balises">L'histoire de deux balises</h2>
+
+<p>Si vous devez dépendre de plugins pour un cas spécifique ou lié au cadre d'une entreprise donnée, HTML fournit deux élément pour intégrer du contenu provenant d'un plugin : {{htmlelement("embed")}} et {{htmlelement('object')}}. Il faut noter qu'<code>&lt;embed&gt;</code> est un élément vide, à la différence de <code>&lt;object&gt;</code>.</p>
+
+<p>Il faudra donc utiliser les attributs pour fournir certaines informations :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">{{htmlelement("embed")}}</th>
+   <th scope="col">{{htmlelement("object")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>L'{{glossary("URL")}} du contenu à intégrer</td>
+   <td>{{htmlattrxref('src','embed')}}</td>
+   <td>{{htmlattrxref('data','object')}}</td>
+  </tr>
+  <tr>
+   <td>Le type {{glossary("MIME")}} <em>précis</em> du contenu à intégrer</td>
+   <td>{{htmlattrxref('type','embed')}}</td>
+   <td>{{htmlattrxref('type','object')}}</td>
+  </tr>
+  <tr>
+   <td>La hauteur et la largeur, exprimées en pixels CSS, de la boîte contrôlée par le plugin</td>
+   <td>{{htmlattrxref('height','embed')}}<br>
+    {{htmlattrxref('width','embed')}}</td>
+   <td>{{htmlattrxref('height','object')}}<br>
+    {{htmlattrxref('width','object')}}</td>
+  </tr>
+  <tr>
+   <td>Les noms et valeurs à founir comme paramètres au plugin</td>
+   <td>Des attributs <em>ad hoc</em> avec les noms et les valeurs</td>
+   <td>Des éléments sur une seule balise {{htmlelement("param")}} contenus dans la balise <code>&lt;object&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Du contenu HTML indépendant à utiliser en secours au cas où la ressource à intégrer n'est pas disponible</td>
+   <td>Non supporté (<code>&lt;noembed&gt;</code> est obsolète)</td>
+   <td>Contenus dans la balise <code>&lt;object&gt;</code>, après les éléments <code>&lt;param&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><code>&lt;object&gt;</code> a besoin d'un attribut <code>data</code> ou d'un attribut <code>type</code> ou des deux. SI vous utilisez les deux, il faudra peut être utiliser l'attribut  {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox à l'heure où cet article est écrit). <code>typemustmatch</code> permet au contenu intégré de ne pas être lancé tant que l'attribut <code>type</code> ne correspond pas au type du média. <code>typemustmatch</code> permet ainsi d'apporter beaucoup plus de sécurité lorsqu'on intègre du contenu provenant d'une autre {{glossary("origine")}} (cela peut empêcher des attaquants malveillants de lancer des scripts modifiés au travers du plugin).</p>
+</div>
+
+<p>Les deux exemples utilisent chacun <code>&lt;embed&gt;</code> ou <code>&lt;object&gt;</code> pour insérer un film Flash, <code>&lt;object&gt;</code> permet également de gérer un contenu à utiliser en cas de secours :</p>
+
+<pre class="brush: html">&lt;embed
+  src="explosion.swf"
+  type="application/vnd.adobe.flash-movie"
+  width="500"
+  height="300"
+  bgcolor="#ff7f00"
+  allowfullscreen="true"
+/&gt;</pre>
+
+<pre class="brush: html">&lt;object
+  data="explosion.swf"
+  type="application/vnd.adobe.flash-movie"
+  width="500"
+  height="300"
+  typemustmatch&gt;
+    &lt;param name="bgcolor" value="#ff7f00" /&gt;
+    &lt;param name="allowfullscreen" value="true" /&gt;
+
+    &lt;p&gt;Le film Flash n'a pu être trouvé.&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>Afin d'être tout à fait complet, voici deux exemples supplémentaires. Encore une fois, il est (de loin) préférable d'utiliser JavaScript que des applets Java car le navigateur exécutera directement le code JavaScript sans passer par un environnement tiers, lourd. Ceci étant dit, voilà comment utiliser l'élément <code>&lt;object&gt;</code> pour insérer une applet Java :</p>
+
+<pre class="brush: html">&lt;object
+  data="mon_applet.jar"
+  type="application/x-java-applet"&gt;
+    &lt;param name="code" value="MaClasseJava"&gt;
+
+    &lt;p&gt;Java n'est pas disponible ou est désactive.&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>Un autre cas où on a besoin de faire appel à <code>&lt;object&gt;</code> : les fichiers PDF. Ces fichiers posent de nombreux <a href="http://webaim.org/techniques/acrobat/acrobat">problèmes d'accessibilité</a>, notamment pour les utilisateurs qui utilisent un petit écran. Il ne devrait pas être absolument nécessaire de lire un PDF pour consulter un site web (imaginez si tous les sites web étaient uniquement disponibles en largeur fixe). Toutefois, si vous avez besoin d'intégrer un contenu PDF, voici comment le faire dans votre page web :</p>
+
+<pre class="brush: html">&lt;object
+  data="mon_fichier.pdf"
+  type="application/pdf"
+  width="100%"
+  height="100%"
+  typemustmatch&gt;
+    &lt;p&gt;Vous n'avez pas de plugin pour lire des fichiers PDF mais vous pouvez
+    &lt;a href="mon_fichier.pdf"&gt;télécharger le fichier PDF correspondant.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li><a href="http://webaim.org/techniques/flash/">L'accessibilité avec Flash</a></li>
+ <li>{{htmlelement('object')}}</li>
+ <li>{{htmlelement('embed')}}</li>
+ <li><a href="https://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash">Comparaison entre HTML5 et Flash</a> sur Wikipédia (en anglais)</li>
+ <li><a href="http://www.flashsucks.org">flashsucks.org</a>, <a href="http://www.occupyflash.org">occupyflash.org</a> (en anglais) (pour expliciter, encore plus si besoin, les raisons pour lesquelles Flash est très déconseillé)</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_à_une_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_à_une_page_web/index.html
new file mode 100644
index 0000000000..8aa1cd799b
--- /dev/null
+++ b/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_à_une_page_web/index.html
@@ -0,0 +1,272 @@
+---
+title: Images adaptatives
+slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web
+tags:
+  - Design
+  - Débutant
+  - Graphics
+  - Guide
+  - HTML
+  - Image
+  - Intermediate
+  - Intermédiaire
+  - img
+  - picture
+  - sizes
+  - srcset
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<p class="summary">Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une part (elles préparent le terrain) dans la conception de sites Web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un futur module au sujet des CSS.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez savoir <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML simple</a> et <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">comment ajouter des images statiques à une page web.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment utiliser des fonctionnalités comme {{htmlattrxref("srcset", "img")}} et l'élément {{htmlelement("picture")}}  pour implémenter des solutions d'images adaptatives sur les sites Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pourquoi_des_images_adaptatives">Pourquoi des images adaptatives ?</h2>
+
+<p>Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site Web classique a probablement une image d'en-tête pour flatter le regard du visiteurs, plus peut-être quelques images de contenu plus loin. Vous voulez probablement que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voyons un exemple simple :</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">voir cet exemple en direct</a> et trouver son <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">code source</a> sur Github). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :</p>
+
+<ul>
+ <li>Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 px et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100% de la largeur de la vue.</li>
+ <li>L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 px.</li>
+ <li>Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder.</li>
+</ul>
+
+<p>Tout cela c'est très bien, mais le problème vient quand vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinger les personnes !</p>
+
+<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+
+<p>Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtisses, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de <strong>décisions de nature artistique</strong>.</p>
+
+<p>De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des <strong>changements de résolution</strong> — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des <a href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a>, une image matricielle paraît grenue et horrible si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les utilisateurs de mobiles en particulier ne veulent pas cramer de leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site Web.</p>
+
+<p>Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre  pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.</p>
+
+<p>Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle : utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affichés dans l'exemple ci-dessus.</p>
+
+<p>Ce type de problème n'existait pas quand le Web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le Web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Toutes les nouvelles fonctionnalités présentées dans cet article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sont toutes prises en charge dans les parutions d'explorateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris l'explorateur Edge de Microsoft,  même si ce n'est pas le cas d'Internet Explorer.) </p>
+</div>
+
+<h2 id="Comment_créer_des_images_adaptatives">Comment créer des images adaptatives ?</h2>
+
+<p>Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément {{htmlelement("img")}} du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">sans doute de meilleurs outils </a>que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.</p>
+
+<h3 id="Commutations_de_résolution_tailles_différentes">Commutations de résolution : tailles différentes</h3>
+
+<p>Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard {{htmlelement("img")}} vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"&gt;</pre>
+
+<p>Mais il est possible d'utiliser deux nouveaux attributs — {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} — permettant de fournir plusieurs images source avec des indications pour permettre à l'explorateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> sur Github (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">code source</a>) :</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva habillée en fée"&gt;</pre>
+
+<p>Les attributs <code>srcset</code> et <code>sizes</code> paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons en revue leur contenu maintenant :</p>
+
+<p><strong><code>srcset</code></strong> definit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :</p>
+
+<ol>
+ <li>un nom de <strong>fichier image </strong>(<code>elva-fairy-480w.jpg</code>),</li>
+ <li>un espace,</li>
+ <li>la <strong>largeur intrinsèque en  pixels</strong> (<code>480w</code>) — notez l'utilisation de l'unité <code>w</code>, et non <code>px</code> comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur  (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur <kbd>Cmd</kbd> + <kbd>I</kbd> pour faire apparaître l'écran des infos).</li>
+</ol>
+
+<p><strong><code>sizes</code></strong> définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule</p>
+
+<ol>
+ <li>une <strong>condition pour le média</strong> (<code>(max-width:480px)</code>) — vous pourrez en savoir plus à ce propos dans l'<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">article sur les CSS</a>, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,</li>
+ <li>une espace,</li>
+ <li><strong>la largeur de la place </strong>occupée par l'image si la condition pour le média est vraie (<code>440px</code>).</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (<code>px</code>, <code>em</code>) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement  ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). L'explorateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.</p>
+</div>
+
+<p>Ainsi, une fois ces attributs en place, l'explorateur va :</p>
+
+<ol>
+ <li>noter la largeur du périphérique,</li>
+ <li>vérifier quelle est la première condition vraie pour le média dans la liste des tailles,</li>
+ <li>noter la largeur d'emplacement demandée par le média,</li>
+ <li>charger l'image référencée dans la liste <code>srcset</code> qui est la plus proche de la taille choisie.</li>
+</ol>
+
+<p>Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média <code>(max-width: 480px)</code> sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier <code>elva-fairy-480w.jpg</code> sera chargé, car sa largeur intrinsèque (<code>480w</code>) est celle qui est la plus proche de <code>440px</code>. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux utilisateurs de mobiles d'économiser beaucoup de bande passante.</p>
+
+<p>Les explorateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut {{htmlattrxref("src", "img")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Dans l'élément {{htmlelement("head")}} du document, vous trouvez la ligne <code>&lt;meta name="viewport" content="width=device-width"&gt;</code> : ceci force les explorateurs de mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains explorateurs de mobile mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception. Nous vous en dirons plus à ce propos dans un module à venir.)</p>
+</div>
+
+<h3 id="Outils_de_développement">Outils de développement</h3>
+
+<p>Il y a quelques outils de développement utiles dans les navigateurs pour vous aider à déterminer les largeurs d'affichage nécessaires, etc, que vous devez utiliser. Pour les déterminer, j'ai d'abord chargé la version non adaptative de l'exemple (<code>not‑responsive.html</code>), puis je suis allé dans <a href="https://developer.mozilla.org/fr/docs/Tools/Responsive_Design_Mode">Responsive Design View </a>(<em>Outils &gt; Développement Web &gt; Vue adaptative</em>), qui vous permet de regarder les mises en page Web comme si elles étaient visualisées à travers un éventail de tailles d'écran d'appareils différents.</p>
+
+<p>J'ai réglé la largeur de la fenêtre à 320px puis 480px ; pour chacun, je suis allé dans l'<a href="https://developer.mozilla.org/fr/docs/Tools/Page_Inspector">inspecteur DOM</a>, j'ai cliqué sur l'élément {{htmlelement("img")}}} qui nous intéresse, puis j'ai regardé sa taille dans l'onglet Box Model View sur le côté droit de l'écran. Cela devrait vous donner les largeurs intrinsèques d'image dont vous avez besoin.</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>Ensuite, vous pouvez vérifier si <code>srcset</code> fonctionne en réglant la largeur de la fenêtre sur ce que vous voulez (par exemple une largeur étroite), en ouvrant Network Inspector (<em>Outils &gt; Développement Web &gt; Réseau</em>), puis en rechargeant la page. Ceci devrait vous donner une liste des ressources téléchargées pour dresser la page web, et ici vous pouvez vérifier quel fichier image a été choisi pour le téléchargement.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Utilisez Mozilla Firefox pour tester <code>srcset</code>. Chrome charge la meilleure image dans le cache de l'explorateur, ce qui empêche de la tester dans les outils de développement.</p>
+</div>
+
+<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Commutation_de_résolution_même_taille_résolutions_differentes">Commutation de résolution : même taille, résolutions differentes</h3>
+
+<p>Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant <code>srcset</code> avec <code>x-descriptors</code> et sans <code>sizes</code> — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">code source</a>) :</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva habillée en fée"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :</p>
+
+<pre class="brush: css notranslate">img {
+  width: 320px;
+}</pre>
+
+<p>Dans ce cas, <code>sizes</code> n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans <code>srcset</code>. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image <code>elva-fairy-320w.jpg</code> sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image <code>elva‑fairy-640w.jpg</code> sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.</p>
+
+<h3 id="Décision_de_nature_artistique">Décision de nature artistique</h3>
+
+<p>Pour résumer, le problème des <strong>décisions de nature artistique</strong> réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site Web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément {{htmlelement("picture")}} nous permet d'implémenter ce type de solution.</p>
+
+<p>Revenons à notre exemple initial du fichier <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>. Cette image nécessite d'opérer un choix de nature artistique :</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"&gt;</pre>
+
+<p>Arrangeons cela avec {{htmlelement("picture")}}} ! Comme pour <code>&lt;vidéo&gt;</code> et <code>&lt;audio&gt;</code>, l'élément <code>&lt;picture&gt;</code> est une enveloppe conteneur de plusieurs éléments {{htmlelement("source")}}} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément {{htmlelement("img")}}}. Le code dans <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> ressemblera à :</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Les éléments <code>&lt;source&gt;</code> incluent un attribut <code>media</code> qui contient une condition pour le média — comme avec le premier exemple <code>srcset</code>, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie <code>true</code> sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément <code>&lt;source&gt;</code> sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième.</li>
+ <li>Les attributs <code>srcset</code> contiennent le chemin vers l'image à afficher. Noter que comme avec <code>&lt;img&gt;</code> plus haut, <code>&lt;source&gt;</code> peut prendre plusieurs attributs <code>srcset</code> référençant plusieurs images, ainsi qu'un attribut <code>sizes</code> également.  Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élement <code>&lt;picture&gt;</code> element, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent.</li>
+ <li>Dans tous les cas, vous devez fournir un élément <code>&lt;img&gt;</code>, avec <code>src</code> et  <code>alt</code>, juste avant <code>&lt;/picture&gt;</code>, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément <code>&lt;source&gt;</code> dans cet exemple), et un repli pour les navigateurs qui ne prennent pas en charge l'élément <code>&lt;picture&gt;</code>.</li>
+</ul>
+
+<p>Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous ne devez utiliser l'attribut <code>media</code> qu'avec un scénario de décision de nature artistique ; quand vous utilisez <code>media</code>, ne mettez pas de conditions pour le média avec l'attribut <code>sizes.</code></p>
+</div>
+
+<h3 id="Pourquoi_ne_peut-on_pas_réaliser_cela_avec_le_CSS_ou_du_JavaScript">Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?</h3>
+
+<p>Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme <code>srcset</code>. Vous ne pourriez pas, par exemple, charger l'élément {{htmlelement("img")}}}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. A ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.</p>
+
+<ul>
+</ul>
+
+<h3 id="Utilisez_largement_les_formats_dimage_modernes">Utilisez largement les formats d'image modernes</h3>
+
+<p>Il existe plusieurs nouveaux formats d'image très interessants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.</p>
+
+<p><code>&lt;picture&gt;</code> nous permet de servir encore les plus vieux explorateurs. Vous pouvez indiquer le type MIME dans les attributs <code>type</code> de façon à ce que l'explorateur puisse immédiatement rejeter les types de fichiers non pris en charge :</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>N'utilisez pas l'attribut <code>media</code>, sauf à devoir prendre une décision de nature artistique.</li>
+ <li>Dans un élément <code>&lt;source&gt;</code>, vous ne pouvez vous référer qu'à des images du type déclaré avec <code>type</code>.</li>
+ <li>Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec <code>srcset</code> et <code>sizes</code>, selon les besoins.</li>
+</ul>
+
+<h2 id="Apprentissage_actif_mise_en_œuvre_de_vos_images_adaptatives">Apprentissage actif : mise en œuvre de vos images adaptatives</h2>
+
+<p>Pour cet apprentissage actif, nous attendons que vous soyiez courageux et que vous y alliez seul.... la plupart du temps. Nous souhaitons que vous preniez une décision artistique en mettant en place vos  propres écrans étroit et large en utilisant &lt;image&gt;, et un exemple de commutation de résolution en utilisant srcset.</p>
+
+<ol>
+ <li>Écrivez un HTML simple contenant votre code (utilisez <code>not-responsive.html</code> comme point de départ si vous voulez)</li>
+ <li>Trouvez une jolie image de paysage de grande largeur avec quelques détails à l'intérieur. Créez une version taille web de cette dernière avec un éditeur graphique, puis découpez en une partie plus petite qui zoome sur un des détails, et créez une deuxième image (une largeur de l'ordre de 480 px conviendra parfaitement).</li>
+ <li>Utilisez l'élément <code>&lt;picture&gt;</code> pour implémenter une bascule d'image en décision artistique !</li>
+ <li>Créez plusieurs fichiers image de tailles différentes, chacun montrant la même image.</li>
+ <li>Utilisez <code>srcset</code>/<code>size</code> pour créer un exemple de commutateur de résolution, soit pour servir une image de même taille avec différentes résolutions, ou diverses tailles d'images avec diverses largeur de vue.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Utilisez les outils de développement du navigateur pour vous aider dans le choix des tailles dont vous avez besoin, comme mentionné plus haut.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :</p>
+
+<ul>
+ <li><strong>les décisions de nature artistique </strong>: cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On resout alors ce problème avec {{htmlelement("picture")}}.</li>
+ <li><strong>la commutation de résolution </strong>: cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On resout ce problème avec l'utilisation de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a> (images SVG) ainsi qu'à l'aide des attributs {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}}.</li>
+</ul>
+
+<p>Cet article est aussi la conclusion de l'ensemble du module <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a> ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">L'excellente introduction aux images adaptatives de Jason Grigsby</a></li>
+ <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Images adaptatives : si vous changez juste de résolution, utilisez srcset</a> — comporte plus d'explications sur la façon dont l'explorateur retravaille l'image à utiliser</li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et video</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; à &lt;iframe&gt; — autres techniques d'intégration</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écran d'accueil Mozilla</a></li>
+</ul>
+</div>
diff --git a/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_à_une_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_à_une_page_web/index.html
new file mode 100644
index 0000000000..a6ea2d91cc
--- /dev/null
+++ b/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_à_une_page_web/index.html
@@ -0,0 +1,182 @@
+---
+title: Ajouter des images vectorielles à une page web
+slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web
+tags:
+  - Graphics
+  - Guide
+  - HTML
+  - Intermediate
+  - Learn
+  - SVG
+translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<div class="summary">
+<p>Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a> et comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">insérer une image dans un document HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment intégrer une image SVG dans une page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est-ce_que_SVG_Qu'apporte-t-il">Qu'est-ce que SVG ? Qu'apporte-t-il ?</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.</p>
+
+<p>Certaines images (appelées images « <em>matricielles</em> ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.</p>
+
+<p>Au contraire, <strong>les images vectorielles</strong> décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant <code>srcset</code> et <code>sizes</code>.</p>
+
+<p>De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.</p>
+
+<p>Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme <a href="https://inkscape.org">Inkscape</a>. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.</p>
+
+<div class="note">
+<p>Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web</a>.</p>
+</div>
+
+<h2 id="La_méthode_rapide_htmlelement(img)">La méthode rapide : {{htmlelement("img")}}</h2>
+
+<p>Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut <code>height</code> ou <code>width</code> (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">lire ce tutoriel sur <code>&lt;img&gt;</code></a>.</p>
+
+<pre class="brush: html">&lt;img
+    src="equilateral.svg"
+    alt="un triangle aux trois côtés égaux"
+    height="87px"
+    width="100px" /&gt;</pre>
+
+<h3 id="Avantages">Avantages</h3>
+
+<ul>
+ <li>Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible.</li>
+ <li>Il est également possible de créer des hyperliens en plaçant l'élément <code>&lt;img&gt;</code> dans un élément {{htmlelement("a")}}.</li>
+</ul>
+
+<h3 id="Inconvénients">Inconvénients</h3>
+
+<ul>
+ <li>Pour les navigateurs historiques qui existaient avant la démocratisation de SVG (Internet Explorer 8, Android 2.3 et autres), on pourra utiliser une image PNG ou JPG dans l'attribut <code>src</code> en combinaison avec l'attribut {{htmlattrxref("srcset","img")}} :
+
+  <pre class="brush: html">&lt;img src="equilateral.png" alt="un triangle dont tous les côtés sont égaux" srcset="equilateral.svg"/&gt;
+</pre>
+ </li>
+ <li>Il est impossible de manipuler l'image avec JavaScript.</li>
+ <li>Si vous souhaitez contrôler le contenu du SVG avec du code CSS, vous devez inclure les styles CSS dans le code SVG (les feuilles de style externes appelées depuis le SVG n'auront aucun effet).</li>
+ <li>Il n'est pas possible de remettre l'image en forme avec les pseudo-classes CSS (par exemple <code>:focus</code>).</li>
+</ul>
+
+<div class="note">
+<ul>
+ <li>Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via <code>&lt;img&gt;</code>).
+
+  <pre class="brush: css"><code>background: url("image-de-secours.png");</code>
+background-image<code>: url(image.svg);
+background-size: contain;</code></pre>
+ </li>
+ <li>Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, <a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas#Un_mot_sur_les_serveurs_Web">cet article pourra vous aider à résoudre le problème</a>.</li>
+</ul>
+</div>
+
+<h2 id="Comment_inclure_une_image_SVG_directement_dans_le_code_du_document">Comment inclure une image SVG directement dans le code du document</h2>
+
+<p>Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <code><a href="/fr/docs/Web/SVG/Element/svg">&lt;svg&gt;</a></code>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :</p>
+
+<pre class="brush: html">&lt;svg width="300" height="200"&gt;
+    &lt;rect width="100%" height="100%" fill="green" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>La balise <code>&lt;svg&gt;</code> n'a pas besoin des attributs <code>version</code>, <code>baseProfile</code> ou <code>xmlns</code>. Assurez-vous de bien retirer les déclarations d'espaces de noms (<em>namespace</em>) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser <a href="http://petercollingridge.appspot.com/svg_optimiser">SVG Optimiser</a> ou <a href="http://www.codedread.com/scour/">Scour</a>.</p>
+
+<h3 id="Avantages_2">Avantages</h3>
+
+<ul>
+ <li>Placer le SVG à même le document permet d'économiser une requête HTTP, ce qui peut permettre de réduire le temps de chargement de la page.</li>
+ <li>Vous pouvez ajouter des attributs <code>class</code> et <code>id</code> aux éléments SVG pour les mettre en forme grâce à CSS (directement au sein du SVG ou dans les règles liées au document HTML). En fait, <a href="/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation">chaque attribut de présentation SVG</a> peut être utilisé comme propriété CSS.</li>
+ <li>Cette approche est la seule qui permet d'utiliser des interactions CSS (telles que <code>:focus</code>) et des animations CSS. Il faut toutefois noter que les <a href="http://css-tricks.com/guide-svg-animations-smil/">animation SMIL</a> fonctionneront avec toutes les méthodes décrites dans cet article.</li>
+ <li>Avec cette méthode, les images SVG peuvent être utilisées comme hyperlien.</li>
+</ul>
+
+<h3 id="Inconvénients_2">Inconvénients</h3>
+
+<ul>
+ <li>Cette méthode n'est utilisable que si le SVG n'est utilisé qu'à un seul endroit. S'il faut le dupliquer, cela compliquera la maintenance et gaspillera de la mémoire.</li>
+ <li>Chaque image SVG augmente la taille du fichier HTML.</li>
+ <li>Le navigateur ne peut pas placer ces images SVG en cache comme il pourrait le faire avec d'autres ressources.</li>
+ <li>Vous pouvez inclure un contenu à utiliser au cas où le navigateur ne supporte pas le SVG, grâce à {{svgelement("foreignObject")}}. Toutefois, les navigateurs qui supportent SVG téléchargeront quand même les ressources supplémentaires. Il faut donc décider si cette charge supplémentaire est nécessaire pour gérer les anciens navigateurs.</li>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="Comment_intégrer_un_SVG_dans_un_élément_htmlelement(object)">Comment intégrer un SVG dans un élément {{htmlelement("object")}}</h2>
+
+<p>Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :</p>
+
+<pre class="brush: html">&lt;object data="parallelogramme.svg"
+    width="300"
+    height="250"
+    type="image/svg+xml"&gt;
+
+&lt;img src="parallelogramme.png"
+    alt="un quadrilatère dont les côtés sont parallèles deux à deux" /&gt;
+
+&lt;/object&gt;
+
+</pre>
+
+<h3 id="Inconvénients_3">Inconvénients</h3>
+
+<ul>
+ <li>Là aussi, les navigateurs qui supportent SVG téléchargeront également les ressources alternatives comme les images.</li>
+ <li>Les éléments <code>&lt;object&gt;</code> ne peuvent pas être transformés en liens. Le SVG sera affiché mais ne sera pas déclenchable.</li>
+ <li>Les éléments SVG peuvent être mis en forme avec CSS mais
+  <ul>
+   <li>le code SVG doit contenir les règles CSS (par exemple dans un élément <code>&lt;style&gt;</code>) ou</li>
+   <li>le fichier SVG doit contenir un lien vers la feuille de style externe. Pour créer ce lien, vous pouvez utiliser ce code, à placer dans le code SVG avant les autres balises :
+    <pre class="brush: xml">&lt;?xml-stylesheet type="text/css" href="svg.css" ?&gt;</pre>
+    (Attention à ne pas utiliser ce code avec du SVG intégré directement dans le HTML car cela pourrait rendre la page non-fonctionnelle)</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Comment_intégrer_un_SVG_avec_un_élément_htmlelement(iframe)">Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}</h2>
+
+<p>Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <code>&lt;iframe&gt;</code> n'est donc qu'une variation de <a href="/fr/Apprendre/HTML/Howto/Embed_a_webpage_within_another_webpage">l'intégration d'une page web dans une autre page web</a>.</p>
+
+<p>Voici un rapide exemple :</p>
+
+<pre class="brush: html">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
+    &lt;img src="triangle.png" alt="Un triangle avec trois côtés inégaux" /&gt;
+&lt;/iframe&gt;</pre>
+
+<p><code>iframe</code> permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les <code>iframe</code>.</p>
+
+<p>De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("iframe")}}</li>
+ <li>{{htmlelement("object")}}</li>
+ <li>{{htmlelement("img")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas">Le tutoriel SVG</a> sur MDN</li>
+ <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Conseils rapides pour des SVG adaptatifs (en anglais)</a></li>
+ <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Le tutoriel de Sara Soueidan sur les images SVG adaptatives (en anglais)</a></li>
+ <li><a href="http://www.w3.org/TR/SVG-access/">Les bénéfices du format SVG pour l'accessibilité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/scale-svg/">Comment redimensionner des fichiers SVG (en anglais)</a> (ce n'est pas aussi simple qu'avec les images matricielles)</li>
+ <li><a href="http://www.w3.org/TR/SVG/">La spécification SVG</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/ajouter_des_images_à_une_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_des_images_à_une_page_web/index.html
new file mode 100644
index 0000000000..deaa8b3bd2
--- /dev/null
+++ b/files/fr/apprendre/html/comment/ajouter_des_images_à_une_page_web/index.html
@@ -0,0 +1,124 @@
+---
+title: Ajouter des images à une page web
+slug: Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web
+tags:
+  - Beginner
+  - Composing
+  - HTML
+  - NeedsActiveLearning
+  - OpenPractices
+translation_of: >-
+  Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage
+---
+<p class="summary">Les images permettent de faire passer des messages plus simplement et plus directement. Elles attirent l'œil du visiteur lorsqu'il consulte le site. Dans cet articles, nous allons voir comment ajouter, simplement, des images à une page web.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre les méthodes simples qui permettent d'ajouter une image dans un document HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Cet article illustre uniquement comment insérer une image statique. Attention à la taille des images que vous utilisez, elles doivent rester légères pour être efficacement affichées sur les appareils des personnes dont la connexion est lente ou dont les écrans sont petits. Si vous souhaitez adapter votre contenu en fonction de la taille de l'écran et notamment pour les grands écrans,<a href="/en-US/Learn/HTML/Howto/Add_responsive_image_to_a_webpage"> l'article sur les images adaptatives (responsive)</a> pourra vous intéresser.</p>
+</div>
+
+<h2 id="Ce_dont_vous_avez_besoin">Ce dont vous avez besoin</h2>
+
+<p>Vous allez écrire un élément {{htmlelement("img")}}, mais pour remplir ses attributs correctement, il faut les informations correspondantes :</p>
+
+<ul>
+ <li>L'{{glossary("URL")}} (absolue ou relative) de l'image</li>
+ <li>Un équivalent textuel pour toute fonctionnalité ou information utile contenue dans l'image</li>
+ <li>La hauteur et la largeur qu'on souhaite donner à l'image dans la page (ce n'est pas <em>obligatoire</em> mais cela permet d'accélerer le rendu)</li>
+</ul>
+
+<p>Une fois ces informations récoltées, vous pouvez écrire un élément <code>&lt;img&gt;</code> dans le code de votre page. <code>&lt;img&gt;</code> est un {{glossary("élément vide")}} et il n'y a donc pas de balise fermante <code>&lt;/img&gt;</code>, il suffit uniquement de placer une barre oblique (<em>slash</em>) avant le chevron fermant de la balise : <code>&lt;img ... /&gt;</code>. Si votre image fournit une information ou une fonctionnalité, votre code devrait ressembler à :</p>
+
+<pre class="brush: html">&lt;img
+    src="images/graphique-camembert.png"
+    alt="[ABC Tech posssède 75% de part de marché et XYZ 25%]"
+    height="300px"
+    width="300px"
+/&gt;
+</pre>
+
+<p>Si l'image est strictement décorative ou que le contenu associé est déjà fourni par le texte de la page, l'attribut <code>alt</code> peut être laissé blanc :</p>
+
+<pre class="brush: html">&lt;img src="images/licorne.png" alt="" /&gt;
+</pre>
+
+<div class="warning">
+<p><strong>Attention !</strong> La plupart des images sont couvertes par le droit d'auteur. <strong>Vous ne devez pas</strong> afficher une image sur votre page web sauf si</p>
+
+<ol>
+ <li>Vous possédez l'image, ou</li>
+ <li>Si vous avez reçu la permission écrite, explicite du propriétaire de l'image, ou</li>
+ <li>Si vous disposez de preuves comme quoi l'image appartient au domaine public</li>
+</ol>
+
+<p>De plus, il ne faut <strong>jamais</strong> faire point l'attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre. Cela s'appelle du <em>"hotlinking"</em> : cela gaspille des ressources vers le site d'origine, ralentit votre page et vous empêche d'être sûr du contenu de votre page (l'image peut être remplacée à tout moment). En bref, c'est totalement immoral.</p>
+</div>
+
+<p class="note">Il est possible de transformer une image en lien en imbriquant un élément {{htmlelement("img")}} dans un élément {{htmlelement("a")}}. Dans ce cas, il est préférable de s'assurer que l'image est plus grande qu'un carré de 45px sur 45 px (sinon les utilisateurs auront du mal à cliquer/appuyer dessus). Pour plus d'informations à ce sujet, <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink">voir notre tutoriel sur comment ajouter des hyperliens.</a></p>
+
+<p>Dans la suite de cet article, nous allons nous intéresser plus en détails à ce qui doit être utilisé pour les attributs <code>height</code>/<code>width</code>, <code>src</code>, et <code>alt</code>.</p>
+
+<h2 id="height_et_width"><code>height</code> et <code>width</code></h2>
+
+<p><code>height</code> et <code>width</code> ne doivent pas être utilisés pour redimensionner les images dans le navigateurs. Si vous utilisez ces attributs, les valeurs doivent correspondre à la taille réelle, exprimée en pixels, de l'image (votre éditeur d'image favori pourra vous fournir cette information si besoin). Si vous devez redimensionner l'image, utilisez un logiciel d'édition adapté.</p>
+
+<p>Si vous fournissez de mauvaises valeurs pour la hauteur et la largeur, l'image semblera déformée. Si la hauteur et la largeur sont trop grandes, l'image aura l'air pixélisée. Si elles sont trop petites, vous gaspillerez de la bande passante et du temps de calcul en chargeant une image plus grande que nécessaire.</p>
+
+<h2 id="src"><code>src</code></h2>
+
+<p>Vous pourriez fournir une {{glossary("URL")}} complète, composée d'un chemin <em>absolu</em> et d'un nom de fichier (par exemple <code>https://exemple.com/images/licorne.png</code>) mais cela n'a pas grand intérêt car il y a de très grandes chances que votre image se situe sur le même {{glossary("nom de domaine","domaine")}} que votre page web (encore une fois, le <em>hotlinking</em> est inacceptable).</p>
+
+<p>Si vous ne fournissez qu'un nom de fichier, le navigateur consultera le même dossier que celui du document HTML affiché. Si l'image n'est pas à cet emplacement, le navigateur abandonnera le chargement de l'image.</p>
+
+<p>La plupart du temps, vous aurez à utiliser un chemin <em>relatif </em>suivi d'un nom de fichier. C'est-à-dire qu'on écrit le chemin du fichier relativement à partir de l'endroit où la page est située. Pour ce chemin, on pourra utiliser deux points pour remonter d'un niveau de dossier (<code>../</code>) ou utiliser un seul point (<code>./</code>) pour faire référence au répertoire courant.</p>
+
+<p>Si, par exemple, la page web courante est <code>https://exemple.com/animaux/mythique.html</code> et que l'image se situe à <code>https://exemple.com/images/licorne.png</code>, vous pourrez écrire ce chemin relatif : <code>src="../images/licorne.png</code><code>"</code>.</p>
+
+<div class="note">
+<p>À des fins de référencement ({{glossary("SEO")}}), il est préférable de donner un nom descriptif pour le fichier (<code>licorne.png</code> sera mieux que <code>img835.png</code>). Google recommande également que l'ensemble des images soient placées dans un répertoire <code>images</code>.</p>
+</div>
+
+<h2 id="alt"><code>alt</code></h2>
+
+<p>Il existe différents scénarios selon lesquels les visiteurs de votre site ne pourront profiter des images :</p>
+
+<ul>
+ <li>le fichier image est invalide ou le navigateur ne supporte pas ce type d'image</li>
+ <li>le chemin ou le nom de fichier fourni pour l'image est incorrect</li>
+ <li>les visiteurs utilisent des logiciels qui lisent l'écran</li>
+ <li>les visiteurs ont désactivé le chargement des images afin de réduire le volume de données transférées (point notamment valable pour les téléphones)</li>
+</ul>
+
+<p>Autrement dit : les images ne doivent pas être primordiales pour votre site et le contenu textuel de celui-ci doit suffire entièrement.</p>
+
+<p>Si vous insérez des images dans votre site, vous devez utiliser un attribut <code>alt</code>. Sinon, le navigateur utilisera un motif neutre et inutile quand l'image ne pourra être affichée. Que faut-il donc écrire dans l'attribut <code>alt</code> ? Cela dépend avant tout du <em>rôle</em> de l'image dans la page (en d'autres termes : que perd-t-on comme information si l'image ne s'affiche pas).</p>
+
+<ul>
+ <li><strong>Décoration.</strong> Si l'image n'est utilisée que pour décorer, un attribut <code>alt</code> vide suffira (<code>alt=""</code>). Pour être tout à fait précis, les images décoratives ne devraient pas faire partie du code HTML mais des fichiers {{glossary("CSS")}} qui peuvent être utilisés pour gérer tout ce qui a trait à la présentation visuelle. Pour plus d'informations sur comment ajouter des images avec CSS, voir les pages sur {{cssxref('content')}} ou {{cssxref("background-image")}}.</li>
+ <li><strong>Contenu.</strong> Si votre image fournit des informations conséquentes, fournissez les mêmes informations grâce à un texte <em>bref</em> pour l'attribut <code>alt</code>. Mieux encore, fournissez l'information sous forme de texte dans la page web (auquel cas, il n'est pas nécessaire de réécrire l'information dans le texte utilisé pour <code>alt</code>).</li>
+ <li><strong>Lien.</strong> Si vous placez une image dans une balise {{htmlelement("a")}}, vous devez fournir <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">un texte alternatif pour le lien</a>. À vous de choisir si vous utilisez l'élément <code>&lt;a&gt;</code> ou l'attribut <code>alt</code> de l'image pour le faire.</li>
+ <li><strong>Texte.</strong> Vous ne devriez pas utiliser d'images qui contiennent du texte ! (si vous voulez réaliser des effets de style sur un texte, CSS est là pour ça. Dans le cas où vous devez le faire malgré tout, le texte doit être fourni dans l'attribut <code>alt</code>.</li>
+</ul>
+
+<p>Le point-clé est de s'assurer que toutes les informations nécessaires sont contenues dans le texte de la page. Il ne faut pas qu'un visiteur qui ne voit pas les images réalise que quelque chose lui manque. Lors de l'écriture de votre page, vous pouvez tester en désactivant les images. Vous verrez par exemple que les expressions comme « une image de » ou « un logo de » sont assez peu utiles pour les textes alternatifs.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>L'élément {{htmlelement("img")}}</li>
+ <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li>
+ <li><a href="/fr/Apprendre/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li>
+ <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Comment ajouter une carte de zones cliquables sur une image</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html b/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html
new file mode 100644
index 0000000000..33409556dc
--- /dev/null
+++ b/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html
@@ -0,0 +1,72 @@
+---
+title: Annoter des images et graphiques
+slug: Apprendre/HTML/Comment/Annoter_des_images_et_graphiques
+tags:
+  - Accessibility
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+translation_of: >-
+  Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions
+---
+<div class="summary">
+<p>HTML fournit une méthode simple pour ajouter des figures et leurs légendes.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment ajouter des figures à une page web, accompagnées de leurs légendes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est-ce_qu'une_figure">Qu'est-ce qu'une figure ?</h2>
+
+<p>Une figure est une unité de contenu indépendante :</p>
+
+<ul>
+ <li>qui exprime un message de façon claire et concise</li>
+ <li>qui pourrait être placée à différents endroits dans la structure linéaire de la page</li>
+ <li>qui fournit des informations essentielles pour appuyer le sens du texte principal</li>
+</ul>
+
+<p>Si vous pensez qu'une légende doit être ajoutée à un contenu, c'est qu'il s'agit probablement d'une figure. Voici quelques exemples : des images, des fragments de code, des éléments audio ou vidéo, des équations, des tableaux, des diagrammes.</p>
+
+<p>Pour symboliser des figures, HTML fournit l'élément {{htmlelement("figure")}} :</p>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;img alt="MDN" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"&gt;
+&lt;/figure&gt;
+</pre>
+
+<h2 id="Ajouter_une_légende">Ajouter une légende</h2>
+
+<p>Pour ajouter une légende, il suffit de la placer dans un élément {{htmlelement("figcaption")}}, lui-même placé au sein de l'élément <code>&lt;figure&gt;</code> à côté d'une des deux balises <code>&lt;figure&gt;</code> :</p>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;img alt="" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"&gt;
+  &lt;figcaption&gt;Le logo de MDN en 2014&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<p>{{htmlelement("figcaption")}} indique au navigateur et aux technologies d'assistance (telles que les lecteurs d'écran) que la légende décrit le contenu de l'élément {{htmlelement("figure")}}.</p>
+
+<div class="note">
+<p>Du point de vue de l'accessibilité, les légendes et les textes de l'attribut {{htmlattrxref('alt','img')}} ont deux rôles différents. Les légendes peuvent être utilisées par l'ensemble des visiteurs, qu'ils voient l'image ou non alors que le texte {{htmlattrxref('alt','img')}} n'est utilisé que lorsque l'image est absente.</p>
+
+<p>Pour cette raison, une légende et le texte <code>alt</code> ne devraient pas être identiques car les deux textes apparaissent lorsque l'image n'apparaît pas. Vous pouvez tester ce point en désactivant les images dans votre navigateur.</p>
+</div>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("figure")}}</li>
+ <li>{{htmlelement("figcaption")}}</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/appliquer_du_css_à_une_page_web/index.html b/files/fr/apprendre/html/comment/appliquer_du_css_à_une_page_web/index.html
new file mode 100644
index 0000000000..c8199d3a2d
--- /dev/null
+++ b/files/fr/apprendre/html/comment/appliquer_du_css_à_une_page_web/index.html
@@ -0,0 +1,74 @@
+---
+title: Appliquer du CSS à une page web
+slug: Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - HTML
+translation_of: Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML
+---
+<div class="summary">
+<p>Le code HTML d'une page web définit sa signification et sa structure. Le code CSS, quant à lui, permet de définir la mise en forme d'une page. Dans cet article, nous verrons comment appliquer du code CSS à un document HTML.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment appliquer une mise en forme CSS à un document HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="À_propos_de_CSS">À propos de CSS</h2>
+
+<p>Un document HTML bien écrit peut être utilisé quel que soit le contexte de présentation. Il est possible de le consulter visuellement (avec un navigateur), auditivement (avec un lecteur d'écran) ou tactilement (avec un affichage Braille). {{glossary("CSS")}} permet de contrôler l'aspect <em>visuel</em> d'un site web. Le navigateur pourra utiliser une feuille de style CSS par défaut, qui se traduira par une mise en forme générique (voire un peu austère) et il est donc préférable de déclarer une mise en forme propre à votre site web afin que celui-ci soit plus agréable à consulter.</p>
+
+<p>Dans cet article, nous verrons comment appliquer du CSS depuis le code HTML. Pour apprendre le fonctionnement du langage CSS, nous vous conseillons de démarrer avec <a href="/fr/docs/CSS/Premiers_pas">notre guide CSS</a>.</p>
+
+<p>Nous présenterons comment faire référence à une feuille de style CSS externe depuis le document HTML. Cette méthode est généralement la meilleure qui permette d'appliquer du CSS. En effet, une feuille de style centralisée permet d'avoir une mise en forme cohérente sur l'ensemble du site, de faciliter la maintenance du code et d'éviter de télécharger plusieurs ressources. Ceci étant dit, nous présenterons également deux autres méthodes ainsi que leurs avantages et inconvénients.</p>
+
+<h2 id="Référencer_une_feuille_de_style_externe">Référencer une feuille de style externe</h2>
+
+<p><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Une feuille de style</a> est un simple fichier texte contenant les règles CSS. Vous pouvez donc écrire une feuille de style avec votre éditeur de texte (de la même façon que vous pouvez rédiger un document HTML ou du code JavaScript). Une fois que vous avez écrit votre feuille de style, vous pouvez y faire référence depuis vos pages web grâce à un élément {{HTMLElement('link')}} :</p>
+
+<pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet"&gt;</pre>
+
+<p>Il vous suffit de modifier l'URL de l'attribut <code>href</code> pour que celui-ci pointe vers votre feuille de style. L'attribut <code>rel="stylesheet"</code> et sa valeur sont nécessaires car l'élément  {{HTMLElement('link')}} peut être utilisé dans d'autres cas. Tous les éléments {{htmlelement("link")}} doivent être placés au sein de l'élément {{HTMLElement('head')}} du document.</p>
+
+<h2 id="Intégrer_du_CSS_avec_&lt;style>">Intégrer du CSS avec <code>&lt;style&gt;</code></h2>
+
+<p>L'élément {{htmlelement("style")}} permet d'écrire du CSS directement au sein du document HTML :</p>
+
+<pre class="brush: html">&lt;style&gt;
+body {
+  background-color: pink;
+}
+&lt;/style&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> N'utilisez cette méthode que lorsqu'une page web doit être mise en forme de façon unique. Sinon, il est préférable d'utiliser une feuille de style unique pour économiser de la bande passante et avoir une mise en forme cohérente sur l'ensemble du site.</p>
+</div>
+
+<h2 id="Écrire_du_CSS_inline_avec_l'attribut_style">Écrire du CSS <em>inline</em> avec l'attribut <code>style</code></h2>
+
+<p>Enfin, vous pouvez utiliser l'attribut <code>style</code> dans n'importe quel élément HTML. Le style ne s'appliquera qu'à l'élément courant :</p>
+
+<pre class="brush: html">&lt;span style="color: red;"&gt;Non, tout mais pas ça !&lt;/span&gt;</pre>
+
+<div class="note">
+<p><strong>Attention :</strong> Cette méthode est un cauchemar de maintenance et peut grandement influencer la cascade CSS. Elle ne doit donc pas être utilisée, sauf pour tester rapidement quelques scénarios extrêmes (par exemple, lors de la conception d'e-mails en HTML à destination de clients e-mail qui s'avèreraient récalcitrants).</p>
+</div>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("link")}}</li>
+ <li>{{htmlelement("style")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_globaux/style">L'attribut <code>style</code></a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/créer_un_document_html_simple/index.html b/files/fr/apprendre/html/comment/créer_un_document_html_simple/index.html
new file mode 100644
index 0000000000..75549be43c
--- /dev/null
+++ b/files/fr/apprendre/html/comment/créer_un_document_html_simple/index.html
@@ -0,0 +1,188 @@
+---
+title: Créer un document HTML simple
+slug: Apprendre/HTML/Comment/Créer_un_document_HTML_simple
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<p class="summary">Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez avoir <a href="/en-US/Learn/Choose,_Install_and_set_up_a_text_editor">installé un éditeur de texte</a> et connaître <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">quelques rudiments de HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Inscrire un titre ici&lt;/title&gt;
+    &lt;!-- On peut avoir d'autres méta-données ici --&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;!-- Ici, on placera tout le contenu à destination
+    de l'utilisateur --&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.</p>
+
+<h2 id="Qu'est-ce_qu'un_document_HTML">Qu'est-ce qu'un document HTML ?</h2>
+
+<p>Un document HTML ou <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web</a> est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("&lt;&gt;"), par exemple, dans l'exemple précédent <code>&lt;html&gt;</code> et <code>&lt;body&gt;</code> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <code>&lt;body&gt;</code> et une balise fermante correspondante : <code>&lt;/body&gt;</code>). Un <strong><dfn>{{Glossary('élément')}}</dfn></strong> est une chaîne de texte entre deux balises.</p>
+
+<p>La plupart des programmes (le plus souvent des {{glossary("navigateur","navigateurs")}}) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.</p>
+
+<p>Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">éditeur de texte</a>. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et  {{Glossary("Attribut","attributs")}} les plus communs. C'est le but de la <a href="/fr/Apprendre">zone d'apprentissage de MDN</a>.</p>
+
+<p>Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :</p>
+
+<ul>
+ <li>ce qu'est un {{glossary("doctype")}} et pourquoi c'est important</li>
+ <li>l'élément racine : {{htmlelement("html")}}</li>
+ <li>la différence entre les éléments placés dans {{htmlelement("head")}} et dans {{htmlelement("body")}}</li>
+ <li>l'importance de l'élément {{htmlelement("title")}}.</li>
+ <li>la définition du jeu de caractères à utiliser pour le document avec l'élément {{htmlelement("meta")}}.</li>
+</ul>
+
+<h2 id="Le_doctype">Le <em>doctype</em></h2>
+
+<p>La chaîne de texte suivante est appelée {{Glossary("doctype")}} (qui est la contraction, anglaise, de « document » et « type »).</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;</pre>
+
+<p>En ce qui concerne HTML, le <em>doctype</em> est un reliquat historique. Pourquoi est-il alors toujours présent ?</p>
+
+<p>Si vous ne commencez pas votre document par <code>&lt;!DOCTYPE html&gt;</code>, les navigateurs afficheront votre document en <a href="/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p>
+
+<p>Le <em>doctype</em> déclenche l'utilisation du mode <em>standard</em>. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le {{glossary("W3C")}} et le {{glossary("WHATWG")}}. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> Le <em>doctype</em> doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.</p>
+</div>
+
+<h2 id="L'élément_&lt;html>">L'élément <code>&lt;html&gt;</code></h2>
+
+<p>Tout le document (en dehors du <em>doctype</em>) est contenu entre les balises <code>&lt;html&gt;</code> et <code>&lt;/html&gt;</code>. Il ne peut y avoir qu'un seul élément {{HTMLElement('html')}} par document.</p>
+
+<div class="note">
+<p>Il est possible d'oublier <code>&lt;html&gt;</code> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <code>&lt;html&gt;</code> sera nécessaire. Par exemple, on utilise <code>&lt;html lang="fr"&gt;</code> pour indiquer que le document entier est écrit en français. De la même façon, <code>&lt;html&gt;</code> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.</p>
+</div>
+
+<h2 id="Les_éléments_&lt;head>_et_&lt;body>">Les éléments <code>&lt;head&gt;</code> et <code>&lt;body&gt;</code></h2>
+
+<p>Au sein de l'élément <code>&lt;html&gt;</code>, le document aura une « tête » (<em>head</em> en anglais) située entre les balises <code>&lt;head&gt;</code> et <code>&lt;/head&gt;</code> et un « corps » (<em>body</em> en anglais) situé entre les balises <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>.</p>
+
+<p>La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.</p>
+
+<p>Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.</p>
+
+<div class="note">
+<p>HTML est très souple à propos de la structure du document, si vous oubliez les éléments <code>&lt;head&gt;</code> et <code>&lt;body&gt;</code>, ils seront implicitement ajoutés. Voici un document sans <code>&lt;html&gt;</code> ni <code>&lt;head&gt;</code> ni <code>&lt;body&gt;</code> :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;title&gt;Ceci est un document HTML&lt;/title&gt;
+
+Coucou monde ! (&lt;i&gt;Hello world!&lt;/i&gt;)
+</pre>
+
+<p>Le navigateur s'occupera de tout :</p>
+
+<p><img alt="[Screenshot of the browser making its best guess]" src="https://mdn.mozillademos.org/files/11675/Capture%20du%202015-10-04%2017-23-03.png" style="height: 254px; width: 873px;"></p>
+
+<p>Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <code>&lt;head&gt;</code> et où est <code>&lt;body&gt;</code>, vous gagnerez plus de temps.</p>
+</div>
+
+<h2 id="L'élément_&lt;title>_le_titre_du_document">L'élément <code>&lt;title&gt;</code> : le titre du document</h2>
+
+<p>Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;Mon fabuleux exemple HTML&lt;/title&gt;
+        ...
+    &lt;/head&gt;
+    &lt;body&gt;
+        ...
+    &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <code>&lt;title&gt;</code>).</p>
+
+<div class="note">
+<p>Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.</p>
+
+<p>S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;!-- Pas de titre ici --&gt;
+Hello world!
+</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Chrome</th>
+   <td><img alt="[Screenshot of a Chrome tab labeled ''index.html'']" src="https://mdn.mozillademos.org/files/10887/index-ch.png" style="height: 147px; width: 400px;"></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th scope="col">Firefox</th>
+   <td><img alt="[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]" src="https://mdn.mozillademos.org/files/11143/index-ff.png"></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<dl>
+ <dt>
+ <h2 id="Définir_le_jeu_de_caractères_utilisé">Définir le jeu de caractères utilisé</h2>
+ </dt>
+</dl>
+
+<p>Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.</p>
+
+<p>Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé {{glossary("UTF-8")}} qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001". </p>
+
+<p>D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <code>&lt;meta charset="utf-8"&gt;</code> dans l'exemple ci-avant.</p>
+
+<div class="note">
+<p><strong>Note :</strong> En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.</p>
+
+<p>Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :</p>
+
+<p><img alt="[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']" src="https://mdn.mozillademos.org/files/10907/index-encoding.png" style="height: 132px; width: 335px;"></p>
+</div>
+
+<h2 id="Modèles_et_gabarits">Modèles et gabarits</h2>
+
+<p>Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).</p>
+
+<p>Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).</p>
+
+<div class="note">
+<p><strong>Astuce :</strong> Si votre éditeur de texte permet de gérer les <em>snippets</em> (fragments de code), vous pouvez placer votre modèle dans un <em>snippet</em> pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.</p>
+</div>
+
+<div class="note">
+<p><strong>Astuce :</strong> À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet <a href="https://html5boilerplate.com/">HTML5 Boilerplate</a>. Celui-ci décrit des <em>templates</em> (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.</p>
+</div>
+
+<h2 id="Exercices">Exercices</h2>
+
+<p>À construire, <a href="/fr/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">n'hésitez pas à contribuer !</a></p>
diff --git a/files/fr/apprendre/html/comment/créer_un_hyperlien/index.html b/files/fr/apprendre/html/comment/créer_un_hyperlien/index.html
new file mode 100644
index 0000000000..1e30213d1b
--- /dev/null
+++ b/files/fr/apprendre/html/comment/créer_un_hyperlien/index.html
@@ -0,0 +1,191 @@
+---
+title: Créer un hyperlien
+slug: Apprendre/HTML/Comment/Créer_un_hyperlien
+tags:
+  - Beginner
+  - HTML
+  - Learn
+  - Navigation
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<p class="summary">Dans cet article, nous verrons comment créer des liens {{glossary('accessibilité','accessibles')}} et utiles  au {{glossary("référencement")}}.</p>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez, au préalable, savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>. Il peut également être judicieux de se familiariser avec les <a href="/fr/Apprendre/Understanding_URLs">URL</a> et la notion d'<a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">hyperliens</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir comment mettre en place des liens accessibles et utiles au référencement.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La création de liens est une compétence clé sur le web. Dans cet article, nous verrons en détails l'élément {{htmlelement("a")}} et comment l'utiliser pour créer des liens forts.</p>
+
+<h2 id="Comment_créer_un_lien">Comment créer un lien</h2>
+
+<p>Pour fabriquer un lien, vous aurez <em>a minima</em> besoin d'une cible et d'un texte :</p>
+
+<dl>
+ <dt>cible</dt>
+ <dd>L'{{glossary("URL")}} de la destination du lien (par exemple, <code>"https://www.mozilla.org/firefox/products/</code>")</dd>
+ <dt>texte</dt>
+ <dd>Le texte qui décrit la destination offerte par le lien (dans le cas de l'exemple précédent, on pourrait écrire « Cette page présente les différents produits Firefox !")</dd>
+</dl>
+
+<p>Le <em>texte</em> sera placé entre les balises {{htmlelement('a')}} et la <em>cible </em>sera la valeur de l'attribut {{htmlattrxref('href','a')}}. Mis bout à bout, on obtient ce code :</p>
+
+<pre class="brush: html">&lt;a href="https://www.mozilla.org/firefox/products/"&gt;
+  Cette page présente les différents produits Firefox !
+&lt;/a&gt;</pre>
+
+<p>Cela affichera, sur la page web, le lien suivant :</p>
+
+<p><a href="https://www.mozilla.org/firefox/products/">Cette page présente les différents produits Firefox !</a></p>
+
+<div class="note">
+<p><strong>Astuce :</strong> Pour transformer une image en un lien, il suffit de placer l'élément de l'image entre les balises <code>&lt;a&gt;</code>.</p>
+
+<p>L'attribut <code>alt</code> de l'image ne doit pas seulement <strong>décrire</strong> l'image (« c'est une flèche vers la droite »), mais doit également <strong>indiquer aux visiteurs ce qui se produit en suivant le lien</strong> (« lire le prochain billet »). <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">Ce tutoriel explique comment insérer des images dans une page web.</a></p>
+</div>
+
+<h3 id="Les_ancres_d'une_page">Les ancres d'une page</h3>
+
+<p>Il est également possible de créer un lien qui pointe vers un endroit spécifique d'un document. Cet endroit est appelé une ancre.</p>
+
+<ol>
+ <li>Ajoutez un attribut {{htmlattrxref("id")}} à l'élément cible. Par exemple, changez <code>&lt;h2&gt;</code> en <code>&lt;h2 id="les-ancres"&gt;</code>.</li>
+ <li>Dans l'URL du lien, placée dans l'attribut {{htmlattrxref("href","a")}}, ajoutez l'identifiant précédé d'un dièse (#) : <code>&lt;a href="http://www.exemple.com/index.html#les-ancres"&gt;</code></li>
+</ol>
+
+<div class="note">
+<p><strong>Astuce :</strong> La plupart du temps, les visiteurs d'un site s'attendent à ce qu'un lien ouvre une<strong> nouvelle</strong> page au début de celle-ci (plutôt qu'à un endroit donné, au sein de la page). Certains visiteurs peuvent donc être désorientés lorsqu'ils suivent un lien avec une ancre.</p>
+
+<p>Si vous utilisez des liens avec des ancres, essayez de les mettre en forme afin que les visiteurs du site puissent les reconnaître. Si vous utilisez des ancres entre les pages d'un de vos sites, vous pouvez utiliser {{glossary("JavaScript")}} pour créer un effet de défilement doux.</p>
+</div>
+
+<h3 id="Créer_un_lien_vers_une_ressource_à_télécharger">Créer un lien vers une ressource à télécharger</h3>
+
+<p>Il peut arriver qu'un lien soit utilisé pour télécharger un fichier plutôt que d'ouvrir une nouvelle page. L'attribut <code>download</code> peut être utilisé pour fournir un nom par défaut, à donner au fichier. Voici un exemple de lien de téléchargement pour télécharger Firefox 39 pour Windows :</p>
+
+<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-39.0-SSL&amp;os=win&amp;lang=fr"
+   download="installateur-firefox-39.exe"&gt;
+  Téléchargez Firefox
+&lt;/a&gt;</pre>
+
+<h2 id="Écrire_des_liens_accessibles">Écrire des liens accessibles</h2>
+
+<p>Ajouter des liens à une page est plutôt facile mais ce n'est pas tout. Les liens de vos pages doivent être <em>accessibles </em>à tous vos lecteurs, quel que soit le contexte de lecture et les outils qu'ils utilisent. Les visiteurs qui utilisent des lecteurs d'écran peuvent vouloir sauter de lien en lien, le texte d'un lien doit donc être compréhensible. Voici quelques règles et bonnes pratiques à mettre en œuvre.</p>
+
+<dl>
+ <dt>Le texte d'un lien doit être compréhensible seul</dt>
+ <dd>
+ <p>Les visiteurs qui utilisent des lecteurs d'écran passent de lien en lien. Les moteurs de recherche utilisent le texte des liens pour indexer les pages ciblées. Certains visiteurs regardent les liens plutôt que les autres textes. Pour ces raisons, le texte d'un lien doit avoir un sens sans aucun autre contexte.</p>
+
+ <div class="note">
+ <p><strong>Note :</strong> Dans notre exemple, le texte du lien commence par un verbe d'action. Cela permet au lecteur de sentir une progression dans ces actions et plus généralement de préciser le rôle du lien.</p>
+ </div>
+
+ <p><em><strong>Texte compréhensible </strong>:</em> <a href="https://firefox.com">Télécharger Firefox</a></p>
+
+ <pre class="brush: html">&lt;a href="https://firefox.com/"&gt;
+  Télécharger Firefox
+&lt;/a&gt;</pre>
+
+ <p><em><strong>Mauvais exemple </strong>:</em> <a href="https://firefox.com/">Cliquez ici</a> pour télécharger Firefox</p>
+
+ <pre class="brush: html">&lt;a href="https://firefox.com/"&gt;
+  Cliquez ici
+&lt;/a&gt;
+pour télécharger Firefox
+</pre>
+ </dd>
+ <dt>N'ajoutez pas « lien vers » dans le texte du lien</dt>
+ <dd>
+ <p>Cela n'apporte aucune plus-value. Les lecteurs d'écran indiquent que l'élément est un lien. Les visiteurs qui utilisent directement un navigateur voient que c'est un lien grâce au soulignement et à sa couleur distinctive (et c'est également pour cette raison qu'il ne faut pas retirer la mise en forme d'un lien).</p>
+
+ <p><em><strong>Bon exemple </strong>:</em> <a href="https://developer.mozilla.org/Firefox_OS">En savoir plus sur Firefox OS</a></p>
+
+ <pre class="brush: html">&lt;a href="https://developer.mozilla.org/Firefox_OS"&gt;
+  En savoir plus sur Firefox OS
+&lt;/a&gt;</pre>
+
+ <p><em><strong>Mauvais exemple </strong>:</em> Voici un <a href="https://developer.mozilla.org/Firefox_OS">lien sur Firefox OS</a></p>
+
+ <pre class="brush: html">Voici un
+&lt;a href="https://developer.mozilla.org/Firefox_OS"&gt;
+  lien sur Firefox OS
+&lt;/a&gt;</pre>
+ </dd>
+ <dt>Indiquez la cible du lien plutôt que de copier-coller une URL</dt>
+ <dd>
+ <p>Les URL sont illisibles, encore plus lorsqu'elles sont lues par un lecteur d'écran, lettre par lettre.</p>
+
+ <p><em><strong>Bon exemple </strong>:</em> <a href="https://careers.mozilla.org/university/">Candidatez pour un stage chez Mozilla</a></p>
+
+ <pre class="brush: html">&lt;a href="https://careers.mozilla.org/university/"&gt;
+  Candidatez pour un stage chez Mozilla
+&lt;/a&gt;</pre>
+
+ <p><em><strong>Mauvais exemple :</strong></em> <a href="https://careers.mozilla.org/university/">https://careers.mozilla.org/university/</a></p>
+
+ <pre class="brush: html">&lt;a href="https://careers.mozilla.org/university/"&gt;
+  https://careers.mozilla.org/university/
+&lt;/a&gt;</pre>
+ </dd>
+ <dt>Le texte d'un lien doit être concis</dt>
+ <dd>
+ <p>Les longs textes de lien font perdre en lisibilité et ralentissent la navigation avec les lecteurs d'écrans.</p>
+ <strong><em>Bon exemple </em></strong><em>:</em> Voici une page où vous pouvez <a href="https://www.mozilla.org/firefox/all/" title="Firefox can be download in 90 different languages for 4 different operating systems.">télécharger Firefox</a>
+
+ <pre class="brush: html">Voici une page où vous pouvez
+&lt;a href="https://www.mozilla.org/firefox/all/"&gt;
+  télécharger Firefox
+&lt;/a&gt;
+</pre>
+
+ <p><em><strong>Mauvais exemple </strong>:</em> Voici une page où <a href="https://www.mozilla.org/firefox/all/">vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents</a></p>
+
+ <pre class="brush: html">Voici une page où
+&lt;a href="https://www.mozilla.org/firefox/all/"&gt;
+  vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents
+&lt;/a&gt;
+</pre>
+ </dd>
+ <dt>Indiquez à quoi correspond la cible du lien</dt>
+ <dd>
+ <p>Cela peut paraître évident mais on rencontre parfois des liens dont les textes n'ont rien à voir avec la destination. Soyez explicite, cela simplifiera la navigation pour vos lecteurs et améliorera votre référencement.</p>
+
+ <p><em><strong>Bon exemple :</strong></em><a href="http://getfirefox.org/"> Téléchargez Firefox</a>, le navigateur développé par Mozilla : stable, sûr et rapide.</p>
+
+ <p><em><strong>Mauvais exemple</strong> :</em> <a href="http://getfirefox.org/">Voici une autre application</a> qui améliorera votre navigation sur le Web.</p>
+ </dd>
+</dl>
+
+<h2 id="Perfectionner_ses_liens">Perfectionner ses liens</h2>
+
+<dl>
+ <dt>Faites attention à l'ordre de navigation grâce aux tabulations</dt>
+ <dd>De nombreuses personnes utilisent le clavier pour naviguer sur une page web. La touche de tabulation est une des seules méthodes permettant de passer d'un lien à un autre. Par défaut, l'ordre de cette navigation correspondra à celui du document HTML. Toutefois, il est possible de surcharger cet ordre grâce à l'attribut {{htmlattrxref("tabindex")}}. Attention toutefois à bien utiliser CSS pour que l'ordre visuel (ou celui déterminé par un lecteur d'écran) soit logique pour le lecteur.</dd>
+ <dt>Gardez des liens suffisamment grands</dt>
+ <dd>
+ <p>Assurez-vous que vos liens puissent être déclenchés facilement, à la souris ou au toucher. CSS peut être utilisé pour cela. <a href="http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/">Une recherche basée sur l'expérience des utilisateurs</a> indique que les liens devraient mesurer 72 pixels (45px étant la taille minimale). Attention à ne pas oublier ce point, notamment si vous utilisez une souris ou un pad sur votre poste de travail.</p>
+ </dd>
+ <dt>Soulignez les liens et uniquement les liens</dt>
+ <dd>Lorsque les visiteurs d'un site voient un texte souligné, ils s'attendent à ce que ce texte soit un lien. Pour cette raison, ne soulignez que les liens. Il n'est pas strictement nécessaire de souligner les liens mais <a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F73">la couleur ne suffira pas</a> pour indiquer qu'un texte est un lien.</dd>
+ <dt>Utilisez une couleur distincte et identifiable pour vos liens</dt>
+ <dd>Le bleu est utilisé par défaut pour les liens. Vous pouvez utiliser une autre couleur mais celle-ci doit <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html">former un contraste suffisant avec l'arrière-plan.</a></dd>
+ <dt>Utilisez une mise en forme distincte pour les liens inhabituels</dt>
+ <dd>Utilisez CSS pour indiquer aux visiteurs que le lien a un comportement spécifique (un lien externe, un lien qui ouvre une page dans un nouvel onglet, un lien qui ouvre une page dans une autre langue). Voir également {{htmlattrxref("hreflang","a")}}). Sur MDN, par exemple, on ajoute un symbole devant les liens externes (par exemple <a href="https://en.m.wikipedia.org/wiki/Firefox_OS">l'article de Wikipédia sur Firefox OS</a>).</dd>
+ <dt>Fournissez des cibles et des textes pour tous les liens</dt>
+ <dd>S'il n'y a pas de texte, il ne sera pas possible de voir le lien et les lecteurs d'écran diront juste « lien fin lien ». S'il n'y a pas de cible (pas de {{htmlattrxref("href")}} ou un <code>href</code> vide ou <code>href="#"</code>), le lien ne mènera nulle part.</dd>
+</dl>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>La documentation sur l'élément {{HTMLElement("a")}} dans la référence HTML.</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/créer_une_liste_d_éléments_avec_html/index.html b/files/fr/apprendre/html/comment/créer_une_liste_d_éléments_avec_html/index.html
new file mode 100644
index 0000000000..22dc9776b6
--- /dev/null
+++ b/files/fr/apprendre/html/comment/créer_une_liste_d_éléments_avec_html/index.html
@@ -0,0 +1,170 @@
+---
+title: Créer une liste d'éléments avec HTML
+slug: Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML
+tags:
+  - Beginner
+  - Guide
+  - HTML
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists
+---
+<div class="summary">
+<p>Vous souhaitez ajouter une liste numérotée ou une liste à puces. Quel que soit son type, HTML permet de dresser une liste très rapidement.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à mettre en place des listes (ordonnées et non-ordonnées) avec HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_listes_non-ordonnées_et_les_listes_ordonnées">Les listes non-ordonnées et les listes ordonnées</h2>
+
+<dl>
+ <dt>Les listes non-ordonnées</dt>
+ <dd>
+ <p>Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance) :</p>
+
+ <p><img alt="Croustille, moutarde" src="https://mdn.mozillademos.org/files/11639/3409407112_4348b68ea4_z.jpg" style="height: 281px; width: 423px;" title="Photo par Joseph SARDIN"></p>
+
+ <p>(Photo par <a href="https://www.flickr.com/photos/14328577@N08/">Joseph SARDIN</a>)</p>
+
+ <p>Les listes non-ordonnées apparaissent parfois à des endroits inattendus : les barres de navigation sont par exemple des listes non-ordonnées auxquelles on a appliqué quelques règles CSS pour la mise en forme.</p>
+ </dd>
+ <dt>Les listes ordonnées</dt>
+ <dd>
+ <p>Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée :</p>
+ <a href="https://www.flickr.com/photos/chiotsrun/4457386990/sizes/m/"><img alt="" src="https://farm3.staticflickr.com/2785/4457386990_4d30f85964_d.jpg" style="height: 344px; width: 500px;" title="© Chiot's Run"></a></dd>
+</dl>
+
+<h2 id="Construire_des_listes_avec_HTML">Construire des listes avec HTML</h2>
+
+<p>Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?</p>
+
+<ul>
+ <li>Si oui, alors il faudra utiliser un élément {{HTMLElement('ol')}} pour créer une <strong>liste ordonnée.</strong></li>
+ <li>Sinon, il faudra utiliser un élément {{HTMLElement('ul')}} qui permettra de créer une <strong>liste non-ordonnée.</strong></li>
+</ul>
+
+<h3 id="Ajouter_des_éléments_à_une_liste">Ajouter des éléments à une liste</h3>
+
+<p>Toute la liste sera placée dans les balises {{htmlelement("ol")}} ou {{htmlelement("ul")}}. Chacun des éléments de la liste sera placé à l'intérieur d'un élément {{htmlelement("li")}}. Voici un exemple qui contient les deux types de liste :</p>
+
+<pre class="brush: html">&lt;h1&gt;Guacamole rapide à faire&lt;/h1&gt;
+
+&lt;h2&gt;Ingrédients&lt;/h2&gt;
+&lt;ul&gt;
+  &lt;li&gt;2 avocats (pelés et avec les noyaux retirés)&lt;/li&gt;
+  &lt;li&gt;le jus d'un citron&lt;/li&gt;
+  &lt;li&gt;¼ de concombre, coupé grossièrement&lt;/li&gt;
+  &lt;li&gt;1 petite tomate, coupée&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2&gt;Instructions&lt;/h2&gt;
+&lt;ol&gt;
+  &lt;li&gt;Écrasez délicatement les avocats avec une fourchette&lt;/li&gt;
+  &lt;li&gt;Placez la purée obtenue dans un plat et arrosez avec le jus de citron&lt;/li&gt;
+  &lt;li&gt;Mélangez pour que le jus de citron empêche la purée d'avocat de noircir&lt;/li&gt;
+  &lt;li&gt;Mélangez la tomate et le concombre coupés&lt;/li&gt;
+  &lt;li&gt;Gardez au frais et servir rapidement avec des tortillas&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :</p>
+
+<p>{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}</p>
+
+<h3 id="Comment_modifier_la_numérotation_ou_les_puces">Comment modifier la numérotation ou les puces</h3>
+
+<h4 id="Avec_HTML">Avec HTML</h4>
+
+<ul>
+ <li><strong>Pour commencer une liste avec un autre nombre que 1</strong>, on pourra utiliser l'attribut {{htmlattrxref('start','ol')}} de l'élément {{HTMLElement('ol')}} : <code>&lt;ol start="3"&gt;</code>.</li>
+ <li><strong>Pour décompter plutôt que compter </strong>(par exemple 5-4-3-2-1), on pourra utiliser l'attribut {{htmlattrxref('reversed','ol')}} de l'élément {{HTMLElement('ol')}} : <code>&lt;ol reversed&gt;</code>.</li>
+ <li><strong>Pour utiliser des lettres à la place des chiffres</strong>, on pourra utiliser l'attribut {{htmlattrxref('type','ol')}} de l'élément {{HTMLElement('ol')}} : <code>&lt;ol type="a"&gt;</code> (<code>type="1"</code> affichera des nombres, <code>="a"</code> pour utiliser des lettres minuscules, <code>="A"</code> pour utiliser des lettres majuscules, <code>="i"</code> pour utiliser les chiffres romains en minuscules, <code>="I"</code> pour utiliser les chiffres romains en majuscules).</li>
+ <li><strong>Pour changer la numérotation d'un élément donné</strong>, on pourra utiliser l'attribut {{htmlattrxref('value','li')}} de la balise {{HTMLElement('li')}} : <code>&lt;li value="5"&gt;</code> (les éléments <em>suivants</em> de la liste seront également renumérotés).</li>
+</ul>
+
+<p>Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :</p>
+
+<pre class="brush: html">&lt;ol start="3" type="A"&gt;
+  &lt;li&gt;Je suis premier&lt;/li&gt;
+  &lt;li&gt;Je suis deuxième&lt;/li&gt;
+  &lt;li&gt;Je suis troisième&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Ce qui donne :</p>
+
+<p>{{EmbedLiveSample('Avec_HTML','100%',90)}}</p>
+
+<h4 id="Avec_CSS">Avec CSS</h4>
+
+<p>Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.</p>
+
+<ul>
+ <li><strong>Pour modifier le style de puce ou le style de numérotation, </strong>on pourra utiliser la propriété CSS {{cssxref("list-style-type")}}</li>
+ <li><strong>Pour utiliser une image donnée comme puce,</strong> on pourra utiliser la propriété CSS {{cssxref("list-style-image")}}. Attention toutefois, les images sont plus lourdes (donc plus lentes) et moins adaptatives que le texte.</li>
+</ul>
+
+<p>CSS peut permettre d'obtenir des effets très complexes (comme <a href="/fr/docs/Web/CSS/Compteurs_CSS">un système de comptage personnalisé</a>). Si vous souhaitez apprendre CSS, vous pouvez parcourir <a href="/fr/docs/CSS/Premiers_pas">le Guide CSS</a> et voir <a href="/fr/Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web">comment appliquer des règles CSS à une page web</a>.</p>
+
+<p>Prenons un rapide exemple. Voici une liste HTML non-ordonnée :</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;J'ai un point&lt;/li&gt;
+  &lt;li&gt;J'ai un cercle&lt;/li&gt;
+  &lt;li&gt;J'ai aussi un cercle&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :</p>
+
+<pre class="brush: css">ul {
+  list-style-type: circle;
+}
+
+li:first-child {
+  list-style-type: disc;
+}
+</pre>
+
+<p>Ce code donnera :</p>
+
+<p>{{EmbedLiveSample('Avec_CSS','100%',90)}}</p>
+
+<h3 id="Les_listes_imbriquées">Les listes imbriquées</h3>
+
+<p>On voit souvent plusieurs listes placées les unes dans les autres. Autrement dit, on peut imbriquer des listes (un élément d'une liste sera une liste entière) :</p>
+
+<pre class="brush: html">&lt;ul&gt;
+	&lt;li&gt;Un composant&lt;/li&gt;
+	&lt;li&gt;Un processus :
+		&lt;ol&gt;
+			&lt;li&gt;Étape 1&lt;/li&gt;
+			&lt;li&gt;Étape 2&lt;/li&gt;
+			&lt;li&gt;Étape 3&lt;/li&gt;
+		&lt;/ol&gt;
+	&lt;/li&gt;
+	&lt;li&gt;Un composant&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Cela donnera le résultat suivant :</p>
+
+<p>{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}</p>
+
+<p>Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">inspecter le code HTML</a> du menu MDN qui se situe en haut de cette page.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{HTMLElement("ul")}}</li>
+ <li>{{HTMLElement("ol")}}</li>
+ <li>{{HTMLElement("li")}}</li>
+ <li><a href="http://www.w3.org/TR/html4/struct/lists.html#h-10.1">Des recommandations sur comment utiliser les listes</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/découper_une_page_web_en_sections_logiques/index.html b/files/fr/apprendre/html/comment/découper_une_page_web_en_sections_logiques/index.html
new file mode 100644
index 0000000000..5615e045e9
--- /dev/null
+++ b/files/fr/apprendre/html/comment/découper_une_page_web_en_sections_logiques/index.html
@@ -0,0 +1,228 @@
+---
+title: Découper une page web en sections logiques
+slug: Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques
+tags:
+  - Beginner
+  - DesignAccessibility
+  - HTML
+  - Learn
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+---
+<div class="summary">
+<p>Dans cet article, nous verrons comment structurer un document afin que son plan soit logique pour vous, vos visiteurs dont ceux qui utilisent des technologies d'aide à la navigation.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment structurer un document web grâce aux balises sémantiques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_sections_de_base">Les sections de base</h2>
+
+<p>Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :</p>
+
+<dl>
+ <dt>l'en-tête (<em>header</em>)</dt>
+ <dd>Il s'agit généralement d'un grande bande horizontale, située en haut du site avec un grand titre et/ou un logo. C'est à cet endroit qu'on a toujours la même information sur le site, quelle que soit la page du site sur laquelle on est.</dd>
+ <dt>la barre de navigation</dt>
+ <dd>Celle-ci permet de faire référence aux différentes sections du site via des menus ou des onglets. Comme pour l'en-tête, la barre de navigation sera généralmeent présente sur l'ensemble du site. De nombreux concepteurs web considèrent que la barre de navigation fait partie intégrale de l'en-tête mais ce n'est pas strictement nécessaire.</dd>
+ <dt>le contenu principal</dt>
+ <dd>Une zone importante, située au centre dont le contenu est spécifique selon la page visitée.</dd>
+ <dt>le panneau ou la barre latéral-e (<em>sidebar</em>)</dt>
+ <dd>Il contient des informations périphériques, des liens, des citations, des publicités. Généralement, ce panneau dépend du contenu principal de la page mais on trouve également des panneaux latéraux qui agissent comme des menus de navigation secondaires.</dd>
+ <dt>le pied de page (<em>footer</em>)</dt>
+ <dd>C'est ici qu'on trouvera les informations de contact, de copyright… C'est un endroit où on place des informations communes à l'ensemble du site mais qui ne sont pas primordiales pour le site en tant que tel. Le pied de page est parfois utilisé par les outils de référencement afin de fournir un accès rapide à certaines parties du site.</dd>
+</dl>
+
+<p>Lorsqu'on assemble ces éléments, on arrive à quelque chose qui ressemble <em>grosso modo</em> à :</p>
+
+<p><img alt="[Diagram indicating the divisions with visual cues]" src="https://mdn.mozillademos.org/files/10679/Screenshot%20from%202015-04-29%2016:21:23.png" style="height: 462px; width: 821px;"></p>
+
+<h2 id="HTML_à_la_rescousse">HTML à la rescousse</h2>
+
+<p>Dans le dessin précédent, des indications visuelles permettent d'identifier rapidement l'en-tête, la barre de navigation, le contenu, etc. Cela dit, un site ne se résume pas à son aspect visuel. Une personne qui serait déficiente sur le plan visuel (par exemple quelqu'un qui est daltonien, comme <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a>) pourra tirer partie de concepts comme « barre de navigation » et « contenu principal », en revanche, « taille de police plus grande » et « vert clair » seront inutiles.</p>
+
+<p>Dans votre code HTML, vous pouvez identifier les sections en fonction de leur <em>fonctionnalité</em>. C'est ce que nous verrons dans la suite de cet article. Pour savoir comment ajouter des indications visuelles, vous pouvez consulter <a href="https://developer.mozilla.org/en-US/Learn/CSS/Howto">notre tutoriel CSS</a>.</p>
+
+<p>Pour structurer une page avec cette sémantique, HTML fournit des balises dédiées :</p>
+
+<ul>
+ <li><strong>Pour l'en-tête : </strong>{{htmlelement("header")}}</li>
+ <li><strong>Pour la barre de navigation : </strong>{{htmlelement("nav")}}</li>
+ <li><strong>Pour le contenu principal : </strong>{{htmlelement("main")}} ainsi qu'une association d'éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}} pour créer des sous-sections</li>
+ <li><strong>Pour la barre latérale : </strong>{{htmlelement("aside")}}</li>
+ <li><strong>Pour le pied de page : </strong>{{htmlelement("footer")}}</li>
+</ul>
+
+<div class="note">
+<p>Pour la barre de navigation, on trouvera souvent <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">une liste, non-ordonnée, de liens</a> placée dans un élément <code>&lt;nav&gt;</code>. <a href="https://css-tricks.com/wrapup-of-navigation-in-lists/">Chris Coyier résume les avantages et inconvénients</a> entre les listes et les liens directs.</p>
+</div>
+
+<h3 id="Quel_élément_utiliser">Quel élément utiliser</h3>
+
+<p>Vous pouvez être confronté-e à d'autres scénarios que celui que nous venons de voir. Dans la liste qui suit, nous verrons des descriptions plus détaillées des éléments HTML liés aux sections d'un document :</p>
+
+<ul>
+ <li>{{HTMLElement('main')}} est utilisé pour indiquer du contenu qui appartient <em>exclusivement</em> à cette page. <code>&lt;main&gt;</code> ne doit être utilisé qu'une seule fois par page et se place directement sous l'élément {{HTMLElement('body')}}. Dans l'idéal, il ne devrait pas être imbriqué dans d'autres éléments sous <code>&lt;body&gt;</code>.</li>
+ <li>{{HTMLElement('article')}} contient un bloc de contenu qui pourrait être cohérent sans le reste de la page (par exemple un billet de blog).</li>
+ <li>{{HTMLElement('section')}} agit comme <code>&lt;article&gt;</code> mais dépend du reste de la page, qui fournit alors un contexte. Il est possible d'utiliser des sections pour grouper ou subdiviser des articles. Généralement, pour respecter des bonnes pratiques, on commencera une section avec un élément de <a href="/fr/Apprendre/HTML/Howto/Set_up_a_proper_title_hierarchy">titre</a>.</li>
+ <li>{{HTMLElement('aside')}} contient du contenu qui n'est pas directement lié au contenu principal mais qui peut fournir des informations supplémentaires, liées à ce contenu principal (par exemple une biographie de l'auteur, des liens sur le sujet, etc.).</li>
+ <li>{{HTMLElement('header')}} représente un groupe de contenu introductif. Si c'est un élément inclus dans {{HTMLElement('body')}}, il définit l'en-tête de la page web. En revanche, si c'est un élément inclus dans {{HTMLElement('article')}} ou {{HTMLElement('section')}}, il définit un en-tête propre à cette section (attention à ne pas confondre cette notion avec les <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">niveaux de titre</a>).</li>
+ <li>{{HTMLElement('footer')}} représente un groupe de contenu final. Selon sa position il aura un sens analogue à l'élément {{HTMLElement('header')}}.</li>
+ <li>{{HTMLElement('div')}} est un élément qui peut être utilisé (de préférence avec un attribut {{htmlattrxref('class')}} donné) lorsqu'il n'existe pas d'élément plus spécifique. Les éléments <code>&lt;div&gt;</code> n'ajoutent pas de division sémantique au document, cela peut permettre de manipuler certaines parties d'un document (la classe ou l'identifiant du <code>&lt;div&gt;</code> permettra de le(s) retrouver facilement) via {{glossary("CSS")}} ou {{glossary("JavaScript")}}.</li>
+</ul>
+
+<div class="warning">
+<p><strong>Attention : </strong>Les éléments <code>&lt;div&gt;</code> sont parfois si pratiques qu'on en utilise trop. Ces éléments ne portent aucune sémantique, il ne font qu'encombrer le code HTML. Attention donc à ne les utiliser que lorsqu'il n'existe pas de meilleure solution sémantique. S'ils sont trop présents, cela rendra les mises à jour et la maintenance plus difficiles.</p>
+</div>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Exprimé sous forme de code HTML, le dessin présenté ci-avant correspondrait à :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Document HTML&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+  &lt;!--
+  Voici l'en-tête principal, utilisé sur les
+  différentes pages du site web
+  --&gt;
+  &lt;header&gt;
+    header
+
+    &lt;!--
+    Bien que ce ne soit pas obligatoire, on trouve
+    généralement un menu de navigation dans l'en-tête
+    principal
+    --&gt;
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Navigation&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Qui nous sommes&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Ce que nous faisons&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+
+      &lt;!--
+      Une barre de recherche est un outil de navigation
+      "non-linéaire" au sein du site web.
+      --&gt;
+      &lt;form&gt;
+        &lt;input type="search" name="q" placeholder="Recherchez..."&gt;
+        &lt;input type="submit" value="OK"&gt;
+      &lt;/form&gt;
+    &lt;/nav&gt;
+  &lt;/header&gt;
+
+  &lt;!--
+  Voici le contenu principal
+  --&gt;
+  &lt;main&gt;
+
+    &lt;!--
+    Il contient un article
+    --&gt;
+    &lt;article&gt;
+      &lt;h1&gt;Titre&lt;/h1&gt;
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue
+      ligula as quam viverra nec consectetur ant hendrerit. Donec et
+      mollis dolor. Praesent et diam eget libero egestas mattis sit
+      amet vitae augue. Nam tincidunt congue enim, ut porta lorem
+      lacinia consectetur.&lt;/p&gt;
+
+      &lt;h2&gt;Sous-section&lt;/h2&gt;
+      &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean
+      ut gravida lorem. Ut turpis felis, pulvinar a semper sed,
+      adipiscing id dolor.&lt;/p&gt;
+
+      &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis.
+      Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat
+      nist imperdiet. Ut convallis libero in urna ultrices accumsan.
+      Donec sed odio eros.&lt;/p&gt;
+
+      &lt;h2&gt;Une autre sous-section&lt;/h2&gt;
+      &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus.
+      Cum soclis natoque penatibus et manis dis parturient montes,
+      nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris
+      vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+
+      &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
+      tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
+      ultricied. Curabitur ornare, ligula semper consectetur sagittis,
+      nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
+    &lt;/article&gt;
+
+    &lt;!--
+    le contenu placé sur le côté peut aussi
+    être dans le contenu principal
+    --&gt;
+    &lt;aside&gt;
+      &lt;p&gt;N'hésitez pas à rendre visite à nos sponsors !&lt;/p&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/aside&gt;
+  &lt;/main&gt;
+
+  &lt;!--
+  Enfin, voici le pied de page principal,
+  utilisé sur les différentes pages du site.
+  Note : Ceci est une fausse déclaration de copyright
+  Attention à celles qui sont réelles.
+  --&gt;
+  &lt;footer&gt;
+    ©Copyright 2050 par exemple.com. Tous droits réservés.
+  &lt;/footer&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Les_rôles_ARIA_qu'est-ce_que_c'est">Les rôles ARIA, qu'est-ce que c'est ?</h2>
+
+<p>HTML a initialement été conçu pour définir la <em>structure</em> d'un document. Or, il est désormais utilisé pour créer des applications web.</p>
+
+<p>{{Glossary("ARIA")}} est une méthode qui permet d'indiquer aux technologies d'aide à la navigation qu'un élément HTML possède des fonctionnalités web applicatives.</p>
+
+<p>Certains éléments HTML5 comme {{HTMLElement('nav')}} permettent de contenir des informations de ce genre et rendent (dans ce cas particulier) les attributs ARIA redondants. Cela dit, si vous utilisez des technologies qui ne supportent pas encore HTML5 ou que vous souhaitez utiliser un élément qui n'a pas de sémantique particulière (par exemple {{HTMLElement('div')}}) , vous pouvez appliquer des rôles ARIA de cette façon:</p>
+
+<ul>
+ <li><code>&lt;main role="main"&gt;</code></li>
+ <li><code>&lt;header role="banner"&gt;</code></li>
+ <li><code>&lt;nav role="navigation"&gt;</code></li>
+ <li><code>&lt;aside role="complementary"&gt;</code></li>
+ <li><code>&lt;footer role="contentinfo"&gt;</code></li>
+</ul>
+
+<p>Pour en savoir plus à propos d'ARIA, consultez notre <a href="/fr/docs/Accessibilité/ARIA">documentation.</a></p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{HTMLElement("article")}}</li>
+ <li>{{htmlelement("aside")}}</li>
+ <li>{{htmlelement("div")}}</li>
+ <li>{{htmlelement("footer")}}</li>
+ <li>{{htmlelement("header")}}</li>
+ <li>{{htmlelement("main")}}</li>
+ <li>{{htmlelement("nav")}}</li>
+ <li>{{htmlelement("section")}}</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/définir_des_termes_avec_html/index.html b/files/fr/apprendre/html/comment/définir_des_termes_avec_html/index.html
new file mode 100644
index 0000000000..3e8aa64e90
--- /dev/null
+++ b/files/fr/apprendre/html/comment/définir_des_termes_avec_html/index.html
@@ -0,0 +1,153 @@
+---
+title: Définir des termes avec HTML
+slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+translation_of: Learn/HTML/Howto/Define_terms_with_HTML
+---
+<div class="summary">
+<p>HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :</p>
+
+<blockquote>
+<dl>
+ <dt>Bleu (<em>adjectif</em>)</dt>
+ <dd>La couleur du ciel lors d'un temps clair.<br>
+ <em><q>Le ciel est bleu.</q></em></dd>
+ <dd>Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.<br>
+ <em><q>Un steak bleu s'il vous plaît.</q></em></dd>
+</dl>
+</blockquote>
+
+<p>Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :</p>
+
+<blockquote>
+<p><em><dfn>Firefox</dfn></em> est le navigateur web créé et développé par la Fondation Mozilla.</p>
+</blockquote>
+
+<p>Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.</p>
+
+<h2 id="Comment_écrire_un_description_informelle">Comment écrire un description informelle</h2>
+
+<p>Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.</p>
+
+<p>On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <code>&lt;dfn&gt;</code> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn&gt;Firefox&lt;/dfn&gt; est le navigateur créé et développé par la Fondation Mozilla.&lt;/p&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe <a href="/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">des éléments HTML tout indiqués</a>.</p>
+</div>
+
+<h3 id="Cas_spécifique_les_abréviations">Cas spécifique : les abréviations</h3>
+
+<p>En ce qui concerne les abréviations, il est préférable <a href="/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable">de les identifier séparement</a> grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;dfn&gt;&lt;abbr&gt;HTML&lt;/abbr&gt; (hypertext markup language)&lt;/dfn&gt;
+   est un langage de description utilisé pour structurer des documents sur le Web.
+&lt;/p&gt;</pre>
+
+<div class="note">
+<p>La spécification HTML <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element">met en avant l'attribut <code>title</code></a> pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut <code>title</code> ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également <a href="http://www.w3.org/TR/html/dom.html#attr-title">ce qui est noté dans les spécifications</a>.</p>
+</div>
+
+<h3 id="Améliorer_l'accessibilité">Améliorer l'accessibilité</h3>
+
+<p>{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <code>&lt;dfn&gt;</code> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-discribedby</a></code> pour associer, formellement, un terme à sa définition :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;span id="ff"&gt;
+    &lt;dfn aria-describedby="ff"&gt;Firefox&lt;/dfn&gt;
+    est le navigateur web créé et développé par la Fondation Mozilla.
+  &lt;/span&gt;
+  Vous pouvez le télécharger sur &lt;a href="http://www.mozilla.org"&gt;mozilla.org&lt;/a&gt;
+&lt;/p&gt;</pre>
+
+<p>Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. <code>aria-describedby</code> peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <code>&lt;dfn&gt;</code>). <code>aria-describedby</code> utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.</p>
+
+<h2 id="Comment_construire_une_liste_de_descriptions">Comment construire une liste de descriptions</h2>
+
+<p>Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).</p>
+
+<div class="note">
+<p>Les listes de descriptions <a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">ne doivent pas être utilisées pour retranscrire des dialogues</a>. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici <a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">quelques recommandations pour retranscrire un dialogue dans un document web</a>.</p>
+</div>
+
+<p>Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.</p>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<p>Voici un exemple simple qui dresse une liste de descriptions de plats :</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;jambalaya&lt;/dt&gt;
+    &lt;dd&gt;
+      une entrée à base de riz qui contient généralement
+      du poulet, des saucisses, des fruits de mer et des
+      épices
+    &lt;/dd&gt;
+
+  &lt;dt&gt;sukiyaki&lt;/dt&gt;
+    &lt;dd&gt;
+      une spécialité japonaise à base de fines tranches de
+      viande, de légumes, de nouilles et qui est cuite dans
+      un sauce soja et du saké
+    &lt;/dd&gt;
+
+  &lt;dt&gt;chianti&lt;/dt&gt;
+    &lt;dd&gt;
+      un vin italien, sec, originaire de Toscane
+    &lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<div class="note">
+<p>La structure de base qu'on voit dans cet exemple alterne les termes (<code>&lt;dt&gt;</code>) et leurs descriptions (<code>&lt;dd&gt;</code>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.</p>
+</div>
+
+<h3 id="Améliorer_l'aspect_visuel">Améliorer l'aspect visuel</h3>
+
+<p>Voici comment un navigateur affichera la liste précédente :</p>
+
+<p>{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}</p>
+
+<p>Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :</p>
+
+<pre class="brush: css">dt {
+  font-weight: bold;
+}
+</pre>
+
+<p>Cela permettra d'obtenir le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("dfn")}}</li>
+ <li>{{htmlelement("dl")}}</li>
+ <li>{{htmlelement("dt")}}</li>
+ <li>{{htmlelement("dd")}}</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Comment utiliser l'attribut <code>aria-describedby</code></a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abréviations/index.html b/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abréviations/index.html
new file mode 100644
index 0000000000..0723c45fb2
--- /dev/null
+++ b/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abréviations/index.html
@@ -0,0 +1,269 @@
+---
+title: Identifier et expliquer des abréviations avec HTML
+slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations
+tags:
+  - Beginner
+  - HTML
+  - Learn
+  - OpenPractices
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations
+---
+<div class="summary">
+<p>HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à indiquer des abréviations et des acronymes avec HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="À_propos_des_abréviations">À propos des abréviations</h2>
+
+<p>Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « <em>National Aeronautics and Space Administration</em> ».</p>
+
+<p>Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :</p>
+
+<blockquote>L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.</blockquote>
+
+<div>
+<p>Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.</p>
+</div>
+
+<h2 id="L'élément_&lt;abbr>">L'élément <code>&lt;abbr&gt;</code></h2>
+
+<p>L'élément HTML<em> abbreviation</em> (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous entendez parler de l'élément <code>&lt;acronym&gt;</code>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.</p>
+</div>
+
+<pre class="brush: html">&lt;p&gt;Pouvez-vous m'envoyer les documents &lt;abbr&gt;SVP&lt;/abbr&gt; ?&lt;/p&gt;</pre>
+
+<p>Il est possible d'épeler les abréviations grâce à l'attribut <code>title</code> de l'élément :</p>
+
+<pre class="brush: html">&lt;p&gt;Pouvez-vous m'envoyer les documents &lt;abbr title="s'il vous plaît"&gt;SVP&lt;/abbr&gt; ?&lt;/p&gt;</pre>
+
+<p>Quand faut-il renseigner l'attribut <code>title</code> ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut <code>title</code> que celui de l'élément <code>&lt;abbr&gt;</code>.</p>
+</div>
+
+<p>Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut <code>title</code> dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :</p>
+
+<p>{{EmbedLiveSample("L'élément_&lt;abbr&gt;",'100%',90)}}</p>
+
+<div class="note">
+<p><strong>Important : </strong>Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut <code>title</code>. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de <code>title</code>. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec <code>title</code>.</p>
+</div>
+
+<h2 id="Exercice">Exercice</h2>
+
+<p>Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <code>&lt;abbr&gt;</code> et épelez les avec l'attribut <code>title</code>. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans <a href="/fr/docs/Glossaire">le glossaire</a>.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="exercise"&gt;
+  &lt;main&gt;
+    &lt;div class="instruction"&gt;Identifiez toutes les abréviations avec l'élément &lt;code&gt;&amp;lt;abbr&amp;gt;&lt;/code&gt;&lt;/div&gt;
+    &lt;div class="playground"&gt;&lt;textarea spellcheck="false"&gt;&lt;/textarea&gt;&lt;/div&gt;
+    &lt;div class="checking"&gt;
+      &lt;button&gt;Afficher les résultats&lt;/button&gt;&lt;span class="count"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="result"&gt;Les &lt;abbr title="développeurs"&gt;dev&lt;/abbr&gt; Web utilisent &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; pour structurer des documents, &lt;abbr title="Cascading StyleSheet"&gt;CSS&lt;/abbr&gt; pour les mettre en forme et JavaScript pour ajouter des effets spéciaux grâce à certaines &lt;abbr title="Application Programming Interface"&gt;API&lt;/abbr&gt; dédiées.&lt;/div&gt;
+  &lt;/main&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">body {
+  font: 1em/100% sans-serif;
+  padding: 0;
+  margin: 0;
+}
+
+.exercise {
+  background: #F9FAFB;
+  border-radius: 5px;
+  height: 13em;
+  overflow: hidden;
+}
+
+.instruction, .count {
+  padding: .5em;
+  font-style: italic;
+  font-size: .95em;
+}
+
+.playground {
+  padding: 0 .5em;
+}
+
+.playground textarea {
+  display: block;
+  font-size : 1em;
+  line-height: 1.5em;
+  font-family: monospace;
+  box-sizing: border-box;
+  width     : 100%;
+  padding   : .5em;
+  height    : 9.7em;
+}
+
+.checking {
+  padding: .5em;
+}
+
+.checking button {
+  box-sizing: border-box;
+  box-shadow:inset 0 1px 0 0 #bcd9a3;
+  background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%);
+  background-color:#b4d665;
+  border-radius:5px;
+  border:1px solid #8aa164;
+  cursor:pointer;
+  font-size:1em;
+  padding:.5em;
+  text-decoration:none;
+}
+.checking button:hover {
+  background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%);
+  background-color:#89a646;
+}
+.checking button:active {
+  transform: translate(0, 1px);
+}
+
+.result {
+  height: 10em;
+  line-height: 1.4em;
+  padding: .5em;
+  box-sizing: border-box;
+}
+
+main {
+  transform: translate(0,0);
+  transition: transform 300ms;
+}
+
+.next main {
+  transform: translate(0, -10em);
+}
+
+abbr {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+abbr.ok {
+  color: green;
+}
+
+abbr.ok:after {
+  content: ' ✔︎';
+}
+
+abbr.fail {
+  color: red;
+}
+
+abbr.fail:after {
+  content: ' ✘';
+}
+
+abbr.warning {
+  color: orange;
+}
+
+abbr.warning:after {
+  content: ' !';
+  font-weight: bold;
+}
+</pre>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  var content = document.querySelector('.exercise');
+  var input   = document.querySelector('.playground textarea');
+  var button  = document.querySelector('.checking button');
+  var message = document.querySelector('.checking .count');
+  var abbr    = Array.prototype.slice.call(document.querySelectorAll('.result abbr'));
+  var data    = {
+    pass : 0, fail : 0, warning : 0
+  };
+
+  input.value = document.querySelector('.result').textContent;
+
+  function toggleResult(e) {
+    e.preventDefault();
+    var classList = content.className.split(' ');
+
+    if (classList.length === 1 &amp;&amp; checkResult()) {
+      content.className = 'exercise next';
+      message.innerHTML = data.pass    + ' correctement identifiée(s), ' +
+                          data.warning + ' sans description complète, ' +
+                          data.fail    + ' manquée(s).';
+      button.innerHTML  = 'Essayez à nouveau';
+    } else {
+      content.className = 'exercise';
+      message.innerHTML = '';
+      button.innerHTML  = 'Afficher les résultats';
+    }
+  }
+
+  function checkResult() {
+    var i, j, node = document.createElement('div');
+    node.innerHTML = input.value;
+    data = { pass : 0, fail : 0, warning : 0 };
+
+    var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr'));
+
+    if (userAbbr.length === 0) {
+      alert("Vous n'avez marqué aucune abréviation (il y en a " + abbr.length + " à trouver).");
+      return false;
+    }
+
+    for (i in abbr) {
+      var txt  = abbr[i].textContent;
+      var fail = true;
+
+      for (j in userAbbr) {
+        var userText = userAbbr[j].textContent;
+
+        if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) {
+          fail = false;
+          if (userAbbr[j].title) {
+            data.pass += 1;
+            abbr[i].className = 'ok';
+          } else {
+            data.warning += 1;
+            abbr[i].className = 'warning';
+          }
+        }
+      }
+
+      if (fail) {
+        data.fail += 1;
+        abbr[i].className = 'fail';
+      }
+    }
+
+    return true;
+  }
+
+  button.addEventListener('click', toggleResult);
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Exercice','100%',220)}}</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>La documentation de la référence sur {{HTMLElement("abbr")}}.</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/index.html b/files/fr/apprendre/html/comment/index.html
new file mode 100644
index 0000000000..3db762dc5a
--- /dev/null
+++ b/files/fr/apprendre/html/comment/index.html
@@ -0,0 +1,149 @@
+---
+title: Apprendre à utiliser HTML pour résoudre des problèmes
+slug: Apprendre/HTML/Comment
+tags:
+  - CodingScripting
+  - HTML
+translation_of: Learn/HTML/Howto
+---
+<p>Une fois <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">les bases acquises</a>, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter <a href="/fr/docs/Web/HTML/Reference">notre référence HTML</a>.</p>
+
+<h2 id="Cas_d'utilisation_fréquents">Cas d'utilisation fréquents</h2>
+
+<p>HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Structure_de_base">Structure de base</h3>
+
+<p>En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques">Comment diviser une page web en sections logiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres">Comment organiser une hiérarchie de titres</a></li>
+</ul>
+
+<h3 id="Sémantique_de_base_pour_le_texte">Sémantique de base pour le texte</h3>
+
+<p>Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une liste d'éléments en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">Comment fournir des informations de contact dans une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Comment marquer des abréviations et les rendre compréhensibles</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Comment définir des termes en HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Les_hyperliens">Les hyperliens</h3>
+
+<p>Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une table des matières en HTML</a></li>
+</ul>
+
+<h3 id="Images_et_multimédia">Images et multimédia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter une vidéo à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter un contenu audio à une page web</a></li>
+</ul>
+
+<h3 id="Script_et_mise_en_forme">Script et mise en forme</h3>
+
+<p>HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Comment utiliser JavaScript dans une page web</a></li>
+</ul>
+
+<h3 id="Intégrer_du_contenu">Intégrer du contenu</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">Comment intégrer une page web dans une autre page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">Comment ajouter du contenu Flash dans une page web</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Problèmes_avancés_ou_rares">Problèmes avancés ou rares</h2>
+
+<p>Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Les_formulaires">Les formulaires</h3>
+
+<p>Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre <a href="/fr/docs/Web/Guide/HTML/Formulaires">le guide dédié aux formulaires</a>. Vous pouvez commencer ici :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Comment créer un formulaire web simple</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire web</a></li>
+</ul>
+
+<h3 id="Les_informations_tabulaires">Les informations tabulaires</h3>
+
+<p>Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Comment optimiser le rendu d'un tableau HTML</a></li>
+</ul>
+
+<h3 id="La_représentation_de_données">La représentation de données</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Comment associer du contenu lisible avec des structures de données informatiques arbitraires</a></li>
+</ul>
+
+<h3 id="Interactivité">Interactivité</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Comment créer des boîtes de dialogue avec HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Sémantique_avancée_pour_les_éléments_textuels">Sémantique avancée pour les éléments textuels</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Comment restituer des changements (du texte ajouté/retiré)</a></li>
+</ul>
+
+<h3 id="Images_et_multimédia_avancés">Images et multimédia avancés</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Comment ajouter une cartes de zones cliquables sur une image</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">Comment créer des images dynamiques et interactives</a></li>
+</ul>
+
+<h3 id="L'internationalisation">L'internationalisation</h3>
+
+<p>HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Comment ajouter plusieurs langages sur une seule page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/fr/apprendre/html/comment/intégrer_une_page_web_dans_une_autre_page_web/index.html b/files/fr/apprendre/html/comment/intégrer_une_page_web_dans_une_autre_page_web/index.html
new file mode 100644
index 0000000000..733113c308
--- /dev/null
+++ b/files/fr/apprendre/html/comment/intégrer_une_page_web_dans_une_autre_page_web/index.html
@@ -0,0 +1,149 @@
+---
+title: Intégrer une page web au sein d'une autre page web
+slug: Apprendre/HTML/Comment/Intégrer_une_page_web_dans_une_autre_page_web
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+  - Security
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+<div class="summary">
+<p>Dans cet article, nous verrons comment intégrer une page web dans une autre, tout en minimisant les risques encourus par une telle manipulation.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Connaître les risques encourus lorsqu'on imbrique des pages web entre elles et savoir comment intégrer une page web au sein d'une autre page tout en minimisant ces risques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="L'imbrication_des_pages_quelques_mots_d'histoire">L'imbrication des pages, quelques mots d'histoire</h2>
+
+<p>Imbriquer des pages entre elles peut sembler étrange voire contre-nature mais cela existe depuis les débuts du Web. Lorsque la bande passante était utilisée par des modems 56k (voire moindre), pour réduire le temps de téléchargement, les pages web étaient fragmentées en morceaux appelés <em>frames</em>, tous intégrées dans un <em>frameset</em>. Malheureusement, les <em>frames</em> ont apporté plus de problèmes que de solutions et le concept de <em>frame</em>/<em>frameset</em> a disparu depuis l'apparition d'{{glossary("AJAX")}}.</p>
+
+<p>Cela dit, il existe des cas où imbriquer des pages web est une solution valide. C'est notamment le cas lorsqu'on veut inclure du contenu généré par un utilisateur ou du contenu tiers (des publicités par exemple). Afin d'améliorer la sécurité lors de telles opérations, il est possible d'intégrer le contenu dans une <em>iframe</em> HTML5. Dans certains cas complexes, cela peut également permettre au navigateur d'être plus rapide car les arbres {{glossary("DOM")}} à traiter peuvent être plus légers.</p>
+
+<p>Malgré tout, l'imbrication de pages web a des conséquences significatives sur la sécurité, la performance et l'accessibilité. Avant de la mettre en œuvre, assurez-vous d'en comprendre les enjeux et les risques afin de servir au mieux vos visiteurs.</p>
+
+<h2 id="Une_imbrication_simple">Une imbrication simple</h2>
+
+<p>La plupart du temps, vous aurez besoin d'une {{htmlelement("iframe")}} pour imbriquer des pages web entre elles. Pour commencer, voici quelques questions :</p>
+
+<ul>
+ <li><strong>Quel est le document que j'intègre dans la page web ?</strong> L'URL du document sera la valeur de l'attribut {{htmlattrxref('src','iframe')}}.</li>
+ <li><strong>Quel espace doit occuper le document par rapport à la page web « parente » ? </strong>Pour cette information, on utilisera les attributs {{htmlattrxref('width','iframe')}} et {{htmlattrxref('height','iframe')}}.</li>
+ <li><strong>Que se passe-t-il lorsque l'agent utilisateur ne supporte pas les <em>iframes</em> ?</strong> Dans ces cas, il faut fournir un contenu HTML à utiliser en recours (ça peut, par exemple, être un lien vers le document qui aurait dû être imbriqué), ce contenu sera placé entre les balises <code>&lt;iframe&gt;</code>.</li>
+ <li>Il ne faut pas oublier l'attribut <code>sandbox</code>, hautement conseillé, qui permet de renforcer la sécurité des requêtes effectuées.</li>
+</ul>
+
+<p>Au final, le code ressemblera à :</p>
+
+<pre class="brush: html">&lt;iframe
+ src="https://developer.mozilla.org/fr/docs/Web/JavaScript/"
+ width="100%" height="500"
+ sandbox&gt;
+  &lt;p&gt;
+    &lt;a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/"&gt;
+      Un lien à utiliser dans les cas où les navigateurs ne supportent
+      pas les &lt;i&gt;iframes&lt;/i&gt;.
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/iframe&gt;
+</pre>
+
+<div class="note">
+<p>Afin d'améliorer la vitesse de chargement du site principal, il peut être utile de définir l'attribut <code>src</code> de l'<em>iframe</em> grâce à JavaScript, une fois que le contenu principal a été chargé. De cette façon, votre page sera utilisable plus tôt et le temps de chargement « officiel » de votre page sera réduit (ce qui peut être une métrique importante pour le référencement).</p>
+</div>
+
+<div class="note">
+<p>Si vous n'appréciez pas la bordure épaisse autour de l'{{htmlelement("iframe")}}, vous pouvez utiliser {{cssxref('border')}}<code>: none;</code> dans votre code {{Glossary('CSS')}}.</p>
+</div>
+
+<h2 id="Soyez_couverts">Soyez couverts</h2>
+
+<p>Dans les paragraphes précédents, nous avions insisté sur les aspects liés à la sécurité. Nous y voilà revenus. Les développeurs de navigateurs et les développeurs web ont appris à leurs dépens que les <em>iframes</em> pouvaient être un vecteur d'attaque visant à modifier une page web ou à faire faire aux visiteurs quelque chose à leur insu.</p>
+
+<div class="note">
+<p>{{interwiki('wikipedia','Clickjacking')}} est l'une des attaques connues utilisant les <em>iframes</em> : un attaquant placera une <em>iframe</em> invisible dans le document pour capturer les interactions entre l'utilisateur et le site web. Cela permet de détourner les utilisateurs ou de subtiliser des données sensibles.</p>
+</div>
+
+<p>Voici quelques mesures à prendre pour mieux protéger votre site, de la plus simple à la plus complexe.</p>
+
+<h3 id="Ne_pas_intégrer_de_contenu_tiers">Ne pas intégrer de contenu tiers</h3>
+
+<p>Il peut arriver que vous n'ayez pas le choix, en revanche si vous l'avez, ne pas intégrer de contenu tiers pourra certainement vous épargner des maux de tête. Si vous avez développé le contenu intégré, regardez-y à deux fois. Si le contenu provient de l'extérieur, considérez-le comme dangereux.</p>
+
+<div class="note">
+<p>Un autre aspect que celui de la sécurité intervient ici : la propriété intellectuelle. La plupart des contenus, qu'ils soient en ligne ou non, sont placés sous le droit d'auteur, y compris du contenu dont on penserait qu'il est libre de droit (par exemple, la plupart des images sur <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). <strong>N'affichez jamais du contenu sur votre page web si ce n'est pas le vôtre et que vous n'avez pas eu l'accord expresse de l'auteur. Les peines infligées pour infraction au droit d'auteur peuvent être importantes.</strong> Là encore, on n'est jamais trop prudent.</p>
+
+<p>Si le contenu est placé sous licence, vous devez respecter les termes de la licence. Par exemple, MDN est sous<a href="/en-US/docs/MDN/About#Copyrights_and_licenses"> licence CC-BY-SA</a>. Cela signifie que vous devez <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">créditer les auteurs correctement</a> lorsque vous citez le contenu d'une de ses pages, même si vous y apportez des modifications.</p>
+</div>
+
+<h3 id="Utiliser_HTTPS">Utiliser HTTPS</h3>
+
+<p>{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez utiliser HTTPS dès que possible :</p>
+
+<ol>
+ <li>HTTPS réduit les chances que le contenu distant soit modifié lors du transport ;</li>
+ <li>HTTPS empêche le contenu intégré d'accéder au contenu du document parent, et <em>vice versa</em>.</li>
+</ol>
+
+<p>Les certificats de sécurité ne sont pas donnés et si vous ne pouvez pas vous en procurer un, vous devrez servir votre document parent avec HTTP. Cependant, suite à ce qui a été vu avant,<em> dans aucun cas vous ne devez intégrer du contenu tiers qui soit transporté par HTTP </em>(dans le meilleur des cas, cela se traduira, pour l'utilisateur, par un avertissement dans le navigateur).</p>
+
+<h3 id="Utiliser_l'attribut_sandbox_toujours">Utiliser l'attribut <code>sandbox</code>, toujours</h3>
+
+<p>Si vous souhaitez minimiser les risques, ne donnez <em>que les permissions indispensables nécessaires</em>. Bien entendu, cela s'applique également à votre contenu.</p>
+
+<p>Le contenu qui n'est pas mis dans un bac à sable (<em>sandbox</em>) a trop de droits par défaut (utilisations de scripts, de formulaires, de pop-ups, etc). Tant que c'est possible, imposez toutes les restrictions en utilisant {{htmlattrxref('sandbox','iframe')}} sans paramètres.</p>
+
+<p>Si c'est nécessaire, vous pouvez ajouter certaines permissions, une à une, dans la valeur de <code>sandbox</code>. Attention ! <em>Il ne faut jamais</em> ajouter <code>allow-scripts</code> et <code>allow-same-origin</code> en même temps car le contenu placé en bac à sable pourrait alors désactiver les protections.</p>
+
+<div class="note">
+<p>La mise en bac à sable (<em>sandboxing</em>) n'offre aucune protection si l'attaquant peut détourner les visiteurs et leur faire visiter un contenu dangereux directement (qui n'est pas dans une <code>iframe</code>). S'il y a une probabilité qu'un contenu soit dangereux (par exemple : un contenu généré par un utilisateur), faites en sorte que ce contenu soit servir avec une origine différente de celle du site principal.</p>
+</div>
+
+<h3 id="Établir_des_canaux_de_communication_entre_les_contenus">Établir des canaux de communication entre les contenus</h3>
+
+<p>Dans certains cas, il peut être utile de faire communiquer une <em>iframe</em> avec le document hôte. Mettre en place de tels canaux de communication est assez simple avec JavaScript. Si l'<em>iframe</em> est correctement mise en bac à sable, ni l'<em>iframe</em> ni le document parent ne pourront accéder au DOM de l'autre (sans bac à sable, ça serait possible et incroyablement dangereux). Pour échanger de tels messages, l'API {{domxref('window.postMessage','postMessage')}} est la seule méthode sécurisée.</p>
+
+<h3 id="Configurer_les_directives_CSP">Configurer les directives CSP</h3>
+
+<p>{{Glossary("CSP")}} fournit <a href="/fr/docs/Web/Security/CSP/CSP_policy_directives">un ensemble d'en-têtes HTTP</a> conçus pour améliorer la sécurité d'un document HTML. Lorsqu'on utilise des <em>iframe</em>, il faut s'assurer de <a href="/fr/docs/Web/HTTP/X-Frame-Options">configurer son serveur pour envoyer un en-tête <code>X-Frame-Options</code> approprié</a>. Cela peut empêcher d'autres sites web d'intégrer le contenu de votre page dans d'autres pages web (ce qui serait une première étape pour faire du {{interwiki('wikipedia','clickjacking')}} ou effectuer d'autres attaques). Pour plus d'informations sur ce sujet, <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">le billet de Frederik Braun (en anglais)</a> est particulièrement intéressant.</p>
+
+<h2 id="Placez_le_code_HTML_dans_un_bac_à_sable_(sandboxing)">Placez le code HTML dans un bac à sable (<em>sandboxing</em>)</h2>
+
+<p>Nous avons déjà évoqué la mise en bac à sable pour les contenus embarqués mais cela peut également concerner votre propre contenu. Il est parfois avantageux d'aller encore plus loin en découpant sa page web en plusieurs <em>iframes</em>, chacune mise dans un bac à sable, en gérant un minimum de privilèges et en les coordinant depuis le document principal (<a href="http://www.html5rocks.com/tutorials/security/sandboxed-iframes/">Mike West décrit ce sujet en détails</a> et explique comment la séparation des privilèges permet d'améliorer le niveau de sécurité). Découpage une page de cette façon peut également permettre d'obtenir de meilleures performances car les arbres {{glossary("DOM")}} manipulés sont plus légers.</p>
+
+<p>En utilisant les deux nouveaux attributs d'<code>iframe</code> : {{htmlattrxref('seamless','iframe')}} et {{htmlattrxref('srcdoc','iframe')}}, vous pouvez intégrer des fragments de code HTML dans un document HTML. Pour supporter les navigateurs historiques, il est possible de fournir un contenu alternatif via une URL avec <code>src</code> (cela peut être une <a href="/fr/docs/Web/HTTP/data_URIs">URI de données</a>). Voici un exemple simple :</p>
+
+<pre class="brush: html">&lt;iframe
+ sandbox
+ seamless
+ src="fallback.html"
+ srcdoc="
+   &lt;p&gt;
+     Ce paragraphe est dans un bac à sable.
+   &lt;/p&gt;
+ "&gt;
+  Du contenu pour les navigateurs qui ne supportent pas
+  les iframes.
+&lt;/iframe&gt;</pre>
+
+<div class="note">
+<p>Pour l'attribut <code>srcdoc</code>, les quotes doivent être échappées (<code>&amp;quot;</code>) et les ampersandes doivent être doublement échappées (<code>&amp;amp;amp;</code> pour représenter une ampersande simple (&amp;)).</p>
+</div>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement('iframe')}}</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/mettre_en_place_une_hiérarchie_de_titres/index.html b/files/fr/apprendre/html/comment/mettre_en_place_une_hiérarchie_de_titres/index.html
new file mode 100644
index 0000000000..454bef6dcf
--- /dev/null
+++ b/files/fr/apprendre/html/comment/mettre_en_place_une_hiérarchie_de_titres/index.html
@@ -0,0 +1,94 @@
+---
+title: Mettre en place une hiérarchie de titres
+slug: Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres
+tags:
+  - Beginner
+  - HTML
+  - Learn
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<p class="summary">Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.</p>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment utiliser des titres et les hiérarchiser dans un document web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pourquoi_utiliser_des_titres">Pourquoi utiliser des titres ?</h2>
+
+<p>Les titres forment le squelette d'un texte sans fournir de longues explications. Prenons un exemple simple : même si ces deux textes sont en anglais, lequel semble le plus clair ?</p>
+
+<p><img alt="[Picture comparing a document with headings to a document without headings]" src="https://mdn.mozillademos.org/files/10717/Screenshot%20from%202015-05-05%2013:47:50.png" style="width: 100%;"></p>
+
+<p>Voilà une bonne partie de la réponse à la question posée avant.</p>
+
+<p>Comme vous pouvez le voir, un lecteur utilisera les titres et leurs niveaux pour déterminer quel contenu est présent et s'il est utile de poursuivre la lecture pour trouver le contenu recherché. Nous passons généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">très peu de temps sur une page web</a> et consulter les titres fait partie du processus que nous déroulons pour déterminer s'il faut rester sur la page ou la quitter. Pour cette raison, il est préférable d'avoir une organisation claire pour les titres afin que le lecteur se repère facilement et continue à consulter la page.</p>
+
+<p>Vous faut-il plus d'arguments ? Savez-vous que certaines personnes ne lisent pas les pages web mais les écoutent grâce à des logiciels appelés {{interwiki('wikipedia',"Lecteur_d'écran","lecteurs d'écrans")}}. Ces logiciels permettent d'accéder rapidement à un contenu textuel donné. Parmi les techniques utilisées par ces logiciels, de nombreuses se basent sur les titres. Si les titres ne sont pas définis, pensez-vous que ces visiteurs prendront la peine d'écouter l'intégralité du document ?</p>
+
+<p>Enfin, le plan d'un document, composé des titres, est souvent utilisé par les moteurs de recherche pour déterminer la pertinence d'un article sur un sujet de recherche donné. Chaque niveau de titre (de 1 à 6) aura un « poids » différent : un titre de niveau 1 sera jugé plus pertinent qu'un titre de niveau 2 et ainsi de suite.</p>
+
+<h2 id="Les_titres_HTML">Les titres HTML</h2>
+
+<p>HTML fournit des éléments qui permettent de créer des titres dans des documents HTML : ce sont les éléments {{htmlelement('h1')}}, {{htmlelement('h2')}} et jusqu'à {{htmlelement('h6')}}.</p>
+
+<h3 id="Ajouter_le_titre_principal">Ajouter le titre principal</h3>
+
+<p>Au début du document, vous pouvez écrire le titre de plus au niveau entre des balises {{htmlelement('h1')}} :</p>
+
+<pre class="brush: html">&lt;h1&gt;Améliorez vos compétences sur le Web !&lt;/h1&gt;</pre>
+
+<p>Si vous considérez le document comme un arbre, le tronc sera le titre <code>&lt;h1&gt;</code>. Cela implique qu'un document ne doit avoir qu'un seul titre de niveau 1. Continuons les explications car ce sujet revient souvent dans les discussions. D'un point de vue technique, rien ne vous empêche d'utiliser plusieurs titres de niveau 1 dans vos documents. Cependant, d'un point de vue sémantique, cela serait bizarre car un titre de niveau 1 introduit un sujet totalement différent. Si vous jugez nécessaire d'avoir plusieurs titres de niveau 1 dans votre document, cela signifie peut être que le document doit être découpé en plusieurs documents dont chacun aurait un titre de niveau 1 distinct.</p>
+
+<p>Un autre argument en faveur d'un unique titre de niveau 1 serait l'impact sur le référencement. <a href="http://www.searchenginejournal.com/in-2014-how-important-is-an-h1-tag-for-seo/">Ce point est plus discutable</a> car les algorithmes des moteurs de recherche sont des secrets bien gardés, cela dit, certaines observations tendent à montrer que les niveaux de titres ont un impact sur le classement d'un site et que plus un niveau de titre est utilisé, plus l'impact sur le classement s'affaiblit.</p>
+
+<div class="note">
+<p><strong>Attention :</strong> On voit souvent les titres de niveau 1 utilisés pour mettre en avant le logo d'un site web ou sa marque. Comme ces informations ne sont pas les informations les plus structurantes ni les plus importantes, il est préférable d'éviter ce genre de détournement.</p>
+</div>
+
+<h3 id="Ajouter_des_sous-titres">Ajouter des sous-titres</h3>
+
+<p>Sauf si votre document est très court, vous devrez le découper en sections. Chaque section commence avec un titre {{htmlelement("h2")}} :</p>
+
+<pre class="brush: html">...
+&lt;h2&gt;Organisez la structure de votre document avec HTML&lt;/h2&gt;
+...
+&lt;h2&gt;Ajustez le style de votre document avec CSS&lt;/h2&gt;
+...</pre>
+
+<p>Si besoins, vous pouvez découper vos sections en sous-sections et ainsi de suite en utilisant des éléments {{htmlelement("h3")}} jusqu'à {{htmlelement("h6")}}. Cela dit, si vous arrivez à un niveau de découpage avec {{htmlelement("h4")}} voire inférieur, cela peut signifier que votre document est trop long et qu'il serait préférable de le découper pour en faciliter la lecture.</p>
+
+<p>Lorsque vous créer des sections et sous-sections, il y a quelques points à prendre en compte afin d'améliorer l'expérience du lecteur :</p>
+
+<dl>
+ <dt>Gardez une hiérarchie cohérente</dt>
+ <dd>Autrement dit, cela signifie que vous devriez éviter de sauter des niveaux de titres (par exemple passer directement d'un niveau <code>&lt;h1&gt;</code> ou <code>&lt;h2&gt;</code> à un niveau <code>&lt;h4&gt;</code>). Vos lecteurs,<a href="https://www.youtube.com/watch?v=AmUPhEVWu_E"> notamment ceux qui utilisent des lecteurs d'écran</a>, pourraient penser que quelque chose manque à votre page.</dd>
+ <dt>Utilisez les niveaux de titre pour leur sémantique et non pour leur mise en forme</dt>
+ <dd>Le rôle de HTML est de fournir des informations sémantiques (sur le sens). La mise en forme par défaut d'un élément HTML donné n'a pas de rôle particulier et peut être modifiée avec {{Glossary("CSS")}}. Lorsqu'on s'occupe des titres, on peut utiliser <a href="/fr/docs/Web/CSS/font-size">la propriété CSS <code>font-size</code></a> afin de modifier la taille de la police utilisée.</dd>
+ <dt>N'utilisez pas les niveaux de titres pour représenter des sous-titres ou des slogans</dt>
+ <dd>Une des notions qui manque à HTML est le fait de ne pas avoir d'éléments particulier pour représenter un sous-titre ou un slogan. Certains développeurs utilisent les éléments de titre à cet effet mais cela entraîne des cassures dans la hiérarchie des titres et pose des problèmes d'accessibilité. Bien qu'il y ait quelques tentatives pour résoudre ce problème avec l'élément {{HTMLElement('hgroup')}}, il est préférable d'utiliser un élément {{htmlelement("p")}} ou {{htmlelement("span")}} avec un attribut {{htmlattrxref('class')}} donné.</dd>
+</dl>
+
+<h2 id="Gérer_des_niveaux_de_titre_dynamiques">Gérer des niveaux de titre dynamiques</h2>
+
+<p>L'élément {{htmlelement("section")}} est apparu avec HTML5 pour marquer les différentes sections d'un document HTML, chacune de ces sections étant <em>a priori</em> suivie d'un titre approprié.</p>
+
+<p>Supposons que votre plan évolue (ce qui peut arriver si le HTML est généré de façon dynamique par le serveur) et que vous décidiez que certains <code>&lt;h3&gt;</code> devraient en fait être des <code>&lt;h2&gt;</code>. De même, si vous compilez plusieurs pages web en un e-book, cela peut être ennuyant que d'avoir à revoir tous les différents titres.</p>
+
+<p>Si vos <code>&lt;section&gt;</code> sont imbriquées de façon logique, HTML5 indique que chaque section peut commencer avec <code>&lt;h1&gt;</code> et que ceux-ci continueront à former un plan valide. L'idée est plutôt bonne mais souffre de quelques inconvénients : le code est moins lisible et il n'est plus possible d'appliquer une mise en forme différente pour les <code>&lt;h1&gt;</code> si ceux-ci n'ont pas la même importance.</p>
+
+<p>Pour plus de détails, lire l'article <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sectionnement et plan d'un document HTML5</a>.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">Les éléments de titre</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html b/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html
new file mode 100644
index 0000000000..c821781539
--- /dev/null
+++ b/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html
@@ -0,0 +1,188 @@
+---
+title: Mettre l'accent sur un contenu ou indiquer qu'un texte est important
+slug: >-
+  Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important
+tags:
+  - Beginner
+  - Composing
+  - Guide
+  - HTML
+  - Learn
+  - OpenPractices
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance
+---
+<p class="summary">Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.</p>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML ismple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment marquer des passages de texte contenus dans votre document qui seraient spéciaux ou particulièrement importants pour les lecteurs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les dialogues ne se résument pas uniquement à des séries de mots : le ton importe également. Dans les œuvres couchées sur le papier, ce sont la ponctuation et la mise en forme qui permettent de retranscrire ces informations. Quelle que soit l'outil utilisé, le but est d'ajouter des informations implicites.</p>
+
+<p>Voici un exemple simple :</p>
+
+<blockquote>
+<p>Je suis en retard.</p>
+
+<p>Je suis en retard ?</p>
+</blockquote>
+
+<p>Dans cet exemple, la première phrase exprime une connaissance (je sais que je suis en retard) alors que la seconde évoque un doute ou pose une question. On remarquera que l'ordre des mots n'a pas changé, seule la ponctuation change cette nuance. À l'oral, cela se serait traduit par un changement de ton.</p>
+
+<p>La mise en forme permet également d'ajouter des nuances. Voici un deuxième exemple :</p>
+
+<blockquote>
+<p>Je suis sympa, même si parfois je suis méchant.</p>
+</blockquote>
+
+<p>Cette phrase est plutôt neutre. Ajoutons quelque chose pour changer ça :</p>
+
+<blockquote>
+<p>Je suis <em>sympa</em>, même si parfois je suis méchant.</p>
+
+<p>Je suis sympa, même si parfois je suis <em>méchant</em>.</p>
+</blockquote>
+
+<p>Remarquez-vous le changement que cela apporte ? L'italique accentue l'adjectif « sympa » ou « méchant ». En imprimerie, l'accentuation est portée par la mise en forme (ici la mise en italique). Il faudrait plus de contexte pour saisir tout le sens de cette phrase mais la mise en forme ajoute clairement une intonation.</p>
+
+<p>Cet article ne porte pas sur la mise en forme du document. Ce n'est pas le rôle de HTML que de mettre en forme un document (en revanche, la tâche est toute indiquée pour {{Glossary('CSS')}} qui vous aidera à contrôler l'aspect visuel de votre page web). Ici, nous verrons comment ajouter le <em>sens</em> porté par la mise en forme. Or, ajouter du sens est <em>le</em> rôle de HTML. Une fois que le sens est présent dans le document, alors, on pourra le mettre en forme grâce à <a href="/fr/Apprendre/CSS/Howto">CSS</a>.</p>
+
+<p>Ici, nous évoquerons trois nuances qui peuvent être exprimées par HTML : <em>l'emphase</em>, <em>l'importance</em> et <em>la pertinence</em><em>.</em></p>
+
+<h2 id="L'emphase">L'emphase</h2>
+
+<p>L'élément {{htmlelement('em')}} (<code>&lt;em&gt;</code> pour <em>emphase</em>) permet d'exprimer une accentuation particulière sur un ou plusieurs mots (qui se serait traduite à l'oral par un changement de ton).</p>
+
+<pre class="brush: html">Allons-nous &lt;em&gt;au cinéma&lt;/em&gt; ce soir ?
+<code>Allons-nous au cinéma &lt;em&gt;ce soir&lt;/em&gt;</code> ?
+</pre>
+
+<p>Par défaut, un navigateur graphique affiche le texte contenu dans un élément <code>&lt;em&gt;</code> en italique mais cette mise en forme peut être changée avec CSS. Les lecteurs d'écran utiliseront un ton différent pour lire ce texte. Pour résumer, <em><code>&lt;em&gt;</code> signifie emphase et pas italique.</em></p>
+
+<h2 id="L'importance">L'importance</h2>
+
+<p>L'élément {{htmlelement("strong")}} permet d'indiquer une importance forte (c'est en quelque sorte une emphase renforcée).</p>
+
+<pre class="brush: html"><code>&lt;p&gt;
+  &lt;strong&gt;Ne pas&lt;/strong&gt; toucher ces produits chimiques.
+  Ces produits chimiques sont &lt;strong&gt;corrosifs !&lt;/strong&gt;
+&lt;/p&gt;</code>
+</pre>
+
+<p>Ici aussi, par défaut les navigateurs graphiques afficheront le texte contenu dans <code>&lt;strong&gt;</code> en gras. Mais là encore, <em><code>&lt;strong&gt;</code> signifie « très important » et pas « gras » !</em> La mise en forme pourra être adaptée librement avec CSS. De même, un lecteur d'écran lira le texte différemment car celui-ci est important (et non parce qu'il est affiché en gras).</p>
+
+<h2 id="La_pertinence">La pertinence</h2>
+
+<p><code>&lt;strong&gt;</code> permet d'indiquer du texte qui est important pour le contexte courant. L'élément {{htmlelement("mark")}}, en revanche, signifie que le texte est pertinent par rapport au contenu destiné au lecteur. Un exemple courant est l'utilisation des résultats liés à une recherche :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  « ce » apparaît 3 fois dans le texte :
+  &lt;mark&gt;Ce&lt;/mark&gt; chat a tué &lt;mark&gt;ce&lt;/mark&gt;
+  rat et &lt;mark&gt;ce&lt;/mark&gt; moineau.
+&lt;/p&gt;
+</pre>
+
+<p>Là encore, la mise en forme appliquée peut être modifiée. Par défaut, le texte sera affiché sur un fond jaune :</p>
+
+<p>{{EmbedLiveSample('La_pertinence', '100%', 64)}}</p>
+
+<div class="note">
+<p>Attention lorsqu'on utilise <code>&lt;mark&gt;</code> pour marquer des résultats liés à une recherche. Si la recherche renvoie des correspondances partielles, cela pourrait casser les éléments <code>&lt;mark&gt;</code>. Par exemple : <code>Le chat a couru après &lt;mark&gt;ce&lt;/mark&gt;s oiseaux</code>. Cela entraînera des problèmes d'accessibilité car les lecteurs d'écran ne sauront pas traiter (ou traiteront mal) les mots ainsi découpés.</p>
+</div>
+
+<h2 id="Les_éléments_associés_à_la_sémantique">Les éléments associés à la sémantique</h2>
+
+<p>Si vous souhaitez afficher un texte avec une mise en forme particulière, pensez d'abord au sens que vous souhaitez communiquer. Si le sens peut être transmis par {{htmlelement('em')}}, {{htmlelement('strong')}} ou {{htmlelement("mark")}}, utilisez ces éléments (plutôt que CSS seul, ce qui serait une mauvaise pratique).</p>
+
+<p>Il existe d'autres cas pour lesquels on affiche habituellement le texte en italique ou en gras et qui correspondent à une sémantique particulière qui peut être transmise grâce à des éléments HTML :</p>
+
+<ul>
+ <li>{{htmlelement("cite")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les titres d'œuvres citées</a></li>
+ <li>{{htmlelement("dfn")}} pour <a href="/fr/Apprendre/HTML/Comment/Définir_des_termes_avec_HTML">la première occurence d'un terme</a></li>
+ <li>{{htmlelement("q")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les citations dans le texte du document</a></li>
+ <li>{{htmlelement("var")}} pour <a href="/fr/Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML">les variables mathématiques</a></li>
+</ul>
+
+<p>HTML ne permet pas de couvrir tous les cas de figures (sinon utiliser HTML correctement serait un calvaire de perfectionnisme). En règle générale, si vous souhaitez afficher du texte de façon différente et qu'il existe un élément HTML pour transmettre ce sens : utilisez-le, sinon vous pouvez utiliser l'élément neutre {{htmlelement("span")}} en spécifiant sa sémantique avec l'attribut {{htmlattrxref("class")}} et en le mettant en forme grâce à CSS.</p>
+
+<p>Les éléments que nous avons évoqués jusqu'à présent (à l'exception de <code>&lt;span&gt;</code>) ont tous une sémantique claire. En revanche, cela peut être plus ambigu avec les éléments {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}}. Ces éléments HTML permettent d'écrire du texte en gras, italique ou de le souligner. Ils sont apparus lorsque CSS n'existait pas ou avant qu'il ne soit supporté largement. Avec HTML5, ces éléments ont vu leur sémantique précisée.</p>
+
+<p>Voici la règle à respecter : s'il n'existe pas d'élément approprié permettant de retranscrire précisément le sens d'un texte qui serait généralement affiché en gras, italique ou souligné, alors on pourra utiliser <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> ou <code>&lt;u&gt;</code> à la place de <code>&lt;span&gt;</code>. Attention toutefois à ne pas oublier l'accessibilité : la mise en italique n'est pas particulièrement utile pour les personnes utilisant des lecteurs d'écran ou pour les personnes qui utilisent un alphabet non latin.</p>
+
+<ul>
+ <li>{{HTMLElement('i')}} permet généralement de retranscrire du texte placé en italique : des termes d'une langue étrangère, des dénominations taxonomiques, des termes techniques, des pensées, etc.</li>
+ <li>{{HTMLElement('b')}} permet de retranscrire du texte généralement affiché en gras : des mots-clés, des noms de produits, etc.</li>
+ <li>{{HTMLElement('u')}} permet de retranscrire des noms propres, des fautes d'orthographe</li>
+</ul>
+
+<div class="note">
+<p>Léger avertissement à propos du soulignement : <strong>les visiteurs associent fortement le soulignement avec des hyperliens.</strong> De fait, on ne soulignera généralement que les liens d'une page. <code>&lt;u&gt;</code> ne doit être utilisé que lorsque la sémantique qu'il porte est sans équivoque. Dans ces cas, CSS pourra être utilisé pour définir un motif de soulignement différent, plus approprié. L'exemple qui suit illustre comment obtenir ce résultat.</p>
+</div>
+
+<pre class="brush: html">&lt;!-- Des noms scientifiques --&gt;
+&lt;p&gt;
+  Le colibri à gorge rubis (&lt;i&gt;Archilocus colubris&lt;/i&gt;)
+  est l'espèce de colibri la plus répandue en Amérique
+  du Nord orientale.
+&lt;/p&gt;
+
+&lt;!-- Des termes étrangers --&gt;
+&lt;p&gt;
+  Le menu comportait de nombreux termes exotiques comme
+  &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;, &lt;i lang="id"&gt;nasi goreng&lt;/i&gt;
+  et &lt;i lang="en"&gt;pancakes&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- Une faute d'orthographe --&gt;
+&lt;p&gt;
+  Un jour, j'écrirai &lt;u class="erreur-orthographe"&gt;mieu&lt;/u&gt;.
+&lt;/p&gt;
+
+&lt;!-- Des mots-clés mis en avant dans un mode d'emploi --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Tranchez&lt;/b&gt; le pain en deux tranches.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Insérez&lt;/b&gt; une tranche de tomate et
+    une feuille de salade entre les tranches.
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<div id="instructions-with-b">
+<pre class="brush: css">/* Voici des mises en forme alternatives
+permettant au lecteur de repérer la différence */
+
+b {
+  font-weight:  normal;
+  font-variant: small-caps;
+}
+
+.erreur-orthographe {
+  text-decoration: underline red wavy;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Les_éléments_associés_à_la_sémantique', '100%',192) }}</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("em")}}</li>
+ <li>{{htmlelement("strong")}}</li>
+ <li>{{htmlelement("mark")}}</li>
+ <li>{{htmlelement("b")}}</li>
+ <li>{{htmlelement("i")}}</li>
+ <li>{{htmlelement("u")}}</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html b/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html
new file mode 100644
index 0000000000..d67fd6a93d
--- /dev/null
+++ b/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html
@@ -0,0 +1,79 @@
+---
+title: Utiliser les attributs de données
+slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes
+tags:
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. <a href="/fr/docs/Web/HTML/Attributs_universels#attr-data-*">Les attributs <code>data-*</code></a> nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Syntaxe_HTML">Syntaxe HTML</h2>
+
+<p>La syntaxe est simple. Tout attribut d'un élément dont le nom commence par <code>data-</code> est un attribut de données (<em>data attribute</em>). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :</p>
+
+<pre class="brush: html">&lt;article
+  id="voitureelectrique"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="voitures"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Accéder_via_du_code_JavaScript">Accéder via du code JavaScript</h2>
+
+<p>Lire les valeurs de ces attributs avec du <a href="/fr/docs/Web/JavaScript">JavaScript</a> est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Pour obtenir un attribut <code>data</code> avec l'objet <code>dataset</code>, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe <code>data-</code> (notez que les tirets sont convertis en <em><a href="https://fr.wikipedia.org/wiki/CamelCase">camelCase</a></em>).</p>
+
+<pre class="brush: js">var article = document.getElementById('voitureelectrique');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "voitures"</pre>
+
+<p>Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre <code>article.dataset.columns = 5</code> mettrait l'attribut à <code>"5"</code>.</p>
+
+<h2 id="Accéder_via_du_code_CSS">Accéder via du code CSS</h2>
+
+<p>Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les <a href="/fr/docs/Web/CSS">CSS</a>. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des <a href="/fr/docs/Web/CSS/content">contenus générés</a> en CSS avec la fonction {{cssxref("attr")}} :</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Vous pouvez également utiliser les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">sélecteurs d'attributs</a> en CSS pour modifier les styles en fonction des données :</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Tout cela est visible dans l'exemple<a href="https://jsbin.com/ujiday/2/edit"> JSBin</a>. </p>
+
+<p>Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">capture vidéo d'écran</a> où sont utilisés les contenus générés et les transitions CSS (<a href="https://jsbin.com/atawaz/3/edit">exemple JSBin</a>).</p>
+
+<p>Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.</p>
+
+<h2 id="Problèmes">Problèmes</h2>
+
+<p>Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. </p>
+
+<p>Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  <a href="https://caniuse.com/#feat=dataset">ne prennent pas en charge le <code>dataset</code></a>. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la <a href="https://jsperf.com/data-dataset">la performance de lecture des attributs de données</a>, au stockage dans des structures de données JavaScript est assez faible. Utiliser un <code>dataset</code> est même plus lent que lire les données avec <code>getAttribute()</code>.</p>
+
+<p>Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.</p>
+
+<p>Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cet article est une adaptation de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">« Utiliser les attributs de données en JavaScript et CSS »</a> publié sur hacks.mozilla.org (en anglais).</li>
+ <li>Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez {{domxref("SVGElement.dataset")}} et {{SVGAttr("data-*")}} pour davantage d'informations.</li>
+ <li><em><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a></em> (Sitepoint) (en anglais)</li>
+</ul>
diff --git a/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html b/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html
new file mode 100644
index 0000000000..7db20d6d76
--- /dev/null
+++ b/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html
@@ -0,0 +1,99 @@
+---
+title: Utiliser JavaScript au sein d'une page web
+slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web
+tags:
+  - Beginner
+  - HTML
+  - JavaScript
+  - OpenPractices
+translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage
+---
+<div class="summary">
+<p>Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="À_propos_de_JavaScript">À propos de JavaScript</h2>
+
+<p>{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.</p>
+
+<div class="note">
+<p>Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">les bases de JavaScript</a>. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter <a href="/en-US/docs/Web/JavaScript/Guide">le Guide JavaScript</a>.</p>
+</div>
+
+<h2 id="Comment_déclencher_le_code_JavaScript_depuis_le_document_HTML">Comment déclencher le code JavaScript depuis le document HTML</h2>
+
+<p>Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser <code>script</code> : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.</p>
+
+<h3 id="Faire_référence_à_un_script_externe">Faire référence à un script externe</h3>
+
+<p>Généralement, un script est écrit dans un fichier <code>.js</code> à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut <code>src</code> pointant vers le fichier du script en utilisant l'URL du fichier :</p>
+
+<pre class="brush: html">&lt;script src="chemin/vers/le/script.js"&gt;&lt;/script&gt;</pre>
+
+<h3 id="Inscrire_le_code_JavaScript_dans_le_document_HTML">Inscrire le code JavaScript dans le document HTML</h3>
+
+<p>Il est également possible d'insérer du code JavaScript directement dans la balise <code>&lt;script&gt;</code> sans fournir d'attribut <code>src</code>.</p>
+
+<pre class="brush: html">&lt;script&gt;
+window.addEventListener('load', function () {
+  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
+});
+&lt;/script&gt;</pre>
+
+<p>Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :</p>
+
+<ul>
+ <li>de rester concentré-e sur le contenu en cours</li>
+ <li>d'écrire du HTML qui se suffit à lui-même</li>
+ <li>d'écrire des applications JavaScript structurées</li>
+</ul>
+
+<h2 id="Utiliser_les_scripts_de_façon_accessible">Utiliser les scripts de façon accessible</h2>
+
+<p>L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :</p>
+
+<ul>
+ <li><strong>Tout le contenu d'un document doit être disponible sous forme de texte (structuré).</strong> HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en <a href="/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML">listes non ordonnées</a> de <a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">liens</a>.</li>
+ <li><strong>Toutes les fonctionnalités doivent être accessibles depuis le clavier.</strong>
+  <ul>
+   <li>Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.</li>
+   <li>Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles  via le clavier.</li>
+   <li>Testez votre site en utilisant uniquement le clavier.</li>
+  </ul>
+ </li>
+ <li><strong>N'utilisez pas de limites de temps arbitraires.</strong> Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée.</li>
+ <li><strong>Les animations doivent être courtes et légères, sans clignotement.</strong> Les clignotements peuvent agacer, ou pire, <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">entraîner des crises d'épilepsie</a>. Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler.</li>
+ <li><strong>Laissez les utilisateurs initier les interactions.</strong> Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement.</li>
+ <li><strong>Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé.</strong> Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit.
+  <ul>
+   <li><em>A minima</em>, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : <code>&lt;noscript&gt;Pour utiliser ce site, merci d'activer JavaScript.&lt;/noscript&gt;</code></li>
+   <li>Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur.</li>
+   <li>Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement.</li>
+   <li>
+    <p><em>Puisque tout le monde, ou presque, a JavaScript activé, <code>&lt;noscript&gt;</code> ne représente donc pas une excuse pour écrire des scripts inaccessibles.</em></p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("script")}}</li>
+ <li>{{htmlelement("noscript")}}</li>
+ <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">Une introduction pour utiliser JavaScript de façon accessible, par James Edwards (en anglais)</a></li>
+ <li><a href="http://www.w3.org/TR/WCAG20/">Les consignes d'accessibilité préconisées par le W3C</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/index.html b/files/fr/apprendre/html/index.html
new file mode 100644
index 0000000000..1874018d97
--- /dev/null
+++ b/files/fr/apprendre/html/index.html
@@ -0,0 +1,66 @@
+---
+title: 'Apprendre le HTML : guides et didacticiels'
+slug: Apprendre/HTML
+tags:
+  - Apprentissage
+  - Débutant
+  - Guide
+  - HTML
+  - Introduction
+  - Rubrique
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<blockquote>
+<div>
+<p>Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.</p>
+</div>
+</blockquote>
+
+<h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2>
+
+
+
+<p>L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire <a href="/fr/docs/Web/Guide/HTML/Introduction">Introduction au HTML</a>. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :</p>
+
+<ul>
+ <li>les <a href="/fr/docs/Learn/CSS">CSS</a>, et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels).</li>
+ <li>le<a href="/fr/docs/Learn/JavaScript"> JavaScript</a>, et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore).</li>
+</ul>
+
+<p>Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installer les outils de base</a>, et comprendre comment créer et gérer les fichiers,comme détaillé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gérer les fichiers</a> — ces deux articles font partie de notre module <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le Web</a> dédié aux débutants.</p>
+
+<p>Il est recommandé de passer par <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le Web</a> avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article <a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Les bases du HTML</a> est également couvert dans notre module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>, quoique beaucoup plus en détail.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.</p>
+
+<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>
+ <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>
+ <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>
+ <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>
+
+<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>
+ <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>
diff --git a/files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html b/files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..b334b15b2c
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html
@@ -0,0 +1,333 @@
+---
+title: Création d'hyperliens
+slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
+tags:
+  - Apprendre
+  - Codage
+  - Débutant
+  - Guide
+  - HTML
+  - Liens
+  - Title
+  - URL
+  - absolu
+  - hyperliens
+  - relatif
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest-ce_un_hyperlien">Qu'est-ce un hyperlien ?</h2>
+
+<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>
+</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="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></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">&lt;p&gt;Je suis en train de créer un lien à
+&lt;a href="https://www.mozilla.org/fr/"&gt;la page d'accueil Mozilla&lt;/a&gt;.
+&lt;/p&gt;</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>
+
+<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">&lt;p&gt;Je suis en train de créer un lien à
+&lt;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"&gt;la page d'accueil Mozilla&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<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>
+
+<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>
+</div>
+
+<h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3>
+
+<p>C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle index.html</a> fera parfaitement l'affaire).</p>
+
+<ul>
+ <li>Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances.</li>
+ <li>Changez certaines parties du contenu en liens.</li>
+ <li>Insérez les attributs <code>title</code>.</li>
+</ul>
+
+<h3 id="Liens_de_niveau_bloc">Liens de niveau bloc</h3>
+
+<p>Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_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>&lt;a&gt;&lt;/a&gt;</code>.</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/fr/"&gt;
+  &lt;img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"&gt;
+&lt;/a&gt;</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>
+</div>
+
+<h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2>
+
+<p>Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.</p>
+
+<p>Une URL, ou <strong>U</strong>niform <strong>R</strong>esource <strong>L</strong>ocator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse <code>https://www.mozilla.org/en-US/</code>.</p>
+
+<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="https://mdn.mozillademos.org/files/15958/dir-struct.png" style="display: block; height: 381px; margin: 0px auto; width: 882px;"></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>
+
+<p>Il y a aussi deux répertoires dans la racine — <code>pdfs</code> et <code>projects</code>. Chacun d'eux comporte un seul fichier — respectivement un PDF (<code>project-brief.pdf)</code> et un fichier <code>index.html</code>. Notez que vous pouvez heureusement avoir deux fichiers <code>index.html</code> dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second <code>index.html</code> peut être le portail des informations relatives au projet.</p>
+
+<ul>
+ <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">&lt;p&gt;Voulez‑vous rencontrer un membre du personnel en particulier ?
+Voyez comment faire sur notre page &lt;a href="contacts.html"&gt;Contacts&lt;/a&gt;.&lt;/p&gt;</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">&lt;p&gt;Visitez la &lt;a href="projects/index.html"&gt;page d'accueil&lt;/a&gt; de mon projet.&lt;/p&gt;</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">&lt;p&gt;Voici un lien vers mon &lt;a href="../pdfs/project-brief.pdf"&gt;sommaire de projet&lt;/a&gt;.&lt;/p&gt;</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>
+</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">&lt;h2 id="Adresse_mailing"&gt;Adresse de mailing&lt;/h2&gt;</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">&lt;p&gt;Vous voulez nous écrire une lettre ? Utilisez notre &lt;a href="contacts.html#Adresse_mailing"&gt;adresse de contact&lt;/a&gt;.&lt;/p&gt;</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">&lt;p&gt;Vous trouverez n l'&lt;a href="#Adresse_mailing"&gt;adresse de mailing&lt;/a&gt; de notre société au bas de cette page.&lt;/p&gt;</pre>
+
+<h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3>
+
+<p>Deux termes que vous rencontrerez sur le Web sont <strong>URL absolue</strong> et <strong>URL relative</strong> :</p>
+
+<p><strong>URL absolue </strong>: pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page <code>index.html</code> est téléversée dans le dossier nommé <code>projects</code> à la racine du serveur web, et que le domaine du site est <code>http://www.example.com</code>, la page sera accessible à l'adresse <code>http://www.example.com/projects/index.html</code> (ou même seulement <code>http://www.example.com/projects/</code>, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme <code>index.htm</code>, si ce n'est pas précisé dans l'URL).</p>
+
+<p>Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.</p>
+
+<p><strong>URL</strong> <strong>relative :</strong> pointe vers un emplacement qui est <em>relatif</em> au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en <code>http://www.example.com/projects/index.html</code> vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., <code>project-brief.pdf</code> — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de <code>projects</code> appelé <code>pdfs</code>, le lien relatif serait <code>pdfs/project-brief.pdf</code> (l'URL absolue équivalente serait <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>
+
+<p>Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre <code>index.html</code> du dossier <code>projects</code> vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative <code>pdfs/project-brief.pdf</code> qui s'y trouve pointerait alors vers un fichier situé en <code>http://www.example.com/pdfs/project-brief.pdf</code>, et non vers un fichier situé en <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<p>Bien sûr, l'emplacement du fichier <code>project-brief.pdf</code> et du dossier <code>pdfs</code> ne changera pas subitement du fait que vous avez déplacé le fichier <code>index.html</code> : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !</p>
+
+<h2 id="Meilleures_pratiques_de_liens">Meilleures pratiques de liens</h2>
+
+<p>Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.</p>
+
+<ul>
+</ul>
+
+<h3 id="Utilisez_une_formulation_claire_des_liens">Utilisez une formulation claire des liens</h3>
+
+<p>Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens <em>accessibles</em> à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :</p>
+
+<ul>
+ <li>les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte.</li>
+ <li>les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié.</li>
+ <li>les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien.</li>
+</ul>
+
+<p>Regardons un exemple particulier :</p>
+
+<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">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Télécharger Firefox
+&lt;/a&gt;&lt;/p&gt;</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">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Cliquer ici
+&lt;/a&gt;
+pour télécharger Firefox&lt;/p&gt;
+</pre>
+
+<p>Autres conseils :</p>
+
+<ul>
+ <li>Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle.</li>
+ <li>Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués).</li>
+ <li>Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière.</li>
+ <li>Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.</li>
+</ul>
+
+<h3 id="Utilisez_des_liens_relatifs_partout_où_cest_possible">Utilisez des liens relatifs partout où c'est possible</h3>
+
+<p>Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un <em>même site web</em>. (pour les liens vers un <em>autre site web</em>, vous aurez besoin d'utiliser un lien absolu) :</p>
+
+<ul>
+ <li>Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile.</li>
+ <li>Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Fonctionnement du web</a> pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement.</li>
+</ul>
+
+<h3 id="Liaison_vers_des_ressources_non-HTML_signalez‑les_clairement">Liaison vers des ressources non-HTML : signalez‑les clairement</h3>
+
+<p>Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :</p>
+
+<ul>
+ <li>si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue.</li>
+ <li>si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash.</li>
+</ul>
+
+<p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="http://www.exemple.com/rapport-volumineux.pdf"&gt;
+  Télécharger le rapport des ventes (PDF, 10Mo)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.exemple.com/flux-video/"<code> target="_blank"</code>&gt;
+  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.exemple.com/jeu-de-voiture"&gt;
+  Jouer au jeu de voiture (nécessite Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Utilisez_lattribut_download_pour_faire_un_lien_vers_un_téléchargement">Utilisez l'attribut <code>download</code> pour faire un lien vers un téléchargement</h3>
+
+<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>&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=fr-FR"
+   download="firefox-latest-64bit-installer.exe"&gt;
+  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
+&lt;/a&gt;</code></pre>
+
+<h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2>
+
+<p>Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.</p>
+
+<p>Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> pour une liste complète des fichiers).</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>Vous devez :</p>
+
+<ol>
+ <li>Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.</li>
+ <li>Changer chaque nom de page en un lien vers cette page.</li>
+ <li>Copier le menu de navigation dans chaque page.</li>
+ <li>Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.</li>
+</ol>
+
+<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="https://mdn.mozillademos.org/files/15957/accueil.png" style="display: block; height: 424px; margin: 0px auto; width: 772px;"></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>
+</div>
+
+<h2 id="Liens_de_courriel">Liens de courriel</h2>
+
+<p>Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL <code>mailto:</code>.</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">&lt;a href="mailto:nullepart@mozilla.org"&gt;Envoyer un courriel à nullepart&lt;/a&gt;
+</pre>
+
+<p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p>
+
+<p>En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.</p>
+
+<h3 id="Spécification_des_détails">Spécification des détails</h3>
+
+<p>En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL <code>mailto</code> que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont <code>subject</code>, <code>cc</code> et <code>body</code> (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.</p>
+
+<p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&amp;bcc=nom3@rapidtables.com&amp;subject=L%27objet%20du%20courriel&amp;body=Le%20corps%20du%20courriel"&gt;
+  Envoyer un mail avec copie, copie cachée, sujet et corps de message
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Notez également l'utilisation du point d'interrogation (<code>?</code>) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&amp;) pour séparer chaque champ dans l'URL <code>mailto:</code>. C'est la notation standard des requêtes URL. Lire <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires#La_méthode_GET">La méthode GET</a> pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.</p>
+</div>
+
+<p>Voici quelques autres exemples d'URL <code>mailto</code> :</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org?subject=Ceci%20est%20l'objet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&amp;subject=Ceci%20est%20l%27objet</a></li>
+</ul>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.</p>
+
+<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li>Création d'hyperliens</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/introduction_à_html/debugging_html/index.html b/files/fr/apprendre/html/introduction_à_html/debugging_html/index.html
new file mode 100644
index 0000000000..fe3176ca62
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/debugging_html/index.html
@@ -0,0 +1,193 @@
+---
+title: Déboguer de l'HTML
+slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
+tags:
+  - Codage
+  - Débutant
+  - Erreur
+  - Guide
+  - HTML
+  - Validation
+  - débogage
+  - validateur
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées aux pages <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML,</a>  <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML </a>et <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Déboguer_n'est_pas_un_problème">Déboguer n'est pas un problème</h2>
+
+<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="https://mdn.mozillademos.org/files/15991/fr-erreur.png" style="display: block; height: 506px; margin: 0px auto; width: 738px;">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>
+
+<h2 id="HTML_et_le_débogage">HTML et le débogage</h2>
+
+
+
+<p>HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est <em>interprété</em>, pas <em>compilé</em>). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus <strong>permissive</strong> que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.</p>
+
+<h3 id="Code_permissif">Code permissif</h3>
+
+<p>Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :</p>
+
+<ul>
+ <li><strong>Erreurs de syntaxe </strong>: ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur.</li>
+ <li><strong>Erreurs de logique </strong>: ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur.</li>
+</ul>
+
+
+
+<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>
+</div>
+
+<h3 id="Apprentissage_actif_étude_avec_un_code_permissif">Apprentissage actif : étude avec un code permissif</h3>
+
+<p>Voici le moment venu d'étudier le caractère permissif du code HTML.</p>
+
+<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="https://mdn.mozillademos.org/files/15994/fr-HTML-errone.png" style="display: block; height: 413px; margin: 0px auto; width: 618px;"></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>    &lt;h1&gt;Exemple de HTML à déboguer&lt;/h1&gt;
+
+    &lt;p&gt;Quelles sont les causes d'erreur en HTML ?
+
+    &lt;ul&gt;
+      &lt;li&gt;Éléments non fermés : si un élément n'est &lt;strong&gt;pas
+          fermé proprement, ses effets peuvent déborder sur des
+          zones que vous ne souhaitiez pas.
+
+      &lt;li&gt;Éléments incorrectement imbriqués : imbriquer des
+          éléments proprement est également très important pour
+          que le code se comporte correctement.
+          &lt;strong&gt;caractères gras &lt;em&gt;ou gras et italiques ?&lt;/strong&gt;
+          qu'est‑ce ?&lt;/em&gt;
+
+      &lt;li&gt;Attributs non fermés : autre source courante de problèmes
+          en HTML. Voici un exemple: &lt;a href="https://www.mozilla.org/&gt;
+          lien à la page d'accueil de Mozilla&lt;/a&gt;
+    &lt;/ul&gt;</pre>
+ </li>
+ <li>Revoyons  les problèmes :
+  <ul>
+   <li>Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.</li>
+   <li>Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.</li>
+   <li>Cette partie est mal imbriquée : <code>&lt;strong&gt;caractères gras &lt;em&gt;ou gras et italiques ?&lt;/strong&gt; qu'est ce ?&lt;/em&gt;</code>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.</li>
+   <li>La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.</li>
+  </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 &quot;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="https://mdn.mozillademos.org/files/15993/fr-inspecteur.png" style="display: block; height: 722px; margin: 0px auto; width: 827px;"></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>
+   <li>L'endroit où le premier élément <code>&lt;strong&gt;</code> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises <code>strong</code>, jusqu'à la fin du document !</li>
+   <li>L'imbrication incorrecte a été corrigée ainsi :
+    <pre class="brush: html">&lt;strong&gt;caractères gras
+  &lt;em&gt;ou caractères gras et italiques ?&lt;/em&gt;
+&lt;/strong&gt;
+&lt;em&gt; qu'est ce ?&lt;/em&gt;</pre>
+   </li>
+   <li>Le lien avec les guillemets manquants a été illico détruit. Le dernier élément <code>li</code> ressemble à ceci :
+    <pre class="brush: html">&lt;li&gt;
+  &lt;strong&gt;Attributs non fermés : autre source courante de problèmes
+en HTML. Voici un exemple :&lt;/strong&gt;
+&lt;/li&gt;</pre>
+   </li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="Validation_d'un_HTML">Validation d'un HTML</h3>
+
+<p>Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?</p>
+
+<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="https://mdn.mozillademos.org/files/15995/fr-w3c.png" style="display: block; height: 974px; margin: 0px auto; width: 1072px;"></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>
+
+<h3 id="Apprentissage_actif_validation_d'un_document_HTML">Apprentissage actif : validation d'un document HTML</h3>
+
+<p>Essayons cet outil avec notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">document exemple</a>.</p>
+
+<ol>
+ <li>D'abord, chargez le <a href="https://validator.w3.org/">Markup Validation Service</a> dans un des onglets du navigateur, si ce n'est déjà fait.</li>
+ <li>Basculez sur l'onglet <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li>
+ <li>Copiez la totalité du code du document (pas uniquement l'élément <code>body</code>) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.</li>
+ <li>Pressez le bouton <em>Check</em>.</li>
+</ol>
+
+<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="https://mdn.mozillademos.org/files/15996/fr-liste-erreur.png" style="display: block; height: 553px; margin: 0px auto; width: 682px;"></p>
+
+<h4 id="Interprétation_des_messages_d'erreur">Interprétation des messages d'erreur</h4>
+
+<p>Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.</p>
+
+<ul>
+ <li>« End tag <code>li</code> implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.</li>
+ <li>« Unclosed element <code>strong</code> » : C'est facile à comprendre — un élément  {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.</li>
+ <li>« End tag <code>strong</code> violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.</li>
+ <li>« End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.</li>
+ <li>« End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert :
+  <pre>exemple: &lt;a href="https://www.mozilla.org/&gt;lien à la page d'accueil de Mozilla&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</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>
+  </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>
+</ul>
+
+<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><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li>Déboguer de l'HTML</li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Faire une Lettre</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/introduction_à_html/document_and_website_structure/index.html b/files/fr/apprendre/html/introduction_à_html/document_and_website_structure/index.html
new file mode 100644
index 0000000000..e6111a4c4f
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/document_and_website_structure/index.html
@@ -0,0 +1,292 @@
+---
+title: Structure de Site Web et de document
+slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure
+tags:
+  - Codage
+  - Disposition
+  - Débutant
+  - Guide
+  - HTML
+  - Page
+  - Site
+  - blocs
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>. Comment fonctionnent les liens hyperlinks , comme décrit dans <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>
+    <p>Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Principales_parties_dun_document"><strong>Principales parties d'un document</strong></h2>
+
+<p>Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :</p>
+
+<dl>
+ <dt>En‑tête (header)</dt>
+ <dd>Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.</dd>
+ <dt>Barre de navigation</dt>
+ <dd>Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.</dd>
+ <dt>Contenu principal</dt>
+ <dd>Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site  variable de page en page.</dd>
+ <dt>Barre latérale</dt>
+ <dd>
+ <p>Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.</p>
+ </dd>
+ <dt>Pied de page</dt>
+ <dd>
+ <p>Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.</p>
+ 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="https://mdn.mozillademos.org/files/15971/ecran.png" style="display: block; height: 855px; margin: 0px auto; width: 1298px;"></p>
+
+<h2 id="HTML_pour_structurer_un_contenu">HTML pour structurer un contenu</h2>
+
+<p>L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et <strong>utiliser le bon élément pour le bon travail</strong>.</p>
+
+<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>
+</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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_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>
+
+<p>Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :</p>
+
+<ul>
+ <li><strong>header : </strong>{{htmlelement("header")}}.</li>
+ <li><strong>barre de navigation : </strong>{{htmlelement("nav")}}.</li>
+ <li><strong>contenu principal : </strong>{{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}.</li>
+ <li><strong>barre latérale : </strong>{{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}.</li>
+ <li><strong>pied de page : </strong>{{htmlelement("footer")}}.</li>
+</ul>
+
+<h3 id="Apprentissage_actif_exploration_du_code_de_lexemple">Apprentissage actif : exploration du code de l'exemple</h3>
+
+<p>Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">dans le dépôt Github</a>). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;Intitulé de ma page&lt;/title&gt;
+    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
+    &lt;link rel="stylesheet" href="style.css"&gt;
+
+    &lt;!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
+         HTML5 fonctionne correctement avec les anciennes versions de
+         Internet Explorer--&gt;
+    &lt;!--[if lt IE 9]&gt;
+      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
+    &lt;![endif]--&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;!-- Voici notre en‑tête principale utilisée dans toutes les pages
+         de notre site web --&gt;
+    &lt;header&gt;
+      &lt;h1&gt;En-tête&lt;/h1&gt;
+    &lt;/header&gt;
+
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;L'équipe&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Projets&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+
+       &lt;!-- Un formulaire de recherche est une autre façon de naviguer de
+            façon non‑linéaire dans un site. --&gt;
+
+       &lt;form&gt;
+         &lt;input type="search" name="q" placeholder="Rechercher"&gt;
+         &lt;input type="submit" value="Lancer !"&gt;
+       &lt;/form&gt;
+     &lt;/nav&gt;
+
+    &lt;!-- Ici nous mettons le contenu de la page --&gt;
+    &lt;main&gt;
+
+      &lt;!-- Il contient un article --&gt;
+      &lt;article&gt;
+        &lt;h2&gt;En-tête d'article&lt;/h2&gt;
+        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
+
+        &lt;h3&gt;Sous‑section&lt;/h3&gt;
+        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
+        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
+
+        &lt;h3&gt;Autre sous‑section&lt;/h3&gt;
+        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
+      &lt;/article&gt;
+
+      &lt;!-- Le contenu « à côté » peut aussi être intégré dans le contenu
+           principal --&gt;
+      &lt;aside&gt;
+        &lt;h2&gt;En relation&lt;/h2&gt;
+        &lt;ul&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Combien j'aime être près des rivages&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Combien j'aime être près de la mer&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Bien que dans le nord de l'Angleterre&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Il n'arrête jamais de pleuvoir&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Eh bien…&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/aside&gt;
+
+    &lt;/main&gt;
+
+    &lt;!-- Et voici notre pied de page utilisé sur toutes les pages du site --&gt;
+    &lt;footer&gt;
+      &lt;p&gt;©Copyright 2050 par personne. Tous droits reversés.&lt;/p&gt;
+    &lt;/footer&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.</p>
+
+<h2 id="Plus_de_détails_à_propos_des_éléments_de_mise_en_page">Plus de détails à propos des éléments de mise en page</h2>
+
+<p>La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element">référence aux éléments HTML</a>. Pour l'instant, il convient de bien comprendre les principales définitions :</p>
+
+<ul>
+ <li>{{HTMLElement('main')}} est relatif au contenu <em>unique de la page</em>. N'utilisez <code>&lt;main&gt;</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>&lt;article&gt;</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/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">heading</a></code> ; notez également que vous pouvez fractionner un <code>&lt;article&gt;</code> en plusieurs <code>&lt;section&gt;</code> ou bien des  <code>&lt;section&gt;</code> en divers <code>&lt;article&gt;</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/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML#Ajouter un titre">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>
+ <li>{{HTMLElement('footer')}} représente un groupe de contenu de fin pour une page.</li>
+</ul>
+
+<h3 id="Enveloppes_non‑sémantiques">Enveloppes non‑sémantiques</h3>
+
+<p>Parfois, vous êtes dans la situation où vous ne trouvez pas  l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.</p>
+
+<p>{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
+alors qu'il titubait en travers de la porte &lt;span class="editor-note"&gt;
+[Note du rédacteur : Pour cette scène, la lumière doit être faible].&lt;/span&gt;&lt;/p&gt;</pre>
+
+<p>Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.</p>
+
+<p>{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :</p>
+
+<pre class="brush: html">&lt;div class="panier"&gt;
+  &lt;h2&gt;Panier d'achat&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;p&gt;&lt;a href=""&gt;&lt;b&gt;Boucles d'oreilles en argent&lt;/b&gt;&lt;/a&gt;: €99,95.&lt;/p&gt;
+      &lt;img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      ...
+    &lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Total des achats : €237,89&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Ce n'est pas vraiment un élément <code>&lt;aside&gt;</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>&lt;section&gt;</code>, car il ne fait pas partie du contenu principal de la page. Donc un <code>&lt;div&gt;</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>
+</div>
+
+<h3 id="Sauts_de_ligne_et_traits_horizontaux">Sauts de ligne et traits horizontaux</h3>
+
+<p>Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :</p>
+
+<p><code>&lt;br&gt;</code> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Il y avait une fois une fille nommée Nell&lt;br&gt;
+Qui aimait écrire du HTML&lt;br&gt;
+Mais ses structures et sémantiques affligeantes&lt;br&gt;
+rendaient de ses marquages la lecture inélégante.&lt;/p&gt;</pre>
+
+<p>Sans éléments <code>&lt;br&gt;</code>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML ignore la plupart des blancs</a>) ; avec des &lt;br&gt; 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>
+ Mais ses structures et sémantiques affligeantes<br>
+ rendaient de ses marquages la lecture inélégante.</p>
+
+<p><code>Les éléments &lt;hr&gt;</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>
+
+<pre>&lt;p&gt;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.&lt;/p&gt;
+&lt;hr&gt;
+&lt;p&gt;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.&lt;/p&gt;</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>
+
+<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="https://mdn.mozillademos.org/files/15972/fr_commun.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15973/fr-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15974/fr-liste.png" style="border-style: solid; border-width: 1px; display: block; height: 718px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15975/fr-tri.png" style="border-style: solid; border-width: 1px; display: block; height: 625px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15976/fr-map.png" style="border-style: solid; border-width: 1px; display: block; height: 885px; margin: 0px auto; width: 600px;"></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>
+
+<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>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">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>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li>Structure de Site Web et de document</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/introduction_à_html/formatage-avance-texte/index.html b/files/fr/apprendre/html/introduction_à_html/formatage-avance-texte/index.html
new file mode 100644
index 0000000000..6e9ebf6f83
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/formatage-avance-texte/index.html
@@ -0,0 +1,682 @@
+---
+title: Formatage avancé du texte
+slug: Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte
+tags:
+  - Apprendre
+  - Citation
+  - Codage
+  - Débutant
+  - Guide
+  - HTML
+  - Texte
+  - abréviation
+  - listes descriptives
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+---
+<div>{{LearnSidebar}}</div>
+
+<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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_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">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Listes_descriptives"><span>Listes descriptives</span></h2>
+
+<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/en-US/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>
+
+<pre class="notranslate">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.
+aparté
+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.</pre>
+
+<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">&lt;dl&gt;
+  &lt;dt&gt;soliloque&lt;/dt&gt;
+  &lt;dd&gt;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).&lt;/dd&gt;
+  &lt;dt&gt;monologue&lt;/dt&gt;
+  &lt;dd&gt;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.&lt;/dd&gt;
+  &lt;dt&gt;aparté&lt;/dt&gt;
+  &lt;dd&gt;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.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.</p>
+
+<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>
+ <dd>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.</dd>
+ <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>
+</dl>
+
+<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>
+
+<h3 id="Apprentissage_interactif_balisez_une_série_de_définitions">Apprentissage interactif : balisez une série de définitions</h3>
+
+<p>Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ<em> Code modifiable</em> pour que faire apparaître une liste de définitions dans la <em>Zone de rendu</em>. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.</p>
+
+<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">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+Bacon
+Le ciment qui unit le monde.
+Œufs
+Le liant des gâteaux.
+Café
+La boisson qui fait courir le monde le matin.
+Une couleur brun léger.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;dl&gt;\n &lt;dt&gt;Bacon&lt;/dt&gt;\n &lt;dd&gt;Le ciment qui unit le monde.&lt;/dd&gt;\n &lt;dt&gt;Œufs&lt;/dt&gt;\n &lt;dd&gt;Le liant des gâteaux.&lt;/dd&gt;\n &lt;dt&gt;Café&lt;/dt&gt;\n &lt;dd&gt;La boisson qui fait courir le monde le matin.&lt;/dd&gt;\n &lt;dd&gt;Une couleur brun léger.&lt;/dd&gt;\n&lt;/dl&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Citations">Citations</h2>
+
+<p>Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.</p>
+
+<h3 id="Blocs_de_citation">Blocs de citation</h3>
+
+<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>&lt;blockquote&gt;</code> :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;L'&lt;strong&gt;Élément HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (ou &lt;em&gt;Élément HTML bloc
+de citation&lt;/em&gt;) indique que le bloc de texte inclus est une citation étendue.&lt;/p&gt;</pre>
+
+<p>Pour le changer en bloc de citation, on ferait simplement ceci :</p>
+
+<pre class="brush: html notranslate">&lt;blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;L'&lt;strong&gt;Élément HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (ou &lt;em&gt;Élément HTML bloc de citation&lt;/em&gt;)
+     indique que le bloc de texte inclus est une citation étendue.&lt;/p&gt;
+&lt;/blockquote&gt;</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="https://developer.mozilla.org/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>
+
+<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>&lt;q&gt;</code> :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;L'élément citation — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — est &lt;q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q"&gt;prévu
+pour de courtes citations ne nécessitant pas un nouvel alinéa&lt;/q&gt;.&lt;/p&gt;</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>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</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>&lt;cite&gt;</code> à la source de la citation d'une manière ou d'une autre :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Selon la &lt;a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote"&gt;
+&lt;cite&gt;page blockquote du MDN&lt;/cite&gt;&lt;/a&gt;:
+&lt;/p&gt;
+
+&lt;p&gt;L'&lt;strong&gt;Élément HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (ou &lt;em&gt;Élément HTML bloc de citation&lt;/em&gt;)
+   indique que le bloc de texte inclus est une citation étendue.&lt;/p&gt;
+
+&lt;p&gt;L'élément citation — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — est &lt;q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q"&gt;prévu
+   pour de courtes citations ne nécessitant pas un nouvel alinéa&lt;/q&gt;.&lt;/p&gt;
+ — &lt;a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q"&gt;
+&lt;cite&gt;page q du MDN&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a>.</p>
+
+
+
+<h3 id="Apprentissage_actif_Qui_a_dit_quoi">Apprentissage actif : Qui a dit quoi ?</h3>
+
+<p>Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :</p>
+
+<ol>
+ <li>vous marquiez le paragraphe central comme étant une citation comprenant un attribut <code>cite</code>.</li>
+ <li>une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut <code>cite</code>.</li>
+ <li>vous incorporiez un élément <code>&lt;cite&gt;</code> pour chaque citation</li>
+</ol>
+
+<p>L'origine des citations dont vous aurez besoin se trouvent aux pages :</p>
+
+<ul>
+ <li>http://www.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius,</li>
+ <li>http://www.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (<em>De la nécessité d'éliminer un discours négatif sur soi‑même</em>).</li>
+</ul>
+
+<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">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 150px; width: 95%"&gt;
+&lt;p&gt;Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :&lt;/p&gt;
+&lt;p&gt;La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.&lt;/p&gt;
+&lt;p&gt;J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)&lt;/p&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;Salut et bienvenue sur ma page de motivation. Comme &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Confucius&lt;/cite&gt;&lt;/a&gt; a dit en son temps :&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n &lt;p&gt;La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;J\'aime aussi le concept de pensée positive &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt; Il est nécessaire d\'éliminer le discours négatif sur soi-même &lt;/q&gt; (comme dit dans &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;.)&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 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">&lt;p&gt;Nous utilisons l'&lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; pour structurer nos documents web.&lt;/p&gt;
+
+&lt;p&gt;Je pense que le &lt;abbr title="Révérend"&gt;R.&lt;/abbr&gt; Green l'a fait dans la cuisine avec une tronçonneuse.&lt;/p&gt;</pre>
+
+
+
+<p>Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :</p>
+
+<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>
+
+<div class="note">
+<p><strong>Note </strong>: Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <code>&lt;abbr&gt;</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 &lt;abbr&gt; et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser &lt;abbr&gt; à 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">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 50px; width: 95%"&gt;
+&lt;p&gt;La NASA fait assurément des tâches passionnantes.&lt;/p&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;La &lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; fait assurément des tâches passionnantes.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<div>{{ EmbedLiveSample('Playable_code_3', 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">&lt;address&gt;
+  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
+&lt;/address&gt;</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">&lt;address&gt;
+  &lt;p&gt;Page écrite par &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<h2 id="Exposants_et_indices">Exposants et indices</h2>
+
+<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">&lt;p&gt;Ma date de naissance est le 1&lt;sup&gt;er&lt;/sup&gt; mai 2001.&lt;/p&gt;
+&lt;p&gt;La formule chimique de la caféine est C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
+&lt;p&gt;Si x&lt;sup&gt;2&lt;/sup&gt; égale 9, x doit valoir 3 ou -3.&lt;/p&gt;</pre>
+
+<p>Les sorties produites par ces lignes de code se présentent comme suit :</p>
+
+<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>
+
+<h2 id="Représentation_du_code_informatique">Représentation du code informatique</h2>
+
+<p>HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :</p>
+
+<ul>
+ <li>{{htmlelement("code")}} : pour marquer des parties génériques de code.</li>
+ <li>{{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès  dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises &lt;pre&gt;&lt;/pre&gt;, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte.</li>
+ <li>{{htmlelement("var")}} : pour marquer spécifiquement les noms de variables.</li>
+ <li>{{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.</li>
+ <li>{{htmlelement("samp")}} : pour marquer une sortie de programme.</li>
+</ul>
+
+<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">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('<span>Owww, arrête de me toucher !</span>');
+}&lt;/code&gt;&lt;/pre&gt;
+
+&lt;p&gt;N'utilisez pas d'éléments de présentation comme &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; et &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;p&gt;Dans l'exemple JavaScript ci‑dessus, &lt;var&gt;para&lt;/var&gt; représente un élément paragraphe.&lt;/p&gt;
+
+
+&lt;p&gt;Sélectionnez la totalité du texte avec &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
+
+&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
+&lt;samp&gt;PING mozilla.org (63.245.208.195) 56(84) bytes of data.
+64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms&lt;/samp&gt;&lt;/pre&gt;
+</pre>
+
+<p>Ce code se présente ainsi :</p>
+
+<p>{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}</p>
+
+<h2 id="Balisage_des_heures_et_dates">Balisage des heures et dates</h2>
+
+<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">&lt;<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>&gt;20 janvier 2016&lt;/<span class="pl-ent">time</span>&gt;</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>
+
+<ul>
+ <li>20 Janvier 2016</li>
+ <li>20th January 2016</li>
+ <li>Jan 20 2016</li>
+ <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>
+</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">&lt;!-- Simple date standard --&gt;
+&lt;<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>&gt;20 janvier 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Juste l'année et le mois --&gt;
+&lt;<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>&gt;janvier 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Juste le mois et les jour --&gt;
+&lt;<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>&gt;20 janvier&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Juste l'heure, heure et minutes --&gt;
+&lt;<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>&gt;19h30&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --&gt;
+&lt;<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>&gt;19h30m1,856s&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Date et heure --&gt;
+&lt;<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>&gt;19h30, le 20 janvier 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Date et heure avec décalage de fuseau horaire --&gt;
+&lt;<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>&gt;19h30, le 20 janvier 2016 corespond à 20h30 en France&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Appel d'un numéro de semains donné --&gt;
+&lt;<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>&gt;La 4e semaine de 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
+
+<h2 id="Résumé">Résumé</h2>
+
+
+
+<p>Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element">Référence des éléments HTML</a> (la section <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element#Inline_text_semantics">sémantique de texte en ligne</a> serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li>Formatage avancé du texte</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/introduction_à_html/getting_started/index.html b/files/fr/apprendre/html/introduction_à_html/getting_started/index.html
new file mode 100644
index 0000000000..7717eae9e1
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/getting_started/index.html
@@ -0,0 +1,736 @@
+---
+title: Commencer avec le HTML
+slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
+tags:
+  - Attributs
+  - Codage
+  - Commentaires
+  - Débutant
+  - Elements
+  - Entités
+  - Guide
+  - HTML
+  - espace
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions sur le fonctionnement d'un ordinateur, avoir installé les <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base</a> et  savoir <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est_ce_que_le_HTML">Qu'est ce que le HTML ?</h2>
+
+<p>{{glossary("HTML")}} (<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) n'est pas un langage de programmation : c'est un <em>langage de balisage</em> qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou <em>baliser</em> différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :</p>
+
+<pre>Mon chat est très grincheux</pre>
+
+<p>Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :</p>
+
+<pre class="brush: html">&lt;p&gt;Mon chat est très grincheux&lt;/p&gt;</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 &lt;title&gt;, &lt;TITLE&gt;, &lt;Title&gt;, &lt;TiTlE&gt;, 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="https://mdn.mozillademos.org/files/14739/chat-grincheuxl.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Les principales parties de notre élément sont :</p>
+
+<ol>
+ <li><strong>La balise ouvrante :</strong> il s'agit du nom de l'élément (dans ce cas, p), encadré par un <strong>chevron ouvrant (&lt;) </strong>et un <strong>chevron fermant (&gt;)</strong>. Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;</li>
+ <li><strong>La balise fermante :</strong> c'est la même que la balise ouvrante, sauf qu'elle comprend une <strong>barre oblique (/)</strong> avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;</li>
+ <li><strong>Le contenu :</strong> il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;</li>
+ <li><strong>L'élément :</strong> l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.</li>
+</ol>
+
+<h3 id="Apprentissage_actif_créer_votre_premier_élément_HTML">Apprentissage actif : créer votre premier élément HTML</h3>
+
+<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> en la mettant entre les balises<code> &lt;em&gt;</code> et <code>&lt;/em&gt;</code> (<code>mettez &lt;em&gt; </code> avant pour <em>ouvrir l'élément</em> et <code>&lt;/em&gt;</code> après pour <em>fermer l'élément</em>) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la <em>Zone de rendu</em>.</p>
+
+<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">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+  Ceci est mon texte.
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser" /&gt;
+  &lt;input id="solution" type="button" value="Voir la solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;Ceci est mon texte.&lt;/em&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}</p>
+
+<h3 id="Eléments_imbriqués">Eléments imbriqués</h3>
+
+<p>Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'<strong>imbrication</strong>. Si vous voulez affirmer que votre chat est <strong>très</strong> grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :</p>
+
+<pre class="brush: html">&lt;p&gt;Mon chat est &lt;strong&gt;très&lt;/strong&gt; grincheux.&lt;/p&gt;</pre>
+
+<p>Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément <code>p</code> en premier, puis l'élément <code>strong</code>, donc nous devons fermer l'élément <code>strong</code> d'abord, puis l'élément <code>p</code>. Ce qui suit est incorrect :</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;Mon chat est &lt;strong&gt;très grincheux.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !</p>
+
+<h3 id="Éléments_bloc_vs_en_ligne">Éléments bloc vs en ligne</h3>
+
+<p>Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.</p>
+
+<ul>
+ <li>Les éléments de niveau <strong>bloc</strong> forment <strong>un bloc visible sur une page</strong> — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant et tout contenu qui les suit apparaît également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent, par exemple, des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc.</li>
+ <li>Les éléments en<strong> ligne</strong> sont contenus <strong>dans des éléments de niveau bloc</strong>. Ils entourent seulement des petites parties du contenu du document, ni des paragraphes entiers, ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) {{htmlelement ("a")}} ou des éléments de mise en évidence tels que {{htmlelement("em")}} ou {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Prenez l'exemple suivant :</p>
+
+<pre class="brush: html">&lt;em&gt;premier&lt;/em&gt;&lt;em&gt;deuxième&lt;/em&gt;&lt;em&gt;troisième&lt;/em&gt;
+
+&lt;p&gt;quatrième&lt;/p&gt;&lt;p&gt;cinquième&lt;/p&gt;&lt;p&gt;sixième&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">style CSS </a>par défaut du navigateur qui s'applique aux paragraphes).</p>
+
+<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>
+</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="https://developer.mozilla.org/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="https://developer.mozilla.org/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="https://developer.mozilla.org/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>
+
+<p>Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <code>&lt;img /&gt;</code> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <code>&lt;img /&gt;</code> est à privilégier) :</p>
+
+<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /&gt;</pre>
+
+<p>Cela affichera l'élément suivant sur votre page :</p>
+
+<p>{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Les éléments peuvent aussi avoir des attributs, qui comme suit:</p>
+
+<p><img alt='&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/14741/attribut-chat-grincheux.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></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>
+
+<p>Pour créer un attribut, il faut :</p>
+
+<ol>
+ <li>insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;</li>
+ <li>donner un nom à l'attribut, puis ajouter un signe égal ;</li>
+ <li>donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.</li>
+</ol>
+
+<h3 id="Apprentissage_actif_ajouter_des_attributs_à_un_élément">Apprentissage actif : ajouter des attributs à un élément</h3>
+
+<p>Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :</p>
+
+<ul>
+ <li><code>href </code>: cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code> : l'attribut <code>title</code> apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, <code>title="Page d'Accueil Mozilla"</code>, qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien.</li>
+ <li><code>target</code>: L'attribut <code>target</code> définit le contexte de navigation utilisé pour afficher le lien. Par exemple, <code>target="_blank"</code> affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, simplement, ne mettez pas cet attribut.</li>
+</ul>
+
+<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément &lt;a&gt;, puis l'attribut <code>href</code>, puis l'attribut <code>title</code>. Vous pourrez voir la mise à jour de vos modifications en direct dans la <em>Zone de rendu</em>. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut <code>title</code> et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément <code>href</code>. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.</p>
+
+<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">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Un lien vers mon site Web préféré.&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;Un lien vers mon &lt;a href="https://www.mozilla.org/" title="Page d\'accueil de Mozilla" target="_blank"&gt;site Web préféré&lt;/a&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Les_attributs_booléens">Les attributs booléens</h3>
+
+<p>Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments <code>input</code> (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.</p>
+
+<pre>&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément <code>input</code> non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :</p>
+
+<pre class="brush: html">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p>Ces deux exemples vous donneront le résultat suivant :</p>
+
+<p>{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}</p>
+
+<h3 id="Omettre_des_guillemets_autour_des_valeurs_d'attribut">Omettre des guillemets autour des valeurs d'attribut</h3>
+
+<p>Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut <code>href</code>, comme ceci :</p>
+
+<pre>&lt;a href=<code>https://www.mozilla.org/</code>&gt;mon site web favori&lt;/a&gt;</pre>
+
+<p>Cependant, si nous ajoutons l'attribut <code>title</code> dans ce même style, cela devient incorrect :</p>
+
+<pre class="brush: html">&lt;a href=<code>https://www.mozilla.org/</code> title=La page d\'accueil Mozilla &gt;mon site web favori&lt;/a&gt;</pre>
+
+<p>En effet, le navigateur interprétera mal la balise, pensant que l'attribut <code>title</code> est en fait quatre attributs — un attribut <code>title</code> avec la valeur « La » et trois attributs booléens, « <code>page</code> », « <code>d\'accueil</code> » et « <code>Mozilla</code> ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de <code>title</code> donne.</p>
+
+<p>{{ EmbedLiveSample('Omettre_des_guillemets_autour_des_valeurs_d\'attribut', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.</p>
+
+<h3 id="Guillemets_simples_ou_doubles">Guillemets simples ou doubles ?</h3>
+
+<p>Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :</p>
+
+<pre class="brush: html">&lt;a href="http://www.exemple.com"&gt;Un lien vers mon exemple.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;Un lien vers mon exemple&lt;/a&gt;</pre>
+
+<p>Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :</p>
+
+<pre class="brush: html">&lt;a href="http://www.exemple.com'&gt;Un lien vers mon exemple.&lt;/a&gt;</pre>
+
+<p>Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :</p>
+
+<pre class="brush: html">&lt;a href="http://www.exemple.com" title="N'est-ce pas drôle ?"&gt;Un lien vers mon exemple.&lt;/a&gt;</pre>
+
+<p>Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser <a href="/fr/docs/Glossaire/Entity">une entité HTML</a> pour représenter ce caractère spécial.</p>
+
+<h2 id="Anatomie_d'un_document_HTML">Anatomie d'un document HTML</h2>
+
+<p>Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Ma page test&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Voici ma page web&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ici, nous avons :</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code> : le type de document. Quand HTML était jeune (vers 1991/2), les <code>doctypes</code>  étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci :
+
+  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <code>&lt;!DOCTYPE html&gt;</code> est la chaîne de caractères la plus courte qui soit un <code>doctype</code> valide. C'est tout ce que vous avez vraiment besoin de savoir.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> : l'élément <code>&lt;html&gt;</code>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> : l'élément <code>&lt;head&gt;</code>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page :  mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. </li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> : l'élément <code>title</code>. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. </li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> : l'élément <code>&lt;body&gt;</code>. Il contient <em>tout </em>le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.</li>
+</ol>
+
+<h3 id="Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML">Apprentissage actif : ajouter certaines fonctionnalités à un document HTML</h3>
+
+<p>Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :</p>
+
+<ol>
+ <li>copier l'exemple de page HTML ci-dessus.</li>
+ <li>créer un nouveau fichier dans votre éditeur de texte.</li>
+ <li>coller le code dans le nouveau fichier texte.</li>
+ <li>enregistrer le fichier sous <code>index.html</code>.</li>
+</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>
+</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="https://mdn.mozillademos.org/files/15943/fr-capture-modele.png" style="display: block; height: 480px; margin: 0px auto; width: 640px;">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 &lt;body&gt;. ) 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 &lt;body&gt;, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante &lt;h1&gt; et la balise fermante &lt;/ h1&gt; ;</li>
+ <li>modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse ;</li>
+ <li>mettez les mots importants en gras en les mettant entre la balise ouvrante <code>&lt;strong&gt;</code> et la balise fermante <code>&lt;/ strong&gt;</code>;</li>
+ <li>ajoutez un lien à votre paragraphe, comme <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#Apprentissage_actif_ajout_d'attributs_à_un_élément">expliqué plus haut dans cet article</a> ;</li>
+ <li>ajoutez une image dans votre document, en dessous du paragrahe, comme <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#Éléments_vides">expliqué plus haut dans cet article</a>. Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web).</li>
+</ul>
+
+<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">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Voici ma page&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Un peu de musique&lt;/h1&gt;&lt;p&gt;J\'aime vraiment beaucoup &lt;strong&gt;jouer de la batterie&lt;/strong&gt;. Un de mes batteurs préférés est Neal Peart, qui\ joue dans le groupe &lt;a href="https://fr.wikipedia.org/wiki/Rush_%28groupe%29" title="Article Wikipedia sur Rush"&gt;Rush&lt;/a&gt;.\Actuellement, mon album Rush de prédilection est &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Espace_vide_en_HTML">Espace vide en HTML</h3>
+
+<p>Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:</p>
+
+<pre class="brush: html">&lt;p&gt;Les chiens sont idiots.&lt;/p&gt;
+
+&lt;p&gt;Les chiens        sont
+           idiots.&lt;/p&gt;</pre>
+
+<p>Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.</p>
+
+<h2 id="Références_d'entités_inclure_les_caractères_spéciaux_en_HTML">Références d'entités : inclure les caractères spéciaux en HTML</h2>
+
+<p>En HTML, les caractères <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> et <code>&amp;</code> sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&amp;) ou un signe inférieur(&lt;), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?</p>
+
+<p>Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&amp;), et se termine par un point-virgule (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Le caractère</th>
+   <th scope="col">Réference équivalent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :</p>
+
+<pre class="brush: html">&lt;p&gt;En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.&lt;/p&gt;
+
+&lt;p&gt;En HTML, un paragraphe se définit avec l'élément &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>
+
+<p>Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second &lt;p&gt; comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les  signes inférieur(&lt;)  et supérieur(&gt;) par leurs références de caractère.</p>
+
+<p>{{ EmbedLiveSample('Références_d\'entités_inclure_les_caractères_spéciaux_en_HTML', 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>
+</div>
+
+<h2 id="Commentaires_en_HTML">Commentaires en HTML</h2>
+
+<p>En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses  parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.</p>
+
+<p>Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <code>&lt;!-- </code>et<code>--&gt;</code>, par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Je ne suis pas dans un commentaire&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;Je suis dans un commmentaire!&lt;/p&gt; --&gt;</pre>
+
+<p>Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.</p>
+
+<p>{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<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="https://developer.mozilla.org/fr/Apprendre/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>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer une couleur aux éléments HTML avec les CSS</a></li>
+</ul>
+
+<div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li>Commencer avec le HTML</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/introduction_à_html/html_text_fundamentals/index.html b/files/fr/apprendre/html/introduction_à_html/html_text_fundamentals/index.html
new file mode 100644
index 0000000000..7065cb861e
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/html_text_fundamentals/index.html
@@ -0,0 +1,979 @@
+---
+title: Fondamentaux du texte HTML
+slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
+tags:
+  - Apprendre
+  - Débutant
+  - Guide
+  - HTML
+  - Introduction à l'HTML
+  - Listes
+  - Paragraphes
+  - Texte
+  - Titres
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requis:</th>
+   <td>
+    <p>Connaître les bases du langage HTML, telles que traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>
+    <p>Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_bases_titres_et_paragraphes">Les bases : titres et paragraphes</h2>
+
+<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="https://mdn.mozillademos.org/files/12371/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>Le contenu structuré facilite la lecture et la rend plus agréable.</p>
+
+<p>En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :</p>
+
+<pre class="brush: html">&lt;p&gt;Je suis un paragraphe, oh oui je le suis.&lt;/p&gt;</pre>
+
+<p>Chaque titre doit être contenu dans un élément titre :</p>
+
+<pre class="brush: html">&lt;h1&gt;Je suis le titre de l'histoire.&lt;/h1&gt;</pre>
+
+<p>Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <code>&lt;h1&gt;</code> représente le titre principal, <code>&lt;h2&gt;</code> représente un sous-titre, <code>&lt;h3&gt;</code> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <code>&lt;h6&gt;</code>.</p>
+
+<h3 id="Implémentation_de_la_hiérarchie_structurale">Implémentation de la hiérarchie structurale</h3>
+
+<p>Dans une histoire, la balise <code>&lt;h1&gt;</code> représenterait le titre de l'histoire, les balises <code>&lt;h2&gt;</code> représenteraient les titres des chapitres, les balises <code>&lt;h3&gt;</code> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <code>&lt;h6&gt;</code>.</p>
+
+<pre class="brush: html">&lt;h1&gt;L'ennui mortel&lt;/h1&gt;
+
+&lt;p&gt;par Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Chapitre I : La nuit noire&lt;/h2&gt;
+
+&lt;p&gt;Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...&lt;/p&gt;
+
+&lt;h2&gt;Chapitre II : Le silence éternel&lt;/h2&gt;
+
+&lt;p&gt;Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...&lt;/p&gt;
+
+&lt;h3&gt;Le spectre parle&lt;/h3&gt;
+
+&lt;p&gt;Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...&lt;/p&gt;</pre>
+
+<p>C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :</p>
+
+<ul>
+ <li>Il est préférable de n'utiliser qu'un seul <code>&lt;h1&gt;</code> par page — c'est le niveau principal, et tous les autres devraient être de niveau inférieur.</li>
+ <li>Assurez-vous d'utiliser les balise de titre dans l'ordre correct et logique : <code>&lt;h1&gt;</code> puis <code>&lt;h2&gt;</code>, puis <code>&lt;h3&gt;</code> et ainsi de suite.</li>
+ <li>Bien qu'il y ait 6 niveaux de titre (de <code>&lt;h1&gt;</code> à <code>&lt;h6&gt;</code>), Il est déconseillé d'utiliser plus de trois niveaux dans une page. Les documents avec beaucoup de niveaux deviennent complexes et difficiles à parcourir. Dans ce cas, il est préférable de partager le contenu sur plusieurs pages.</li>
+</ul>
+
+<h3 id="Pourquoi_faut-il_structurer_un_document">Pourquoi  faut-il structurer un document ?</h3>
+
+<p>Pour répondre à cette question, regardons la page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche <kbd>Entrée</kbd> ou <kbd>⏎</kbd>)</p>
+
+<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="https://mdn.mozillademos.org/files/15951/recette.png" style="display: block; height: 429px; margin: 0px auto; width: 640px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></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>
+
+<ul>
+ <li>Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisent souvent que les titres (généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">nous ne passons que très peu de temps sur une page web</a>). S'ils ne trouvent pas le contenu souhaité en quelques secondes, ils seront probablement déçus et chercheront l'information souhaitée ailleurs.</li>
+ <li>Les moteurs de recherche, lorsqu'ils indexent votre page, prennent en considération les titres en tant que mots‑clés ce qui influe sur le classement de la page lors d'une recherche. Sans titre, une page aura un faible référencement (voir {{glossary("SEO")}} (Search Engine Optimization).</li>
+ <li>Les personnes malvoyantes ne pouvant lire votre page peuvent utiliser des <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteurs d'écran</a>. Ces logiciels permettent d'accéder rapidement à une partie du texte. Pour cela, ils lisent les titres de votre document aux utilisateurs, leur permettant ainsi de trouver rapidement l'information dont ils ont besoin. Si les titres ne sont pas disponibles, les lecteurs d'écran lisent tout le document, le rendant peu accessible aux personnes avec un handicap visuel.</li>
+ <li>Pour composer un style de contenu avec le {{glossary("CSS")}} ou réaliser des choses intéressantes avec le {{glossary("JavaScript")}}, vous devez avoir des éléments enveloppant les contenus pertinents, ce qui permet ensuite de les cibler avec CSS/JavaScript.</li>
+</ul>
+
+<p>Il est donc nécessaire d'ajouter des balises de structuration du contenu.</p>
+
+<h3 id="Apprentissage_actif_structurer_le_contenu">Apprentissage actif : structurer le contenu</h3>
+
+<p>Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ <em>Sortie directe</em>.</p>
+
+<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">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;Ma courte histoire : je suis une policière et mon nom est Trish.
+
+Mes jambes sont en carton et je suis mariée à un poisson.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Ma courte histoire&lt;/h1&gt;\n&lt;p&gt;Je suis une policière et mon nom est Trish.&lt;/p&gt;\n&lt;p&gt;Mes jambes sont en carton et je suis mariée à un poisson.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 370) }}</p>
+
+<h3 id="Pourquoi_a-t-on_besoin_de_sémantique">Pourquoi a-t-on besoin de sémantique ?</h3>
+
+<p>La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)</p>
+
+<p>Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».</p>
+
+<pre class="brush: html">&lt;h1&gt;Ceci est un titre principal&lt;/h1&gt;</pre>
+
+<p>Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).</p>
+
+<p>D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Est-ce un titre principal?&lt;/span&gt;</pre>
+
+<p>C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.</p>
+
+<h2 id="Listes">Listes</h2>
+
+<p>Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours,  sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.</p>
+
+<h3 id="Listes_non-ordonnées">Listes non-ordonnées</h3>
+
+<p>Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :</p>
+
+<pre>lait
+œufs
+pain
+houmous</pre>
+
+<p>Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (<em><strong>u</strong>norderd <strong>l</strong>ist</em>) qui enveloppe tous les éléments de la liste:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+lait
+œufs
+pain
+houmous
+&lt;/ul&gt;</pre>
+
+<p>Chaque item est contenu dans un élément {{htmlelement("li")}} (<em><strong>l</strong>ist <strong>i</strong>tem</em>):</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;lait&lt;/li&gt;
+  &lt;li&gt;œufs&lt;/li&gt;
+  &lt;li&gt;pain&lt;/li&gt;
+  &lt;li&gt;houmous&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée">Apprentissage actif : mettre des balises à une liste non-ordonnée</h4>
+
+<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>
+
+<p> </p>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;lait
+œufs
+pain
+houmous&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;lait&lt;/li&gt;\n&lt;li&gt;œufs&lt;/li&gt;\n&lt;li&gt;pain&lt;/li&gt;\n&lt;li&gt;houmous&lt;/li&gt;\n&lt;/ul&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+
+<h3 id="Listes_ordonnées">Listes ordonnées</h3>
+
+<p>Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:</p>
+
+<pre>Roulez jusqu'au bout de la route
+Tournez à droite
+Allez tout droit aux deux premiers ronds-points
+Tournez à gauche au troisième rond-point
+Roulez sur 300 mètres, l'école est sur votre droite</pre>
+
+<p>Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (<em><strong>o</strong>rdered <strong>l</strong>ist</em>), et non dans <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Roulez jusqu'au bout de la route&lt;/li&gt;
+  &lt;li&gt;Tournez à droite&lt;/li&gt;
+  &lt;li&gt;Allez tout droit aux deux premiers ronds-points&lt;/li&gt;
+  &lt;li&gt;Tournez à gauche au troisième rond-point&lt;/li&gt;
+  &lt;li&gt;Roulez sur 300 mètres, l'école est sur votre droite&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Apprentissage_actif_baliser_une_liste_ordonnée">Apprentissage actif : baliser une liste ordonnée</h4>
+
+<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>
+
+<p> </p>
+
+<pre class="brush: html">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Roulez jusqu'au bout de la route
+Tournez à droite
+Allez tout droit aux deux premiers rond-points
+Tournez à gauche au troisième rond-point
+Roulez sur 300 mètres, l'école est sur votre droite&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;Roulez jusqu\'au bout de la route&lt;/li&gt;\n&lt;li&gt;Tournez à droite&lt;/li&gt;\n&lt;li&gt;Allez tout droit aux deux premiers rond-points&lt;/li&gt;\n&lt;li&gt;Tournez à gauche au troisième rond-point&lt;/li&gt;\n&lt;li&gt;Roulez sur 300 mètres, l\'école est sur votre droite&lt;/li&gt;\n&lt;/ol&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 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">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Recette rapide de l'houmous
+
+  Cette recette permet d'obtenir rapidement un houmous savoureux, sans complications. C'est une adaptation de plusieurs recettes différentes que j'ai essayées au fil des ans.
+
+  L'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au Moyen-Orient. Il s'accorde très bien avec la salade, les viandes grillées et du pain calabrais.
+
+  Ingrédients
+
+  1 boîte (400 g) de pois chiches (garbanzos)
+  175g de crème de sésame
+  6 tomates séchées
+  un demi poivron rouge
+  une pincée de piment de Cayenne
+  1 gousse d'ail
+  un trait d'huile d'olive
+
+  Ôter la peau de l'ail et le hacher grossièrement.
+  Enlever les graines et la tige du poivron, le hacher grossièrement.
+  Mettre tous les ingrédients dans un robot et mixer jusqu'à l'obtention d'une pâte.
+  Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.
+  Si vous voulez un houmous lisse, mixez-le plus longtemps.
+
+  Pour des saveurs différentes, vous pouvez essayer d'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.
+
+  Conservation
+
+  Mettez l'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine.   S'il se met à fermenter, jettez‑le sans hésiter.
+
+  L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Recette rapide de l\'houmous&lt;/h1&gt;\n\n&lt;p&gt;Cette recette permet d\'obtenir rapidement un houmous savoureux, sans complications. C\'est une adaptation de plusieurs recettes différentes que j\'ai essayées au fil des ans.&lt;/p&gt;\n\n&lt;p&gt;L\'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au moyen-orient. Il s\'accorde très bien avec la salade, les viandes grillées et du pain calabrais.&lt;/p&gt;\n\n&lt;h2&gt;Ingrédients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 boîte (400 g) de pois chiches (garbanzos)&lt;/li&gt;\n&lt;li&gt;175g de crème de sésame&lt;/li&gt;\n&lt;li&gt;6 tomates séchées&lt;/li&gt;\n&lt;li&gt;un demi poivron rouge&lt;/li&gt;\n&lt;li&gt;une pincée de piment de Cayenne&lt;/li&gt;\n&lt;li&gt;1 gousse d\'ail&lt;/li&gt;\n&lt;li&gt;un trait d\'huile d\'olive&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Ôter la peau de l\'ail et le hacher grossièrement.&lt;/li&gt;\n&lt;li&gt;Enlever les graines et la tige du poivron, le hacher grossièrement.&lt;/li&gt;\n&lt;li&gt;Mettre tous les ingrédients dans un robot mixer jusqu\'à l\'obtention d\'une pâte.&lt;/li&gt;\n&lt;li&gt;Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.&lt;/li&gt;\n&lt;li&gt;Si vous voulez un houmous lisse, mixez-le plus longtemps.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Pour des saveurs différentes, vous pouvez essayer d\'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.&lt;/p&gt;\n\n&lt;h2&gt;Conservation&lt;/h2&gt;\n\n&lt;p&gt;Mettez l\'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S\'il se met à fermenter, jettez‑le sans hésiter.&lt;/p&gt;\n\n&lt;p&gt;L\'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+  textarea.onkeyup = function(){
+// nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+// non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 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>
+
+<h3 id="Imbriquer_des_listes">Imbriquer des listes</h3>
+
+<p>Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Ôter la peau de l'ail et le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Enlever les graines et la tige du poivron, le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.&lt;/li&gt;
+  &lt;li&gt;Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.&lt;/li&gt;
+  &lt;li&gt;Si vous voulez un houmous lisse, mixez-le plus longtemps.&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Ôter la peau de l'ail et le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Enlever les graines et la tige du poivron, le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
+    &lt;ul&gt;
+      &lt;li&gt;Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.&lt;/li&gt;
+      &lt;li&gt;Si vous voulez un houmous lisse, mixez-le plus longtemps.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.</p>
+
+<h2 id="Soulignement_et_importance">Soulignement et importance</h2>
+
+<p>Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.</p>
+
+<h3 id="Emphase">Emphase</h3>
+
+<p>Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.</p>
+
+<p>« Je suis content que vous n'ayez pas été en retard. »</p>
+
+<p>« Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>. »</p>
+
+<p>La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.</p>
+
+<p>En HTML, nous utilisons l'élément {{htmlelement("em")}} (<strong>em</strong>phase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).</p>
+
+<pre class="brush: html">&lt;p&gt;Je suis &lt;em&gt;content&lt;/em&gt; que vous n'ayez pas été &lt;em&gt;en retard&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Grande_importance">Grande importance</h3>
+
+<p>Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :</p>
+
+<p>Ce liquide est <strong>hautement toxique</strong>.</p>
+
+<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
+
+<p>En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).</p>
+
+<pre class="brush: html">&lt;p&gt;Ce liquide est &lt;strong&gt;hautement toxique&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;Je compte sur vous. &lt;strong&gt;Ne soyez pas en retard&lt;/strong&gt; !&lt;/p&gt;</pre>
+
+<p>Il est possible d'imbriquer <code>strong</code> et <code>em</code> :</p>
+
+<pre class="brush: html">&lt;p&gt;Ce liquide est &lt;strong&gt;hautement toxique&lt;/strong&gt; —
+si vous en buvez, &lt;strong&gt;vous pourriez en &lt;em&gt;mourir&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<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">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Avis important&lt;/h1&gt;
+&lt;p&gt;Le dimanche 9 janvier 2010, une bande de barbares
+   a été repérée en train de voler plusieurs nains
+   de jardin dans un centre commercial du centre-ville
+   de Milwaukee. Ils portaient tous des combinaisons
+   vertes et des chapeaux ridicules, et semblaient
+   s'amuser comme des fous. Si quelqu'un a une quelconque information
+  sur cet incident, veuillez contacter la police immédiatement.&lt;/p&gt;&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<p> </p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = "&lt;h1&gt;Avis important&lt;/h1&gt;\n&lt;p&gt;Le &lt;strong&gt;dimanche 9 janvier 2010&lt;/strong&gt;, une bande de &lt;em&gt;barbares&lt;/em&gt; a été repérée en train de voler &lt;strong&gt;&lt;em&gt;plusieurs&lt;/em&gt; nains de jardin&lt;/strong&gt; dans un centre commercial du centre-ville de &lt;strong&gt;Milwaukee&lt;/strong&gt;. Ils portaient tous &lt;em&gt;des combinaisons vertes&lt;/em&gt; et des &lt;em&gt;chapeaux ridicules&lt;/em&gt; et semblaient s'amuser comme des fous. Si quelqu'un a une &lt;strong&gt;quelconque&lt;/strong&gt; information sur cet incident, veuillez contacter la police &lt;strong&gt;immédiatement&lt;/strong&gt;.&lt;/p&gt;";
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+  // Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+  // met à jour le texte du code
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+
+<h3 id="Italique_gras_soulignement…">Italique, gras, soulignement…</h3>
+
+<p>Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés <strong>éléments de présentation</strong> et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.</p>
+
+<p>HTML5 a redéfini <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> et <code>&lt;u&gt;</code> avec de nouveaux rôles sémantiques quelques peu déroutants.</p>
+
+<p>Voici la meilleure règle d'or : il est probablement approprié d'utiliser <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, ou <code>&lt;u&gt;</code> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.</p>
+
+<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('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>&lt;u&gt;</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">&lt;!-- noms scientifiques --&gt;
+&lt;p&gt;
+  Le colibri à gorge rouge (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
+&lt;/p&gt;
+
+&lt;!-- mots dans une langue étrangère --&gt;
+&lt;p&gt;
+  Le menu était un océan de mots exotiques comme &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; et &lt;i lang="en"&gt;porridge&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- une faute d'orthographe connue --&gt;
+&lt;p&gt;
+  Un jour, j'apprendrai comment mieux &lt;u style="text-decoration-line: underline; text-decoration-style: wavy;"&gt;épeler&lt;/u&gt;.
+&lt;/p&gt;
+
+&lt;!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Trancher&lt;/b&gt; deux morceaux de pain dans la miche.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Mettre&lt;/b&gt; une rondelle de tomate et une feuille de laitue
+    entre les deux tranches de pain.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment <a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">créer des hyperliens</a>, qui est peut-être l'élément le plus important sur le Web.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li>Fondamentaux du texte HTML</li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Faire une Lettre</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/apprendre/html/introduction_à_html/index.html b/files/fr/apprendre/html/introduction_à_html/index.html
new file mode 100644
index 0000000000..d9d5aa9a05
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/index.html
@@ -0,0 +1,65 @@
+---
+title: Introduction au HTML
+slug: Apprendre/HTML/Introduction_à_HTML
+tags:
+  - Codage
+  - HTML
+  - Introduction au HTML
+  - Landing
+  - Liens
+  - Structure
+  - Texte
+  - head
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_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>
+
+<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/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">cet article</a> et comprendre comment créer et gérer des fichiers tel qu’expliqué dans <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">cet autre article</a> — ces deux articles font partie du module <a href="/fr/Apprendre/Commencer_avec_le_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>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l’occasion de tester vos compétences.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></dt>
+ <dd>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 attiser votre intérêt.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></dt>
+ <dd><code>head</code> 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 grâce  des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Les concepts fondamentaux du HTML liés au texte</a></dt>
+ <dd>Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi <strong>sémantiser</strong>), afin que le navigateur sache comment l’afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d’emphase ou d’importance à des mots, créer des listes, etc.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Créer des hyperliens</a></dt>
+ <dd>Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">La mise en forme avancée du texte</a></dt>
+ <dd>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/Apprendre/HTML/Introduction_à_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. 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.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">La structure d'un document et d'un site web</a></dt>
+ <dd>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.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer du code HTML</a></dt>
+ <dd>É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.</dd>
+</dl>
+
+<h2 id="Évaluations">Évaluations</h2>
+
+<p>Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Utiliser les bons éléments pour une lettre</a></dt>
+ <dd>Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L’exercice consiste à baliser une lettre.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Organiser la structure d'une page</a></dt>
+ <dd>Dans cette évaluation, vous devrez organiser la structure d’une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.</dd>
+</dl>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt>
+ <dd>Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s’y familiariser avec la lecture, l’écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.</dd>
+</dl>
diff --git a/files/fr/apprendre/html/introduction_à_html/marking_up_a_letter/index.html b/files/fr/apprendre/html/introduction_à_html/marking_up_a_letter/index.html
new file mode 100644
index 0000000000..cdf9dd4cf1
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/marking_up_a_letter/index.html
@@ -0,0 +1,103 @@
+---
+title: Faire une lettre
+slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter
+tags:
+  - Codage
+  - Débutant
+  - Evaluation
+  - HTML
+  - Liens
+  - Texte
+  - en-tête
+translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+---
+<div>{{LearnSidebar}}</div>
+
+<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>&lt;head&gt;</code> en HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de se lancer dans cet exercice, vous devez déja avoir travaillé <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a> et <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément &lt;head&gt;.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour commencer cet exercice, vous devez récupérer le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">texte brut que vous allez baliser</a> et les CSS <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">à inclure</a> dans l'HTML. Créez un nouveau fichier <code>.html</code> avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire l'exercice.)</p>
+
+<h2 id="Projet_«_lettre_»">Projet « lettre »</h2>
+
+<p>Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.</p>
+
+<p>Sémantique de blocs/structures :</p>
+
+<ul>
+ <li>Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}.</li>
+ <li>La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne  « Re : ») et trois en-têtes de deuxième niveau.</li>
+ <li>Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés.</li>
+ <li>Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe.</li>
+</ul>
+
+<p>Sémantique en ligne :</p>
+
+<ul>
+ <li>Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance.</li>
+ <li>Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine.</li>
+ <li>La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.</li>
+ <li>Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.</li>
+ <li>Les six indices/exposants seront balisés de manière appropriée.</li>
+ <li>Les symboles « degré »,  « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.</li>
+ <li>Essayez de marquer au moins deux mots importants en gras/italique.</li>
+ <li>Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http://example.com.</li>
+ <li>La citation et la devise de l'université doivent être marquées avec les éléments appropriés.</li>
+</ul>
+
+<p>Dans l'en‑tête du document :</p>
+
+<ul>
+ <li>Le jeu de caractères sera précisé comme étant utf-8 avec la balise <code>meta</code> appropriée.</li>
+ <li>L'auteur de la lettre sera indiqué dans une balise <code>meta</code> adéquate.</li>
+ <li>Les CSS fournies seront incorporées avec le marquage approprié.</li>
+</ul>
+
+<h2 id="Conseils_et_astuces">Conseils et astuces</h2>
+
+<ul>
+ <li>Utilisez le <a href="https://validator.w3.org/">validateur HTML W3C</a> pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide.</li>
+ <li>Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.</p>
+
+<p><img alt="Présentation de la lettre" src="https://mdn.mozillademos.org/files/15997/fr-lettre.png"></p>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li>Faire une Lettre</li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/introduction_à_html/structuring_a_page_of_content/index.html b/files/fr/apprendre/html/introduction_à_html/structuring_a_page_of_content/index.html
new file mode 100644
index 0000000000..acbe843b62
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/structuring_a_page_of_content/index.html
@@ -0,0 +1,96 @@
+---
+title: Structurer une page de contenu
+slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
+translation_of: Learn/HTML/Introduction_to_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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour commencer cet exercice, vous pouvez télécharger <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">l'archive contenant les fichiers nécessaires</a> à cette évaluation. Elle contient :</p>
+
+<ul>
+ <li>le fichier HTML auquel vous allez devoir ajouter le balisage structurel,</li>
+ <li>le fichier CSS pour styliser la page,</li>
+ <li>les images utilisées dans la page.</li>
+</ul>
+
+<p>Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation.</p>
+
+<h2 id="Aperçu_du_projet">Aperçu du projet</h2>
+
+<p>Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :</p>
+
+<ul>
+ <li>un en‑tête sur toute la largeur de la page avec le titre de la page, le logo du site et le menu de navigation. Le titre et le logo apparaîtront côte à côte une fois le style appliqué, et la navigation sera juste au‑dessous du menu,</li>
+ <li>une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images,</li>
+ <li>un pied de page avec les informations de droits d'auteur et les crédits.</li>
+</ul>
+
+<p>Vous devez ajouter les enveloppes appropriées pour :</p>
+
+<ul>
+ <li>l'en-tête</li>
+ <li>le menu de navigation</li>
+ <li>le contenu principal</li>
+ <li>le texte de bienvenue</li>
+ <li>la barre latérale avec les images</li>
+ <li>le pied de page</li>
+</ul>
+
+<p>Vous devez aussi</p>
+
+<ul>
+ <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>
+
+<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>
+ <li>Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML.</li>
+ <li>Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page.</li>
+ <li>Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<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 &quot;Observons les oiseaux&quot;, des photos d'oiseaux et un message de bienvenue." src="https://mdn.mozillademos.org/files/15998/oiseaux.png" style="display: block; height: 1070px; margin: 0px auto; width: 1273px;"></p>
+
+<h2 id="ÉvaluationEdit">Évaluation<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter$edit#Évaluation" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a> ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !</p>
+
+<p>{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li>Structurer une page de contenu</li>
+</ul>
diff --git a/files/fr/apprendre/html/introduction_à_html/the_head_metadata_in_html/index.html b/files/fr/apprendre/html/introduction_à_html/the_head_metadata_in_html/index.html
new file mode 100644
index 0000000000..f4d2163b6f
--- /dev/null
+++ b/files/fr/apprendre/html/introduction_à_html/the_head_metadata_in_html/index.html
@@ -0,0 +1,286 @@
+---
+title: Qu'avez-vous dans la tête ? Métadonnées en HTML
+slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Connaître les bases du HTML, telles qu'elles sont exposées dans l'article <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs:</th>
+   <td>En savoir plus sur la balise &lt;head&gt; du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">article précédent</a>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Ma page test&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Voici ma page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<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 &lt;head&gt; 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">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Ma page test&lt;/title&gt;
+&lt;/head&gt;</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="https://developer.mozilla.org/en-US/docs/Learn/Discover_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 &lt;head&gt;, 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>
+
+<p>Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !</p>
+
+<ul>
+ <li>L'élément {{htmlelement("h1")}} apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié).</li>
+ <li>L'élément {{htmlelement("title")}} est une métadonnée qui représente l'intitulé du document HTML global (non le contenu du document).</li>
+</ul>
+
+<h3 id="Apprentissage_actif_inspection_dun_exemple_simple">Apprentissage actif : inspection d'un exemple simple </h3>
+
+<ol>
+ <li>Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">page-titre-exemple</a> sur le dépôt Github. Pour ce faire, soit :
+
+  <ol>
+   <li>copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.</li>
+   <li>pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez <em>Fichier&gt; Enregistrer la page sous ...</em> dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.</li>
+  </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 &lt;title> a la valeur «Élément &lt;title>» et &lt;h1> la valeur Élément &lt;h1>." src="https://mdn.mozillademos.org/files/15944/fr-element-title.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;">Il devrait désormais être évident de situer où le contenu de &lt;h1&gt; apparaît  et où celui de <code>&lt;title&gt;</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>
+ </li>
+</ol>
+
+<p>Le contenu de l'élément <code>&lt;title&gt;</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 &gt; Marquer cette page</em> ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <code>&lt;title&gt;</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 &lt;title>." src="https://mdn.mozillademos.org/files/15945/fr-bookmarked.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<p>Le contenu de <code>&lt;title&gt;</code> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.</p>
+
+<h2 id="Métadonnées_lélément_&lt;meta>">Métadonnées : l'élément &lt;meta&gt;</h2>
+
+<p>Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <code>&lt;meta&gt;</code> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.</p>
+
+<h3 id="Définition_de_lencodage_des_caractères_du_document">Définition de l'encodage des caractères du document</h3>
+
+<p>Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :</p>
+
+<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;</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="https://mdn.mozillademos.org/files/15946/fr-meta-utf8.png" style="display: block; height: 404px; margin: 0px auto; width: 657px;">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="https://mdn.mozillademos.org/files/15947/fr-meta-ISO.png" style="display: block; height: 400px; margin: 0px auto; width: 657px;"></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>
+</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>&lt;title&gt;</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>
+
+<pre class="brush: html notranslate">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</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>&lt;meta&gt;</code> icontiennent les attributs <code>name</code> et <code>content</code> :</span></span></p>
+
+<ul>
+ <li><code>name</code> définit le type de méta élément ; le type d'informations  contenu.</li>
+ <li><code>content</code> définit le contenu réel de la métadonnée.</li>
+</ul>
+
+<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">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;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>"&gt;</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>
+
+<p>Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme <a href="https://developer.mozilla.org/fr/docs/Glossaire/SEO">Search Engine Optimization</a> ou {{glossary("SEO")}} — optimisation du moteur de recherche.)</p>
+
+<h3 id="Apprentissage_actif_utilisation_des_descriptions_dans_les_moteurs_de_recherche.">Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.</h3>
+
+<p>La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.</p>
+
+<ol>
+ <li>Allez sur la page d'accueil de <a href="https://developer.mozilla.org/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">&lt;meta name="description" content="<span><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>"&gt;</span></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>&lt;meta&gt;</code> description et de l'élément <code>&lt;title&gt;</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="https://mdn.mozillademos.org/files/15948/fr-google.png" style="border-style: solid; border-width: 1px; display: block; height: 448px; margin: 0px auto; width: 700px;"></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="http://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>&lt;meta&gt;</code> ne sont plus utilisées. Par exemple, l'élément <code>&lt;meta&gt;</code> <code>keyword</code> (<code>&lt;meta name= "keywords" content="mettez, vos, mot-clés, ici"&gt;</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>
+
+<p>En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;</p>
+
+<p>Par exemple, <a href="http://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">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content=<span>"<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>"&gt;</span>
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</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="https://mdn.mozillademos.org/files/12349/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>
+
+<pre class="brush: html notranslate">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</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>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>
+
+<p>Une favicône peut être ajoutée à votre page de la façon suivante :</p>
+
+<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>&lt;head&gt;</code> du HTML pour la référencer :
+  <pre class="brush: html notranslate">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</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="https://mdn.mozillademos.org/files/15949/fr-library.png" style="display: block; height: 396px; margin: 0px auto; width: 550px;"></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">&lt;!-- troisième-génération iPad avec haute-résolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone avec haute-résolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- iPad de première et deuxième génération : --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- favicône de base --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.</p>
+
+<p>Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.</p>
+
+<h2 id="Application_des_CSS_et_JavaScript_au_HTML">Application des CSS et JavaScript au HTML</h2>
+
+<p>À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.</p>
+
+<ul>
+ <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">&lt;link rel="stylesheet" href="mon_fichier_css.css"&gt;</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>&lt;/body&gt;</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">&lt;script src="mon-fichier-js.js"&gt;&lt;/script&gt;</pre>
+
+  <div class="note">
+  <p><strong>Note </strong>: L'élément <code>&lt;script&gt;</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>&lt;script&gt;</code>.</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="Apprentissage_actif_appliquer_des_CSS_et_du_JavaScript_à_une_page">Apprentissage actif : appliquer des CSS et du JavaScript à une page</h3>
+
+<ol>
+ <li>Pour commencer cet apprentissage actif, prenez une copie de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.</li>
+ <li>Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.</li>
+ <li>En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.</li>
+</ol>
+
+<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="https://mdn.mozillademos.org/files/15950/JS-CSS-exemple.png" style="display: block; height: 475px; margin: 0px auto; width: 568px;"></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>
+ <li>Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS).</li>
+</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>
+</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>
+
+<pre class="brush: html notranslate">&lt;html lang="fr"&gt;</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">&lt;p&gt;Exemple en japonais : &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</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>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li>Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/apprendre/html/multimedia_and_embedding/contenu_audio_et_video/index.html b/files/fr/apprendre/html/multimedia_and_embedding/contenu_audio_et_video/index.html
new file mode 100644
index 0000000000..deb09eb186
--- /dev/null
+++ b/files/fr/apprendre/html/multimedia_and_embedding/contenu_audio_et_video/index.html
@@ -0,0 +1,314 @@
+---
+title: Contenu audio et vidéo
+slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
+tags:
+  - Article
+  - Audio
+  - Débutant
+  - Guide
+  - HTML
+  - Légendes
+  - Video
+  - pistes (audio ou texte)
+  - sous‑titres
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box 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>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_et_vidéo_sur_le_web">Audio et vidéo sur le web</h2>
+
+<p>Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme <a href="https://fr.wikipedia.org/wiki/Adobe_Flash">Flash</a> (puis, plus tard, <a href="https://fr.wikipedia.org/wiki/Silverlight">Silverlight</a>) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.</p>
+
+<p>Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.</p>
+
+<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>
+</div>
+
+<h3 id="L'_élément_&lt;video>">L' élément &lt;video&gt;</h3>
+
+<p>L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :</p>
+
+<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un &lt;a href="rabbit320.webm"&gt;lien sur la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Les fonctionnalités de ce code sont :</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut <code>src</code> (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'<a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie">épilepsie</a>.) Vous devez vous servir de l'attribut  <code>controls</code> pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'<a href="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>
+ <dt>Le paragraphe dans la balise <code>&lt;video&gt;</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>&lt;video&gt;</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>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>
+
+<h3 id="Gestion_de_différents_formats">Gestion de différents formats</h3>
+
+<p>Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.</p>
+
+<p>Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des <a href="https://fr.wikipedia.org/wiki/Format_conteneur">formats conteneurs</a>. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.</p>
+
+<p>Les pistes audio et vidéo sont aussi de différents formats, par exemple :</p>
+
+<ul>
+ <li>Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.</li>
+ <li>Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.</li>
+ <li>L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.</li>
+</ul>
+
+<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>
+</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>
+
+<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> </p>
+</div>
+
+<p>Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">mis à jour</a>, (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">essayez-le directement ici</a> aussi) :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un &lt;a href="rabbit320.mp4"&gt;lien sur la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Ici, nous avons retiré l'attribut <code>src</code> de la balise &lt;video&gt; et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <code>&lt;source&gt;</code> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.</p>
+
+<p>Chaque élément &lt;source&gt; possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note</strong> : L'<a href="/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>
+</div>
+
+<h3 id="Autres_fonctionnalités_de_&lt;video>">Autres fonctionnalités de &lt;video&gt;</h3>
+
+<p>Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :</p>
+
+<pre class="brush: html">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un &lt;a href="rabbit320.mp4"&gt;lien à la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<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>Voici les nouvelles fonctionnalités :</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}</dt>
+ <dd>Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable <strong>rapport de proportions</strong>. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Cet attribut coupe le son de la vidéo par défaut.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :</p>
+
+ <ul>
+  <li><code>"none"</code> : ne pas mettre le fichier dans un tampon</li>
+  <li><code>"auto"</code> : mettre le fichier média dans un tampon</li>
+  <li><code>"metadata"</code> : ne mettre que les métadonnées dans le tampon</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Vous trouverez cet exemple <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">prêt pour l'interprétation</a> sur Github ( voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html"> code source</a>). Notez que nous n'avons pas inséré l'attribut <code>autoplay</code> dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !</p>
+
+<h3 id="L'élément_&lt;audio>">L'élément  &lt;audio&gt;</h3>
+
+<p>L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un &lt;a href="viper.mp3"&gt;lien sur l'audio&lt;/a&gt;.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<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>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouver <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">lancer la démo de l'audio en direct </a>sur Github (voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">code source de l'interpréteur</a>.)</p>
+</div>
+
+<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>
+
+<ul>
+ <li>L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs <code>width</code>/<code>height</code> — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur.</li>
+ <li>Il ne prend pas en charge non plus l'attribut <code>poster</code> — toujours pas de composant visuel.</li>
+</ul>
+
+<p>Excepté ce qui précéde, <code>&lt;audio&gt;</code> accepte les mêmes fonctionnalités que <code>&lt;video&gt;</code> — revoyez les sections ci-desssus pour plus d'informations à ce propos.</p>
+
+<h2 id="Afficher_du_texte_dans_une_vidéo">Afficher du texte dans une vidéo</h2>
+
+<p>Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :</p>
+
+<ul>
+ <li>De nombreuses personnes sont mal‑entendantes (dures d'oreille ou sourdes), et ne peuvent donc pas entendre le son.</li>
+ <li>D'autres ne veulent pas de son, soit parce qu'ils sont dans un environnement bruyant (comme un bar avec une foule pendant une retransmission de compétition sportive) et ne peuvent donc pas entendre, soit parce qu'ils sont dans un environnement silencieux (comme une bibliothèque) et ne veulent donc pas déranger.</li>
+ <li>Des personnes qui ne parlent pas la langue d'une vidéo peuvent souhaiter un sous‑titrage ou une traduction pour les aider à comprendre le contenu du média.</li>
+</ul>
+
+<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>
+</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>
+
+<dl>
+ <dt>les sous‑titres (<code>subtitles</code>)</dt>
+ <dd>Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.</dd>
+ <dt>les légendes (<code>captions</code>) </dt>
+ <dd>Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.</dd>
+ <dt>les descriptions programmées (<code>descriptions</code>) </dt>
+ <dd>Textes convertis en audio, pour aider les personnes avec des défauts de vision.</dd>
+</dl>
+
+<p>Un fichier WebVTT typique ressemblera à :</p>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+Ceci est le premier sous‑titre.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+Ceci est le deuxième.
+
+  ...</code>
+</pre>
+
+<p>Pour qu'il soit affiché avec la diffusion du média HTML, il faut :</p>
+
+<ol>
+ <li>Enregistrer le fichier avec l'extension <code>.vtt</code> dans un endroit sensé.</li>
+ <li>Lier le fichier <code>.vtt</code> avec l'élément {{htmlelement("track")}}. <code>&lt;track&gt;</code> doit être placé entre les balises <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code>, mais après tous les éléments <code>&lt;source&gt;</code>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  <code>subtitles</code>, <code>captions</code> ou <code>descriptions</code>. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.</li>
+</ol>
+
+<p>Voici un exemple :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<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>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>
+
+<div class="note">
+<p><strong>Note </strong>: Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.</p>
+</div>
+
+<h3 id="Apprentissage_interactif_intégrer_vos_propres_vidéos_et_audios">Apprentissage interactif : intégrer vos propres vidéos et audios</h3>
+
+<p>Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> et <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Nous aimerions que vous essayiez !</p>
+
+<p>Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">échantillons audio et vidéo </a>pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.</p>
+
+<p>Il vous faudra :</p>
+
+<ol>
+ <li>Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.</li>
+ <li>Créer un nouveau fichier HTML dans le même répertoire nommé :  <code>index.html</code>.</li>
+ <li>Ajouter des éléments  <code>&lt;audio&gt;</code> et  <code>&lt;video&gt;</code> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.</li>
+ <li>Leur attribuer (aux deux) des éléments <code>&lt;source&gt;</code> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  <code>type</code>.</li>
+ <li>Donner à l'élément <code>&lt;video&gt;</code> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.</li>
+</ol>
+
+<p>En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.</p>
+
+<h2 id="Consultez_aussi">Consultez aussi :</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <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>Options automatisées pour la <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduction multimédia</a>.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<h2 id="Contenu_du_module">Contenu du module :</h2>
+
+<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 &lt;object&gt; to &lt;iframe&gt; — 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>
+</ul>
+
+<p> </p>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/fr/apprendre/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/apprendre/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..ff8adaf25c
--- /dev/null
+++ b/files/fr/apprendre/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,523 @@
+---
+title: Les images en HTML
+slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
+tags:
+  - Débutant
+  - Guide
+  - HTML
+  - Image
+  - Title
+  - alt text
+  - figcaption
+  - figure
+  - img
+  - src
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box 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>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Comment_intégrer_une_image_à_une_page_web">Comment intégrer une image à une page web ?</h2>
+
+<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>
+</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>
+
+<pre class="brush: html">&lt;img src="dinosaur.jpg"&gt;</pre>
+
+<p>Et si cette image se trouve dans un sous-répertoire <code>images</code> situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<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>
+</div>
+
+<p>Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :</p>
+
+<pre class="brush: html">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<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>
+ <br>
+ 1) Ce soit votre image (vous en êtes le créateur),<br>
+ 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,<br>
+ 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.<br>
+ <br>
+ Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...</p>
+</div>
+
+<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>
+
+<div class="note">
+<p><strong>Note</strong>: Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez les exemples finis de cette section sur <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> (regardez aussi le  <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">code source </a>.)</p>
+</div>
+
+<h3 id="Texte_alternatif">Texte alternatif</h3>
+
+<p>Le prochain attribut que nous allons étudier est <code>alt</code>. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"&gt;</pre>
+
+<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>Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :</p>
+
+<ul>
+ <li>L'utilisateur est un déficient visuel qui utilise un <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteur d'écran</a> qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs.</li>
+ <li>Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier.</li>
+ <li>Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme <a href="https://fr.wikipedia.org/wiki/Lynx_(navigateur)">Lynx)</a>, qui affichent le texte alt des images.</li>
+ <li>Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche.</li>
+ <li>L'utilisateur a supprimé les images pour économiser le volume du transfert de données ou pour ne pas être distrait. C'est très commun sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûte cher.</li>
+</ul>
+
+<p>Que devriez-vous noter dans vos attributs <code>alt</code> ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :</p>
+
+<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>&lt;a&gt;</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>
+</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>
+</div>
+
+<h3 id="Largeur_et_hauteur_width-height">Largeur et hauteur (width-height)</h3>
+
+<p>Vous pouvez vous servir des attributs  <code>width</code> et <code>height</code> pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"&gt;</pre>
+
+<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>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>
+</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>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+
+<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>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>
+
+<h3 id="Pédagogie_active_incorporer_une_image">Pédagogie active : incorporer une image</h3>
+
+<p>À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.</p>
+
+<p>Nous avons encore quelques petites choses pour vous :</p>
+
+<ul>
+ <li>Ajoutez du texte <code>alt</code>  , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image.</li>
+ <li>Réglez l'image à une bonne taille :  <code>width</code> et <code>height</code> ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets.</li>
+ <li>Mettez un  <code>title</code>  sur l'image.</li>
+</ul>
+
+<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">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;img&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+
+
+<h2 id="Légender_des_images_avec_figure_et_figcaption">Légender des images avec <code>figure</code> et <code>figcaption</code></h2>
+
+<p>En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :</p>
+
+<pre class="brush: html">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?</p>
+
+<p>Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :</p>
+
+<pre>&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<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>
+</div>
+
+<p>Un objet &lt;figure&gt; n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :</p>
+
+<ul>
+ <li>exprime votre désir d'accessibilité et de compréhension facilitée.</li>
+ <li>peut se placer en plusieurs endroits dans une page à flot linéaire.</li>
+ <li>Fournit une information essentielle qui supporte le texte principal.</li>
+</ul>
+
+<p>Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.</p>
+
+<h3 id="Pédagogie_active_créer_un_objet_figure">Pédagogie active : créer un objet figure</h3>
+
+<p>Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :</p>
+
+<ul>
+ <li>Encapsulez-le dans un élément {{htmlelement("figure")}} .</li>
+ <li>Copiez le texte de l'attribut, enlevez l'attribut  <code>title</code>  et mettez le texte dans un élément  {{htmlelement("figcaption")}} sous l'image.</li>
+</ul>
+
+<p>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">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;figure&gt;\n &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171" /&gt;\n &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+
+
+
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Images_darrière-plan_CSS">Images d'arrière-plan CSS</h2>
+
+<p>Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et <code>background</code> , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :</p>
+
+<pre class="brush: css">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !</p>
+
+<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>
+</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>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<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 &lt;object&gt; to &lt;iframe&gt; — 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>
+</ul>
diff --git a/files/fr/apprendre/html/multimedia_and_embedding/index.html b/files/fr/apprendre/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..bcb6a30361
--- /dev/null
+++ b/files/fr/apprendre/html/multimedia_and_embedding/index.html
@@ -0,0 +1,71 @@
+---
+title: Multimédia et Intégration
+slug: Apprendre/HTML/Multimedia_and_embedding
+tags:
+  - Apprentissage
+  - Audio
+  - Codage
+  - Débutant
+  - Evaluation
+  - Flash
+  - Guide
+  - HTML
+  - Image Vectorielle
+  - Images
+  - Interactivité
+  - SVG
+  - Video
+  - iframes
+  - imagemaps
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p>Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. </p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<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>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.</p>
+
+<dl>
+ <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></strong></dt>
+ <dd>Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.</dd>
+ <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Vidéo et contenu audio</a></strong></dt>
+ <dd>Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; à &lt;iframe&gt; — autres techniques d'intégration</a></dt>
+ <dd>À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <code>&lt;iframe&gt;</code> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web">Ajouter des images vectorielles sur le Web </a></dt>
+ <dd>Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">Images adaptatives</a></dt>
+ <dd>
+ <p>Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du <a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">responsive design</a>, un futur sujet CSS que vous pourrez apprendre.</p>
+ </dd>
+</dl>
+
+<h2 id="Évaluations">Évaluations</h2>
+
+<p>Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></dt>
+ <dd>Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !</dd>
+</dl>
+
+<h2 id="À_voir_aussi">À voir aussi</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Intégrer une carte interactive en haut d'une image</a></dt>
+ <dd>Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web Principes fondamentaux 2</a></dt>
+ <dd>
+ <p>Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  <em>Multimedia et intégration</em>. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). </p>
+ </dd>
+</dl>
diff --git a/files/fr/apprendre/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/apprendre/html/multimedia_and_embedding/mozilla_splash_page/index.html
new file mode 100644
index 0000000000..26193c8bac
--- /dev/null
+++ b/files/fr/apprendre/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -0,0 +1,110 @@
+---
+title: 'Évaluation : page d''accueil Mozilla'
+slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
+translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box 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>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> sur github. Mettez le contenu du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> dans un fichier appelé <code>index.html</code> sur votre disque dur local, dans un nouveau répertoire. Puis copiez <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> dans le même dossier (clic droit sur l'image pour le menu des options).</p>
+
+<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>
+</div>
+
+<h2 id="Énoncé_du_projet">Énoncé du projet</h2>
+
+<p>Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :</p>
+
+<h3 id="Préparer_les_images">Préparer les images</h3>
+
+<p>Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :</p>
+
+<ul>
+ <li><code>firefox_logo-only_RGB.png</code></li>
+ <li><code>firefox-addons.jpg</code></li>
+ <li><code>mozilla-dinosaur-head.png</code></li>
+</ul>
+
+<p>Donnez-leur des noms similaires comme :  <code>firefoxlogo400.png</code> et <code>firefoxlogo120.png</code>.</p>
+
+<p>Continuons avec <code>mdn.svg</code>, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace<code>further-info</code>. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p>
+
+<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>
+</div>
+
+<h3 id="Ajouter_un_logo_à_l'en-tête">Ajouter un logo à l'en-tête</h3>
+
+<p>A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.</p>
+
+<h3 id="Ajouter_une_vidéo_dans_le_contenu_principal_de_l'article">Ajouter une vidéo dans le contenu principal de l'article</h3>
+
+<p>Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.</p>
+
+<h3 id="Ajouter_des_images_adaptatives_aux_liens_vers_les_ressources_externes">Ajouter des images adaptatives aux liens vers les ressources externes</h3>
+
+<p>Dans l'élément {{htmlelement("div")}} de la catégorie <code>further-info</code> vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.</p>
+
+<p>Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.</p>
+
+<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>
+</div>
+
+<h3 id="Un_panda_rouge_créatif">Un panda rouge créatif</h3>
+
+<p>Dans l'élément {{htmlelement("div")}} de la catégorie r<code>ed-panda</code>, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<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 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>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">fil de discussion concernant cet exercice</a>, ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !</p>
+
+<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<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>
+</ul>
+
+<p> </p>
diff --git a/files/fr/apprendre/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/apprendre/html/multimedia_and_embedding/other_embedding_technologies/index.html
new file mode 100644
index 0000000000..d90d486303
--- /dev/null
+++ b/files/fr/apprendre/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -0,0 +1,402 @@
+---
+title: Des objets aux « iframe » — autres techniques d'intégration
+slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies
+tags:
+  - Apprentissage
+  - Article
+  - Codage
+  - Débutant
+  - Flash
+  - Guide
+  - HTML
+  - Integration
+  - Multimédia et intégration
+  - Object
+  - embed
+  - iframe
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+<div>{{LearnSidebar}}</div>
+
+<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>&lt;iframe&gt;</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">
+ <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>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Une_courte_histoire_de_l'intégration">Une courte histoire de l'intégration</h2>
+
+<p>Il y a longtemps, sur le Web, il était courant d'utiliser des <strong>cadres</strong> pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé <strong>frameset</strong> (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.</p>
+
+<p> </p>
+
+<p>Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les <a href="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>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>
+
+<p>Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.</p>
+
+<p> </p>
+
+<h2 id="Apprentissage_actif_utilisations_classiques_de_l'intégration">Apprentissage actif : utilisations classiques de l'intégration</h2>
+
+<p>Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien <a href="https://www.youtube.com/">Youtube</a>, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.</p>
+
+<ol>
+ <li>D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.</li>
+ <li>Au‑dessous de la vidéo, vous devez trouver un bouton <em>Share (Partager)</em> — cliquez‑le pour afficher les options de partage.</li>
+ <li>Sélectionnez le bouton <em>Embed (Intégrer)</em> et vous obtiendrez un morceau de code <code>&lt;iframe&gt;</code> — copiez‑le.</li>
+ <li>Inserez ce code dans la boîte <em>Input</em> ci‑dessous, et voyez le résultat dans <em>Output</em>.</li>
+</ol>
+
+<p>En prime, vous pouvez aussi essayer d'intégrer une carte <a href="https://www.google.com/maps/">Google Map</a> dans l'exemple.</p>
+
+<ol>
+ <li>Allez sur Google Maps et trouvez une carte qui vous plaise.</li>
+ <li>Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.</li>
+ <li>Selectionnez l'option <em>Share or embed map</em> (Partager ou intégrer une carte).</li>
+ <li>Selectionnez l'option <em>Embed map</em> (intégrer une carte), qui vous fournira du code <code>&lt;iframe&gt;</code> — copiez‑le.</li>
+ <li>Inserez‑le dans la boîte <em>Input</em> di‑dessous et voyez le résultat dans <em>Output</em>.</li>
+</ol>
+
+<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">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 250px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Afficher la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Afficher la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Afficher la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Afficher la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloque la sortie de la zone texte avec la touche tab et fait en
+// sorte qu'il affiche une tabulation à l'emplacement du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Met à jour le code utilisateur enregistré chaque fois que l'utilisateur le modifie
+
+textarea.onkeyup = function(){
+  // Nous ne voulons enregistrer l'état quand le code utilisateur va être montré,
+  // et non la solution, de sorte que la solution n'est pas enregistrée avec le code utilisateur
+  if(solution.value === 'Afficher la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Iframes_en_détail">Iframes en détail</h2>
+
+<p>Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme <a href="https://disqus.com/">Disqus</a>, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <code>&lt;iframe&gt;</code>.</p>
+
+<p>Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec &lt;iframe&gt;, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :</p>
+
+<pre>&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox&gt;
+  &lt;p&gt; &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
+    Lien de repli pour les navigateurs ne prenant pas en charge iframe  &lt;/a&gt; &lt;/p&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <code>&lt;iframe&gt;</code> :</p>
+
+<dl>
+ <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
+ <dd>Si activé, <code>&lt;iframe&gt;</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>
+ <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
+ <dd>Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}<code>: none;</code> dans le {{Glossary('CSS')}}.</dd>
+ <dt>{{htmlattrxref('src','iframe')}}</dt>
+ <dd>Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.</dd>
+ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt>
+ <dd>Ces attributs définissent la largeur et la hauteur souhaitée pour <code>&lt;iframe&gt;</code>.</dd>
+ <dt><strong>Contenu de repli</strong></dt>
+ <dd>Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <code>&lt;iframe&gt;&lt;/iframe&gt;</code> qui seront affichées si l'explorateur ne prend pas en charge <code>&lt;iframe&gt;</code>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <code>&lt;iframe&gt;</code>.</dd>
+ <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
+ <dd>Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <code>&lt;iframe&gt;</code> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note </strong>: Afin d'améliorer la vitesse, il est pertinent de définir l'attribut <code>src</code> de <code>iframe</code> avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).</p>
+</div>
+
+<h3 id="Problèmes_de_sécurité">Problèmes de sécurité</h3>
+
+<p>Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <code>&lt;iframe&gt;</code> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <code>&lt;iframe&gt;</code> — il faut juste être prudent. Poursuivons ...</p>
+
+<p>Fabricants de navigateurs et développeurs Web ont appris à la dure que <code>&lt;iframe&gt;</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>&lt;iframe&gt;</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>&lt;iframe&gt;</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>&lt;iframe&gt;</code> : les hackeurs incorporent un <code>&lt;iframe&gt;</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>&lt;iframe&gt;</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>
+
+<p>Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."</p>
+
+<p>Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.</p>
+
+<div>
+<p>Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.</p>
+</div>
+
+<h4 id="Utilisez_HTTPS">Utilisez HTTPS</h4>
+
+<p>{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :</p>
+
+<ol>
+ <li>    HTTPS réduit les risques d'altération du contenu distant lors du transfert,</li>
+ <li>    HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.</li>
+</ol>
+
+<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>&lt;iframe&gt;</code>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut <code>src</code> de <code>&lt;iframe&gt;</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>
+</div>
+
+<h4 id="Toujours_utiliser_l'attribut_sandbox">Toujours utiliser l'attribut  <code>sandbox</code></h4>
+
+<p>Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox </a>(<em>bac à sable</em>).</p>
+
+<p>Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut <code>sandbox</code> sans paramètres, comme montré dans notre exemple précédent.</p>
+
+<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>&lt;iframe&gt;</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>&lt;iframe&gt;</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>
+
+<div class="note">
+<p><strong>Note </strong>: Lisez le post de Frederik Braun sur <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.</p>
+</div>
+
+<h2 id="Les_éléments_&lt;embed>_et_&lt;object>">Les éléments &lt;embed&gt; et &lt;object&gt;</h2>
+
+<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>
+</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>
+
+<p>Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">{{htmlelement("embed")}}</th>
+   <th scope="col">{{htmlelement("object")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("URL")}} du contenu à intégrer</td>
+   <td>{{htmlattrxref('src','embed')}}</td>
+   <td>{{htmlattrxref('data','object')}}</td>
+  </tr>
+  <tr>
+   <td>{{glossary("type MIME", 'type de media')}} <em>précis</em> du contenu intégré</td>
+   <td>{{htmlattrxref('type','embed')}}</td>
+   <td>{{htmlattrxref('type','object')}}</td>
+  </tr>
+  <tr>
+   <td>hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon</td>
+   <td>{{htmlattrxref('height','embed')}}<br>
+    {{htmlattrxref('width','embed')}}</td>
+   <td>{{htmlattrxref('height','object')}}<br>
+    {{htmlattrxref('width','object')}}</td>
+  </tr>
+  <tr>
+   <td>noms et valeurs à passer en paramètre au greffon</td>
+   <td>attributs adéquats avec ces noms et valeurs</td>
+   <td>éléments de la simple balise {{htmlelement("param")}}, contenus dans <code>&lt;object&gt;</code></td>
+  </tr>
+  <tr>
+   <td>contenu HTML indépendant en repli en cas de ressources inaccessibles</td>
+   <td>non pris en charge (<code>&lt;noembed&gt;</code> a été abandonné)</td>
+   <td>contenu dans <code>&lt;object&gt;</code>, après <code>les éléments &lt;param&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note </strong>: <code>&lt;object&gt;</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>
+
+<pre class="brush: html">&lt;embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
+
+<p>Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément &lt;objet&gt; avec un élément &lt;embed&gt; intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.</p>
+
+<p>Regardons maintenant un exemple avec <code>&lt;object&gt;</code> ; il intègre  un PDF dans une  (voir  <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">l'exemple en direct</a> et le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">code source</a>) :</p>
+
+<pre class="brush: html">&lt;object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch&gt;
+  &lt;p&gt;Vous ne possédez pas de greffon PDF, mais vous pouvez &lt;a href="myfile.pdf"&gt;télécharger le fichier PDF.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;</pre>
+
+<p>Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux <a href="http://webaim.org/techniques/acrobat/acrobat">problèmes d'accessibilité</a> et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.</p>
+
+<h3 id="Le_cas_«_greffons_»">Le cas « greffons »</h3>
+
+<p>Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.</p>
+
+<p><strong>Mettez‑vous à portée de tout le monde</strong>. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.</p>
+
+<ul>
+ <li><strong>Offrez-vous un répit avec les <a href="http://webaim.org/techniques/flash/">migraines d'accessibilités supplémentaires</a> qui proviennent de Flash et des autres greffons.</strong></li>
+ <li><strong>Restez à l'écart des risques supplémentaires en matière de sécurité.</strong><strong> </strong>Adobe Flash est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoirement</a> non‑sûr<a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">,</a> même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">demandé qu'Adobe arrête</a><a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso"> Flash.</a></li>
+</ul>
+
+<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>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.</p>
+
+<p>D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.</p>
+
+<p> </p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<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 &lt;object&gt; à &lt;iframe&gt; — 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>
+</ul>
+
+<p> </p>
diff --git a/files/fr/apprendre/html/tableaux/advanced/index.html b/files/fr/apprendre/html/tableaux/advanced/index.html
new file mode 100644
index 0000000000..30815fb4ec
--- /dev/null
+++ b/files/fr/apprendre/html/tableaux/advanced/index.html
@@ -0,0 +1,479 @@
+---
+title: 'Tableaux HTML :  dispositions avancées et accessibilité'
+slug: Apprendre/HTML/Tableaux/Advanced
+tags:
+  - Accessibilité
+  - Apprentissage
+  - Article
+  - Avancés
+  - Codage
+  - Débutant
+  - En-têtes
+  - HTML
+  - Imbrication
+  - Portée
+  - Tableaux
+  - caption
+  - resume
+  - tbody
+  - tfoot
+  - thead
+translation_of: Learn/HTML/Tables/Advanced
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les bases de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ajouter_un_titre_aux_tableaux_avec_&lt;caption>">Ajouter un titre aux tableaux avec &lt;caption&gt;</h2>
+
+<p>Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <code>&lt;table&gt;</code>.</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Dinosaures dans le Jurassique&lt;/caption&gt;
+
+  ...
+&lt;/table&gt;</pre>
+
+<p>Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.</p>
+
+<p>Le titre est placé directement sous la balise <code>&lt;table&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <code>&lt;table&gt;</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>&lt;caption&gt;</code>,  car <code>summary</code> est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTLM5, 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>
+
+<p>Essayons en revisitant un exemple rencontré dans l'article précédent.</p>
+
+<ol>
+ <li>Ouvrez le planning du professeur de langue de la fin de <a href="/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">Tableaux HTML : notions de base</a> ou faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a>.</li>
+ <li>Ajoutez un titre approprié pour le tableau.</li>
+ <li>Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.</li>
+</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>
+</div>
+
+<h2 id="Ajout_d'une_structure_avec_&lt;thead>_&lt;tfoot>_et_&lt;tbody>">Ajout d'une structure avec &lt;thead&gt;, &lt;tfoot&gt;, et &lt;tbody&gt;</h2>
+
+<p>Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.</p>
+
+<p>Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.</p>
+
+<p>Pour les utiliser :</p>
+
+<ul>
+ <li>L'élément <code>&lt;thead&gt;</code> doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments  {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.</li>
+ <li>L'élément <code>&lt;tfoot&gt;</code> doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément &lt;tfoot&gt;  à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément &lt;thead&gt; (le navigateur l'affichera toujours en pied de tableau).</li>
+ <li>L'élément <code>&lt;tbody&gt;</code>  doit couvrir toutes les parties du tableau non contenues dans un &lt;thead&gt; ou un &lt;tfoot&gt;. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : <code>&lt;tbody&gt;</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>&lt;tbody&gt;</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>
+
+<p>Mettons en œuvre ces nouveaux éléments.</p>
+
+<ol>
+ <li>D'abord, faites une copie locale des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> dans un nouveau dossier.</li>
+ <li>Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.</li>
+ <li>Mettez la ligne d'en-têtes en évidence avec l'élément <code>&lt;thead&gt;</code> , la ligne des totaux ("SUM") dans un <code>&lt;tfoot&gt;</code>, et le reste du contenu dans un <code>&lt;tbody&gt;</code>.</li>
+ <li>Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <code>&lt;tfoot&gt;</code> a renvoyé la ligne "SUM" en bas du tableau.</li>
+ <li>Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».</li>
+ <li>Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le &lt;head&gt; du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS :
+  <pre class="brush: css">tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+</pre>
+ </li>
+ <li>Enregistrez, actualisez et regardez le résultat. Si <code>&lt;tbody&gt;</code> et <code>&lt;tfoot&gt;</code> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.</li>
+</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>
+</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">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Enregistrer mes dépenses&lt;/title&gt;
+    &lt;style&gt;
+
+        html {
+          font-family: sans-serif;
+        }
+
+          table {
+          border-collapse: collapse;
+          border: 2px solid rgb(200,200,200);
+          letter-spacing: 1px;
+          font-size: 0.8rem;
+        }
+
+        td, th {
+          border: 1px solid rgb(190,190,190);
+          padding: 10px 20px;
+        }
+
+        th {
+          background-color: rgb(235,235,235);
+        }
+
+        td {
+          text-align: center;
+        }
+
+        tr:nth-child(even) td {
+          background-color: rgb(250,250,250);
+        }
+
+        tr:nth-child(odd) td {
+          background-color: rgb(245,245,245);
+        }
+
+        caption {
+          padding: 10px;
+        }
+
+        tbody {
+          font-size: 90%;
+          font-style: italic;
+        }
+
+        tfoot {
+          font-weight: bold;
+        }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;table&gt;
+        &lt;caption&gt;Comment j'ai choisi de dépenser mon argent&lt;/caption&gt;
+        &lt;thead&gt;
+          &lt;tr&gt;
+            &lt;th&gt;Achats&lt;/th&gt;
+            &lt;th&gt;Où ?&lt;/th&gt;
+            &lt;th&gt;Date&lt;/th&gt;
+            &lt;th&gt;Avis&lt;/th&gt;
+            &lt;th&gt;Coût (€)&lt;/th&gt;
+          &lt;/tr&gt;
+        &lt;/thead&gt;
+        &lt;tfoot&gt;
+          &lt;tr&gt;
+            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
+            &lt;td&gt;118&lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tfoot&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Coupe de cheveux&lt;/td&gt;
+            &lt;td&gt;Coiffeur&lt;/td&gt;
+            &lt;td&gt;12/09&lt;/td&gt;
+            &lt;td&gt;Bonne idée&lt;/td&gt;
+            &lt;td&gt;30&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Lasagnes&lt;/td&gt;
+            &lt;td&gt;Restaurant&lt;/td&gt;
+            &lt;td&gt;12/09&lt;/td&gt;
+            &lt;td&gt;Regrets&lt;/td&gt;
+            &lt;td&gt;18&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Souliers&lt;/td&gt;
+            &lt;td&gt;Chaussures&lt;/td&gt;
+            &lt;td&gt;13/09&lt;/td&gt;
+            &lt;td&gt;Gros regrets&lt;/td&gt;
+            &lt;td&gt;65&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Dentifrice&lt;/td&gt;
+            &lt;td&gt;Supermarché&lt;/td&gt;
+            &lt;td&gt;13/09&lt;/td&gt;
+            &lt;td&gt;Bien&lt;/td&gt;
+            &lt;td&gt;5&lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+    &lt;/table&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '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>
+</div>
+
+<h2 id="Tableaux_imbriqués">Tableaux imbriqués</h2>
+
+<p>Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <code>&lt;table&gt;</code>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.</p>
+
+<p>Le balisage suivant montre un tableau simple imbriqué :</p>
+
+<pre class="brush: html">&lt;table id="table1"&gt;
+  &lt;tr&gt;
+    &lt;th&gt;title1&lt;/th&gt;
+    &lt;th&gt;title2&lt;/th&gt;
+    &lt;th&gt;title3&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td id="nested"&gt;
+      &lt;table id="table2"&gt;
+        &lt;tr&gt;
+          &lt;td&gt;cell1&lt;/td&gt;
+          &lt;td&gt;cell2&lt;/td&gt;
+          &lt;td&gt;cell3&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    &lt;/td&gt;
+    &lt;td&gt;cell2&lt;/td&gt;
+    &lt;td&gt;cell3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;cell4&lt;/td&gt;
+    &lt;td&gt;cell5&lt;/td&gt;
+    &lt;td&gt;cell6&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Voici la sortie qui en résulte :</p>
+
+<table id="table1">
+ <tbody>
+  <tr>
+   <th>title1</th>
+   <th>title2</th>
+   <th>title3</th>
+  </tr>
+  <tr>
+   <td id="nested">
+    <table id="table2">
+     <tbody>
+      <tr>
+       <td>cell1</td>
+       <td>cell2</td>
+       <td>cell3</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>cell2</td>
+   <td>cell3</td>
+  </tr>
+  <tr>
+   <td>cell4</td>
+   <td>cell5</td>
+   <td>cell6</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tableaux_pour_utilisateurs_malvoyants">Tableaux pour utilisateurs malvoyants</h2>
+
+<p>Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.</p>
+
+<table>
+ <caption>Articles vendus Août 2016</caption>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <th colspan="3" scope="colgroup">Vêtements</th>
+   <th colspan="2" scope="colgroup">Accessoires</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <th scope="col">Pantalons</th>
+   <th scope="col">Jupes</th>
+   <th scope="col">Robes</th>
+   <th scope="col">Bracelets</th>
+   <th scope="col">Bagues</th>
+  </tr>
+  <tr>
+   <th rowspan="3" scope="rowgroup">Belgique</th>
+   <th scope="row">Anvers</th>
+   <td>56</td>
+   <td>22</td>
+   <td>43</td>
+   <td>72</td>
+   <td>23</td>
+  </tr>
+  <tr>
+   <th scope="row">Gand</th>
+   <td>46</td>
+   <td>18</td>
+   <td>50</td>
+   <td>61</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <th scope="row">Bruxelles</th>
+   <td>51</td>
+   <td>27</td>
+   <td>38</td>
+   <td>69</td>
+   <td>28</td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Pays-bas</th>
+   <th scope="row">Amsterdam</th>
+   <td>89</td>
+   <td>34</td>
+   <td>69</td>
+   <td>85</td>
+   <td>38</td>
+  </tr>
+  <tr>
+   <th scope="row">Utrecht</th>
+   <td>80</td>
+   <td>12</td>
+   <td>43</td>
+   <td>36</td>
+   <td>19</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+</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>
+
+<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 &lt;th&gt;</a> .</p>
+
+<h3 class="attTitle" id="L'attribut_scope">L'attribut <code>scope</code></h3>
+
+<p>Aux balises <code>&lt;th&gt;</code>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <code>&lt;th&gt;</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>
+
+<pre class="brush: html">&lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th scope="col"&gt;Achats&lt;/th&gt;
+    &lt;th scope="col"&gt;Ou ?&lt;/th&gt;
+    &lt;th scope="col"&gt;Date&lt;/th&gt;
+    &lt;th scope="col"&gt;Avis&lt;/th&gt;
+    &lt;th scope="col"&gt;Coût (€)&lt;/th&gt;
+  &lt;/tr&gt;
+&lt;/thead&gt;</pre>
+
+<p>Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):</p>
+
+<pre class="brush: html">&lt;tr&gt;
+  &lt;th scope="row"&gt;Coupe de cheveux&lt;/th&gt;
+  &lt;td&gt;Coiffeur&lt;/td&gt;
+  &lt;td&gt;12/09&lt;/td&gt;
+  &lt;td&gt;Bonne idée&lt;/td&gt;
+  &lt;td&gt;30&lt;/td&gt;
+&lt;/tr&gt;</pre>
+
+<p>Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.</p>
+
+<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>&lt;th&gt;</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>
+
+<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>
+
+<ol>
+ <li>Vous ajoutez un identifiant unique <code>id</code> à chaque élément <code>&lt;th&gt;</code>.</li>
+ <li>Vous ajoutez un attribut <code>headers</code> à chaque élément  <code>&lt;td&gt;</code> . Chaque attribut <code>headers</code> doit contenir une liste des <code>id</code> de tous les éléments &lt;th&gt; qu'il contient, séparés par des espaces.</li>
+</ol>
+
+<p>Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.</p>
+
+<p>En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :</p>
+
+<pre class="brush: html">&lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th id="purchase"&gt;Achats&lt;/th&gt;
+    &lt;th id="location"&gt;Où ?&lt;/th&gt;
+    &lt;th id="date"&gt;Date&lt;/th&gt;
+    &lt;th id="evaluation"&gt;Avis&lt;/th&gt;
+    &lt;th id="cost"&gt;Coût (€)&lt;/th&gt;
+  &lt;/tr&gt;
+&lt;/thead&gt;
+&lt;tbody&gt;
+&lt;tr&gt;
+  &lt;th id="haircut"&gt;Coupe de cheveux&lt;/th&gt;
+  &lt;td headers="location haircut"&gt;Coiffeur&lt;/td&gt;
+  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
+  &lt;td headers="evaluation haircut"&gt;Bonne idée&lt;/td&gt;
+  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
+&lt;/tr&gt;
+
+  ...
+
+&lt;/tbody&gt;</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>
+</div>
+
+<h3 id="Apprentissage_actif_jouer_avec_scope_et_headers">Apprentissage actif : jouer avec <code>scope</code> et <code>headers</code></h3>
+
+<ol>
+ <li>Pour cet exercice final, nous aimerions que vous fassiez une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items‑sold.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, dans un nouveau répertoire.</li>
+ <li>Maintenant essayez d'ajouter un attribut <code>scope</code> approprié pour améliorer ce tableau.</li>
+ <li>Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs <code>id</code> et <code>headers</code>.</li>
+</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>
+          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>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Décor des tableaux</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
+
+<div>
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<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>
+</ul>
+</div>
+</div>
diff --git a/files/fr/apprendre/html/tableaux/basics/index.html b/files/fr/apprendre/html/tableaux/basics/index.html
new file mode 100644
index 0000000000..d06b2f9bf1
--- /dev/null
+++ b/files/fr/apprendre/html/tableaux/basics/index.html
@@ -0,0 +1,581 @@
+---
+title: 'Tableaux HTML : notions de base'
+slug: Apprendre/HTML/Tableaux/Basics
+tags:
+  - Apprentissage
+  - Article
+  - Bases
+  - Codage
+  - Débutant
+  - En-têtes
+  - HTML
+  - Tableaux
+  - cellule
+  - col
+  - colgroup
+  - colspan
+  - rangées
+  - rowspan
+translation_of: Learn/HTML/Tables/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<dl>
+</dl>
+
+<table class="learn-box standard-table" style="height: 97px; width: 672px;">
+ <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>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec les tableaux HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est-ce_qu'un_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><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 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><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><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><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>
+
+<h3 id="Comment_fonctionne_un_tableau">Comment fonctionne un tableau ?</h3>
+
+<p>L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.</p>
+
+<table>
+ <caption>Données sur les planètes du système solaire (repris de <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption>
+ <thead>
+  <tr>
+   <td colspan="2"> </td>
+   <th scope="col">Nom</th>
+   <th scope="col">Masse (10<sup>24</sup>kg)</th>
+   <th scope="col">Diamètre (km)</th>
+   <th scope="col">Densité (kg/m<sup>3</sup>)</th>
+   <th scope="col">Gravité (m/s<sup>2</sup>)</th>
+   <th scope="col">Durée du jour (hours)</th>
+   <th scope="col">Distance du Soleil (10<sup>6</sup>km)</th>
+   <th scope="col">Température moyenne (°C)</th>
+   <th scope="col">Nombre de lunes</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="2" rowspan="4" scope="rowgroup">Planètes telluriques</th>
+   <th scope="row">Mercure</th>
+   <td>0.330</td>
+   <td>4,879</td>
+   <td>5427</td>
+   <td>3.7</td>
+   <td>4222.6</td>
+   <td>57.9</td>
+   <td>167</td>
+   <td>0</td>
+   <td>La plus proche du Soleil</td>
+  </tr>
+  <tr>
+   <th scope="row">Venus</th>
+   <td>4.87</td>
+   <td>12,104</td>
+   <td>5243</td>
+   <td>8.9</td>
+   <td>2802.0</td>
+   <td>108.2</td>
+   <td>464</td>
+   <td>0</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row">Terre</th>
+   <td>5.97</td>
+   <td>12,756</td>
+   <td>5514</td>
+   <td>9.8</td>
+   <td>24.0</td>
+   <td>149.6</td>
+   <td>15</td>
+   <td>1</td>
+   <td>Notre monde</td>
+  </tr>
+  <tr>
+   <th scope="row">Mars</th>
+   <td>0.642</td>
+   <td>6,792</td>
+   <td>3933</td>
+   <td>3.7</td>
+   <td>24.7</td>
+   <td>227.9</td>
+   <td>-65</td>
+   <td>2</td>
+   <td>La planète rouge</td>
+  </tr>
+  <tr>
+   <th rowspan="4" scope="rowgroup">Planètes joviennes</th>
+   <th rowspan="2" scope="rowgroup">Géantes gazeuses</th>
+   <th scope="row">Jupiter</th>
+   <td>1898</td>
+   <td>142,984</td>
+   <td>1326</td>
+   <td>23.1</td>
+   <td>9.9</td>
+   <td>778.6</td>
+   <td>-110</td>
+   <td>67</td>
+   <td>La plus grosse planète</td>
+  </tr>
+  <tr>
+   <th scope="row">Saturne</th>
+   <td>568</td>
+   <td>120,536</td>
+   <td>687</td>
+   <td>9.0</td>
+   <td>10.7</td>
+   <td>1433.5</td>
+   <td>-140</td>
+   <td>62</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Géantes glacées</th>
+   <th scope="row">Uranus</th>
+   <td>86.8</td>
+   <td>51,118</td>
+   <td>1271</td>
+   <td>8.7</td>
+   <td>17.2</td>
+   <td>2872.5</td>
+   <td>-195</td>
+   <td>27</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row">Neptune</th>
+   <td>102</td>
+   <td>49,528</td>
+   <td>1638</td>
+   <td>11.0</td>
+   <td>16.1</td>
+   <td>4495.1</td>
+   <td>-200</td>
+   <td>14</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="rowgroup">Planètes naines</th>
+   <th scope="row">Pluton</th>
+   <td>0.0146</td>
+   <td>2,370</td>
+   <td>2095</td>
+   <td>0.7</td>
+   <td>153.3</td>
+   <td>5906.4</td>
+   <td>-225</td>
+   <td>5</td>
+   <td>Déclassée en tant que planète en 2006 mais décision controverséee.</td>
+  </tr>
+ </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>
+
+<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>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>
+
+<h3 id="Quand_NE_PAS_utiliser_de_tableaux_en_HTML">Quand NE PAS utiliser de tableaux en HTML ?</h3>
+
+<p>Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec <a href="/fr/docs/Learn/Accessibility/HTML#Page_layouts">Mises en page</a> dans notre <a href="/fr/docs/Learn/Accessibility">Module d'apprentissage à l'Accessibilité</a>. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.</p>
+
+<p>Bref, utiliser les tableaux pour la mise en page <a href="/fr/docs/Learn/CSS/CSS_layout">au lieu des techniques des CSS</a> est une mauvaise idée. En voici les principales raisons :</p>
+
+<ol>
+ <li><strong>Les tableaux de mise en page diminuent l'accessibilité aux malvoyants </strong>: les <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lecteurs d'écran</a>, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.</li>
+ <li><strong>Les tables produisent de la bouillie :</strong> Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.</li>
+ <li><strong>Les tableaux ne s'adaptent pas automatiquement </strong>: Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.</li>
+</ol>
+
+<h2 id="Apprentissage_actif_créer_votre_premier_tableau">Apprentissage actif : créer votre premier tableau</h2>
+
+<p>Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.</p>
+
+<ol>
+ <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">&lt;table&gt;&lt;/table&gt;</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">&lt;td&gt;</a></code></strong> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau :
+  <pre class="brush: html">&lt;td&gt;Bonjour, je suis votre première cellule.&lt;/td&gt;</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">&lt;td&gt;Bonjour, je suis votre première cellule &lt;/td&gt;
+&lt;td&gt;je suis votre deuxième cellule&lt;/td&gt;
+&lt;td&gt;je suis votre troisième cellule&lt;/td&gt;
+&lt;td&gt;je suis votre quatrième cellule&lt;/td&gt;</pre>
+ </li>
+</ol>
+
+<p>Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <code>&lt;td&gt;</code> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.</p>
+
+<p>Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <strong><code><a href="/fr/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> (« tr » comme « table rangée »). Étudions cela maintenant.</p>
+
+<ol>
+ <li>Placez les quatre cellules que vous avez créées entre deux balises <code>&lt;tr&gt;</code> ainsi :
+
+  <pre class="brush: html">&lt;tr&gt;
+  &lt;td&gt;Bonjour, je suis votre première cellule &lt;/td&gt;
+  &lt;td&gt;je suis votre deuxième cellule &lt;/td&gt;
+  &lt;td&gt;je suis votre troisième cellule &lt;/td&gt;
+  &lt;td&gt;je suis votre quatrième cellule &lt;/td&gt;
+&lt;/tr&gt;</pre>
+ </li>
+ <li>Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <code>&lt;tr&gt;</code>, et comprend chaque cellule encadrée par <code>&lt;td&gt;</code>.</li>
+</ol>
+
+<p>Il devrait en résulter un tableau qui ressemble à :</p>
+
+<table>
+ <tbody>
+  <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>
+   <td>je suis votre quatrième cellule</td>
+  </tr>
+  <tr>
+   <td>Deuxième ligne, première cellule.</td>
+   <td>Cellule 2.</td>
+   <td>Cellule 3.</td>
+   <td>Cellule 4.</td>
+  </tr>
+ </tbody>
+</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>
+</div>
+
+<h2 id="Ajouter_des_en-têtes_avec_&lt;th>"><a id="Adding_headers_with_%3Cth%3E_elements" name="Adding_headers_with_%3Cth%3E_elements"></a>Ajouter des en-têtes avec &lt;th&gt;</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">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
+    &lt;td&gt;Knocky&lt;/td&gt;
+    &lt;td&gt;Flor&lt;/td&gt;
+    &lt;td&gt;Ella&lt;/td&gt;
+    &lt;td&gt;Juan&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Race&lt;/td&gt;
+    &lt;td&gt;Jack Russell&lt;/td&gt;
+    &lt;td&gt;Poodle&lt;/td&gt;
+    &lt;td&gt;Streetdog&lt;/td&gt;
+    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Age&lt;/td&gt;
+    &lt;td&gt;16&lt;/td&gt;
+    &lt;td&gt;9&lt;/td&gt;
+    &lt;td&gt;10&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Propriétaire&lt;/td&gt;
+    &lt;td&gt;Belle-mère&lt;/td&gt;
+    &lt;td&gt;Moi&lt;/td&gt;
+    &lt;td&gt;Moi&lt;/td&gt;
+    &lt;td&gt;Belle-soeur&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Habitudes alimentaires&lt;/td&gt;
+    &lt;td&gt;Mange tous les restes&lt;/td&gt;
+    &lt;td&gt;Grignotte la nourriture&lt;/td&gt;
+    &lt;td&gt;Mange copieusement&lt;/td&gt;
+    &lt;td&gt;Mange jusqu'à ce qu'il éclate&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Maintenant, le rendu du tableau réel :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>Knocky</td>
+   <td>Flor</td>
+   <td>Ella</td>
+   <td>Juan</td>
+  </tr>
+  <tr>
+   <td>Race</td>
+   <td>Jack Russell</td>
+   <td>Poodle</td>
+   <td>Streetdog</td>
+   <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+   <td>Age</td>
+   <td>16</td>
+   <td>9</td>
+   <td>10</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Propriétaire</td>
+   <td>Belle-mère</td>
+   <td>Moi</td>
+   <td>Moi</td>
+   <td>Belle-soeur</td>
+  </tr>
+  <tr>
+   <td>Habitudes alimentaires</td>
+   <td>Mange tous les restes</td>
+   <td>Grignotte la nourriture</td>
+   <td>Mange copieusement</td>
+   <td>Mange jusqu'à ce qu'il éclate</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.</p>
+
+<h3 id="Apprentissage_actif_en-tête_de_tableau">Apprentissage actif : en-tête de tableau</h3>
+
+<p>Améliorons ce tableau.</p>
+
+<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 tableu 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">&lt;th&gt;</a></code></strong> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <code>&lt;td&gt;</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>&lt;td&gt;</code> par des <code>&lt;th&gt;</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>
+</div>
+
+<h3 id="Pourquoi_les_en-têtes_sont-ils_utiles">Pourquoi les en-têtes sont-ils utiles ?</h3>
+
+<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>
+</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>
+
+<h2 id="Étendre_des_cellules_sur_plusieurs_lignes_ou_colonnes">Étendre des cellules sur plusieurs lignes ou colonnes</h2>
+
+<p>Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.</p>
+
+<p>Le code initial ressemble à cela :</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Animaux&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Hippopotame&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Cheval&lt;/th&gt;
+    &lt;td&gt;Jument&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Étalon&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Crocodile&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Poulet&lt;/th&gt;
+    &lt;td&gt;Coq&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Coq&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Mais le résultat ne nous donne pas ce que nous voulions :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Animaux</th>
+  </tr>
+  <tr>
+   <th>Hippopotame</th>
+  </tr>
+  <tr>
+   <th>Cheval</th>
+   <td>Jument</td>
+  </tr>
+  <tr>
+   <td>Étalon</td>
+  </tr>
+  <tr>
+   <th>Crocodile</th>
+  </tr>
+  <tr>
+   <th>Poulet</th>
+   <td>Coq</td>
+  </tr>
+  <tr>
+   <td>Coq</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs <code>colspan</code> et <code>rowspan</code>, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, <code>colspan="2"</code> génère une cellule sur deux colonnes.</p>
+
+<p>Utilisons <code>colspan</code> et <code>rowspan</code> pour améliorer ce tableau.</p>
+
+<ol>
+ <li>Tout d'abord, faites une copie locale de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-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 HTML contient le même exemple d'animaux vu ci-dessus.</li>
+ <li>Ensuite, utilisez <code>colspan</code> pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.</li>
+ <li>Enfin, utilisez <code>rowspan</code> pour mettre « Cheval » and « Poulet » sur deux lignes.</li>
+ <li>Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.</li>
+</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>
+</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">&lt;col&gt;</a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</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>&lt;td&gt;</code> ou <code>&lt;th&gt;</code> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.</p>
+
+<p>Observez l'exemple simple suivant :</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th style="background-color: yellow"&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</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>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>&lt;col&gt;</code>. Les éléments <code>&lt;col&gt;</code> sont utilisés dans un conteneur <code>&lt;colgroup&gt;</code> juste en-dessous de la balise <code>&lt;table&gt;</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"> &lt;table&gt;
+   &lt;colgroup&gt;
+    &lt;col&gt;
+    &lt;col style="background-color: yellow"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <code>&lt;col&gt;</code>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.</p>
+
+<p>Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <code>&lt;col&gt;</code> avec un attribut span, comme ceci :</p>
+
+<pre class="brush: html">&lt;colgroup&gt;
+  &lt;col style="background-color: yellow" span="2"&gt;
+&lt;/colgroup&gt;</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>
+
+<p>Maintenant, il est temps de vous y mettre vous-même.</p>
+
+<p>Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p>
+
+<p>Recréez le tableau en suivant les étapes ci-dessous.</p>
+
+<ol>
+ <li>Tout d'abord, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.</li>
+ <li>Ajoutez un élément <code>&lt;colgroup&gt;</code>  au début du tableau, juste en dessous de la balise <code>&lt;table&gt;</code>,dans lequel vous pouvez ajouter vos éléments <code>&lt;col&gt;</code> (voir les étapes restantes ci-dessous).</li>
+ <li>Les deux premières colonnes doivent rester sans style.</li>
+ <li>Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut <code>style</code> est <code>background-color:#97DB9A;</code></li>
+ <li>Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li>
+ <li>Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut <code>style</code> est <code>background-color: #97DB9A;</code></li>
+ <li>Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut <code>style</code> sont <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
+ <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>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.</p>
+
+<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<p> </p>
+
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases des tableaux en HTML</a></li>
+ <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des tableaux en HTML et accessibilité</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>
+
+<p> </p>
diff --git a/files/fr/apprendre/html/tableaux/index.html b/files/fr/apprendre/html/tableaux/index.html
new file mode 100644
index 0000000000..5dd680eddf
--- /dev/null
+++ b/files/fr/apprendre/html/tableaux/index.html
@@ -0,0 +1,43 @@
+---
+title: Les tableaux en HTML
+slug: Apprendre/HTML/Tableaux
+tags:
+  - Article
+  - CodingScripting
+  - Débutant
+  - Guide
+  - HTML
+  - Landing
+  - Module
+  - Tableaux
+translation_of: Learn/HTML/Tables
+---
+<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>
+
+<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>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Ce module contient les articles suivants :</p>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases à propos des Tableaux en HTML</a></dt>
+ <dd>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, 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>
+ <dt><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des Tableaux HTML et accessibilité</a></dt>
+ <dd>Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.</dd>
+</dl>
+
+<h2 id="Évaluation_des_connaissances">Évaluation des connaissances</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></dt>
+ <dd>Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.</dd>
+</dl>
diff --git a/files/fr/apprendre/html/tableaux/structuring_planet_data/index.html b/files/fr/apprendre/html/tableaux/structuring_planet_data/index.html
new file mode 100644
index 0000000000..7ee33d6adf
--- /dev/null
+++ b/files/fr/apprendre/html/tableaux/structuring_planet_data/index.html
@@ -0,0 +1,72 @@
+---
+title: "Revue\_: structurer les données des planètes"
+slug: Apprendre/HTML/Tableaux/Structuring_planet_data
+translation_of: Learn/HTML/Tables/Structuring_planet_data
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box 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>
+  </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>
+  </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>
+
+<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>&lt;script&gt;</code>/<code>&lt;style&gt;</code> dans la page HTML.</p>
+</div>
+
+<h2 id="Résumé_du_projet">Résumé du projet</h2>
+
+<p>Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.</p>
+
+<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>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>
+
+<ul>
+</ul>
+
+<h2 id="Étapes_à_suivre">Étapes à suivre</h2>
+
+<p>Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier <code>planets-data.txt</code>. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.</p>
+
+<ol>
+ <li>Ouvrez votre copie de <code>blank-template.html</code>, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.</li>
+ <li>Ajoutez la légende fournie à votre tableau.</li>
+ <li>Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.</li>
+ <li>Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.</li>
+ <li>Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.</li>
+ <li>Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.</li>
+ <li>Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).</li>
+</ol>
+
+<h2 id="Conseils_et_astuces">Conseils et astuces</h2>
+
+<ul>
+ <li>La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes.</li>
+ <li>Les en-têtes regrouppant des lignes (<em>exemple : les planètes joviennes</em>) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple :  <em>Saturne</em>) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes.</li>
+ <li>une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre.</li>
+</ul>
+
+<h2 id="Correction">Correction</h2>
+
+<p>Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, ou dans le <a href="irc://irc.mozilla.org/mdn">#mdn</a> canal IRC sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !</p>
+
+<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>
diff --git a/files/fr/apprendre/html/écrire_une_simple_page_html/index.html b/files/fr/apprendre/html/écrire_une_simple_page_html/index.html
new file mode 100644
index 0000000000..fdb955c90e
--- /dev/null
+++ b/files/fr/apprendre/html/écrire_une_simple_page_html/index.html
@@ -0,0 +1,272 @@
+---
+title: Écrire une simple page HTML
+slug: Apprendre/HTML/Écrire_une_simple_page_HTML
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - HTML
+  - Learn
+  - Web Development
+translation_of: Learn/Getting_started_with_the_web
+---
+<div class="summary">
+<p>Dans ceta rticle, vous apprendrez à créer une page web simple grâce à {{Glossary("HTML")}}.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable avoir <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">un éditeur de texte</a> et savoir <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">comment ouvrir un fichier dans un navigateur</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Créer une page web que vous pourrez visualiser dans votre navigateur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La plus simple des pages web est simplement un fichier {{Glossary("HTML")}} valide. Il suffit donc d'un fichier HTML valide, d'un éditeur de texte et d'un navigateur web. Dans cet article, nous verrons comment utiliser {{Glossary("Balise","quelques balises")}} HTML et comment voir la page dans un navigateur.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p>Tout d'abord, assurez-vous d'avoir un navigateur web et un éditeur de texte avec lequel vous êtes à l'aise. Pour cet article, n'importe quel éditeur de texte conviendra (que ce soit Bloc-notes pour Windows, TextEdit pour Mac ou gedit pour GNU/Linux voire un autre). Une seule remarque : assurez-vous de bien créer des fichiers textes simples, sous TextEdit notamment, vous pouvez choisir l'option « Texte simple » dans le menu « Format ».</p>
+
+<h3 id="Première_étape_un_fichier">Première étape : un fichier</h3>
+
+<p>Une page web est, au strict minimum, un fichier HTML. Nous commencerons donc par en créer un. Lancez votre éditeur de texte puis saisissez le texte suivant :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Coucou&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  Cette page est une
+  page toute simple
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Vous pouvez éditer ce fichier comme vous le souhaitez en modifiant par exemple le texte dans les balises <code>title</code> ou <code>body</code>. Lorsque vous enregistrez le fichier, assurez-vous de l'enregister avec l'extension « .html ». Par exemple, le fichier peut être intitulé  « ma_page.html ».</p>
+
+<p>Une fois que vous avez enregistré ce fichier sur votre ordinateur, vous devriez obtenir quelque chose qui ressemble à cette capture (bien entendu, l'allure dépendra de votre système d'exploitation et de votre configuration) :</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11729/Capture%20du%202015-10-12%2009-32-59.png" style="height: 127px; width: 273px;"></p>
+
+<p>Si vous double-cliquez sur le fichier, celui-ci s'ouvrira dans votre navigateur. Pour ouvrir le fichier dans votre éditeur de texte afin de le modifier, vous pouvez cliquez-droit et choisir le logiciel avec lequel ouvrir le fichier (ici l'éditeur de texte) (sinon, vous pouvez glisser-déposer le fichier dans votre éditeur ou encore choisir de l'ouvrir depuis l'éditeur grâce à l'option « Ouvrir » qui se situe généralement dans le menu « Fichier »). Selon l'éditeur que vous utilisez, vous devriez avoir quelque chose qui ressemble à :</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11731/Capture%20du%202015-10-12%2009-37-47.png" style="height: 241px; width: 517px;"></p>
+
+<h3 id="Deuxième_étape_un_navigateur_web">Deuxième étape : un navigateur web</h3>
+
+<p>Dans votre explorateur de fichiers (Windows Explorer sur Windows, Finder sur Mac ou Fichiers sur Ubuntu), repérez le fichier que vous avez créé et ouvrez-le dans votre navigateur web (en double-cliquant dessus ou en glissant-déposant le fichier sur l'icône du navigateur). Le navigateur affiche alors le texte du fichier HTML que vous avez créé et l'onglet affiche le titre de la page. Selon le navigateur et la plateforme que vous utilisez, cela devrait ressembler à :</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11733/Capture%20du%202015-10-12%2009-41-27.png" style="border-style: solid; border-width: 1px; height: 111px; width: 462px;"></p>
+
+<p>Vous pouvez voir le contenu de la page et le titre dans l'onglet. Toutefois, on voit qu'il n'y a pas de saut de ligne… intéressant.</p>
+
+<h3 id="Troisième_étape_à_vous_de_jouer_!">Troisième étape : à vous de jouer !</h3>
+
+<p>Essayez de manipuler le fichier HTML dans tous les sens en ajoutant du texte, en retirant des morceaux pour voir ce que ça donne. Certaines modifications n'empêcheront pas la page de s'afficher dans le navigateur, d'autres en revanche casseront la page et causeront des problèmes d'affichage. Vous verrez alors que le navigateur essaie de corriger certains problèmes.</p>
+
+<p>La première chose que vous devriez avoir remarqué est que le texte qui est affiché à l'écran est uniquement le texte qui n'est pas contenu entre des chevrons ouvrants et fermants (« &lt; » et « &gt; »). Tout le texte contenu entre ces chevrons forme des {{Glossary("balises")}} qui représentent la structure (ou le squelette) de la page. Tout le contenu affiché est situé à l'intérieur de ces balises.</p>
+
+<p>Dans notre page d'exemple, on a deux sections : un en-tête contenu dans le bloc {{HTMLElement("head")}} et un « corps » contenu dans le bloc {{HTMLElement("body")}}. Le corps contient le texte qui est affiché sur la page.</p>
+
+<p>Chaque balise possède une signification particulière et doit être utilisée à bon escient. Par exemple, {{HTMLElement("title")}} est utilisé afin d'indiquer le titre d'une page (qui peut être différent du nom utilisé pour le fichier). On remarque aussi que des balises sont imbriquées dans d'autres balises : {{HTMLElement("title")}} est par exemple contenue dans {{HTMLElement("head")}}.</p>
+
+<p>Si vous souhaitez ajouter quelque chose à votre page, une image par exemple, vous devrez ajouter une balise pour l'image :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Coucou&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    Cette page est une
+    page toute simple
+    &lt;img src="licorne.png" alt="Une image de licorne :)" /&gt;
+    avec une licorne
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Pour obtenir ce résultat, il suffit d'éditer le fichier HTML vu précédemment et d'y ajouter la ligne suivante avec {{HTMLelement("img")}} :</p>
+
+<pre class="brush: html">&lt;img src="licorne.png" alt="Une image de licorne :)" /&gt;</pre>
+
+<p>Cet élément peut être placé n'importe où dans l'élément {{HTMLElement("body")}}. N'oubliez pas de sauvegarder la page que vous avez modifiée !</p>
+
+<p>Ensuite, vous devrez ajouter un fichier intitulé "licorne.png" dans le même répertoire que votre fichier HTML. Une fois que c'est fait, rafraîchissez la page dans votre navigateur web (ou réouvrez le fichier dans le navigateur. Vous devriez alors voir la page qui a changé et qui contient une image (n'oubliez pas de sauvegarder votre fichier HTML).</p>
+
+<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez télécharger cette image depuis cette page en cliquant-droit sur l'image et en choisissant l'option « Enregistrer l'image sous » du menu contextuel.</p>
+</div>
+
+<p>Pour que cet exemple fonctionne, vous aurez besoin d'avoir les fichier organisés de cette façon sur votre ordinateur :</p>
+
+<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/11735/Capture%20du%202015-10-12%2009-56-10.png" style="height: 167px; width: 289px;"></p>
+
+<p>La page obtenue devrait alors ressembler à :</p>
+
+<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/11737/Capture%20du%202015-10-12%2009-57-54.png" style="border-style: solid; border-width: 1px; height: 410px; width: 740px;"></p>
+
+<p>Vous avez pu voir que l'élément{{HTMLElement("img")}} avait des <strong>{{Glossary("attribut","attributs")}}</strong> : ceux-ci permettent de fournir des informations supplémentaires afin de construire l'objet à afficher (dans ce cas, un attribut permet de connaître le nom du fichier à utiliser pour l'image et un autre permet de fournir un texte alternatif qui peut être affiché lorsque l'image ne peut être chargée).</p>
+
+<p>Cet exemple illustre comment ajouter une image ) votre page web mais vous pouvez utiliser des techniques semblables pour ajouter des musiques, des vidéos et d'autres éléments, rien qu'en utilisant HTML.</p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Ce_n'est_pas_la_plus_jolie_des_pages_web…">Ce n'est pas la plus jolie des pages web…</h3>
+
+<p>Comme vous avez pu le voir, cette page web n'est pas non plus un canon de beauté. Cela s'explique car HTML gère uniquement le contenu et sa signification (aussi appelée « sémantique »), il ne gère pas la mise en forme (le « <em>design</em> ») de la page.</p>
+
+<p>{{Glossary("CSS")}} permet d'enjoliver le contenu en ajoutant des couleurs, en gérant des polices, la mise en page, etc. HTML serea suffisant pour créer des pages web simples. En revanche, pour créer des pages plus complexes ou plus attractives, il faudra appeler CSS voire {{Glossary("JavaScript")}} à la rescousse. HTML permet de construire le contenu, CSS permet de le mettre en forme et JavaScript permet de le rendre dynamique.</p>
+
+<p>Utilisons CSS pour que le texte de la page soit affiché en bleu :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;Coucou&lt;/title&gt;
+        &lt;style&gt;
+           body {
+             color: blue;
+           }
+        &lt;/style&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;p&gt;Voici du texte bleu&lt;/p&gt;
+        &lt;img alt="Une image de licorne :)" src="licorne.png"/&gt;
+    &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ici, on a ajouté l'élément {{HTMLElement("style")}} à l'élément {{HTMLElement("head")}}. Celui-ci permettra de définir le CSS à appliquer au texte présent dans le corps de la page.</p>
+
+<p>Vous aimeriez que votre texte soit souligné ? Vous pouvez ajouter la règle <code>text-decoration: underline;</code> :</p>
+
+<pre class="brush: css">body {
+  color: blue;
+  text-decoration: underline;
+}</pre>
+
+<p>Si vous souhaitez que votre texte ait une taille donnée, vous pouvez ajouter <code>font-size: 42px;</code> comme ceci :</p>
+
+<pre class="brush: css">body {
+  color: blue;
+  text-decoration: underline;
+  font-size: 42px;
+}</pre>
+
+<p>Au final, le code obtenu ressemblera à :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;Coucou&lt;/title&gt;
+        &lt;style&gt;
+           body {
+             color: blue;
+             text-decoration: underline;
+             font-size: 42px;
+           }
+        &lt;/style&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;p&gt;Voici du texte bleu&lt;/p&gt;
+        &lt;img alt="Une image de licorne :)" src="licorne.png"/&gt;
+    &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Si vous sauvegardez la page dans votre éditeur puis que vous rafraîchissez la page dans le navigateur, vous devriez pouvoir voir quelque chose comme :</p>
+
+<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/11739/Capture%20du%202015-10-12%2010-16-45.png" style="border-style: solid; border-width: 1px; height: 514px; width: 446px;"></p>
+
+<h3 id="Avoir_deux_pages_web">Avoir deux pages web</h3>
+
+<p>Lorsque vous naviguez sur le Web, vous rencontrez souvent des {{Glossary("hyperliens","liens")}}. Ceux-ci permettent de naviguer de page en page. Comme nous l'avons vu avant, HTML s'occupe principalement du contenu d'une page. Or, les liens sont une forme de contenu. Autrement dit : il est possible de créer des liens en utilisant uniquement HTML.</p>
+
+<h4 id="Créer_un_lien_entre_deux_pages_locales">Créer un lien entre deux pages locales</h4>
+
+<p>Dans cet exercice, nous aurons besoin de deux fichiers HTML. Nous ajouterons un lien dans chacune de ces pages afin de pouvoir passer de l'une à l'autre.</p>
+
+<p>Dans le premier fichier, vous pouvez conserver la même structure que précédemment. Le plus important est d'ajouter une nouvelle balise {{HTMLElement("a")}} de cette façon:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Page 1&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;Ici la page 1.
+    &lt;a href="page2.html" title="Vers la page 2"&gt;Que se passe-t-il page 2 ?&lt;/a&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La deuxième page, quant à elle, contient un lien vers la première :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Page 2 :)&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;Ici la page 2.
+    &lt;a href="page1.html" title="Vers la page 1"&gt;Souhaitez-vous revenir vers la page 1 ? Cliquez-ici&lt;/a&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Assurez-vous que les noms de fichiers définis dans les balises {{HTMLElement("a")}} avec les attributs <code>href</code> correspondent bien aux noms des fichiers que vous avez sur votre ordinateur.</p>
+</div>
+
+<p>Dans votre navigateur, vous pouvez alors naviguer entre les deux documents HTML. Ouvrez la première page dans le navigateur puis cliquez sur le lien pour accéder à la deuxième page et <em>vice versa</em>. Vous pouvez également utiliser le bouton « Précédent » de votre navigateur pour revenir à la page que vous consultiez précédemment.</p>
+
+<p>Pour cet exercice, votre gestionnaire de fichiers devrait avoir deux fichiers HTML placés dans le même répertoire :</p>
+
+<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/11741/Capture%20du%202015-10-12%2010-33-15.png" style="height: 211px; width: 288px;"></p>
+
+<p>Dans le navigateur web, la page 1 ressemblera à  :</p>
+
+<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11743/Capture%20du%202015-10-12%2010-34-56.png" style="border-style: solid; border-width: 1px; height: 112px; width: 455px;"></p>
+
+<p>Après avoir cliqué sur le lien, on arrive sur la page 2 :</p>
+
+<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/11747/Capture%20du%202015-10-12%2010-38-17.png" style="border-style: solid; border-width: 1px; height: 152px; width: 559px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> On remarque que le lien sur la page 2 est violet. De cette façon, le navigateur montre que vous avez déjà visité la page 1 (en quelque sorte, le navigateur garde en mémoire les pages et l'affiche de cette façon).</p>
+</div>
+
+<p>Si vous voulez, vous pouvez très bien continuer cet exercice avec plus de deux pages. Vous pouvez également poursuivre la lecture de cet article pour compléter ce que nous avons vu jusqu'à présent.</p>
+
+<h4 id="Ajouter_un_lien_vers_un_autre_site_web">Ajouter un lien vers un autre site web</h4>
+
+<p>Dans cet exercice, nous ajouterons un lien dans le fichier HTML afin que le visiteur du site puisse se rendre facilement sur une autre page web complémentaire. Il est possible d'ajouter un lien vers n'importe quelle page publique sur le Web. Pour cet exemple, nous ajouterons un lien vers Wikipédia :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"/&gt;
+    &lt;title&gt;Ma page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;Il était une fois,...Les licornes sont superbes... La fin.
+    &lt;a href="https://fr.wikipedia.org/wiki/Licorne" title="Page Wikipédia sur les licornes"&gt;Vous voulez en savoir plus sur les licornes ? Wikipédia est à portée de clic.&lt;/a&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Dans le navigateur, cela devrait ressembler à :</p>
+
+<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/11751/Capture%20du%202015-10-12%2010-53-24.png" style="height: 196px; width: 1103px;"></p>
+
+<p>Lorsque vous passez votre souris sur le lient, vous verrez que le texte contenu dans l'attribut {{htmlattrxref("title")}} est affiché dans une <strong>bulle d'informations</strong>. Ce texte peut être utilisé afin de fournir plus d'informations sur le lien pour aider l'utilisateur à déterminer s'il est utile de cliquer sur le lien ou non.</p>
+
+<div class="note">
+<p><strong>Rappel :</strong> À chaque fois que vous modifiez la page, n'oubliez pas de sauvegarder le fichier dans votre éditeur et de rafraîchir la page dans votre navigateur afin de visualiser vos modifications.</p>
+</div>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Balises_HTML">Comment utiliser les balises HTML</a> : Il existe plus d'une centaine de balises HTML et nous n'en avons vu qu'une infime partie. Dans ce nouvel article vous trouverez de nouvelles ressources sur ce qu'il est possible de faire avec HTML.</li>
+ <li><a href="/fr/Apprendre/Concevoir_page_web">L'anatomie d'une page web</a> : HTML doit respecter certaines règles qui permettent d'organiser une page avec beaucoup de contenu. Cet article vous aidera à déchiffrer les pages les plus complexes comme celles qui sont utilisées sur des sites connus !</li>
+ <li><a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">Comprendre le fonctionnement des liens</a> : Ici, nous avons utiliser des liens très simples, dans cet article, vous pourrez comprendre pourquoi les liens sont à l'origine de la Toile (<em>Web</em>).</li>
+ <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_%C3%A0_une_page_web">Utiliser des images</a> et <a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_contenu_audio_vid%C3%A9o_page_web">ajouter des fichiers audio et vidéo</a> permettent qu'une page web ne contienne pas que du texte mais aussi des éléments multimédia grâce à HTML.</li>
+</ul>
diff --git a/files/fr/apprendre/index.html b/files/fr/apprendre/index.html
new file mode 100644
index 0000000000..43c361e157
--- /dev/null
+++ b/files/fr/apprendre/index.html
@@ -0,0 +1,143 @@
+---
+title: Apprendre le développement web
+slug: Apprendre
+tags:
+  - Apprendre
+  - CSS
+  - Débutant
+  - HTML
+  - Index
+  - Introduction
+  - Landing
+  - Web
+translation_of: Learn
+---
+<p>{{LearnSidebar}}</p>
+
+<div class="summary">
+<p>Bienvenue dans<em> </em>l'Espace d'apprentissage du MDN. Cet ensemble d'articles a pour but de fournir aux développeurs Web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.</p>
+</div>
+
+<p>Le but de cette section du MDN n'est pas de vous faire passer de « débutant » à « expert », mais plutôt de vous mettre à l'aise avec les technologies. À partir de là, vous devriez être capable de vous débrouiller par vous-même, en utilisant <a href="/fr/">le reste du contenu du MDN</a> et d'autres ressources.</p>
+
+<p>Si vous êtes un débutant complet, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le web et ses technologies.</p>
+
+<h2 id="Quoi_de_neuf">Quoi de neuf ?</h2>
+
+<p>Le contenu de l'espace d'apprentissage est régulièrement enrichi. Nous avons commencé à conserver <a href="/en-US/docs/Learn/Release_notes">les notes de version de l'espace de formation</a> afin de vous indiquer ce qui a changé - revenez souvent !</p>
+
+<p>Si vous avez des questions concernant des sujets que vous aimeriez voir couverts ou si vous pensez qu'ils en manquent, envoyez-nous un message sur notre <a href="https://discourse.mozilla.org/c/mdn">Forum de discussion</a>.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Vous_voulez_devenir_un_développeur_web_front-end">Vous voulez devenir un développeur web front-end ?</h3>
+
+<p>Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Commencez</a></p>
+</div>
+
+<h2 id="Par_où_commencer">Par où commencer ?</h2>
+
+<ul class="card-grid">
+ <li><span>Complètement débutant :</span>
+
+  <p>Si vous êtes totalement débutant dans le développement Web, nous vous recommandons de commencer par travailler notre module <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web">« Premiers pas sur le Web »</a>, qui est une introduction pratique au développement Web.</p>
+ </li>
+ <li><span>Questions spécifiques :</span>
+  <p>Si vous avez des questions spécifiques à propos du développement Web, notre section <a href="/fr/Apprendre/Common_questions">Questions fréquentes</a> peut contenir quelque chose susceptible de vous aider.</p>
+ </li>
+ <li><span>Au-delà des bases :</span>
+  <p>Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>, puis voyez le module <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction aux CSS</a><a href="/fr/docs/Apprendre/JavaScript">.</a></p>
+ </li>
+ <li><span>Écrire des scripts :</span>
+  <p>Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">JavaScript : premiers pas</a> et <a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps">Premiers pas côté serveur</a>.</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Notre <a href="/fr/docs/Glossaire">Glossaire</a> fournit des définitions de la terminologie employée.</p>
+</div>
+
+<p>{{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}}</p>
+
+<h2 id="Rubriques_couvertes">Rubriques couvertes</h2>
+
+<p>Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage du MDN.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web">Débuter avec le développement web</a></dt>
+ <dd>Une introduction pratique au développement web pour les vrais débutants.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/HTML">HTML — structuration du web</a></dt>
+ <dd>Le HTML est le langage utilisé pour structurer les diverses parties d'un contenu et définir leur signification et leur rôle. Cet article vous enseigne le HTML en détail.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS — style du web</a></dt>
+ <dd>CSS est le langage que nous pouvons aussi bien utiliser pour styliser et mettre en forme les contenus web que pour ajouter des comportements tel l'animation. Cet article couvre exhaustivement les CSS.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript">JavaScript — des scripts dynamiques coté client</a></dt>
+ <dd>C'est le langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages web. Cet article enseigne les fondamentaux nécessaires pour comprendre et écrire aisément du JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/a11y">Accessibilité — rendre le web utilisable par tous</a></dt>
+ <dd>L'accessibilité consiste à rendre le contenu web disponible au plus grand nombre de personnes possible quels que soient leur handicap, leur matériel, leur résidence ou autres différences. Cet article fournit tout le savoir nécessaire.  </dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/Outils_et_tests">Outils et tests</a></dt>
+ <dd>Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/Server-side">Programmation de site web coté serveur</a></dt>
+ <dd>Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (node.js).</dd>
+</dl>
+
+<h2 id="Obtenir_nos_exemples_de_code">Obtenir nos exemples de code</h2>
+
+<p>Les exemples de code que vous rencontrerez dans l'Espace d'apprentissage sont tous <a href="https://github.com/mdn/learning-area/">disponibles sur GitHub</a>. Si vous voulez les copier sur votre ordinateur, le plus facile est de :</p>
+
+<ol>
+ <li><a href="https://git-scm.com/downloads">Installer Git</a> sur votre machine. C'est le logiciel sous‑jacent de contrôle de version sur lequel GitHub fonctionne.</li>
+ <li><a href="https://github.com/join">S'inscrire pour obtenir un compte GitHub</a>.</li>
+ <li>Une fois inscrit, se connecter dans <a href="https://github.com">github.com</a> avec votre nom d'utilisateur et votre mot de passe.</li>
+ <li>Ouvrir l'<a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">invite de commande</a> (Windows) ou un terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li>
+ <li>Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante :
+  <pre class="brush: bash line-numbers  language-bash notranslate"><code class="language-bash">git clone https://github.com/mdn/learning-area</code></pre>
+ </li>
+ <li>Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la <a href="https://en.wikipedia.org/wiki/Cd_(command)">commande cd</a>).</li>
+</ol>
+
+<p>Vous pouvez mettre à jour le dépôt de <code>learning-area</code> pour tout changement intervenu sur la version maître de GitHub en parcourant les étapes suivantes :</p>
+
+<ol>
+ <li>Dans votre terminal/invite de commande, allez dans le répertoire <code>learning-area</code> avec <code>cd</code>. Par exemple, si vous êtes dans son répertoire parent :
+
+  <pre class="brush: bash line-numbers  language-bash notranslate"><code class="language-bash">cd learning-area</code></pre>
+ </li>
+ <li>Mettez à jour le dépôt avec la commande :
+  <pre class="brush: bash line-numbers  language-bash notranslate"><code class="language-bash">git pull</code></pre>
+ </li>
+</ol>
+
+<h2 id="Nous_contacter">Nous contacter</h2>
+
+<p>Si vous voulez nous contacter au sujet de quoi que ce soit, le meilleur moyen est de nous envoyer un message sur le <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">fil de discussion de l'Espace d'apprentissage</a> ou sur les <a href="https://developer.mozilla.org/fr/docs/MDN/Community/Conversations#Chat_in_IRC">canaux de l'IRC</a>. Nous aimerions que vous nous fassiez part de tout ce que vous pensez être erroné ou manquant sur le site, des demandes de nouveaux sujets d'apprentissage, des demandes d'aide pour des éléments que vous ne comprenez pas ou toute autre question ou préoccupation.</p>
+
+<p>Si vous êtes intéressé pour aider à développer/améliorer le contenu, jetez un coup d'œil à la <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">façon dont vous pouvez aider</a>, et contactez-nous ! Nous sommes plus qu'heureux de parler avec vous, que vous soyez un apprenti, un enseignant, un développeur web expérimenté ou quelqu'un d'autre intéressé à améliorer l'expérience d'apprentissage.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt>
+ <dd>Notre newsletter pour les développeurs web, une grande aide pour tous niveaux de compétence.</dd>
+ <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
+ <dd>Une excellente ressource pour les futurs développeurs web - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, avec une évaluation automatisée. Les 40 premières leçons sont gratuites, et le cours complet est disponible contre un petit paiement unique.</dd>
+ <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
+ <dd>Une grande série de vidéos expliquant les principes fondamentaux du web, destinée aux débutants absolus en matière de développement web. Créé par <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
+ <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd>Un site interactif pour apprendre les langages de programmation à partir du début.</dd>
+ <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
+ <dd>Théorie de base du codage avec un processus d'apprentissage ludique. Principalement destiné aux débutants.</dd>
+ <dt><a href="https://code.org/">Code.org</a></dt>
+ <dd>Théories de codage de base et pratique, destiné essentiellement aux enfants et aux débutants.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
+ <dd>Cours gratuits et ouverts pour l'acquisition de compétences techniques, avec mentorat et apprentissage par projet.</dd>
+ <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
+ <dd>Site interactif avec didacticiels et projets pour apprendre le développement web.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt>
+ <dd>Un framework pour l'initiation à la maîtrise du web et aux compétences du XXIe siècle, qui donne également accès à des activités d'enseignement classées par catégorie.</dd>
+ <dt><a href="https://edabit.com/challenges">Edabit</a></dt>
+ <dd>Des milliers de défis JavaScript interactifs.</dd>
+</dl>
diff --git a/files/fr/apprendre/index/index.html b/files/fr/apprendre/index/index.html
new file mode 100644
index 0000000000..fac23a4c5b
--- /dev/null
+++ b/files/fr/apprendre/index/index.html
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: Apprendre/Index
+tags:
+  - Index
+  - Learn
+  - MDN
+  - Meta
+translation_of: Learn/Index
+---
+<p>{{Index("/fr/docs/Apprendre")}}</p>
diff --git a/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html b/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html
new file mode 100644
index 0000000000..6f53bebcd7
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html
@@ -0,0 +1,241 @@
+---
+title: Construire vos propres fonctions
+slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function
+tags:
+  - Apprentissage
+  - Article
+  - Débutant
+  - Fonctions
+  - Guide
+  - I10n
+  - JavaScript
+  - Paramètres
+  - Scripting
+  - Tutoriel
+translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Savoir-faire de base, une compréhension minimale HTML et CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocs de code réutilisables</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Apprentissage_actif_Construisons_une_fonction">Apprentissage actif : Construisons une fonction</h2>
+
+<p>La fonction que nous allons construire sera nommée <code>displayMessage()</code>. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction <a href="/en-US/docs/Web/API/Window/alert">alert()</a> du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :</p>
+
+<pre class="brush: js">alert('This is a message');</pre>
+
+<p>La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.</p>
+
+<p>La fonction <a href="/en-US/docs/Web/API/Window/alert">alert()</a> est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.</p>
+</div>
+
+<h2 id="La_fonction_de_base">La fonction de base</h2>
+
+<p>Pour commencer, mettons en place une fonction de base.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">conventions de noms de variables</a>. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.</p>
+</div>
+
+<ol>
+ <li>Commencez par faire une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a>. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.</li>
+ <li>Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <code>&lt;script&gt; </code>:
+  <pre class="brush: js">function displayMessage() {
+
+}</pre>
+  Nous commençons avec le mot-clé <code>function</code>, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.</li>
+ <li>Enfin, ajoutez le code suivant à l'intérieur des accolades :
+  <pre class="brush: js">var html = document.querySelector('html');
+
+var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+ </li>
+</ol>
+
+<p>Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.</p>
+
+<p>La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée <code>html</code>, de façon à pouvoir l'utiliser plus tard :</p>
+
+<pre class="brush: js">var html = document.querySelector('html');</pre>
+
+<p>La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée <code>panel</code> (Dans la suite de l'article, nous parlerons simplement du panneau <code>&lt;div&gt;</code>.). Cet élément sera le conteneur extérieur de notre boîte de message.</p>
+
+<p>Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut <code>class</code> à notre panneau qui aura pour valeur <code>msgBox</code>. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe <code>.msgBox</code> dans le but de styliser la boîte de message ainsi que son contenu.</p>
+
+<p>Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable <code>html</code> créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <code>&lt;div&gt;</code> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <code>&lt;html&gt;</code>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.</p>
+
+<pre class="brush: js">var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);</pre>
+
+<p>Les deux sections suivantes font usage des mêmes fonctions <code>createElement()</code> et <code>appendChild()</code> que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau <code>&lt;div&gt;</code>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.</p>
+
+<pre class="brush: js">var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);</pre>
+
+<p>Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.</p>
+
+<p>Le gestionnaire <code>onclick</code> est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  <code>onclick</code> une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <code>&lt;div&gt;</code>.</p>
+
+<pre class="brush: js">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :</p>
+
+<pre class="brush: html">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.</p>
+
+<h2 id="Appeler_la_fonction">Appeler la fonction</h2>
+
+<p>À présent, nous avons notre fonction définie comme il faut dans notre balise <code>&lt;script&gt;</code>, mais il ne se passera rien si on laisse les choses en l'état.</p>
+
+<ol>
+ <li>Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler :
+  <pre class="brush: js">displayMessage();</pre>
+  Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.</li>
+ <li>
+  <p>Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.</p>
+
+  <p>Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.</p>
+
+  <p>Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.</p>
+ </li>
+ <li>Supprimez la ligne précédente que vous avez ajoutée.</li>
+ <li>Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction :
+  <pre class="brush: js">var btn = document.querySelector('button');</pre>
+ </li>
+ <li>Enfin, ajoutez la ligne suivante à la précédente :
+  <pre class="brush: js">btn.onclick = displayMessage;</pre>
+  D'une manière similaire à notre ligne <code>closeBtn.onclick...</code> à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.</li>
+ <li>Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.</li>
+</ol>
+
+<p>Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :</p>
+
+<pre class="brush: js">btn.onclick = displayMessage();</pre>
+
+<p>Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.</p>
+
+<p>Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.</p>
+
+<h2 id="Améliorer_la_fonction_à_laide_de_paramètres">Améliorer la fonction à l'aide de paramètres</h2>
+
+<p>En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.</p>
+
+<ol>
+ <li>Premièrement, mettons à jour la première ligne :
+  <pre class="brush: js">function displayMessage() {</pre>
+  par :
+
+  <pre class="brush: js">function displayMessage(msgText, msgType) {</pre>
+  Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.</li>
+ <li>Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction :
+  <pre class="brush: js">msg.textContent = 'This is a message box';</pre>
+  avec :
+
+  <pre class="brush: js">msg.textContent = msgText;</pre>
+ </li>
+ <li>Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante :
+  <pre class="brush: js">btn.onclick = displayMessage;</pre>
+  par ce bloc :
+
+  <pre class="brush: js">btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};</pre>
+  Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.</li>
+ <li>Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !</li>
+</ol>
+
+<h3 id="Un_paramètre_plus_complexe">Un paramètre plus complexe</h3>
+
+<p>Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre <code>msgType</code>, la fonction affichera une icône et une couleur d'arrière-plan différentes.</p>
+
+<ol>
+ <li>Tout d'abord, téléchargez les icônes nécessaires à cet exercice (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé <code>icons</code> dans le même répertoire que votre fichier HTML.
+
+  <div class="note"><strong>Note </strong>: icônes <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> et <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> trouvés sur iconfinder.com, et créés par <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Merci !</div>
+ </li>
+ <li>Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur <code>.msgBox</code> en changeant :
+  <pre class="brush: css">width: 200px;</pre>
+  par :
+
+  <pre class="brush: css">width: 242px;</pre>
+ </li>
+ <li>Ensuite, ajoutez les lignes à l'intérieur de la règle CSS <code>.msgBox p { ... }</code> :
+  <pre class="brush: css">padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;</pre>
+ </li>
+ <li>Maintenant, nous devons ajouter du code à notre fonction <code>displayMessage()</code> pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "<code>}</code>" de votre fonction :
+  <pre class="brush: js">if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}</pre>
+  Ici, quand <code>msgType</code> a la valeur <code>'warning'</code>, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si <code>msgType</code> a la valeur <code>'chat'</code>, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre <code>msgType</code> n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans <code>else { ... }</code> est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre <code>msgType</code> n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !</li>
+ <li>Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel <code>displayMessage()</code> :
+  <pre class="brush: js">displayMessage('Woo, this is a different message!');</pre>
+  par soit l'un ou l'autre :
+
+  <pre class="brush: js">displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');</pre>
+  Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">version définitive sur GitHub</a> (aussi, vous pouvez tester la <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">démo</a>), ou nous demander de l'aide.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
diff --git a/files/fr/apprendre/javascript/building_blocks/conditionals/index.html b/files/fr/apprendre/javascript/building_blocks/conditionals/index.html
new file mode 100644
index 0000000000..b7fa0fa08c
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/conditionals/index.html
@@ -0,0 +1,630 @@
+---
+title: Prendre des décisions dans le code — conditions
+slug: Apprendre/JavaScript/Building_blocks/conditionals
+tags:
+  - Article
+  - CodingScripting
+  - Conditionnel
+  - Débutant
+  - JavaScript
+  - Switch
+  - conditions
+  - else
+  - if
+  - ternaire
+translation_of: Learn/JavaScript/Building_blocks/conditionals
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p>
+
+<p>Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre comment utiliser les structures conditionnelles en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vous_laurez_à_une_condition_!..">Vous l'aurez à une condition !..</h2>
+
+<p>Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)</p>
+
+<p>Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png"></p>
+
+<h2 id="Instruction_if_..._else">Instruction if ... else</h2>
+
+<p>Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">instruction</a> <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if ... else</a></code>.</p>
+
+<h3 id="Syntaxe_élémentaire_if_..._else">Syntaxe élémentaire if ... else</h3>
+
+<p>La syntaxe élémentaire de <code>if...else</code> ressemble à cela en {{glossary("pseudocode")}}:</p>
+
+<pre>if (condition) {
+  code à exécuter si la condition est true
+} else {
+  sinon exécuter cet autre code à la place
+}</pre>
+
+<p>Ici nous avons:</p>
+
+<ol>
+ <li>Le mot‑clé <code>if</code> suivie de parenthèses.</li>
+ <li>Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">opérateurs de comparaison</a> que nous avons étudié dans le précédent module, et renverra <code>true</code> ou <code>false</code>.</li>
+ <li>Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie <code>true</code>.</li>
+ <li>Le mot‑clé <code>else</code>.</li>
+ <li>Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas <code>true</code>.</li>
+</ol>
+
+<p>Ce code est facile à lire pour une personne — il dit « <strong>si</strong> la <strong>condition</strong> renvoie <code>true</code>, exécuter le code A, <strong>sinon</strong> exécuter le code B ».</p>
+
+<p>Notez qu'il n'est pas nécessaire d'inclure une instruction <code>else</code> et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :</p>
+
+<pre>if (condition) {
+  code à exécuter si la condition est true
+}
+
+exécuter un autre code</pre>
+
+<p>Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera <strong>toujours</strong> exécuté, que la condition ait renvoyé <code>true</code> ou <code>false</code>. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code <em>ou</em> l'autre, et non les deux.</p>
+
+<p>Une dernière remarque, vous verrez quelques fois les instructions <code>if...else</code> écrites sans accolades, de manière abrégée, ainsi :</p>
+
+<pre>if (condition) code à exécuter si la condition est true
+else exécute un autre code à la place</pre>
+
+<p>Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.</p>
+
+<h3 id="Un_exemple_concret">Un exemple concret</h3>
+
+<p>Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :</p>
+
+<pre class="brush: js">let coursesFaites = false;
+
+if (coursesFaites === true) {
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}</pre>
+
+<p>Avec un tel code, la variable <code>coursesFaites</code> renvoie toujours <code>false</code>, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne <code>true</code> à la variable <code>coursesFaites</code> si l'enfant a fait les courses.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez voir une <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">version plus complète de cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">version live</a>.)</p>
+</div>
+
+<h3 id="else_if">else if</h3>
+
+<p>Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?</p>
+
+<p>Il existe un moyen d'enchaîner des choix / résultats supplémentaires à <code>if...else</code> — en utilisant <code>else if</code> entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre <code>if() { ... }</code> et <code>else { ... }</code> — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:</p>
+
+<pre class="brush: html line-numbers  language-html" style="font-size: 16px !important; line-height: 24px !important;"><code class="language-html" style="font-size: 16px !important; line-height: 24px !important;"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"weather</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Select the weather type today: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>weather<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>--Make a choice--<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sunny<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Sunny<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>rainy<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Rainy<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>snowing<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Snowing<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>overcast<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Overcast<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js" style="font-size: 16px !important; line-height: 24px !important;"><code class="language-js" style="font-size: 16px !important; line-height: 24px !important;">const select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+const para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+select<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'change'</span><span class="punctuation token">,</span> setWeather<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">setWeather</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  const choice <span class="operator token">=</span> select<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'sunny'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'rainy'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'snowing'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'overcast'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p>
+
+<ol>
+ <li>Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.</li>
+ <li>Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <code>&lt;select&gt;</code> de sorte que la fonction <code>setWeather()</code> soit exécutée quand sa valeur change.</li>
+ <li>Quand cette fonction est exécutée, nous commençons par assigner à la variable <code>choice</code> la valeur actuellement sélectionnée dans l'élément <code>&lt;select&gt;</code>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de <code>choice</code>. Remarquez comment toutes les conditions sont testées avec des blocs <code>else if() {...}</code>, mis à part le tout premier testé avec un  <code>bloc if() {...}</code>.</li>
+ <li>Le tout dernier choix, à l'intérieur du bloc <code>else {...}</code>, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est <code>true</code>. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Vous trouverez également <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">version live</a> ici.)</p>
+</div>
+
+<h3 id="Une_note_sur_les_opérateurs_de_comparaison">Une note sur les opérateurs de comparaison</h3>
+
+<p>Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Mathématiques de base en JavaScript — nombres et opérateurs</a> article. Nos choix sont :</p>
+
+<ul>
+ <li><code>===</code> et <code>!==</code> — teste si une valeur est identique ou non à une autre.</li>
+ <li><code>&lt;</code> and <code>&gt;</code> —teste si une valeur est inférieure ou non à une autre.</li>
+ <li><code>&lt;=</code> and <code>&gt;=</code> — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.</p>
+</div>
+
+<p>Nous souhaitons mentionner à propos des tests des valeurs booléennes (<code>true</code>/<code>false</code>) un modèle courant que vous rencontrerez souvent. Toute valeur autre que <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> ou une chaîne vide  (<code>''</code>) renvoie <code>true</code> lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est <code>true</code>, ou même si elle existe (c'est-à-dire si elle n'est pas <code>undefined</code>).<br>
+ Par exemple :</p>
+
+<pre class="brush: js">const fromage = 'Comté';
+
+if (fromage) {
+  console.log('Ouaips ! Du fromage pour mettre sur un toast.');
+} else {
+  console.log('Pas de fromage sur le toast pour vous aujourd\'hui.');
+}</pre>
+
+<p>Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :</p>
+
+<pre class="brush: js">let coursesFaites = false;
+
+if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}</pre>
+
+<h3 id="if_..._else_imbriqué"> if ... else imbriqué</h3>
+
+<p>Il est parfaitement correct d'ajouter une déclaration <code>if...else</code> à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :</p>
+
+<pre class="brush: js">if (choice === 'sunny') {
+  if (temperature &lt; 86) {
+    para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
+  } else if (temperature &gt;= 86) {
+    para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
+  }
+}</pre>
+
+<p>Même si tout le code fonctionne ensemble, chaque déclaration <code>if...else</code> fonctionne indépendamment de l'autre.</p>
+
+<h3 id="Opérateurs_logiques_AND_OR_et_NOT">Opérateurs logiques AND, OR et NOT</h3>
+
+<p>Si vous voulez tester plusieurs conditions sans imbriquer des instructions <code>if...else</code> , les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">opérateurs logiques</a> pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :</p>
+
+<ul>
+ <li><code>&amp;&amp;</code> — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à <code>true</code> pour que l'enemble de l'expression retourne <code>true</code>.</li>
+ <li><code>||</code> — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant  <code>true</code> pour que l'ensemble de l'expression renvoie <code>true</code>.</li>
+</ul>
+
+<p>Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :</p>
+
+<pre class="brush: js">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
+  para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
+} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
+  para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
+}</pre>
+
+<p>Ainsi, par exemple, le premier bloc de code ne sera exécuté que si <code>choice === 'sunny'</code> <em>ET</em> <code>temperature &lt; 86</code> renvoient tous deux <code>true</code>.</p>
+
+<p>Voyons un petit exemple avec OR :</p>
+
+<pre class="brush: js">if (camionDeGlaces || etatDeLaMaison === 'on fire') {
+  console.log('Vous devriez sortir de la maison rapidement.');
+} else {
+  console.log('Vous pouvez probablement rester dedans.');
+}</pre>
+
+<p>Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur <code>!</code>,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :</p>
+
+<pre class="brush: js">if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
+  console.log('Vous pouvez probablement rester dedans.');
+} else {
+  console.log('Vous devriez sortir de la maison rapidement.');
+}</pre>
+
+<p>Dans cet extrait, si la déclaration avec OR renvoie <code>true</code>, l'opérateur NOT va nier l'ensemble : l'expression retournera donc <code>false</code>.</p>
+
+<p>Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors <code>true</code> :</p>
+
+<pre class="brush: js">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
+  // exécuter le code
+}</pre>
+
+<p>Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer <code>true</code> séparées par des || (OR) opérateurs. Par exemple :</p>
+
+<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) {
+  // exécuter le code
+}</pre>
+
+<p>Dans ce cas, la condition dans le <code>if(...) </code>sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours <code>true</code>. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :</p>
+
+<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // exécuter le code
+}</pre>
+
+<h2 id="Instruction_switch">Instruction switch</h2>
+
+<p>Les Instructions <code>if...else</code>  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.</p>
+
+<p>Les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch">instructions switch</a> sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :</p>
+
+<pre class="brush: js"><strong>switch (expression) {</strong>
+  <strong>case</strong> choix1<strong>:</strong>
+    exécuter ce code
+    <strong>break;</strong>
+
+  <strong>case</strong> choix2<strong>:</strong>
+    exécuter ce code à la place
+    <strong>break;</strong>
+
+  // incorporez autant de <strong>case</strong> que vous le souhaitez
+
+  <strong>default:</strong>
+    sinon, exécutez juste ce code
+<strong>}</strong></pre>
+
+<p>Ici nous avons</p>
+
+<ol>
+ <li>Le mot‑clé <code>switch</code> suivi de parenthèses.</li>
+ <li>Une expression ou une valeur mise entre les parenthèses.</li>
+ <li>Le mot‑clé <code>case</code> suivi d'une expression ou d'une valeur, et de deux‑points.</li>
+ <li>Le code exécuté si l'expression/valeur de <code>case</code> correspond à celles de <code>switch</code>.</li>
+ <li>Une déclaration <code>break</code>, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction <strong>switch</strong>.</li>
+ <li>Vous pouvez rajouter autant de <strong>cas</strong> que vous le souhaitez. (points 3–5)</li>
+ <li>Le mot‑clé <code>default</code>,  suivi d'une même structure de code qu'aux points 3-5, sauf que <code>default</code> n'a pas de choix après lui et n'a donc pas besoin de l'instruction <code>break</code>  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option <code>default</code> qui sera exécutée si aucun choix ne correspond.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Vous n'avez pas à inclure la section  <code>default</code> — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.</p>
+</div>
+
+<h3 id="Un_exemple_de_switch">Un exemple de switch</h3>
+
+<p>Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction <code>switch</code> à la place :</p>
+
+<pre class="brush: html">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  let choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}</p>
+
+<div class="note">
+<p><strong>Note</strong><strong> </strong>: Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">cours d'exécution </a>ici aussi.)</p>
+</div>
+
+<h2 id="Opérateur_ternaire">Opérateur ternaire</h2>
+
+<p>Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">opérateur ternaire ou conditionnel</a> est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est <code>true</code> et une autre si elle est <code>false</code> — elle est utile dans certains cas, et occupe moins de place qu'un bloc <code>if...else</code> si votre choix est limité à deux possibilités à choisir via une condition <code>true</code>/<code>false</code>. Voici le pseudo‑code correspondant :</p>
+
+<pre>( condition ) ? exécuter ce code : exécuter celui‑ci à la place</pre>
+
+<p>Regardons cet exemple simple :</p>
+
+<pre class="brush: js">let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';</pre>
+
+<p>Ici, nous avons une variable nommée <code>est_anniversaire</code> — si elle est <code>true</code>, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si <code>est_anniversaire</code> renvoie <code>false</code>, nous disons simplement « Bonjour ».</p>
+
+<h3 id="Exemple_opérateur_ternaire">Exemple opérateur ternaire</h3>
+
+<p>L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.</p>
+
+<pre class="brush: html">&lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+&lt;select id="theme"&gt;
+  &lt;option value="white"&gt;White&lt;/option&gt;
+  &lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;h1&gt;This is my website&lt;/h1&gt;</pre>
+
+<pre class="brush: js">const select = document.querySelector('select');
+const html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction <code>update()</code>, qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.</p>
+
+<p>Nous avons également mis un écouteur d'événement <a href="https://developer.mozilla.org/fr/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — <code>select.value === 'black'</code>. Si le test renvoie <code>true</code>, nous exécutons la fonction <code>update()</code> avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie <code>false</code>, nous exécutons <code>update()</code> avec les paramètres noir et blanc, les couleurs du site seront inversées.</p>
+
+<div class="note">
+<p><strong>Note</strong><strong> </strong>: Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">cours d'exécution </a>ici aussi.)</p>
+</div>
+
+<h2 id="Apprentissage_actif_un_calendrier_simple">Apprentissage actif : un calendrier simple</h2>
+
+<p>Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :</p>
+
+<ul>
+ <li>Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois.</li>
+ <li>Un pilote d'événement <code>onchange</code> pour détecter si la valeur choisie dans le menu <code>&lt;select&gt;</code> a été modifiée.</li>
+ <li>Une fonction <code>createCalendar()</code> qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}.</li>
+</ul>
+
+<p>Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction <code>onchange</code>, juste au dessous du commentaire <code>// AJOUTER LA CONDITION ICI</code>. Elle doit :</p>
+
+<ol>
+ <li>Noter le mois choisi (enregistré dans la variable <code>choice</code>. Ce doit être la valeur de l'élément <code>&lt;select&gt;</code> après un changement, "Janvier" par exemple).</li>
+ <li>Faire en sorte que la variable nommée <code>days</code> soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.</li>
+</ol>
+
+<p>Conseils :</p>
+
+<ul>
+ <li>Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.</li>
+ <li>Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut.</li>
+</ul>
+
+<p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
+  &lt;label for="month"&gt;Choisissez un mois : &lt;/label&gt;
+  &lt;select id="month"&gt;
+    &lt;option value="Janvier"&gt;Janvier&lt;/option&gt;
+    &lt;option value="Février"&gt;Février&lt;/option&gt;
+    &lt;option value="Mars"&gt;Mars&lt;/option&gt;
+    &lt;option value="Avril"&gt;Avril&lt;/option&gt;
+    &lt;option value="Mai"&gt;Mai&lt;/option&gt;
+    &lt;option value="Juin"&gt;Juin&lt;/option&gt;
+    &lt;option value="Juillet"&gt;Juillet&lt;/option&gt;
+    &lt;option value="Août"&gt;Août&lt;/option&gt;
+    &lt;option value="Septembre"&gt;Septembre&lt;/option&gt;
+    &lt;option value="Octobre"&gt;Octobre&lt;/option&gt;
+    &lt;option value="Novembre"&gt;Novembre&lt;/option&gt;
+    &lt;option value="Decembre"&gt;Décembre&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;&lt;/h1&gt;
+
+  &lt;ul&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;hr&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 500px;"&gt;
+var select = document.querySelector('select');
+var list = document.querySelector('ul');
+var h1 = document.querySelector('h1');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // AJOUTER LA CONDITION ICI
+
+  createCalendar(days, choice);
+}
+
+function createCalendar(days, choice) {
+  list.innerHTML = '';
+  h1.textContent = choice;
+  for (var i = 1; i &lt;= days; i++) {
+    const listItem = document.createElement('li');
+    listItem.textContent = i;
+    list.appendChild(listItem);
+  }
+}
+
+createCalendar(31,'Janvier');
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.output * {
+  box-sizing: border-box;
+}
+
+.output ul {
+  padding-left: 0;
+}
+
+.output li {
+  display: block;
+  float: left;
+  width: 25%;
+  border: 2px solid white;
+  padding: 5px;
+  height: 40px;
+  background-color: #4A2DB6;
+  color: white;
+}
+</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n  var choice = select.value;\n  var days = 31;\n  if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n  createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n  list.innerHTML = \'\';\n  h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Activité_plus_de_choix_de_couleurs_!">Activité : plus de choix de couleurs !</h2>
+
+<p>Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive <code>switch</code>  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive <code>switch</code> au dessous du commentaire  <code>// AJOUT D'UNE DIRECTIVE SWITCH</code> :</p>
+
+<ul>
+ <li>Elle doit accepter la variable <code>choice</code> comme expression d'entrée.</li>
+ <li>Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique.</li>
+ <li>Chaque cas exécutera la fonction <code>update()</code> à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets.</li>
+</ul>
+
+<p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;div class="output" style="height: 300px;"&gt;
+  &lt;label for="theme"&gt;Choisissez un thème : &lt;/label&gt;
+  &lt;select id="theme"&gt;
+    &lt;option value="white"&gt;Blanc&lt;/option&gt;
+    &lt;option value="black"&gt;Noir&lt;/option&gt;
+    &lt;option value="purple"&gt;Mauve&lt;/option&gt;
+    &lt;option value="yellow"&gt;Jaune&lt;/option&gt;
+    &lt;option value="psychedelic"&gt;Psychédélique&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;Voici mon site Web&lt;/h1&gt;
+&lt;/div&gt;
+
+&lt;hr&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 450px;"&gt;
+const select = document.querySelector('select');
+const html = document.querySelector('.output');
+
+select.onchange = function() {
+  let choice = select.value;
+
+  // AJOUT D'UNE DIRECTIVE SWITCH
+}
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n  let choice = select.value;\n\n  switch(choice) {\n    case \'black\':\n      update(\'black\',\'white\');\n      break;\n    case \'white\':\n      update(\'white\',\'black\');\n      break;\n    case \'purple\':\n      update(\'purple\',\'white\');\n      break;\n    case \'yellow\':\n      update(\'yellow\',\'darkgray\');\n      break;\n    case \'psychedelic\':\n      update(\'lime\',\'purple\');\n      break;\n  }\n}\n\nfunction update(bgColor, textColor) {\n  html.style.backgroundColor = bgColor;\n  html.style.color = textColor;\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien <a href="https://developer.mozilla.org/fr/Apprendre#Nous_contacter">contactez‑nous</a> pour une aide.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Opérateurs de comparaison</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs#Les_instructions_conditionnelles">Les instructions conditionnelles</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else">Référence if...else</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Référence opérateur conditionnel (ternaire)</a></li>
+</ul>
+
+<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans du code — conditions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — blocs de code réutilisables</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Gallerie d'images</a></li>
+</ul>
diff --git a/files/fr/apprendre/javascript/building_blocks/evènements/index.html b/files/fr/apprendre/javascript/building_blocks/evènements/index.html
new file mode 100644
index 0000000000..10f0118ecf
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/evènements/index.html
@@ -0,0 +1,585 @@
+---
+title: Introduction aux évènements
+slug: Apprendre/JavaScript/Building_blocks/Evènements
+tags:
+  - Article
+  - Codage
+  - Débutant
+  - Evènement
+  - Gestionnaire d'événement
+  - Guide
+  - JavaScript
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary"><span id="result_box" lang="fr"><span>Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez.</span> <span>Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information.</span> <span>Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs.</span> <span>Ce ne sera pas une étude exhaustive;</span> mais seulement<span> ce que vous devez savoir à ce stade.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td><span id="result_box" lang="fr"><span>Connaissances de base en informatique, une compréhension de base de HTML et CSS, </span></span><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td><span id="result_box" lang="fr"><span>Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Une_série_d'événements_heureux">Une série d'événements heureux</h2>
+
+<p><span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez </span></span>— <span lang="fr"><span>le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit.</span> <span>Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+
+<p><span id="result_box" lang="fr"><span>Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou</span> <span>toute la fenêtre du navigateur.</span> <span>Il y a beaucoup de types différents </span></span><span lang="fr"><span>d'événements qui peuvent se produire, par exemple :</span></span></p>
+
+<ul>
+ <li><span>L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.</span></li>
+ <li><span lang="fr"><span>L'utilisateur appuie sur une touche du clavier.</span>     </span></li>
+ <li><span lang="fr"><span>L'utilisateur redimensionne ou ferme la fenêtre du navigateur.</span>     </span></li>
+ <li><span lang="fr"><span>Une page web finissant de se charger.</span>     </span></li>
+ <li><span lang="fr"><span>Un formulaire en cours de soumission</span>     </span></li>
+ <li><span lang="fr"><span>Une vidéo en cours de lecture, en pause ou en fin de lecture.</span>     </span></li>
+ <li><span lang="fr"><span>Une erreur qui survient.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Vous vous en rendrez compte (notamment en jetant un coup d'œil à la</span></span> section <span lang="fr"><span>MDN </span></span><a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des événements</a><span lang="fr"><span> ), il y a <strong>beaucoup</strong> d'événements auxquels vous pouvez répondre.</span><br>
+ <br>
+ <span>Chaque événement disponible a un <strong>gestionnaire d'événement</strong>, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera.</span> <span>Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous <strong>enregistrons un gestionnaire d'événements</strong>.</span> <span>Notez que les gestionnaires d'événements sont parfois appelés <strong>écouteurs d'événements</strong> - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble.</span> <span>L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.</span></span></p>
+
+<div class="note">
+<p><strong>Note</strong>: il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur</p>
+</div>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<p>Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:</p>
+
+<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">button { margin: 10px };</pre>
+</div>
+
+<p>Le JavaScript ressemblera à ça :</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p> </p>
+
+<p>Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable <code>btn</code> pointe sur un élément <code>&lt;button&gt;</code> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété <code>onclick</code>   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <code>&lt;body&gt;</code> .<br>
+ <br>
+ Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <code>&lt;button&gt;</code>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.</p>
+
+<p>Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">ce lien.</a></p>
+
+<p> </p>
+
+<h3 id="Ce_ne_sont_pas_que_des_pages_web">Ce ne sont pas que des pages web</h3>
+
+<p><span id="result_box" lang="fr"><span>Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript.</span> <span>En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.</span></span></p>
+
+<p>Par exemple, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> <span id="result_box" lang="fr"><span>est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur.</span></span> Le modèle <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme <code>on()</code> pour enregistrer un écouteur d'événement, et <code>once()</code> pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a> propose un bon exemple d'utilisation.</p>
+
+<p><span id="result_box" lang="fr"><span>Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs </span></span>—<span lang="fr"><span> comme améliorations de la fonctionnalité du navigateur </span></span>—<span lang="fr"><span> à l'aide d'une technologie appelée</span></span> <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions">WebExtensions</a>. <span id="result_box" lang="fr"><span>Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent</span></span> — les écouteurs d'événements sont sensibles à la casse (p.ex.<code>onMessage</code> plutôt que <code>onmessage</code>), et doivent êtres combinés à la fonction <code>addListener</code>. Jetez un oeil à la page <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage page</a> pour voir un exemple.</p>
+
+<p><span id="result_box" lang="fr"><span>Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage;</span> <span>nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.</span></span></p>
+
+<h2 id="De_quelle_manière_utiliser_les_événements_Web">De quelle manière utiliser les événements Web ?</h2>
+
+<p><span id="result_box" lang="fr"><span>Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche.</span> <span>Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.</span></span></p>
+
+<h3 id="Les_propriétés_du_gestionnaire_d'événement">Les propriétés du gestionnaire d'événement</h3>
+
+<p><span id="result_box" lang="fr"><span>Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours.</span> <span>Revenons à l'exemple ci-dessus :</span></span></p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>La propriété <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> <span id="result_box" lang="fr"><span>est la propriété du gestionnaire d'événement utilisée dans cette situation.</span> <span>C'est essentiellement une propriété comme les autres disponibles sur le bouton</span></span> (p.ex. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), mais d'un type spécial —<span id="result_box" lang="fr"><span> lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez également définir la propriété du gestionnaire d'</span></span>événement<span lang="fr"><span> comme étant égale au nom d'une fonction définie </span></span>(comme nous l'avons vu dans <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a>). Le code suivant fonctionnera tout pareil:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p><span id="result_box" lang="fr"><span>De nombreuses propriétés de gestionnaire d'événement sont disponibles.</span> <span>Faisons une expérience.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Tout d'abord, faites une copie locale de</span></span> <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, <span id="result_box" lang="fr"><span>et ouvrez-le dans votre navigateur.</span> <span>C'est juste une copie de l'exemple simple </span></span><span lang="fr"><span>de couleur aléatoire avec lequel nous avons déjà joué dans cet article.</span> <span>Maintenant, changez</span></span> <code>btn.onclick</code> <span id="result_box" lang="fr"><span>pour lui attribuer, tour à tour,</span></span><span lang="fr"><span> les différentes valeurs qui suivent, et observez le résultat:</span></span></p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — <span id="result_box" lang="fr"><span>La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau).</span> <span>Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.</span></span></li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — La couleur change seulement si l'élément est double-cliqué.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — La couleur change si l'on appuie sur une touche du clavier. <code>keypress</code> se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que <code>keydown</code> et <code>keyup</code> se réfèrent respectivement à l'appui et au relâchement sur la touche. <span id="result_box" lang="fr"><span>Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a>, qui représente la fenêtre entière du navigateur.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — <span id="result_box" lang="fr"><span>La couleur changera respectivement</span></span><span lang="fr"><span> lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire</span></span> <code>onclick</code> peut être enregistré sur presque n'importe quel élément), <span id="result_box" lang="fr"><span>alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser</span></span> <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).</p>
+
+<h3 id="Les_gestionnaires_d'événements_en_ligne_ne_les_utilisez_pas_!">Les gestionnaires d'événements en ligne : ne les utilisez pas !</h3>
+
+<p><span id="result_box" lang="fr"><span>Vous pourriez également voir un motif comme celui-ci dans votre code:</span></span></p>
+
+<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js">function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">le voir s'exécuter</a>).</p>
+</div>
+
+<p><span id="result_box" lang="fr"><span>La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des <strong>attributs HTML du gestionnaire d'événement</strong> (c'est-à-dire <strong>les gestionnaires d'événements en ligne</strong>) comme celui présenté ci-dessus</span></span> —<span lang="fr"><span> la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient.</span> <span>L'exemple ci-dessus appelle une fonction définie dans un</span></span> élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :</p>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p><span id="result_box" lang="fr"><span>Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement;</span> <span>cependant, vous ne devriez pas les utiliser </span></span>—<span lang="fr"><span> ils sont considérés comme une mauvaise pratique.</span> <span>Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.</span><br>
+ <br>
+ <span>Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser </span></span>— <span lang="fr"><span>garder votre JavaScript au même endroit est préférable;</span> <span>s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée.</span> <span>Un bouton ça va, mais que faire si vous avez 100 boutons ?</span> <span>Vous devez ajouter 100 attributs au fichier;</span> <span>la maintenance se transformerait très vite en un cauchemar.</span> <span>Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :</span></span></p>
+
+<pre class="brush: js">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.</span></span></p>
+</div>
+
+<h3 id="addEventListener()_et_removeEventListener()">addEventListener() et removeEventListener()</h3>
+
+<p>Le dernier type de mécanisme d'événement est défini dans le <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> , qui fournit aux navigateurs une nouvelle fonction: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. <span id="result_box" lang="fr"><span>Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente.</span> <span>Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:</span></span></p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">le voir s'exécuter</a>).</p>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Dans la fonction</span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span> , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse.</span> <span>Notez qu'il est parfaitement approprié de placer tout le code dans la fonction </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span>, dans une fonction anonyme, comme ceci:</span></span></p>
+
+<pre class="brush: js">btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p><span id="result_box" lang="fr"><span>Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment.</span> <span>Pour commencer, il existe une fonction réciproque, </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code><span lang="fr"><span>, qui supprime un écouteur ajouté précédemment.</span> <span>Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:</span></span></p>
+
+<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+
+<p><span id="result_box" lang="fr"><span>Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés.</span> <span>De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.</span><br>
+ <br>
+ <span>D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur.</span> <span>Les deux gestionnaires suivants ne seraient pas appliqués:</span></span></p>
+
+<pre class="brush: js">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p><span id="result_box" lang="fr"><span>Comme la deuxième ligne remplacerait la valeur de </span></span><code>onclick</code><span lang="fr"><span> définie par le premier.</span> <span>Cependant, ceci fonctionnerait:</span></span></p>
+
+<pre class="brush: js">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p><span id="result_box" lang="fr"><span>Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.</span><br>
+ <br>
+ <span>En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement.</span> Celles<span>-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de </span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> et <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p>
+
+<h3 id="Quel_mécanisme_devrais-je_utiliser">Quel mécanisme devrais-je utiliser ?</h3>
+
+<p><span id="result_box" lang="fr"><span>Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.</span><br>
+ <br>
+ <span>Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:</span></span><br>
+  </p>
+
+<ul>
+ <li>     <span>Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8).</span> <span>Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.</span></li>
+ <li><span lang="fr">     <span> Les événements</span></span> du <span lang="fr"><span>DOM Niveau 2 </span></span>(<code>addEventListener()</code>, etc.) <span id="result_box" lang="fr"><span>sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9).</span> <span>Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant </span></span><code>removeEventListener()</code><span lang="fr"><span>, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire.</span> <span>Par exemple, vous pouvez appeler </span></span><code>addEventListener('click', function() { ... })</code><span lang="fr"><span> sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument.</span> <span>Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:</span></span></p>
+
+<pre class="brush: js">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span><strong>Note:</strong> Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements </span></span><span lang="fr"><span>différents des nouveaux navigateurs.</span> <span>Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple </span></span><code>jQuery</code><span lang="fr"><span>) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs.</span> <span>Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.</span></span></p>
+</div>
+
+<h2 id="D'autres_concepts_liés_aux_événements">D'autres concepts liés aux événements</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements.</span> <span>Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.</span></span></p>
+
+<h3 id="L'objet_événement">L'objet événement</h3>
+
+<p><span id="result_box" lang="fr"><span>Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que </span></span> <code>event</code>, <code>evt</code>, <span lang="fr"><span>ou simplement </span></span><code>e</code><span lang="fr"><span> .</span> <span>C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires.</span> <span>Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:</span></span></p>
+
+<pre class="brush: js">function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">le voir s'exécuter</a>).</p>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Ici, vous pouvez voir que nous incluons un objet événement, <strong>e</strong>, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur </span></span><code>e.target</code><span lang="fr"><span> - qui est le bouton lui-même.</span> <span>La propriété </span></span><code>target</code><span lang="fr"><span> de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire.</span> <span>Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.</span></span></p>
+
+<div class="note">
+<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements.</span> </span><code>e</code>/<code>evt</code>/<code>event</code><span lang="fr"><span> sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir.</span> <span>C'est toujours bon de s'en tenir à une norme.</span></span></p>
+</div>
+
+<p><code>e.target</code><span id="result_box" lang="fr"><span>est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux.</span> <span>Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus.</span> <span>Il est utile de toujours pouvoir affecter une action à </span></span> <code>e.target</code>, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> pour le code source ; et ici pour le voir <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">s'exécuter</a>), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire <code>onclick</code> <span id="result_box" lang="fr"><span>à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:</span></span></p>
+
+<pre class="brush: js">var divs = document.querySelectorAll('div');
+
+for (var i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p><span id="result_box" lang="fr"><span>Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):</span></span></p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        background-color: red;
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (var i = 1; i &lt;= 16; i++) {
+        var myDiv = document.createElement('div');
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      var divs = document.querySelectorAll('div');
+
+      for (var i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p><span id="result_box" lang="fr"><span>La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement </span></span>(voir la liste complète sur {{domxref("Event")}} ). <span id="result_box" lang="fr"><span>Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner.</span></span> Le <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, par exemple, a un événement <code>dataavailable</code> , <span id="result_box" lang="fr"><span>qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire).</span></span> <span id="result_box" lang="fr"><span>L'objet événement du gestionnaire </span></span><a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a><span lang="fr"><span> correspondant dispose d'une propriété </span></span><code>data</code><span lang="fr"><span> contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.</span></span></p>
+
+<h3 id="Éviter_le_comportement_par_défaut">Éviter le comportement par défaut</h3>
+
+<p><span id="result_box" lang="fr"><span>Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut.</span> <span>L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé.</span> <span>Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou</span> <span>la même page, si une autre n'est pas spécifiée.)</span>.<br>
+ <br>
+ <span>Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs.</span> <span>Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation.</span> <span>Regardons un exemple simple.</span><br>
+ <br>
+ <span>Tout d'abord, un simple </span></span><span lang="fr"><span>formulaire HTML qui vous oblige à entrer votre nom et votre prénom:</span></span></p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement </span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a><span lang="fr"><span> (l'</span></span>événement<span lang="fr"><span> submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides.</span> <span>Si c'est le cas, nous appelons la fonction </span></span> <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code><span lang="fr"><span> sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :</span></span></p>
+
+<pre class="brush: js">var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p><span id="result_box" lang="fr"><span>Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable.</span> <span>Le résultat est le suivant :</span></span></p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: pour le code source, voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (et le voir s'exécuter <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ici</a>.)</p>
+</div>
+
+<h3 id="Le_bouillonnement_et_la_capture">Le bouillonnement et la capture</h3>
+
+<p><span id="result_box" lang="fr"><span>Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas.</span> <span>Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément.</span> <span>Regardons un exemple pour faciliter cela - ouvrez</span></span> l'exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> dans un nouvel onglet (et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source </a>dans un autre). C'est également disponible en live ci-dessous.</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
+        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+      &lt;/video&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      var btn = document.querySelector('button');
+      var videoBox = document.querySelector('div');
+      var video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p><span id="result_box" lang="fr"><span>Ceci est un exemple assez simple qui montre et cache</span></span> une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:</p>
+
+<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</pre>
+
+<p>Quand le {{htmlelement("button")}} <span id="result_box" lang="fr"><span>est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise</span></span> <code>&lt;div&gt;</code> de <code>hidden</code> à <code>showing</code> <span id="result_box" lang="fr"><span>( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement </span></span><span lang="fr"><span>la boîte hors de l'écran et sur l'écran.) :</span></span></p>
+
+<pre class="brush: js">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p><span id="result_box" lang="fr"><span>Nous ajoutons ensuite quelques gestionnaires d'événements </span></span> <code>onclick</code> <span lang="fr"><span>supplémentaires - le premier à </span></span><code>&lt;div&gt;</code><span lang="fr"><span> et le second à </span></span><code>&lt;video&gt;</code><span lang="fr"><span>.</span> <span>L'idée est que lorsque l'on clique sur la zone du </span></span><code>&lt;div&gt;</code><span lang="fr"><span> en dehors de la vidéo, la boîte doit être masquée à nouveau;</span> <span>Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. </span></span></p>
+
+<pre>videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p><span id="result_box" lang="fr"><span>Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que </span></span><code>&lt;div&gt;</code><span lang="fr"><span> est également caché en même temps.</span> <span>C'est parce que la vidéo est dans le </span></span><code>&lt;div&gt;</code><span lang="fr"><span> - elle en fait partie - alors que cliquer sur la vidéo lance les <em>deux</em> gestionnaires d'événements ci-dessus.</span></span></p>
+
+<h4 id="Explication_du_bouillonnement_et_de_la_capture">Explication du bouillonnement et de la capture</h4>
+
+<p>Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), <span id="result_box" lang="fr"><span>les navigateurs modernes utilisent deux phases différentes: la phase de <strong>capture</strong> et la phase de <strong>bouillonnement</strong></span></span><span lang="fr"><span>.</span><br>
+ <br>
+ <span>Dans la phase de capture:</span></span></p>
+
+<ul>
+ <li><span lang="fr"><span>Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément </span></span>({{htmlelement("html")}}) dispose d'un gestionnaire d'événement <code>onclick</code> enregistré pendant la phase de capture et le lance si c'est le cas.</li>
+ <li><span id="result_box" lang="fr"><span>Ensuite, il passe à l'élément suivant à l'intérieur de </span></span><code>&lt;html&gt;</code><span lang="fr"><span> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Dans la phase de bouillonnement, l'opposé exact se produit:</span><br>
+ <br>
+      <span>Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement </span></span><code>onclick</code><span lang="fr"><span> enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.</span><br>
+      <span>Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément </span></span><code>&lt;html&gt;</code><span lang="fr"><span>.</span></span></p>
+
+<p><a href="https://mdn.mozillademos.org/files/16064/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)</p>
+
+<p><span id="result_box" lang="fr"><span>Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement.</span> <span>Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément </span></span><code>&lt;video&gt;</code><span lang="fr"><span> vers l'élément </span></span><code>&lt;html&gt;</code><span lang="fr"><span>.</span> <span>Comme ceci :</span></span></p>
+
+<ul>
+ <li>Il trouve d'abord le gestionnaire <code>video.onclick...</code> et le lance, de manière à ce que la vidéo soit jouée en premier.</li>
+ <li>Ensuite il trouve le gestionnaire <code>videoBox.onclick...</code> et le lance, de sorte que la vidéo est cachée.</li>
+</ul>
+
+<h4 id="Régler_le_problème_avec_stopPropagation()">Régler le problème avec stopPropagation()</h4>
+
+<p><span id="result_box" lang="fr"><span>C'est un comportement ennuyeux, mais il y a un moyen de l'éviter !</span> <span>L'objet événement standard dispose d'une fonction appelée</span></span> <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, <span id="result_box" lang="fr"><span>qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.</span><br>
+ <br>
+ <span>Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:</span></span></p>
+
+<pre class="brush: js">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p>Vous pouvez faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source show-video-box.html </a> <span id="result_box" lang="fr"><span>et le modifier vous-même ou regarder le résultat ici : </span></span> <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (ou voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">code source</a>).</p>
+
+<div class="note">
+<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Pourquoi s'embêter à capturer et bouillonner ?</span> <span>Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements.</span> <span>Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps.</span> <span>Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec</span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, et en positionnant la troisième propriété, qui est optionnelle, sur<code>true</code>.</p>
+</div>
+
+<h4 id="Délégation_d'événement">Délégation d'événement</h4>
+
+<p><span id="result_box" lang="fr"><span>Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les </span></span>événement<span lang="fr"><span>, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.</span><br>
+ <br>
+ <span>Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement </span></span><code>click</code><span lang="fr"><span> sur la balise parente </span></span><code>&lt;ul&gt;</code><span lang="fr"><span>, et il apparaîtra sur les éléments de la liste.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir</span></span> <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p><span id="result_box" lang="fr"><span>Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage.</span> <span>Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.</span><br>
+ <br>
+ <span>En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur).</span> <span>Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou</span></span> <a href="/en-US/Learn#Contact_us">contactez-nous </a>pour demander de l'aide.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.</li>
+ <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code - les conditions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">les fonctions - des blocs de code réutilisables</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construisez votre propre fonction</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">les valeurs de retour des fonction</a><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">s</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événement</a><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">s</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/apprendre/javascript/building_blocks/fonctions/index.html b/files/fr/apprendre/javascript/building_blocks/fonctions/index.html
new file mode 100644
index 0000000000..43f3e916e1
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/fonctions/index.html
@@ -0,0 +1,397 @@
+---
+title: Fonctions — des blocs de code réutilisables
+slug: Apprendre/JavaScript/Building_blocks/Fonctions
+translation_of: Learn/JavaScript/Building_blocks/Functions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Les <strong>fonctions</strong> sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequis:</th>
+   <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Comprendre les concepts fondamentaux des fonctions JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Où_trouve-ton_des_fonctions">Où trouve-t'on des fonctions ?</h2>
+
+<p>En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.</p>
+
+<p>Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — <code>()</code> — et que vous n'utilisez <strong>pas</strong> une structure usuelle et intégrée du langage telle que les boucles <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a>, <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while </a>ou<a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while"> do...while </a>, ou une déclaration <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else </a>, vous utilisez une fonction.</p>
+
+<h2 id="Les_fonctions_intégrées_du_navigateur">Les fonctions intégrées du navigateur</h2>
+
+<p>Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// La fonction replace () sélectionne une chaîne,
+// remplace une sous-chaîne par une autre, et renvoie
+// la nouvelle chaîne avec les modifications effectuées.</pre>
+
+<p>Ou à chaque fois que nous avons manipulé un tableau :</p>
+
+<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+console.log(madeAString);
+// La fonction join() sélectionne un tableau, rassemble
+// tous les éléments du tableau dans une chaîne,
+// et renvoie cette nouvelle chaîne.</pre>
+
+<p>Ou à chaque fois que nous avons généré un nombre aléatoire :</p>
+
+<pre class="brush: js">var myNumber = Math.random();
+// la fonction random() génère un nombre aléatoire
+// entre 0 et 1, et renvoie
+// ce nombre</pre>
+
+<p>... nous avons utilisé une fonction !</p>
+
+<div class="note">
+<p><strong>Note </strong>: N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.</p>
+</div>
+
+<p>Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand<strong> invoquez</strong> (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.</p>
+
+<p>Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">section antérieure de notre cours</a> pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.</p>
+
+<h2 id="Fonctions_versus_méthodes">Fonctions versus méthodes</h2>
+
+<p>Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des <strong>méthodes</strong>. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.</p>
+
+<p>La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle <strong>propriétés</strong>) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.</p>
+
+<p>Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. </p>
+
+<h2 id="Fonctions_personnalisées">Fonctions personnalisées</h2>
+
+<p>Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html </a>tiré de l'article <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">les boucles dans le code </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">code source </a>complet), nous avons inclus une fonction personnalisée <code>draw()</code>qui ressemblait à ça :</p>
+
+<pre class="brush: js">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction <code>random()</code> trois fois, comme définie par le code suivant :</p>
+
+<pre class="brush: js">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>Nous avions besoin de cette fonction car la fonction intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.</p>
+
+<h2 id="Invoquer_des_fonctions">Invoquer des fonctions</h2>
+
+<p>Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// appelle la fonction une fois</pre>
+
+<h2 id="Fonctions_anonymes">Fonctions anonymes</h2>
+
+<p>Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('hello');
+}</pre>
+
+<p>Mais vous pouvez également créer une fonction qui n'a pas de nom :</p>
+
+<pre class="brush: js">function() {
+  alert('hello');
+}</pre>
+
+<p>Ceci est une <strong>fonction anonyme </strong>— elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :</p>
+
+<pre class="brush: js">var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}</pre>
+
+<p>Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.</p>
+
+<p>Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :</p>
+
+<pre class="brush: js">var myGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>Cette fonction peut désormais être invoquée en utilisant :</p>
+
+<pre class="brush: js">myGreeting();</pre>
+
+<p>Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :</p>
+
+<pre class="brush: js">var anotherGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>Cette fonction peut désormais être invoquée en utilisant au choix :</p>
+
+<pre class="brush: js">myGreeting();
+anotherGreeting();</pre>
+
+<p>Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :</p>
+
+<pre class="brush: js">function myGreeting() {
+  alert('hello');
+}</pre>
+
+<p>Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :</p>
+
+<pre class="brush: js">myButton.onclick = function() {
+  alert('hello');
+  // Je peux mettre ici autant
+  // de code que je le souhaite
+}</pre>
+
+<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2>
+
+<p>Certaines fonctions nécessitent que l'on définisse des <strong>paramètres</strong> lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.</p>
+</div>
+
+<p>Par exemple, la fonction intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : </p>
+
+<pre class="brush: js">var myNumber = Math.random();</pre>
+
+<p>La fonction de chaîne intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.</p>
+</div>
+
+<p>Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> a des paramètres optionnels :</p>
+
+<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// renvoie 'I love chocolate frogs'
+var madeAString = myArray.join();
+// renvoie 'I,love,chocolate,frogs'</pre>
+
+<p><span id="result_box" lang="fr"><span>Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.</span></span></p>
+
+<h2 id="La_portée_des_fonctions_et_les_conflits.">La portée des fonctions et les conflits.</h2>
+
+<p>Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre <strong>portée</strong>, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.</p>
+
+<p>Le plus haut niveau en dehors de toutes vos fonctions est appelé la <strong>portée globale</strong>. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.</p>
+
+<p>Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes <span id="result_box" lang="fr"><span>parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits</span></span>. Cela peut être fait de manière malveillante ou simplement par accident.</p>
+
+<p><span id="result_box" lang="fr"><span>Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :</span></span></p>
+
+<pre class="brush: html">&lt;!-- Excerpt from my HTML --&gt;
+&lt;script src="first.js"&gt;&lt;/script&gt;
+&lt;script src="second.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  greeting();
+&lt;/script&gt;</pre>
+
+<pre class="brush: js">// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}</pre>
+
+<pre class="brush: js">// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}</pre>
+
+<p><span id="result_box" lang="fr"><span>Les deux fonctions que vous voulez appeler s'appellent</span></span> <code>greeting()</code>, <span id="result_box" lang="fr"><span>mais vous ne pouvez accéder qu'à la fonction </span></span><code>greeting()</code> du second fichier <code>second.js</code>  — <span id="result_box" lang="fr"><span>car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du</span></span> premier fichier <code>first.js</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez voir cet exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">s'exécuter sur GitHub</a> (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">code source</a>).</p>
+</div>
+
+<p>En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.</p>
+
+<p>C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.</p>
+
+<h3 id="Apprentissage_actif_Jouer_avec_la_portée">Apprentissage actif : Jouer avec la portée</h3>
+
+<p>Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.</p>
+
+<ol>
+ <li>Tout d'abord, faisons un copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Celui-ci contient deux fonctions appelées <code>a()</code> et <code>b()</code>, et trois variables — <code>x</code>, <code>y</code>, and <code>z</code> — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée <code>output()</code>, qui prend un seul paramètre et le renvoie dans un paragraphe de la page.</li>
+ <li>Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.</li>
+ <li>Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante :
+  <pre class="brush: js">output(x);</pre>
+  Vous devriez voir la valeur de la variable <code>x</code> renvoyée à l'écran.</li>
+ <li>Maintenant essayez d'entrer les commandes suivantes :
+  <pre class="brush: js">output(y);
+output(z);</pre>
+
+  <p>Toutes les deux devraient vous renvoyer un message d'erreur du type : "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Pourquoi ? À cause de la portée de la fonction — <code>y</code> and <code>z</code> sont enfermées dans les fonctions <code>a()</code> et <code>b()</code>, donc <code>output()</code> ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.</p>
+ </li>
+ <li>
+  <p>Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer <code>a()</code> et <code>b()</code> pour qu'elles aient la forme suivante :</p>
+
+  <pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> y <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  <span class="function token">output</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> z <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span>
+  <span class="function token">output</span><span class="punctuation token">(</span>z<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+  Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions <code>a()</code> et <code>b()</code> depuis la console JavaScript :
+
+  <pre class="brush: js">a();
+b();</pre>
+  Vous devriez voir les valeurs <code>y</code> and <code>z</code> renvoyées sur la page. Cela fonctionne très bien car la fonction <code>output()</code> est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction <code>output()</code> est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.</li>
+ <li>Maintenant essayer de mettre à jour le code comme ceci :
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}</pre>
+  Sauvegardez et rechargez à nouveau dans la console JavaScript :</li>
+ <li>
+  <pre class="brush: js">a();
+b();</pre>
+  Les deux fonctions <code>a()</code> et <code>b()</code> appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction <code>output()</code> n'est pas dans la même portée que celle dans laquelle  <code>x</code> est définie, <code>x</code> est une variable globale et donc elle est disponible dans n'importe quelle partie du code.</li>
+ <li>Pour finir, essayez de mettre à jour le code comme ceci :
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}</pre>
+ </li>
+ <li>Sauvegardez et rechargez à nouveau dans la console JavaScript :
+  <pre class="brush: js">a();
+b();</pre>
+  Cette fois l'appel de <code>a()</code> et <code>b()</code> renverra l'erreur "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>"  — parce que l'appel de la fonction <code>output()</code> et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Ces règles de portée ne s'appliquent pas aux boucles (ex. <code>for() { ... }</code>) ni aux instructions conditionnelles (ex. <code>if() { ... }</code>) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Le message d'erreur <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.</p>
+</div>
+
+<ul>
+</ul>
+
+<h3 id="Des_fonctions_à_lintérieur_de_fonctions">Des fonctions à l'intérieur de fonctions</h3>
+
+<div id="gt-input-tool">
+<div class="cc-ctr gt-src-cc-normal" id="gt-src-cc-ctr"><span id="result_box" lang="fr"><span>Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction.</span> <span>Ceci est souvent utilisé comme un moyen de garder le code bien organisé </span></span>—<span lang="fr"><span> si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :</span></span></div>
+</div>
+
+<pre class="brush: js">function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte.</span> <span>L'exemple ci-dessus entraînerait une erreur</span></span> <code>ReferenceError: myValue is not defined</code>, car bien que la valeur <code>myValue</code>  <span id="result_box" lang="fr"><span>est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées.</span> <span>Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :</span></span></p>
+
+<pre class="brush: js">function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}</pre>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p><span id="result_box" lang="fr"><span>Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.</span></span></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> — aborde<span class="short_text" id="result_box" lang="fr"><span> certaines fonctionnalités avancées non incluses ici.</span></span></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeur par défaut des arguments</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions fléchées</a> — références avancées</li>
+</ul>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux évènements</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
+</ul>
diff --git a/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html b/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html
new file mode 100644
index 0000000000..07a51499fd
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html
@@ -0,0 +1,163 @@
+---
+title: Galerie d'images
+slug: Apprendre/JavaScript/Building_blocks/Image_gallery
+tags:
+  - Apprendre
+  - Boucles
+  - Débutant
+  - Evaluation
+  - Gestionnaire d'événement
+  - JavaScript
+  - conditions
+  - 'l10n:priority'
+  - Écriture de code
+  - évènements
+translation_of: Learn/JavaScript/Building_blocks/Image_gallery
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p>Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Conditions préalables:</th>
+   <td>Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour réaliser cette évaluation, vous devez récupérer le fichier<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true"> ZIP</a> et le décompresser quelque par sur votre ordinateur.</p>
+
+<p>Vous pouvez également utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou  <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. <font><font>Si l'éditeur en<span> </span></font><font>ligne que<span> </span></font><font>vous utilisez ne dispose pas de<span> </span></font><font>panneaux JavaScript/CSS séparés, n'hésitez pas<span> </span></font><font>à utiliser les éléments</font><font><span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>&lt;script&gt;</code><font><font>/</font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>&lt;style&gt;</code><font><font> dans la page HTML.</font></font></p>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.</p>
+</div>
+
+<h2 id="Résumé_du_projet">Résumé du projet</h2>
+
+<p><font>Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript;<span> </span></font><font>vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel.<span> </span></font><font>Le corps HTML ressemble à ceci:</font></p>
+
+<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;
+
+&lt;div class="full-img"&gt;
+  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
+  &lt;div class="overlay"&gt;&lt;/div&gt;
+  &lt;button class="dark"&gt;Darken&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="thumb-bar"&gt;
+
+&lt;/div&gt;</pre>
+
+<p>L'exemple ressemble à ceci:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Les parties les plus intéressantes du fichier CSS de l'exemple:</span></p>
+
+<ul>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnez les trois éléments en absolu à l’intérieur du<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>full-img &lt;div&gt;</code><font><font>: le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;img&gt;</code><font><font> dans lequel l’image est affichée grandeur nature, un <span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;div&gt;</code><font><font> vide</font></font> <font><font>dimensionné à la même taille que le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;img&gt;</code><font><font> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>&lt;button&gt;</code><font><font>qui est utilisé pour contrôler l'effet d'assombrissement.</font></font></li>
+ <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Réglez la largeur des images à l'intérieur de<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>thumb-bar &lt;div&gt;</code><font><font>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.</font></font></li>
+</ul>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Votre JavaScript doit:</span></p>
+
+<ul>
+ <li>Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <code>&lt;img&gt;</code> à l'intérieur de <code>thumb-bar &lt;div&gt;</code> qui va incorporer cette image dans la page.</li>
+ <li>Associer un gestionnaire d'événement <code>onclick</code> à chaque <code>&lt;img&gt;</code> à l'intérieur de <code>thumb-bar &lt;div&gt;</code> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément <code>displayed-img &lt;img&gt;</code>.</li>
+ <li>Associer un gestionnaire d'événement <code>onclick</code> au <code>&lt;button&gt;</code> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image <font><font>grandeur nature</font></font>. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.</li>
+</ul>
+
+<p>Pour vous donner une idée, regardez l'<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">exemple</a> (Ne regardez pas le code source!).</p>
+
+<h2 id="Les_différentes_étapes">Les différentes étapes</h2>
+
+<p>Les sections suivantes décrivent ce que vous avez à faire.</p>
+
+<h3 id="Itération_sur_les_images">Itération sur les images</h3>
+
+<p>Nous vous avons fourni des lignes qui storent une référence à <code>thumb-bar &lt;div&gt;</code> dans une variable nommée <code>thumbBar</code>, créent un nouvel élément <code>&lt;img&gt;</code>, définissent son attribut <code>src</code> à un emplacement de valueur <code>xxx</code>, et ajoutent ce nouvel élément <code>&lt;img&gt;</code> dans <code>thumbBar</code>.</p>
+
+<p>Vous avez besoin de:</p>
+
+<ol>
+ <li>Ajouter votre code en-dessous du commentaire <em>Looping through images</em> à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.</li>
+ <li>Remplacez, pour chaque itération,  la valeur <code>xxx</code> de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut <code>src</code> dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
+</ol>
+
+<h3 id="Ajout_dun_gestionnaire_onclick_à_chaque_miniature">Ajout d'un gestionnaire onclick à chaque miniature</h3>
+
+<p>À chaque itération, vous devez ajouter un gestionnaire <code>onclick</code> au <code>newImage</code> courant. Il doit:</p>
+
+<ol>
+ <li>Trouver la valeur de l'attribut <code>src</code> de l'image courante. Cela peut être fait avec la fonction <code><a href="/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> sur <code>&lt;img&gt;</code>, en lui passant le paramètre <code>"src"</code> à chaque fois. Mais comment avoir l'image? Utiliser <code>newImage</code> ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de <code>src</code> sera toujours celle du dernier <code>&lt;img&gt;</code>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <code>&lt;img&gt;</code> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?</li>
+ <li>Exécuter une fonction, en lui passant en paramètre la fameuse valeur de <code>src</code>. Vous pouvez nommer la fonction à votre guise.</li>
+ <li>Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut <code>src</code> de <code>displayed-img &lt;img&gt;</code> à la valeur du <code>src</code> passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<code>&lt;img&gt;</code> concerné dans une variable nommée <code>displayedImg</code>. Notez que nous voulons une fonction nommée.</li>
+</ol>
+
+<h3 id="Écrire_le_gestionnaire_du_bouton_dassombrissement">Écrire le gestionnaire du bouton d'assombrissement</h3>
+
+<p>Il ne reste que notre <code>&lt;button&gt;</code> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <code>&lt;button&gt;</code> dans une variable appelée <code>btn</code>. Vous devez ajouter un gestionnaire <code>onclick</code> qui:</p>
+
+<ol>
+ <li>Vérifie la classe appliquée à <code>&lt;button&gt;</code> — à nouveau, vous pouvez utiliser <code>getAttribute()</code>.</li>
+ <li>Si le nom de classe est <code>"dark"</code>, changer la classe du <code>&lt;button&gt;</code> pour <code>"light"</code> (avec <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <code>&lt;div&gt;</code> par <code>"rgba(0,0,0,0.5)"</code>.</li>
+ <li>Si le nom de classe n'est pas <code>"dark"</code>, changer la classe du <code>&lt;button&gt;</code> pour <code>"dark"</code>, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <code>&lt;div&gt;</code> par <code>"rgba(0,0,0,0)"</code>.</li>
+</ol>
+
+<p>Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.</p>
+
+<pre class="brush: js">btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;</pre>
+
+<h2 id="Conseil">Conseil</h2>
+
+<ul>
+ <li>Vous n'avez pas besoin d'éditer le code HTML ni le code CSS.</li>
+</ul>
+
+<h2 id="Évaluation_ou_aide_supplémentaire">Évaluation ou aide supplémentaire</h2>
+
+<p>Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :</p>
+
+<ol>
+ <li>Mettez votre travail dans un éditeur partageable en ligne tel que <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a>.</li>
+ <li>Rédiger un sujet pour demander une évaluation et/ou une aide à le <a href="https://discourse.mozilla.org/c/mdn">forum Discourse du MDN</a>. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure :
+  <ul>
+   <li>Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".</li>
+   <li>Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.</li>
+   <li>Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.</li>
+   <li>Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">sur le fil de discussion de cet exercice</a>, ou sur <a href="irc://irc.mozilla.org/mdn">#mdn</a> du canal IRC de <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
+</ul>
diff --git a/files/fr/apprendre/javascript/building_blocks/index.html b/files/fr/apprendre/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..7efffb563e
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/index.html
@@ -0,0 +1,55 @@
+---
+title: Principaux blocs en JS
+slug: Apprendre/JavaScript/Building_blocks
+tags:
+  - Auto-évaluation
+  - Boucles
+  - Débutant
+  - Fonctions
+  - Guide
+  - Modules
+  - conditions
+  - évènements
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{JsSidebar}}</div>
+
+<div>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Avant de commencer ce module, vous devriez connaître les bases du <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">HTML </a>et du <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">CSS </a>et avoir suivi le module précédent, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">JavaScript Premiers Pas.</a></p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> .</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/conditionals">Prendre des décisions dans votre code — les conditions</a></dt>
+ <dd>Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles</a></dt>
+ <dd>Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Functions">Les fonctions — réutiliser des blocs de code</a></dt>
+ <dd>Un autre concept essentiel en programmation est celui de <strong>fonctions. </strong>Les<strong> fonctions</strong> permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Créez votre propre fonction</a></dt>
+ <dd>L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Return_values">Les valeurs de retour des fonctions</a></dt>
+ <dd>Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction aux événements</a></dt>
+ <dd>Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.</dd>
+</dl>
+
+<h2 id="Auto-évaluation">Auto-évaluation</h2>
+
+<p>L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galerie de photos</a></dt>
+ <dd>Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.</dd>
+</dl>
+
+<p>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}  </p>
diff --git a/files/fr/apprendre/javascript/building_blocks/looping_code/index.html b/files/fr/apprendre/javascript/building_blocks/looping_code/index.html
new file mode 100644
index 0000000000..820a4d09e2
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/looping_code/index.html
@@ -0,0 +1,873 @@
+---
+title: Les boucles dans le code
+slug: Apprendre/JavaScript/Building_blocks/Looping_code
+tags:
+  - Article
+  - CodingScripting
+  - DO
+  - Débutant
+  - Guide
+  - JavaScript
+  - Learn
+  - Loop
+  - break
+  - continue
+  - for
+  - 'l10n:priority'
+  - while
+translation_of: Learn/JavaScript/Building_blocks/Looping_code
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre comment utiliser les boucles dans JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Laissez-moi_dans_la_boucle">Laissez-moi dans la boucle</h2>
+
+<p>Boucles, boucles, boucles. Alors qu'elles sont associées aux <a href="https://fr.wikipedia.org/wiki/Boucles_d%27or_et_les_Trois_Ours">cheveux d'une célèbre héroïne de fiction</a>, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par <strong>itérer</strong> en langage de programmeur.</p>
+
+<p>Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Une boucle a normalement un ou plusieurs des composants suivants :</p>
+
+<ul>
+ <li> Un <strong>compteur</strong>, qui est initialisé à une certaine valeur - c'est le point de départ de la boucle ("Départ : Je n'ai pas de nourriture / I have no food", ci-dessus).</li>
+ <li>Une <strong>condition de sortie</strong>, qui est le critère grâce auquel la boucle s'arrête - la plupart du temps, il s'agira d'une certaine valeur que le compteur doit atteindre. Elle est illustrée ci-dessus par "Ai-je assez de nourriture ? / Have I got enough food?". Disons qu'il aura besoin de 10 portions de nourriture pour nourir sa famille.</li>
+ <li>Un <strong>itérateur</strong>, qui incrémente généralement le compteur petit-à-petit à chaque boucle successive, jusqu'à ce que ceui-ci remplisse la condition de sortie. Nous n'avons pas explicitement illustré cela ci-dessus, mais nous pouvons penser que le fermier peut récolter 2 portions de nourriture par heure. On peut donc dire que, toutes les heures, la quantité de nourriture collectée est incrémentée de 2, et il regarde s'il a assez de nourriture. S'il a atteint 10 portions (la condition de sortie), il peut arrêter sa récolte et rentrer chez lui, satisfait de sa journée.</li>
+</ul>
+
+<p>En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :</p>
+
+<pre>loop(nourriture = 0; besoinNourriture = 10) {
+  if (nourriture = besoinNourriture) {
+    exit loop;
+    // Nous avons assez de nourriture, on rentre
+  } else {
+    nourriture += 2; // On doit rester 1 heure de plus
+    // La boucle se répète ensuite
+  }
+}</pre>
+
+<p>La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.</p>
+
+<h3 id="À_quoi_ça_sert">À quoi ça sert ?</h3>
+
+<p>Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, <strong>les boucles ne font rien d'autre que répéter la même action encore et encore</strong>, ce qui peut s'avérer utile pour <strong>effectuer rapidement des tâches répétitives</strong>.</p>
+
+<p>Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !</p>
+
+<p>Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html" title="L'élément &lt;canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations."><code>&lt;canvas&gt;</code></a> (appuyez sur le bouton <em>Update</em> pour lancer le programme à nouveau et voir différentes dispositions aléatoires).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Random canvas circles&lt;/title&gt;
+    &lt;style&gt;
+      html {
+        width: 100%;
+        height: inherit;
+        background: #ddd;
+      }
+
+      canvas {
+        display: block;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      button {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;button&gt;Update&lt;/button&gt;
+
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+    &lt;script&gt;
+    const bouton = document.querySelector('button');
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    let WIDTH = document.documentElement.clientWidth;
+    let HEIGHT = document.documentElement.clientHeight;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    function random(number) {
+      return Math.floor(Math.random() * number);
+    }
+
+    function draw() {
+      ctx.clearRect(0, 0, WIDTH, HEIGHT);
+      for (let i = 0; i &lt; 100; i++) {
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)';
+        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    bouton.addEventListener('click',draw);
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 400) }}</p>
+
+<p>Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :</p>
+
+<pre class="brush: js">for (let i = 0; i &lt; 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<p>Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.</p>
+
+<p>Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();</pre>
+
+<p>Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.</p>
+
+<h2 id="La_boucle_standard">La boucle standard</h2>
+
+<p>Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a>. Elle a la syntaxe suivante :</p>
+
+<pre>for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}</pre>
+
+<p>Nous avons ici :</p>
+
+<ol>
+ <li>Le mot-clé <code>for</code>, suivi par des parenthèses.</li>
+ <li>A l'intérieur des parenthèses, on a trois objets :
+  <ol>
+   <li>Une <strong>initialisation</strong> — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer <strong>compteur</strong>.</li>
+   <li>Une <strong>condition de sortie</strong> — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.</li>
+   <li>Une <strong>expression finale</strong> — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.</li>
+  </ol>
+ </li>
+ <li>Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.</li>
+</ol>
+
+<p>Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.</p>
+
+<pre class="brush: js">const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+let info = "Mes chat s'appellent ";
+const paragraphe = document.querySelector('p');
+
+for (let i = 0; i &lt; chats.length; i++) {
+  info += chats[i] + ', ';
+}
+
+paragraphe.textContent = info;</pre>
+
+<p>Cela nous donne la sortie suivante :</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Exemple de boucles&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+    &lt;script&gt;
+    const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+    let info = "Mes chats s'appellent ";
+    const paragraphe = document.querySelector('p');
+
+    for (let i = 0; i &lt; chats.length; i++) {
+      info += chats[i] + ', ';
+    }
+
+    paragraphe.textContent = info;
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver aussi cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">exemple de code sur GitHub</a> (et<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html"> le voir tourner en live</a>).</p>
+</div>
+
+<p>Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :</p>
+
+<ol>
+ <li>L'itérateur, <code>i</code>, commence à <code>0</code> (<code>let i = 0</code>).</li>
+ <li>On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que <code>i &lt; chats.length</code> est vrai, la boucle continuera à s'exécuter.</li>
+ <li>Au sein de la boucle, on concatène les élèments présents dans cette boucle (<code>cats[i]</code> est <code>cats[quelque soit la valeur de i lors de l'iteration]</code>) avec une virgule et un espace, à la fin de la variable <code>info</code>. Donc :
+  <ol>
+   <li>Pendant le premier lancement, <code>i = 0</code>, donc <code>cats[0] + ', '</code> sera concaténé à ("Bill, ")</li>
+   <li>Au second lancement, <code>i = 1</code>, donc <code>cats[1] + ', '</code> et sera concaténé à  ("Jeff, ")</li>
+   <li>Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à <code>i</code> (<code>i++</code>), et alors le processus recommence encore.</li>
+  </ol>
+ </li>
+ <li>Quand <code>i</code> devient égal à <code>cats.length</code>, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Nous avons fait sortir la condition <code>i &lt; cats.length</code>, et pas <code>i &lt;= cats.length</code>, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré <code>i</code> à <code>0</code>, et allons allers jusqu'à <code>i = 4</code> (l'index du dernier item de la table/tableau). <code>cats.length</code> retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à <code>i = 5</code>, cela retournerai <code>undefined</code> pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que <code>cats.length</code> (<code>i &lt;</code>), ce n'est pas la même chose que <code>cats.length</code> (<code>i &lt;=</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i &lt;= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.</p>
+</div>
+
+<p>Un petit problème est que nous avons laissé la phrase de sortie mal formée :</p>
+
+<blockquote>
+<p>Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,</p>
+</blockquote>
+
+<p>Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :</p>
+
+<pre class="brush: js">for (let i = 0; i &lt; cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">GitHub</a> (et aussi le <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">voir en ligne</a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Important</strong>: Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p>
+</div>
+
+<h2 id="Quitter_une_boucle_avec_break">Quitter une boucle avec break</h2>
+
+<p>Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a>. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch">instructions switch </a>: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.</p>
+
+<p>C'est la même chose avec les boucles – un <code>break</code> quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.</p>
+
+<p>Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :</p>
+
+<pre class="brush: html">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+&lt;input id="search" type="text"&gt;
+&lt;button&gt;Search&lt;/button&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<p>Maintenant sur le JavaScript :</p>
+
+<pre class="brush: js">const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+const paragraphe = document.querySelector('p');
+const input = document.querySelector('input');
+const bouton = document.querySelector('button');
+
+bouton.addEventListener('click', function() {
+  let searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (let i = 0; i &lt; contacts.length; i++) {
+    let splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      paragraphe.textContent = 'Contact not found.';
+    }
+  }
+});</pre>
+
+<div class="hidden">
+<h6 id="Hidden_code_3">Hidden code 3</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple contact search example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+  &lt;input id="search" type="text"&gt;
+  &lt;button&gt;Search&lt;/button&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+    &lt;script&gt;
+    const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+    const paragraphe = document.querySelector('p');
+    const input = document.querySelector('input');
+    const bouton = document.querySelector('button');
+
+    bouton.addEventListener('click', function() {
+      let searchName = input.value;
+      input.value = '';
+      input.focus();
+      for (let i = 0; i &lt; contacts.length; i++) {
+        let splitContact = contacts[i].split(':');
+        if (splitContact[0] === searchName) {
+          paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          break;
+        } else {
+          paragraphe.textContent = 'Contact not found.';
+        }
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}</p>
+
+<ol>
+ <li>Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.</li>
+ <li>Ensuite, nous attachons un écouteur d'événement au bouton (<code>bouton</code>), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.</li>
+ <li>Nous stockons la valeur saisie dans l'input dans une variable appelée <code>searchName</code>, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.</li>
+ <li>Maintenant sur la partie intéressante, la boucle for :
+  <ol>
+   <li>Nous commençons le compteur à <code>0</code>, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à <code>contacts.length</code>, et incrémentons <code>i</code> par 1 après chaque itération de la boucle.</li>
+   <li>À l'intérieur de la boucle, nous divisons d'abord le contact actuel (<code>contacts[i]</code>) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé <code>splitContact</code>.</li>
+   <li>Nous utilisons ensuite une instruction conditionnelle pour tester si <code>splitContact[0] </code>(le nom du contact) est égal au <code>searchName</code> entré. Si c'est le cas, nous introduisons une <code>string / chaîne de caractère</code><strong> </strong>dans le paragraphe pour indiquer quel est le numéro du contact et utiliser <code>break</code> pour terminer la boucle.</li>
+  </ol>
+ </li>
+ <li>Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">voir en ligne</a>).</p>
+</div>
+
+<h2 id="Passer_des_itérations_avec_continue">Passer des itérations avec continue</h2>
+
+<p>L'instruction <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a> fonctionne d'une manière similaire à <code>break</code>, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).</p>
+
+<p>Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :</p>
+
+<pre class="brush: js">let num = input.value;
+
+for (let i = 1; i &lt;= num; i++) {
+  let sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  paragraphe.textContent += i + ' ';
+}</pre>
+
+<p>Ici la sortie :</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_4">Hidden code 4</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Integer squares generator&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
+  &lt;input id="number" type="text"&gt;
+  &lt;button&gt;Generate integer squares&lt;/button&gt;
+
+  &lt;p&gt;Output: &lt;/p&gt;
+
+    &lt;script&gt;
+    const paragraphe = document.querySelector('p');
+    const input = document.querySelector('input');
+    const bouton = document.querySelector('button');
+
+    bouton.addEventListener('click', function() {
+      paragraphe.textContent = 'Output: ';
+      let num = input.value;
+      input.value = '';
+      input.focus();
+      for (let i = 1; i &lt;= num; i++) {
+        let sqRoot = Math.sqrt(i);
+        if (Math.floor(sqRoot) !== sqRoot) {
+          continue;
+        }
+
+        paragraphe.textContent += i + ' ';
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}</p>
+
+<ol>
+ <li>Dans ce cas, l'entrée doit être un nombre (<code>num</code>). La boucle <code>for</code> est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée <code>num</code>, et un itérateur ajoutera 1 au compteur à chaque fois.</li>
+ <li>À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i), </a><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt">, </a>puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor">Math.floor() </a>fait au nombre auquel il est passé).</li>
+ <li>Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (<code>! ==</code>), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction <code>continue</code> pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.</li>
+ <li>Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction <code>continue</code> ne soit pas exécutée; à la place, nous concaténons la valeur <code>i </code>actuelle plus un espace sur la fin du contenu du paragraphe.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">voir en ligne</a>).</p>
+</div>
+
+<h2 id="while_et_do_..._while">while et do ... while</h2>
+
+<p><code>for</code> n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.</p>
+
+<p>D'abord, regardons la boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a>. La syntaxe de cette boucle ressemble à ceci:</p>
+
+<pre>initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé <code>while </code>au lieu de <code>for</code>.</p>
+
+<p>Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.</p>
+
+<p>Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:</p>
+
+<pre class="brush: js">let i = 0;
+
+while (i &lt; cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Cela fonctionne toujours comme prévu regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">Voir en ligne</a> le code complet).</p>
+</div>
+
+<p>La boucle<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/do...while"> do...while</a> est très similaire, mais dénote une variation par rapport à la structure de la boucle while :</p>
+
+<pre>initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé <code>do </code>précède directement les accolades contenant le code à exécuter et l'expression finale.</p>
+
+<p>Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé <code>while</code>. Dans une boucle <code>do ... while</code>, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).</p>
+
+<p>Réécrivons notre exemple de listing de chat pour utiliser une boucle <code>do ... while </code>:</p>
+
+<pre class="brush: js">let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i &lt; cats.length);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Encore, cela fonctionne toujours comme prévu — regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">Voir en ligne</a> le code complet).</p>
+</div>
+
+<div class="warning">
+<p><strong>Important</strong>: Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p>
+</div>
+
+<h2 id="Apprentissage_actif_Lancer_le_compte_à_rebours_!">Apprentissage actif : Lancer le compte à rebours !</h2>
+
+<p>Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :</p>
+
+<ul>
+ <li>Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — <code>let i = 10; </code></li>
+ <li>Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie <code>&lt;div&gt;</code> que nous avons selectionnée en utilisant : <code>const output = document.querySelector('.output');</code> En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle :
+  <ul>
+   <li><code>const paragraphe = document.createElement('p');</code> — crée un nouveau paragraphe.</li>
+   <li><code>output.appendChild(para);</code> — ajoute le paragraphe à la sortie <code>&lt;div&gt;</code>.</li>
+   <li><code>paragraphe.textContent =</code> — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.</li>
+  </ul>
+ </li>
+ <li>Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : <code>paragraphe.textContent = )</code>
+  <ul>
+   <li>Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.</li>
+   <li>Si le nombre est 0, écrire "Blast off!" dans le paragraphe.</li>
+   <li>Pour tout autre nombre, écrire simplement le nombre dans le paragraphe.</li>
+  </ul>
+ </li>
+ <li>Noubliez pas d'inclure un itérateur ! Quoi qu'il en soit, dans cet exemple nous comptons à rebours après chaque itération, pas de manière croissante, alors vous ne voudrez pas <code>i++</code> — Comment allez vous créer l'itération décroissante ?</li>
+</ul>
+
+<p>Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p>
+
+<div class="hidden">
+<h6 id="Active_learning">Active learning</h6>
+
+<pre class="brush: html">&lt;h2&gt;Sortie en direct&lt;/h2&gt;
+&lt;div class="output" style="height: 410px;overflow: auto;"&gt;
+
+&lt;/div&gt;
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Appuyer sur Échap pour décibler le code&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 300px;"&gt;
+const output = document.querySelector('.output');
+output.innerHTML = '';
+
+// let i = 10;
+
+// <code>const paragraphe </code>= document.createElement('p');
+// <code>paragraphe</code>.textContent = ;
+// output.appendChild(para);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;<code class="language-js">
+  userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span>
+  solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span></code>
+  updateCode();
+});
+
+solution.addEventListener('click', function() {<code class="language-js">
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code>
+  updateCode();
+});
+<code class="language-js">
+<span class="keyword token">let</span> jsSolution <span class="operator token">=</span> <span class="string token">'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i &gt;= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span>
+</code>
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+<code class="language-js">
+<span class="comment token">// empêcher la pression de la touche de tabulation</span> de cibler
+<span class="comment token">// un </span>autre élément <span class="comment token">et insère une tabulation dans le textarea</span>
+
+textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeydown</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="parameter token">text</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span>
+  <span class="keyword token">let</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span>
+
+  <span class="keyword token">let</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">let</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span>
+  caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Update the saved userCode every time the user updates the text area code</span>
+
+textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeyup</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="comment token">// We only want to save the state when the user code is being shown,</span>
+  <span class="comment token">// not the solution, so that solution is not saved over the user code</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code>
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning', '100%', 780) }}</p>
+
+<h2 id="Apprentissage_actif_remplir_une_liste_d'invités.">Apprentissage actif : remplir une liste d'invités.</h2>
+
+<p>Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.</p>
+
+<p>Plus précisément, nous attendons de vous :</p>
+
+<ul>
+ <li>Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau <code>people</code>. Vous aurez besoin de commencer avec un initialiseur type <code>let i = 0;</code> , mais quelle sera la condition de sortie</li>
+ <li>Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle.
+  <ul>
+   <li>Si tel est le cas, concaténez l'élément à la fin du paragraphe <code>refused</code> du <code>textContent</code>, suivi d'une virgule et d'un espace.</li>
+   <li>Dans le cas contraire, concaténez l'élément à la fin du paragraphe <code>admitted</code>  du <code>textContent</code> suivi d'une virgule et d'un espace.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Nous vous avons déjà fourni les éléments suivants :</p>
+
+<ul>
+ <li><code>let i = 0;</code> — Votre initialiseur.</li>
+ <li><code>refused.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>refused.textContent</code>.</li>
+ <li><code>admitted.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>admitted.textContent</code>.</li>
+</ul>
+
+<p>Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères </a>pour obtenir de l'aide.</p>
+
+<p>Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p>
+
+<div class="hidden">
+<h6 id="Active_learning_2">Active learning 2</h6>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">px</span><span class="punctuation token">;</span><span class="property token">overflow</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>admitted<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Admettre </span></span>: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>refused<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Refuser : <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code>Appuyer sur Échap pour décibler le coder<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="token unit">px</span><span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95</span><span class="token unit">%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
+
+const admitted = document.querySelector('.admitted');
+const refused = document.querySelector('.refused');
+admitted.textContent = 'Admit: ';
+refused.textContent = 'Refuse: '
+</code>
+// let i = 0;
+
+// refused.textContent += ;
+// admitted.textContent += ;
+
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">h2</span> <span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span><span class="token unit">px</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.a11y-label</span></span> <span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span><span class="token unit">rem</span><span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98</span><span class="token unit">%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">body</span> <span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="keyword token">let</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">eval</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
+  userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span>
+  solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span>
+    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">let</span> jsSolution <span class="operator token">=</span> <span class="string token">'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// stop tab key tabbing out of textarea and</span>
+<span class="comment token">// make it write a tab at the caret position instead</span>
+
+textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeydown</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="parameter token">text</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span>
+  <span class="keyword token">let</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span>
+
+  <span class="keyword token">let</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">let</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span>
+  caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Update the saved userCode every time the user updates the text area code</span>
+
+textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeyup</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="comment token">// We only want to save the state when the user code is being shown,</span>
+  <span class="comment token">// not the solution, so that solution is not saved over the user code</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning_2', '100%', 580) }}</p>
+
+<h2 id="Quel_type_de_boucle_utiliser">Quel type de boucle utiliser ?</h2>
+
+<p>Pour des usages basiques les boucles <code>for</code>, <code>while</code>, et <code>do...while</code> sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.</p>
+
+<p>Premièrement <code>for</code>:</p>
+
+<pre>for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}</pre>
+
+<p><code>while</code>:</p>
+
+<pre>initialisation
+while (condition de sortie) {
+  // code à exécuter
+
+  expression finale
+}</pre>
+
+<p>et enfin <code>do...while</code>:</p>
+
+<pre>initialisation
+do {
+  // code à exécuter
+
+  expression finale
+} while (condition de sortie)</pre>
+
+<p>Nous recommandons <code>for</code>, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itérations</a>.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !</p>
+
+<p>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à <a href="https://developer.mozilla.org/fr/Apprendre#Nous_contacter">nous contacter </a>pour demander de l'aide.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itération</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for">L'instruction for</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/do...while">do...while</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a></li>
+ <li>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — quelques bonnes pratiques en matière de boucles</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
diff --git a/files/fr/apprendre/javascript/building_blocks/return_values/index.html b/files/fr/apprendre/javascript/building_blocks/return_values/index.html
new file mode 100644
index 0000000000..72ed199a4c
--- /dev/null
+++ b/files/fr/apprendre/javascript/building_blocks/return_values/index.html
@@ -0,0 +1,182 @@
+---
+title: Valeurs de retour des fonctions
+slug: Apprendre/JavaScript/Building_blocks/Return_values
+tags:
+  - Apprendre
+  - Article
+  - Débutant
+  - Fonctions
+  - Guide
+  - JavaScript
+  - Return
+  - Valeurs de retour
+  - Écriture de code
+translation_of: Learn/JavaScript/Building_blocks/Return_values
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>
+    <p>Base en langage informatique, une compréhension basic de HTML et CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocks de code réutilisable</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Comprendre les valeurs de retour, et comment les utiliser.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est-ce_que_les_valeurs_de_retour">Qu'est-ce que les valeurs de retour?</h2>
+
+<p><strong>Les valeurs de retour </strong>sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> sur la chaîne de caractères <code>myText</code> , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.</p>
+
+<p>Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valeur retournée</a>. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.</p>
+
+<p>Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme <code>void</code> ou <code>undefined</code> dans de tels cas). Par exemple, dans la fonction <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage() </a> construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !</p>
+
+<p>Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.</p>
+
+<h3 id="Utiliser_des_valeurs_de_retour_dans_vos_fonctions">Utiliser des valeurs de retour dans vos fonctions</h3>
+
+<p>Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> . Nous avons vu son utilisation dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Notre fonction <code>draw()</code> dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:</p>
+
+<pre class="brush: js">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>À chaque itération de la boucle, on fait trois fois appel à la fonction <code>random()</code> pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction <code>random()</code> prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:</p>
+
+<pre class="brush: js">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>Cela peut aussi s'écrire ainsi:</p>
+
+<pre class="brush: js">function random(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}</pre>
+
+<p>Mais la première version est plus rapide à écrire, et plus compacte.</p>
+
+<p>La fonction retourne le résultat de <code>Math.floor(Math.random()*number)</code> chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:</p>
+
+<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre>
+
+<p>et que les trois appels <code>random()</code> retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:</p>
+
+<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre>
+
+<p>Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.</p>
+
+<h2 id="Apprentissage_actif_notre_propre_fonction_avec_valeur_de_retour">Apprentissage actif: notre propre fonction avec valeur de retour</h2>
+
+<p>Allons-y, écrivons nos propres fonctions avec des valeurs de retour.</p>
+
+<ol>
+ <li>Pour commencer, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.</li>
+ <li>Ajoutons quelques fonctions dans <code>&lt;script&gt;</code> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes:
+  <pre class="brush: js">function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x &gt; 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}</pre>
+  Les fonctions <code>squared()</code> et <code>cubed()</code> sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction <code>factorial()</code> retourne la <a href="https://en.wikipedia.org/wiki/Factorial">factorielle</a> du nombre donné.</li>
+ <li>Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions:
+  <pre class="brush: js">input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}</pre>
+
+  <p>Ici nous créons un gestionnaire d'événement <code>onchange</code> qui s'exécute chaque fois que l'événement <code>change</code> se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable <code>num</code>.</p>
+
+  <p>Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression <code>isNaN(num)</code> retourne <code>true</code>. Nous utilisons la fonction <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> pour vérifier si la valeur <code>num</code> est un nombre — si c'est le cas, elle retourne <code>false</code>, sinon <code>true</code>.</p>
+
+  <p>Si le test retourne <code>false</code>, la valeur <code>num</code> est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions <code>squared()</code>, <code>cubed()</code> et <code>factorial()</code> pour obtenir les valeurs désirées.</p>
+ </li>
+ <li>Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">Version final sur GitHub</a> (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">Démonstration en direct</a>), ou demandez-nous de l'aide.</p>
+</div>
+
+<p>À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon <code>num</code>?</p>
+
+<p>Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration <code>return</code>. De plus, nous avons:</p>
+
+<ul>
+ <li>Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.</li>
+ <li>Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.</li>
+</ul>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.</p>
+
+<p>Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou <a href="/en-US/Learn#Contact_us">contactez-nous</a> pour obtenir de l'aide.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Fonctions  en profondeur</a> — Un guide détaillé couvrant des information plus avancées sur les fonctions.</li>
+ <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Fonction Callback en JavaScript</a> — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — Des blocs de code réutilisables</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/apprendre/javascript/client-side_web_apis/client-side_storage/index.html
new file mode 100644
index 0000000000..e5226ffa24
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/client-side_storage/index.html
@@ -0,0 +1,881 @@
+---
+title: Stockage côté client
+slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
+tags:
+  - API
+  - Apprendre
+  - Codage
+  - Débutant
+  - Guide
+  - IndexedDB
+  - JavaScript
+  - Storage
+translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
+---
+<p>{{LearnSidebar}}</p>
+
+<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<div></div>
+
+<p class="summary">Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Notions de bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de base des APIs côté client</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Apprendre à utiliser les APIs de stockage côté client pour stocker des données de l'application.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Stockage_côté_client">Stockage côté client ?</h2>
+
+<p>Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites statiques</a> et les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dynamiques</a> — ces derniers stockent des données <a href="/fr/docs/Learn/Server-side">côté serveur</a> en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.</p>
+
+<p>Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :</p>
+
+<ul>
+ <li>Personnaliser les préférences du site (par exemple, afficher des widgets personnalisés selon le choix de l'utilisateur, changer le thème du site ou la taille de la police).</li>
+ <li>Enregistrer les activités sur le site (comme le contenu d'un panier d'achat d'une session précédente, ou encore se souvenir si l'utilisateur s'est déjà connecté).</li>
+ <li>Sauvegarder des données et ressources localement pour pouvoir accéder au site plus rapidement ou même sans connexion réseau.</li>
+ <li>Sauvegarder des documents générés par l'application pour une utilisation hors ligne.</li>
+</ul>
+
+<p>Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.</p>
+
+<div class="note">
+<p><strong>Note </strong>: La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a> pour plus d'informations.</p>
+</div>
+
+<h3 id="À_lancienne_les_cookies">À l'ancienne : les cookies</h3>
+
+<p>Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des <a href="/fr/docs/Web/HTTP/Cookies">cookies</a> pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.</p>
+
+<p>De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de <a href="/fr/docs/Web/HTTP/Cookies#EU_cookie_directive">directive Cookie</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15734/cookies-notice.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les <a href="/fr/docs/Web/HTTP/Cookies#Security">problèmes de sécurité</a> qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.</p>
+
+<p>Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.</p>
+</div>
+
+<h3 id="La_nouvelle_école_Web_Storage_et_IndexedDB">La nouvelle école : Web Storage et IndexedDB</h3>
+
+<p>Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client.</p>
+
+<ul>
+ <li>L'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> fournit une syntaxe très simple pour stocker et récupérer des données de petite taille, basé sur un système de clé/valeur. C'est utile lorsque vous avez besoin de stocker des données simples, comme le nom de l'utilisateur, le fait qu'il soit connecté ou non, la couleur à utiliser pour l'arrière-plan de l'écran, etc.</li>
+ <li>L'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> fournit au navigateur un système de base de données complet pour stocker des données complexes. C'est utile pour des choses allant de simples sauvegardes côté client (texte) au stockage de données complexes tels que des fichiers audio ou vidéo.</li>
+</ul>
+
+<p>Vous en apprendrez plus sur ces APIs ci-dessous.</p>
+
+<h3 id="Le_futur_lAPI_Cache">Le futur : l'API Cache</h3>
+
+<p>Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'<a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a>, mais ce n'est pas obligatoire.</p>
+
+<p>L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.</p>
+
+<h2 id="Stocker_des_données_simples_—_web_storage">Stocker des données simples — web storage</h2>
+
+<p>L'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin.</p>
+
+<h3 id="Syntaxe_basique">Syntaxe basique</h3>
+
+<p>Nous allons vous guider pas à pas :</p>
+
+<ol>
+ <li>
+  <p>Tout d'abord, ouvez notre template vide de <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">web storage sur GitHub</a> dans un nouvel onglet.</p>
+ </li>
+ <li>
+  <p>Ouvrez la console JavaScript de votre navigateur.</p>
+ </li>
+ <li>
+  <p>Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile.</p>
+
+  <p>La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) :</p>
+
+  <pre class="brush: js">localStorage.setItem('name','Chris');</pre>
+ </li>
+ <li>
+  <p>La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript :</p>
+
+  <pre class="brush: js">var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>En tapant la deuxième ligne, vous devriez voir que la variable <code>myName</code> contient la valeur de l'entrée <code>name</code>.</p>
+ </li>
+ <li>
+  <p>La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript :</p>
+
+  <pre class="brush: js">localStorage.removeItem('name');
+var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>La troisième ligne devrait maintenant retourner <code>null</code> — l'entrée <code>name</code> n'existe plus dans le web storage.</p>
+ </li>
+</ol>
+
+<h3 id="Les_données_persistent_!">Les données persistent !</h3>
+
+<p>Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du <code>localStorage</code>). Regardons ça en action :</p>
+
+<ol>
+ <li>
+  <p>Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile.</p>
+ </li>
+ <li>
+  <p>Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir :</p>
+
+  <pre class="brush: js">localStorage.setItem('name','Chris');
+var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>Vous devriez voir que l'entrée <code>name</code> est bien là.</p>
+ </li>
+ <li>
+  <p>Maintenant, fermez le navigateur et ouvrez-le de nouveau.</p>
+ </li>
+ <li>
+  <p>Entrez les lignes suivantes :</p>
+
+  <pre class="brush: js">var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré.</p>
+ </li>
+</ol>
+
+<h3 id="Stockage_séparé_pour_chaque_domaine">Stockage séparé pour chaque domaine</h3>
+
+<p>Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site.</p>
+
+<p>C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre !</p>
+
+<h3 id="Un_exemple_plus_impliqué">Un exemple plus impliqué</h3>
+
+<p>Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage.</p>
+
+<p>Le HTML de l'exemple est disponible à <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.</p>
+
+<ol>
+ <li>
+  <p>D'abord, copiez notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> dans un nouveau répertoire sur votre ordinateur.</p>
+ </li>
+ <li>
+  <p>Ensuite, créez un fichier <code>index.js</code> dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).</p>
+ </li>
+ <li>
+  <p>Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:</p>
+
+  <pre class="brush: js">// créer les constantes nécessaires
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');</pre>
+ </li>
+ <li>
+  <p>Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent :</p>
+
+  <pre class="brush: js">// Empêcher le form d'être soumis
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});</pre>
+ </li>
+ <li>
+  <p>Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec <code>setItem()</code>. Ensuite, on exécute une fonction appelée <code>nameDisplayCheck()</code> qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code :</p>
+
+  <pre class="brush: js">// exécuter la fonction quand le bouton 'Say hello' est cliqué
+submitBtn.addEventListener('click', function() {
+  // stocker le nom entré dans le web storage
+  localStorage.setItem('name', nameInput.value);
+  // exécuter nameDisplayCheck() pour afficher la
+  // page personnalisée et changer le formulaire
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément <code>name</code> du web storage en utilisant <code>removeItem()</code>, puis on exécute <code>nameDisplayCheck()</code> pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code :</p>
+
+  <pre class="brush: js">// exécuter la fonction quand le bouton 'Forget' est cliqué
+forgetBtn.addEventListener('click', function() {
+  // supprimer l'item name du web storage
+  localStorage.removeItem('name');
+ // exécuter nameDisplayCheck() pour afficher la
+ // page personnalisée et changer le formulaire
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>Il est maintenant temps de définir la fonction <code>nameDisplayCheck()</code> elle-même. Ici, on vérifie si l'élément <code>name</code> est stocké dans le web storage en utilisant <code>localStorage.getItem('name')</code> comme condition. S'il existe, la valeur retournée sera évaluée à <code>true</code>; sinon, comme <code>false</code>. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code :</p>
+
+  <pre class="brush: js">// définit la fonction nameDisplayCheck()
+function nameDisplayCheck() {
+  // vérifie si l'élément 'name' est stocké dans le web storage
+  if(localStorage.getItem('name')) {
+    // Si c'est le cas, affiche un accueil personnalisé
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Welcome, ' + name;
+    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
+    // cache la partie 'remember' du formulaire et affiche la partie 'forget'
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // Sinon, affiche un accueil générique
+    h1.textContent = 'Welcome to our website ';
+    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+    // cache la partie 'forget' du formulaire et affiche la partie 'remember'
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}</pre>
+ </li>
+ <li>
+  <p>Dernier point, mais non des moindres, on exécute la fonction <code>nameDisplayCheck()</code> à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code :</p>
+
+  <pre class="brush: js">document.body.onload = nameDisplayCheck;</pre>
+ </li>
+</ol>
+
+<p>Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">version terminée en direct ici</a> (ou le <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/index.js">code JavaScript terminé</a>).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez trouver un exemple un peu plus complexe dans l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API de stockage web</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Dans la ligne <code>&lt;script src="index.js" defer&gt;&lt;/script&gt;</code> de notre version finie, l'attribut <code>defer</code> spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.</p>
+</div>
+
+<h2 id="Stocker_des_données_complexes_—_IndexedDB">Stocker des données complexes — IndexedDB</h2>
+
+<p>L'<a href="/en-US/docs/Web/API/IndexedDB_API">API IndexedDB</a> (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.</p>
+
+<p>Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.</p>
+
+<h3 id="Un_exemple_de_stockage_de_notes">Un exemple de stockage de notes</h3>
+
+<p>Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB.</p>
+
+<p>L'application ressemble à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.</p>
+
+<h3 id="Pour_commencer">Pour commencer</h3>
+
+<ol>
+ <li>Tout d'abord, copiez les fichiers <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code>, et <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> dans un nouveau répertoire sur votre ordinateur.</li>
+ <li>Jetez un coup d'oeil aux fichiers.
+  <ul>
+   <li>Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter.</li>
+   <li>Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe.</li>
+   <li>Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}.</li>
+  </ul>
+ </li>
+ <li>Renommez votre fichier JavaScript en <code>index.js</code>. Vous êtes maintenant prêt pour y ajouter du code.</li>
+</ol>
+
+<h3 id="Configuration_initiale_de_la_base_de_données">Configuration initiale de la base de données</h3>
+
+<p>Voyons maintenant la première chose à faire, mettre en place la base de données.</p>
+
+<ol>
+ <li>
+  <p>À la suite des déclarations de constantes, ajoutez les lignes suivantes :</p>
+
+  <pre class="brush: js">// Objet db pour stocker la BDD ouverte
+let db;</pre>
+
+  <p>Ici, on déclare une variable appelée <code>db</code> — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses.</p>
+ </li>
+ <li>
+  <p>Ensuite, ajoutez ce qui suit au bas de votre code :</p>
+
+  <pre class="brush: js">window.onload = function() {
+
+};</pre>
+
+  <p>On écrira tout notre code dans le gestionnaire d'événement <code>window.onload</code>, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon).</p>
+ </li>
+ <li>
+  <p>À l'intérieur de <code>window.onload</code>, ajoutez ce qui suit :</p>
+
+  <pre class="brush: js">// Ouvrir la BDD; elle sera créée si elle n'existe pas déjà
+// (voir onupgradeneeded)
+let request = window.indexedDB.open('notes', 1);</pre>
+
+  <p>Cette ligne crée une requête <code>request</code> pour ouvrir la version <code>1</code> de la base de données appelée <code>notes</code>. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.</p>
+
+  <p>Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.</p>
+
+  <p>Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle <code>request</code> pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.</p>
+
+  <div class="note">
+  <p><strong>Note </strong>: Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement <code>onupgradeneeded</code>. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.</p>
+  </div>
+ </li>
+ <li>
+  <p>Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de <code>window.onload</code> :</p>
+
+  <pre class="brush: js">// la base de données n'a pas pu être ouverte avec succès
+request.onerror = function() {
+  console.log('Database failed to open');
+};
+
+// la base de données a été ouverte avec succès
+request.onsuccess = function() {
+  console.log('Database opened successfully');
+
+  // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite
+  db = request.result;
+
+  // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD
+  displayData();
+};</pre>
+
+  <p>Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.</p>
+
+  <p>Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable <code>db</code> qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée <code>displayData()</code>, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.</p>
+ </li>
+ <li>
+  <p>Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est  probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :</p>
+
+  <pre class="brush: js">// Spécifie les tables de la BDD si ce n'est pas déjà pas fait
+request.onupgradeneeded = function(e) {
+  // Récupère une référence à la BDD ouverte
+  let db = e.target.result;
+
+  // Crée un objectStore pour stocker nos notes (une table)
+  // Avec un champ qui s'auto-incrémente comme clé
+  let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
+
+  // Définit les champs que l'objectStore contient
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Database setup complete');
+};</pre>
+
+  <p>C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.</p>
+
+  <ol>
+   <li>
+    <p>On récupère une référence à la base de données existante depuis <code>e.target.result</code> (la propriété <code>result</code> de la cible de l'événement, c'est à dire l'objet <code>request</code>). C'est l'équivalent de la ligne <code>db = request.result;</code> du gestionnaire d'événement <code>onsuccess</code>, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement <code>onupgradeneeded</code> est exécuté avant <code>onsuccess</code> — la valeur de <code>db</code> n'est pas encore disponible.</p>
+   </li>
+   <li>
+    <p>Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom <code>notes</code>, et un champs <code>id</code> avec <code>autoIncrement</code> — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ <code>id</code> sans que le développeur n'ait à le définir. Le champ <code>id</code> est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.</p>
+   </li>
+   <li>
+    <p>On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: <code>title</code> (qui contiendra le titre de chaque note), et <code>body</code> (qui contiendra la description de chaque note).</p>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p>Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :</p>
+
+<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{
+  </span><span class="nodeName">title</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Acheter du lait"</span>,
+  <span class="nodeName">body</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Lait de vache et de soja."</span>,
+  <span class="nodeName">id</span><span class="objectEqual">: </span><span class="objectBox objectBox-number">8</span></span></span></span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectRightBrace">
+}</span></span></span></span></span></pre>
+
+<h3 id="Ajouter_des_données_à_la_base_de_données">Ajouter des données à la base de données</h3>
+
+<p>Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page.</p>
+
+<ol>
+ <li>
+  <p>À la suite du gestionnaire d'événement précédent (mais toujours dans <code>window.onload</code>), ajoutez la ligne suivante — elle définit un gestionnaire d'événement <code>onsubmit</code> pour exécuter la fonction <code>addData()</code> quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) :</p>
+
+  <pre class="brush: js">// Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis
+form.onsubmit = addData;</pre>
+ </li>
+ <li>
+  <p>Maintenant, définissons la fonction <code>addData()</code>. Ajoutez ce qui suit après la ligne précédente :</p>
+
+  <pre class="brush: js">// Définit la fonction addData()
+function addData(e) {
+  // empêcher le formulaire d'être soumis vers le serveur
+  e.preventDefault();
+
+  // récupérer les valeurs entrées dans les champs du formulaire
+  // et les stocker dans un objet qui sera inséré en BDD
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // ouvrir une transaction en lecture/écriture
+  let transaction = db.transaction(['notes'], 'readwrite');
+
+  // récupérer l'object store de la base de données qui a été ouvert avec la transaction
+  let objectStore = transaction.objectStore('notes');
+
+  // demander l'ajout de notre nouvel objet à l'object store
+  var request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // attendre la fin de la transaction, quand l'ajout a été effectué
+  transaction.oncomplete = function() {
+    console.log('Transaction completed: database modification finished.');
+
+    // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData()
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transaction not opened due to error');
+  };
+}</pre>
+
+  <p>C'est assez complexe, voyons ça pas à pas :</p>
+
+  <ol>
+   <li>
+    <p>On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur).</p>
+   </li>
+   <li>
+    <p>On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur <code>id</code> — comme nous l'avons précédemment expliqué, il est auto-rempli.</p>
+   </li>
+   <li>
+    <p>On ouvre une transaction en lecture/écritre (<code>readwrite</code>) sur l'object store <code>notes</code> en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple.</p>
+   </li>
+   <li>
+    <p>On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable <code>objectStore</code>.</p>
+   </li>
+   <li>
+    <p>On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.</p>
+   </li>
+   <li>On ajoute des gestionnaires d'événement à <code>request</code> et <code>transaction</code> pour exécuter du code aux points importants de leur cycle de vie :
+    <ul>
+     <li>Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note</li>
+     <li>Quand la transaction est terminé, on réexécute la fonction <code>displayData()</code> — pour mettre à jour l'affichage de notes sur la page.</li>
+    </ul>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Afficher_les_données">Afficher les données</h3>
+
+<p>Nous avons déjà appelé <code>displayData()</code> deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente :</p>
+
+<pre class="brush: js">// Définit la fonction displayData()
+function displayData() {
+  // Vide le contenu de la liste à chaque fois qu'on la met à jour
+  // Si on ne le faisait pas, des duplicats seraient affichés à chaque ajout
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Ouvre l'object store puis récupère un curseur - qui va nous permettre d'itérer
+  // sur les entrées de l'object store
+  let objectStore = db.transaction('notes').objectStore('notes');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Récupère une référence au curseur
+    let cursor = e.target.result;
+
+    // S'il reste des entrées sur lesquelles itérer, on exécute ce code
+    if(cursor) {
+      // Crée un li, h3, et p pour mettre les données de l'entrée puis les ajouter à la liste
+      let listItem = document.createElement('li');
+      let h3 = document.createElement('h3');
+      let para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Récupère les données à partir du curseur et les met dans le h3 et p
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Met l'ID de l'entrée dans un attribut du li, pour savoir à quelle entrée il correspond
+      // Ce sera utile plus tard pour pouvoir supprimer des entrées
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Crée un bouton et le place dans le li
+      let deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Définit un gestionnaire d'événement pour appeler deleteItem() quand le bouton supprimer est cliqué
+      deleteBtn.onclick = deleteItem;
+
+      // Continue l'itération vers la prochaine entrée du curseur
+      cursor.continue();
+    } else {
+      // Si la liste est vide, affiche un message "Aucune note n'existe"
+      if(!list.firstChild) {
+        let listItem = document.createElement('li');
+        listItem.textContent = 'No notes stored.';
+        list.appendChild(listItem);
+      }
+      // Il n'y a plus d'entrées dans le curseur
+      console.log('Notes all displayed');
+    }
+  };
+}</pre>
+
+<p>Encore une fois, pas à pas :</p>
+
+<ol>
+ <li>
+  <p>D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour.</p>
+ </li>
+ <li>
+  <p>Ensuite, on récupère une référence à l'object store <code>notes</code> en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans <code>addData()</code>, mais en chaînant ces deux instructions en une seule ligne.</p>
+ </li>
+ <li>
+  <p>L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement <code>onsuccess</code> à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.</p>
+ </li>
+ <li>
+  <p>On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec <code>cursor = e.target.result</code>.</p>
+ </li>
+ <li>
+  <p>Ensuite, on vérifie si le curseur contient une entrée de l'object store (<code>if(cursor){ ... }</code>) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément <code>&lt;ul&gt;</code>). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction <code>deleteItem()</code> — que nous allons voir dans la section suivante.</p>
+ </li>
+ <li>
+  <p>À la fin du bloc <code>if</code>, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, <code>continue()</code> sera exécuté à nouveau, et ainsi de suite.</p>
+ </li>
+ <li>
+  <p>Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne <code>undefined</code>, et le bloc <code>else</code> sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le <code>&lt;ul&gt;</code> — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.</p>
+ </li>
+</ol>
+
+<h3 id="Supprimer_une_note">Supprimer une note</h3>
+
+<p>Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction <code>deleteItem()</code>, que l'on définit ainsi :</p>
+
+<pre class="brush: js">// Définit la fonction deleteItem()
+function deleteItem(e) {
+  // Récupère l'id de l'entrée que l'on veut supprimer
+  // On doit le convertir en nombre avant d'essayer de récupérer l'entrée correspondante dans IDB
+  // les clés sont sensibles à la casse
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // Ouvre une transaction et supprime la note ayant l'id récupéré ci-dessus
+  let transaction = db.transaction(['notes'], 'readwrite');
+  let objectStore = transaction.objectStore('notes');
+  let request = objectStore.delete(noteId);
+
+  // Indique à l'utilisateur que l'entrée a été supprimée
+  transaction.oncomplete = function() {
+    // supprime l'élément parent du bouton, le li
+    // pour qu'il ne soit plus affiché
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Note ' + noteId + ' deleted.');
+
+    // Si la liste est vide, affiche un message qui l'indique
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No notes stored.';
+      list.appendChild(listItem);
+    }
+  };
+}</pre>
+
+<ul>
+ <li>On récupère l'ID de l'entrée à supprimer avec <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — souvenez-vous qu'on a mis l'ID de l'entrée dans l'attribut <code>data-note-id</code> du <code>&lt;li&gt;</code> au moment de l'afficher. On fait passer l'id à travers l'objet global <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number()</a>, puisqu'on a actuellement une chaîne de caractères et on a besoin d'un nombre pour qu'il soit reconnu par la base de données.</li>
+ <li>On récupère ensuite une référence à l'object store de la même manière que précédemment, et on utilise la méthode {{domxref("IDBObjectStore.delete()")}} pour supprimer l'entrée de la base de données, en lui passant l'ID.</li>
+ <li>Quand la transaction est terminée, on supprime le <code>&lt;li&gt;</code> du DOM, et on vérifie si le <code>&lt;ul&gt;</code> est maintenant vide. Si c'est le cas, on insère un message pour l'indiquer.</li>
+</ul>
+
+<p>Et voilà ! L'exemple devrait maintenant fonctionner.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous rencontrez des difficultés, n'hésitez pas à consulter <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">notre exemple en direct</a> (ou voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">le code source</a>).</p>
+</div>
+
+<h3 id="Stocker_des_données_complexes_avec_IndexedDB">Stocker des données complexes avec IndexedDB</h3>
+
+<p>Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données.</p>
+
+<p>Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB video store</a> (le <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">voir en direct</a>). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante.</p>
+
+<p>Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté.</p>
+
+<ol>
+ <li>
+  <p>Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets :</p>
+
+  <pre class="brush: js">const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];</pre>
+ </li>
+ <li>
+  <p>Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction <code>init()</code>. Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données <code>videos</code>.</p>
+
+  <p>On peut facilement vérifier si une entrée a été trouvée en vérifiant si <code>request.result</code> est évalué à <code>true</code> — si l'entrée n'est pas présente, la valeur retournée est <code>undefined</code>.</p>
+
+  <p>Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction <code>displayVideo()</code> pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction <code>fetchVideoFromNetwork()</code>, qui récupère la vidéo à partir du réseau.</p>
+
+  <pre class="brush: js">function init() {
+  // Boucle sur les vidéos une par une
+  for(let i = 0; i &lt; videos.length; i++) {
+    // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom
+    let objectStore = db.transaction('videos').objectStore('videos');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // Si l'entrée existe dans la BDD (le résultat n'est pas undefined)
+      if(request.result) {
+        // Affiche la vidéo en utilisant displayVideo()
+        console.log('taking videos from IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Récupère la vidéo à partir du réseau
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}</pre>
+ </li>
+ <li>
+  <p>Le bout de code qui suit est extrait de la fonction <code>fetchVideoFromNetwork()</code> — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.</p>
+
+  <p>Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode <code>all()</code> est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.</p>
+
+  <p>À l'intérieur du bloc <code>all()</code>, vous pouvez voir qu'on appelle la fonction <code>displayVideo()</code>, comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction <code>storeVideo()</code> pour stocker ces vidéos dans la base de données.</p>
+
+  <pre class="brush: js">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =&gt;
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =&gt;
+  response.blob()
+);
+
+// Exécuter le bloc de code suivant lorsque les deux promesses sont résolues
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // Afficher la vidéo récupérée à partir du réseau avec displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // La stocker dans IDB avec storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});</pre>
+ </li>
+ <li>
+  <p>Regardons <code>storeVideo()</code> en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de <code>videos</code>, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}.</p>
+
+  <pre class="brush: js">function storeVideo(mp4Blob, webmBlob, name) {
+  // Ouvre une transaction, récupère object store
+  let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
+  // Crée une entrée à ajouter à IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Ajoute l'entrée à IDB avec add()
+  let request = objectStore.add(record);
+
+  ...
+
+};</pre>
+ </li>
+ <li>
+  <p>Enfin, <code>displayVideo()</code> crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément <code>&lt;video&gt;</code>, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut <code>src</code> de l'élément {{htmlelement("source")}}, et ça marche.</p>
+
+  <pre class="brush: js">function displayVideo(mp4Blob, webmBlob, title) {
+  // Crée l'objet URL à partir du blob
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  let video = document.createElement('video');
+  video.controls = true;
+  let source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  let source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}</pre>
+ </li>
+</ol>
+
+<h2 id="Stockage_hors-ligne_de_ressources">Stockage hors-ligne de ressources</h2>
+
+<p>L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p>
+
+<p>C'est là qu'interviennet les <a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a> et l'API étroitement liée, <a href="/fr/docs/Web/API/Cache">Cache</a>.</p>
+
+<h3 id="Service_Worker_Cache">Service Worker / Cache</h3>
+
+<p>Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine.</p>
+
+<p>Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques <a href="/fr/docs/Web/API/Service_Worker_API#Autres_id%C3%A9es_de_cas_d'utilisation">idées de cas d'utilisation</a>), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne.</p>
+
+<p>L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.</p>
+</div>
+
+<h3 id="Un_exemple_service_worker">Un exemple service worker</h3>
+
+<p>Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne!</p>
+
+<p>Voir <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">IndexedDB video store avec service worker en direct</a>, ou <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">voir le code source</a>.</p>
+
+<h3 id="Enregistrer_le_service_worker">Enregistrer le service worker</h3>
+
+<p>La première chose à noter est qu'il  a un peu plus de code placé dans le fichier JavaScript principal (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144">index.js</a>):</p>
+
+<pre class="brush: js">// Enregistre un service worker pour contrôler le site hors-ligne
+if('serviceWorker' in navigator) {
+  navigator.serviceWorker
+           .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+           .then(function() { console.log('Service Worker Registered'); });
+}</pre>
+
+<ul>
+ <li>On effectue d'abord un test de détection de fonctionnalité pour vérifier si l'objet <code>serviceWorker</code> existe dans l'objet {{domxref("Navigator")}}. Si c'est le cas, alors on sait qu'au moins les fonctionnalités de base des service workers sont prises en charge.</li>
+ <li>On utilise la méthode {{domxref("ServiceWorkerContainer.register()")}} afin d'enregistrer le service worker <code>sw.js</code> pour l'origine où il se situe, ainsi il pourra contrôler les pages qui sont dans le même répertoire que lui, ou dans un sous-répertoire.</li>
+ <li>Lorsque la promesse est résolue, c'est que le service worker est enregistré.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Le chemin du fichier <code>sw.js</code> est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.<br>
+ Le service worker est sur <code>https://mdn.github.io/learning-area/.../sw.js</code>. L'origine est <code>https://mdn.github.io</code>. Le chemin donné doit donc être <code>/learning-area/.../sw.js</code>.<br>
+ Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.</p>
+</div>
+
+<h3 id="Installer_le_service_worker">Installer le service worker</h3>
+
+<p>Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement <code>install</code> est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation.</p>
+
+<p>Prenons pour exemple le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> (le service worker) :</p>
+
+<pre class="brush: js">self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});</pre>
+
+<ol>
+ <li>
+  <p>Le gestionnaire d'événément <code>install</code> est enregistré sur <code>self</code>. Le mot-clé <code>self</code> est un moyen de faire référence au service worker de la portée globale à partir de son fichier.</p>
+ </li>
+ <li>
+  <p>À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès.</p>
+ </li>
+ <li>
+  <p>Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du <code>video-store</code>.</p>
+ </li>
+ <li>
+  <p>On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache.</p>
+ </li>
+</ol>
+
+<p>C'est tout pour l'instant, l'installation est terminée.</p>
+
+<h3 id="Répondre_aux_futures_requêtes">Répondre aux futures requêtes</h3>
+
+<p>Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.</p>
+
+<p>C'est ce que fait le second bloc de code dans <code>sw.js</code> :</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>
+  <p>On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement <code>fetch</code> est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire).</p>
+ </li>
+ <li>
+  <p>À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête.</p>
+ </li>
+ <li>
+  <p>Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache).</p>
+ </li>
+ <li>
+  <p>Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec <code>undefined</code>. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant <code>fetch()</code>, et on retourne le résultat.</p>
+ </li>
+</ol>
+
+<p>C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le <a href="https://serviceworke.rs/">service worker cookbook</a>. Et merci à Paul Kinlan pour son article <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Adding a Service Worker and Offline into your Web App</a>, qui a inspiré cet exemple.</p>
+
+<h3 id="Tester_lexemple_hors-ligne">Tester l'exemple hors-ligne</h3>
+
+<p>Pour tester notre <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">exemple de service worker</a>, rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit:</p>
+
+<ul>
+ <li>Débrancher votre réseau ou éteindre votre Wifi.</li>
+ <li>Si vous utilisez Firefox: Sélectionner <em>Fichier &gt; Travailler hors-connexion</em>.</li>
+ <li>Si vous utilisez Chrome: Aller dans les DevTols, puis choisir <em>Application &gt; Service Workers</em>, et cocher la case à cocher <em>Offline</em>.</li>
+</ul>
+
+<p>Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB.</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API">Web storage API</a></li>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB API</a></li>
+ <li><a href="/fr/docs/Web/HTTP/Cookies">Cookies</a></li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">Service worker API</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/apprendre/javascript/client-side_web_apis/drawing_graphics/index.html
new file mode 100644
index 0000000000..ce68c6620b
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/drawing_graphics/index.html
@@ -0,0 +1,922 @@
+---
+title: Dessiner des éléments graphiques
+slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics
+tags:
+  - API
+  - Apprendre
+  - Articles
+  - Canvas
+  - Codage
+  - Débutant
+  - Graphismes
+  - JavaScript
+  - WebGL
+translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">introduction aux objets</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de bases des APIs côté client</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Apprendre les bases pour dessiner sur des éléments <code>&lt;canvas&gt;</code> en utilisant JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Éléments_graphiques_sur_le_Web">Éléments graphiques sur le Web</h2>
+
+<p>Comme nous en avons parlé dans notre module HTML <a href="/fr/Apprendre/HTML/Multimedia_and_embedding">Multimédia et Intégration</a>, le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et <a href="/fr/docs/Web/SVG">SVG</a>.</p>
+
+<p>Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/Apprendre/JavaScript">JavaScript</a> pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java.</p>
+
+<p>La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit.</p>
+
+<p>L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module <a href="/fr/docs/Learn/JavaScript/Objects/la_construction_d_objet_en_pratique">La construction d'objet en pratique</a>:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}</p>
+
+<p>Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu <a href="/fr/Apprendre/WebGL">WebGL</a>, lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p>
+
+<p>Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel <a href="/fr/Apprendre/WebGL">WebGL</a>, qui couvre le code WebGL brut.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.</p>
+</div>
+
+<h2 id="Apprentissage_actif_Débuter_avec_un_&lt;canvas>">Apprentissage actif: Débuter avec un &lt;canvas&gt;</h2>
+
+<p>Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page:</p>
+
+<pre class="brush: html">&lt;canvas width="320" height="240"&gt;&lt;/canvas&gt;</pre>
+
+<p>Cela va créer un canvas sur la page d'une taille de 320 pixels par 240.</p>
+
+<p>À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas.</p>
+
+<pre class="brush: html">&lt;canvas width="320" height="240"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge canvas. Boo hoo!&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+<p>Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix.</p>
+
+<h3 id="Crée_et_dimensionner_notre_canvas">Crée et dimensionner notre canvas</h3>
+
+<p>Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences.</p>
+
+<ol>
+ <li>
+  <p>Premièrement, copiez localement notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/0_canvas_start.html">0_canvas_start.html</a>, et ouvez-le dans votre éditeur de texte.</p>
+ </li>
+ <li>
+  <p>Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante:</p>
+
+  <pre class="brush: html">&lt;canvas class="myCanvas"&gt;
+  &lt;p&gt;Ajouter un contenu alternatif approprié ici.&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+  <p>Nous avons ajouté un attribut <code>class</code> à l'élément <code>&lt;canvas&gt;</code> pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs <code>width</code> et <code>height</code> pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150.</p>
+ </li>
+ <li>
+  <p>Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}:</p>
+
+  <pre class="brush: js">var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight;</pre>
+
+  <p>Ici, nous avons stocké une référence vers le canvas dans la variable <code>canvas</code>. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable <code>width</code> et la propriété <code>width</code> du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable <code>height</code> et la propriété <code>height</code> du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre!</p>
+
+  <p>Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas).</p>
+ </li>
+ <li>
+  <p>Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à <code>hidden</code>. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document:</p>
+
+  <pre class="brush: html">&lt;style&gt;
+  body {
+    margin: 0;
+    overflow: hidden;
+  }
+&lt;/style&gt;</pre>
+
+  <p>Les barres de défilement ne devraient plus être là.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.</p>
+</div>
+
+<h3 id="Obtenir_le_contexte_du_canvas_et_configuration_finale">Obtenir le contexte du canvas et configuration finale</h3>
+
+<p>Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un <em>contexte</em>. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer.</p>
+
+<p>En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément <code>&lt;script&gt;</code>:</p>
+
+<pre class="brush: js">var ctx = canvas.getContext('2d');</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez choisir d'autres types de contexte comme <code>webgl</code> pour WebGL, <code>webgl2</code> pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.</p>
+</div>
+
+<p>Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable <code>ctx</code> contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.</p>
+
+<p>Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgb(0, 0, 0)';
+ctx.fillRect(0, 0, width, height);</pre>
+
+<p>Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Couleurs">valeur de couleur</a> tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables <code>width</code> et <code>height</code> allaient être utiles)!</p>
+
+<p>OK, notre template est prêt et il est temps de passer à autre chose.</p>
+
+<h2 id="Les_bases_du_canvas_2D">Les bases du canvas 2D</h2>
+
+<p>Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, <code>ctx</code>).</p>
+
+<p>De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="display: block; height: 220px; margin: 0px auto; width: 220px;"></p>
+
+<p>Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.</p>
+
+<h3 id="Rectangles_simples">Rectangles simples</h3>
+
+<p>Commençons avec quelques rectangles simples.</p>
+
+<ol>
+ <li>
+  <p>Tout d'abord, faites une copie de votre template (ou copiez localement le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a> si vous n'avez pas suivit les étapes précédentes).</p>
+ </li>
+ <li>
+  <p>Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript:</p>
+
+  <pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.fillRect(50, 50, 100, 150);</pre>
+
+  <p>Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4).</p>
+ </li>
+ <li>
+  <p>Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript:</p>
+
+  <pre class="brush: js">ctx.fillStyle = 'rgb(0, 255, 0)';
+ctx.fillRect(75, 75, 100, 100);</pre>
+
+  <p>Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.</p>
+ </li>
+ <li>
+  <p>Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant <code>rgba()</code>. La valeur <code>a</code> définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de <code>a</code> est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:</p>
+
+  <pre class="brush: js">ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
+ctx.fillRect(25, 100, 175, 50);</pre>
+ </li>
+ <li>
+  <p>Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous!</p>
+ </li>
+</ol>
+
+<h3 id="Traits_et_épaisseurs_de_ligne">Traits et épaisseurs de ligne</h3>
+
+<p>Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit <strong>strokes</strong> - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.</p>
+
+<ol>
+ <li>
+  <p>Ajoutez ce qui suit au bas de votre JavaScript:</p>
+
+  <pre class="brush: js">ctx.strokeStyle = 'rgb(255, 255, 255)';
+ctx.strokeRect(25, 25, 175, 200);</pre>
+ </li>
+ <li>
+  <p>L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes:</p>
+
+  <pre class="brush: js">ctx.lineWidth = 5;</pre>
+
+  <p>Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais!</p>
+ </li>
+</ol>
+
+<p>C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p>
+</div>
+
+<h3 id="Dessiner_des_chemins">Dessiner des chemins</h3>
+
+<p>Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un <em>path</em> (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore.</p>
+
+<p>Commençons la section en faisant une nouvelle copie de notre template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), dans lequel nous allons dessiner le nouvel exemple.</p>
+
+<p>Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes:</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} — commence à dessiner un path au point où le stylo se situe sur le canvas. Sur un nouveau canvas, le stylo commence au point (0, 0).</li>
+ <li>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} — déplace le stylo à un point différent sur le canvas, sans tracer de ligne; le stylo "saute" simplement à une nouvelle position.</li>
+ <li>{{domxref("CanvasRenderingContext2D.fill", "fill()")}} — dessine une forme en remplissant le path définit jusqu'à présent.</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} — dessine un trait en suivant le path définit jusqu'à présent.</li>
+ <li>Vous pouvez utiliser les fonctionnalités telles que <code>lineWidth</code> et <code>fillStyle</code>/<code>strokeStyle</code> avec les paths aussi bien qu'avec les rectangles.</li>
+</ul>
+
+<p>Typiquement, une manière de dessiner un trait simple ressemblerait à ça:</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(50, 50);
+// tracer le trait
+ctx.fill();</pre>
+
+<h4 id="Dessiner_des_lignes">Dessiner des lignes</h4>
+
+<p>Dessinons un triangle équilatéral sur le canvas.</p>
+
+<ol>
+ <li>
+  <p>Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés.</p>
+
+  <pre class="brush: js">function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};</pre>
+ </li>
+ <li>
+  <p>Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle.</p>
+
+  <pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(50, 50);</pre>
+ </li>
+ <li>
+  <p>Maintenant ajoutez le bloc de code suivant:</p>
+
+  <pre class="brush: js">ctx.lineTo(150, 50);
+var triHeight = 50 * Math.tan(degToRad(60));
+ctx.lineTo(100, 50+triHeight);
+ctx.lineTo(50, 50);
+ctx.fill();</pre>
+
+  <p>Parcourons ceci dans l'ordre:</p>
+
+  <ol>
+   <li>
+    <p>D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x).</p>
+   </li>
+   <li>
+    <p>Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas.</p>
+
+    <p>Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés.</p>
+
+    <p>Pour ce qui est des côtés:</p>
+
+    <ul>
+     <li>Le côté le plus long est appelé l'<strong>hypoténuse</strong></li>
+     <li>Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit <strong>adjacent</strong> à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné.</li>
+     <li>Le côté opposé à l'angle de 60 degrés est dit <strong>opposé</strong> à cet angle — c'est la hauteur que nous voulons calculer.</li>
+    </ul>
+
+    <p> </p>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p>
+
+    <p>Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit <code>50 * Math.tan(degToRad(60))</code>. Nous utilisons notre fonction <code>degToRad()</code> pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.</p>
+   </li>
+   <li>
+    <p>Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers <code>(100, 50+triHeight)</code>. La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas.</p>
+   </li>
+   <li>
+    <p>L'instruction qui suit ajoute une ligne vers le point de départ du triangle.</p>
+   </li>
+   <li>
+    <p>Pour finir, nous appelons <code>ctx.fill()</code> pour finir le path et remplir la forme.</p>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h4 id="Dessiner_des_cercles">Dessiner des cercles</h4>
+
+<p>Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié.</p>
+
+<ol>
+ <li>
+  <p>Ajoutons un arc à notre canvas en ajoutant le code qui suit:</p>
+
+  <pre class="brush: js">ctx.fillStyle = 'rgb(0, 0, 255)';
+ctx.beginPath();
+ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
+ctx.fill();</pre>
+
+  <p><code>arc()</code> prend six paramètres.</p>
+
+  <ul>
+   <li>Les deux premiers spécifient la position du centre du cercle (X et Y respectivement).</li>
+   <li>Le troisième est le rayon du cercle</li>
+   <li>Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé)</li>
+   <li>Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (<code>false</code> pour le sens horaire).</li>
+  </ul>
+
+  <div class="note">
+  <p><strong>Note</strong>: 0 degrés est horizontalement vers la droite.</p>
+  </div>
+ </li>
+ <li>
+  <p>Ajoutons un autre arc:</p>
+
+  <pre class="brush: js">ctx.fillStyle = 'yellow';
+ctx.beginPath();
+ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
+ctx.lineTo(200, 106);
+ctx.fill();</pre>
+
+  <p>Le motif ici est très similaire, a deux différences près:</p>
+
+  <ul>
+   <li>Nous avons mis le dernier paramètre de <code>arc()</code> à <code>true</code>, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre.  Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez <code>true</code> à <code>false</code> et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.</li>
+   <li>Avant d'appeler <code>fill()</code>, nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>C'est tout pour le moment; votre exemple final devrait ressembler à ceci:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le code finit est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Formes_géométriques">Dessiner des formes avec le canevas</a>.</p>
+</div>
+
+<h3 id="Texte">Texte</h3>
+
+<p>Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), dans lequel nous allons dessiner le nouvel exemple.</p>
+
+<p>Le texte peut être avec deux méthodes:</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} — dessine un texte rempli.</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} — dessine un contour de texte.</li>
+</ul>
+
+<p>Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (<strong>text box</strong>) — littéralement, la zone entourant le texte que vous écrivez.</p>
+
+<p>Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.</p>
+
+<p>Essayez d'ajouter le bloc suivant au bas de votre javaScript:</p>
+
+<pre class="brush: js">ctx.strokeStyle = 'white';
+ctx.lineWidth = 1;
+ctx.font = '36px arial';
+ctx.strokeText('Canvas text', 50, 50);
+
+ctx.fillStyle = 'red';
+ctx.font = '48px georgia';
+ctx.fillText('Canvas text', 50, 150);</pre>
+
+<p>Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p>
+</div>
+
+<p>Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans <a href="/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte avec canvas</a>.</p>
+
+<h3 id="Dessiner_des_images_sur_le_canvas">Dessiner des images sur le canvas</h3>
+
+<p>Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas.</p>
+
+<ol>
+ <li>
+  <p>Comme précédemment, créez une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/firefox.png">firefox.png</a> — dans le même répertoire.</p>
+
+  <p>Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas.</p>
+ </li>
+ <li>
+  <p>Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:</p>
+
+  <pre class="brush: js">var image = new Image();
+image.src = 'firefox.png';</pre>
+
+  <p>Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut  {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.</p>
+ </li>
+ <li>
+  <p>Nous pourrions essayer maintenant d'inclure l'image en utilisant <code>drawImage()</code>, mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement <code>onload</code>, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:</p>
+
+  <pre class="brush: js">image.onload = function() {
+  ctx.drawImage(image, 50, 50);
+}</pre>
+
+  <p>Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas.</p>
+ </li>
+ <li>
+  <p>Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de <code>drawImage()</code>. Mettez à jour votre ligne <code>ctx.drawImage()</code> comme suit:</p>
+
+  <pre class="brush: js">ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);</pre>
+
+  <ul>
+   <li>Le premier paramètre est la référence de l'image, comme précédemment.</li>
+   <li>Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné.</li>
+   <li>Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée.</li>
+   <li>Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas.</li>
+   <li>Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>L'exemple final devrait ressembler à ça:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p>
+</div>
+
+<h2 id="Boucles_et_animations">Boucles et animations</h2>
+
+<p>Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail.</p>
+
+<h3 id="Créer_une_boucle">Créer une boucle</h3>
+
+<p>Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> (ou tout autre type de boucle) comme n'importe quel autre code JavaScript.</p>
+
+<p>Construisons un exemple simple.</p>
+
+<ol>
+ <li>
+  <p>Créez une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) et ouvrez-le dans votre éditeur de texte.</p>
+ </li>
+ <li>
+  <p>Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas:</p>
+
+  <pre class="brush: js">ctx.translate(width/2, height/2);</pre>
+
+  <p>Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas.</p>
+ </li>
+ <li>
+  <p>Maintenant ajoutez le code suivant au bas du Javacript:</p>
+
+  <pre class="brush: js">function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+function rand(min, max) {
+  return Math.floor(Math.random() * (max-min+1)) + (min);
+}
+
+var length = 250;
+var moveOffset = 20;
+
+for(var i = 0; i &lt; length; i++) {
+
+}</pre>
+
+  <p>Ici, nous implémentons</p>
+
+  <ul>
+   <li>la même fonction <code>degToRad()</code> que nous avons vu dans l'exemple du triangle auparavant,</li>
+   <li>une fonction <code>rand()</code>, qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure,</li>
+   <li>les variables <code>length</code> et <code>moveOffset</code> (que nous verrons plus loin),</li>
+   <li>et une boucle <code>for</code> vide.</li>
+  </ul>
+ </li>
+ <li>
+  <p>L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle <code>for</code>, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle <code>for</code>:</p>
+
+  <pre class="brush: js">ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
+ctx.beginPath();
+ctx.moveTo(moveOffset, moveOffset);
+ctx.lineTo(moveOffset+length, moveOffset);
+var triHeight = length/2 * Math.tan(degToRad(60));
+ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
+ctx.lineTo(moveOffset, moveOffset);
+ctx.fill();
+
+length--;
+moveOffset += 0.7;
+ctx.rotate(degToRad(5));</pre>
+
+  <p>Ainsi à chaque itération, on:</p>
+
+  <ol>
+   <li>Définit <code>fillStyle</code> comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de <code>length</code>. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire.</li>
+   <li>Ouvre un path.</li>
+   <li>Déplace le stylo aux coordonnées de <code>(moveOffset, moveOffset)</code>; Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons.</li>
+   <li>Dessine une ligne aux coordonées de <code>(moveOffset+length, moveOffset)</code>. Cela dessine une ligne de longueur <code>length</code> parallèle à l'axe X.</li>
+   <li>Calcule la hauteur du triangle, comme vu auparavant.</li>
+   <li>Dessine une ligne vers le coin du bas du triangle.</li>
+   <li>Dessine une ligne vers le début du triangle.</li>
+   <li>Appelle <code>fill()</code> pour remplir le triangle.</li>
+   <li>Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération:
+    <ul>
+     <li>Diminue la valeur de <code>length</code> de 1, de sorte que les triangles deviennent de plus en plus petits;</li>
+     <li>Augmente un peu <code>moveOffset</code> pour que chaque triangle successif soit légèrement plus éloigné;</li>
+     <li>et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant.</li>
+    </ul>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p>C'est tout! L'exemple final devrait ressemble à ça:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}</p>
+
+<p>À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple:</p>
+
+<ul>
+ <li>Dessinez des rectangles ou des arcs au lieu des triangles, ou même des images externes.</li>
+ <li>Jouez avec les valeurs de <code>length</code> et <code>moveOffset</code>.</li>
+ <li>Utilisez des nombres aléatoires — grâce à la fonction <code>rand()</code> que nous avons inclue mais que nous n'avons pas utilisée.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p>
+</div>
+
+<h3 id="Animations">Animations</h3>
+
+<p>L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain.</p>
+
+<p>Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau <code>requestAnimationFrame()</code> juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler <code>requestAnimationFrame()</code> ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé <code>requestAnimationFrame()</code> mais avant que votre fonction n'ait été exécutée.</p>
+
+<div class="note">
+<p><strong>Note:</strong> C'est une bonne pratique d'appeler <code>cancelAnimationFrame()</code> à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée.</p>
+</div>
+
+<p>Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles.</p>
+
+<p>Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent (<a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">le voir en direct</a>, et voir <a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/bouncing-balls">le code source</a>). Le code de la boucle qui garde le tout en mouvement ressemble à ceci:</p>
+
+<pre class="brush: js">function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while(balls.length &lt; 25) {
+    var ball = new Ball();
+    balls.push(ball);
+  }
+
+  for(i = 0; i &lt; balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+    balls[i].collisionDetect();
+  }
+
+  requestAnimationFrame(loop);
+}
+
+loop();</pre>
+
+<p>Nous lançons la fonction <code>loop()</code> une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction <code>loop()</code> s'occupe ensuite d'appeler <code>requestAnimationFrame(loop)</code> pour afficher la prochaine image de l'animation, et ce continuellement.</p>
+
+<p>Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.</p>
+
+<p>Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!</p>
+
+<p>En général, le processus pour animer un canvas implique les étapes suivantes:</p>
+
+<ol>
+ <li>Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).</li>
+ <li>Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées.</li>
+ <li>Dessiner les éléments graphiques que vous animez.</li>
+ <li>Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}}</li>
+ <li>Appeler <code>requestAnimationFrame()</code> pour planifier le dessin de l'image suivante de l'animation.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Nous ne couvrirons pas <code>save()</code> et <code>restore()</code> ici, mais elles sont bien expliquées dans notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a> (et ceux qui le suivent).</p>
+</div>
+
+<h3 id="Une_animation_simple_de_personnage">Une animation simple de personnage</h3>
+
+<p>Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial.</p>
+
+<ol>
+ <li>
+  <p>Faites une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/walk-right.png">walk-right.png</a> dans le même répertoire.</p>
+ </li>
+ <li>
+  <p>Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas:</p>
+
+  <pre class="brush: js">ctx.translate(width/2, height/2);</pre>
+ </li>
+ <li>
+  <p>Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement <code>onload</code> pour appeler la fonction <code>draw()</code> quand l'image sera chargée:</p>
+
+  <pre class="brush: js">var image = new Image();
+image.src = 'walk-right.png';
+image.onload = draw;</pre>
+ </li>
+ <li>
+  <p>Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher.</p>
+
+  <pre class="brush: js">var sprite = 0;
+var posX = 0;</pre>
+
+  <p>L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article <a href="http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using using CSS animation">Create a sprite sheet walk cycle using using CSS animation</a> — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/14847/walk-right.png" style="display: block; height: 148px; margin: 0px auto; width: 612px;"></p>
+
+  <p>Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser <code>drawImage()</code> pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.</p>
+ </li>
+ <li>
+  <p>Insérons maintenant une fonction <code>draw()</code> vide au bas du code, prête à être remplie de code:</p>
+
+  <pre class="brush: js">function draw() {
+
+};</pre>
+ </li>
+ <li>
+  <p>Le reste du code dans cette section va dans <code>draw()</code>. Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant <code>-(width/2), -(height/2)</code> puisque nous avons définit l'origine du canvas à <code>width/2, height/2</code> plus tôt.</p>
+
+  <pre class="brush: js">ctx.fillRect(-(width/2), -(height/2), width, height);</pre>
+ </li>
+ <li>
+  <p>Ensuite, nous allons dessinons notre image en utilisant <code>drawImage()</code> — la version à 9 paramètres. Ajoutez ce qui suit:</p>
+
+  <pre class="brush: js">ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);</pre>
+
+  <p>Comme vous pouvez le voir:</p>
+
+  <ul>
+   <li>Nous spécifions <code>image</code> comme étant l'image à inclure.</li>
+   <li>Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut <code>sprite</code> multiplié par 102 (où <code>sprite</code> est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0.</li>
+   <li>Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148.</li>
+   <li>Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est <code>0+posX</code>, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de <code>posX</code>.</li>
+   <li>Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Maintenant, nous allons changer la valeur de <code>sprite</code> après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction <code>draw()</code>:</p>
+
+  <pre class="brush: js">  if (posX % 13 === 0) {
+    if (sprite === 5) {
+      sprite = 0;
+    } else {
+      sprite++;
+    }
+  }</pre>
+
+  <p>Nous enveloppons le bloc entier de <code>if (posX % 13 === 0) { ... }</code>. On utilise l'opérateur modulo (<code>%</code>) (aussi connu sous le nom d'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_()">opérateur reste</a>) pour vérifier si la valeur de <code>posX</code> peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant <code>sprite</code> (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (<code>requestAnimationFrame()</code> appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite!</p>
+
+  <p>À l'intérieur du bloc, on utilise une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if ... else</a></code> pour vérifier si la valeur de <code>sprite</code> vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse <code>sprite</code> à 0; sinon on l'incrémente de 1.</p>
+ </li>
+ <li>
+  <p>Ensuite, nous devons déterminer comment modifier la valeur de <code>posX</code> sur chaque image — ajoutez le bloc de code à la suite:</p>
+
+  <pre class="brush: js">  if(posX &gt; width/2) {
+    newStartPos = -((width/2) + 102);
+    posX = Math.ceil(newStartPos / 13) * 13;
+    console.log(posX);
+  } else {
+    posX += 2;
+  }</pre>
+
+  <p>Nous utilisons une autre instruction <code>if ... else</code> pour voir si la valeur de <code>posX</code> est plus grande que <code>width/2</code>, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit <code>posX</code> au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner!</p>
+
+  <p>Si notre personnage n'a pas atteint le bord de l'écran, on incrémente <code>posX</code> de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera.</p>
+ </li>
+ <li>
+  <p>Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction <code>draw()</code>:</p>
+
+  <pre class="brush: js">window.requestAnimationFrame(draw);</pre>
+ </li>
+</ol>
+
+<p>Et voilà! L'exemple final devrait ressembler à ça:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p>
+</div>
+
+<h3 id="Une_application_simple_de_dessin">Une application simple de dessin</h3>
+
+<p>Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code.</p>
+
+<p>L'exemple peut être trouvé sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html">8_canvas_drawing_app.html</a>, et vous pouvez jouer avec en direct ci-dessous:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}</p>
+
+<p>Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: <code>curX</code>, <code>curY</code>, et <code>pressed</code>. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement <code>onmousemove</code>, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement <code>onmousedown</code> et <code>onmouseup</code> pour changer la valeur de <code>pressed</code> à <code>true</code> quand le bouton de la souris est pressé, et de nouveau à <code>false</code> quand il est relaché.</p>
+
+<pre class="brush: js">var curX;
+var curY;
+var pressed = false;
+
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}</pre>
+
+<p>Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment:</p>
+
+<pre class="brush: js">clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+}</pre>
+
+<p>La boucle du dessin est relativement simple cette fois-ci — si <code>pressed</code> est à <code>true</code>, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle.</p>
+
+<pre class="brush: js">function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Les types d'{{htmlelement("input")}} <code>range</code> et <code>color</code> sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type <code>color</code>. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.</p>
+</div>
+
+<h2 id="WebGL">WebGL</h2>
+
+<p>Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'<a href="/fr/Apprendre/WebGL">API WebGL</a>, qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}.</p>
+
+<p>WebGL est basé sur le langage de programmation graphique <a href="/fr/docs/Glossaire/OpenGL">OpenGL</a>, et permet de communiquer directement avec le <a href="/fr/docs/Glossaire/GPU">GPU</a> de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant.</p>
+
+<h3 id="Utiliser_une_bibliothèque">Utiliser une bibliothèque</h3>
+
+<p>De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> ou <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>. La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut.</p>
+
+<p>Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut.</p>
+
+<h3 id="Recréer_notre_cube">Recréer notre cube</h3>
+
+<p>Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt.</p>
+
+<ol>
+ <li>
+  <p>Pour commencer, créez une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/index.html">index.html</a> dans un nouveau répertoire, et sauvegardez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/metal003.png">metal003.png</a> dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard.</p>
+ </li>
+ <li>
+  <p>Ensuite, créez un nouveau fichier <code>main.js</code>, toujours dans le même répertoire.</p>
+ </li>
+ <li>
+  <p>Si vous ouvrez <code>index.html</code> dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute <code>three.min.js</code> à la page, et le second ajoute notre fichier <code>main.js</code> à la page. Vous devez <a href="https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js">télécharger la bibliothèque three.min.js</a> et la sauvegarder dans le même répertoire que précédemment.</p>
+ </li>
+ <li>
+  <p>Maintenant que nous avons inclus <code>three.js</code> dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans <code>main.js</code>. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier <code>main.js</code>:</p>
+
+  <pre class="brush: js">var scene = new THREE.Scene();</pre>
+
+  <p>Le constructeur <code><a href="https://threejs.org/docs/index.html#api/scenes/Scene">Scene()</a></code> crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher.</p>
+ </li>
+ <li>
+  <p>Ensuite, nous avons besoin d'une <strong>caméra</strong> pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite:</p>
+
+  <pre class="brush: js">var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = 5;
+</pre>
+
+  <p>Le constructeur <code><a href="https://threejs.org/docs/index.html#api/cameras/PerspectiveCamera">PerspectiveCamera()</a></code> prend quatre arguments:</p>
+
+  <ul>
+   <li>Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés.</li>
+   <li>Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas).</li>
+   <li>Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir.</li>
+   <li>Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets.</li>
+  </ul>
+
+  <p>Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.</p>
+ </li>
+ <li>
+  <p>Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur <code><a href="https://threejs.org/docs/index.html#api/renderers/WebGLRenderer">WebGLRenderer()</a></code> — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:</p>
+
+  <pre class="brush: js">var renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);</pre>
+
+  <p>La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre.</p>
+ </li>
+ <li>
+  <p>Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript:</p>
+
+  <pre class="brush: js">var cube;
+
+var loader = new THREE.TextureLoader();
+
+loader.load( 'metal003.png', function (texture) {
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  texture.repeat.set(2, 2);
+
+  var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
+  var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );
+  cube = new THREE.Mesh(geometry, material);
+  scene.add(cube);
+
+  draw();
+});</pre>
+
+  <p>Il y a un peu plus à encaisser ici, alors allons-ici par étapes:</p>
+
+  <ul>
+   <li>Nous créons d'abord une variable globale <code>cube</code> pour pouvoir accéder à notre cube de n'importe où dans notre code.</li>
+   <li>Ensuite, nous créons un nouvel objet <code><a href="https://threejs.org/docs/index.html#api/loaders/TextureLoader">TextureLoader</a></code>, et appellons <code>load()</code> dessus. La fonction <code>load()</code> prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée.</li>
+   <li>À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet <code><a href="https://threejs.org/docs/index.html#api/textures/Texture">texture</a></code> pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube.</li>
+   <li>Ensuite, nous créons un nouvel objet <code><a href="https://threejs.org/docs/index.html#api/geometries/BoxGeometry">BoxGeometry</a></code> et <code><a href="https://threejs.org/docs/index.html#api/materials/MeshLambertMaterial">MeshLambertMaterial</a></code>, que nous passons à un <code><a href="https://threejs.org/docs/index.html#api/objects/Mesh">Mesh</a></code> pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface).</li>
+   <li>Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction <code>draw()</code> pour commencer l'animation.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Avant de définir la fonction <code>draw()</code>, nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code:</p>
+
+  <pre class="brush: js">var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light
+scene.add(light);
+
+var spotLight = new THREE.SpotLight('rgb(255, 255, 255)');
+spotLight.position.set( 100, 1000, 1000 );
+spotLight.castShadow = true;
+scene.add(spotLight);</pre>
+
+  <p>Un objet <code><a href="https://threejs.org/docs/index.html#api/lights/AmbientLight">AmbientLight</a></code> est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet <code><a href="https://threejs.org/docs/index.html#api/lights/AmbientLight">SpotLight</a></code>, d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait).</p>
+ </li>
+ <li>
+  <p>Pour finir, ajoutons notre fonction <code>draw()</code> au bas du code:</p>
+
+  <pre class="brush: js">function draw() {
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(draw);
+}</pre>
+
+  <p>C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons <code>requestAnimationFrame()</code> pour planifier le dessin de notre prochaine image.</p>
+ </li>
+</ol>
+
+<p>Jetons un coup d'oeil rapide au produit fini:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p>
+
+<p>Vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-cube">trouver le code terminé sur GitHub</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">le voir en direct</a>). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!</p>
+</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous!</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin.</p>
+
+<ul>
+ <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a> — Une série de tutoriels très détaillés qui explique ce que vous devriez savoir à propos du canvas 2D de manière beaucoup plus poussée qu'ici. Lecture indispensable.</li>
+ <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a> — Une série de tutoriels qui enseigne les bases de la programmation WebGL brute.</li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construire une démo basique avec Three.js</a> — tutoriel Three.js basique. Nous avons également les guides équivalents pour <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> et <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>.</li>
+ <li><a href="/fr/docs/Jeux">Développement de jeux vidéos</a> — La page d'atterrisage sur MDN pour le développement de jeux web. Il y a quelques tutoriels et techniques disponibles liés au canvas 2D et 3D — voir les options du menu Techniques et Tutoriels.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/violent-theremin">Violent theramin</a> — Utilise l'API Web Audio pour générer des sons, et Canvas pour générer une visualisation.</li>
+ <li><a href="https://github.com/mdn/voice-change-o-matic">Voice change-o-matic</a> — Utilise un canvas pour visualiser en temps réel les données audio de l'API Web Audio.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/apprendre/javascript/client-side_web_apis/fetching_data/index.html
new file mode 100644
index 0000000000..2acc2ed9b3
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/fetching_data/index.html
@@ -0,0 +1,397 @@
+---
+title: Récupérer des données du serveur
+slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
+tags:
+  - API
+  - Apprendre
+  - Article
+  - Codage
+  - Débutant
+  - Fetch
+  - JavaScript
+  - XHR
+  - data
+translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions de base de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de bases des APIs côté client</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre à récupérer des données du serveur web et les utiliser pour mettre à jour le contenu de la page.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quel_est_le_problème">Quel est le problème?</h2>
+
+<p>À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.</p>
+
+<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p>
+
+<p>Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.</p>
+
+<h3 id="Larrivée_dAjax">L'arrivée d'Ajax</h3>
+
+<p>Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du <a href="/fr/docs/Web/HTML">HTML</a>, {{glossary("XML")}}, <a href="/fr/docs/Learn/JavaScript/Objects/JSON">JSON</a>, ou texte brut) et de les afficher dans la page web.</p>
+
+<p>Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>. Elles permettent de réaliser des requêtes <a href="/fr/docs/Web/HTTP">HTTP</a> pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise <code>XMLHttpRequest</code> ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.</p>
+</div>
+
+<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p>
+
+<p>Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :</p>
+
+<ol>
+ <li>Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...</li>
+ <li>Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.</li>
+</ol>
+
+<p>C'est une bonne chose puisque :</p>
+
+<ul>
+ <li>La mise à jour de la page est beaucoup plus rapide et vous n'avez pas à attendre que la page se rafraîchisse, si bien que le site paraît être plus rapide et plus réactif.</li>
+ <li>Moins de données doivent être téléchargées pour mettre à jour la page, et donc moins de bande passante est utilisée. Cela ne fait peut-être pas une grande différence sur un ordinateur de bureau, mais cela peut devenir un problème majeur sur mobile ou dans les pays en développement, qui n'ont pas partout un service Internet ultra-rapide.</li>
+</ul>
+
+<p>Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.</p>
+
+<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p>
+
+<h2 id="Une_requête_Ajax_basique">Une requête Ajax basique</h2>
+
+<p>Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>. Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.</p>
+
+<p>Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.</p>
+
+<h3 id="XMLHttpRequest">XMLHttpRequest</h3>
+
+<p><code>XMLHttpRequest</code> (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.</p>
+
+<ol>
+ <li>
+  <p>Pour commencer cet exemple, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> et des quatre fichiers texte — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.</p>
+ </li>
+ <li>
+  <p>À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction  <code>updateDisplay()</code>.</p>
+
+  <pre class="brush: js">var verseChoose = document.querySelector('select');
+var poemDisplay = document.querySelector('pre');
+
+verseChoose.onchange = function() {
+  var verse = verseChoose.value;
+  updateDisplay(verse);
+};</pre>
+ </li>
+ <li>
+  <p>Définissons maintenant la fonction <code>updateDisplay()</code>. Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction :</p>
+
+  <pre class="brush: js">function updateDisplay(verse) {
+
+};</pre>
+ </li>
+ <li>
+  <p>Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut <code>value</code> s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.</p>
+
+  <p>Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes">concaténation de chaînes</a>. Ajoutez les lignes suivantes à l'intérieur de la fonction <code>updateDisplay()</code> :</p>
+
+  <pre class="brush: js">verse = verse.replace(" ", "");
+verse = verse.toLowerCase();
+var url = verse + '.txt';</pre>
+ </li>
+ <li>
+  <p>Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons <code>request</code> pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes :</p>
+
+  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
+ </li>
+ <li>
+  <p>Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la <a href="/fr/docs/Web/HTTP/Méthode">méthode HTTP</a> et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode <code><a href="/fr/docs/Web/HTTP/Méthode/GET">GET</a></code> et passer notre variable <code>url</code> pour URL. Ajoutez ceci à la suite de la ligne précédente :</p>
+
+  <pre class="brush: js">request.open('GET', url);</pre>
+ </li>
+ <li>
+  <p>Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme <code>text</code>. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite :</p>
+
+  <pre class="brush: js">request.responseType = 'text';</pre>
+ </li>
+ <li>
+  <p>Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété <code>response</code> de l'objet XHR utilisé.</p>
+
+  <p>Ajoutez le bloc de code qui suit toujours au bas de la fonction <code>updateDisplay()</code>. Vous verrez qu'à l'intérieur du gestionnaire d'événément <code>onload</code>, nous assignons la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de <code>poemDisplay</code> (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.</p>
+
+  <pre class="brush: js">request.onload = function() {
+  poemDisplay.textContent = request.response;
+};</pre>
+ </li>
+ <li>
+  <p>Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :</p>
+
+  <pre class="brush: js">request.send();</pre>
+
+  <p>Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester.</p>
+ </li>
+ <li>
+  <p>Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante <code>&lt;/script&gt;</code>), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur :</p>
+
+  <pre class="brush: js">updateDisplay('Verse 1');
+verseChoose.value = 'Verse 1';</pre>
+ </li>
+</ol>
+
+<h3 id="Servir_votre_exemple_depuis_un_serveur">Servir votre exemple depuis un serveur</h3>
+
+<p>Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">La sécurité d'un site web</a>).</p>
+
+<p>Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez <a href="/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local">Comment configurer un serveur de test local?</a></p>
+
+<h3 id="Fetch">Fetch</h3>
+
+<p>L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie.</p>
+
+<p>Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.</p>
+
+<ol>
+ <li>
+  <p>Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> et les quatre fichiers texte — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — à l'intérieur).</p>
+ </li>
+ <li>
+  <p>À l'intérieur de la fonction <code>updateDisplay()</code>, vous avez le code XHR suivant :</p>
+
+  <pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', url);
+request.responseType = 'text';
+
+request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
+
+request.send();</pre>
+ </li>
+ <li>
+  <p>Remplacez-le avec ce qui suit :</p>
+
+  <pre class="brush: js">fetch(url).then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});</pre>
+ </li>
+ <li>
+  <p>Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR  — pourvu que vous utilisiez un navigateur moderne.</p>
+ </li>
+</ol>
+
+<h4 id="Que_se_passe-t-il_dans_le_code_Fetch">Que se passe-t-il dans le code Fetch?</h4>
+
+<p>Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler <code>.send()</code> — la requête est exécutée directemment.</p>
+
+<p>Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de <code>fetch()</code> — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. <code>fetch()</code> retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons <code>.then()</code> pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément <code>onload</code> dans la version XHR.</p>
+
+<p>La fonction définie dans le <code>.then()</code> reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par <code>fetch()</code> est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de <code>request.responseType = 'text'</code> dans la version XHR.</p>
+
+<p>Vous verrez que <code>text()</code> retourne également une promesse, nous y chaînons donc un nouveau <code>.then()</code>, à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout.</p>
+
+<p>Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré.</p>
+
+<h3 id="À_propos_des_promesses">À propos des promesses</h3>
+
+<p>Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.</p>
+
+<p>Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.</p>
+
+<h4 id="Promesse_1">Promesse 1</h4>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  //...
+});</pre>
+
+<p>Si l'on traduit en bon français les instructions JavaScript, on pourrait dire</p>
+
+<ul>
+ <li><code>fetch(url)</code> : récupérer la ressource située à l'adresse <code>url</code></li>
+ <li><code>.then(function() { ... })</code>: quand c'est fait, exécuter la fonction spécifiée</li>
+</ul>
+
+<p>On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.</p>
+
+<p>La fonction passée à <code>then()</code> n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur).</p>
+
+<p>Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent :</p>
+
+<pre class="brush: js">var myFetch = fetch(url);
+
+myFetch.then(function(response) {
+  //...
+});</pre>
+
+<p>Parce que la méthode <code>fetch()</code> retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du <code>.then()</code> reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :</p>
+
+<pre class="brush: js">fetch(url).then(function(dogBiscuits) {
+  //...
+});</pre>
+
+<p>Mais il est plus logique de donner un nom de paramètre qui décrit son contenu !</p>
+
+<h4 id="Promesse_2">Promesse 2</h4>
+
+<p>Voyons maintenant la fonction appelé dans <code>.then()</code>:</p>
+
+<pre class="brush: js">function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+}</pre>
+
+<p>L'objet <code>response</code> a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.</p>
+
+<p>À l'intérieur de ce dernier <code>.then()</code>, nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de l'élément {{htmlelement("pre")}} à la valeur du texte.</p>
+
+<h4 id="Chaîner_les_then">Chaîner les then()</h4>
+
+<p>Notez que le résultat de la fonction appelée par le <code>.then()</code> est également retourné par ce dernier, nous pouvons donc mettre les <code>.then()</code> bout à bout, en passant le résultat du bloc précédent au prochain.</p>
+
+<p>Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  return response.text()
+}).then(function(text) {
+  poemDisplay.textContent = text;
+});</pre>
+
+<p>Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction <code><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">return</a></code> pour retourner <code>response.text()</code>, et ce résultat est passé au prochain <code>.then()</code>.</p>
+
+<h3 id="Quel_mécanisme_devriez-vous_utiliser">Quel mécanisme devriez-vous utiliser?</h3>
+
+<p>Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.</p>
+
+<p>Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix.</p>
+
+<p>Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore.</p>
+
+<h2 id="Un_exemple_plus_complexe">Un exemple plus complexe</h2>
+
+<p>Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">exemple en direct sur GitHub</a>, et <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">voir le code source</a>.</p>
+
+<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.</p>
+
+<p>Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">can-script.js</a>). Nous allons expliquer le code Fetch.</p>
+
+<h4 id="Premier_Fetch">Premier Fetch</h4>
+
+<p>Le premier bloc qui utilise Fetch se trouve au début du JavaScript :</p>
+
+<pre class="brush: js">fetch('products.json').then(function(response) {
+  if(response.ok) {
+    response.json().then(function(json) {
+      products = json;
+      initialize();
+    });
+  } else {
+    console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
+  }
+});</pre>
+
+<p>Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut <code>true</code> si le statut de la réponse était OK (<a href="/fr/docs/Web/HTTP/Status/200">statut HTTP 200, "OK"</a>), ou <code>false</code> sinon.</p>
+
+<p>Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut.</p>
+
+<p>Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation.</p>
+
+<p>Vous pouvez tester le cas d'échec vous-même :</p>
+
+<ol>
+ <li>Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">fichier ZIP can-store</a>)</li>
+ <li>Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})</li>
+ <li>Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.</li>
+ <li>Maintenant, chargez le fichier index dans votre navigateur (via <code>localhost:8000</code>) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).</li>
+</ol>
+
+<h4 id="Deuxième_Fetch">Deuxième Fetch</h4>
+
+<p>Le deuxième bloc Fetch se trouve dans la fonction <code>fetchBlob()</code>:</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(blob) {
+      objectURL = URL.createObjectURL(blob);
+      showProduct(objectURL, product);
+    });
+  } else {
+    console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText);
+  }
+});</pre>
+
+<p>Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est <a href="/fr/docs/Web/API/Blob">Blob</a> — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.</p>
+
+<p>Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :</p>
+
+<pre>blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre>
+
+<h3 id="Challenge_une_version_XHR_de_Can_Store">Challenge : une version XHR de Can Store</h3>
+
+<p>Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">copie du fichier ZIP</a> et essayiez de modifier le JavaScript en conséquence.</p>
+
+<p>Quelques conseils qui pourraient s'avérer utiles :</p>
+
+<ul>
+ <li>Vous pourriez trouver la référence {{domxref("XMLHttpRequest")}} utile.</li>
+ <li>Vous allez devoir utiliser le même modèle que vous avez vu plus tôt dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">XHR-basic.html</a>.</li>
+ <li>Vous devrez ajouter la gestion des erreurs que nous vous avons montré dans la version Fetch de Can Store :
+  <ul>
+   <li>La réponse se situe dans <code>request.response</code> une fois que l'événement <code>load</code> a été déclenché et non dans une promesse.</li>
+   <li>Le meilleur équivalent à <code>response.ok</code> en XHR est de vérifier si {{domxref("XMLHttpRequest.status","request.status")}} vaut 200 ou si {{domxref("XMLHttpRequest.readyState","request.readyState")}} est égal à 4.</li>
+   <li>Les propriétés permettant d'obtenir le status et le message en cas d'erreur sont toujours <code>status</code> et <code>statusText</code> mais elles se situent sur l'objet <code>request</code> (XHR) et non sur l'objet <code>response</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">voir le code source</a>, ou <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">voir en direct</a>).</p>
+</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants:</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Ajax — Premiers pas</a></li>
+ <li><a href="/fr/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promesses</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Objects/JSON">Manipuler des données JSON</a></li>
+ <li><a href="/fr/docs/Web/HTTP/Aperçu">Un aperçu de HTTP</a></li>
+ <li><a href="/fr/docs/Learn/Server-side">Programmation de sites web, côté serveur</a></li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
+</div>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/index.html b/files/fr/apprendre/javascript/client-side_web_apis/index.html
new file mode 100644
index 0000000000..d5d6f410e3
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/index.html
@@ -0,0 +1,51 @@
+---
+title: API web utilisées côté client
+slug: Apprendre/JavaScript/Client-side_web_APIs
+tags:
+  - API
+  - API Web
+  - Apprendre
+  - Articles
+  - Codage
+  - DOM
+  - Débutant
+  - Graphismes
+  - JavaScript
+  - Localisation
+  - Media
+  - Module
+  - données
+translation_of: Learn/JavaScript/Client-side_web_APIs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> et <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objets JavaScript</a>). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.</p>
+
+<p>Une connaissance basique de <a href="/en-US/docs/Learn/HTML">HTML</a> et <a href="/en-US/docs/Learn/CSS">CSS</a> serait aussi utile.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></dt>
+ <dd>Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation.</dd>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></dt>
+ <dd>Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</dd>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></dt>
+ <dd>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">API Fetch</a>.</dd>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></dt>
+ <dd>Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.</dd>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></dt>
+ <dd>Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</dd>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></dt>
+ <dd>HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</dd>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></dt>
+ <dd>Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.</dd>
+</dl>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/introduction/index.html b/files/fr/apprendre/javascript/client-side_web_apis/introduction/index.html
new file mode 100644
index 0000000000..b7e2ed71b4
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/introduction/index.html
@@ -0,0 +1,307 @@
+---
+title: Introduction aux API du Web
+slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
+tags:
+  - API
+  - API Web
+  - Apprentissage
+  - Article
+  - Codage
+  - Débutant
+  - Navigateur
+  - Objet
+  - Tierce partie
+  - côté‑client
+translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Tout d'abord, nous survolerons le concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées ? Nous verrons également quelles sont les principales APIs et leur utilisation.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Des connaissances de base en informatique, une compréhension de base du <a href="/en-US/docs/Learn/HTML">HTML</a> et <a href="/en-US/docs/Learn/CSS">CSS</a>, des notions de JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">briques JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">objets JavaScript</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Vous familiariser avec les APIs, ce qu'elles permettent de faire, et comment les utiliser dans votre code.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="C'est_quoi_une_API">C'est quoi une API ?</h2>
+
+<p>Les APIs (Application Programming Interfaces) sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.</p>
+
+<p>En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p>
+
+<p><em>Image source: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> by <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, on Flickr.</em></p>
+
+<p>De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Voir aussi l'<a href="/en-US/docs/Glossary/API">entrée API du glossaire</a> pour plus de descriptions.</p>
+</div>
+
+<h3 id="APIs_JavaScript_côté_client">APIs JavaScript côté client</h3>
+
+<p>Le JavaScript côté client en particulier a de nombreuses APIs à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories:</p>
+
+<ul>
+ <li><strong>API du navigateur : </strong>Elles sont intégrées au navigateur Web ; elles peuvent afficher des données provenant du navigateur et de son environnement informatique et faire des choses complexes utiles avec les dites données.<br>
+  Par exemple: l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation">API de géolocalisation</a> fournit des constructions JavaScript simples pour extraire des données d'emplacement et afficher votre position sur une carte Google Map. En arrière-plan, le navigateur utilise un code de niveau plus bas (par exemple C ++) pour communiquer avec le matériel GPS du périphérique (ou ce qui est disponible pour déterminer les données de position), récupérer les données de position et les renvoyer à l'environnement du navigateur pour l'utiliser dans votre code. Mais encore une fois, cette complexité est abstraite par l'API.</li>
+ <li><strong>API tierces :</strong> Elles ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web.<br>
+  Par exemple: l'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoit alors les informations demandées.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 421px; margin: 0px auto; width: 672px;"></p>
+
+<h3 id="Relations_entre_JavaScript_APIs_et_autres_outils_JavaScript">Relations entre JavaScript, APIs et autres outils JavaScript</h3>
+
+<p>Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et quelle est sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur  d'autres outils JavaScript qui existent:</p>
+
+<ul>
+ <li>JavaScript — Un langage de programmation de haut niveau intégré aux navigateurs, qui permet de mettre en œuvre des fonctionnalités sur les pages et applications Web. Notez que JavaScript est également disponible dans d'autres environnements de programmation, tels que <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>. Mais ne vous en préoccupez pas pour l'instant.</li>
+ <li>API du navigateur — Constructions intégrées dans le navigateur, situées au‑dessus du langage JavaScript, permettant une mise en œuvre plus facile de fonctionnalités.</li>
+ <li>API tierce — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web).</li>
+ <li>Bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">fonctions personnalisées</a> que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React.</li>
+ <li>Les frameworks JavaScript — Au‑dessus des bibliothèques, les frameworks JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière.<br>
+  La différence essentielle entre une bibliothèque et un framework est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un framework, le contrôle est inversé : c'est le framework qui appelle le code du développeur.</li>
+</ul>
+
+<h2 id="Que_peuvent_faire_les_API">Que peuvent faire les API ?</h2>
+
+<p>Il y a un beaucoup d'APIs disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la <a href="/fr/docs/Web/API">page de l'index des API MDN</a>. </p>
+
+<h3 id="API_de_navigateur_courantes">API de navigateur courantes</h3>
+
+<p>En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :</p>
+
+<ul>
+ <li><strong>Les APIs pour manipuler des documents</strong> chargés dans le navigateur. L'exemple le plus évident est l'<a href="/fr/docs/Web/API/Document_Object_Model">API DOM (Document Object Model)</a>. Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a>.</li>
+ <li><strong>Les APIs pour récupérer des données du serveur</strong>, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest </a>et l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme <strong>Ajax</strong> pour qualifier cette technique. Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur.</a></li>
+ <li><strong>Les APIs pour dessiner et manipuler des graphiques</strong> sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont <a href="/fr/docs/Web/HTML/Canvas">Canvas </a>et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>. Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML {{htmlelement ("canvas")}} pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canvas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles APIs sont souvent combinées avec d'autres APIs, par exemple {{domxref("window.requestAnimationFrame()")}}, pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>.</li>
+ <li><strong>Les APIs audio et vidéo</strong> comme {{domxref("HTMLMediaElement")}}, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a> ou <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a>, permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distortion, la balance, etc.). Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs audio et vidéo</a>.</li>
+ <li><strong>Les APIs de périphérique</strong> permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a>) ou des vibrations (voir l'<a href="/fr/Web/API/Vibration_API">API Vibration</a>).</li>
+ <li><strong>Les APIs de stockage côté client</strong> deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>, et le stockage plus complexe de données tabulaires avec l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a>. Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a>.</li>
+</ul>
+
+<h3 id="APIs_tierces_courantes">APIs tierces courantes</h3>
+
+<p>Il y a une grande variété d'APIs tierces; en voici quelques unes des plus populaires que vous allez probablement utiliser tôt ou tard : </p>
+
+<ul>
+ <li>L'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> — vous permet, par exemple, d'afficher vos derniers tweets sur votre site Web.</li>
+ <li>L'<a href="https://developers.google.com/maps/">API Google Maps</a> — vous permet d'afficher des cartes sur vos pages web. Il s'agit à dire vrai d'une suite complète d'APIs, qui gèrent une grande variété de tâches, comme en témoigne l'<a href="https://developers.google.com/maps/documentation/api-picker">API Picker Google Maps.</a></li>
+ <li>L'<a href="https://developers.facebook.com/docs/">API Facebook</a> — vous permet d'utiliser diverses parties de l'écosystème Facebook au profit de votre application, par exemple permettre de se connecter via Facebook, accepter des paiements via l'application, déployer des campagnes publicitaires ciblées, etc.</li>
+ <li>L'<a href="https://developers.google.com/youtube/">API YouTube</a> — vous permet d'intégrer des vidéos YouTube sur votre site, de rechercher sur YouTube, de créer des playlists, etc.</li>
+ <li>L'<a href="https://www.twilio.com/">API Twilio</a> — fournit un framework permettant de créer des fonctionnalités d'appel vocal et vidéo dans votre application, d'envoyer des SMS/MMS depuis vos applications, et plus encore.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le <a href="http://www.programmableweb.com/category/all/apis">répertoire Programmable Web API.</a></p>
+</div>
+
+<h2 id="Comment_les_API_fonctionnent-elles">Comment les API fonctionnent-elles?</h2>
+
+<p>Chaque API Javascript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.</p>
+
+<h3 id="Elles_sont_fondées_sur_des_objets">Elles sont fondées sur des objets</h3>
+
+<p>Les APIs interagissent avec le code en utilisant un ou plusieurs <a href="/fr/docs/Learn/JavaScript/Objects">objets Javascript</a>, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module <a href="/fr/docs/Learn/JavaScript/Objects">objets Javascript</a> avant de continuer.</p>
+</div>
+
+<p>Prenons pour exemple l'API Géolocalisation — c'est une API très simple composée de quelques simples objets :</p>
+
+<ul>
+ <li>{{domxref ("Geolocation")}}, contient trois méthodes pour contrôler la récupération des données géographiques.</li>
+ <li>{{domxref ("Position")}}, représente la position de l'appareil à un moment donné — contient un objet {{domxref ("Coordinates")}} avec les informations de position réelles, plus un horodatage.</li>
+ <li>{{domxref ("Coordinates")}}, contient beaucoup de données utiles sur la position de l'appareil, y compris la latitude et la longitude, l'altitude, la vitesse et la direction du mouvement, et plus encore.</li>
+</ul>
+
+<p>Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (regardez‑le <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">aussi en direct</a>), vous verrez le code suivant : </p>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Quand vous chargez l'exemple ci-dessus pour la première fois, vous devriez voir une boîte de dialogue demandant si vous acceptez de partager votre position avec cette application (voir la section {{anch ("Elles ont des mécanismes de sécurité supplémentaires si nécessaire")}} plus loin dans cet article).<br>
+ Vous devez accepter pour pouvoir inscrire votre position sur la carte. Si vous ne pouvez toujours pas voir la carte, vous devrez activer l'autorisation à la main. Vous pouvez le faire de différentes manières selon le navigateur utilisé ; par exemple, dans Firefox, allez dans &gt; <em>Outils &gt; Informations sur la page &gt; Permissions</em>, puis modifiez le paramètre <em>Accèder à votre positio</em>n ; dans Chrome, allez à <em>Paramètres &gt; Confidentialité &gt; Afficher les paramètres avancés &gt; Paramètres de contenu</em>, puis modifiez les paramètres d'emplacement.<br>
+ <strong> </strong></p>
+</div>
+
+<p>Pour récupérer l'objet {{domxref("Geolocation")}} du navigateur, on fait appel à {{domxref("Navigator.geolocation")}}. On se sert ensuite de la méthode {{domxref("Geolocation.getCurrentPosition()")}} pour obtenir la position actuelle de notre appareil. On commence donc avec</p>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre>
+
+<p>C'est pareil que:</p>
+
+<pre class="brush: js">var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });</pre>
+
+<p>On peut utiliser la syntaxe <em>point</em> pour chaîner l'accès propriété/méthode et réduire ainsi le nombre de lignes à écrire.</p>
+
+<p>La méthode {{domxref("Geolocation.getCurrentPosition()")}} n'a qu'un seul paramètre obligatoire : une fonction anonyme qui s'exécute une fois que la position actuelle du périphérique a été récupérée avec succès. Cette fonction prend elle-même un paramètre, l'objet {{domxref("Position")}}, contenant les données de position actuelle.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Une fonction prise en argument par une autre fonction s'appelle une <a href="/en-US/docs/Glossary/Callback_function">fonction de rappel</a>.</p>
+</div>
+
+<h3 id="Elles_utilisent_des_fonctions_de_rappel">Elles utilisent des fonctions de rappel</h3>
+
+<p>Cette manière d'appeler des fonctions seulement quand une opération est terminée, pour s'assurer de la bonne fin d'une opération avant d'utiliser les données renvoyées dans une autre opération, est très courante dans les API JavaScript. C'est ce qu'on appelle des opérations {{glossary("asynchronous", "asynchrones")}}.</p>
+
+<p>Récupérer la position actuelle de l'appareil repose sur un composant externe (le GPS de l'appareil ou un autre matériel de géolocalisation), on ne peut pas garantir que cela sera fait à temps pour utiliser immédiatement les données qu'il renvoie. Par conséquent, quelque chose comme cela ne fonctionne pas :</p>
+
+<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;</pre>
+
+<p>Si la première ligne n'a pas encore renvoyé son résultat, la deuxième ligne renvoie une erreur, car les données de position ne sont pas encore disponibles.</p>
+
+<p>Pour cette raison, les APIs impliquant des opérations asynchrones sont conçues pour utiliser des {{glossary ("callback function","fonctions de rappel")}} ou bien le système plus moderne des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promesses</a> — maintenant disponible dans ECMAScript 6 et largement utilisé dans les nouvelles APIs.</p>
+
+<h3 id="Pour_les_APIs_tierces_elles_doivent_être_inclues">Pour les APIs tierces, elles doivent être inclues</h3>
+
+<p>On combine l'API Geolocation avec une API tierce — l'API Google Maps — pour tracer l'emplacement renvoyé par <code>getCurrentPosition()</code> sur une carte Google Map. Pour mettre cette API à disposition sur notre page on doit l'inclure — vous trouverez cette ligne dans le code HTML:</p>
+
+<pre class="brush: html">&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"&gt;&lt;/script&gt;</pre>
+
+<h3 id="Elles_utilisent_des_constructeurs_et_des_options_pour_être_personnalisées">Elles utilisent des constructeurs et des options pour être personnalisées</h3>
+
+<p>Pour afficher la position de l'utilisateur sur la carte, on crée d'abord une instance d'objet <code>LatLng</code> avec le constructeur <code>google.maps.LatLng()</code>. Il prend les valeurs de géolocalisation {{domxref ("coords.latitude")}} et {{domxref ("coords.longitude")}} comme paramètres:</p>
+
+<pre class="brush: js">var latlng = new google.maps.LatLng(
+    position.coords.latitude,
+    position.coords.longitude
+);</pre>
+
+<p>L'objet que nous avons construit est définit comme la valeur de la propriété <code>center</code> d'un objet d'options, <code>myOptions</code>. Ces options vont être utilisées pour construire la carte.</p>
+
+<p>On crée une instance d'objet pour représenter notre carte en appelant le constructeur <code>google.maps.Map()</code> avec deux paramètres — une référence à l'élément {{htmlelement ("div")}} sur lequel on veut afficher la carte (celui avec l'ID <code>map_canvas</code>), et l'objet d'options que nous avons défini juste au-dessus.</p>
+
+<pre class="brush: js">var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre>
+
+<p>Ceci fait, notre carte s'affiche.</p>
+
+<p>Ce dernier bloc de code met en évidence deux modèles courants que vous verrez dans de nombreuses APIs. Tout d'abord, les objets des APIs contiennent généralement des constructeurs, qui sont appelés pour créer des instances d'objets. Ensuite, les objets APIs ont souvent plusieurs options disponibles qui peuvent être modifiées pour obtenir l'environnement exact que vous voulez pour votre programme. Les constructeurs d'API acceptent généralement des objets d'options en tant que paramètres, ce qui vous permet de définir leur comportement.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Ne vous inquiétez pas si vous ne comprenez pas immédiatement le détail de cet exemple . Nous aborderons plus amplement les APIs tierces parties dans un futur article.</p>
+</div>
+
+<h3 id="Elles_ont_des_points_d'entrée_identifiables">Elles ont des points d'entrée identifiables</h3>
+
+<p>Lorsque vous utilisez une API, vous devez d'abord savoir quel est le point d'entrée de l'API. Dans l'API Geolocation, c'est assez simple — c'est la propriété {{domxref ("Navigator.geolocation")}} qui renvoie l'objet {{domxref ("Geolocation")}} du navigateur. Cet objet contient toutes les méthodes disponibles de géolocalisation à l'intérieur.</p>
+
+<p>L'API DOM (Document Object Model) a un point d'entrée encore plus simple — ses caractéristiques sont généralement trouvées attachées à l'objet {{domxref ("Document")}}, ou à toute instance d'un élément HTML que vous souhaitez affecter d'une manière ou d'une autre. Par exemple:</p>
+
+<pre class="brush: js">var em = document.createElement('em'); // créer un nouvel élément
+var para = document.querySelector('p'); // référence à un élément p existant
+em.textContent = 'Hello there!'; // fournir à em un contenu textuel
+para.appendChild(em); // incorporer un paragraphe dans em</pre>
+
+<p>D'autres API ont des points d'entrée légèrement plus complexes, impliquant souvent un contexte spécifique dans lequel le code de l'API doit être écrit. Par exemple, l'objet contextuel de l'API Canvas est créé en obtenant une référence à l'élément {{htmlelement ("canvas")}} sur lequel vous voulez dessiner, puis en appelant sa méthode {{domxref ("HTMLCanvasElement.getContext ()")}} :</p>
+
+<pre class="brush: js">var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');</pre>
+
+<p>Tout ce que nous voulons faire sur <code>canvas</code> est alors obtenu en appelant les propriétés et méthodes de l'objet conteneur (qui est une instance de {{domxref ("CanvasRenderingContext2D")}}). Par exemple :</p>
+
+<pre class="brush: js">Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez voir le code source de notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">démo « balles rebondissantes »</a> (ou voir <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">directement</a>).</p>
+</div>
+
+<h3 id="Elles_utilisent_des_événements_pour_réagir_aux_changements_d'état">Elles utilisent des événements pour réagir aux changements d'état</h3>
+
+<p>Nous avons déjà parlé des événements plus haut dans ce cours, dans notre article <a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a> — cet article explique en détail ce que sont les événements Web et leur utilisation dans votre code. Si vous ne vous êtes pas encore familiarisé avec le fonctionnement des événements de l'API Web côté client, vous devriez lire cet article avant de continuer.</p>
+
+<p>Certaines API Web ne détectent pas les événements, d'autres peuvent réagir à certains. Vous pouvez généralement trouver les propriétés des APIs qui permettent de lancer des fonctions lorsque les événements surviennent dans les sections "Gestionnaires d'événements" des documents de réference des APIs.</p>
+
+<p>À titre de simple exemple, les instances de l'objet <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (qui représentent une requête HTTP vers le serveur pour récupérer une ressource) ont un certain nombre d'événements disponibles. Par exemple, l'événement <code>load</code> est déclenché lorsqu'une réponse a été retournée avec succès avec la ressource demandée, et qu'elle devient alors disponible:</p>
+
+<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez voir le code source de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (ou le <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">voir directement</a>).</p>
+</div>
+
+<p>Les cinq premières lignes définissent l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur <code>XMLHttpRequest()</code>, ouvrent une requête HTTP <code>GET</code> pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la demande.</p>
+
+<p>La fonction gestionnaire <code>onload</code> indique ensuite ce qu'on fait avec la réponse. On sait que la réponse sera disponible dès que l'événement <code>load</code> est appelé (sauf si une erreur se produit), on sauvegarde donc la réponse — contenant le JSON renvoyé — dans la variable <code>superHeroes</code>, puis on la passe à deux fonctions différentes pour un traitement ultérieur.</p>
+
+<h3 id="Elles_ont_des_mécanismes_de_sécurité_supplémentaires_si_nécessaire">Elles ont des mécanismes de sécurité supplémentaires si nécessaire</h3>
+
+<p>Les caractéristiques des APIs Web sont soumises aux mêmes considérations de sécurité que JavaScript et des autres technologies Web (par exemple, la <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">same-origin policy</a>), mais elles disposent parfois de mécanismes de sécurité supplémentaires.</p>
+
+<p>Par exemple, certaines des APIs Web les plus modernes ne fonctionneront que sur les pages HTTPS car elles transmettent des données potentiellement sensibles (exemple: <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> et <a href="/fr/docs/Web/API/Push_API">Push</a>).</p>
+
+<p>En outre, certaines APIs Web demandent l'autorisation d'être activés par l'utilisateur une fois que les appels sont faits dans votre code. Par exemple, vous avez peut-être remarqué une boîte de dialogue comme celle-ci lors du chargement de notre exemple de <a href="/fr/docs/Web/API/Geolocation">Geolocation</a> précédent :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 415px;"></p>
+
+<p>De même, l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications </a>demande une autorisation:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Ces invites d'autorisation sont affichées aux utilisateurs pour des raisons de sécurité — si elles n'étaient pas en place, alors les sites pourraient commencer à suivre secrètement votre emplacement sans que vous le sachiez, ou à vous envoyer des messages indésirables avec beaucoup de notifications ennuyantes.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>À ce stade, vous devriez avoir une bonne idée de ce que sont les APIs, comment elles fonctionnent et ce que vous pouvez faire avec dans votre code JavaScript. Vous êtes probablement impatients de commencer à faire des choses amusantes avec des APIs spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le Document Object Model (DOM).</p>
+
+<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/apprendre/javascript/client-side_web_apis/manipulating_documents/index.html
new file mode 100644
index 0000000000..79911663f8
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -0,0 +1,332 @@
+---
+title: Manipuler des documents
+slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
+tags:
+  - API
+  - Apprendre
+  - Article
+  - Codage
+  - DOM
+  - Document Object Model
+  - Débutant
+  - JavaScript
+  - Navigator
+  - WebAPI
+  - Window
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Sa familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_principaux_composants_du_navigateur">Les principaux composants du navigateur</h2>
+
+<p>Les navigateurs web sont des logiciels très compliqués avec beaucoup de pièces mobiles, dont beaucoup qui ne peuvent pas être contrôlées ou manipulées par un développeur web en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou autre information sensible, et se connecter à des sites Web comme si c'était vous?</p>
+
+<p>Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire pleins de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'oeil au diagramme suivant, il représente les principaux composants du navigateur directemment impliqués dans l'affichage des pages web:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>La <em>fenêtre</em> est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet {{domxref("Window")}}. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un <a href="/fr/Apprendre/JavaScript/Building_blocks/Evènements">gestionnaire d'événément</a> à la fenêtre en cours, et plus encore.</li>
+ <li>La <em>navigateur</em> est l'état et l'identité du navigateur (le user-agent par exemple) tel qu'il existe sur le web. En JavaScript, il est représenté par l'objet {{domxref("Navigator")}}. Vous pouvez utiliser cet objet pour récupérer des choses telles que la géolocalisation, les préférences de langages de l'utilisateur, un flux vidéo en provenance de la webcam de l'utilisateur, etc.</li>
+ <li>Le <em>document</em> (accédé par le DOM dans les navigateurs) est la page en cours, chargée dans la fenêtre. Il est représenté en JavaScript par l'objet {{domxref("Document")}}. Vous pouvez utiliser cet objet pour retourner et manipuler le HTML et CSS qui composent le document, par exemple: récupérer un élément dans le DOM, changer son texte, appliquer de nouveaux style dessus, créer de nouveaux éléments et les ajouter à un élément comme enfant, ou même en supprimer.</li>
+</ul>
+
+<p>Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.</p>
+
+<h2 id="Le_modèle_objet_du_document_(Document_Object_Model)">Le modèle objet du document (Document Object Model)</h2>
+
+<p>Le document chargé dans l'onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer les informations de style ou pour corriger les éléments lorsque le HTML est invalide, tandis qu'un développeur peut l'utiliser pour manipuler la page une fois qu'elle a été chargée.</p>
+
+<p>Nous avons créé une simple page d'example, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">voir en direct</a>). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément {{htmlelement("section")}}, à l'intérieur duquel se situe une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple DOM example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;section&gt;
+        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
+        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
+      &lt;/section&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le DOM, d'autre part, ressemble à ça:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Ce diagramme du DOM a été créé en utilisant le <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> de Ian Hickson.</p>
+</div>
+
+<p>Vous pouvez voir ici que chaque élément et donnée texte dans le document a sa propre entrée dans l'arbre — appelé un <strong>noeud</strong> (node). Vous rencontrerez également différents termes pour décrire différents type de noeuds et leur position dans l'arbre par rapport à d'autres:</p>
+
+<ul>
+ <li><strong>Noeud élément (element node)</strong>: N'importe quel élément, tel qu'il existe dans le DOM..</li>
+ <li><strong>Racine (root)</strong>: Le noeud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du noeud <code>HTML</code> (d'autres langages de balilsage tels que SVG et XML auront des racines différentes).</li>
+ <li><strong>Enfant (child)</strong>: Un noeud <em>directement</em> à l'intérieur d'un autre noeud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> dans l'exemple ci-dessus.</li>
+ <li><strong>Descendant (descendent)</strong>: Un noeud <em>n'importe où</em> à l'intérieur d'un autre noeud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> mais aussi un de ses descendants. <code>IMG</code> n'est pas un enfant de <code>BODY</code>, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants.</li>
+ <li><strong>Parent (parent)</strong>: Un noeud qui a un autre noeud <em>directement</em> à l'intérieur. Par exemple, <code>BODY</code> est le parent de <code>SECTION</code>.</li>
+ <li><strong>Ancêtre (ancestor)</strong>: Un noeud qui a un autre noeud <em>n'importe où</em> à l'intérieur. Par exemple, <code>BODY</code> est l'ancêtre d'<code>IMG</code>.</li>
+ <li><strong>Frère (sibling)</strong>: Des noeuds qui ont le même parent. Par exemple, <code>IMG</code> et <code>P</code> sont frères.</li>
+ <li><strong>Texte (text node)</strong>: Noeud constitué par une chaîne de caractères.</li>
+</ul>
+
+<p>Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié CSS (ex. sélecteur descendant, sélecteur enfant).</p>
+
+<h2 id="Apprentissage_actif_Manipulations_basiques_du_DOM">Apprentissage actif: Manipulations basiques du DOM</h2>
+
+<p>Pour commencer l'apprentissage de la manipulation du DOM, commençons par la pratique.</p>
+
+<ol>
+ <li>Faites une copie locale de la page <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> et de l'<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">image</a> qui l'accompagne.</li>
+ <li>Ajoutez un élément <code>&lt;script&gt;&lt;/script&gt;</code> juste avant la balise fermante <code>&lt;/body&gt;</code>.</li>
+ <li>Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence vers cet élément dans une variable. À l'intérieur de votre élément <code>&lt;script&gt;</code>, ajoutez la ligne suivante:
+  <pre class="brush: js">var link = document.querySelector('a');</pre>
+ </li>
+ <li>Maintenant que nous avons une référence vers l'élément, nous pouvous commencer à le manipuler en utilisant les propriétés et les méthodes disponibles dessus (celles-ci sont définies sur les interfaces telles que {{domxref("HTMLAnchorElement")}} dans le cas d'un élément {{htmlelement("a")}}, et sur les interfaces plus génériques {{domxref("HTMLElement")}}, et {{domxref("Node")}} — qui représente tout noeud dans le DOM). Tout d'abord, nous allons changer le texte du lien en mettant à jour la valeur de la propriété {{domxref("Node.textContent")}}. Ajoutez la ligne suivante à la suite de la précédente:
+  <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre>
+ </li>
+ <li>Nous allons également changer l'URL où dirige le lien, pour qu'il ne dirige pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante au bas de votre JavaScript:
+  <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre>
+ </li>
+</ol>
+
+<div>
+<p>Notez que, comme beaucoup de choses en JavaScript, il y a plusieurs façons de sélectionner et récupérer une référence vers un élément dans une variable. {{domxref("Document.querySelector()")}} est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à <code>querySelector()</code> que nous avons utilisé plus tôt récupère le premier élément {{htmlelement("a")}} qui apparaît dans le document. Si vous vouliez récupérer plusieurs éléments, vous auriez pu utiliser {{domxref("Document.querySelectorAll()")}}, qui récupère tous les éléments du document qui correspondent au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un <a href="/fr/docs/Learn/JavaScript/First_steps/tableaux">tableau</a> appelé un NodeList.</p>
+
+<p>Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que:</p>
+
+<ul>
+ <li>{{domxref("Document.getElementById()")}}, qui sélectionne un élément avec un attribut <code>id</code> donné, par exemple <code>&lt;p id="myId"&gt;My paragraph&lt;/p&gt;</code>. L'ID est passé par paramètre, par exemple <code>var elementRef = document.getElementById('myId')</code>.</li>
+ <li>{{domxref("Document.getElementsByTagName()")}}, qui retourne un tableau contenant tous les éléments de la page ayant un type donné, par exemple tous les <code>&lt;p&gt;</code>, <code>&lt;a&gt;</code>, etc. Le type de l'élément est passé par paramètre, par exemple <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li>
+</ul>
+
+<p>Ces deux dernières méthodes fonctionnent même dans les anciens navigateurs, contrairement à <code>querySelector()</code>, mais sont beaucoup moins pratiques. Jetez un coup d'oeil aux docs et essayez d'en trouver d'autres!</p>
+</div>
+
+<h3 id="Créer_et_placer_de_nouveaux_noeuds">Créer et placer de nouveaux noeuds</h3>
+
+<p>Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.</p>
+
+<ol>
+ <li>De retour à notre exemple, commençons par récupérer une référence vers notre élément {{htmlelement("section")}} — ajoutez le code suivant au bas de votre script existant (faites de même avec les lignes qui suivront):
+  <pre class="brush: js">var sect = document.querySelector('section');</pre>
+ </li>
+ <li>Nous allons créer un nouveau paragraphe avec {{domxref("Document.createElement()")}} et lui donner un texte de la même manière que précédemment:
+  <pre class="brush: js">var para = document.createElement('p');
+para.textContent = 'We hope you enjoyed the ride.';</pre>
+ </li>
+ <li>Nous pouvons maintenant ajouter ce paragraphe en bas de la section en utilisant {{domxref("Node.appendChild()")}}:
+  <pre class="brush: js">sect.appendChild(para);</pre>
+ </li>
+ <li>Finallement, ajoutons un noeud texte au premier paragraphe, pour finir la phrase joliment. D'abord, créons un noeud texte avec {{domxref("Document.createTextNode()")}}:
+  <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre>
+ </li>
+ <li>Puis, après avoir récupéré un référence vers le premier paragraphe, ajoutons-y le noeud texte:
+  <pre class="brush: js">var linkPara = document.querySelector('p');
+linkPara.appendChild(text);</pre>
+ </li>
+</ol>
+
+<p>C'est le plus gros de ce dont vous aurez besoin pour ajouter des noeuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous verrons quelques exemples plus tard).</p>
+
+<h3 id="Déplacer_des_éléments">Déplacer des éléments</h3>
+
+<p>Il peut y avoir des moments où vous allez vouloir déplacer des noeuds. Si on voulait déplacer le premier paragraphe au bas de la section, on pourrait faire ça:</p>
+
+<pre class="brush: js">sect.appendChild(linkPara);</pre>
+
+<p>Cela déplace le paragraphe tout au bas de la section. On pourrait penser que cela ajouterait une copie, mais ce n'est pas le cas — <code>linkPara</code> est une référence vers un et un seul élément. Si on voulait ajouter une copie, on devrait utiliser {{domxref("Node.cloneNode()")}} à la place.</p>
+
+<h3 id="Supprimer_des_éléments">Supprimer des éléments</h3>
+
+<p>Supprimer des éléments est également plutôt simple, du moins quand on a une référence de l'élément et de son parent. Dans notre cas, on peut utiliser {{domxref("Node.removeChild()")}}, comme ceci:</p>
+
+<pre>sect.removeChild(linkPara);</pre>
+
+<p>Vous pourriez aussi vouloir supprimer un élément en n'ayant qu'une référence vers cet élément, et c'est souvent le cas. Il n'existe pas de méthode pour dire à un noeud de se supprimer, vous auriez donc à faire comme suit:</p>
+
+<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre>
+
+<p>Testez les lignes ci-dessus dans votre code.</p>
+
+<h3 id="Manipuler_le_style">Manipuler le style</h3>
+
+<p>Il est possible de manipuler le style CSS JavaScript de plusieurs manières.</p>
+
+<h4 id="Stylesheets">Stylesheets</h4>
+
+<p>Vous pouvez obtenir une liste de toutes les feuilles de style du document en utilisant {{domxref("Document.stylesheets")}}, qui retourne un tableau d'objets {{domxref("CSSStyleSheet")}}. Vous pouvez ainsi ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités car elles sont archaïques et il est difficule de manipuler le style avec. Il y a des moyens plus simples.</p>
+
+<h4 id="Propriété_style">Propriété style</h4>
+
+<p>La première façon consiste à ajouter des styles en ligne (inline style), directement sur les éléments que vous voulez styler. Pour ce faire, on utilise la propriété {{domxref("HTMLElement.style")}}, qui nous permet d'accéder au style en ligne des éléments du document. Vous pouvez définir les propriétés de cet objet pour mettre à jour directement le style en ligne d'un élément.</p>
+
+<ol>
+ <li>À titre d'exemple, essayez d'ajouter les lignes suivantes au bas de votre JavaScript:
+  <pre class="brush: js">para.style.color = 'white';
+para.style.backgroundColor = 'black';
+para.style.padding = '10px';
+para.style.width = '250px';
+para.style.textAlign = 'center';</pre>
+ </li>
+ <li>Rafraichissez la page et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez le paragraphe dans l'<a href="/fr/docs/Outils/Inspecteur">Inspecteur</a> du navigateur, vous verrez que que ces lignes sont en effet ajoutées comme style en ligne au document:
+  <pre class="brush: html">&lt;p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;"&gt;We hope you enjoyed the ride.&lt;/p&gt;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Notez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que la version CSS est liée par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Assurez-vous de ne pas les mélanger, sans quoi ça ne marchera pas.</p>
+</div>
+
+<h4 id="Attribut_classe">Attribut classe</h4>
+
+<p>Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons voir maintenant.</p>
+
+<ol>
+ <li>Supprimez l'exemple précédent de votre JavaScript (5 lignes).</li>
+ <li>Ajoutez ce qui suit de le {{htmlelement("head")}} de votre HTML:
+  <pre>&lt;style&gt;
+.highlight {
+  color: white;
+  background-color: black;
+  padding: 10px;
+  width: 250px;
+  text-align: center;
+}
+&lt;/style&gt;</pre>
+ </li>
+ <li>Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale — {{domxref("Element.setAttribute()")}}. Cette fonction prend deux paramètres, le nom de l'attribut que vous voulez définir sur l'élémént et la valeur que vous voulez lui attribuer. En l'occurence, nous allons définir la classe de l'élément à <code>highlight</code>:
+  <pre class="brush: js">para.setAttribute('class', 'highlight');</pre>
+ </li>
+ <li>Rafraichissez votre page, et vous pourrez constater qu'il n'y a aucun changement par rapport au dernier exemple. La seule différence est qu'on a utilisé une classe et non des styles en ligne.</li>
+</ol>
+
+<p>La méthode que vous utilisez ne dépend que de vous; chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus puriste — on ne mélange pas le CSS et le JavaScript. Alors que vous construirez des applications de plus en plus volumineuses et complexes, vous allez probablement utiliser la dernière méthode plus fréquemment, mais c'est à vous de décider.</p>
+
+<p>À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec JavaScript — autant l'écrire directement en HTML et ne pas utiliser JavaScript c'est plus complexe qu'HTML et vient avec quelques inconvénients, comme le fait que ce ne soit pas lisible par les moteurs de recherche.</p>
+
+<p>Dans les prochaines sections, nous verrons un exemple plus pratique de l'utilisation des APIs du DOM.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p>
+</div>
+
+<h2 id="Apprentissage_actif_Récupérer_des_informations_à_partir_de_l'objet_Window">Apprentissage actif: Récupérer des informations à partir de l'objet Window</h2>
+
+<p>Jusqu'à présent nous avons utilisé les fonctionnalités de {{domxref("Node")}} et {{domxref("Document")}} (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources. Repensez à notre démo <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> du dernier article — on y récupérait des données de géolocalisation pour afficher une carte de votre région. Vous devez juste vous assurer que vos données sont dans le bon format, et JavaScript rend cette tâche facile par rapport à de nombreux autres langages, puisqu'il est faiblement typé — par exemple, les nombres sont automatiquement convertis en chaîne de caractères quand on veut les afficher à l'écran.</p>
+
+<p>Dans cet exemple, nous allons résoudre un problème très commun — s'assurer que votre application est de la taille de la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utilisé pour les jeux, où vous voulez utiliser autant de place à l'écran que vous en avez pour jouer.</p>
+
+<ol>
+ <li>Pour commencer, faites une copie locale des fichiers de démo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Ouvrez le fichier html — vous verrez que nous avons un élément {{htmlelement("div")}} qui recouvre une petite partie de l'écran avec un motif de mosaïques. Nous allons l'utiliser pour représenter la surface de notre interface.</li>
+ <li>Premièrement, nous allons récupérer une référence au <code>&lt;div&gt;</code>, ainsi que la largeur et la hauteur de la fenêtre, et les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}. Ajoutez les lignes qui suivent à l'intérieur de l'élément {{htmlelement("script")}}:
+  <pre class="brush: js">var div = document.querySelector('div');
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;</pre>
+ </li>
+ <li>Ensuite, nous allons modifier dynamiquement la largeur et hauteur du <code>&lt;div&gt;</code> pour qu'elles soient égales à celles de la fenêtre. Ajoutez les lignes suivantes à la suite des précédentes:
+  <pre class="brush: js">div.style.width = WIDTH + 'px';
+div.style.height = HEIGHT + 'px';</pre>
+ </li>
+ <li>Sauvegardez et rafraichissez votre page — vous devriez désormais voir que le <code>&lt;div&gt;</code> est aussi grand que la fenêtre, quelle qu'en soit la taille. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater qu'il ne change pas de taille — nous ne définissons la taille qu'une seule fois.</li>
+ <li>Nous pouvons utiliser un gestionnaire d'événément pour que le <code>&lt;div&gt;</code> soit redimensionné à chaque fois que la fenêtre est redimensionnée. L'objet {{domxref("Window")}} a pour ça un événement disponible appelé <code>resize</code>, qui est déclenché lorsque la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code:
+  <pre class="brush: js">window.onresize = function() {
+  WIDTH = window.innerWidth;
+  HEIGHT = window.innerHeight;
+  div.style.width = WIDTH + 'px';
+  div.style.height = HEIGHT + 'px';
+}</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver notre<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html"> exemple de redimensionnement de la fenêtre terminé</a> sur Github (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p>
+</div>
+
+<h2 id="Apprentissage_actif_Une_liste_de_courses_dynamique">Apprentissage actif: Une liste de courses dynamique</h2>
+
+<p>Pour clore l'article, nous aimerions vous proposer un petit challenge — nous voulons créer une simple liste de courses qui nous permette d'ajouter des items à la liste dynamiquement en utilisant un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton:</p>
+
+<ul>
+ <li>La valeur du champ doit être ajoutée à la liste.</li>
+ <li>Chaque élément de la liste doit avoir un bouton qui, quand il est pressé, supprime cet élément de la liste.</li>
+ <li>Le champ doit être vidé et prendre le focus pour que vous puissez entrer un autre élément directement.</li>
+</ul>
+
+<p>La démo terminée doit ressembler à ça:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p>
+
+<p>Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.</p>
+
+<ol>
+ <li>Tout d'abord, téléchargez une copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Vous verrez qu'il contient un peu de CSS, un label, champ et bouton, une liste vide et un élément {{htmlelement("script")}}. Vous devrez apporter toutes vos modifications à l'intérieur du script.</li>
+ <li>Créez trois variables, contenant des références à la liste {{htmlelement("ul")}}, champ {{htmlelement("input")}}, et bouton {{htmlelement("button")}}.</li>
+ <li>Créez une <a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">fonction</a> qui est déclenchée lorsqu'on clique sur le bouton.</li>
+ <li>À l'intérieur du corps de la fonction, commencez par stoquer la <a href="/fr/docs/Web/API/HTMLInputElements">valeur</a> (propriété <code>value</code>) du champ dans une variable.</li>
+ <li>Ensuite, videz le champ en définissant sa valeur à une chaîne vide — <code>''</code>.</li>
+ <li>Créez trois nouveaux éléments — un élément de liste {{htmlelement('li')}}, un {{htmlelement('span')}} et {{htmlelement('button')}}, et stockez-les dans des variables.</li>
+ <li>Ajoutez le <code>&lt;span&gt;</code> et <code>&lt;button&gt;</code> comme enfant du <code>&lt;li&gt;</code>.</li>
+ <li>Définissez le contenu du <code>&lt;span&gt;</code> à la valeur du champ que vous avez récupéré précedemment, et définissez le contenu du boutton à "Supprimer".</li>
+ <li>Ajoutez le <code>&lt;li&gt;</code> comme enfant de la liste.</li>
+ <li>Ajoutez un gestionnaire d'événément pour le bouton "Supprimer", pour que quand il est cliqué, le <code>&lt;li&gt;</code> dans lequel il se situe est supprimé.</li>
+ <li>Finalement, utilisez la méthode {{domxref("HTMLElement.focus")}} pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain élément.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous êtes vraiment bloqué, vous pouvez regarder notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p>
+</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>Nous avons finit de voir la manipulation du document par le DOM. À ce stade, vous devriez comprendre quels sont les composants importants du navigateur web en ce qui concerne le contrôle des documents et l'expérience utilisateur sur le web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Il y a beaucoup plus à voir que ce qui est couvert dans cet article. Jetez un coup d'oeil à nos références pour en découvrir davantage:</p>
+
+<ul>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li>
+</ul>
+
+<p>(Voir notre <a href="/fr/docs/Web/API">Référence Web API</a> pour une liste complètes des APIs web documentées sur MDN!)</p>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
+</div>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/apprendre/javascript/client-side_web_apis/third_party_apis/index.html
new file mode 100644
index 0000000000..f8e36b2078
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/third_party_apis/index.html
@@ -0,0 +1,440 @@
+---
+title: API tierces
+slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs
+tags:
+  - API
+  - Apprendre
+  - Débutant
+translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « <em>third-party API</em> ») et nous illustrerons certains cas d'usage pour ces API tierces.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/docs/Apprendre/JavaScript/Building_blocks"> blocs de construction</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction">les bases des API côté client</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Comprendre le fonctionnement des API tierces et comment les utiliser pour ajouter des fonctionnalités à ses sites / applications.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest-ce_quune_API_tierce">Qu'est-ce qu'une API tierce ?</h2>
+
+<p>Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.</p>
+
+<p>Regardons <a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/">cet exemple qui utilise l'API MapQuest</a> et voyons avec lui les différences entre les API tierces et celles du navigateur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">récupérer l'ensemble des exemples de code</a> en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section.</p>
+</div>
+
+<h3 id="Elles_sont_situées_sur_des_serveurs_tiers">Elles sont situées sur des serveurs tiers</h3>
+
+<p>Les API fournies par le navigateur sont construites <strong>dans</strong> le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Comment_les_API_fonctionnent-elles"> que nous avons vu dans cet article introductif</a> s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement :</p>
+
+<pre class="brush: js">const audioCtx = new AudioContext();
+  ...
+const audioElement = document.querySelector('audio');
+  ...
+const audioSource = audioCtx.createMediaElementSource(audioElement);
+// etc.</pre>
+
+<p>En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne :</p>
+
+<pre class="brush: js">&lt;script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"&gt;&lt;/script&gt;
+&lt;link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/&gt;</pre>
+
+<p>On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation :</p>
+
+<pre class="brush: js">var L;
+
+var map = L.mapquest.map('map', {
+  center: [53.480759, -2.242631],
+  layers: L.mapquest.tileLayer('map'),
+  zoom: 12
+});</pre>
+
+<p>Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode <code>mapquest.map()</code> qui prend comme argument :</p>
+
+<ul>
+ <li>l'identifiant (la valeur de l'attribut <code>id</code>) d'un élément {{htmlelement("div")}} dans lequel on souhaite afficher la carte (ici, c'est <code>"map"</code>)</li>
+ <li>un objet indiquant les options pour la carte qu'on souhaite afficher. Ici, on indique les coordonnées du centre de la carte, le pavage utilisé (ici on utilise la méthode <code>mapquest.tileLayer()</code> ainsi que le niveau de zoom.</li>
+</ul>
+
+<p>C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs#A_RESTful_API_%E2%80%94_NYTimes">API REST (ou <em>RESTful APIs</em> en anglais) et nous les abordons plus bas dans l'article</a>.</p>
+</div>
+
+<h3 id="Des_clés_dAPI_sont_nécessaires_pour_les_utiliser">Des clés d'API sont nécessaires pour les utiliser</h3>
+
+<p>Dans les navigateurs, <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Elles_ont_des_mécanismes_de_sécurité_supplémentaires_si_nécessaire">comme nous l'avons vu dans le premier article</a>, les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites.</p>
+
+<p>Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers.</p>
+
+<p>Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci :</p>
+
+<pre>L.mapquest.key = 'VOTRE-CLE-D-API-ICI';</pre>
+
+<p>Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple.</p>
+</div>
+
+<p>Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire.</p>
+
+<p>L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé.</p>
+
+<h2 id="Étendre_lexemple_«_MapQuest_»">Étendre l'exemple « MapQuest »</h2>
+
+<p>Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API.</p>
+
+<ol>
+ <li>
+  <p>Pour commencer cette section, copiez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/starter-file.html">le fichier initial</a> dans un nouveau répertoire. Si vous avez déjà <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">cloné le dépôt des exemples</a>, vous disposez déjà d'une copie située sous le répertoire <em>javascript/apis/third-party-apis/mapquest</em>.</p>
+ </li>
+ <li>
+  <p>Ensuite, <a href="https://developer.mapquest.com/">rendez-vous sur le site MapQuest pour les développeurs</a>, créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide).</p>
+ </li>
+ <li>Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre.</li>
+</ol>
+
+<h3 id="Modifier_le_type_de_la_carte">Modifier le type de la carte</h3>
+
+<p>L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier :</p>
+
+<pre class="brush: js">layers: L.mapquest.tileLayer('map')</pre>
+
+<p>Ici, vous pouvez changer <code>'map'</code> en <code>'hybrid'</code> afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/">la page de référence de la méthode <code>tileLayer()</code></a>.</p>
+
+<h3 id="Ajouter_différents_contrôles">Ajouter différents contrôles</h3>
+
+<p>Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthode<code>map.addControl()</code>. Ajoutez la ligne suivante à l'intérieur du gestionnaire <code>window.onload</code> :</p>
+
+<pre class="brush: js">map.addControl(L.mapquest.control());</pre>
+
+<p>La méthode <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/"><code>mapquest.control()</code></a> crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété <code>position</code> dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple :</p>
+
+<pre class="brush: js">  map.addControl(L.mapquest.control({ position: 'bottomright' }));</pre>
+
+<p>D'autres types de contrôle sont disponibles comme <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/">mapquest.searchControl()</a></code> et <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/">mapquest.satelliteControl()</a></code>. Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet.</p>
+
+<h3 id="Ajouter_un_marqueur_personnalisé">Ajouter un marqueur personnalisé</h3>
+
+<p>Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode <code><a href="https://leafletjs.com/reference-1.3.0.html#marker">L.marker()</a></code>  (documentée dans la documentation de Leaflet.js). Dans <code>window.onload</code>, vous pouvez ajouter le fragment de code suivante <code>window.onload</code> :</p>
+
+<pre class="brush: js">L.marker([53.480759, -2.242631], {
+  icon: L.mapquest.icons.marker({
+    primaryColor: '#22407F',
+    secondaryColor: '#3B5998',
+    shadow: true,
+    size: 'md',
+    symbol: 'A'
+  })
+})
+.bindPopup('Ici se trouve Manchester !')
+.addTo(map);</pre>
+
+<p>Comme on peut le voir ici, la méthode peut prendre deux paramètres :</p>
+
+<ul>
+ <li>le premier qui contient les coordonnées géographiques de l'emplacement où afficher le pointeur sous la forme d'un tableau</li>
+ <li>le deuxième qui est un objet d'options contenant une propriété <code>icon</code> qui définit l'icône à afficher à cet emplacement.</li>
+</ul>
+
+<p>L'icône est définie via un appel à la méthode <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/">mapquest.icons.marker()</a></code> à laquelle on fournit des informations telles que la couleur et la taille du marqueur.</p>
+
+<p>Après l'appel à la première méthode, on enchaîne avec un appel avec <code>.bindPopup('Ici se trouve Manchester !')</code>, qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur.</p>
+
+<p>Enfin, on chaîne un appel <code>.addTo(map)</code> pour ajouter le marqueur sur la carte.</p>
+
+<p>Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/expanded-example.html">expanded-example.html</a>.</p>
+</div>
+
+<h2 id="Quid_de_Google_Maps">Quid de Google Maps ?</h2>
+
+<p>Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons :</p>
+
+<ul>
+ <li>L'utilisation est beaucoup plus simple. Pour les API Google, il faut créer un compte Google, se connecter à la <a href="https://console.cloud.google.com">Google Cloud Platform Console</a> pour créer des clés d'API avec une procédure assez complexe.</li>
+ <li>Pour utiliser l'API <a href="https://cloud.google.com/maps-platform/">Google Maps</a> et bien qu'un usage léger soit gratuit, il est nécessaire de fournir une carte de crédit à des fins de facturation et nous pensions que cela n'était pas acceptable pour un tel tutoriel.</li>
+ <li>Nous souhaitions montrer que des alternatives étaient disponibles.</li>
+</ul>
+
+<h2 id="Une_approche_pour_utiliser_les_API_tierces">Une approche pour utiliser les API tierces</h2>
+
+<h3 id="Une_API_REST_du_NYTimes">Une API REST du NYTimes</h3>
+
+<p>Prenons un autre exemple d'API, l'API du <a href="https://developer.nytimes.com">New York Times</a>. Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent.</p>
+
+<p>Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces.</p>
+
+<h3 id="Trouver_la_documentation">Trouver la documentation</h3>
+
+<p>Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : <a href="https://developer.nytimes.com/">https://developer.nytimes.com/</a>.</p>
+
+<h3 id="Obtenir_une_clé_de_développement">Obtenir une clé de développement</h3>
+
+<p>La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de <a href="https://developer.nytimes.com/get-started">https://developer.nytimes.com/get-started</a>.</p>
+
+<ol>
+ <li>
+  <p>Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create").</p>
+ </li>
+ <li>
+  <p>Vous pouvez alors récupérer la clé d'API à partir de la page suivante.</p>
+ </li>
+ <li>
+  <p>Pour construire le socle de notre exemple, copiez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html">nytimes_start.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css">nytimes.css</a> dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">cloné le dépôt des exemples</a>, vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire <em>javascript/apis/third-party-apis/nytimes</em>. L'élément <code>&lt;script&gt;</code> contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires.</p>
+ </li>
+</ol>
+
+<p>Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14821/nytimes-search.png" style="border-style: solid; border-width: 1px; display: block; height: 374px; margin: 0px auto; width: 700px;"></p>
+
+<h3 id="Connecter_lAPI_à_son_application">Connecter l'API à son application</h3>
+
+<p>Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre <a href="/fr/docs/Web/HTTP/Méthode/GET">GET</a> à chaque requête.</p>
+
+<ol>
+ <li>
+  <p>Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt :</p>
+
+  <pre class="brush: js">var key = ' ... ';</pre>
+ </li>
+ <li>
+  <p>Ajoutez la ligne suivante sous le commentaire <code>// Event listeners to control the functionality</code>. Cette ligne permet d'exécuter la fonction <code>submitSearch()</code> lorsque le formulaire est envoyé (quand on presse le bouton).</p>
+
+  <pre class="brush: js">searchForm.addEventListener('submit', submitSearch);</pre>
+ </li>
+ <li>
+  <p>Sous cette nouvelle ligne, ajoutons les fonctions <code>submitSearch()</code> et <code>fetchResults()</code> :</p>
+
+  <pre class="brush: js">function submitSearch(e) {
+  pageNumber = 0;
+  fetchResults(e);
+}
+
+function fetchResults(e) {
+  // On utilise preventDefault() afin d'éviter
+  // l'envoie vers notre serveur et le rafraîchissement
+  // de la page
+  e.preventDefault();
+
+  // On compose l'URL
+  url = baseURL + '?api-key=' + key + '&amp;page=' + pageNumber + '&amp;q=' + searchTerm.value <span class="blob-code-inner"><span class="pl-s1"><span class="pl-k x">+</span><span class="x"> </span><span class="pl-s"><span class="pl-pds x">'</span><span class="x">&amp;fq=document_type:("article")</span><span class="pl-pds x x-last">'</span></span></span></span>;
+
+  if(startDate.value !== '') {
+    url += '&amp;begin_date=' + startDate.value;
+  };
+
+  if(endDate.value !== '') {
+    url += '&amp;end_date=' + endDate.value;
+  };
+
+}</pre>
+ </li>
+</ol>
+
+<p><code>submitSearch()</code> commence par réinitialiser le nombre de page à 0 puis appelle <code>fetchResults()</code>. Cette fonction commence par appeler <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :</p>
+
+<ul>
+ <li>L'URL de base (telle que fournie par la variable <code>baseURL</code>).</li>
+ <li>La clé d'API qui a été passée au paramètre d'URL  <code>api-key</code> et dont la valeur dans notre script est fournie par la variable <code>key</code>.</li>
+ <li>Le nombre de pages est fourni dans l'URL avec le paramètre <code>page</code> et provient de la variable <code>pageNumber</code> dans notre script.</li>
+ <li>Le terme de la recherche est fourni dans l'URL avec le paramètre <code>q</code> et provient du texte <code>searchTerm</code> fourni par l'élément {{htmlelement("input")}}.</li>
+ <li>Le type de document qu'on souhaite obtenir dans les résultats est une expression passée via le paramètre <code>fq</code> de l'URL. Ici, on souhaite obtenir les articles.</li>
+</ul>
+
+<p>Après, on utilise un ensemble d'instructions <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if()</a></code> pour vérifier si des valeurs ont été fournies pour les champs <code>startDate</code> et <code>endDate</code> dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL <code>begin_date</code> et/ou <code>end_date</code>.</p>
+
+<p>Si on prend un exemple d'URL complète ainsi construite :</p>
+
+<pre>https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&amp;page=0&amp;q=cats
+&amp;<span class="blob-code-inner"><span class="pl-s1"><span class="pl-s"><span class="x">fq=document_type:("article")</span></span></span></span>&amp;begin_date=20170301&amp;end_date=20170312 </pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter <a href="https://developer.nytimes.com/">la documentation du NYTimes</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut <code>required</code>. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut <code>pattern="[0-9]{8}"</code>). Voir la page sur <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">la validation des données d'un formulaire</a> pour en savoir plus sur ce fonctionnement.</p>
+</div>
+
+<h3 id="Récupérer_des_données_depuis_lAPI">Récupérer des données depuis l'API</h3>
+
+<p>Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'<a href="/fr/docs/Web/API/Fetch_API/Using_Fetch">API Fetch</a>.</p>
+
+<p>Dans la fonction <code>fetchResults()</code>, juste avant l'accolade de fin, ajoutez le fragment de code suivant :</p>
+
+<pre class="brush: js">// On utilise fetch() pour envoyer la requête à l'API
+fetch(url).then(function(result) {
+  return result.json();
+}).then(function(json) {
+  displayResults(json);
+});</pre>
+
+<p>On envoie la requête en passant la variable <code>url</code> comme paramètre à la fonction <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> puis on convertit le corps de la réponse avec la fonction <code><a href="/fr/docs/Web/API/Body/json">json()</a></code> puis on passe le JSON ainsi obtenu à la fonction <code>displayResults()</code> afin que les données puissent être affichées dans l'interface utilisateur.</p>
+
+<h3 id="Afficher_les_données">Afficher les données</h3>
+
+<p>Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction <code>fetchResults()</code>.</p>
+
+<pre class="brush: js">function displayResults(json) {
+  while (section.firstChild) {
+      section.removeChild(section.firstChild);
+  }
+
+  var articles = json.response.docs;
+
+  if(articles.length === 10) {
+    nav.style.display = 'block';
+  } else {
+    nav.style.display = 'none';
+  }
+
+  if(articles.length === 0) {
+    var para = document.createElement('p');
+    para.textContent = 'Aucun résultat reçu.'
+    section.appendChild(para);
+  } else {
+    for(var i = 0; i &lt; articles.length; i++) {
+      var article = document.createElement('article');
+      var heading = document.createElement('h2');
+      var link = document.createElement('a');
+      var img = document.createElement('img');
+      var para1 = document.createElement('p');
+      var para2 = document.createElement('p');
+      var clearfix = document.createElement('div');
+
+      var current = articles[i];
+      console.log(current);
+
+      link.href = current.web_url;
+      link.textContent = current.headline.main;
+      para1.textContent = current.<span class="blob-code-inner"><span class="pl-s1"><span class="pl-smi x x-first x-last">snippet</span></span></span>;
+      para2.textContent = 'Mots-clés : ';
+      for(var j = 0; j &lt; current.keywords.length; j++) {
+        var span = document.createElement('span');
+        span.textContent += current.keywords[j].value + ' ';
+        para2.appendChild(span);
+      }
+
+      if(current.multimedia.length &gt; 0) {
+        img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
+        img.alt = current.headline.main;
+      }
+
+      clearfix.setAttribute('class','clearfix');
+
+      article.appendChild(heading);
+      heading.appendChild(link);
+      article.appendChild(img);
+      article.appendChild(para1);
+      article.appendChild(para2);
+      article.appendChild(clearfix);
+      section.appendChild(article);
+    }
+  }
+}</pre>
+
+<p>Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :</p>
+
+<ul>
+ <li>La boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a></code> est utilisée afin de supprimer tout le contenu d'un élément du DOM. Dans ce cas, on enlève ce qu'il y a dans l'élément {{htmlelement("section")}}. On teste si la <code>&lt;section&gt;</code> possède un élément fils et si c'est le cas, on retire le premier, ainsi de suite jusqu'à ce que l'élément <code>&lt;section&gt;</code> n'ait plus d'éléments fils.</li>
+ <li>Ensuite, on renseigne la variable <code>articles</code> avec <code>json.response.docs</code> : le tableau contenant les objets qui représentent les articles renvoyés par la recherche. Ce renommage sert uniquement à rendre le code plus simple.</li>
+ <li>Le premier bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if()</a></code> vérifie si 10 ont été renvoyés par l'API  (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination <em>10 articles précédents</em>/<em>10 articles suivants</em>. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section.</li>
+ <li>Le bloc <code>if()</code> suivant sert à vérifier si aucun article n'a été renvoyé. Lorsqu'il n'y a aucun résultat, on crée un élément {{htmlelement("p")}} qui affiche le texte "Aucun résultat reçu" puis on insère ce paragraphe dans l'élément <code>&lt;section&gt;</code>.</li>
+ <li>Si des articles sont renvoyés, on commence par créer les éléments qu'on souhaite utiliser afin de les afficher puis on insère le contenu dans chaque puis on insère ces éléments dans le DOM. Pour connaître les propriétés des objets obtenues via l'API, nous avons consulté la référence de l'API <em>Article Search</em> (voir <a href="https://developer.nytimes.com/apis">les API NYTimes</a>). La plupart de ces opérations sont assez parlantes mais voici quelques-unes qui sont notables :
+  <ul>
+   <li>On utilise une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> (<code>for(var j = 0; j &lt; current.keywords.length; j++) { ... }</code> ) pour parcourir les mots-clés associés à chaque article et on insère ces mots-clés dans des éléments {{htmlelement("span")}} à l'intérieur d'un paragraphe <code>&lt;p&gt;</code>. De cette façon, nous pourrons plus facilement mettre en forme ces mots-clés.</li>
+   <li>On utilise un bloc <code>if()</code> (<code>if(current.multimedia.length &gt; 0) { ... }</code>) afin de voir si l'article possède des images associées. Si c'est le cas, on affiche la première image qui existe.</li>
+   <li>On applique la classe <code>"clearfix"</code> à l'élément <code>&lt;div&gt;</code> afin de pouvoir le dégager.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Câbler_les_boutons_pour_la_pagination">Câbler les boutons pour la pagination</h3>
+
+<p>Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable <code>pageNumber</code> puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL <code>page</code>. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre <code>page</code> vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre <code>page</code> vaut 1 et ainsi de suite.</p>
+
+<p>En connaissant cela, on peut écrire une fonction pour gérer la pagination.</p>
+
+<ol>
+ <li>
+  <p>Après l'appel existant à <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, on ajoute les deux prochaines lignes qui appelleront les fonctions <code>nextPage()</code> et <code>previousPage()</code> lorsqu'on cliquera sur le bouton correspondant :</p>
+
+  <pre class="brush: js">nextBtn.addEventListener('click', nextPage);
+previousBtn.addEventListener('click', previousPage);</pre>
+ </li>
+ <li>
+  <p>À la suite, on définit le corps de ces fonctions :</p>
+
+  <pre class="brush: js">function nextPage(e) {
+  pageNumber++;
+  fetchResults(e);
+};
+
+function previousPage(e) {
+  if(pageNumber &gt; 0) {
+    pageNumber--;
+  } else {
+    return;
+  }
+  fetchResults(e);
+};</pre>
+
+  <p>La première fonction est assez simple : on incrémente la variable <code>pageNumber</code> puis on exécute à nouveau la fonction <code>fetchResults()</code> afin d'afficher les prochains résultats.</p>
+
+  <p>La seconde fonction est similaire, mais on prend la précaution de vérifier que <code>pageNumber</code> ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque <code>pageNumber</code> vaut déjà 0, on sort de la fonction avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/return">return</a></code> afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau).</p>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Vous pouvez trouver <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/index.html">l'exemple complet sur l'API du NYTimes sur GitHub</a>.</p>
+</div>
+
+<h2 id="Exemple_dutilisation_de_lAPI_YouTube">Exemple d'utilisation de l'API YouTube</h2>
+
+<p>Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">exemple de recherche de vidéo YouTube</a>. Dans cet exemple, on utilise deux API :</p>
+
+<ul>
+ <li><a href="https://developers.google.com/youtube/v3/docs/">L'API YouTube Data</a> qui permet de chercher parmi les vidéos YouTube et de renvoyer des résultats.</li>
+ <li><a href="https://developers.google.com/youtube/iframe_api_reference">L'API YouTube IFrame Player</a> afin d'afficher les vidéos recherchées dans un lecteur vidéo, affiché dans une <em>iframe</em> pour les regarder.</li>
+</ul>
+
+<p>Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14823/youtube-example.png" style="border-style: solid; border-width: 1px; display: block; height: 389px; margin: 0px auto; width: 700px;"></p>
+
+<p>Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">consulter le code source</a> qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Une introduction aux API Web</a></li>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler les documents</a></li>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">Les API tierces</a></li>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des graphiques</a></li>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Les API pour l'audio et la vidéo</a></li>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/apprendre/javascript/client-side_web_apis/video_and_audio_apis/index.html
new file mode 100644
index 0000000000..358458db64
--- /dev/null
+++ b/files/fr/apprendre/javascript/client-side_web_apis/video_and_audio_apis/index.html
@@ -0,0 +1,518 @@
+---
+title: APIs vidéo et audio
+slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
+tags:
+  - API
+  - Apprendre
+  - Article
+  - Audio
+  - Codage
+  - Débutant
+  - Guide
+  - JavaScript
+  - Video
+translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<p class="summary">HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Les bases du JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques Javascript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets</a>), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux APIs web</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de audio et vidéo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_balises_HTML5_video_et_audio">Les balises HTML5 video et audio</h2>
+
+<p>Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans <a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a>, une implémentation habituelle ressemble à ça :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place &lt;a href="rabbit320.mp4"&gt;un lien vers la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Cela crée un lecteur vidéo à l'intérieur du navigateur:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}</p>
+
+<p>Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}</p>
+
+<p>Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.</p>
+
+<p>Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut <code>controls</code>) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.</p>
+
+<h2 id="L'API_HTMLMediaElement">L'API HTMLMediaElement</h2>
+
+<p>L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.</p>
+
+<p>Notre exemple final ressemblera (et fonctionnera) comme ceci:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}</p>
+
+<h3 id="Débuter">Débuter</h3>
+
+<p>Pour commencer avec cet exemple, <a href="https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip">télechargez notre media-player-start.zip</a> et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans <code>javascript/apis/video-audio/start/</code>.</p>
+
+<p>Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.</p>
+
+<h4 id="Exploration_du_HTML">Exploration du HTML</h4>
+
+<p>Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles:</p>
+
+<pre class="brush: html">&lt;div class="player"&gt;
+  &lt;video controls&gt;
+    &lt;source src="video/sintel-short.mp4" type="video/mp4"&gt;
+    &lt;source src="video/sintel-short.mp4" type="video/webm"&gt;
+    &lt;!-- fallback contenu ici --&gt;
+  &lt;/video&gt;
+  &lt;div class="controls"&gt;
+    &lt;button class="play" data-icon="P" aria-label="bascule lecture pause"&gt;&lt;/button&gt;
+    &lt;button class="stop" data-icon="S" aria-label="stop"&gt;&lt;/button&gt;
+    &lt;div class="timer"&gt;
+      &lt;div&gt;&lt;/div&gt;
+      &lt;span aria-label="timer"&gt;00:00&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;button class="rwd" data-icon="B" aria-label="retour arrière"&gt;&lt;/button&gt;
+    &lt;button class="fwd" data-icon="F" aria-label="avance rapide"&gt;&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<ul>
+ <li>Le lecteur complet est englobé dans une balise {{htmlelement("div")}} pour pouvoir appliquer du style sur le bloc complet si nécessaire.</li>
+ <li>La balise {{htmlelement("video")}} contient deux éléments {{htmlelement("source")}} pour permettre la lecture du média selon les capacités de chaque navigateur.</li>
+ <li>La partie <em>controls</em> du HTML est la plus intéressante:
+  <ul>
+   <li>Il contient 4 {{htmlelement("button")}} : lecture/mise en pause, stop, retour arrière et avance rapide.</li>
+   <li>Chaque <code>&lt;button&gt;</code> a un nom de classe, un attribut <code>data-icon</code> (pour définir l'icône affichée), et un attribut <code>aria-label</code> (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut <code>aria-label</code> est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus.</li>
+   <li>Il y a également un élément {{htmlelement("div")}}, qui affiche le temps écoulé quand la vidéo est en cours de lecture. Pour s'amuser, nous avons mis deux mécanismes en place — un {{htmlelement("span")}} qui affiche le temps écoulé en minutes/secondes, et un autre <code>&lt;div&gt;</code> pour afficher une barre de progrès. Pour vous faire une idée du produit final, vous pouvez jeter un d'oeil à <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">la version finie</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Exploration_du_CSS">Exploration du CSS</h4>
+
+<p>Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de <code>.controls</code>:</p>
+
+<pre class="brush: css">.controls {
+  visibility: hidden;
+  opacity: 0.5;
+  width: 400px;
+  border-radius: 10px;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  margin-left: -200px;
+  background-color: black;
+  box-shadow: 3px 3px 5px black;
+  transition: 1s all;
+  display: flex;
+}
+
+.player:hover .controls, player:focus .controls {
+  opacity: 1;
+}
+</pre>
+
+<ul>
+ <li>Nous commençons par définir la propriété {{cssxref("visibility")}} à <code>hidden</code>. Plus tard dans notre JavaScript, nous le rendrons <code>visible</code>, et supprimerons l'attribut <code>controls</code> de l'élément <code>&lt;video&gt;</code>. Ainsi, si pour une raison quelconque le JavaScript ne se charge pas, les utilisateurs peuvent toujours utiliser la vidéo avec les contrôles natifs.</li>
+ <li>Nous donnons aux propriétés une {{cssxref("opacity")}} de 0.5 par défaut, pour qu'ils ne soient pas génants lorsqu'on veut regarder la vidéo. Ce n'est qu'en passant la souris sur le lecteur que les contrôles sont affichés en pleine opacité.</li>
+ <li>Ne plaçons les boutons à l'intérieur du div en utilisant Flexbox ({{cssxref("display")}}: flex), c'est plus simple comme ça.</li>
+</ul>
+
+<p>Ensuite, voyons les icônes des boutons:</p>
+
+<pre class="brush: css">@font-face {
+   font-family: 'HeydingsControlsRegular';
+   src: url('fonts/heydings_controls-webfont.eot');
+   src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
+        url('fonts/heydings_controls-webfont.woff') format('woff'),
+        url('fonts/heydings_controls-webfont.ttf') format('truetype');
+   font-weight: normal;
+   font-style: normal;
+}
+
+button:before {
+  font-family: HeydingsControlsRegular;
+  font-size: 20px;
+  position: relative;
+  content: attr(data-icon);
+  color: #aaa;
+  text-shadow: 1px 1px 0px black;
+}</pre>
+
+<p>Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application.</p>
+
+<p>Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton:</p>
+
+<ul>
+ <li>Nous utilisons le sélecteur {{cssxref("::before")}} pour afficher le contenu au début de chaque élément {{htmlelement("button")}}.</li>
+ <li>Nous utilisons la propriété {{cssxref("content")}} pour que le contenu à afficher soit égal au contenu de l'attribut <code><a href="/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">data-icon</a></code>. Dans le cas du bouton play par exemple, <code>data-icon</code> contient un "P" majuscule.</li>
+ <li>Nous apliquons la police web personnalisée au bouton en utilisant {{cssxref("font-family")}}. Dans cette police, "P" est une icône "play", donc le bouton play a une icône "play" affichée dedans.</li>
+</ul>
+
+<p>Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}.</p>
+
+<p>Dernier point mais non des moindres, le CSS du décompte:</p>
+
+<pre class="brush: css">.timer {
+  line-height: 38px;
+  font-size: 10px;
+  font-family: monospace;
+  text-shadow: 1px 1px 0px black;
+  color: white;
+  flex: 5;
+  position: relative;
+}
+
+.timer div {
+  position: absolute;
+  background-color: rgba(255,255,255,0.2);
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 38px;
+  z-index: 2;
+}
+
+.timer span {
+  position: absolute;
+  z-index: 3;
+  left: 19px;
+}</pre>
+
+<ul>
+ <li>Nous donnons au <code>&lt;div&gt;</code> <code>.timer</code> la propriété <code>flex: 5</code>, pour qu'il occupe la plus grande partie de la barre de contrôle en largeur. Nous ajoutons également {{cssxref("position")}}<code>: relative</code>, pour que les éléments à l'intérieur puissent être positionnés relativement à ses dimensions et non à celles de l'élément {{htmlelement("body")}}.</li>
+ <li>Le <code>&lt;div&gt;</code> interne est positionné en absolu pour être situé au-dessus du <code>&lt;div&gt;</code> externe. On lui donne également une largeur initiale de 0, de sorte qu'on ne le voie pas du tout. Au fur et à mesure de la lecture de la vidéo, la largeur sera augmentée via JavaScript.</li>
+ <li>Le <code>&lt;span&gt;</code> est également positionné en absolu pour être situé sur le côté gauche de la barre de progrès.</li>
+ <li>Nous donnons au <code>&lt;div&gt;</code> et au <code>&lt;span&gt;</code> le {{cssxref("z-index")}} approprié pour que les données soient visibles — qu'un élément n'en cache pas un autre.</li>
+</ul>
+
+<h3 id="Implémenter_le_JavaScript">Implémenter le JavaScript</h3>
+
+<p>Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent.</p>
+
+<ol>
+ <li>
+  <p>Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons <code>custom-player.js</code>.</p>
+ </li>
+ <li>
+  <p>En haut de ce fichier, insérez le code suivant:</p>
+
+  <pre class="brush: js">var media = document.querySelector('video');
+var controls = document.querySelector('.controls');
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+var rwd = document.querySelector('.rwd');
+var fwd = document.querySelector('.fwd');
+
+var timerWrapper = document.querySelector('.timer');
+var timer = document.querySelector('.timer span');
+var timerBar = document.querySelector('.timer div');
+</pre>
+
+  <p>Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes:</p>
+
+  <ul>
+   <li>L'élément <code>&lt;video&gt;</code>, et la barre de contrôle.</li>
+   <li>Les boutons play/pause, stop, retour arrière, et avance rapide.</li>
+   <li>Le <code>&lt;div&gt;</code> externe, le <code>&lt;span&gt;</code> qui décompte le temps écoulé, et le <code>&lt;div&gt;</code> interne qui affiche le progrès de la vidéo.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Ensuite, insérez ce qui suit en bas de votre code:</p>
+
+  <pre class="brush: js">media.removeAttribute('controls');
+controls.style.visibility = 'visible';</pre>
+
+  <p>Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles.</p>
+ </li>
+</ol>
+
+<h4 id="Lecture_et_pause_de_la_vidéo">Lecture et pause de la vidéo</h4>
+
+<p>Imlémentons le contrôle le plus important — le bouton play/pause.</p>
+
+<ol>
+ <li>
+  <p>Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction <code>playPauseMedia()</code> soit invoquée quand le bouton play est cliqué:</p>
+
+  <pre class="brush: js">play.addEventListener('click', playPauseMedia);
+</pre>
+ </li>
+ <li>
+  <p>Maintenant, définissons <code>playPauseMedia()</code> — ajoutez ce qui suit, toujours au bas de votre code:</p>
+
+  <pre class="brush: js">function playPauseMedia() {
+  if(media.paused) {
+    play.setAttribute('data-icon','u');
+    media.play();
+  } else {
+    play.setAttribute('data-icon','P');
+    media.pause();
+  }
+}</pre>
+
+  <p>Ici, nous utilisons une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code> pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut <code>data-icon</code> à "u", qui est une icône "en pause", et invoquons la  méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.</p>
+
+  <p>Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.</p>
+ </li>
+</ol>
+
+<h4 id="Stopper_la_vidéo">Stopper la vidéo</h4>
+
+<ol>
+ <li>
+  <p>Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> suivantes au-dessous de vos ajouts précédents:</p>
+
+  <pre class="brush: js">stop.addEventListener('click', stopMedia);
+media.addEventListener('ended', stopMedia);
+</pre>
+
+  <p>L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction <code>stopMedia()</code> quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit.</p>
+ </li>
+ <li>
+  <p>Ensuite, définissons <code>stopMedia()</code> — ajoutez ce qui suit après la fonction <code>playPauseMedia()</code>:</p>
+
+  <pre class="brush: js">function stopMedia() {
+  media.pause();
+  media.currentTime = 0;
+  play.setAttribute('data-icon','P');
+}
+</pre>
+
+  <p>Il n'y a pas de méthode <code>stop()</code> dans l'API  HTMLMediaElement — l'équivalent du stop est de mettre <code>pause()</code> sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à <code>currentTime</code> (en secondes) change immédiatement la position du temps du média.</p>
+
+  <p>Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.</p>
+ </li>
+</ol>
+
+<h4 id="Retour_arrière_et_avance_rapide">Retour arrière et avance rapide</h4>
+
+<p>Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire.</p>
+
+<ol>
+ <li>
+  <p>Tout d'abord, ajoutez les lignes <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> suivantes à la suite des précédentes:</p>
+
+  <pre class="brush: js">rwd.addEventListener('click', mediaBackward);
+fwd.addEventListener('click', mediaForward);
+</pre>
+ </li>
+ <li>
+  <p>Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir <code>mediaBackward()</code> et <code>mediaForward()</code>:</p>
+
+  <pre class="brush: js">var intervalFwd;
+var intervalRwd;
+
+function mediaBackward() {
+  clearInterval(intervalFwd);
+  fwd.classList.remove('active');
+
+  if(rwd.classList.contains('active')) {
+    rwd.classList.remove('active');
+    clearInterval(intervalRwd);
+    media.play();
+  } else {
+    rwd.classList.add('active');
+    media.pause();
+    intervalRwd = setInterval(windBackward, 200);
+  }
+}
+
+function mediaForward() {
+  clearInterval(intervalRwd);
+  rwd.classList.remove('active');
+
+  if(fwd.classList.contains('active')) {
+    fwd.classList.remove('active');
+    clearInterval(intervalFwd);
+    media.play();
+  } else {
+    fwd.classList.add('active');
+    media.pause();
+    intervalFwd = setInterval(windForward, 200);
+  }
+}
+</pre>
+
+  <p>Vous remarquerez que nous commençons par initialiser deux variables — <code>intervalFwd</code> et <code>intervalRwd</code> — vous verrez à quoi elles servent plus tard.</p>
+
+  <p>Voyons pas à pas <code>mediaBackward()</code> (<code>mediaForward()</code> fait la même chose, mais dans l'autre sens):</p>
+
+  <ol>
+   <li>Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton <code>rwd</code> après avoir pressé le bouton <code>fwd</code>, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.</li>
+   <li>Nous utilisons une instruction <code>if</code> pour vérifier si la classe <code>active</code> a été définie sur le bouton <code>rwd</code>, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode <code>classList.contains()</code> pour vérifier si la liste contient la classe <code>active</code>. Cela retourne un booléen <code>true</code>/<code>false</code> en résultat.</li>
+   <li>Si la classe <code>active</code> a été définie sur le bouton <code>rwd</code>, nous la supprimons avec <code>classList.remove()</code>, effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.</li>
+   <li>
+    <p>Sinon, nous ajoutons la classe <code>active</code> sur le bouton <code>rwd</code> avec <code>classList.add()</code>, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable <code>intervalRwd</code> en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction <code>setInterval()</code> créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction <code>windBackward()</code> toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable <code>intervalRwd</code> (voir l'appel à <code>clearInterval()</code> effectué plus tôt dans la fonction).</p>
+   </li>
+  </ol>
+ </li>
+ <li>
+  <p>Pour en finir avec cette section, nous devons définir les fonctions <code>windBackward()</code> et <code>windForward()</code> invoquées dans les appels <code>setInterval()</code>. Ajoutez ce qui suit après les deux fonctions précédentes:</p>
+
+  <pre class="brush: js">function windBackward() {
+  if(media.currentTime &lt;= 3) {
+    rwd.classList.remove('active');
+    clearInterval(intervalRwd);
+    stopMedia();
+  } else {
+    media.currentTime -= 3;
+  }
+}
+
+function windForward() {
+  if(media.currentTime &gt;= media.duration - 3) {
+    fwd.classList.remove('active');
+    clearInterval(intervalFwd);
+    stopMedia();
+  } else {
+    media.currentTime += 3;
+  }
+}</pre>
+  Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans <code>windBackward()</code>, nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes.
+
+  <ol>
+   <li>Nous commençons avec une instruction <code>if</code> qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant <code>stopMedia()</code>, supprimons la classe <code>active</code> du bouton, et stoppons l'intervale <code>intervalRwd</code> pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement.</li>
+   <li>Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant <code>media.currentTime -= 3</code>. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes.</li>
+  </ol>
+ </li>
+</ol>
+
+<h4 id="Mettre_à_jour_le_temps_écoulé">Mettre à jour le temps écoulé</h4>
+
+<p>La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément <code>&lt;video&gt;</code>. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc (<a href="http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video">voir post stackoverflow</a>).</p>
+
+<p>Ajoutez la ligne <code>addEventListener()</code> suivante à la suite des autres:</p>
+
+<pre class="brush: js">media.addEventListener('timeupdate', setTime);</pre>
+
+<p>Maintenant, ajoutez la fonction <code>setTime()</code>:</p>
+
+<pre class="brush: js">function setTime() {
+  var minutes = Math.floor(media.currentTime / 60);
+  var seconds = Math.floor(media.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes &lt; 10) {
+    minuteValue = '0' + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds &lt; 10) {
+    secondValue = '0' + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  var mediaTime = minuteValue + ':' + secondValue;
+  timer.textContent = mediaTime;
+
+  var barLength = timerWrapper.clientWidth * (media.currentTime/media.duration);
+  timerBar.style.width = barLength + 'px';
+}
+</pre>
+
+<p>C'est une fonction assez longue, alors allons-y étape par étape:</p>
+
+<ol>
+ <li>Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.</li>
+ <li>Ensuite, on initialise deux variables supplémentaires — <code>minuteValue</code> et <code>secondValue</code>.</li>
+ <li>Les deux instructions <code>if</code> qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.</li>
+ <li>Le temps est au final la concaténation de <code>minuteValue</code>, un caractère deux-points, et <code>secondValue</code>.</li>
+ <li>Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.</li>
+ <li>La largeur que nous devons donner <code>&lt;div&gt;</code> intérieur est calculée en récupérant la largeur du <code>&lt;div&gt;</code> externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.</li>
+ <li>Nous assignons la largeur du <code>&lt;div&gt;</code> intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels.</li>
+</ol>
+
+<h4 id="Corriger_play_et_pause">Corriger play et pause</h4>
+
+<p>Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action <code>rwd</code>/<code>fwd</code> et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple.</p>
+
+<p>Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction <code>stopMedia()</code> — n'importe où:</p>
+
+<pre class="brush: js">rwd.classList.remove('active');
+fwd.classList.remove('active');
+clearInterval(intervalRwd);
+clearInterval(intervalFwd);
+</pre>
+
+<p>Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction <code>playPauseMedia()</code> (juste avant le début de l'instruction <code>if</code>).</p>
+
+<p>À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions <code>windBackward()</code> et <code>windForward()</code>, puisqu'elles ont été ajoutées à la fonction <code>stopMedia()</code> à la place.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Le <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/video-audio/finished">code terminé</a> est disponible sur Github (le <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">voir en direct</a>).</p>
+</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes.</p>
+
+<p>Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:</p>
+
+<ol>
+ <li>
+  <p>Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.</p>
+ </li>
+ <li>
+  <p>Parce que les éléments <code>&lt;audio&gt;</code> ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément <code>&lt;audio&gt;</code>. Essayez  de le faire.</p>
+ </li>
+ <li>
+  <p>Trouvez un moyen de transformer le <code>&lt;div&gt;</code> interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode <code><a href="/fr/docs/Web/API/Element/getBoundingClientRect">getBoundingClientRect()</a></code>, et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet <code>event</code> du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:</p>
+
+  <pre class="brush: js">document.onclick = function(e) {
+  console.log(e.x) + ',' + console.log(e.y)
+}</pre>
+ </li>
+</ol>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+ <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a> — simple guide aux <code>&lt;video&gt;</code> et <code>&lt;audio&gt;</code> HTML.</li>
+ <li><a href="/fr/Apps/Build/Audio_and_video_delivery">Intégration audio et vidéo</a> — guide détaillé sur l'intégration de média dans le navigateur, avec de nombreux conseils, astuces et liens vers des tutoriels plus avancés.</li>
+ <li><a href="/fr/Apps/Fundamentals/Audio_and_video_manipulation">Manipulation audio et vidéo</a> — guide détaillé pour manipuler l'audio et vidéo avec <a href="/fr/docs/Web/HTML/Canvas">Canvas API</a>, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a>, et plus encore.</li>
+ <li>Les pages référence {{htmlelement("video")}} et {{htmlelement("audio")}}.</li>
+ <li>
+  <p><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par les éléments HTML audio et vidéo</a>.</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+</ul>
diff --git a/files/fr/apprendre/javascript/index.html b/files/fr/apprendre/javascript/index.html
new file mode 100644
index 0000000000..a10f2deb2d
--- /dev/null
+++ b/files/fr/apprendre/javascript/index.html
@@ -0,0 +1,61 @@
+---
+title: JavaScript
+slug: Apprendre/JavaScript
+tags:
+  - Débutant
+  - Développement
+  - JavaScript
+  - Modules
+  - scripts
+translation_of: Learn/JavaScript
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.</p>
+
+<h2 id="Parcours_d'apprentissage">Parcours d'apprentissage</h2>
+
+<p>JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que <a href="https://developer.mozilla.org/fr/Apprendre/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a>. <span>Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :</span></p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a></li>
+</ul>
+
+<p>Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.</p>
+
+<p>Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :</p>
+
+<ul>
+ <li>JavaScript en profondeur, comme enseigné dans notre <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API">API web</a></li>
+</ul>
+
+<h2 id="Modules">Modules</h2>
+
+<p>Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a></dt>
+ <dd>Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks">JavaScript les blocs</a></dt>
+ <dd>Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a></dt>
+ <dd>En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs">API Web côté client</a></dt>
+ <dd>Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</dd>
+</dl>
+
+<h2 id="Résoudre_les_problèmes_JavaScript_courants">Résoudre les problèmes JavaScript courants</h2>
+
+<p><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a> fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">JavaScript sur MDN</a></dt>
+ <dd>Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Codage des mathématiques</a></dt>
+ <dd>Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/fr/apprendre/le_fonctionnement_des_liens_sur_le_web/index.html b/files/fr/apprendre/le_fonctionnement_des_liens_sur_le_web/index.html
new file mode 100644
index 0000000000..35ac0d8bb4
--- /dev/null
+++ b/files/fr/apprendre/le_fonctionnement_des_liens_sur_le_web/index.html
@@ -0,0 +1,96 @@
+---
+title: Le fonctionnement des liens sur le Web
+slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web
+tags:
+  - Beginner
+  - Infrastructure
+  - Navigation
+  - NeedsActiveLearning
+translation_of: Learn/Common_questions/What_are_hyperlinks
+---
+<div class="summary">
+<p>Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez, au préalable, comprendre <a href="/en-US/Learn/How_the_Internet_works">comment Internet fonctionne</a> et distinguer<a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche"> une page web, un site web, un serveur web et un moteur de recherche</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre ce que sont les liens hypertexte et comprendre leur importance.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) :</p>
+
+<ol>
+ <li>Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web</li>
+ <li>{{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL</li>
+ <li>{{Glossary("HTML")}} : un format de document qui permet d'intégrer des <em>hyperliens</em> (<em>hyperlink</em> est le terme anglais)</li>
+</ol>
+
+<p>Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.</p>
+
+<p>Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé.</p>
+
+<p>Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.</p>
+
+<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+
+<p>Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Cette section a besoin d'être enrichie, <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser :</p>
+
+<h3 id="Les_types_de_lien">Les types de lien</h3>
+
+<dl>
+ <dt>Les liens internes</dt>
+ <dd>Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page.</dd>
+ <dt>Les liens sortants</dt>
+ <dd>Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même.</dd>
+ <dt>Les liens entrants</dt>
+ <dd>Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site.</dd>
+</dl>
+
+<p>Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page.</p>
+
+<p>Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations).</p>
+
+<h3 id="Les_ancres">Les ancres</h3>
+
+<p>La plupart des liens lient deux pages différentes. <strong>Les ancres</strong> permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.</p>
+
+<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+
+<h3 id="Les_liens_et_les_moteurs_de_recherche">Les liens et les moteurs de recherche</h3>
+
+<p>Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche.</p>
+
+<p>Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que :</p>
+
+<ul>
+ <li>Le <em>texte visible</em> d'un lien influence les sites qui seront trouvés pour une recherche donnée</li>
+ <li>Plus la page possède de <em>liens entrants</em>, plus son rang dans le classement sera élevé (et plus elle apparaîtra en haut des résultats).</li>
+ <li><em>Les liens externes</em> influencent également le classement du site source et du site lié.</li>
+</ul>
+
+<p><a href="https://fr.wikipedia.org/wiki/Optimisation_pour_les_moteurs_de_recherche">Le SEO</a> (pour <em>Search Engine Optimization</em> ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web !</p>
+
+<ul>
+ <li>Pour connaître le fonctionnement théorique, vous pouvez lire <a href="/fr/Apprendre/Understanding_URLs">les URL et leur structure</a> car, pour être précis, chaque hyperlien pointe vers une URL donnée.</li>
+ <li>Pour plonger dans la pratique, vous pouvez développer un peu de HTML. Apprenez comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">écrire des documents HTML et les lier les uns aux autres.</a></li>
+</ul>
diff --git a/files/fr/apprendre/les_menaces/index.html b/files/fr/apprendre/les_menaces/index.html
new file mode 100644
index 0000000000..5246dc91af
--- /dev/null
+++ b/files/fr/apprendre/les_menaces/index.html
@@ -0,0 +1,59 @@
+---
+title: Threats
+slug: Apprendre/Les_menaces
+tags:
+  - Beginner
+  - Learn
+  - Security
+  - Tutorial
+translation_of: Archive/Security/Threats
+---
+<p>{{draft}}</p>
+
+<div class="summary">
+<p>Cet article aborde les menaces en sécurité informatique, il explique ce qu'elles sont et comment elles peuvent affecter le trafic réseau.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable connaître <a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">les objectifs majeurs en termes de sécurité</a> et savoir <a href="/en-US/Learn/Vulnerabilities">ce qu'est une vulnérabilité</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre ce qu'est une menace au sens informatique et comment les menaces peuvent affecter le trafic réseau.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une<em> menace</em> correspond à toute circonstance ou événement qui peut impacter négativement des données ou des systèmes à cause d'un accès non-autorisé, d'une destruction (partielle ou totale), d'une divulgation ou de la modification d'informations. Cela peut aussi être un déni de service. Les menaces peuvent impliquer des acteurs intentionnels (par exemple un attaquant qui souhaite accéder à des informations sur un serveur) ou accidentels  (par exemple un administrateur qui oublie de désactiver le compte d'un ancien employé).  Les menaces peuvent être locales (un employé mécontent par exemple) ou éloignées (un attaquant à distance sur un autre continent).</p>
+
+<h2 id="Pédagogie_active" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);">Pédagogie active</h2>
+
+<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><em>Il n'existe pas encore de matériau interactif pour cet article. <a href="/fr/docs/MDN/Débuter_sur_MDN" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;">N'hésitez pas à contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p><em>La source d'une menace</em> est la cause d'une menace : cela peut être une attaque physique ou informatique, une erreur humaine, un dysfonctionnement d'un matériel ou d'un logiciel de l'entreprise ou un dysfonctionnement extérieur à l'entreprise.<em> Un événement de menace</em> correspond à un événement ou a une situation initiée ou causée par la source et qui peut potentiellement entraîner un impact dommageable.</p>
+
+<p>De nombreuses menaces sont rendues possibles à causes d'erreurs : des bugs dans des systèmes d'exploitation ou dans des applications ou encore des erreurs causées par les acteurs humains qui utilisent les systèmes.</p>
+
+<p>Le trafic réseau transite par de nombreux ordinateurs intermédiaires : des routeurs, d'autres réseaux non sécurisés comme des points d'accés WiFi. Pour ces raisons, le trafic réseau peut parfois être intercepté par un tiers. Les menaces qui visent le trafic réseau peuvent prendre l'une des formes suivantes :</p>
+
+<ul>
+ <li><strong>La mise sur écoute.</strong> Les informations qui passent sur le réseau restent intactes mais la confidentialité est compromise. Quelqu'un pourrait par exemple découvrir votre numéro de carte bleue, enregistrer des conversations importantes ou intercepter des informations confidentielles.</li>
+ <li><strong>La falsification.</strong> Les informations qui passent sur le réseau sont modifiées ou remplacées avant d'être envoyées au destinataire. Quelqu'un pourrait par exemple modifier une commande passée en ligne ou altérer le CV d'une personne.</li>
+ <li><strong>Le mensonge d'identité. </strong>Les informations sont envoyées à une personne qui se fait passer pour le destinataire légitime. Cela peut se décliner de deux façons différentes :
+  <ul>
+   <li><strong>L'imposture (<em>spoofing</em>).</strong> Une personne prétend en être une autre. Par exemple, une personne prétend avoir l'adresse <code>jbiche@exemple.fr</code> ou un ordinateur prétend avoir un site intitulé <code>www.exemple.fr</code> alors que ce n'est pas vrai.</li>
+   <li><strong>Le détournement.</strong> Une personne ou une organisation prétend fournir un service qu'elle ne fournit pas malgré la présentation. Par exemple, le site <code>www.exemple.fr</code> prétend être un site de vente de mobiliers alors qu'il ne fait qu'enregistrer les paiements mais n'envoie jamais aucun meuble.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/Security_Controls">Les contrôles de sécurité</a></li>
+</ul>
diff --git a/files/fr/apprendre/les_vulnérabilités/index.html b/files/fr/apprendre/les_vulnérabilités/index.html
new file mode 100644
index 0000000000..07af041fe4
--- /dev/null
+++ b/files/fr/apprendre/les_vulnérabilités/index.html
@@ -0,0 +1,60 @@
+---
+title: Les vulnérabilités
+slug: Apprendre/Les_vulnérabilités
+tags:
+  - Beginner
+  - Learn
+  - Security
+translation_of: Archive/Security/Vulnerabilities
+---
+<p>{{draft}}</p>
+
+<div class="summary">
+<p>Dans cet article, nous abordons les vulnérabilités : ce qu'elles sont et pourquoi elles sont présentes dans chaque système.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez connaître au préalable <a href="/fr/Apprendre/Confidentialité_intégrité_et_disponibilité">les trois objectifs majeurs de la sécurité</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre ce qu'est une vulnérabilité et comment elle peut affecter des données et/ou des systèmes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une vulnérabilité est une faiblesse d'un système qui peut être exploitée de façon négative pour compromettre la confidentialité, l'intégrité ou la disponibilité d'un système et/ou de des données. Il existe de nombreuses méthodes pour catégoriser les vulnérabilités. Dans cet article, nous les classerons dans trois grands groupes : les erreurs logicielles, les erreurs de configuration des systèmes de sécurité et la mauvaise utilisation d'une fonctionnalité d'un logiciel. Ces catégories sont décrites ci-après.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Les_différentes_catégories_de_vulnérabilités">Les différentes catégories de vulnérabilités</h3>
+
+<p><em>Une vulnérabilité liée à une erreur logicielle</em> est causée par une erreur, non-intentionnelle, lors de la conception ou du développement du logiciel. Par exemple, cela peut être une erreur de validation lorsqu'un utilisateur saisit quelque chose à entrer dans le logiciel, dans ce cas, un utilisateur mal-intentionné pourrait concevoir des chaînes de caractères ou des valeurs spécifiques pour attaquer le système. Un autre exemple peut être une <a href="https://fr.wikipedia.org/wiki/Situation_de_comp%C3%A9tition">situation de compétition</a> qui permettrait à un attaquant d'effectuer une action avec des privilèges qu'il n'aurait pas dû avoir.</p>
+
+<p><em>Une vulnérabilité liée à une erreur de configuration des éléments de sécurité</em> est un cas où la sécurité d'un logiciel est compromise à cause du logiciel lui-même. Par exemple, un système d'exploitation peut permettre à un utilisateur de contrôler qui peut accéder à quels fichiers en fonction de ses privilèges, généralement le système d'exploitation fournira donc une application qui permet d'activer ou de désactiver certains privilèges ou certains contrôles. Une vulnérabilité de ce type apparaît quand un des réglages de la configuration impacte négativement la sécurité du logiciel.</p>
+
+<p><em>Une vulnérabilité liée à une mauvaise utilisation d'une fonctionnalité logicielle</em> apparaît quand un logoiciel offre une certaine méthode permettant de compromettre la sécurité d'un système. Ces vulnérabilités proviennent généralement d'une hypothèse de confiance, prise lors du développement du logiciel, qui peut être mise à défaut lors de l'utilisation du logiciel. Par exemple, un client de courrier électronique peut disposer d'une fonctionnalité pour afficher les e-mails qui contiennent du HTML. Un attaquant pourrait donc créer un courrier électronique qui contient des liens qui soient tout à fait « sains » en apparence mais qui redirigent en fait vers un site mal intentionné. Ici, l'hypothèse de confiance consiste à penser qu'avec cette fonctionnalité de rendu HTML, un utilisateur ne recevra pas d'e-mails mal intentionnés ou qu'il ne cliquera pas sur ces liens.</p>
+
+<p>Ces vulnérabilités liées à l'utilisation du logiciel apparaissent lors de la conception du logiciel ou d'un de ses composants. Les hypothèses de confiance peuvent avoir été explicites (par exemple, un concepteur est conscient de telle faiblesse en termes de sécurité et estime qu'une option séparée sera plus efficace). Cependant, la plupart du temps, ces hypothèses sont implicites : créer une fonctionnalité sans évaluer les risques que celle-ci introduit, l'évolution du logiciel ou d'un protocole au cours du temps... Le protocole <em>Address Resolution Protocol</em> (ARP en anglais ou protocole de résolution des adresses) fait par exemple « confiance » au sens où il ne vérifie pas que l'association fourni dans les réponses reçues entre l'adresse <em>Media Access Control</em> (MAC) et l'adresse <em>Internet Protocol</em> (IP). L'ARP garde en cache ces informations pour fournir un service qui permettra aux différents appareils d'un réseau local de s'envoyer des données. Toutefois, un attaquant pourrait générer de faux messages ARP afin d'« empoisonner » les tableaux ARP d'un système et ainsi déclencher un déni de service ou une attaque « de l'homme du milieu ». Le protocole ARP a été standardisé 25 ans auparavant, les menaces ont grandement évolué depuis et c'est pourquoi les hypothèses de confiance sur lesquelles le protocole a été conçu ne seraient plus d'actualité aujourd'hui.</p>
+
+<p>Cela peut s'avérer difficile de différencier les vulnérabilités de ce dernier type au regard des deux premiers. Une faille d'un logiciel et une mauvaise utilisation d'un logiciel peuvent tous les deux provenir d'erreurs lors de la conception du logiciel. Cependant, les failles logicielles ont un impact purement négatif alors que les vulnérabilités liées à la mauvaise utilisation d'un logiciel proviennent de fonctionnalités supplémentaires.</p>
+
+<p>On peut également parfois confondre cette dernière catégorie avec la seconde. La différence principale est qu'une vulnérabilité liée à une mauvaise utilisation du logiciel aura un réglage qui active/désactive une fonctionnalité entière et ne concerne pas uniquement la sécurité. En revanche, pour une vulnérabilité liée à la configuration, un réglage équivalent n'impactera que la sécurité du logiciel. Si on dispose par exemple d'un réglage permettant de désactiver l'affichage HTML des e-mails, cela aura un impact sur la sécurité et sur une fonctionnalité du client mail : une vulnérabilité liée à ce réglage serait donc une vulnérabilité liée à une mauvaise utilisation du logiciel. En revanche, une vulnérabilité liée à un réglage qui permet de désactiver la sécurité anti-hameçonnage (quelque chose qui ne concerne que la sécurité) serait une vulnérabilité liée à un défaut de configuration.</p>
+
+<h3 id="La_présence_de_vulnérabilités">La présence de vulnérabilités</h3>
+
+<p><strong>Aucun système n'est parfaitement sécurisé</strong>. Chaque système possède des vulnérabilités. À un instant donné, un système peut éventuellement être épargné de failles de sécurité logicielles connues mais les problèmes de configuration ou de mauvaise utilisation sont toujours présents. La mauvaise utilisation de fonctionnalités est inhérente au logiciel car chaque fonctionnalité repose sur des hypothèses de confiance qui peuvent être mises en défaut. Les défauts de configuration sont également inévitables pour deux raisons. Premièrement, la plupart des réglages de sécurité permettent d'augmenter la sécurité mais réduisent d'autres fonctionnalités : utiliser les réglages les plus stricts en termes de sécurité conduiraient donc parfois à un logiciel peu (voire pas du tout) utilisable. Deuxièmement, de nombreux réglages de sécurité ont un impact à la fois positif et négatif sur la sécurité. On peut ici prendre l'exemple du nombre d'essais maximum pour saisir un mot de passe avant de verrouiller le compte utilisateur. Si on fixe ce seuil à 1, on obtient une sécurité maximale contre les attaques qui consistent à essayer différents mots de passe mais les utilisateurs légitimes n'auraient pas le droit à l'erreur. Cela pourrait également permettre à un attaquant de mener une attaque de déni de serveice contre certains utilisateurs en effectuant une tentative de connexion sur leurs comptes.</p>
+
+<p>La somme de toutes ces vulnérabilités potentielles, qu'elles soient liées à des défauts de configuration, à une mauvaise utilisation du logiciel ou à des failles techniques dans son code, font donc qu'on peut avoir des dizaines (voire centaines) de vulnérabilités pour un système donné à un instant donné. Il est probable que les caractéristiques de ces vulnérabilités varient grandement : certaines seront faciles à exploiter tandis que d'autres ne pourront être exploitées que si une conjonction de conditions très improbables se produit. Une vulnérabilité peut fournir un accès administrateur à un système alors qu'une autre pourrait ne donner qu'un accès en lecture à un fichier sans importance. En fin de compte, une organisation a besoin de savoir :</p>
+
+<ul>
+ <li>la difficulté d'exploiter chaque vulnérabilité connue ;</li>
+ <li>l'impact d'une exploitation potentielle d'une vulnérabilité (connue ou non).</li>
+</ul>
diff --git a/files/fr/apprendre/mettre_en_place_un_environnement_de_travail/index.html b/files/fr/apprendre/mettre_en_place_un_environnement_de_travail/index.html
new file mode 100644
index 0000000000..63938e5c9f
--- /dev/null
+++ b/files/fr/apprendre/mettre_en_place_un_environnement_de_travail/index.html
@@ -0,0 +1,243 @@
+---
+title: Mettre en place un environnement de travail
+slug: Apprendre/Mettre_en_place_un_environnement_de_travail
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - Learn
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est un serveur web</a>, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">comment installer les outils de base</a> et <a href="/fr/Apprendre/Comprendre_noms_de_domaine">comment fonctionnent les noms de domaine</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir comment installer un serveur local et mettre en place une hiérarchie de fichiers pour développer un site web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En développement web, mieux vaut tester son site localement avant de le publier aux yeux du monde entier. Pour effectuer des tests sur votre ordinateur, vous pouvez installer un serveur local. Dans cet article nous verrons comment faire et comment organiser une hiérarchie de fichiers afin que ceux-ci soit organisés, même si le projet devient plus volumineux.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'existe pas encore de matériau interactif pour cet article. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Installer_et_paramétrer_un_éditeur_de_texte">Installer et paramétrer un éditeur de texte</h3>
+
+<p>Ce point était l'objet d'un article précédent. Si ce n'est pas déjà fait, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">voici quelques indications</a> sur comment procéder.</p>
+
+<h3 id="Installer_un_serveur_web_local">Installer un serveur web local</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe différents<a href="http://en.wikipedia.org/wiki/Comparison_of_web_server_software"> logiciels de serveurs web</a> qui sont disponibles (<a href="https://httpd.apache.org/" rel="external">Apache</a>, <a href="http://tomcat.apache.org/">Tomcat</a>, <a href="http://www.iis.net/" rel="external">IIS</a>, <a href="http://nginx.org/" rel="external">nginx</a>). Apache est libre et gratuit, disponible sur plusieurs plateformes et est simple à installer. Nous illustrerons donc les exemples de cet article avec Apache.</p>
+</div>
+
+<h4 id="Comprendre_le_fonctionnement_de_localhost">Comprendre le fonctionnement de <em>localhost</em></h4>
+
+<p>Dans le monde du {{Glossary("DNS")}}, il existe une adresse spéciale connue par chaque ordinateur : <code>localhost</code>. Celle-ci fait référence au serveur situé sur l'ordinateur en question. Ainsi, il est possible d'accéder à un site situé sur <code>localhost</code> avec votre navigateur, même sans connexion à Internet.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Pour être plus précis, <code>localhost</code> pointe vers une {{Glossary("adresse IP")}} dirigeant vers votre propre machine : <code>127.0.0.1</code> ({{Glossary("IPv4")}}) ou <code>::1</code> ({{Glossary("IPv6")}}).</p>
+</div>
+
+<p>Essayez d'accéder à votre hôte local : <code><a href="http://localhost/">http://localhost</a></code>. Si vous obtenez un résultat semblable à l'image ci-après : félicitations ! Cela signifie que vous disposez déjà d'un serveur web installé sur votre ordinateur (par exemple Mac OS X inclut Apache préinstallé).</p>
+
+<p><img alt="Basic index from the Apache HTTP server" src="https://mdn.mozillademos.org/files/9275/index.jpg" style="height: 152px; width: 480px;"></p>
+
+<p>Si vous n'obtenez pas ce résultat, il faut installer Apache.</p>
+
+<p>Dans les deux cas, il faudra configurer Apache afin que celui-ci pointe vers votre répertoire de travail. Nous verrons comment faire dans la suite de cet article. Selon le système d'exploitation les opérations à effectuer varient légèrement. Nous commencerons par expliquer le mode opératoire à suivre pour Windows. Si vous n'utilisez pas Windows, vous pouvez directement aller aux sections pour <a href="#Ubuntu_Linux">Ubuntu/Linux</a> ou pour <a href="#Mac_OS_X">Mac OS X</a>.</p>
+
+<h4 id="Installer_et_lancer_son_serveur_local_sur_Windows">Installer et lancer son serveur local sur Windows</h4>
+
+<h5 id="Installer_Apache">Installer Apache</h5>
+
+<p>Sous Windows, installer Apache est légèrement compliqué. <a href="http://httpd.apache.org/docs/2.2/platform/windows.html">Cette page explique</a> comment installer un binaire Apache étape par étape.</p>
+
+<p>Après l'installation, allez à l'URL <a href="http://localhost/">http://localhost/</a> avec votre ordinateur afin de vérifier que votre serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.</p>
+
+<h5 id="Déplacer_la_racine_de_l'hôte_local_vers_votre_répertoire_de_travail">Déplacer la racine de l'hôte local vers votre répertoire de travail</h5>
+
+<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p>
+
+<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p>
+
+<ol>
+ <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>C:\Users\<strong>NomUtilisateur</strong>\htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur. Si vous utilisez une version de Winows plus récente, ce dossier pourra être situé à l'emplacement suivant <code>C:\Documents and Settings\<strong>NomUtilisateur</strong>\htdocs</code>.</li>
+ <li>Modifiez le fichier de configuration Apache situé à  l'emplacement suivant : <code>C:\Program Files\Apache Software Foundation\conf\httpd.conf</code>. Si nécessaire, fournissez les informations d'authentification pour l'administrateur.</li>
+ <li>Dans ce fichier, allez jusqu'à la ligne qui contient le texte suivant : <code><span style="background-color: #e6e6fa;">DocumentRoot "C:\</span><code><span style="background-color: #e6e6fa;">Users</span></code><span style="background-color: #e6e6fa;">\Apache Software Foundation\htdocs"</span></code>. Éditez cette ligne afin qu'elle pointe vers votre répertoire <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot "C:\</span><code><span style="background-color: #e6e6fa;">Documents and Settings\</span><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">\htdocs</span></code><span style="background-color: #e6e6fa;">"</span></code></li>
+ <li>Dans le même fichier, repérez l'instruction <code>&lt;Directory&gt;</code> : <code><span style="background-color: #e6e6fa;">&lt;Directory "</span><code><span style="background-color: #e6e6fa;">C:\</span><code><span style="background-color: #e6e6fa;">Users</span></code><span style="background-color: #e6e6fa;">\Apache Software Foundation\htdocs</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code>. Là aussi, modifiez le répertoire pour qu'il pointe vers le dossier de travail :  <code><span style="background-color: #e6e6fa;">&lt;Directory "C:\</span><code><span style="background-color: #e6e6fa;">Documents and Settings\</span><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">\htdocs</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code></li>
+ <li>Sauvegardez le fichier.</li>
+ <li>Redémarrez Apache : <strong>Démarrer ➤ Apache ➤ Redémarrer Apache.</strong></li>
+ <li>Rechargez la page <code>localhost</code> dans votre navigateur. Si tout s'est passé comme prévu, vous devriez voir l'index du répertoire. Par défaut, l'index correspond à la liste des fichiers du répertoire. Nous verrons par la suite comment personnaliser cette page d'index. Vous pouvez passer <a href="#Page_index">les instructions pour Ubuntu et Mac</a>.</li>
+</ol>
+
+<h4 id="Installer_et_lancer_son_serveur_local_sur_Ubuntu_(ou_plus_généralement_sur_Linux)"><a id="Ubuntu_Linux" name="Ubuntu_Linux">Installer et lancer son serveur local sur Ubuntu (ou plus généralement sur Linux)</a></h4>
+
+<h5 id="Installer_Apache_2">Installer Apache</h5>
+
+<p>Sous Ubuntu, lancez un terminal (vous pouvez utiliser le raccourci <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>) puis lancez ces commandes (saisissez votre mot de passe si besoin) :</p>
+
+<pre class="brush: bash">sudo apt-get update
+sudo apt-get install apache2</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Si vous n'utilisez pas Ubuntu ou une distribution basée sur Debian, suivez <a href="http://httpd.apache.org/docs/2.2/install.html">ces sept étapes</a> pour compiler et installer Apache. Vous aurez peut-être à saisir votre mot de passe. Vous pouvez utiliser un éditeur graphique plutôt que <code>vi</code> pour éditer les fichiers de configuration.</p>
+</div>
+
+<p>Après l'installation, accédez à <a href="http://localhost/">http://localhost/</a> avec votre navigateur afin de vérifier que le serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.</p>
+
+<h5 id="Déplacer_la_racine_de_l'hôte_local_vers_votre_répertoire_de_travail_2">Déplacer la racine de l'hôte local vers votre répertoire de travail</h5>
+
+<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p>
+
+<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p>
+
+<ul>
+ <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>/home/<strong>NomUtilisateur</strong>/htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur.</li>
+ <li>Ouvrez le fichier de configuration Apache situé à cet emplacement : <code><code>/etc/apache2/sites-available/000-default.conf.</code></code> Si besoin, ouvrez ce fichier en tant qu'administrateur. Selon la version d'Ubuntu ou de Debian, le fichier peut se situer à l'un de ces deux emplacements <code>/etc/apache2/httpd.conf</code> or <code>/etc/httpd/conf/httpd.conf</code>.</li>
+ <li>Dans ce fichier et à la ligne suivante : <code><span style="background-color: #e6e6fa;">DocumentRoot /var/www/html</span></code>. Modifiez cette line afin que le répertoire corresponde au répertoire de travail <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot /home/</span><code><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">/htdocs</span></code></code></li>
+ <li>Vous devriez également ajouter des restrictions d'accès aux fichiers. Pour cela, ajoutez les lignes suivantes sous la ligne avec <code>DocumentRoot</code> (n'oubliez pas de changer <code>USERNAME</code> avec votre nom d'utilisateur).</li>
+</ul>
+
+<pre>        &lt;Directory /&gt;
+                Options FollowSymLinks
+                AllowOverride None
+                Require all denied
+        &lt;/Directory&gt;
+        &lt;Directory /home/USERNAME/htdocs/&gt;
+                Options Indexes FollowSymLinks MultiViews
+                AllowOverride None
+                Require all granted
+        &lt;/Directory&gt;</pre>
+
+<ul>
+ <li>Sauvegardez le fichier.</li>
+ <li>Redémarrez Apache avec la commande suivante <code><span style="background-color: #e6e6fa;">sudo apachectl restart</span></code>. Si nécessaire, saisissez votre mot de passe.</li>
+ <li>Rechargez la page <code>localhost</code> dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après). Par défaut, l'index sera la liste des fichiers du répertoire courant. Nous allons voir par la suite comment personnaliser cette page. Vous pouvez <a href="#Page_index">passer les instructions pour Mac</a>.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9343/Screenshot%20from%202014-11-13%2015:13:33.png" style="height: 292px; width: 584px;"></p>
+
+<h4 id="Installer_et_lancer_son_serveur_local_sur_Mac_OS_X"><a id="Mac_OS_X" name="Mac_OS_X">Installer et lancer son serveur local sur Mac OS X</a></h4>
+
+<p>Apache est préinstallé avec Mac OS X. Mais il est toujours nécessaire de déplacer la racine <code>localhost</code> vers le répertoire de travail.</p>
+
+<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p>
+
+<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p>
+
+<ol>
+ <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>/Users/<strong>NomUtilisateur</strong>/htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur.</li>
+ <li>Ouvrez le fichier de configuration Apache situé à cet emplacement : <code>/etc/apache2/httpd.conf.</code></li>
+ <li>Dans ce fichier, trouvez la ligne <code><span style="background-color: #e6e6fa;">DocumentRoot "/Library/WebServer/Documents</span><span style="background-color: #e6e6fa;">"</span></code>. puis modifiez la afin qu'elle pointe vers votre répertoire <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot "/Users/</span><code><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">/htdocs</span></code><span style="background-color: #e6e6fa;">"</span></code></li>
+ <li>Dans ce même fichier, trouvez l'instruction <code>&lt;Directory&gt;</code> : <code><span style="background-color: #e6e6fa;">&lt;Directory "</span><code><span style="background-color: #e6e6fa;">/Library/WebServer/Documents</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code> et modifiez cette ligne avec : <code><span style="background-color: #e6e6fa;">&lt;Directory "/Users/<strong>NomUtilisateur</strong></span><code><span style="background-color: #e6e6fa;">/htdocs</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code></li>
+ <li>Sauvegardez le fichier.</li>
+ <li>Redémarrez Apache avec la commande suivante <code><span style="background-color: #e6e6fa;">sudo apachectl restart</span></code>. Si nécessaire, saisissez votre mot de passe.</li>
+ <li>Rechargez la page <code>localhost</code> dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après).</li>
+</ol>
+
+<p><img alt="Example of Apache serving a folder autoindexing" src="https://mdn.mozillademos.org/files/9277/projet.jpg" style="height: 183px; width: 480px;"></p>
+
+<h3 id="Ajouter_une_page_d'index"><a id="Page_index" name="Page_index">Ajouter une page d'index</a></h3>
+
+<p>Lorsque vous visitez un site web, vous vous attendez à y trouver plus qu'une simple liste de fichiers. Il est possible d'ajouter une page d'index personnalisée pour votre site web local. Ce fichier d'index est un fichier {{Glossary("HTML")}}, il doit être intitulé <code>index.html</code> et il doit être placé dans le répertoire <code>htdocs</code>.</p>
+
+<p>Pour cela, ouvrez votre éditeur de texte puis copiez le code HTML qui suit dans un nouveau fichier :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Voici une page d'index&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;Ma propre page d'index&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Enregistrez ce fichier dans votre répertoire <code>htdocs</code> avec le nom <code>index.html</code> :</p>
+
+<p><img alt="Example of a custom index.html file" src="https://mdn.mozillademos.org/files/11721/Capture%20du%202015-10-11%2021-58-32.png" style="height: 453px; width: 632px;"></p>
+
+<p>Vous pouvez ouvrir la page <a href="http://localhost/" rel="external">http://localhost</a> dans votre navigateur, vous aurez alors :</p>
+
+<p><img alt="A custom index without any style" src="https://mdn.mozillademos.org/files/11723/Capture%20du%202015-10-11%2022-00-05.png" style="height: 178px; width: 381px;"></p>
+
+<h3 id="Organiser_ses_fichiers">Organiser ses fichiers</h3>
+
+<p>La structure et l'organisation des fichiers est critique pour n'importe quel site web. Il est très rare qu'un site web se compose uniquement de fichiers HTML. Vous aurez vraisemblablement à intégrer des images, à mettre en forme des pages avec des fichiers {{Glossary("CSS")}} ou d'ajouter des fonctionnalités avec des fichiers {{Glossary("JavaScript")}}. <em>Dès le début</em>, il est nécessaire d'organiser clairement ces fichiers pour ne pas s'y perdre par la suite.</p>
+
+<p>Bien entendu, vous pouvez suivre votre propre organisation mais la plus communément utilisée contient trois répertoires : <code>images</code> pour les images, <code>styles</code> pour les fichiers CSS et <code>scripts</code> pour les scripts. Simple et efficace.</p>
+
+<h4 id="Fichiers_d'exemples">Fichiers d'exemples</h4>
+
+<p>Dans les prochains articles, nous verrons <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">comment créer une page web</a>, <a href="/en-US/Learn/CSS/Using_CSS_in_a_web_page">comment utiliser CSS</a> puis <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">comment utiliser JavaScript</a>. Nul besoin de connaître ces langages pour placer quelques fichiers d'exemples qu'on modifiera par la suite. Cela vous permettra de mieux percevoir la structure qu'on souhaite mettre en place.</p>
+
+<p>Créons un nouveau fichier qui correspondra à votre feuille de style principale (là où vous écrirez toutes les règles CSS). Pour le moment, copiez-collez ce fragment de code dans un nouveau fichier dans votre éditeur de texte :</p>
+
+<pre class="brush: css">body {
+  font-family: sans-serif;
+}</pre>
+
+<p>Puis enregistrez le fichier dans le répertoire <code>styles</code> sous le nom <code>basic.css</code> :</p>
+
+<p><img alt="Example of a custom basic.css file" src="https://mdn.mozillademos.org/files/11727/Capture%20du%202015-10-12%2008-42-36.png" style="height: 182px; width: 528px;"></p>
+
+<p>Ensuite, revenez à (ou réouvrez) votre page d'index pour y insérer une référence à la feuille de styles. Pour cela, on utilisera la balise {{HTMLElement("link")}} (qu'on reverra dans les prochains articles) :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Voici une page d'index&lt;/title&gt;
+
+<strong>  &lt;link rel="stylesheet" href="./styles/basic.css"&gt;</strong>
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;Ma propre page d'index&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Maintenant, si vous réouvrez votre site local (vous pouvez simplement rafraîchir la page si vous avez laissé votre navigateur ouvert), vous verrez que la police a changé à cause de la feuille de style :</p>
+
+<p><img alt="A custom index with style applied" src="https://mdn.mozillademos.org/files/11725/Capture%20du%202015-10-12%2008-54-01.png" style="height: 146px; width: 285px;"></p>
+
+<h4 id="Structure_finale_pour_le_projet">Structure finale pour le projet</h4>
+
+<p>Reprenons. Votre structure de répertoires et de fichiers pour votre site devrait désormais ressembler à :</p>
+
+<ul>
+ <li><code>htdocs</code> (le dossier racine pour le projet)
+
+  <ul>
+   <li><code>images</code> (le répertoire pour les images)</li>
+   <li><code>scripts</code> (le répertoire pour les différents scripts JavaScript)</li>
+   <li><code>styles</code> (le répertoire pour les feuilles de styles CSS)
+    <ul>
+     <li><code>basic.css</code> (la feuille de style principale)</li>
+    </ul>
+   </li>
+   <li><code>index.html</code> (la page d'index pour le site web local)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Voici la structure minimale que vous devriez avoir et qui pourra s'adapter lorsque votre projet grandira. Au fur et à mesure des développements de votre projet, n'hésitez pas à adapter et à améliorer cette structure afin qu'elle soit optimale pour votre site.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que nous avons vu comment organiser les fichiers et que nous avons créé quelques uns, il est temps d'<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">écrire sa premère page web</a>.</p>
diff --git a/files/fr/apprendre/outils_et_tests/github/index.html b/files/fr/apprendre/outils_et_tests/github/index.html
new file mode 100644
index 0000000000..ce3590b73f
--- /dev/null
+++ b/files/fr/apprendre/outils_et_tests/github/index.html
@@ -0,0 +1,94 @@
+---
+title: Git and GitHub
+slug: Apprendre/Outils_et_tests/GitHub
+tags:
+  - Apprendre
+  - Beginner
+  - Débutant
+  - GitHub
+  - Learn
+  - Web
+  - git
+translation_of: Learn/Tools_and_testing/GitHub
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Tous les développeurs utiliseront une sorte de <strong>système de contrôle des versions</strong> (<em>version control system</em> ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est <strong>Git</strong>, ainsi que <strong>GitHub</strong>, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.</p>
+
+<h2 id="Vue_densemble">Vue d'ensemble</h2>
+
+<p>Les systèmes de contrôles des versions sont nécessaires pour le développement de logiciel :</p>
+
+<ul>
+ <li>Il est rare que vous travailliez sur un projet complètement seul, et aussitôt que vous commencez à travailler avec d'autres gens, vous commencez à courir le risque de créer des conflits entre votre travail et celui des autres — situation qui arrive quand deux personnes tentent de modifier le même morceau de code au même moment. Vous devez avoir une sorte de mécanisme en place pour gérer ces conflits et vous aider à éviter la perte de travail qui peut en résulter.</li>
+ <li>Lorsque vous travailler sur un projet seul ou avec d'autres, vous voudrez être en mesure de centraliser le code afin qu'il ne soit pas perdu par des pannes d'ordinateur.</li>
+ <li>Vous voudrez aussi être en mesure de revenir à de précédentes versions si un problème est découvert plus tard. Vous pourriez avoir commencé à faire ceci dans vos propres projets en créant différentes versions du même fichier, par exemple <code>monCode.js</code>, <code>monCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>monCode_vraiment_final.js</code>, etc., mais c'est une méthode faillible et donc peu fiable.</li>
+ <li>Différents membres d'une équipe vont communément créer leur propres versions séparées du code (appelées des <strong>branches</strong> en Git), travailler sur une nouvelle fonctionnalité sur cette version et finalement la fusionner de manière contrôlée (avec GitHub, on fait des "requêtes de tirage" ou <em><strong>pull requests</strong></em> en anglais) avec la version principale quand ils pensent en avoir fini.</li>
+</ul>
+
+<p>Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. <a href="https://git-scm.com/">Git</a> est un exrmple d'un tel système, et <a href="https://github.com/">GitHub</a> est un site web avec une infrastructure qui propose un serveur Git et d'autres outils très pratiques pour travailler avec des dépôts Git individuellement ou en équipe, tel que le rapportage de problèmes liés au code, la relecture et validation de code, la gestion de projet par différentes fonctions comme l'assignation de tâches et les statistiques sur l'utilisation de tâches, et plus encore.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Git est actuellement un système de contrôle des versions <em>distribué</em>, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.</p>
+</div>
+
+<div class="in-page-callout webdev">
+<h3 id="Vous_cherchez_à_devenir_un_développeur_web_front-end">Vous cherchez à devenir un développeur web front-end ?</h3>
+
+<p>Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Commencer</a></p>
+</div>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Pour utiliser Git et GitHub, vous avez besoin :</p>
+
+<ul>
+ <li>Un ordinateur de bureau avec Git installé (voir la <a href="https://git-scm.com/downloads">page des téléchargements Git</a>).</li>
+ <li>Un outil pour utiliser Git. Selon la manière dont vous préférez travailler, vous pourriez utiliser une <a href="https://git-scm.com/downloads/guis/">interface graphique Git</a> (nous recommandons GitHub Desktop, SourceTree et Git Kraken) ou simplement se contenter d'utiliser un terminal en ligne de commande. En fait, il est probablement utile pour vous d'apprendre au moins les bases des commandes git du terminal, même si avez l'intention d'utiliser une interface graphiques.</li>
+ <li>Un compte <a href="https://github.com/join">GitHub</a>. Si vous n'en avez pas encore un, inscrivez-vous maintenant en utilisant le lien précédent.</li>
+</ul>
+
+<p>En matière de connaissances prérequises, vous n'avez besoin de rien concernant le développement web, Git/GitHub ou les système de contrôle des versions pour commencer ce module. Toutefois, il vous est recommandé de connaitre les bases de la programmation afin que vous ayiez des connaissances informatiques suffisantes ainsi qu'un code à héberger dans vos dépôts !</p>
+
+<p>Il est aussi préférable que vous ayiez quelques connaissances fondamentales sur le terminal, par exemple du déplacement entre dossiers, de la création de fichiers et de la modification du <code>PATH</code> du système.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Github n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que <a href="https://about.gitlab.com/">GitLab</a> que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours  consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.</p>
+
+<dl>
+ <dt><a href="https://guides.github.com/activities/hello-world/">Hello World (de GitHub)</a></dt>
+ <dd>C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de <em>commits</em> ainsi qu'à l'ouverture et à la fusion de <em>pull requests</em>.</dd>
+ <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (de GitHub)</a></dt>
+ <dd>Ce manuel sur Git va plus en profondeur en expliquant ce qu'un système de contrôle des versions est, ce qu'on dépôt est, comment le modèle minimal de GitHub fonctionne, les commandes Git avec divers exemples et plus encore.</dd>
+ <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (de GitHub)</a></dt>
+ <dd>Forking projects est nécessaire quand vous souhaitez contribuer au code de quelqu'un d'autre. Ce guide vous explique comment.</dd>
+ <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (de GitHub)</a></dt>
+ <dd>Un guide utile pour apprendre à gérer les <em>pull requests</em>, la manière dont les changements de code suggérés sont envoyés aux dépôts locaux des autres contributeurs pour être pris en considération.</dd>
+ <dt><a href="https://guides.github.com/features/issues/">Mastering issues (de GitHub)</a></dt>
+ <dd>Les <em>issues</em> (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des <em>issues</em>.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Il existe <strong>beaucoup d'autres</strong> choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> et<a href="https://dangitgit.com/"> Dangit, git!</a></p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li>
+ <li><a href="https://git-scm.com/docs">Git command list</a></li>
+ <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (le format de texte avec lequel vous écrivez vos <em>pull request</em>, commentaires de problèmes et les fichiers <code>.md</code>).</li>
+ <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (comment publier des démonstrations et des sites web sur GitHub).</li>
+ <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li>
+ <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (un compendium très utile de manière de réaliser des tâches spécifiques avec Git, incluant la manière de corriger la situation quand vous vous êtes trompé).</li>
+ <li>
+  <p><a href="https://dangitgit.com/">Dangit, git!</a> (un autre compendium utile, spécifiquement des manières de corriger la situation quand vous vous êtes trompé).</p>
+ </li>
+</ul>
diff --git a/files/fr/apprendre/outils_et_tests/index.html b/files/fr/apprendre/outils_et_tests/index.html
new file mode 100644
index 0000000000..7fbb181871
--- /dev/null
+++ b/files/fr/apprendre/outils_et_tests/index.html
@@ -0,0 +1,42 @@
+---
+title: Outils et tests
+slug: Apprendre/Outils_et_tests
+tags:
+  - Accessibilité
+  - Apprendre
+  - Automatisation
+  - CSS
+  - Déboguage
+  - Débutant
+  - HTML
+  - JavaScript
+  - Outils
+  - tests
+translation_of: Learn/Tools_and_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.</p>
+
+<p>L'industrie du web est un endroit excitant où travailler, mais ce n'est pas sans ses complications. Les technologies de base que nous utilisons pour concevoir des sites web sont assez stables maintenant, mais de nouvelles fonctionnalités sont ajoutées continuellement, et de nouveaux outils — qui les rendent faciles d'utilisation, et sont construits sur ces technologies — apparaissent constamment. En plus de cela, il ne faut pas oublier de vérifier que notre code utilise les meilleures pratiques qui permettront à notre projet de fonctionner sur différents navigateurs et appareils, et d'être aussi utilisable par des personnes ayant un handicap.</p>
+
+<p>Savoir précisément quels outils prendre peut parfois être une tâche difficile, c'est pourquoi nous avons écrit cette séries d'articles, afin de vous expliquer quels types d'outils existent, ce qu'ils peuvent faire pour vous et comment se servir des plus utilisés dans l'industrie.</p>
+
+<div class="note">
+<p><strong>Note</strong>: parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.</p>
+</div>
+
+<h2 id="Parcours_d'apprentissage">Parcours d'apprentissage</h2>
+
+<p>Vous devriez vraiment apprendre les langages de base <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.</p>
+
+<p>Vous avez d'abord besoin d'une base solide.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<dl>
+ <dt>Outils de développement web</dt>
+ <dd>Dans ce module, nous explorons les différents types d'outils de développement web. Ceci inclut de connaître les tâches les plus courantes que vous serez amenés à résoudre, comment les intégrer au sein d'un workflow, et les meilleurs outils actuellement disponibles afin d'effectuer ces tâches.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Test à travers différents navigateurs</a></dt>
+ <dd>Ce module est orienté spécifiquement vers les tests de projets web à travers différents navigateurs. Ici on cherche à identifier quel type d'audience vous ciblez (ex. de quels utilisateurs, navigateurs et appareils avez vous le plus besoin de vous soucier?), comment faire des tests, les principaux problèmes auxquels vous devrez faire face avec différents types de codes et comment en venir à bout, quels outils sont les plus adaptés pour vous aider à cerner et résoudre ces problèmes, et comment utiliser l'automatisation afin d'accélérer les tests.</dd>
+</dl>
diff --git a/files/fr/apprendre/ouvrir_un_fichier_dans_un_navigateur_web/index.html b/files/fr/apprendre/ouvrir_un_fichier_dans_un_navigateur_web/index.html
new file mode 100644
index 0000000000..466d04a87a
--- /dev/null
+++ b/files/fr/apprendre/ouvrir_un_fichier_dans_un_navigateur_web/index.html
@@ -0,0 +1,129 @@
+---
+title: Ouvrir un fichier dans un navigateur web
+slug: Apprendre/Ouvrir_un_fichier_dans_un_navigateur_web
+tags:
+  - Beginner
+  - CodingScripting
+  - NeedsActiveLearning
+  - WebMechanics
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div class="summary">
+<p>Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable <a href="/fr/Apprendre/Mettre_en_place_un_environnement_de_travail">avoir mis en place un environnement de travail</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre les différentes façons d'ouvrir un fichier, ce qu'est un protocole et comment un protocole peut affecter le résultat obtenu.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode :</p>
+
+<ol>
+ <li><strong>Le {{Glossary("protocol")}} {{Glossary("HTTP")}} :</strong> c'est-à-dire utiliser le navigateur pour accéder au fichier de votre serveur web local.</li>
+ <li><strong>Le protocole <code>file</code> : </strong>celui-ci permet d'accéder directement aux fichiers de votre ordinateur via le système de fichiers (pour cela, on passe par le menu <code>Fichier</code> &gt; <code>Ouvrir un fichier…</code>).</li>
+</ol>
+
+<p>Dans cet article, nous verrons les différences entre ces deux approches et pourquoi celles-ci sont importantes.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'existe pas encore de matériau interactif pour cet article</em><em>. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Un_fichier_d'exemple">Un fichier d'exemple</h3>
+
+<p>Prenons un fichier <code>index.html</code> très simple qui utilise une image (nous verrons plus en détails comment utiliser des images dans les articles suivants) :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Coucou&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Bonjour !&lt;/h1&gt;
+  &lt;p&gt;Je suis une page web toute simple avec :&lt;/p&gt;
+  &lt;img src="/images/licorne.png" alt="une licorne !"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Ouvrir_un_fichier_depuis_le_serveur_local">Ouvrir un fichier depuis le serveur local</h3>
+
+<p>Si vous placez ce fichier HTML et l'image associée sous la racine du répertoire du serveur web puis que vous ouvrez le site à l'adresse <a href="http://localhost">http://localhost</a> dans votre navigateur, vous devriez obtenir un résultat semblable à celui-ci :</p>
+
+<p><img alt="Example of a page load through a local web server" src="https://mdn.mozillademos.org/files/11753/Capture%20du%202015-10-12%2011-36-20.png" style="height: 508px; width: 404px;"></p>
+
+<p>Maintenant, que se passe-t-il si <code>index.html</code> est déplacé autre part sur le serveur (ce qui arrive plus souvent qu'on le croit à première vue) mais que nos autres ressources (par exemple <code>images</code>) sont toujours sitées à la racine ?</p>
+
+<p>Lorsqu'on fait référence au fichier image, cette référence commence par une barre oblique (<code>/</code>) ce qui signifie que l'URL est <strong>relative au nom de domaine</strong>. Autrement dit, pour accéder à l'image, on remonte à la racine du domaine (en l'occurence <code>localhost</code>) puis à partir de ce point, on suit le chemin spécifié peu importe où est située la ressource à partir de laquelle on souhaite accéder à l'image (le fichier <code>index.html</code> de cet exemple pourrait être placé n'importe où sur le serveur <code>localhost</code>).</p>
+
+<p><em>Quel que soit le nouvel emplacement de  </em><code>index.html</code>, tant que le chemin utilisé pour l'image est <code>/images/licorne.png</code>, le navigateur servira <a href="http://localhost/images/licorne.png">http://localhost/images/licorn.png</a>.</p>
+
+<p>Par exemple, si le fichier est déplacé sous <code>http://localhost/toto</code>, on pourra toujours voir la licorne :</p>
+
+<p><img alt="Example of a page not at the root of a local web server" src="https://mdn.mozillademos.org/files/11755/Capture%20du%202015-10-12%2012-11-08.png" style="height: 260px; width: 380px;"></p>
+
+<h3 id="Ouvrir_un_fichier_local">Ouvrir un fichier local</h3>
+
+<p>Maintenant, ouvrons un fichier présent sur l'ordinateur. Il existe trois méthodes :</p>
+
+<ul>
+ <li>Dans le navigateur, cliquer sur <code>Fichier</code> ⯈ <code>Ouvrir un fichier…</code></li>
+ <li>Glisser-déposer un fichier dans le navigateur</li>
+ <li>Sélectionner un fichier HTML en double-cliquant dessus (sous réserve que le logiciel associé aux fichiers <code>.html</code> soit bien votre navigateur)</li>
+</ul>
+
+<p>Le navigateur interprètera toujours le fichier HTML mais n'affichera pas l'image :</p>
+
+<p><img alt="Example of a page open through the file protocol" src="https://mdn.mozillademos.org/files/11757/Capture%20du%202015-10-12%2012-18-34.png" style="height: 246px; width: 467px;"></p>
+
+<h4 id="Les_liens_absolus_relatifs_à_un_nom_de_domaine">Les liens absolus relatifs à un nom de domaine</h4>
+
+<p>Nous ne voyons plus l'image car nous avons utilisé un chemin <em>relatif à un nom de domaine.</em> En effet, nous avons indiqué au navigateur d'afficher une image situé au chemin suivant <code>/images/licorne.png</code>. Le navigateur va donc à la racine du système de fichiers de votre ordinateur et se déplace dans le répertoire <code>images</code> qui n'existe probablement pas. Le navigateur ne parvient pas à trouver l'image, il se résigne à utiliser l'attribut <code>alt</code> (et affiche donc "<code>une licorne !</code>").</p>
+
+<h4 id="Glossary(AJAX)_et_JavaScript">{{Glossary("AJAX")}} et JavaScript</h4>
+
+<p>Attention, JavaScript ne fonctionne pas bien avec le protocole <code>file</code>. Ainsi, lorsque vous voudrez lancer une requête {{Glossary("AJAX")}}, cela déclenchera cette procédure :</p>
+
+<ol>
+ <li>Chargement du code JavaScript qui remplacera une partie de la page web avec une autre partie.</li>
+ <li>Récupération de cette « autre partie » à l'adresse <code>http://localhost/ajax/remplacement.html</code>.</li>
+ <li>Remplacement de la première partie avec la seconde.</li>
+</ol>
+
+<p>Pour que la deuxième étapes fonctionne, {{Glossary("AJAX")}} a besoin d'utiliser le protocole {{Glossary("HTTP")}}. Or, le protocole pour accéder à un fichier local n'est pas <code>http://</code> mais <code>file://</code>. CQFD : on ne peut pas accéder à un fichier local avec une requête AJAX. Cette restriction s'applique également à de nombreuses autres API JavaScript qui ne fonctionnent qu'avec le protocole HTTP. Cela est dû au modèle de sécurité utilisé pour le Web, que nous aborderons dans un autre article.</p>
+
+<h3 id="Ce_que_nous_avons_appris">Ce que nous avons appris</h3>
+
+<p>Pour résumer, il est utile de repérer comment un fichier est ouvert dans un navigateur afin de déterminer le contexte dans lequel on se place et pour comprendre les restrictions qui s'appliquent (notamment pour un fichier ouvert en local avec <code>file://</code>). Cela permet parfois d'éviter de penser que le site ne fonctionne pas correctement alors qu'il s'agit uniquement d'une ouverture de fichier malencontreuse.</p>
+
+<ul>
+ <li>Lorsqu'on utilise le protocole <code>file</code> pour visualiser une page web, il est nécessaire d'utiliser des URL absolues avec des noms de domaine.</li>
+ <li>Le protocole <code>file</code> est restreint quant à l'utilisation de JavaScript.</li>
+</ul>
+
+<p>À l'opposé, le protocole <code>file</code> protocol est une méthode simple et efficace pour :</p>
+
+<ul>
+ <li>Vérifier l'allure d'un document sans sa mise en forme.</li>
+ <li>Vérifier l'accessibilité du site lorsque les images ne sont pas disponibles (les images sont alors remplacées par le texte contenu dans l'attribut <code>alt</code>).</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que nous avons vu les différences entre le protocole <code>http</code> et le protcole <code>file</code>, vous pouvez continuer :</p>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">en créant votre première page web</a> ou</li>
+ <li><a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">en transférant votre page actuelle vers un serveur distant</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/page_vs_site_vs_serveur_vs_moteur_recherche/index.html b/files/fr/apprendre/page_vs_site_vs_serveur_vs_moteur_recherche/index.html
new file mode 100644
index 0000000000..f5ff96a440
--- /dev/null
+++ b/files/fr/apprendre/page_vs_site_vs_serveur_vs_moteur_recherche/index.html
@@ -0,0 +1,98 @@
+---
+title: >-
+  Comprendre les différences entre une page web, un site web, un serveur web et
+  un moteur de recherche
+slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche
+tags:
+  - Beginner
+  - Web
+translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
+---
+<div class="summary">
+<p>Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable comprendre <a href="fr/Apprendre/Fonctionnement_Internet">comment fonctionne Internet</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre les différences entre une page web, un site web, un serveur web et un moteur de recherche.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (toutefois, si vous êtes curieux, vous pouvez consulter notre <a href="/fr/docs/Glossaire">glossaire</a>). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentés, mais néanmoins distinctes. Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :</p>
+
+<dl>
+ <dt>page web</dt>
+ <dd>un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari)</dd>
+ <dt>site web</dt>
+ <dd>un ensemble de pages web regroupées entre elles de différentes façons.</dd>
+ <dt>serveur web</dt>
+ <dd>un ordinateur qui héberge un site web</dd>
+ <dt>moteur de recherche</dt>
+ <dd>un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.)</dd>
+</dl>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Aucun contenu de pédagogie active n'est disponible pour le moment. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p>
+
+<h2 id="Allons_plus_loin">Allons plus loin</h2>
+
+<p>Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues.</p>
+
+<h3 id="Page_web">Page web</h3>
+
+<p>Une <em>page web</em> est un document simple qui peut être affiché par un {{Glossary("navigateur")}}. Ce document est écrit à l'aide du langage {{Glossary("HTML")}} (nous en reparlerons plus en profondeur dans d'<a href="https://developer.mozilla.org/fr/docs/Web/HTML">autres articles</a>) et peut inclure diverses autres ressources telles que :</p>
+
+<ul>
+ <li>des <em>feuilles de style</em> — qui déterminent l'apparence de la page ;</li>
+ <li>des <em> scripts</em> — qui ajoutent des fonctions interactives ; ou</li>
+ <li>du <em>contenu multimédia</em> — images, sons, vidéos.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note : </strong>Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers {{Glossary("PDF")}} ou des images, mais le terme <strong>page web</strong> désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme <strong>document</strong>.</p>
+</div>
+
+<p>Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :</p>
+
+<p style="text-align: center;"><img alt="Exemple d'une adresse de page web dans la barre d'adresse du navigateur" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="float: left; height: 239px; width: 650px;"></p>
+
+<p>Un <em>site web</em> est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web.</p>
+
+<p>Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée <em>page d'accueil</em>, du site web.</p>
+
+<p><img alt="Example du nom de domaine d'un site web dans la barre d'adresse du navigateur" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="height: 365px; width: 650px;"></p>
+
+<p>Les termes <em>page web</em> et <em>site web</em> sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un <em>site web à page unique</em>.</p>
+
+<h3 id="Serveur_web">Serveur web</h3>
+
+<p>Un <em>serveur web</em> est un ordinateur hébergant un ou plusieurs <em>sites web</em>. « Héberger » signifie que toutes les <em>pages web</em> et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le <em>serveur web</em> transmettra la <em>page web</em> du <em>site web</em> hébergé au navigateur de l'utilisateur.</p>
+
+<p>Attention à ne pas confondre <em>site web</em> et <em>serveur web</em>. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le <em>serveur web</em> ne répond pas et que, par conséquent, le <em>site web</em> n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme <em>serveur web</em> n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible.</p>
+
+<h3 id="Moteur_de_recherche">Moteur de recherche</h3>
+
+<p>Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'<em>autres</em> sites web.</p>
+
+<p>Il y en a tout plein : <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a> et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser votre préféré.</p>
+
+<p>Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un <em><strong>navigateur</strong></em> est un logiciel qui affiche des pages web, alors qu'un <strong><em>moteur de recherche</em></strong> est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie.</p>
+
+<p>Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut :</p>
+
+<p><img alt="Exemple de Firefox nightly affichant par défaut une page Google page personnalisée" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="height: 399px; width: 650px;"></p>
+
+<h2 id="Étapes_suivantes">Étapes suivantes</h2>
+
+<ul>
+ <li>Allez plus loin : <a href="/en-US/docs/Learn/What_is_a_web_server">Qu'est-ce qu'un serveur web ?</a></li>
+ <li>Voyez comment des pages web sont liées pour former un site web : <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Comprendre comment fonctionne les liens sur le Web</a></li>
+</ul>
diff --git a/files/fr/apprendre/publier_sur_le_web_combien_ça_coûte/index.html b/files/fr/apprendre/publier_sur_le_web_combien_ça_coûte/index.html
new file mode 100644
index 0000000000..e9ef0e5b3e
--- /dev/null
+++ b/files/fr/apprendre/publier_sur_le_web_combien_ça_coûte/index.html
@@ -0,0 +1,161 @@
+---
+title: 'Publier sur le Web : combien ça coûte ?'
+slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte
+tags:
+  - Beginner
+  - Learn
+  - WebMechanics
+translation_of: Learn/Common_questions/How_much_does_it_cost
+---
+<div class="summary">
+<p>Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable connaître<a href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web"> les logiciels nécessaires au développement web</a>, les différences entre <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web, un site web, etc</a>. et savoir <a href="/fr/Apprendre/Comprendre_noms_de_domaine">ce qu'est un nom de domaine</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).</p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Développer_son_site_soi-même">Développer son site soi-même</h3>
+
+<h4 id="Logiciels">Logiciels</h4>
+
+<h5 id="Éditeurs_de_texte">Éditeurs de texte</h5>
+
+<p>Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service.</p>
+
+<p>De nombreux éditeurs sont gratuits : <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a> et <a href="https://netbeans.org/">Netbeans</a>. Certains comme <a href="http://www.sublimetext.com/">Sublime Text</a> peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a> peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a> peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.</p>
+
+<p>Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.</p>
+
+<p>Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (<em>plugins</em>) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.</p>
+
+<h5 id="Éditeurs_graphiques">Éditeurs graphiques</h5>
+
+<p>Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires.</p>
+
+<p>Les éditeurs graphiques peuvent être gratuits (<a href="http://www.gimp.org/">GIMP</a>), payants (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, moins de 100 € ) voire assez chers (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a> pour plusieurs centaines d'euros).</p>
+
+<p>Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques.</p>
+
+<h5 id="Éditeurs_multimédia">Éditeurs multimédia</h5>
+
+<p>Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante).</p>
+
+<p>Pour éditer des fichiers audio, il existe des logiciels gratuits (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>) ou d'autres qui coûtent quelques centaines d'euros (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Les logiciels d'édition vidéo peuvent être gratuits (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> pour Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> pour Mac), coûter moins d'une centaine d'euros (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>) ou coûter plusieurs centaines d'euros (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins.</p>
+
+<h5 id="Outils_de_publication_client_Glossary(FTP)">Outils de publication : client {{Glossary("FTP")}}</h5>
+
+<p>Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.</p>
+
+<p>Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants.</p>
+
+<p>Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : <a href="https://filezilla-project.org/">FileZilla</a> pour toutes les plateformes, <a href="http://winscp.net/">WinSCP</a> pour Windows, <a href="https://cyberduck.io/">Cyberduck</a> pour Mac et Windows <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">et d'autres encore</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.</p>
+</div>
+
+<h4 id="Navigateurs">Navigateurs</h4>
+
+<p>Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez <a href="https://www.mozilla.org/firefox/all/">télécharger Firefox</a> ou <a href="https://www.google.com/chrome/browser/">télécharger Google Chrome</a>.</p>
+
+<h4 id="Accès_au_Web">Accès au Web</h4>
+
+<h5 id="Ordinateur_Modem">Ordinateur / Modem</h5>
+
+<p>Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. <em>A minima</em> vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.</p>
+
+<p>Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.</p>
+
+<p>Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet.</p>
+
+<h5 id="Accès_Internet">Accès Internet</h5>
+
+<p>Assurez-vous d'avoir suffisamment de bande passante :</p>
+
+<ul>
+ <li>Un accès bas-débit devrait suffire pour un site web « simple » (des images de taille raisonnable, du texte, un peu de CSS et de JavaScript).</li>
+ <li>Si, en revanche, vous souhaitez maintenir un site plus volumineux avec des centaines de fichiers voire servir des fichiers audio/vidéo depuis votre propre serveur web, vous aurez besoin d'un accès ADSL voire d'un accès à la fibre. Le prix et la disponibilité d'un tel accès peuvent varier selon votre situation géographique et selon que vous êtes un professionnel ou un particulier.</li>
+</ul>
+
+<h4 id="Hébergement">Hébergement</h4>
+
+<h5 id="Comprendre_ce_qu'est_la_«_bande_passante_»">Comprendre ce qu'est la « bande passante »</h5>
+
+<p>Le tarif d'un hébergeur  variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.</p>
+</div>
+
+<h5 id="Nom_de_domaine">Nom de domaine</h5>
+
+<p>Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement (<a href="https://www.1and1.com/">1&amp;1</a> et <a href="https://www.gandi.net/?lang=en">Gandi</a> sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :</p>
+
+<ul>
+ <li>Des obligations locales (certains noms de domaines locaux sont plus chers car en fonction du pays, le prix fixé est différent)</li>
+ <li>Des services associés au nom de domaine : certains bureaux d'enregistrement fournissent par exemple une protection contre le spam en masquant votre adresse physique et votre adresse électronique derrière leur adresse.</li>
+</ul>
+
+<h5 id="Hébergement_«_maison_»_et_hébergement_«_packagé_»">Hébergement « maison » et hébergement « packagé »</h5>
+
+<p>Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles.</p>
+
+<p>Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés (<a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web.</p>
+
+<h5 id="Hébergement_gratuit_et_hébergement_payant">Hébergement gratuit et hébergement payant</h5>
+
+<p>Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?</p>
+
+<ol>
+ <li>Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.</li>
+ <li>Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu.</li>
+</ol>
+
+<p>Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques.</p>
+
+<h3 id="Agences_web_professionnelles_et_hébergement">Agences web professionnelles et hébergement</h3>
+
+<p>Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous.<br>
+ <br>
+ Le coût d'un tel projet varie selon plusieurs facteurs :</p>
+
+<ul>
+ <li>Est-ce que le site web ne contient que quelques pages de texte ou est-ce un site complexe avec plusieurs centaines de pages ?</li>
+ <li>Le site est-il mis à jour régulièrement ou s'agit-il d'un site web statique ?</li>
+ <li>Est-ce que le site web doit être connecté au service informatique de votre entreprise pour récolter du contenu (par exemple des données internes) ?</li>
+ <li>Souhaitez-vous que votre site brille de mille feux avec les dernières mises en forme à la mode ?</li>
+ <li>Est-ce que l'agence web doit détecter et résoudre des problèmes de scénarios et d'ergonomie complexes (en organisant par exemples des tests utilisateurs ou du <em>A/B testing</em> afin de déterminer une meilleure solution) ?</li>
+</ul>
+
+<p>De plus, en ce qui concerne l'hébergement :</p>
+
+<ul>
+ <li>Faut-il des serveurs redondants au cas où un serveur tombe en panne ?</li>
+ <li>Est-ce qu'une fiabilité de 95% est suffisante ou faut-il un service qui fonctionne 24H/24, 7J/7 ?</li>
+ <li>Un serveur partagé est-il suffisant ou faut-il préférer un machine dédiée avec de hautes performances ?</li>
+</ul>
+
+<p>Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">préparer un environnement de travail</a>.</p>
+
+<ul>
+ <li>Vous pouvez lire <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">cet article sur comment choisir et installer un éditeur de texte</a>.</li>
+ <li>Si vous souhaitez en savoir plus sur les aspects de conception, vous pouvez <a href="/fr/Apprendre/Concevoir_page_web">décortiquer l'anatomie d'une page web</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/qu_est-ce_qu_un_serveur_web/index.html b/files/fr/apprendre/qu_est-ce_qu_un_serveur_web/index.html
new file mode 100644
index 0000000000..f035f561ac
--- /dev/null
+++ b/files/fr/apprendre/qu_est-ce_qu_un_serveur_web/index.html
@@ -0,0 +1,120 @@
+---
+title: Qu'est-ce qu'un serveur web ?
+slug: Apprendre/Qu_est-ce_qu_un_serveur_web
+tags:
+  - Beginner
+  - Infrastructure
+  - Learn
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p>Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir<a href="/fr/docs/Apprendre/Fonctionnement_Internet"> comment Internet fonctionne</a>, <a href="/fr/docs/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">les différences entre une page web, un site web, un serveur web et un moteur de recherche</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un « serveur web » peut faire référence à des composants logiciels (<em>software</em>) ou à des composants matériels (<em>hardware</em>) ou à des composants logiciels et matériels qui fonctionnent ensemble.</p>
+
+<ol>
+ <li>Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que <code>mozilla.org</code>.</li>
+ <li>Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera <em>a minima</em> un serveur <em>HTTP</em>. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages web).</li>
+</ol>
+
+<p>Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (<em>matériel</em>), le serveur HTTP (<em>logiciel</em>) renvoie le document demandé, également grâce à HTTP.</p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/11561/web-server.svg"></p>
+
+<p>Pour publier un site web, vous aurez besoin d'un serveur web <strong>statique</strong> ou <strong>dynamique</strong>.</p>
+
+<p>Un serveur web<strong> statique</strong> (aussi appelé une pile) est composé d'un ordinateur (<em>matériel</em>) et d'un serveur HTTP (<em>logiciel</em>). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur.</p>
+
+<p>Un serveur web <strong>dynamique </strong>possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un <em>serveur d'applications</em> et une <em>base de données</em>. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP.</p>
+
+<p>Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes.</p>
+
+<h3 id="Héberger_des_fichiers">Héberger des fichiers</h3>
+
+<p>Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.</p>
+
+<p>D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra :</p>
+
+<ul>
+ <li>toujours être en fonctionnement</li>
+ <li>toujours être connecté à Internet</li>
+ <li>conserver la même adresse IP au cours du temps (tous les fournisseurs d'accès ne fournissent pas une adresse IP fixe pour les particuliers</li>
+ <li>être maintenu par un fournisseur tiers.</li>
+</ul>
+
+<p>Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point <a href="/fr/Apprendre/How_much_does_it_cost#Hosting">dans cet article</a>.</p>
+
+<p>Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira <a href="/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">de transférer vos fichiers vers le serveur web</a>.</p>
+
+<h3 id="Communiquer_via_HTTP">Communiquer via HTTP</h3>
+
+<p>Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour <em>HyperText Transfer Protocol</em> en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs.</p>
+
+<p>Ici, un <em>protocole </em>est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état.</p>
+
+<dl>
+ <dt>Textuel</dt>
+ <dd>Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain.</dd>
+ <dt>Sans état</dt>
+ <dd>Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications).</dd>
+</dl>
+
+<p>HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un <a href="/fr/docs/Web/HTTP">article technique</a> à part entière. Pour le moment, voici les points les plus importants à garder en mémoire :</p>
+
+<ul>
+ <li>Seuls les <em>clients</em> peuvent effectuer des requêtes HTTP et uniquement vers des<em> serveurs. </em>Les serveurs ne peuvent que <em>répondre</em> à la requête d'un <em>client</em>.</li>
+ <li>Lorsque le client demande un fichier via HTTP, il doit fournir l'{{Glossary("URL")}} du fichier en question.</li>
+ <li>Le serveur web <em>doit </em>répondre à chaque requête HTTP même si la réponse est un message d'erreur.</li>
+</ul>
+
+<p>Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses.</p>
+
+<ol>
+ <li>Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant.</li>
+ <li>Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire.</li>
+ <li>Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté <a href="http://www.404notfound.fr/" rel="external">les pages d'erreurs 404</a> de leurs sites).</li>
+</ol>
+
+<p><img alt="Une page d'erreur HTTP, en l'occurrence la page 404 de MDN" src="https://mdn.mozillademos.org/files/11563/Capture.PNG" style="height: 695px; width: 1623px;"></p>
+
+<h3 id="Contenu_statique_et_contenu_dynamique">Contenu statique et contenu dynamique</h3>
+
+<p>En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.</p>
+
+<p>Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.</p>
+
+<p>Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle <a href="/fr/docs/MDN/Kuma">Kuma</a> et est construite <a href="https://www.python.org/">Python</a> (grâce au <em>framework</em> <a href="https://www.djangoproject.com/">Django</a>). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.</p>
+
+<p>Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour <em>Content Management Systems</em> en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que vous connaissez les serveurs web, vous pourriez :</p>
+
+<ul>
+ <li>continuer votre lecture avec<a href="/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte"> combien ça coûte de faire quelque chose sur le Web</a></li>
+ <li>en savoir plus sur <a href="/fr/docs/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web">les différents logiciels nécessaires à la création d'un site web</a></li>
+ <li>poursuivre avec quelque chose de plus pratique comme <a href="/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">comment transférer des fichiers vers un serveur web</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/quels_logiciels_sont_nécessaires_pour_construire_un_site_web/index.html b/files/fr/apprendre/quels_logiciels_sont_nécessaires_pour_construire_un_site_web/index.html
new file mode 100644
index 0000000000..fc0e1bcfc8
--- /dev/null
+++ b/files/fr/apprendre/quels_logiciels_sont_nécessaires_pour_construire_un_site_web/index.html
@@ -0,0 +1,189 @@
+---
+title: De quels logiciels ai-je besoin pour construire un site web ?
+slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web
+tags:
+  - Beginner
+  - Learn
+  - NeedsActiveLearning
+  - WebMechanics
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+<p>Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez déjà connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">la différence entre une page web, un serveur web et un moteur de recherche.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :</p>
+
+<ol>
+ <li>Créer et éditer des pages web</li>
+ <li>Téléverser (<em>uploader</em>) vos fichiers vers votre serveur web</li>
+ <li>Visualiser votre site web.</li>
+</ol>
+
+<p>Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Créer_et_éditer_des_pages_web">Créer et éditer des pages web</h3>
+
+<p>Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme <strong>{{Glossary("RTF")}}</strong> vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site.</p>
+
+<p>Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Système d'exploitation</th>
+   <th scope="col">Éditeur natif par défaut</th>
+   <th scope="col">Éditeur tiers</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29" rel="external">Bloc-notes</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://notepad-plus-plus.org/fr/">Notepad++</a></li>
+     <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li>
+     <li><a href="https://www.jetbrains.com/webstorm">Web Storm</a></li>
+     <li><a href="http://brackets.io">Brackets</a></li>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://fr.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li>
+     <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io">Brackets</a></li>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="http://fr.wikipedia.org/wiki/Vi" rel="external">Vi</a> (tout système UNIX)</li>
+     <li><a href="http://fr.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li>
+     <li><a href="https://fr.wikipedia.org/wiki/Kate_%28logiciel%29" rel="external">Kate</a> (KDE)</li>
+     <li><a href="https://en.wikipedia.org/wiki/Leafpad">LeafPad</a> (Xfce)</li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li>
+     <li><a href="http://www.vim.org/" rel="external">Vim</a></li>
+     <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io">Brackets</a></li>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td></td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :</p>
+
+<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p>
+
+<h3 id="Transférer_des_fichiers_vers_un_serveur_web">Transférer des fichiers vers un serveur web</h3>
+
+<p>Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (<em>uploader</em>) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article<a class="new" href="/en-US/docs/Learn/How_much_does_it_cost"> combien ça coûte de publier quelque chose sur le Web ?</a>). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour <em>File Transfer Protocol</em> ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> et <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages">Git/Github</a>.</p>
+
+<div class="blockIndicator note">
+<p>FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (<em>Secure</em> FTP) ou via RSync avec SSH.</p>
+</div>
+
+<p>Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">dans un article à part</a>. Voyons tout de même une liste de clients FTP basiques :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Système d'exploitation</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;">Logiciel client FTP</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td><a href="http://winscp.net" rel="external">WinSCP</a></td>
+   <td colspan="1" rowspan="3"><a href="https://filezilla-project.org/">FileZilla</a> (tout système d'exploitation)</td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br>
+    <a href="http://www.konqueror.org/">Konqueror</a> (KDE)</td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td><a href="http://cyberduck.de/">Cyberduck</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualiser_des_sites_web">Visualiser des sites web</h3>
+
+<p>Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">nombreux</a> navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes :</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/firefox/new/">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
+</ul>
+
+<p>Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://dolphin.com/" rel="external">Dolphin</a> ou<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p>
+
+<p>Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme <a href="http://browsershots.org/" rel="external">Browsershots</a> ou <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur <a href="https://modern.ie" rel="external">modern.ie</a>, une machine virtuelle prête à être utilisée).</p>
+
+<p>Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative <a href="http://opendevicelab.com/" rel="external">Open Device Lab</a>. Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li>Certains de ces logiciels sont libres et/ou gratuits, d'autres ne le sont pas. <a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">En savoir plus sur le coût d'un site web.</a></li>
+ <li>Si vous souhaitez en apprendre plus sur les éditeurs de texte et choisir celui qui sera le plus adapté, consultez notre article sur <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">comment choisir, installer et paramétrer son éditeur de texte</a>.</li>
+ <li>Si vous vous demandez comment publier votre site web sur le Web, jetez un coup d'œil à <a href="/fr/docs/Apprendre/Upload_files_to_a_web_server">« Comment transférer des fichiers vers un serveur web »</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/ssl_et_tls/index.html b/files/fr/apprendre/ssl_et_tls/index.html
new file mode 100644
index 0000000000..dc7c7eb50a
--- /dev/null
+++ b/files/fr/apprendre/ssl_et_tls/index.html
@@ -0,0 +1,84 @@
+---
+title: SSL et TLS
+slug: Apprendre/SSL_et_TLS
+tags:
+  - Security
+  - Tutorial
+translation_of: Archive/Security/SSL_and_TLS
+---
+<p>{{draft}}</p>
+
+<p>Les protocoles <em>Secure Sockets Layer</em> (SSL) (ou Couche de sockets sécurisée) et <em>Transport Layer Security</em> (TLS) (ou Couche de transport sécurisée) sont des protocoles universellement acceptés pour l'établissement de communications authentifiées et chiffrées entre des clients d'une part et des serveurs d'autre part. L'authentification liée au serveur et celle liée au client utilisent toutes les deux SSL/TLS.</p>
+
+<p>SSL/TLS utilise un système de combinaison entre une clé publique et un chiffrement à clé symétrique. Le chiffrement par clé symétrique est beaucoup plus rapide qu'un chiffrement par clé publique mais le chiffrement par clé publique permet d'utiliser de meilleures techniques d'authentification Une « session » SSL/TLS commence donc toujours par un échange de message qu'on appellera l'établissement de liaison (<em>handshake</em> est le terme communément employé en anglais). Cet établissement de liaison permet au serveur de s'authentifier envers le client en utilisant des techniques basées sur des algorithmes à clé publique, cela permet ensuite au client et au serveur de coopérer pour créer des clés symétriques afin de chiffrer/déchiffrer rapidement les messages échangées pendant la session.</p>
+
+<p>Ces deux protocoles supportent différents algorithmes de chiffrement pour différentes opérations : l'authentification entre le serveur et le client, la transmission de certificats, l'établissement de clés de sessions. Les clients et serveurs peuvent supporter différents algorithmes de chiffrement. Une des fonctionnalités de l'établissement de liaison est la détermination du meilleur algorithme de chiffrement, supporté par le serveur et par le  client. C'est cet algorithme qui sera ensuite utilisé pour les opérations listées juste avant.</p>
+
+<p>Les algorithmes utilisés pour échanger des clés, comme RSA ou la cryptographie sur courbes elliptiques (ECC pour <em>Elliptic Curve Cryptography</em> en anglais) déterminent la façon dont le client et le serveur calculent les clés symétriques à utiliser pendant la session SSL/TLS. Le protocole SSL repose principalement sur des ensembles d'algorithmes qui incluent RSA alors que TLS, plus moderne supporte à la fois RSA et des algorithmes d'ECC.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La sécurité de clés RSA dépend de sa longueur et de la capacité de calcul des ordinateurs. À l'heure actuelle, il est recommandé d'utiliser un clé RSA longue de 2048 bits. Bien que de nombreux serveurs web continuent d'utiliser des clés de 1024 bits, il serait préférable de passer à 2048 bits. Pour les ordinateurs 64 bits, des clés encore plus fortes devraient être utilisées (3072 ou 4096 bits par exemple).</p>
+</div>
+
+<p>Étant donné que certaines infrastructures de clés publiques utilisent encore RSA avant de migrer vers d'autres systèmes cryptographiques comme ECC, les serveurs devraient, dans la mesure du possible, continuer à supporter RSA.</p>
+
+<h3 id="Les_suites_de_chiffrement_supportées_par_RSA">Les suites de chiffrement supportées par RSA</h3>
+
+<p>Les suites de chiffrement communément supportées et qui utilisent un échange de clés basé sur RSA comportent généralement :</p>
+
+<ul>
+ <li>AES et une authentification des messages basée sur SHA. Les algorithmes de chiffrement <em>Advanced Encryption Standard</em> (AES) utilisent une taille de bloc de 128 bits et des clés de 128 ou 256 bits. Il existe 3.4 x 10<sup>38</sup> clés différentes sur 128 bits et 1.1 x 10<sup>77</sup> clés différentes sur 256 bits. AES possède le plus grand nombre de clés parmi les différents algorithmes supportés par SSL, ce qui en fait donc le plus « fort ». Ces suites de chiffrement sont conformes à FIPS.</li>
+ <li>Triple DES et authentification des messages basée sur SHA. Le triple DES (pour <em>Data Encryption Standard</em>) est le deuxième algorithme le plus fort supporté par SSL bien qu'il ne soit pas aussi rapide que RC4. Le triple DES utilise une clé trois fois plus grande qu'une clé utilisée pour un DES standard. La taille de clé est donc importante, ce qui permet d'avoir 3.7 * 10<sup>50</sup> clés possibles. Cette suite de chiffrement est conforme à FIPS.</li>
+ <li>RC4, RC2 et une authentification des messages basée sur MD5. Les algorithmes RC4 et RC2 chiffrent sur 128 bits, ce qui permet d'avoir (environ) 3.4 * 10<sup>38</sup> clés différentes. Les algorithmes basés sur RC4 sont plus rapides que ceux basés sur RC2. RC4 peut utiliser une authentification des messages basée sur SHA ou MD5.</li>
+ <li>DES et une authentification des messages basées sur SHA. DES, utilisé sur 56 bits permet de disposer d'environ 7.2 x 10<sup>16</sup> clés différentes. Étant devenue trop faible cryptographiquement parlant, cette suite de chiffrement n'est plus conforme à FIPS.</li>
+</ul>
+
+<h3 id="Utiliser_les_courbes_elliptiques_pour_la_cryptographie">Utiliser les courbes elliptiques pour la cryptographie</h3>
+
+<p>La cryptographie sur courbes elliptiques (ou <em>Elliptic Curve Cryptography</em>, ECC en anglais) est un système qui utilise les courbes elliptiques afin de créer des clés pour chiffrer des données. ECC permet d'avoir des clés de chiffrement plus fortes et également plus courtes que celles utilisées avec RSA. Cela fait qu'ECC est plus rapide et plus efficace, en termes d'implémentation, par rapport à RSA.</p>
+
+<p>ECC dispose donc de plusieurs avantages par rapport à RSA. Un des désavantages d'ECC est qu'il est, pour l'instant, moins largement supporté que RSA.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Bits de sécurité</th>
+   <th scope="col">Longueur de clé RSA</th>
+   <th scope="col">Longueur de clé ECC</th>
+  </tr>
+ </thead>
+ <caption>Comparaison de la force des algorithmes RSA et ECC</caption>
+ <tbody>
+  <tr>
+   <td>80</td>
+   <td>1024</td>
+   <td>160-223</td>
+  </tr>
+  <tr>
+   <td>112</td>
+   <td>2048</td>
+   <td>224-255</td>
+  </tr>
+  <tr>
+   <td>128</td>
+   <td>3072</td>
+   <td>256-383</td>
+  </tr>
+  <tr>
+   <td>192</td>
+   <td>7860</td>
+   <td>384-511</td>
+  </tr>
+  <tr>
+   <td>256</td>
+   <td>15360</td>
+   <td>512+</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les informations de ce tableau proviennent du <em>National Institute of Standards and Technology</em> (NIST). Pour plus d'informations, se référer à <a href="http://csrc.nist.gov/publications/nistpubs/800-57/SP800-57-Part1.pdf">http://csrc.nist.gov/publications/nistpubs/800-57/SP800-57-Part1.pdf</a>.</p>
+
+<p>Pour plus d'informations sur ECC, voir également la <a href="https://tools.ietf.org/html/rfc4492">RFC 4492</a> (et notamment la section 5.6.1 et le tableau 2).</p>
+
+<p>Une excellente ressource, disponible en français, pour comprendre SSL/TLS est <a href="http://www.iletaitunefoisinternet.fr/ssltls-benjamin-sonntag/">la conférence de Benjamin Sonntag réalisée dans le cadre d'Il était une fois Internet (CC BY-SA)</a>.</p>
diff --git a/files/fr/apprendre/sécurité_tcp_ip/index.html b/files/fr/apprendre/sécurité_tcp_ip/index.html
new file mode 100644
index 0000000000..12c1d0177e
--- /dev/null
+++ b/files/fr/apprendre/sécurité_tcp_ip/index.html
@@ -0,0 +1,40 @@
+---
+title: Sécurité TCP/IP
+slug: Apprendre/Sécurité_TCP_IP
+tags:
+  - Beginner
+  - Networking
+  - Security
+  - Tutorial
+translation_of: Archive/Security/TCP_IP
+---
+<p>{{draft}}</p>
+
+<p>TCP/IP est très largement utilisé afin de transmettre les communications sur le réseau. Les communications TCP/IP se composent de quatre couches qui fonctionnent ensemble. Lorsqu'un utilisateur souhaite transférer des données sur un/des réseau(x), les données sont passées de la couche la plus haute à la couche la plus basse et chaque couche ajouter des informations. À chaque niveau, l'unité logique qui est manipulée est généralement composées d'un en-tête et d'une charge utile. La<em> charge utile</em> correspond à l'information passée depuis la couche précédente. L'<em>en-tête</em> contient des informations spécifiques à la couche courante (telles que les adresses utilisées). Au niveau de la couche applicative, la charge utile correspond aux données transmises. La couche la plus basse envoie les différentes données via le réseau physique. Une fois arrivée à destination, les données repassent vers les couches les plus hautes. En résumé, les données produites par une couche sont encapsulées dans un conteneur plus grand dans la couche inférieure. Les quatres couches qui permettent à TCP/IP de fonctionner sont présentées ci-après, de la plus haute à la plus basse :</p>
+
+<ul>
+ <li><strong>La couche applicative</strong>. Cette couche envoie et reçoit des données pour des applications spécifiques telles que le <em>Domain Name System</em> (DNS), <em>HyperText Transfer Protocol</em> (HTTP), et <em>Simple Mail Transfer Protocol</em> (SMTP).</li>
+ <li><strong>La couche de transport</strong><strong>.</strong> Cette couche fournit des services pour transporter les données entre les réseaux (en utilisant ou non des services avec connexions). Cette couche peut éventuellement assurer la fiabilité des communications. <em>Transmission Control Protocol</em> (TCP) (pour protocole de contrôle des transmissions) et <em>User Datagram Protocol</em> (UDP) (pour protocole de datagramme utilisateur) sont les protocoles de transports les plus communément utilisés.</li>
+ <li><strong>La couche réseau</strong><strong>.</strong> Cette couche s'occupe de router les paquets entre les différents réseaux. L'<em>Internet Protocol</em> (IP) est le protocole réseau fondamental pour la mise en oeuvre de TCP/IP. D'autres protocoles utilisés à ce niveau sont <em>Internet Control Message Protocol</em> (ICMP) (pour protocole de contrôle des message Internet) et <em>Internet Group Management Protocol</em> (IGMP) (pour protocole de gestion des groupes Internet).</li>
+ <li><strong>La couche physique</strong><strong>.</strong> Cette couche gère les communications sur les composants physiques. Le protocole le plus connu pour cette couche est Ethernet.</li>
+</ul>
+
+<p>Des contrôles de sécurité existent pour chaque couche du modèle TCP/IP. Comme vu précédemment, les données sont passées de la couche la plus haute vers la couche la plus basse, chaque couche ajoutant des informations. C'est pour cela que les contrôles de sécurité effectués par une couche ne bénéficient pas aux couches inférieures car celles-ci effectuent des opérations dont les couches supérieures ne sont pas conscientes. Voici quelques contrôles de sécurité mis en œuvre par chaque couche :</p>
+
+<ul style="list-style-type: square;">
+ <li><strong>La couche applicative</strong><strong>.</strong> Des contrôles distincts doivent être mis en place pour chaque application. Si, par exemple, une application doit envoyer des données sensibles sur les réseaux, l'application devra être adaptée pour mettre en place ces contrôles.  Bien que cette solution offre un certain contrôle et une certaine flexibilité, cela peut demander des efforts importants. Concevoir et implémenter une application sûre sur le plan cryptographique est très complexe et il faut également veiller à ne pas ajouter de vulnérabilités. Bien que ces sécurités puissent protéger le contenu lié aux applications, elles ne pourront pas protéger d'autres données comme les adresses IP qui sont utilisées sur d'autres couches inférieures. Le plus possible, les contrôles effectués à cette couche devraient être basés sur des standards définis depuis quelques temps. Par exemple <em>Secure Multipurpose Internet Mail Extensions</em> (S/MIME), est communément utilisé pour chiffrer les messages électroniques.</li>
+ <li><strong>La couche de transport</strong><strong>.</strong> Les contrôles présents à cette couche peuvent être utilisés pour protéger les données d'une session donnée entre deux hôtes. Les informations liées aux adresses IP sont ajoutées avec la couche réseau, la couche de transport ne peut donc pas protéger ces données. L'exemple le plus connu pour une sécurisation effectuée à ce niveau est celle du trafic HTTP par TLS (<em>Transport Layer Security</em> ou sécurité de la couche de transport) (TLS correspond à la version 3 du standard SSL, TLS est notamment décrit dans la RFC 4346). À la différence des contrôles applicatifs qui nécessitent de modifier l'application, les contrôles effectués au niveau de la couche de transport (tels que TLS) sont moins intrusifs car ils n'ont pas besoin de connaître le fonctionnement ou les caractéristiques d'une application. TLS est un protocole testé et robuste qui possède plusieurs implémentations qui ont été ajoutées à différentes applications. Il s'agit donc d'une option intéressante comparée à l'application de contrôles au niveau applicatif.</li>
+ <li><strong>La couche réseau</strong><strong>.</strong> Les contrôles appliqués sur cette couche portent sur l'ensemble des applications. Toutes les communications effectuées sur le réseau entre deux hôtes ou deux réseaux peuvent être protégées à cette couche sans modifier les applications côté client ou côté serveur. Dans certains environnements, les contrôles de la couche réseau (par exemple <em>Internet Protocol Security</em> (IPsec)) représentent une meilleure solution que des contrôles aux niveaux supérieurs qui nécessiteraient de modifier les applications. Les contrôles effectués à ce niveau permettent également aux administrateurs réseaux de s'assurer du respect de certaines règles de sécurité. Un avantage intrinsèque aux contrôles effectués à ce niveau est qu'ils peuvent protéger les informations IP (telles que les adresses). Cependant, les contrôles de la couche réseau sont moins flexibles que ceux des couches supérieures. Les tunnels VPN SSL permettent de sécuriser les communications TCP et UDP (que ce soit entre un client et un serveur ou autre), comme tels, ils sont considérés comme des VPN de couche réseau.</li>
+ <li><strong>La couche physique</strong><strong>.</strong> Les contrôles effectués sur la couche physique concernent toutes les communications qui transitent sur un lien physique donné. Cela peut être un circuit dédié entre deux bâtiments ou une connexion entre un modem et un fournisseur d'accès. Les contrôles de la couche réseau sont souvent apportés par des composants matériels spécifiques. Cette couche étant plus basse que la couche réseau, les contrôles effectués sur la couche physique protègent les données ainsi que les informations IP. Par rapport aux contrôles évoqués précedemment, les contrôles effectués sur cette couche sont plutôt simples à implémenter. Ils permettent également supporter d'autres protocoles réseaux. Ces contrôles s'appliquent sur un lien physique donné, ils ne peuvent donc protéger des communications qui emprunteraient plusieurs liens (par extension, ils ne peuvent donc pas créer un VPN au niveau d'Internet). Une connexion Internet emprunte généralement plusieurs liens physiques, la protection d'une telle connexion au niveau physique nécessiterait donc de contrôler les différents liens, ce qui est rarement faisablee. Ces contrôles existent depuis de nombreuses années afin de rajouter un niveau de protection sur des liens physiques douteux.</li>
+</ul>
+
+<p>Vu qu'ils permettent de protéger les données des applications sans qu'il soit nécessaire de les modifier, les contrôles de la couche réseau sont les plus utilisés pour sécuriser les communications entre différents réseaux partagés tels qu'Internet. Les contrôles de la couche réseau fournissent une solution qui couvre les données des différentes applications et les informations IP. Cependant, dans de nombreux cas, des contrôles à d'autres niveaux seront plus pertinents. Ainsi, si une seule application doit être protégée, des contrôles au niveau du réseau pourraient être excessifs. Les protocoles de contrôle de la couche de transport comme SSL/TLS sont communément utilisés pour sécuriser les communications d'applications basées sur HTTP (bien que ces protocoles permettent également de sécuriser des communications SMTP, POP, IMAP, FTP, etc.). Les principaux navigateurs web supportent tous TLS et il n'est donc pas nécessaire d'installer un logiciel client ou de configurer quoi que ce soit pour utiliser ce protolce. Pour chaque niveau, les contrôles offrent des avantages et des fonctionnalités qu'il est impossible de retrouver aux autres niveaux.</p>
+
+<p>SSL/TLS est le contrôle de sécurité le plus utilisé au niveau de la couche de transport. Selon l'implémentation et la configuration de SSL/TLS, ce dernier peut fournir les protections suivantes :</p>
+
+<ul style="list-style-type: square;">
+ <li><strong>Confidentialité</strong><strong>.</strong> SSL/TLS permet de s'assurer que les données ne peuvent pas être lues par des tiers non autorisés. Pour cela, les données sont chiffrées grâce à un algorithme de chiffrement et grâce à une clé secrète, connue uniquement des deux interlocuteurs qui souhaitent échanger des données. Les données ne peuvent être déchiffrées que si l'on dispose de la clé secrète.</li>
+ <li><strong>Intégrité</strong><strong>.</strong> SSL/TLS permet de déterminer si les données ont été modifiées (intentionnellement ou non) pendant le transfert. L'intégrité des données est vérifiée grâce à une valeur « MAC » (pour code d'authentification des message) qui est une somme de vérification cryptographique des données. Si les données ont été modifiées, la MAC calculée initialement et la MAC calculée à la suite du transfert seront différentes.</li>
+ <li><strong>Authentification entre pairs</strong><strong>.</strong> Chaque point d'échange SSL/TLS peut confirmer l'identité d'un autre point d'échange SSL/TLS avec lequel il souhaiterait communiquer afin de s'assurer que les données sont bien envoyées à l'hôte voulu. Cette authentification SSL/TLS est généralement unilatérale : le client authentifie le serveur. Cela dit, l'authentification peut être effectuée symétriquement.</li>
+ <li><strong>Protection contre le rejeu</strong><strong>.</strong> Les mêmes données ne peuvent pas être transmises plusieurs fois et les données ne peuvent pas être transmises dans le désordre.</li>
+</ul>
diff --git a/files/fr/apprendre/tester_le_bon_fonctionnement_de_votre_site_web/index.html b/files/fr/apprendre/tester_le_bon_fonctionnement_de_votre_site_web/index.html
new file mode 100644
index 0000000000..317135bcf5
--- /dev/null
+++ b/files/fr/apprendre/tester_le_bon_fonctionnement_de_votre_site_web/index.html
@@ -0,0 +1,178 @@
+---
+title: Tester le bon fonctionnement de votre site web
+slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web
+tags:
+  - Beginner
+  - Document
+  - Guide
+  - NeedsActiveLearning
+  - Web
+  - Web Development
+  - WebMechanics
+translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly
+---
+<div class="summary">
+<p>Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir <a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">comment transférer des fichiers vers un serveur web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="Summary">Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?</p>
+
+<p>Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.</p>
+
+<p>Voyons donc comment diagnostiquer et résoudre ces problèmes.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'existe pas encore de matériau interactif pour cet article. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer !</a></em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Tester_avec_votre_navigateur">Tester avec votre navigateur</h3>
+
+<p>La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page.</p>
+
+<h4 id="Où_est_passée_l'image">Où est passée l'image ?</h4>
+
+<p>Allons sur notre site web : <code>http://demozilla.hebergeurexemple.net/</code>. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !</p>
+
+<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/11759/Capture%20du%202015-10-12%2017-21-20.png" style="height: 174px; width: 364px;"></p>
+
+<p>Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (<strong>Outils ➤ Développement Web ➤ Réseau</strong>) puis rechargeons la page :</p>
+
+<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/11763/Capture%20du%202015-10-12%2018-21-23.png" style="height: 299px; width: 681px;"></p>
+
+<p>Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.</p>
+
+<h4 id="Les_status_HTTP">Les status HTTP</h4>
+
+<p>Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :</p>
+
+<dl>
+ <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200 : OK</strong></dt>
+ <dd>La ressource demandée a bien été transmise.</dd>
+ <dt><strong>301 : Déplacée de façon permanente (<em>Moved permanently</em>)</strong></dt>
+ <dd>La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.</dd>
+ <dt><strong>304 : Non modifiée (<em>Not modified</em>)</strong></dt>
+ <dd>La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante.</dd>
+ <dt><strong>403 : Accès interdit (<em>Forbidden</em>)</strong></dt>
+ <dd>Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire).</dd>
+ <dt><strong>404 : Non trouvée (<em>Not found</em>)</strong></dt>
+ <dd>Le message est plutôt explicite, nous en discuterons dans la suite de cet article.</dd>
+ <dt><strong>500 : Erreur interne du serveur (<em>Internal server error</em>)</strong></dt>
+ <dd>Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur.</dd>
+ <dt><strong>503 : Service indisponible (<em>Service unavailable</em>)</strong></dt>
+ <dd>Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<p>Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404.</p>
+
+<h4 id="Corriger_l'erreur_404">Corriger l'erreur 404</h4>
+
+<p>Où est donc le problème ?</p>
+
+<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/11765/Capture%20du%202015-10-12%2018-45-07.png" style="height: 206px; width: 263px;"></p>
+
+<p>À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML <code>licornes.png</code> plutôt que <code>licorne.png</code>. En corrigeant cette erreur avec l'attribut <code>src</code></p>
+
+<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/11767/Capture%20du%202015-10-12%2018-50-56.png" style="height: 162px; width: 852px;"></p>
+
+<p>Puis en sauvegardant et <a href="/en-US/Learn/Upload_files_to_a_web_server">en envoyant le fichier vers le serveur</a>, on peut ensuite recharger la page dans le navigateur :</p>
+
+<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/11769/Capture%20du%202015-10-12%2018-53-50.png" style="height: 422px; width: 531px;"></p>
+
+<p>Et voilà, revenons sur les status {{Glossary("HTTP")}} :</p>
+
+<ul>
+ <li><strong>200</strong> apparaît pour toutes les ressources ici <code>/</code>, <code>basics.css</code> et <code>licorne.png</code> : cela signifie que tous les éléments ont été rechargés.</li>
+ <li><strong>304</strong> : Vous pouvez obtenir un code pour <code>basic.css</code>, cela signifie que le fichier n'a pas été modifié depuis la dernière requête. Le navigateur utilise alors la version du fichier qu'il a en cache plutôt que d'en demander un nouvel exemplaire.</li>
+</ul>
+
+<p>Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP !</p>
+
+<h3 id="Les_erreurs_fréquentes">Les erreurs fréquentes</h3>
+
+<p>Les erreurs les plus fréquentes sont les suivantes.</p>
+
+<h4 id="Des_coquilles_dans_l'adresse">Des coquilles dans l'adresse</h4>
+
+<p>Dans la capture suivante, nous avons voulu accéder à <code>http://demozilla.hebergeurexemple.net/</code> mais nous avons oublié un « m » :</p>
+
+<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/11771/Capture%20du%202015-10-12%2018-58-19.png" style="height: 511px; width: 803px;"></p>
+
+<p>L'adresse est introuvable… en effet.</p>
+
+<h4 id="Les_erreurs_404">Les erreurs 404</h4>
+
+<p>La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers.</p>
+
+<h4 id="Les_erreurs_JavaScript">Les erreurs JavaScript</h4>
+
+<p>Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script.</p>
+
+<p>Pour voir ces erreurs, ouvrez la console (<strong>Outils ➤ Développement web ➤ Console web</strong>) and puis rechargez la page:</p>
+
+<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/11773/Capture%20du%202015-10-12%2019-10-52.png" style="height: 391px; width: 461px;"></p>
+
+<p>Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans <a href="/fr/Apprendre/JavaScript">une autre série d'articles</a>).</p>
+
+<h3 id="D'autres_points_de_contrôles">D'autres points de contrôles</h3>
+
+<p>Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ».</p>
+
+<h4 id="Qu'en_est-il_de_la_performance">Qu'en est-il de la performance ?</h4>
+
+<p>Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme <a href="http://www.webpagetest.org/">webpagetest.org</a> ou des modules complémentaires comme <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> qui peuvent fournir des indications intéressantes :</p>
+
+<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p>
+
+<p>Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.</p>
+
+<h4 id="Est-ce_que_le_serveur_réagit_suffisamment_vite">Est-ce que le serveur réagit suffisamment vite ?</h4>
+
+<p><code>ping</code> est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement :</p>
+
+<pre>$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms</pre>
+
+<p>Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci <strong>Ctrl+C</strong> pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme <code>ping</code> contactera le serveur indéfiniment.</p>
+
+<h3 id="Une_checklist_de_base">Une <em>checklist</em> de base</h3>
+
+<ul>
+ <li>Vérifier les erreurs 404</li>
+ <li>S'assurer que chaque page web fonctionne comme attenu</li>
+ <li>Vérifier le site web avec plusieurs navigateurs pour s'assurer qu'il s'affiche de façon cohérente sur ces différents navigateurs</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets.</p>
+
+<ul>
+ <li>De nombreuses personnes peuvent accéder à votre site, mieux vaut donc que celui-ci <a href="/fr/Apprendre/Accessibilité">soit le plus accessible possible</a>.</li>
+ <li>Le site a l'air brut de décoffrage ? C'est le bon moment pour <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">apprendre un peu de CSS</a>.</li>
+</ul>
diff --git a/files/fr/apprendre/transférer_des_fichiers_vers_un_serveur_web/index.html b/files/fr/apprendre/transférer_des_fichiers_vers_un_serveur_web/index.html
new file mode 100644
index 0000000000..4d8d8330fa
--- /dev/null
+++ b/files/fr/apprendre/transférer_des_fichiers_vers_un_serveur_web/index.html
@@ -0,0 +1,134 @@
+---
+title: Transférer des fichiers vers un serveur web
+slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web
+tags:
+  - Beginner
+  - NeedsActiveLearning
+  - WebMechanics
+translation_of: Learn/Common_questions/Upload_files_to_a_web_server
+---
+<div class="summary">
+<p>Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. </p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable comprendre <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est un serveur web</a> et <a href="/fr/Apprendre/Comprendre_noms_de_domaine">comment fonctionnent les noms de domaines</a>. Vous devriez également savoir <a href="/fr/Apprendre/Set_up_a_basic_working_environment">mettre en place un environnement simple de développement web</a> et savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">écrire une page web simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Maintenant que vous avez <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">construit une page web</a>, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Mettre_les_mains_sur_un_client_FTP_FireFTP">Mettre les mains sur un client FTP : FireFTP</h3>
+
+<p>Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car <a href="https://addons.mozilla.org/firefox/addon/fireftp/">c'est un module complémentaire</a>.</p>
+
+<div class="note">
+<p>Il existe de nombreuses autres options, voir <a href="/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client">les outils de publications : les clients FTP</a> pour plus d'informations.</p>
+</div>
+
+<p>Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :</p>
+
+<ol>
+ <li><strong>Menu de Firefox <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li>
+ <li><strong>Outils </strong>➤ <strong>Développement web</strong> ➤ <strong>FireFTP</strong></li>
+</ol>
+
+<p>Vous devriez voir apparaître cette fenêtre :</p>
+
+<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p>
+
+<h3 id="Se_connecter">Se connecter</h3>
+
+<p>Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : <code>monsiteperso.hebergeurexemple.net</code>.</p>
+
+<p>Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part :</p>
+
+<blockquote>
+<p>Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple.</p>
+
+<p>Votre compte est : <code>demozilla</code></p>
+
+<p>Votre site sera accessible à cette adresse <code>demozilla.hebergeurexemple.net</code></p>
+
+<p>Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes :</p>
+
+<ul>
+ <li>Serveur FTP : <code>ftp://demozilla.hebergeurexemple.net</code></li>
+ <li>Utilisateur : <code>demozilla</code></li>
+ <li>Mot de passe : <code>pandar0ux</code></li>
+ <li>Pour publier des fichiers sur le Web, placez les dans le répertoire <code>Public/htdocs</code>.</li>
+</ul>
+</blockquote>
+
+<p>Tout d'abord, jetons un coup d'œil à <code>http://demozilla.hebergeurexemple.net/</code> — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :</p>
+
+<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».</p>
+</div>
+
+<p>Pour connecter votre client FTP au serveur distant, cliquez sur le bouton <em>« Créer un compte »</em> de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :</p>
+
+<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p>
+
+<h3 id="Ici_et_là-bas_la_vue_locale_et_la_vue_distante">Ici et là-bas : la vue locale et la vue distante</h3>
+
+<p>Vous pouvez ensuite vous connecter sur ce nouveau compte :</p>
+
+<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p>
+
+<p>Examinons cet écran :</p>
+
+<ul>
+ <li>Sur la gauche, vous voyez vos fichier locaux (ceux de votre ordinateur). Déplacez vous dans le répertoire où vous stockez votre site web (dans ce cas, <code>mdn</code>).</li>
+ <li>Sur la droite, vous voyez les fichiers distants (ceux du serveur web). Vous êtes connecté-e à la racine du dossier FTP distint (dans ce cas, <code>users/demozilla</code>)</li>
+ <li>Pour le moment, vous pouvez ignorer la zone en bas de l'écran, il s'agit en fait d'un journal contenant chaque interaction entre votre client FTP et le serveur.</li>
+</ul>
+
+<h3 id="Transférer_des_fichiers_vers_le_serveur">Transférer des fichiers vers le serveur</h3>
+
+<p>Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous <code>Public/htdocs</code> pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :</p>
+
+<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p>
+
+<p>Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :</p>
+
+<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p>
+
+<h3 id="Est-ce_que_mes_fichiers_sont_bien_en_ligne">Est-ce que mes fichiers sont bien en ligne ?</h3>
+
+<p>Jusqu'ici tout va bien, vérifions quand même en tapant <code>http://demozilla.hebergeurexemple.net/</code> dans la barre d'URL du navigateur :</p>
+
+<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p>
+
+<p>Et <em lang="fr">voilà</em> ! Notre site est en ligne !</p>
+
+<h3 id="D'autres_méthodes_pour_transférer_des_fichiers">D'autres méthodes pour transférer des fichiers</h3>
+
+<p>Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes :</p>
+
+<ul>
+ <li><strong>Les interfaces web</strong>. Votre hébergeur peut mettre à disposition une interface web qui permet de transférer des fichiers.</li>
+ <li><strong>GitHub</strong> (méthode avancée). Il est possible de transférer des fichiers grâce à {{Glossary("git")}} en utilisant des combinaison de méthodes qui sont liées aux opérations de commit/push. Pour plus d'informations, voir l'article sur <a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">comment publier son site web</a> qui fait partie du guide <a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a>.</li>
+ <li><strong>{{Glossary("Rsync")}}</strong> (méthode avancée). Un système de synchronisation de fichiers entre un système local et un système distant.</li>
+ <li><strong>{{Glossary("WebDAV")}}</strong>. Une extension du protocle {{Glossary("HTTP")}} qui permet de gérer des fichiers de façon plus avancée.</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : <a href="/fr/Apprendre/Checking_that_your_web_site_is_working_properly">vérifier que votre site fonctionne correctement</a>.</p>
diff --git a/files/fr/apprendre/tutoriels/comment_construire_un_site_web/index.html b/files/fr/apprendre/tutoriels/comment_construire_un_site_web/index.html
new file mode 100644
index 0000000000..671b19cd2b
--- /dev/null
+++ b/files/fr/apprendre/tutoriels/comment_construire_un_site_web/index.html
@@ -0,0 +1,167 @@
+---
+title: Comment construire un site web
+slug: Apprendre/Tutoriels/Comment_construire_un_site_web
+tags:
+  - Beginner
+  - Index
+  - NeedsContent
+translation_of: Learn
+---
+<p>Lorsqu'il s'agit d'apprendre la conception et le développement web, beaucoup souhaitent construire leur site web le plus rapidement possible. Pour faciliter votre progression, nous avons organisé et listé ici les connaissances minimales à acquérir.</p>
+
+<p>Nous vous suggérons de démarrer avec les articles de ce tableau, en allant de la gauche vers la droite pour chacune des lignes, ligne après ligne. Si vous rencontrez des difficultés à comprendre un terme, n'hésitez pas à utiliser notre <a href="/fr/docs/Glossaire">glossaire</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row" style="text-align: center;"> </th>
+   <th scope="col" style="text-align: center;">Savoir théorique</th>
+   <th scope="col" style="text-align: center;">Savoir technique</th>
+   <th scope="col" style="text-align: center;">Savoir faire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row" style="text-align: center;">1</th>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Commencez_votre_projet_web">Commencer son projet web</a></strong><br>
+    Cette article présente l'étape primordiale de n'importe quel projet : définir ce qu'on souhaite accomplir avec.</td>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">2</th>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Fonctionnement_Internet">Le fonctionnement d'Internet</a></strong><br>
+    Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.</td>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">3</th>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">Comprendre les différences entre une page web, un site web, un serveur web et un moteur de recherche</a></strong></td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web ?</a></strong><br>
+    Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.</td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web">De quels logiciels ai-je besoin pour construire un site web ?</a></strong><br>
+    Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">4</th>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">Le fonctionnement des liens sur le Web</a></strong><br>
+    Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.</td>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">5</th>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Comprendre_les_URL">Comprendre les URL et leur structure</a></strong><br>
+    Cet article aborde les <em>Uniform Resource Locators</em> (URL) en expliquant leur rôle et leur structure.</td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></strong><br>
+    Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.</td>
+   <td style="vertical-align: top;"> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">6</th>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Concevoir_page_web">Concevoir une page web</a></strong><br>
+    Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.</td>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Publier_sur_le_Web_combien_ça_coûte">Publier sur le Web : combien ça coûte ?</a></strong><br>
+    Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">7</th>
+   <td style="vertical-align: top;"><a href="/en-US/docs/Learn/The_basics_of_web_design">Les bases de la conception web (TBD)</a></td>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">Choisir, installer et paramétrer un éditeur de texte</a></strong><br>
+    Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">8</th>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Mettre_en_place_un_environnement_de_travail">Mettre en place un environnement de travail</a></strong><br>
+    Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">9</th>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">Écrire une simple page HTML</a></strong><br>
+    Dans cet article, vous apprendrez à créer une page web simple grâce à HTML.</td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Ouvrir_un_fichier_dans_un_navigateur_web">Ouvrir un fichier avec un navigateur web</a></strong><br>
+    Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">10</th>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/HTML/Balises_HTML">Les balises HTML et leur rôle</a></strong><br>
+    Cet article aborde les bases de HTML : les balises et comment les utiliser.</td>
+   <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">Transférer des fichiers vers un serveur web</a></strong><br>
+    Cet article illustre comment publier votre site en ligne grâce à des outils FTP.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">11</th>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;"> </td>
+   <td style="vertical-align: top;">
+    <p><strong><a href="/fr/Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web">Tester le bon fonctionnement de votre site web</a></strong><br>
+     Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Voici les bases qu'il est nécessaire d'avoir pour construire son premier site web. Si vous souhaitez approfondir et aborder des notions plus avancées, afin de réaliser un site web professionel par exemple, vous pouvez poursuivre avec les articles du tableau qui suit :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row" style="text-align: center;"> </th>
+   <th scope="col" style="text-align: center;">Savoir théorique</th>
+   <th scope="col" style="text-align: center;">Savoir technique</th>
+   <th scope="col" style="text-align: center;">Savoir faire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row" style="text-align: center;">12</th>
+   <td><strong><a href="/fr/Apprendre/Que_faut-il_pour_que_les_gens_voient_mon_site_web">Que faut-il pour que les gens puissent voir mon site web ?</a></strong></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">13</th>
+   <td> </td>
+   <td><strong><a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">Utiliser CSS dans une page web</a></strong><br>
+    Cet article explique comment appliquer des styles CSS à vos documents HTML.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">14</th>
+   <td><strong><a href="/fr/Apprendre/Accessibilité">Qu'est-ce que l'accessibilité ?</a></strong><br>
+    Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.</td>
+   <td><strong><a href="/fr/Apprendre/CSS/Les_propriétés_CSS">Les propriétés CSS et comment s'en servir</a></strong><br>
+    CSS définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">15</th>
+   <td><strong><a href="/fr/Apprendre/Concevoir_site_tous_types_utilisateurs">Concevoir un site pour tous les types d'utilisateur</a></strong><br>
+    Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.</td>
+   <td>
+    <p><strong><a href="/fr/Apprendre/CSS/formatage_texte_CSS">Mise en forme basique du texte avec CSS</a></strong><br>
+     Cet article explique comment mettre en forme le texte de documents HTML en utilisant les propriétés CSS les plus communes.</p>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">16</th>
+   <td> </td>
+   <td><strong><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_%C3%A0_une_page_web">Utiliser des images</a></strong></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="text-align: center;">17</th>
+   <td><a href="/en-US/docs/Learn/Common_pitfalls_to_avoid_in_web_design">Common pitfalls to avoid in Web design (TBD)</a></td>
+   <td><a href="/en-US/docs/Learn/Basics_of_UX_Design">Basics of User eXperience (UX) Design (TBD)</a></td>
+   <td><strong><a href="/fr/Apprendre/Concevoir_menu_de_navigation">Design of navigation menus</a></strong></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/apprendre/tutoriels/index.html b/files/fr/apprendre/tutoriels/index.html
new file mode 100644
index 0000000000..01c6029d2e
--- /dev/null
+++ b/files/fr/apprendre/tutoriels/index.html
@@ -0,0 +1,35 @@
+---
+title: Tutoriels
+slug: Apprendre/Tutoriels
+tags:
+  - Index
+  - TopicStub
+translation_of: Learn
+---
+<p>Connaître les technologies Web et leurs concepts est un premier pas important. Mais il arrrive un moment où la mise en pratique est nécessaire. Pour cela, nous avons dressé quelques « chemins » qui vous aideront à parcourir les technologies web et à mettre en œuvre ce que vous pouvez apprendre !</p>
+
+<div class="row topicpage-table">
+<div class="section" style="width: 568px;">
+<h2 id="Les_bases" style="line-height: 30px; font-size: 2.14285714285714rem;">Les bases</h2>
+
+<p>Ces séries d'articles sont essentielles pour débuter dans le développement web.</p>
+
+<dl>
+ <dt><a href="/fr/Learn/tutorial/How_to_build_a_web_site">Comment construire un site web</a></dt>
+ <dd>Ce tutoriel illustre chacune des étapes pour construire un site web de A à Z.</dd>
+ <dt><a href="/fr/docs/Learn/tutorial/Les_bases_de_la_sécurité_informatique">Les bases de la sécurité informatique</a></dt>
+ <dd>Ce tutoriel explique les principes de base en sécurité informatique et comment les appliquer, notamment en cryptographie.</dd>
+</dl>
+</div>
+
+<div class="section" style="width: 593px;">
+<h2 id="En_détails" style="line-height: 30px; font-size: 2.14285714285714rem;">En détails</h2>
+
+<p>Le tutoriel qui suit aborde des notions plus avancées, destinées aux développeurs web ayant une certaine expérience.</p>
+
+<dl>
+ <dt><a href="/fr/Apps/Quickstart/Build">Construire des applications web</a></dt>
+ <dd>Les applications web (ou <em>Web Apps</em>) sont des applications qui fonctionnent dans un navigateur web. Il y a quelques notions qui leur sont propres et qu'il faut connaître avant de commencer. Tout ce dont vous avez besoin est sur MDN !</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/apprendre/tutoriels/les_bases_de_la_sécurité_informatique/index.html b/files/fr/apprendre/tutoriels/les_bases_de_la_sécurité_informatique/index.html
new file mode 100644
index 0000000000..b12ebc595d
--- /dev/null
+++ b/files/fr/apprendre/tutoriels/les_bases_de_la_sécurité_informatique/index.html
@@ -0,0 +1,60 @@
+---
+title: Les bases de la sécurité informatique
+slug: Apprendre/Tutoriels/Les_bases_de_la_sécurité_informatique
+tags:
+  - Beginner
+  - Landing
+  - Learn
+  - Security
+translation_of: Web/Security/Information_Security_Basics
+---
+<p>{{draft}}</p>
+
+<p>Comprendre les bases de la sécurité informatique vous permettra de réaliser l'importance et le rôle de la sécurité au cours du développement d'un projet. Cela vous aidera à éviter d'utiliser des logiciels superflus qui seraient dangereux et qui permettraient à des attaquants d'exploiter des faiblesses à des fins malhonnêtes. Protégez-vous et vos utilisateurs en mettant en pratique les concepts de bases liés à la sécurité.</p>
+
+<h2 id="Les_concepts_de_base">Les concepts de base</h2>
+
+<p>Ces articles sont en cours de rédactions. Ils sont destinés à tous les lecteurs, quel que soit leur niveau de compétence sur le sujet. Ces articles ont un ordre logique et les concepts vus dépendent les uns des autres.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/Confidentialité_intégrité_et_disponibilité">1. Confidentialité, integrité et disponibilité</a></dt>
+ <dd>Cet article décrit les objectifs principaux, fondamentaux, en termes de sécurité.</dd>
+ <dt><a href="/fr/Apprendre/Les_vulnérabilités">2. Les vulnérabilités</a></dt>
+ <dd>Cet article définit les grandes catégories de vulnérabilités et évoque la présence de vulnérabilités dans tous les logiciels.</dd>
+ <dt><a href="/fr/Apprendre/Threats">3. Les menaces</a></dt>
+ <dd>Cet article est une introduction aux principaux concepts de menaces.</dd>
+ <dt><a href="/fr/Apprendre/Security_Controls">4. Les contrôles de sécurité</a></dt>
+ <dd>Cet article définit les grandes catégories de contrôles et aborde leurs avantages et inconvénients respectifs.</dd>
+ <dt><a href="/fr/Apprendre/Risk">5. Les risques</a></dt>
+ <dd>Cet articles est une introduction aux concepts de base sur les risques informatiques.</dd>
+ <dt><a href="/en-US/docs/Encryption_and_Decryption">6. Chiffrement et déchiffrement</a></dt>
+ <dd>Cet article couvre les aspects fondamentaux sur le chiffrement et le déchiffrement.</dd>
+ <dt><a href="/en-US/docs/Digital_Signatures">7. Les signatures numériques</a></dt>
+ <dd>Cet article est une introduction aux différentes méthodes de signature numérique.</dd>
+ <dt><a href="/fr/Apprendre/TCP_IP_Security">8. Sécurité TCP/IP</a></dt>
+ <dd>Cet article est un aperçu du modèle TCP/IP et des aspects de sécurités liés à SSL/TLS.</dd>
+</dl>
+
+<h2 id="Appliquer_les_concepts_de_base">Appliquer les concepts de base</h2>
+
+<p>Avant de lire les articles de cette section, mieux vaut avoir lu les articles sur les concepts de base ou avoir un niveau de connaissance équivalent.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Introduction_to_SSL">Introduction à SSL</a></dt>
+ <dd>Cet article est en cours de ré-écriture.</dd>
+ <dt><a href="/fr/Apprendre/SSL_et_TLS">SSL et TLS</a></dt>
+ <dd>Cet article fournit une courte introduction à SSL et TLS ainsi qu'aux algorithmes utilisés pour échanger des clés de session. Il aborde également RSA et ECC.</dd>
+ <dt><a href="/en-US/docs/Introduction_to_Public-Key_Cryptography">Introduction à la cryptographie asymétrique</a></dt>
+ <dd>Cet article est en cours de refonte.</dd>
+</dl>
+
+<h2 id="Plus_d'informations">Plus d'informations</h2>
+
+<p>D'autres articles de MDN, plus avancés, concernent la sécurité informatique :</p>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Security">La sécurité des navigateurs</a></li>
+ <li><a href="/fr/docs/Web/Security">La sécurité sur le Web</a></li>
+ <li><a href="/fr/docs/Web/Security/Securing_your_site">Sécuriser son site</a></li>
+ <li><a href="/fr/docs/Security/Firefox_Security_Basics_For_Developers">Les bases de la sécurité de Firefox, pour les développeurs</a></li>
+</ul>
diff --git a/files/fr/apprendre/utiliser_les_pages_github/index.html b/files/fr/apprendre/utiliser_les_pages_github/index.html
new file mode 100644
index 0000000000..4537201647
--- /dev/null
+++ b/files/fr/apprendre/utiliser_les_pages_github/index.html
@@ -0,0 +1,110 @@
+---
+title: Utiliser les pages GitHub
+slug: Apprendre/Utiliser_les_pages_GitHub
+tags:
+  - Débutant
+  - GitHub
+  - Guide
+  - Web
+  - git
+translation_of: Learn/Common_questions/Using_Github_pages
+---
+<p class="summary"><a href="https://github.com/">GitHub</a> est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version <a href="http://git-scm.com/">Git</a><strong>. </strong>Par défaut, le système est <em>open source</em>, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées <em>gh-pages</em>) qui sont une des fonctionnalités de GitHub.</p>
+
+<h2 id="Publier_du_contenu">Publier du contenu</h2>
+
+<p>GitHub est un outil très populaire et important à l'heure actuelle. Git est <a href="http://git-scm.com/book/fr/v1/D%C3%A9marrage-rapide-%C3%80-propos-de-la-gestion-de-version">un logiciel de gestion de version</a> reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : <a href="https://pages.github.com/">les pages GitHub</a>. Celles-ci vous permettent de publier un site web sur Internet.</p>
+
+<h3 id="Mettre_en_place_Git_et_un_compte_GitHub">Mettre en place Git et un compte GitHub</h3>
+
+<ol>
+ <li>Tout d'abord, <a href="http://git-scm.com/downloads">installez Git</a> sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.</li>
+ <li>Ensuite, <a href="https://github.com/join">inscrivez-vous sur GitHub</a>. La procédure est plutôt simple.</li>
+ <li>Une fois inscrit, connectez vous à <a href="https://github.com">github.com</a> avec votre nom d'utilisateur et votre mot de passe.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.</p>
+</div>
+
+<h3 id="Préparer_le_code_afin_de_l'envoyer_vers_GitHub">Préparer le code afin de l'envoyer vers GitHub</h3>
+
+<p>Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé <code>index.html</code>.</p>
+
+<p>Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :</p>
+
+<ol>
+ <li>Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé <code>test-site</code>, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande <code>cd</code> (qui signifie « <em>change directory</em> » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme <code>test-site</code>, vous pourrez taper :
+
+  <pre class="brush: bash">cd Bureau/test-site</pre>
+ </li>
+ <li>Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git :
+  <pre class="brush: bash">git init</pre>
+ </li>
+</ol>
+
+<h4 id="Un_aparté_sur_les_interfaces_en_ligne_de_commande">Un aparté sur les interfaces en ligne de commande</h4>
+
+<p>La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :</p>
+
+<p><img alt="Interface en ligne de commande" src="https://mdn.mozillademos.org/files/12271/commande.png" style="height: 309px; width: 499px;"></p>
+
+<div class="note">
+<p><strong>Note : </strong>Il existe également des <a href="http://git-scm.com/downloads/guis">interfaces graphiques pour Git</a> qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.</p>
+</div>
+
+<p><span id="command-line">Chaque système d'exploitation possède sa propre interface en ligne de commande  :</span></p>
+
+<ul>
+ <li><strong>Windows</strong> : <strong>l'invite de commande</strong>. Celle-ci peut être lancée en utilisant la touche Windows et en tapant <em>Invite de commande</em> avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera <code>\</code> pour indiquer un sous-répertoire alors que Linux et OS X utiliseront <code>/</code>).</li>
+ <li><strong>OS X</strong> : <strong>le terminal</strong>. On le trouvera dans <em>Applications &gt; Utilitaires</em>.</li>
+ <li><strong>Linux</strong> : Généralement, on peut lancer un terminal avec le raccourci clavier <em>Ctrl + Alt + T</em>. Si cela ne fonctionne pas, recherchez <strong>Terminal</strong> dans les applications ou via les outils de recherche.</li>
+</ul>
+
+<p>La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.</p>
+
+<h3 id="Créer_un_dépôt_sur_GitHub_pour_votre_code">Créer un dépôt sur GitHub pour votre code</h3>
+
+<ol>
+ <li>Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option <em>New Repository</em> (qui signifie « Créer un nouveau dépôt »).</li>
+ <li>Sur la page qui s'affiche, dans le champ « <em>Repository name</em> », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir <em>mon-premier-depot</em>.</li>
+ <li>Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
+ <li>Ensuite, cliquez sur « <em>Create repository</em> » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
+</ol>
+
+<h3 id="Envoyer_vos_fichiers_vers_GitHub">Envoyer vos fichiers vers GitHub</h3>
+
+<ol>
+ <li>Sur cette page, une section vous intéresse particulièrement : « <em>…or push an existing repository from the command line</em> » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à :
+
+  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/mon-premier-depot.git</span></span></pre>
+ </li>
+ <li>Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action.
+  <pre class="brush: bash">git add --all
+git commit -m 'ajout des fichiers au dépôt'</pre>
+ </li>
+ <li>Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub :
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une <em>branche</em> <code>gh-pages</code> sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « <em>Branch: <strong>master</strong></em> » (GitHub indique que vous êtes sur la branche <code>master</code> de votre dépôt). Dans la liste qui s'affiche, saisissez le texte <strong>gh-pages</strong> puis cliquez sur <em>Create branch: gh-pages</em> (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera <em>nom-utilisateur.github.io/nom-du-depot</em>. Dans mon exemple, l'URL est donc <em>https://chrisdavidmills.github.io/my-repository</em>. La page qui est affichée à cette URL est la page <code>index.html</code> contenue dans le dépôt.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li>
+ <li>Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous êtes bloqué-e, n'hésitez pas à utiliser <a href="https://pages.github.com/">la page d'aide GitHub sur les pages GitHub</a> qui est une excellente ressource (en anglais).</p>
+</div>
+
+<h3 id="Aller_plus_loin_avec_Git_et_GitHub">Aller plus loin avec Git et GitHub</h3>
+
+<p>Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :</p>
+
+<pre>git add --all
+git commit -m 'Un autre commit'
+git push</pre>
+
+<p>Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.</p>
+
+<p>Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les <a href="https://help.github.com/index.html">pages d'aide de GitHub</a> (en anglais) ou encore <a href="http://git-scm.com/book/fr/v1">le manuel Pro Git</a> (en français).</p>