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, 20 insertions, 24 deletions

diff --git a/files/fr/learn/css/styling_text/styling_links/index.html b/files/fr/learn/css/styling_text/styling_links/index.html
index 27276fac47..7e88a2f941 100644
--- a/files/fr/learn/css/styling_text/styling_links/index.html
+++ b/files/fr/learn/css/styling_text/styling_links/index.html
@@ -21,9 +21,9 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 
 <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
 
-<p class="summary">Lors de la mise en forme de <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">liens</a>, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.</p>
+<p>Lors de la mise en forme de <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">liens</a>, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
@@ -56,10 +56,10 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 
 <p>L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="#"&gt;Un simple lien&lt;/a&gt;&lt;/p&gt;
+<pre class="brush: html">&lt;p&gt;&lt;a href="#"&gt;Un simple lien&lt;/a&gt;&lt;/p&gt;
 </pre>
 
-<pre class="brush: css notranslate">p {
+<pre class="brush: css">p {
   font-size: 2rem;
   text-align: center;
 }</pre>
@@ -67,7 +67,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 <p>{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}</p>
 
 <div class="note">
-<p><strong>Note </strong>: tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.</p>
+<p><strong>Note :</strong> tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.</p>
 </div>
 
 <p>Vous remarquerez quelques petites choses en explorant les styles par défaut :</p>
@@ -97,7 +97,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 </ul>
 
 <div class="note">
-<p><strong>Note </strong>: vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !</p>
+<p><strong>Note :</strong> vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !</p>
 </div>
 
 <h3 id="Mise_en_forme_de_quelques_liens">Mise en forme de quelques liens</h3>
@@ -106,7 +106,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 
 <p>Pour commencer, nous écrirons notre jeu de règles vides :</p>
 
-<pre class="brush: css notranslate">a {
+<pre class="brush: css">a {
 
 }
 
@@ -135,7 +135,7 @@ a:active {
 
 <p>Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :</p>
 
-<pre class="brush: css notranslate">body {
+<pre class="brush: css">body {
   width: 300px;
   margin: 0 auto;
   font-size: 1.2rem;
@@ -177,7 +177,7 @@ a:active {
 
 <p>Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;Il y a plusieurs navigateurs disponibles, tels que &lt;a href="#"&gt;Mozilla
+<pre class="brush: html">&lt;p&gt;Il y a plusieurs navigateurs disponibles, tels que &lt;a href="#"&gt;Mozilla
 Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, et
 &lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
 
@@ -206,10 +206,7 @@ Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, et
 
 <p>Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, appuyez sur le bouton <em>Afficher la solution</em> pour insérer l'exemple que nous avons montré ci-dessus.</p>
 
-<div class="hidden">
-<h5 id="Playable_code">Playable code</h5>
-
-<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+<pre class="brush: html hidden">&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;p&gt;Il y a plusieurs navigateurs disponibles, tels que &lt;a href="#"&gt;Mozilla
  Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, et
@@ -249,7 +246,7 @@ a:active {
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input");
 var cssInput = document.querySelector(".css-input");
 var reset = document.getElementById("reset");
 var htmlCode = htmlInput.value;
@@ -282,9 +279,8 @@ htmlInput.addEventListener("input", drawOutput);
 cssInput.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
 </pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+<p>{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}</p>
 
 <h2 id="Inclusion_dicônes_dans_des_liens">Inclusion d'icônes dans des liens</h2>
 
@@ -292,12 +288,12 @@ window.addEventListener("load", drawOutput);
 
 <p>Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :</p>
 
-<pre class="brush: html notranslate">&lt;p&gt;Pour davantage d'information sur la météo, visitez notre &lt;a href="http://#"&gt;page météo&lt;/a&gt;,
+<pre class="brush: html">&lt;p&gt;Pour davantage d'information sur la météo, visitez notre &lt;a href="http://#"&gt;page météo&lt;/a&gt;,
 jetez un œil sur &lt;a href="http://#"&gt;météo sur Wikipedia&lt;/a&gt;, ou regardez la &lt;a href="http://#"&gt;météo sur Science Extrême &lt;/a&gt;.&lt;/p&gt;</pre>
 
 <p>Ensuite, le CSS:</p>
 
-<pre class="brush: css notranslate">body {
+<pre class="brush: css">body {
   width: 300px;
   margin: 0 auto;
   font-family: sans-serif;
@@ -348,7 +344,7 @@ a[href*="http"] {
 <p>Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !</p>
 
 <div class="note">
-<p><strong>Note </strong>: ne vous inquiétez pas si vous n'êtes pas encore familier avec les <a href="/fr/Apprendre/CSS/styliser_boites">arrières-plans</a> et le <a href="/fr/Apps/app_layout/responsive_design_building_blocks">responsive web design</a> ; ceux-ci sont expliqués par ailleurs.</p>
+<p><strong>Note :</strong> ne vous inquiétez pas si vous n'êtes pas encore familier avec les <a href="/fr/Apprendre/CSS/styliser_boites">arrières-plans</a> et le <a href="/fr/Apps/app_layout/responsive_design_building_blocks">responsive web design</a> ; ceux-ci sont expliqués par ailleurs.</p>
 </div>
 
 <h2 id="Mise_en_forme_de_liens_comme_des_boutons">Mise en forme de liens comme des boutons</h2>
@@ -359,13 +355,13 @@ a[href*="http"] {
 
 <p>D'abord, un peu d'HTML :</p>
 
-<pre class="brush: html notranslate">&lt;ul&gt;
+<pre class="brush: html">&lt;ul&gt;
   &lt;li&gt;&lt;a href="#"&gt;Accueil&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Musique&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Finland&lt;e/a&gt;&lt;/li&gt;
 &lt;/ul&gt;</pre>
 
 <p>Et maintenant, notre CSS :</p>
 
-<pre class="brush: css notranslate">body,html {
+<pre class="brush: css">body,html {
   margin: 0;
   font-family: sans-serif;
 }
@@ -427,7 +423,7 @@ a:active {
 </ul>
 
 <div class="note">
-<p><strong>Note</strong> : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p>
+<p><strong>Note :</strong> vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p>
 </div>
 
 <h2 id="Résumé">Résumé</h2>
@@ -444,6 +440,6 @@ a:active {
  <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li>
  <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li>
  <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li>
- <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li>
- <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école communale</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li>
 </ul>