initial commit

1 files changed, 183 insertions, 0 deletions

diff --git a/files/fr/sandbox/index.html b/files/fr/sandbox/index.html
new file mode 100644
index 0000000000..419af83f9a
--- /dev/null
+++ b/files/fr/sandbox/index.html
@@ -0,0 +1,183 @@
+---
+title: Bac à sable
+slug: Sandbox
+tags:
+  - Entraînement
+  - Pratique
+translation_of: Sandbox
+---
+<h2 id="Sandbox" name="Sandbox">Ceci est ma première modification!! Ceci est un test. </h2>
+
+<div id="jsdatesample">
+<pre class="brush: html">&lt;p id="demo"&gt;The Date is: &lt;/p&gt;</pre>
+
+<p id="demo"></p>
+
+<pre class="brush: js">document.getElementById("demo").innerHTML = Date();
+</pre>
+
+<p id="demo"></p>
+</div>
+
+<p>{{EmbedLiveSample('jsdatesample')}}</p>
+
+<div id="file">Échantillon de contenu HTML</div>
+
+<p>{{EmbedLiveSample('file')}}</p>
+
+<h2 id="exemple_de_code">exemple de code</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="kiki"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#kiki { background-color: #FD0; }</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let madiv= document.getElementById("kiki"); madiv.appendChild(document.createTextNode("Salut"));
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('exemple_de_code')}}</p>
+
+<h2 id="Mettre_en_gras_un_élément">Mettre en gras un élément</h2>
+
+<h3 id="Mettre_en_gras_un_élément_avec_HTML">Mettre en gras un élément avec HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Je suis en &lt;strong&gt;gras&lt;/strong&gt;&lt;/p&gt;</pre>
+
+<p>{{ EmbedLiveSample("Mettre_en_gras_un_élément_avec_HTML") }}</p>
+
+<h3 id="Contenu_CSS"><font><font>Contenu CSS</font></font></h3>
+
+<pre class="brush: css"><font><font>@ Compteur de style fisheye {</font></font><font><font>
+  système: cyclique;</font></font><font><font>
+  symboles: ◉;
+</font></font></pre>
+
+<blockquote>
+<pre class="brush: html">&lt;h1&gt;CSS font-family&lt;/h1&gt;
+&lt;p class="serif"&gt;Ceci est un paragraphe, affiché dans la fonte Times New Roman.&lt;/p&gt;
+&lt;p class="sansserif"&gt;Ceci est un paragraphe, affiché dans la fonte Arial.&lt;/p&gt;</pre>
+</blockquote>
+
+<pre class="brush: css"><font><font>.liste {</font></font><font><font>
+    list-style: fisheye, cercle;</font></font><font><font>
+}</font></font></pre>
+
+<h2 id="Linux_is_life" name="Linux is life">Bonjour le monde</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Bonjour &lt;strong&gt;le monde&lt;/strong&gt;&lt;/p&gt;</pre>
+
+<p><font><font>{{EmbedLiveSample ( 'Linux is life')}}</font></font></p>
+
+<p><font><font><img alt="Linux logo" src="https://greenwichmeantime.com/static/app/world_clock/icon/world.svg" style="height: 338px; width: 450px;"></font></font></p>
+
+<p><img alt="logo couleur MDN (bleu)" src="https://mdn.mozillademos.org/files/12728/mdn_logo-only_color.png" style="height: 200px; width: 207px;"></p>
+
+<p><span class="seoSummary"><font><font>Des trucs</font></font></span></p>
+
+<div class="note">
+<p><font><font>Une note </font></font></p>
+
+<div class="warning">
+<p><font><font>Un avertissement dans une note</font></font></p>
+
+<div class="note">
+<p><font><font>Une note dans un avertissement dans une note</font></font></p>
+
+<div class="warning">
+<div class="note">
+<div class="warning">
+<div class="note">
+<div class="warning">
+<div class="note"></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+<div class="note">
+<p>Ceci est un example de comment utiliser le MDN!</p>
+</div>
+
+<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mo><font><font>×</font></font></mo><mn><font><font>1</font></font></mn><mo><font><font>=</font></font></mo><mn><font><font>1</font></font></mn><mo><font><font>×</font></font></mo><mi><font><font>π</font></font></mi><mo><font><font>=</font></font></mo><mn><font><font>2</font></font></mn><mi><font><font>π</font></font></mi><mo><font><font>÷</font></font></mo><mi><font><font>π</font></font></mi><mo><font><font>=</font></font></mo><mi><font><font>π</font></font></mi></mrow><annotation encoding="TeX"><font><font>\ Pi \ times 1 = 1 \ times \ pi = 2 \ pi \ div \ pi = \ pi</font></font></annotation></semantics></math></p>
+
+<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mfrac><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mi><font><font>π</font></font></mi></mfrac></mrow><annotation encoding="TeX"><font><font>\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}</font></font></annotation></semantics></math></p>
+
+<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mfrac><mfrac><mi><font><font>π</font></font></mi><mi><font><font>π</font></font></mi></mfrac><mi><font><font>π</font></font></mi></mfrac></mrow><annotation encoding="TeX"><font><font>\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}</font></font></annotation></semantics></math></p>
+
+<p><math><semantics><mrow><mo><font><font>∫</font></font></mo><mo lspace="0em" rspace="0em"><font><font>lim</font></font></mo><mi><font><font>je</font></font></mi><mi><font><font>t</font></font></mi><msubsup><mi><font><font>s</font></font></mi><mn><font><font>1</font></font></mn><mn><font><font>3</font></font></mn></msubsup><mfrac><mrow><msup><mi><font><font>e</font></font></mi><mn><font><font>3</font></font></mn></msup><mo><font><font>/</font></font></mo><mi><font><font>X</font></font></mi></mrow><msup><mi><font><font>X</font></font></mi><mn><font><font>2</font></font></mn></msup></mfrac><mspace width="thinmathspace"></mspace><mi><font><font>ré</font></font></mi><mi><font><font>X</font></font></mi></mrow><annotation encoding="TeX"><font><font>\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, dx</font></font></annotation></semantics></math></p>
+
+<p><math><semantics><mrow><mo><font><font>∫</font></font></mo><mo lspace="0em" rspace="0em">ln(x) dx = x[ln(x) - 1]</mo></mrow><annotation encoding="TeX"><font><font>l\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, d+x</font></font></annotation></semantics></math></p>
+
+<p><math><semantics><mtext><font><font>abcdefghijklmnopqrstuvwxyz</font></font></mtext><annotation encoding="TeX"><font><font>\alphabet</font></font></annotation></semantics></math></p>
+
+<p><math><semantics><mrow><mi><font><font>π</font></font></mi><mtext><font><font>est un nombre irrationnel, et cela est le rapport entre la circonférence d'un cercle à son diamètre. </font><font>Il est communément approchée comme 3,14159.</font></font></mtext></mrow><annotation encoding="TeX"><font><font>\ pifacts {3}</font></font></annotation></semantics></math></p>
+
+<p><font><font>contenu</font></font></p>
+
+<h2 id="Test_live_sample" name="Test live sample">Tester un échantillon en direct</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Bonjour le monde coochie&lt;/p&gt;</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{ EmbedLiveSample('Test live sample') }}</p>
+
+<h2 id="Focus_on_a_text_field" name="Focus_on_a_text_field">Orienter le curseur dans le champ de texte</h2>
+
+<h3 id="Contenu_HTML_2">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" id="monChampDeTexte" value="Champ de texte."&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;Clique moi pour orienter le curseur sur le champ de texte!&lt;/button&gt; </pre>
+
+<h3 id="Contenu_CSS_2">Contenu CSS</h3>
+
+<pre class="brush: css">Échantillon de Contenu CSS</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">focusMethod = function getFocus() {
+  document.getElementById("monChampDeTexte").focus();
+} </pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
+
+<h2 id="Focus_on_a_button" name="Focus_on_a_button">Cliquer un  bouton</h2>
+
+<h3 id="Contenu_HTML_3">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;button type="button" id="monBouton"&gt;Clique Moi!&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;Clique moi pour orienter le curseur vers !&lt;/button&gt; </pre>
+
+<h3 id="Contenu_CSS_3">Contenu CSS</h3>
+
+<pre class="brush: css">Échantillon de contenu CSS
+</pre>
+
+<h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3>
+
+<pre class="brush: js">focusMethod = function getFocus() {
+  document.getElementById("monBouton").focus();
+} </pre>
+
+<h3 id="Resultat_2">Resultat</h3>
+
+<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>