unslug fr: move

10 files changed, 1700 insertions, 0 deletions

diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.html b/files/fr/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..c547529be9
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/css_basics/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/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..b2dc72e8de
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/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/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html
new file mode 100644
index 0000000000..bc98c99021
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/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/learn/getting_started_with_the_web/html_basics/index.html b/files/fr/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..b486e94905
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/html_basics/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/learn/getting_started_with_the_web/index.html b/files/fr/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..88479469c9
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_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/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..0a7ad53559
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/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/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..05d0540779
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/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/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..c4997f9cdf
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/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/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
new file mode 100644
index 0000000000..9db46369dd
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_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/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..8fbe02c8ab
--- /dev/null
+++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/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>