Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

1 files changed, 46 insertions, 46 deletions

diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html
index 05f16693ae..3694a00968 100644
--- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html
+++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html
@@ -6,77 +6,77 @@ original_slug: Apprendre/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>
+<p>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. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</p>
 
-<table class="learn-box standard-table">
+<table class="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>
+   <th scope="row"><strong>Conditions préalables</strong>:</th>
+   <td>Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</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>
+   <th scope="row"><strong>Objectif</strong>:</th>
+   <td>Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="dossier_de_projet"><font><font>dossier de projet</font></font></h2>
+<h2 id="dossier_de_projet">dossier de projet</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>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.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>
+<p><img alt="" src="layout-task-complete.png"></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>
+<h3 id="configuration_de_base">configuration de base</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>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images <a  href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ici</a> .</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>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé <code>images</code>. Ouvrir le <code>index.html</code>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.</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>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.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>
+<p><img alt="" src="layout-task-start.png"></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>
+<h3 id="Votre_section_detâches">Votre section de tâches</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>
+<p>Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:</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>
+ <li>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</li>
+ <li>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.</li>
+ <li>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</li>
+ <li>Les éléments <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>et <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</li>
+ <li>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</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>
+<p>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</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>
+ <li>Positionnement</li>
+ <li>Flotte</li>
+ <li>Flexbox</li>
+ <li>CSS Grid Layout</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>
+<p>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. Essayez différentes approches et voyez laquelle fonctionne le mieux. 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 <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> .</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>
+<p>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. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le <a  href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener">fil de discussion relatif à cet exercice</a> ou sur le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a  href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</p>
+
+<h2 id="Dans_ce_module_Section">Dans ce module Section</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Débit normal</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">la grille</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flotteurs</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mise en page à plusieurs colonnes</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception sensible</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant aux questions des médias</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page héritées</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Soutenir les anciens navigateurs</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation fondamentale de la compréhension de la mise en page.</a></li>
 </ul>