unslug fr: move

1 files changed, 244 insertions, 0 deletions

diff --git a/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..d688fcce92
--- /dev/null
+++ b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,244 @@
+---
+title: Mettre en place un environnement de travail
+slug: Apprendre/Mettre_en_place_un_environnement_de_travail
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - Learn
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+translation_of_original: Learn/Common_questions/Set_up_a_basic_working_environment
+---
+<div class="summary">
+<p>Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est un serveur web</a>, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">comment installer les outils de base</a> et <a href="/fr/Apprendre/Comprendre_noms_de_domaine">comment fonctionnent les noms de domaine</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir comment installer un serveur local et mettre en place une hiérarchie de fichiers pour développer un site web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En développement web, mieux vaut tester son site localement avant de le publier aux yeux du monde entier. Pour effectuer des tests sur votre ordinateur, vous pouvez installer un serveur local. Dans cet article nous verrons comment faire et comment organiser une hiérarchie de fichiers afin que ceux-ci soit organisés, même si le projet devient plus volumineux.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'existe pas encore de matériau interactif pour cet article. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Installer_et_paramétrer_un_éditeur_de_texte">Installer et paramétrer un éditeur de texte</h3>
+
+<p>Ce point était l'objet d'un article précédent. Si ce n'est pas déjà fait, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">voici quelques indications</a> sur comment procéder.</p>
+
+<h3 id="Installer_un_serveur_web_local">Installer un serveur web local</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe différents<a href="http://en.wikipedia.org/wiki/Comparison_of_web_server_software"> logiciels de serveurs web</a> qui sont disponibles (<a href="https://httpd.apache.org/" rel="external">Apache</a>, <a href="http://tomcat.apache.org/">Tomcat</a>, <a href="http://www.iis.net/" rel="external">IIS</a>, <a href="http://nginx.org/" rel="external">nginx</a>). Apache est libre et gratuit, disponible sur plusieurs plateformes et est simple à installer. Nous illustrerons donc les exemples de cet article avec Apache.</p>
+</div>
+
+<h4 id="Comprendre_le_fonctionnement_de_localhost">Comprendre le fonctionnement de <em>localhost</em></h4>
+
+<p>Dans le monde du {{Glossary("DNS")}}, il existe une adresse spéciale connue par chaque ordinateur : <code>localhost</code>. Celle-ci fait référence au serveur situé sur l'ordinateur en question. Ainsi, il est possible d'accéder à un site situé sur <code>localhost</code> avec votre navigateur, même sans connexion à Internet.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Pour être plus précis, <code>localhost</code> pointe vers une {{Glossary("adresse IP")}} dirigeant vers votre propre machine : <code>127.0.0.1</code> ({{Glossary("IPv4")}}) ou <code>::1</code> ({{Glossary("IPv6")}}).</p>
+</div>
+
+<p>Essayez d'accéder à votre hôte local : <code><a href="http://localhost/">http://localhost</a></code>. Si vous obtenez un résultat semblable à l'image ci-après : félicitations ! Cela signifie que vous disposez déjà d'un serveur web installé sur votre ordinateur (par exemple Mac OS X inclut Apache préinstallé).</p>
+
+<p><img alt="Basic index from the Apache HTTP server" src="https://mdn.mozillademos.org/files/9275/index.jpg" style="height: 152px; width: 480px;"></p>
+
+<p>Si vous n'obtenez pas ce résultat, il faut installer Apache.</p>
+
+<p>Dans les deux cas, il faudra configurer Apache afin que celui-ci pointe vers votre répertoire de travail. Nous verrons comment faire dans la suite de cet article. Selon le système d'exploitation les opérations à effectuer varient légèrement. Nous commencerons par expliquer le mode opératoire à suivre pour Windows. Si vous n'utilisez pas Windows, vous pouvez directement aller aux sections pour <a href="#Ubuntu_Linux">Ubuntu/Linux</a> ou pour <a href="#Mac_OS_X">Mac OS X</a>.</p>
+
+<h4 id="Installer_et_lancer_son_serveur_local_sur_Windows">Installer et lancer son serveur local sur Windows</h4>
+
+<h5 id="Installer_Apache">Installer Apache</h5>
+
+<p>Sous Windows, installer Apache est légèrement compliqué. <a href="http://httpd.apache.org/docs/2.2/platform/windows.html">Cette page explique</a> comment installer un binaire Apache étape par étape.</p>
+
+<p>Après l'installation, allez à l'URL <a href="http://localhost/">http://localhost/</a> avec votre ordinateur afin de vérifier que votre serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.</p>
+
+<h5 id="Déplacer_la_racine_de_l'hôte_local_vers_votre_répertoire_de_travail">Déplacer la racine de l'hôte local vers votre répertoire de travail</h5>
+
+<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p>
+
+<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p>
+
+<ol>
+ <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>C:\Users\<strong>NomUtilisateur</strong>\htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur. Si vous utilisez une version de Winows plus récente, ce dossier pourra être situé à l'emplacement suivant <code>C:\Documents and Settings\<strong>NomUtilisateur</strong>\htdocs</code>.</li>
+ <li>Modifiez le fichier de configuration Apache situé à  l'emplacement suivant : <code>C:\Program Files\Apache Software Foundation\conf\httpd.conf</code>. Si nécessaire, fournissez les informations d'authentification pour l'administrateur.</li>
+ <li>Dans ce fichier, allez jusqu'à la ligne qui contient le texte suivant : <code><span style="background-color: #e6e6fa;">DocumentRoot "C:\</span><code><span style="background-color: #e6e6fa;">Users</span></code><span style="background-color: #e6e6fa;">\Apache Software Foundation\htdocs"</span></code>. Éditez cette ligne afin qu'elle pointe vers votre répertoire <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot "C:\</span><code><span style="background-color: #e6e6fa;">Documents and Settings\</span><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">\htdocs</span></code><span style="background-color: #e6e6fa;">"</span></code></li>
+ <li>Dans le même fichier, repérez l'instruction <code>&lt;Directory&gt;</code> : <code><span style="background-color: #e6e6fa;">&lt;Directory "</span><code><span style="background-color: #e6e6fa;">C:\</span><code><span style="background-color: #e6e6fa;">Users</span></code><span style="background-color: #e6e6fa;">\Apache Software Foundation\htdocs</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code>. Là aussi, modifiez le répertoire pour qu'il pointe vers le dossier de travail :  <code><span style="background-color: #e6e6fa;">&lt;Directory "C:\</span><code><span style="background-color: #e6e6fa;">Documents and Settings\</span><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">\htdocs</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code></li>
+ <li>Sauvegardez le fichier.</li>
+ <li>Redémarrez Apache : <strong>Démarrer ➤ Apache ➤ Redémarrer Apache.</strong></li>
+ <li>Rechargez la page <code>localhost</code> dans votre navigateur. Si tout s'est passé comme prévu, vous devriez voir l'index du répertoire. Par défaut, l'index correspond à la liste des fichiers du répertoire. Nous verrons par la suite comment personnaliser cette page d'index. Vous pouvez passer <a href="#Page_index">les instructions pour Ubuntu et Mac</a>.</li>
+</ol>
+
+<h4 id="Installer_et_lancer_son_serveur_local_sur_Ubuntu_(ou_plus_généralement_sur_Linux)"><a id="Ubuntu_Linux" name="Ubuntu_Linux">Installer et lancer son serveur local sur Ubuntu (ou plus généralement sur Linux)</a></h4>
+
+<h5 id="Installer_Apache_2">Installer Apache</h5>
+
+<p>Sous Ubuntu, lancez un terminal (vous pouvez utiliser le raccourci <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>) puis lancez ces commandes (saisissez votre mot de passe si besoin) :</p>
+
+<pre class="brush: bash">sudo apt-get update
+sudo apt-get install apache2</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Si vous n'utilisez pas Ubuntu ou une distribution basée sur Debian, suivez <a href="http://httpd.apache.org/docs/2.2/install.html">ces sept étapes</a> pour compiler et installer Apache. Vous aurez peut-être à saisir votre mot de passe. Vous pouvez utiliser un éditeur graphique plutôt que <code>vi</code> pour éditer les fichiers de configuration.</p>
+</div>
+
+<p>Après l'installation, accédez à <a href="http://localhost/">http://localhost/</a> avec votre navigateur afin de vérifier que le serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.</p>
+
+<h5 id="Déplacer_la_racine_de_l'hôte_local_vers_votre_répertoire_de_travail_2">Déplacer la racine de l'hôte local vers votre répertoire de travail</h5>
+
+<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p>
+
+<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p>
+
+<ul>
+ <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>/home/<strong>NomUtilisateur</strong>/htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur.</li>
+ <li>Ouvrez le fichier de configuration Apache situé à cet emplacement : <code><code>/etc/apache2/sites-available/000-default.conf.</code></code> Si besoin, ouvrez ce fichier en tant qu'administrateur. Selon la version d'Ubuntu ou de Debian, le fichier peut se situer à l'un de ces deux emplacements <code>/etc/apache2/httpd.conf</code> or <code>/etc/httpd/conf/httpd.conf</code>.</li>
+ <li>Dans ce fichier et à la ligne suivante : <code><span style="background-color: #e6e6fa;">DocumentRoot /var/www/html</span></code>. Modifiez cette line afin que le répertoire corresponde au répertoire de travail <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot /home/</span><code><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">/htdocs</span></code></code></li>
+ <li>Vous devriez également ajouter des restrictions d'accès aux fichiers. Pour cela, ajoutez les lignes suivantes sous la ligne avec <code>DocumentRoot</code> (n'oubliez pas de changer <code>USERNAME</code> avec votre nom d'utilisateur).</li>
+</ul>
+
+<pre>        &lt;Directory /&gt;
+                Options FollowSymLinks
+                AllowOverride None
+                Require all denied
+        &lt;/Directory&gt;
+        &lt;Directory /home/USERNAME/htdocs/&gt;
+                Options Indexes FollowSymLinks MultiViews
+                AllowOverride None
+                Require all granted
+        &lt;/Directory&gt;</pre>
+
+<ul>
+ <li>Sauvegardez le fichier.</li>
+ <li>Redémarrez Apache avec la commande suivante <code><span style="background-color: #e6e6fa;">sudo apachectl restart</span></code>. Si nécessaire, saisissez votre mot de passe.</li>
+ <li>Rechargez la page <code>localhost</code> dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après). Par défaut, l'index sera la liste des fichiers du répertoire courant. Nous allons voir par la suite comment personnaliser cette page. Vous pouvez <a href="#Page_index">passer les instructions pour Mac</a>.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9343/Screenshot%20from%202014-11-13%2015:13:33.png" style="height: 292px; width: 584px;"></p>
+
+<h4 id="Installer_et_lancer_son_serveur_local_sur_Mac_OS_X"><a id="Mac_OS_X" name="Mac_OS_X">Installer et lancer son serveur local sur Mac OS X</a></h4>
+
+<p>Apache est préinstallé avec Mac OS X. Mais il est toujours nécessaire de déplacer la racine <code>localhost</code> vers le répertoire de travail.</p>
+
+<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p>
+
+<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p>
+
+<ol>
+ <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>/Users/<strong>NomUtilisateur</strong>/htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur.</li>
+ <li>Ouvrez le fichier de configuration Apache situé à cet emplacement : <code>/etc/apache2/httpd.conf.</code></li>
+ <li>Dans ce fichier, trouvez la ligne <code><span style="background-color: #e6e6fa;">DocumentRoot "/Library/WebServer/Documents</span><span style="background-color: #e6e6fa;">"</span></code>. puis modifiez la afin qu'elle pointe vers votre répertoire <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot "/Users/</span><code><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">/htdocs</span></code><span style="background-color: #e6e6fa;">"</span></code></li>
+ <li>Dans ce même fichier, trouvez l'instruction <code>&lt;Directory&gt;</code> : <code><span style="background-color: #e6e6fa;">&lt;Directory "</span><code><span style="background-color: #e6e6fa;">/Library/WebServer/Documents</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code> et modifiez cette ligne avec : <code><span style="background-color: #e6e6fa;">&lt;Directory "/Users/<strong>NomUtilisateur</strong></span><code><span style="background-color: #e6e6fa;">/htdocs</span></code><span style="background-color: #e6e6fa;">"&gt;</span></code></li>
+ <li>Sauvegardez le fichier.</li>
+ <li>Redémarrez Apache avec la commande suivante <code><span style="background-color: #e6e6fa;">sudo apachectl restart</span></code>. Si nécessaire, saisissez votre mot de passe.</li>
+ <li>Rechargez la page <code>localhost</code> dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après).</li>
+</ol>
+
+<p><img alt="Example of Apache serving a folder autoindexing" src="https://mdn.mozillademos.org/files/9277/projet.jpg" style="height: 183px; width: 480px;"></p>
+
+<h3 id="Ajouter_une_page_d'index"><a id="Page_index" name="Page_index">Ajouter une page d'index</a></h3>
+
+<p>Lorsque vous visitez un site web, vous vous attendez à y trouver plus qu'une simple liste de fichiers. Il est possible d'ajouter une page d'index personnalisée pour votre site web local. Ce fichier d'index est un fichier {{Glossary("HTML")}}, il doit être intitulé <code>index.html</code> et il doit être placé dans le répertoire <code>htdocs</code>.</p>
+
+<p>Pour cela, ouvrez votre éditeur de texte puis copiez le code HTML qui suit dans un nouveau fichier :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Voici une page d'index&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;Ma propre page d'index&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Enregistrez ce fichier dans votre répertoire <code>htdocs</code> avec le nom <code>index.html</code> :</p>
+
+<p><img alt="Example of a custom index.html file" src="https://mdn.mozillademos.org/files/11721/Capture%20du%202015-10-11%2021-58-32.png" style="height: 453px; width: 632px;"></p>
+
+<p>Vous pouvez ouvrir la page <a href="http://localhost/" rel="external">http://localhost</a> dans votre navigateur, vous aurez alors :</p>
+
+<p><img alt="A custom index without any style" src="https://mdn.mozillademos.org/files/11723/Capture%20du%202015-10-11%2022-00-05.png" style="height: 178px; width: 381px;"></p>
+
+<h3 id="Organiser_ses_fichiers">Organiser ses fichiers</h3>
+
+<p>La structure et l'organisation des fichiers est critique pour n'importe quel site web. Il est très rare qu'un site web se compose uniquement de fichiers HTML. Vous aurez vraisemblablement à intégrer des images, à mettre en forme des pages avec des fichiers {{Glossary("CSS")}} ou d'ajouter des fonctionnalités avec des fichiers {{Glossary("JavaScript")}}. <em>Dès le début</em>, il est nécessaire d'organiser clairement ces fichiers pour ne pas s'y perdre par la suite.</p>
+
+<p>Bien entendu, vous pouvez suivre votre propre organisation mais la plus communément utilisée contient trois répertoires : <code>images</code> pour les images, <code>styles</code> pour les fichiers CSS et <code>scripts</code> pour les scripts. Simple et efficace.</p>
+
+<h4 id="Fichiers_d'exemples">Fichiers d'exemples</h4>
+
+<p>Dans les prochains articles, nous verrons <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">comment créer une page web</a>, <a href="/en-US/Learn/CSS/Using_CSS_in_a_web_page">comment utiliser CSS</a> puis <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">comment utiliser JavaScript</a>. Nul besoin de connaître ces langages pour placer quelques fichiers d'exemples qu'on modifiera par la suite. Cela vous permettra de mieux percevoir la structure qu'on souhaite mettre en place.</p>
+
+<p>Créons un nouveau fichier qui correspondra à votre feuille de style principale (là où vous écrirez toutes les règles CSS). Pour le moment, copiez-collez ce fragment de code dans un nouveau fichier dans votre éditeur de texte :</p>
+
+<pre class="brush: css">body {
+  font-family: sans-serif;
+}</pre>
+
+<p>Puis enregistrez le fichier dans le répertoire <code>styles</code> sous le nom <code>basic.css</code> :</p>
+
+<p><img alt="Example of a custom basic.css file" src="https://mdn.mozillademos.org/files/11727/Capture%20du%202015-10-12%2008-42-36.png" style="height: 182px; width: 528px;"></p>
+
+<p>Ensuite, revenez à (ou réouvrez) votre page d'index pour y insérer une référence à la feuille de styles. Pour cela, on utilisera la balise {{HTMLElement("link")}} (qu'on reverra dans les prochains articles) :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Voici une page d'index&lt;/title&gt;
+
+<strong>  &lt;link rel="stylesheet" href="./styles/basic.css"&gt;</strong>
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;Ma propre page d'index&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Maintenant, si vous réouvrez votre site local (vous pouvez simplement rafraîchir la page si vous avez laissé votre navigateur ouvert), vous verrez que la police a changé à cause de la feuille de style :</p>
+
+<p><img alt="A custom index with style applied" src="https://mdn.mozillademos.org/files/11725/Capture%20du%202015-10-12%2008-54-01.png" style="height: 146px; width: 285px;"></p>
+
+<h4 id="Structure_finale_pour_le_projet">Structure finale pour le projet</h4>
+
+<p>Reprenons. Votre structure de répertoires et de fichiers pour votre site devrait désormais ressembler à :</p>
+
+<ul>
+ <li><code>htdocs</code> (le dossier racine pour le projet)
+
+  <ul>
+   <li><code>images</code> (le répertoire pour les images)</li>
+   <li><code>scripts</code> (le répertoire pour les différents scripts JavaScript)</li>
+   <li><code>styles</code> (le répertoire pour les feuilles de styles CSS)
+    <ul>
+     <li><code>basic.css</code> (la feuille de style principale)</li>
+    </ul>
+   </li>
+   <li><code>index.html</code> (la page d'index pour le site web local)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Voici la structure minimale que vous devriez avoir et qui pourra s'adapter lorsque votre projet grandira. Au fur et à mesure des développements de votre projet, n'hésitez pas à adapter et à améliorer cette structure afin qu'elle soit optimale pour votre site.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que nous avons vu comment organiser les fichiers et que nous avons créé quelques uns, il est temps d'<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">écrire sa premère page web</a>.</p>