unslug fr: move

19 files changed, 2855 insertions, 0 deletions

diff --git a/files/fr/learn/common_questions/available_text_editors/index.html b/files/fr/learn/common_questions/available_text_editors/index.html
new file mode 100644
index 0000000000..d2dd87360c
--- /dev/null
+++ b/files/fr/learn/common_questions/available_text_editors/index.html
@@ -0,0 +1,292 @@
+---
+title: 'Choisir, installer et paramétrer un éditeur de texte'
+slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte
+tags:
+  - Beginner
+  - Composing
+  - Guide
+  - NeedsActiveLearning
+  - Tools
+translation_of: Learn/Common_questions/Available_text_editors
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez déjà connaître <a href="/fr/Learn/What_software_do_I_need">les différents logiciels nécessaires pour construire un site web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre comment choisir un éditeur de texte qui répondra à vos besoins en tant que développeur web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.</p>
+
+<p>La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes.</p>
+
+<p>Voici quelques questions qui peuvent vous aider à choisir :</p>
+
+<ul>
+ <li>Quel système d'exploitation (<em>OS</em>) utilisez-vous pour travailler ?</li>
+ <li>Quelles technologies souhaitez-vous manipuler ?</li>
+ <li>Quelles types de fonctionnalités de bases attendez-vous de la part d'un éditeur de texte ?</li>
+ <li>Souhaitez-vous ajoutez des fonctionnalités supplémentaires à votre éditeur de texte ?</li>
+ <li>Souhaitez-vous bénéficier d'aide ou d'un support pour votre éditeur de texte ?</li>
+ <li>Est-ce que le style et l'apparence du logiciel sont importants pour vous ?</li>
+</ul>
+
+<p>Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.</p>
+</div>
+
+<p>Voici un tableau de quelques éditeurs de texte connus :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Éditeur</th>
+   <th scope="col">Licence</th>
+   <th scope="col">Prix</th>
+   <th scope="col">Système d'exploitation</th>
+   <th scope="col">Support</th>
+   <th scope="col">Documentation</th>
+   <th scope="col">Extensible</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://atom.io/">Atom</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://discuss.atom.io/categories">Forum</a></td>
+   <td><a href="https://atom.io/docs/latest/">Manuel en ligne</a></td>
+   <td style="text-align: center;"><a href="https://atom.io/packages">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://brackets.io/">Brackets</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td>
+   <td><a href="https://github.com/adobe/brackets/wiki" rel="external">Wiki GitHub</a></td>
+   <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://panic.com/coda/" rel="external">Coda</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">99 $</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">e-mail</a></td>
+   <td><a href="https://panic.com/coda/#book">eBook</a></td>
+   <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td>
+   <td>GPL 3</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">liste de diffusion (anglophone)</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Manuel en ligne</a> / Tutoriel en français depuis l'éditeur / <a href="http://doc.ubuntu-fr.org/emacs">pages sur Ubuntu-fr</a></td>
+   <td style="text-align: center;">Oui</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">75 $</td>
+   <td>Mac</td>
+   <td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">e-mail</a></td>
+   <td>Pas de documentation utilisateur mais il existe une <a href="http://wiki.macrabbit.com/">documentation pour les extensions (<em>plug-ins</em>)</a></td>
+   <td style="text-align: center;">Oui</td>
+  </tr>
+  <tr>
+   <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td>
+   <td>GPL</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Liste de diffusion (anglophone)</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td>
+   <td><a href="https://help.gnome.org/users/gedit/stable/">Manuel en ligne</a> (en français) / <a href="http://doc.ubuntu-fr.org/gedit">Introduction sur Ubuntu-fr</a></td>
+   <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td>
+   <td>MPL</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td>
+   <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Manuel en ligne</a></td>
+   <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td>
+   <td><a href="https://notepad-plus-plus.org/fr/news/notepad-6.1.1-gpl-enhancement.html">GPL modifiée</a></td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows</td>
+   <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td>
+   <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.pspad.com/fr/">PSPad</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows</td>
+   <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td>
+   <td><a href="http://gogogadgetscott.info/pspad/">Aide en ligne</a></td>
+   <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">$70</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td>
+   <td><a href="http://www.sublimetext.com/docs/3/">Documentation officielle</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> documentation officieuse</a></td>
+   <td style="text-align: center;"><a href="https://sublime.wbond.net/">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://macromates.com/" rel="external">TextMate</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">$50</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">liste de diffusion (anglophone)</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td>
+   <td><a href="http://manual.macromates.com/en/">Manuel en ligne</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Oui</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td>
+   <td>Propriétaire</td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Mac</td>
+   <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td>
+   <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">Manuel PDF</a></td>
+   <td style="text-align: center;">Non</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.vim.org/" rel="external">Vim</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Licence ouverte spécifique</a></td>
+   <td style="text-align: center;">Gratuit</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.vim.org/maillist.php#vim" rel="external">Liste de diffusion (anglophone)</a>, <a href="http://tuppervim.org/">tuppervim (communauté francophone)</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/">Manuel en ligne</a>, tutoriel en français disponible depuis l'éditeur, <a href="http://doc.ubuntu-fr.org/vim">introduction sur Ubuntu-fr (en français)</a></td>
+   <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&amp;direction=descending" rel="external">Oui</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/Débuter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Critères_de_choix">Critères de choix</h3>
+
+<p>Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ?</p>
+
+<h4 id="Quel_est_le_système_d'exploitation_que_j'utiliser_pour_travailler">Quel est le système d'exploitation que j'utiliser pour travailler ?</h4>
+
+<p>Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre.</p>
+
+<p>Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles).</p>
+
+<h4 id="Quelles_sont_les_technologies_que_je_serai_amené-e_à_manipuler">Quelles sont les technologies que je serai amené-e à manipuler ?</h4>
+
+<p>De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme :</p>
+
+<ul>
+ <li><strong>La coloration du code.</strong> Cela permet que les fichiers soient plus lisibles grâce à la coloration des mots-clés des langages utilisés.</li>
+ <li><strong>L'auto-complétion.</strong> Cela vous permet de gagner du temps en complétant automatiquement les portions de codes (par exemple en fermant automatiquement les balises HTML, en suggérant des valeurs de propriétés CSS, etc.).</li>
+ <li><strong>Les fragments (<em>snippets</em>) de code. </strong>Vous verrez, lorsque vous utiliserez HTML (ou d'autres technologies), que pour chaque document, certains éléments sont répétés à chaque fois. Le logiciel vous épargnera de nombreux copier-coller en insérant automatiquement le fragment à répéter et vous pourrez vous concentrer sur le contenu « utile » des documents.</li>
+</ul>
+
+<p>La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}.</p>
+
+<h4 id="Quelles_sont_les_fonctionnalités_de_base_dont_j'ai_besoin">Quelles sont les fonctionnalités de base dont j'ai besoin ?</h4>
+
+<p>Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles :</p>
+
+<ul>
+ <li>Chercher et remplacer, dans un ou plusieurs documents à la fois, notamment grâce aux {{Glossary("Expressions rationnelles", "expressions rationnelles")}} ou à d'autres motifs de recherche</li>
+ <li>Aller rapidement à une ligne donnée</li>
+ <li>Pouvoir voir deux parties d'un même document simultanément (utile pour les longs documents)</li>
+ <li>Voir le HTML tel qu'il est rendu dans le navigateur</li>
+ <li>Sélectionner du texte simultanément sur plusieurs zones</li>
+ <li>Voir l'arborescence des répertoires et des fichiers de votre/vos projet(s)</li>
+ <li>Formater automatiquement votre code grâce à l'éditeur</li>
+ <li>Vérifier l'orthographe ou le code</li>
+</ul>
+
+<h4 id="Est-ce_que_je_souhaite_ajouter_des_fonctionnalités_supplémentaires_à_mon_éditeur_de_texte">Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ?</h4>
+
+<p>Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins.</p>
+
+<p>Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (<em>plugins</em>) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur.</p>
+
+<p>Si vous appréciez avoir de <em>nombreuses</em> fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour <em>Integrated Development Environment</em> en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont :</p>
+
+<ul>
+ <li><a href="http://www.aptana.com/">Aptana Studio</a></li>
+ <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li>
+ <li><a href="http://komodoide.com/" rel="external">Komodo</a></li>
+ <li><a href="https://netbeans.org/" rel="external">NetBeans</a></li>
+ <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li>
+ <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li>
+</ul>
+
+<h4 id="Ai-je_besoin_d'aide_ou_d'un_support_pour_utiliser_mon_éditeur_de_texte">Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ?</h4>
+
+<p>Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants :</p>
+
+<ol>
+ <li>Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne)</li>
+ <li>Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC)</li>
+</ol>
+
+<p>N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur.</p>
+
+<h4 id="Est-ce_que_l'apparence_de_mon_éditeur_est_importante">Est-ce que l'apparence de mon éditeur est importante ?</h4>
+
+<p>Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles.</p>
+
+<h3 id="Installation_et_paramétrage">Installation et paramétrage</h3>
+
+<p>L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe :</p>
+
+<ul>
+ <li><strong>Windows :</strong> Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier <code>.exe</code> ou <code>.msi</code>. Il peut arriver que le logiciel soit empaqueté dans un format compressé tel que <code>.zip</code>, <code>.7z</code>, ou <code>.rar</code>. Dans ce cas, vous aurez besoin d'installer un programme supplémentaire pour extraire le contenu de l'archive compressée. Par défaut, Windows gère le format <code>.zip</code>.</li>
+ <li><strong>Mac :</strong> Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier <code>.dmg</code>. Vous pouvez également trouver certains éditeurs sur l'Apple Store, ce qui simplifie le processus d'installation.</li>
+ <li><strong>Linux :</strong> Les distributions les plus populaires vous permettent d'utiliser un gestionnaire de paquets avec une interface graphique (Logithèque Ubuntu, mintInstall, Logithèque GNOME, etc.). Vous trouverez généralement un fichier <code>.deb</code> ou <code>.rpm</code> qui correspond au logiciel empaqueté. Dans la plupart des cas, vous pourrez également le dépôt de paquets de votre distribution. Dans le pire des cas, il vous faudra compiler l'éditeur à partir du code source. Prenez le temps de vérifier les instructions d'installations et les compatibilités sur le site web de l'éditeur.</li>
+</ul>
+
+<p>Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les <em>associations de fichiers</em>. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers :</p>
+
+<ul>
+ <li>Windows
+  <ul>
+   <li><a href="http://windows.microsoft.com/fr-fr/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li>
+   <li><a href="http://windows.microsoft.com/fr-fr/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li>
+  </ul>
+ </li>
+ <li><a href="http://www.youtips.com/fr/mac/changer-lapplication-par-defaut/" rel="external">Mac OS X</a></li>
+ <li>Linux
+  <ul>
+   <li><a href="http://doc.ubuntu-fr.org/changer_l_association_par_defaut_des_fichiers_avec_les_applications" rel="external">Ubuntu Unity</a></li>
+   <li><a href="http://www.generation-linux.fr/index.php?post/2008/02/10/59-associations-de-fichier-dans-gnome" rel="external">GNOME</a></li>
+   <li><a href="https://userbase.kde.org/Dolphin/File_Management/fr#Modifier_une_association_de_fichiers_.C3.A0_la_vol.C3.A9e-">KDE</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser <a href="/fr/Learn/Set_up_a_basic_working_environment">votre environnement de travail</a> ou vous pouvez aussi démarrer tout de suite et écrire <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">votre première page web</a>.</p>
diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
new file mode 100644
index 0000000000..317135bcf5
--- /dev/null
+++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
@@ -0,0 +1,178 @@
+---
+title: Tester le bon fonctionnement de votre site web
+slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web
+tags:
+  - Beginner
+  - Document
+  - Guide
+  - NeedsActiveLearning
+  - Web
+  - Web Development
+  - WebMechanics
+translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly
+---
+<div class="summary">
+<p>Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.</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/Transférer_des_fichiers_vers_un_serveur_web">comment transférer des fichiers vers un serveur web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="Summary">Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?</p>
+
+<p>Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.</p>
+
+<p>Voyons donc comment diagnostiquer et résoudre ces problèmes.</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="Tester_avec_votre_navigateur">Tester avec votre navigateur</h3>
+
+<p>La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page.</p>
+
+<h4 id="Où_est_passée_l'image">Où est passée l'image ?</h4>
+
+<p>Allons sur notre site web : <code>http://demozilla.hebergeurexemple.net/</code>. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !</p>
+
+<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/11759/Capture%20du%202015-10-12%2017-21-20.png" style="height: 174px; width: 364px;"></p>
+
+<p>Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (<strong>Outils ➤ Développement Web ➤ Réseau</strong>) puis rechargeons la page :</p>
+
+<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/11763/Capture%20du%202015-10-12%2018-21-23.png" style="height: 299px; width: 681px;"></p>
+
+<p>Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.</p>
+
+<h4 id="Les_status_HTTP">Les status HTTP</h4>
+
+<p>Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :</p>
+
+<dl>
+ <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200 : OK</strong></dt>
+ <dd>La ressource demandée a bien été transmise.</dd>
+ <dt><strong>301 : Déplacée de façon permanente (<em>Moved permanently</em>)</strong></dt>
+ <dd>La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.</dd>
+ <dt><strong>304 : Non modifiée (<em>Not modified</em>)</strong></dt>
+ <dd>La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante.</dd>
+ <dt><strong>403 : Accès interdit (<em>Forbidden</em>)</strong></dt>
+ <dd>Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire).</dd>
+ <dt><strong>404 : Non trouvée (<em>Not found</em>)</strong></dt>
+ <dd>Le message est plutôt explicite, nous en discuterons dans la suite de cet article.</dd>
+ <dt><strong>500 : Erreur interne du serveur (<em>Internal server error</em>)</strong></dt>
+ <dd>Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur.</dd>
+ <dt><strong>503 : Service indisponible (<em>Service unavailable</em>)</strong></dt>
+ <dd>Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<p>Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404.</p>
+
+<h4 id="Corriger_l'erreur_404">Corriger l'erreur 404</h4>
+
+<p>Où est donc le problème ?</p>
+
+<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/11765/Capture%20du%202015-10-12%2018-45-07.png" style="height: 206px; width: 263px;"></p>
+
+<p>À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML <code>licornes.png</code> plutôt que <code>licorne.png</code>. En corrigeant cette erreur avec l'attribut <code>src</code></p>
+
+<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/11767/Capture%20du%202015-10-12%2018-50-56.png" style="height: 162px; width: 852px;"></p>
+
+<p>Puis en sauvegardant et <a href="/en-US/Learn/Upload_files_to_a_web_server">en envoyant le fichier vers le serveur</a>, on peut ensuite recharger la page dans le navigateur :</p>
+
+<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/11769/Capture%20du%202015-10-12%2018-53-50.png" style="height: 422px; width: 531px;"></p>
+
+<p>Et voilà, revenons sur les status {{Glossary("HTTP")}} :</p>
+
+<ul>
+ <li><strong>200</strong> apparaît pour toutes les ressources ici <code>/</code>, <code>basics.css</code> et <code>licorne.png</code> : cela signifie que tous les éléments ont été rechargés.</li>
+ <li><strong>304</strong> : Vous pouvez obtenir un code pour <code>basic.css</code>, cela signifie que le fichier n'a pas été modifié depuis la dernière requête. Le navigateur utilise alors la version du fichier qu'il a en cache plutôt que d'en demander un nouvel exemplaire.</li>
+</ul>
+
+<p>Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP !</p>
+
+<h3 id="Les_erreurs_fréquentes">Les erreurs fréquentes</h3>
+
+<p>Les erreurs les plus fréquentes sont les suivantes.</p>
+
+<h4 id="Des_coquilles_dans_l'adresse">Des coquilles dans l'adresse</h4>
+
+<p>Dans la capture suivante, nous avons voulu accéder à <code>http://demozilla.hebergeurexemple.net/</code> mais nous avons oublié un « m » :</p>
+
+<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/11771/Capture%20du%202015-10-12%2018-58-19.png" style="height: 511px; width: 803px;"></p>
+
+<p>L'adresse est introuvable… en effet.</p>
+
+<h4 id="Les_erreurs_404">Les erreurs 404</h4>
+
+<p>La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers.</p>
+
+<h4 id="Les_erreurs_JavaScript">Les erreurs JavaScript</h4>
+
+<p>Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script.</p>
+
+<p>Pour voir ces erreurs, ouvrez la console (<strong>Outils ➤ Développement web ➤ Console web</strong>) and puis rechargez la page:</p>
+
+<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/11773/Capture%20du%202015-10-12%2019-10-52.png" style="height: 391px; width: 461px;"></p>
+
+<p>Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans <a href="/fr/Apprendre/JavaScript">une autre série d'articles</a>).</p>
+
+<h3 id="D'autres_points_de_contrôles">D'autres points de contrôles</h3>
+
+<p>Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ».</p>
+
+<h4 id="Qu'en_est-il_de_la_performance">Qu'en est-il de la performance ?</h4>
+
+<p>Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme <a href="http://www.webpagetest.org/">webpagetest.org</a> ou des modules complémentaires comme <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> qui peuvent fournir des indications intéressantes :</p>
+
+<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p>
+
+<p>Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.</p>
+
+<h4 id="Est-ce_que_le_serveur_réagit_suffisamment_vite">Est-ce que le serveur réagit suffisamment vite ?</h4>
+
+<p><code>ping</code> est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement :</p>
+
+<pre>$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms</pre>
+
+<p>Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci <strong>Ctrl+C</strong> pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme <code>ping</code> contactera le serveur indéfiniment.</p>
+
+<h3 id="Une_checklist_de_base">Une <em>checklist</em> de base</h3>
+
+<ul>
+ <li>Vérifier les erreurs 404</li>
+ <li>S'assurer que chaque page web fonctionne comme attenu</li>
+ <li>Vérifier le site web avec plusieurs navigateurs pour s'assurer qu'il s'affiche de façon cohérente sur ces différents navigateurs</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets.</p>
+
+<ul>
+ <li>De nombreuses personnes peuvent accéder à votre site, mieux vaut donc que celui-ci <a href="/fr/Apprendre/Accessibilité">soit le plus accessible possible</a>.</li>
+ <li>Le site a l'air brut de décoffrage ? C'est le bon moment pour <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">apprendre un peu de CSS</a>.</li>
+</ul>
diff --git a/files/fr/learn/common_questions/common_web_layouts/index.html b/files/fr/learn/common_questions/common_web_layouts/index.html
new file mode 100644
index 0000000000..0c50cec44c
--- /dev/null
+++ b/files/fr/learn/common_questions/common_web_layouts/index.html
@@ -0,0 +1,126 @@
+---
+title: Conception d'une page web
+slug: Apprendre/Concevoir_page_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - HTML
+  - NeedsActiveLearning
+translation_of: Learn/Common_questions/Common_web_layouts
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Assurez-vous d'avoir d'abord identifié <a href="/fr/Apprendre/Commencez_votre_projet_web">ce que vous souhaitez accomplir</a> avec votre projet web.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre où (et comment !) disposer des éléments dans vos pages web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.</p>
+
+<p>Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :</p>
+
+<dl>
+ <dt>En-tête</dt>
+ <dd>Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.</dd>
+ <dt>Contenu principal</dt>
+ <dd>Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.</dd>
+ <dt>Contenu secondaire</dt>
+ <dd>Il peut s'agir :
+ <ol>
+  <li>d'informations complémentaires au contenu principal ;</li>
+  <li>d'informations partagées entre un sous-ensemble de pages ;</li>
+  <li>d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.</li>
+ </ol>
+ </dd>
+ <dt>Bas de page</dt>
+ <dd>Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.</dd>
+</dl>
+
+<p>Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où <strong>1 </strong>représente l'entête ; <strong>2,  </strong>le bas de page ; <strong>A</strong>, le contenu principal ; et <strong>B1, B2</strong>, le contenu secondaire) :</p>
+
+<p><strong>Dispostion à une colonne : </strong>particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.</p>
+
+<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Disposition à deux colonnes :</strong> souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.</p>
+
+<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p>
+
+<p><strong>Disposition à trois colonnes :</strong> adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).</p>
+
+<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p>
+
+<p>Il est aussi possible de mélanger tous ces modèles classiques :</p>
+
+<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p>
+
+<p>Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.</p>
+
+<p>Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Aucun exercice pratique n'est disponible actuellement. <a href="/fr/docs/MDN/Débuter_sur_MDN">S.V.P., pensez à contribuer !</a></em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Regardons maintenant quelques exemples concrets tirés de sites connus.</p>
+
+<h3 id="Disposition_à_une_colonne">Disposition à une colonne</h3>
+
+<p><strong><a href="http://www.invisionapp.com/" rel="external">Invision</a> </strong>: un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.</p>
+
+<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;">        <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.</p>
+
+<h3 id="Disposition_à_deux_colonnes">Disposition à deux colonnes</h3>
+
+<p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).</p>
+
+<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;">        <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p>
+
+<p>Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être <em>directement relié</em>.</p>
+
+<h3 id="Attention_c'est_un_piège_!">Attention, c'est un piège !</h3>
+
+<p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…</p>
+
+<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;">        <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p>
+
+<p>…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (<em>float</em> en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.</p>
+
+<p>Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de  MICA forment une ligne de force verticale.</p>
+
+<p>Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.</p>
+
+<h3 id="Une_disposition_en_apparence_beaucoup_plus_complexe">Une disposition en apparence beaucoup plus complexe</h3>
+
+<p><strong>L'<a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opéra de Paris</a>.</strong></p>
+
+<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;">        <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p>
+
+<p>Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).</p>
+
+<p>Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Deux options s'offrent maintenant à vous :</p>
+
+<ul>
+ <li>Approfondir vos connaissances <a href="/fr/Apprendre/Commencer_avec_le_web">sur les bases de la conception web</a>.</li>
+ <li>Mettre le tout en pratique en <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créant votre toute première page web</a>.</li>
+</ul>
diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html
new file mode 100644
index 0000000000..8d6ae0ad6a
--- /dev/null
+++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html
@@ -0,0 +1,247 @@
+---
+title: Concevoir un site pour tous les types d'utilisateurs
+slug: Apprendre/Concevoir_site_tous_types_utilisateurs
+tags:
+  - Accessibility
+  - Beginner
+  - Design
+  - Mobile
+  - NeedsActiveLearning
+translation_of: Learn/Common_questions/Design_for_all_types_of_users
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+<div class="summary">
+<p>Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avoir lu <a href="/fr/Learn/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a> (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec <a href="/fr/Apprendre/Concevoir_page_web">l'anatomie d'une page web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les points les plus importants et facile à mettre en œuvre pour atteindre un tel objectif.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Le_contraste_des_couleurs">Le contraste des couleurs</h3>
+
+<p>Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil.</p>
+
+<p>Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste.</p>
+
+<p>Pour contrôler le contraste, vous pouvez télécharger et installer <a href="http://www.paciellogroup.com/resources/contrastanalyser/">l'analyseur de contraste</a> du Groupe Paciello.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.</p>
+</div>
+
+<p>Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :</p>
+
+<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p>
+
+<p>Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..</p>
+
+<h3 id="Taille_de_police_(ou_taille_de_fonte)">Taille de police (ou taille de fonte)</h3>
+
+<p>La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives.</p>
+
+<h4 id="Les_unités_absolues">Les unités absolues</h4>
+
+<p>Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (<code>px</code>). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :</p>
+
+<pre>body { font-size:16px; }</pre>
+
+<p>… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».</p>
+
+<p>Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.</p>
+
+<h4 id="Les_unités_relatives">Les unités relatives</h4>
+
+<p>Également appelées <em>unités proportionnelles,</em> les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur.</p>
+
+<p>Les unités relatives sont exprimées en <code>em</code>, <code>%</code> et <code>rem</code>:</p>
+
+<dl>
+ <dt>Les tailles exprimées en pourcentages : <code>%</code></dt>
+ <dd>Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).</dd>
+ <dt>Les tailles exprimées en em : <code>em</code></dt>
+ <dd>Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).</dd>
+ <dt>Les tailles exprimées en rem : <code>rem</code></dt>
+ <dd>Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec <code>em</code>.</dd>
+</dl>
+
+<p>Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (<code>h1</code>) dont la taille soit équivalente à 32px et qu'au sein de ce <code>&lt;h1&gt;</code> on ait un élément <code>span</code> avec une classe <code>subheading</code>, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).</p>
+
+<p>Voici le code HTML qu'on utilisera :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Tests sur les tailles de police&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+    &lt;h1&gt;Voici notre titre principal
+        &lt;span class="subheading"&gt;Et voici notre sous-titre&lt;/span&gt;
+    &lt;/h1&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :</p>
+
+<pre class="brush: css">body { font-size:100%; }
+/* 100% de la taille de base du navigateur, en
+général, le texte sera affiché sur 16 pixels */
+
+h1 { font-size:200%; }
+/* Deux fois la taille du corps de la page,
+soit 32 pixels */
+
+span.subheading { font-size:50%; }
+/* La moitié du h1,soit 16 pixels, ce qui revient
+à la taille de base originelle */
+</pre>
+
+<p>Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :</p>
+
+<pre class="brush: css">body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur
+dans la plupart des cas ça correspondra à 16 pixels */
+
+h1 { font-size:2em; }
+/* deux fois la taille du coros, soit 32 pixels */
+
+span.subheading { font-size:0.5em; }
+/* la moitié de la taille de h1, 16 pixels
+ce qui revient à taille originelle */</pre>
+
+<p>Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.</p>
+
+<p>C'est là qu'interviennent les <code>rem</code>. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :</p>
+
+<pre class="brush: css">body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur,
+soit 16 pixels dans la plupart des cas */
+
+h1 { font-size:2rem; }
+/* deux fois la taille du corps soit 32 pixels */
+
+span.subheading { font-size:1rem; }
+/* la taille originale */</pre>
+
+<p>C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'<a href="http://caniuse.com/#search=rem">Internet Explorer 9 et dans n'importe quel autre navigateur récent</a>, n'hésitez pas à l'utiliser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.</p>
+</div>
+
+<h4 id="Pourquoi_aurais-je_besoin_d'utiliser_des_unités_proportionnelles">Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?</h4>
+
+<p>Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.</p>
+
+<p>Il est généralement conseillé de :</p>
+
+<ul>
+ <li>Décrire les tailles de police en unité <code>rem</code>, cela ne posera aucun problème à la plupart des navigateurs ;</li>
+ <li>Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des <code>em</code>s, quitte à faire un peu de mathématique en chemin.</p>
+</div>
+
+<h3 id="Largeur_de_ligne">Largeur de ligne</h3>
+
+<p>Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.</p>
+
+<p>Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.</p>
+
+<p>Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Tests sur les tailles de police&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;div class="container"&gt;
+    &lt;h1&gt;Le titre principal
+        &lt;span class="subheading"&gt;Et le sous-titre&lt;/span&gt;
+    &lt;/h1&gt;
+
+    &lt;p&gt;[Un grand texte qui s'étire sur plusieurs lignes]&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ici, nous avons un <code>div</code> avec une classe <code>container</code>. Il est possible de mettre en forme le <code>div</code> en réglant sa largeur avec la propriété <code>width</code> ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété <code>max-width</code>. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété <code>max-width</code> pour avoir au maximum 70 caractères par ligne :</p>
+
+<pre class="brush: css">div.container { max-width:70em; }</pre>
+
+<h3 id="Fournir_un_contenu_alternative_pour_les_images_les_sons_et_les_vidéos">Fournir un contenu alternative pour les images, les sons et les vidéos</h3>
+
+<p>Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.</p>
+
+<h4 id="Les_images">Les images</h4>
+
+<p>Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :</p>
+
+<ul>
+ <li>Vos lecteurs souffrant d'une déficience visuelle utiliseront un logiciel lecteur d'écran qui ne pourra restituer que du texte.</li>
+ <li>Vos lecteurs peuvent naviguer depuis un intranet très strict qui bloque les images provenant d'un {{Glossary("CDN")}}.</li>
+ <li>Vos lecteurs peuvent avoir désactivé l'affichage des images pour économiser de la bande passante, ceci est notamment valable pour les appareils mobiles (voir ci-après).</li>
+</ul>
+
+<dl>
+ <dt>Les images décoratives</dt>
+ <dd>Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut <code>alt</code> : <code>&lt;img src="deco.gif" alt=""&gt;</code> afin qu'elles n'encombrent pas le texte.</dd>
+ <dt>Les images informatives</dt>
+ <dd>Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut <code>alt</code> par rapport au contenu de l'image.</dd>
+</dl>
+
+<p>Si l'image peut être décrite succintement, vous pouvez fournir un attribut <code>alt</code> qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut <code>longdesc</code>. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'utilisation voire l'existence de <code>longdesc</code> ont toujours été débatues. Veuillez vous référer à la page du W3C' <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> pour une explication complète et des exemples détaillés.</p>
+</div>
+
+<h4 id="AudioVidéo">Audio/Vidéo</h4>
+
+<p>Il est également nécessaire de fournir des alternatives à du contenu multimédia.</p>
+
+<dl>
+ <dt>Sous-titrage</dt>
+ <dd>Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant.</dd>
+ <dt>Transcription</dt>
+ <dd>Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo.</dd>
+</dl>
+
+<h3 id="Compression_des_images">Compression des images</h3>
+
+<p>Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :</p>
+
+<ul>
+ <li><strong>Logiciels à installer :</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (toutes les plates-formes, <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li>
+ <li><strong>Outils en lignes : </strong><a href="http://smush.it/">smushit!</a> de Yahoo!,   <a href="http://tools.dynamicdrive.com/imageoptimizer/">Online Image Optimizer</a> de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante)</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec <a href="/en-US/docs/Learn/Basics_of_UX_Design">les bases de l'ergonomie ou UX (<em>User Experience</em> en anglais)</a>.</p>
diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.html b/files/fr/learn/common_questions/how_does_the_internet_work/index.html
new file mode 100644
index 0000000000..b4f81c9acf
--- /dev/null
+++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.html
@@ -0,0 +1,97 @@
+---
+title: Le fonctionnement de l'Internet
+slug: Apprendre/Fonctionnement_Internet
+tags:
+  - Beginner
+  - Internet
+  - WebMechanics
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div class="summary">
+<p>Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Aucun, mais nous vous encourageons à lire l'article <a href="/fr/Apprendre/Commencez_votre_projet_web">Commencez votre projet Web</a> avant celui-ci.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Vous apprendrez les rudiments de l'infrastructure technique du Web et vous serez en mesure de distinguer « Internet » et « Web ».</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'<strong>Internet</strong> est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.</p>
+
+<p><a href="https://fr.wikipedia.org/wiki/Internet#Historique" rel="external">L'histoire des débuts de l'Internet est quelque peu nébuleuse</a>. Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a> : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (<em>en anglais seulement</em>)</li>
+</ul>
+
+<h2 id="Allons_plus_loin">Allons plus loin</h2>
+
+<h3 id="Un_réseau_de_base">Un réseau de base</h3>
+
+<p>Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un <a href="https://fr.wikipedia.org/wiki/Ethernet" rel="external">câble Ethernet</a>), soit sans fil (par exemple, via <a href="http://fr.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> ou <a href="http://fr.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Tous ces types de connexions sont possibles sur les ordinateurs modernes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!</p>
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle <em>routeur</em>. Ce <em>routeur</em> n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.</p>
+
+<p>Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.</p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="Un_réseau_de_réseaux">Un réseau de réseaux</h3>
+
+<p>Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul <em>routeur</em> ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un <em>routeur</em> n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux <em>routeurs</em> ? Oui, absolument, et en voici le résultat!</p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.</p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé <em>modem</em>. Ce <em>modem</em> convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.</p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des <em>routeurs</em> qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).</p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Localiser_un_ordinateur">Localiser un ordinateur</h3>
+
+<p>Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie <em>Internet Protocol</em>) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : <code>192.168.2.10</code>  ou de lettres et de chiffres séparés par deux points. <code>2001:0db8:85a3:0000:0000:8a2e:0370:7334</code>.</p>
+
+<p>C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé <em>nom de domaine, </em>est souvent associé aux adresses IP. Par example, <code>google.com</code> est le nom de domaine associé à l'adresse IP <code>173.194.121.32</code>. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.</p>
+
+<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="L'Internet_et_le_web">L'Internet et le web</h3>
+
+<p>Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructre technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés <em>serveurs Web</em>) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'<em>Internet</em> est une infrastructure, alors que le <em>Web</em> est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}.</p>
+
+<h2 id="Étapes_suivantes">Étapes suivantes</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Comprendre la différence entre une page web, un site web, un serveur web et un moteur de recherche</a></li>
+ <li><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li>
+</ul>
diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.html b/files/fr/learn/common_questions/how_much_does_it_cost/index.html
new file mode 100644
index 0000000000..e9ef0e5b3e
--- /dev/null
+++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.html
@@ -0,0 +1,161 @@
+---
+title: 'Publier sur le Web : combien ça coûte ?'
+slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte
+tags:
+  - Beginner
+  - Learn
+  - WebMechanics
+translation_of: Learn/Common_questions/How_much_does_it_cost
+---
+<div class="summary">
+<p>Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable connaître<a href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web"> les logiciels nécessaires au développement web</a>, les différences entre <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web, un site web, etc</a>. et savoir <a href="/fr/Apprendre/Comprendre_noms_de_domaine">ce qu'est un nom de domaine</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).</p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Développer_son_site_soi-même">Développer son site soi-même</h3>
+
+<h4 id="Logiciels">Logiciels</h4>
+
+<h5 id="Éditeurs_de_texte">Éditeurs de texte</h5>
+
+<p>Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service.</p>
+
+<p>De nombreux éditeurs sont gratuits : <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a> et <a href="https://netbeans.org/">Netbeans</a>. Certains comme <a href="http://www.sublimetext.com/">Sublime Text</a> peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a> peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a> peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.</p>
+
+<p>Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.</p>
+
+<p>Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (<em>plugins</em>) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.</p>
+
+<h5 id="Éditeurs_graphiques">Éditeurs graphiques</h5>
+
+<p>Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires.</p>
+
+<p>Les éditeurs graphiques peuvent être gratuits (<a href="http://www.gimp.org/">GIMP</a>), payants (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, moins de 100 € ) voire assez chers (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a> pour plusieurs centaines d'euros).</p>
+
+<p>Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques.</p>
+
+<h5 id="Éditeurs_multimédia">Éditeurs multimédia</h5>
+
+<p>Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante).</p>
+
+<p>Pour éditer des fichiers audio, il existe des logiciels gratuits (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>) ou d'autres qui coûtent quelques centaines d'euros (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Les logiciels d'édition vidéo peuvent être gratuits (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> pour Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> pour Mac), coûter moins d'une centaine d'euros (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>) ou coûter plusieurs centaines d'euros (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins.</p>
+
+<h5 id="Outils_de_publication_client_Glossary(FTP)">Outils de publication : client {{Glossary("FTP")}}</h5>
+
+<p>Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.</p>
+
+<p>Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants.</p>
+
+<p>Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : <a href="https://filezilla-project.org/">FileZilla</a> pour toutes les plateformes, <a href="http://winscp.net/">WinSCP</a> pour Windows, <a href="https://cyberduck.io/">Cyberduck</a> pour Mac et Windows <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">et d'autres encore</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.</p>
+</div>
+
+<h4 id="Navigateurs">Navigateurs</h4>
+
+<p>Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez <a href="https://www.mozilla.org/firefox/all/">télécharger Firefox</a> ou <a href="https://www.google.com/chrome/browser/">télécharger Google Chrome</a>.</p>
+
+<h4 id="Accès_au_Web">Accès au Web</h4>
+
+<h5 id="Ordinateur_Modem">Ordinateur / Modem</h5>
+
+<p>Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. <em>A minima</em> vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.</p>
+
+<p>Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.</p>
+
+<p>Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet.</p>
+
+<h5 id="Accès_Internet">Accès Internet</h5>
+
+<p>Assurez-vous d'avoir suffisamment de bande passante :</p>
+
+<ul>
+ <li>Un accès bas-débit devrait suffire pour un site web « simple » (des images de taille raisonnable, du texte, un peu de CSS et de JavaScript).</li>
+ <li>Si, en revanche, vous souhaitez maintenir un site plus volumineux avec des centaines de fichiers voire servir des fichiers audio/vidéo depuis votre propre serveur web, vous aurez besoin d'un accès ADSL voire d'un accès à la fibre. Le prix et la disponibilité d'un tel accès peuvent varier selon votre situation géographique et selon que vous êtes un professionnel ou un particulier.</li>
+</ul>
+
+<h4 id="Hébergement">Hébergement</h4>
+
+<h5 id="Comprendre_ce_qu'est_la_«_bande_passante_»">Comprendre ce qu'est la « bande passante »</h5>
+
+<p>Le tarif d'un hébergeur  variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.</p>
+</div>
+
+<h5 id="Nom_de_domaine">Nom de domaine</h5>
+
+<p>Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement (<a href="https://www.1and1.com/">1&amp;1</a> et <a href="https://www.gandi.net/?lang=en">Gandi</a> sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :</p>
+
+<ul>
+ <li>Des obligations locales (certains noms de domaines locaux sont plus chers car en fonction du pays, le prix fixé est différent)</li>
+ <li>Des services associés au nom de domaine : certains bureaux d'enregistrement fournissent par exemple une protection contre le spam en masquant votre adresse physique et votre adresse électronique derrière leur adresse.</li>
+</ul>
+
+<h5 id="Hébergement_«_maison_»_et_hébergement_«_packagé_»">Hébergement « maison » et hébergement « packagé »</h5>
+
+<p>Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles.</p>
+
+<p>Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés (<a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web.</p>
+
+<h5 id="Hébergement_gratuit_et_hébergement_payant">Hébergement gratuit et hébergement payant</h5>
+
+<p>Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?</p>
+
+<ol>
+ <li>Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.</li>
+ <li>Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu.</li>
+</ol>
+
+<p>Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques.</p>
+
+<h3 id="Agences_web_professionnelles_et_hébergement">Agences web professionnelles et hébergement</h3>
+
+<p>Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous.<br>
+ <br>
+ Le coût d'un tel projet varie selon plusieurs facteurs :</p>
+
+<ul>
+ <li>Est-ce que le site web ne contient que quelques pages de texte ou est-ce un site complexe avec plusieurs centaines de pages ?</li>
+ <li>Le site est-il mis à jour régulièrement ou s'agit-il d'un site web statique ?</li>
+ <li>Est-ce que le site web doit être connecté au service informatique de votre entreprise pour récolter du contenu (par exemple des données internes) ?</li>
+ <li>Souhaitez-vous que votre site brille de mille feux avec les dernières mises en forme à la mode ?</li>
+ <li>Est-ce que l'agence web doit détecter et résoudre des problèmes de scénarios et d'ergonomie complexes (en organisant par exemples des tests utilisateurs ou du <em>A/B testing</em> afin de déterminer une meilleure solution) ?</li>
+</ul>
+
+<p>De plus, en ce qui concerne l'hébergement :</p>
+
+<ul>
+ <li>Faut-il des serveurs redondants au cas où un serveur tombe en panne ?</li>
+ <li>Est-ce qu'une fiabilité de 95% est suffisante ou faut-il un service qui fonctionne 24H/24, 7J/7 ?</li>
+ <li>Un serveur partagé est-il suffisant ou faut-il préférer un machine dédiée avec de hautes performances ?</li>
+</ul>
+
+<p>Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">préparer un environnement de travail</a>.</p>
+
+<ul>
+ <li>Vous pouvez lire <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">cet article sur comment choisir et installer un éditeur de texte</a>.</li>
+ <li>Si vous souhaitez en savoir plus sur les aspects de conception, vous pouvez <a href="/fr/Apprendre/Concevoir_page_web">décortiquer l'anatomie d'une page web</a>.</li>
+</ul>
diff --git a/files/fr/learn/common_questions/index.html b/files/fr/learn/common_questions/index.html
new file mode 100644
index 0000000000..3dc2df9fca
--- /dev/null
+++ b/files/fr/learn/common_questions/index.html
@@ -0,0 +1,127 @@
+---
+title: Questions fréquentes
+slug: Apprendre/Common_questions
+tags:
+  - Learn
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur <a href="/en-US/docs/Learn/HTML">HTML</a> ou <a href="/en-US/docs/Learn/CSS">CSS</a>.) Ces articles sont conçus pour être lus de manière indépendante.</p>
+
+<h2 id="Comment_le_Web_fonctionne">Comment le Web fonctionne</h2>
+
+<p>Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement.</p>
+
+<dl>
+ <dt>
+ <h3 id="Comment_fonctionne_Internet"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">Comment fonctionne Internet?</a></h3>
+ </dt>
+ <dd><strong>Internet</strong> est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.</dd>
+ <dt>
+ <h3 id="Quelle_est_la_différence_entre_une_page_web_un_site_web_un_serveur_web_et_un_moteur_de_recherche"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?</a></h3>
+ </dt>
+ <dd>Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.</dd>
+ <dt>
+ <h3 id="Quest-ce_quune_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL?</a></h3>
+ </dt>
+ <dd>Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.</dd>
+ <dt>
+ <h3 id="Quest-ce_quun_nom_de_domaine"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Qu'est-ce qu'un nom de domaine?</a></h3>
+ </dt>
+ <dd>Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.</dd>
+ <dt>
+ <h3 id="Quest-ce_quun_serveur_Web"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur Web?</a></h3>
+ </dt>
+ <dd>Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.</dd>
+ <dt>
+ <h3 id="Que_sont_les_liens_hypertextes"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Que sont les liens hypertextes?</a></h3>
+ </dt>
+ <dd>Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.</dd>
+</dl>
+
+<h2 id="Outils_et_installation">Outils et installation</h2>
+
+<p>Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.</p>
+
+<dl>
+ <dt>
+ <h3 id="Combien_ça_coûte_de_créer_quelque_chose_sur_le_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de créer quelque chose sur le Web?</a></h3>
+ </dt>
+ <dd>Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).</dd>
+ <dt>
+ <h3 id="Quel_logiciel_est_nécessaire_pour_construire_un_site_web"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Quel logiciel est nécessaire pour construire un site web?</a></h3>
+ </dt>
+ <dd>Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.</dd>
+ <dt>
+ <h3 id="Quels_sont_les_éditeurs_disponibles"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">Quels sont les éditeurs disponibles?</a></h3>
+ </dt>
+ <dd>Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.</dd>
+ <dt>
+ <h3 id="Comment_installer_un_environnement_de_base_pour_travailler"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">Comment installer un environnement de base pour travailler?</a></h3>
+ </dt>
+ <dd>Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.</dd>
+ <dt>
+ <h3 id="Que_sont_les_outils_de_développement_du_navigateur"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement du navigateur?</a></h3>
+ </dt>
+ <dd>Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.</dd>
+ <dt>
+ <h3 id="Comment_être_sûr_que_votre_site_fonctionne_correctement"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Comment être sûr que votre site fonctionne correctement?</a></h3>
+ </dt>
+ <dd>Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.</dd>
+ <dt>
+ <h3 id="Comment_transférer_des_fichiers_vers_un_serveur_web"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">Comment transférer des fichiers vers un serveur web?</a></h3>
+ </dt>
+ <dd>Cet article montre comment mettre son site en ligne en utilisant un outil <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.</dd>
+ <dt>
+ <h3 id="Comment_utiliser_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">Comment utiliser GitHub Pages?</a></h3>
+ </dt>
+ <dd>Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.</dd>
+ <dt>
+ <h3 id="Comment_héberger_son_site_sur_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger son site sur Google App Engine?</a></h3>
+ </dt>
+ <dd>Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.</dd>
+ <dt>
+ <h3 id="Quels_outils_sont_disponibles_pour_corriger_et_améliorer_les_performances_du_site_web"><a href="/en-US/docs/Tools/Performance">Quels outils sont disponibles pour corriger et améliorer les performances du site web?</a></h3>
+ </dt>
+ <dd>Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.</dd>
+</dl>
+
+<h2 id="Conception_et_accessibilité">Conception et accessibilité</h2>
+
+<p>Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="Comment_démarrer_dans_la_conception_de_mon_site_web"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">Comment démarrer dans la conception  de mon site web?</a></h3>
+ </dt>
+ <dd>Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.</dd>
+ <dt>
+ <h3 id="Que_contiennent_les_mises_en_page_classiques"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">Que contiennent les mises en page classiques?</a></h3>
+ </dt>
+ <dd>Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.</dd>
+ <dt>
+ <h3 id="Quest-ce-que_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">Qu'est-ce-que l'accessibilité?</a></h3>
+ </dt>
+ <dd>Cet article est une introduction aux concepts de base de l'accessibilité web.</dd>
+ <dt>
+ <h3 id="Comment_concevoir_pour_tous_les_types_dutilisateurs"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">Comment concevoir pour tous les types d'utilisateurs?</a></h3>
+ </dt>
+ <dd>Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.</dd>
+ <dt>
+ <h3 id="Quelles_fonctionnalités_HTML_favorisent_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">Quelles fonctionnalités HTML favorisent l'accessibilité?</a></h3>
+ </dt>
+ <dd>Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.</dd>
+</dl>
+
+<h2 id="Questions_HTML_CSS_et_JavaScript">Questions HTML, CSS et JavaScript</h2>
+
+<p>Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Utiliser CSS pour résoudre des problèmes courants</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a></li>
+</ul>
diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html
new file mode 100644
index 0000000000..f5ff96a440
--- /dev/null
+++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -0,0 +1,98 @@
+---
+title: >-
+  Comprendre les différences entre une page web, un site web, un serveur web et
+  un moteur de recherche
+slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche
+tags:
+  - Beginner
+  - Web
+translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
+---
+<div class="summary">
+<p>Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable comprendre <a href="fr/Apprendre/Fonctionnement_Internet">comment fonctionne Internet</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre les différences entre une page web, un site web, un serveur web et un moteur de recherche.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (toutefois, si vous êtes curieux, vous pouvez consulter notre <a href="/fr/docs/Glossaire">glossaire</a>). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentés, mais néanmoins distinctes. Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :</p>
+
+<dl>
+ <dt>page web</dt>
+ <dd>un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari)</dd>
+ <dt>site web</dt>
+ <dd>un ensemble de pages web regroupées entre elles de différentes façons.</dd>
+ <dt>serveur web</dt>
+ <dd>un ordinateur qui héberge un site web</dd>
+ <dt>moteur de recherche</dt>
+ <dd>un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.)</dd>
+</dl>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Aucun contenu de pédagogie active n'est disponible pour le moment. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p>
+
+<h2 id="Allons_plus_loin">Allons plus loin</h2>
+
+<p>Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues.</p>
+
+<h3 id="Page_web">Page web</h3>
+
+<p>Une <em>page web</em> est un document simple qui peut être affiché par un {{Glossary("navigateur")}}. Ce document est écrit à l'aide du langage {{Glossary("HTML")}} (nous en reparlerons plus en profondeur dans d'<a href="https://developer.mozilla.org/fr/docs/Web/HTML">autres articles</a>) et peut inclure diverses autres ressources telles que :</p>
+
+<ul>
+ <li>des <em>feuilles de style</em> — qui déterminent l'apparence de la page ;</li>
+ <li>des <em> scripts</em> — qui ajoutent des fonctions interactives ; ou</li>
+ <li>du <em>contenu multimédia</em> — images, sons, vidéos.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note : </strong>Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers {{Glossary("PDF")}} ou des images, mais le terme <strong>page web</strong> désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme <strong>document</strong>.</p>
+</div>
+
+<p>Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :</p>
+
+<p style="text-align: center;"><img alt="Exemple d'une adresse de page web dans la barre d'adresse du navigateur" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="float: left; height: 239px; width: 650px;"></p>
+
+<p>Un <em>site web</em> est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web.</p>
+
+<p>Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée <em>page d'accueil</em>, du site web.</p>
+
+<p><img alt="Example du nom de domaine d'un site web dans la barre d'adresse du navigateur" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="height: 365px; width: 650px;"></p>
+
+<p>Les termes <em>page web</em> et <em>site web</em> sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un <em>site web à page unique</em>.</p>
+
+<h3 id="Serveur_web">Serveur web</h3>
+
+<p>Un <em>serveur web</em> est un ordinateur hébergant un ou plusieurs <em>sites web</em>. « Héberger » signifie que toutes les <em>pages web</em> et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le <em>serveur web</em> transmettra la <em>page web</em> du <em>site web</em> hébergé au navigateur de l'utilisateur.</p>
+
+<p>Attention à ne pas confondre <em>site web</em> et <em>serveur web</em>. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le <em>serveur web</em> ne répond pas et que, par conséquent, le <em>site web</em> n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme <em>serveur web</em> n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible.</p>
+
+<h3 id="Moteur_de_recherche">Moteur de recherche</h3>
+
+<p>Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'<em>autres</em> sites web.</p>
+
+<p>Il y en a tout plein : <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a> et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser votre préféré.</p>
+
+<p>Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un <em><strong>navigateur</strong></em> est un logiciel qui affiche des pages web, alors qu'un <strong><em>moteur de recherche</em></strong> est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie.</p>
+
+<p>Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut :</p>
+
+<p><img alt="Exemple de Firefox nightly affichant par défaut une page Google page personnalisée" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="height: 399px; width: 650px;"></p>
+
+<h2 id="Étapes_suivantes">Étapes suivantes</h2>
+
+<ul>
+ <li>Allez plus loin : <a href="/en-US/docs/Learn/What_is_a_web_server">Qu'est-ce qu'un serveur web ?</a></li>
+ <li>Voyez comment des pages web sont liées pour former un site web : <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Comprendre comment fonctionne les liens sur le Web</a></li>
+</ul>
diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..c9deed5e9b
--- /dev/null
+++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,109 @@
+---
+title: Comment configurer un serveur de test local ?
+slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local
+tags:
+  - Apprendre
+  - Débutant
+  - Express
+  - Flask
+  - Node
+  - PHP
+  - Python
+  - Serveurs
+  - django
+  - lamp
+  - localhost
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.</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="/en-US/docs/Learn/How_the_Internet_works">comment Internet fonctionne</a> et <a href="/en-US/docs/Learn/What_is_a_Web_server">ce qu'est un serveur Web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Vous apprendrez à configurer un serveur de test local.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Fichiers_locaux_contre_fichiers_distants">Fichiers locaux contre fichiers distants</h2>
+
+<p>Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant <em>Fichier</em> &gt; <em>Ouvrir...</em> et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.</p>
+
+<p>Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par <code>file://</code> suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par <code>http://</code> ou <code>https://</code> ; dans ce cas le fichier a été servi via HTTP.</p>
+
+<h2 id="Le_problème_du_test_local">Le problème du test local</h2>
+
+<p>Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :</p>
+
+<ul>
+ <li><strong>Ils sont basés sur des requêtes asynchrones</strong>. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récolter des données depuis le serveur </a>) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> pour en savoir plus).</li>
+ <li><strong>Ils mettent en œuvre un langage spécifique, tournant sur le serveur</strong>. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.</li>
+</ul>
+
+<h2 id="Créer_un_serveur_HTTP_local_simple">Créer un serveur HTTP local simple</h2>
+
+<p>Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module <code>SimpleHTTPServer</code> de Python permet une mise en œuvre simple de cette solution.</p>
+
+<p>Voilà la marche à suivre :</p>
+
+<ol>
+ <li>
+  <p>Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :</p>
+
+  <ul>
+   <li>Allez à <a href="https://www.python.org/">python.org</a></li>
+   <li>Sous Télécharger, cliquez le lien pour Python "3.xxx".</li>
+   <li>Tout en bas de la page,  télécharger le fichier pointé par le lien <em>Windows x86 executable installer</em>.</li>
+   <li>Exécuter ce programme quand le téléchargement est fini.</li>
+   <li>Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".</li>
+   <li>Cliquer <em>Install</em>, puis <em>Fermer</em> quand l'installation est complète.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :</p>
+
+  <pre class="brush: bash notranslate">python -V</pre>
+ </li>
+ <li>
+  <p>Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande <code>cd</code>, placer votre répertoire de travail dans le dossier contenant l'exemple.</p>
+
+  <pre class="brush: bash notranslate">#inclure le nom du dossier pour y s'y rendre,
+#par exemple
+cd Bureau
+# utiliser deux points pour remonter dans
+#le dossier parent si nécessaire
+cd ..</pre>
+ </li>
+ <li>
+  <p>Entrer la commande pour démarrer le serveur dans ce dossier.</p>
+
+  <pre class="brush: bash notranslate"># Si la version de Python retournée est ultérieur à 3.X
+python3 -m http.server
+# Si la version de Python retournée est ultérieur à 2.X
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL <code>localhost:8000</code> dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple <code>python -m http.server 7800</code> (Python 3.x) ou <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse <code>localhost:7800</code>.</p>
+</div>
+
+<h2 id="Faire_fonctionner_localement_des_langages_serveur">Faire fonctionner localement des langages serveur</h2>
+
+<p>Le module <code>SimpleHTTPServer</code> de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :</p>
+
+<ul>
+ <li>Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask en utilisant <code>pip3 install flask</code>.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple <code>python3 python-example.py</code>, puis consulter <code>localhost:5000</code> dans votre navigateur.</li>
+ <li>Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un  noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut  interpréter PHP. De bonnes options pour tester PHP localement sont <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.</li>
+</ul>
diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.html b/files/fr/learn/common_questions/thinking_before_coding/index.html
new file mode 100644
index 0000000000..f5e17cdff0
--- /dev/null
+++ b/files/fr/learn/common_questions/thinking_before_coding/index.html
@@ -0,0 +1,186 @@
+---
+title: Commencez votre projet Web
+slug: Apprendre/Commencez_votre_projet_web
+tags:
+  - Beginner
+  - Composing
+  - Web
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div class="summary">
+<p>Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis </th>
+   <td>Aucun</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif </th>
+   <td>Apprendre à définir les objectifs pour donner une direction à votre projet.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pour_commencer">Pour commencer</h2>
+
+<p>Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est <em>ce que vous</em><em> voulez accomplir</em>. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.</p>
+
+<p>Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose </p>
+
+<ul>
+ <li>Qu'est-ce que je veux accomplir exactement ?</li>
+ <li>Comment un site web aiderait à atteindre mes objectifs ?</li>
+ <li>Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?</li>
+</ul>
+
+<p>Se poser ces questions et y répondre constituent la <em>conceptualisation</em> du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a pas la pédagogie active disponible pour l'instant. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir  d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après.<br>
+ <br>
+ La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire.<br>
+ <br>
+ Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.</p>
+
+<div class="note">
+<p><strong>Remarque </strong> Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent <a href="https://fr.wikipedia.org/wiki/Id%C3%A9ation">l'idéation</a>, <a href="https://fr.wikipedia.org/wiki/Planification">la planification</a> et <a href="https://fr.wikipedia.org/wiki/Gestion_de_projet">la gestion de projet</a>.</p>
+</div>
+
+<h3 id="Qu'est-ce_que_je_veux_accomplir_exactement">Qu'est-ce que je veux accomplir exactement ?</h3>
+
+<p>C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi  vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.</p>
+
+<p>Supposons que vous êtes un musicien. Vous pourriez souhaiter </p>
+
+<ul>
+ <li>Permettre aux gens d'écouter votre musique.</li>
+ <li>Vendre des goodies.</li>
+ <li>Rencontrer d'autres musiciens.</li>
+ <li>Parler de votre musique.</li>
+ <li>Enseigner la musique à travers des vidéos.</li>
+ <li>Publier des photos de vos chats.</li>
+</ul>
+
+<p>Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important </p>
+
+<ol>
+ <li>Permettre aux gens d'écouter votre musique</li>
+ <li>Parler de votre musique.</li>
+ <li>Rencontrer d'autres musiciens.</li>
+ <li>Vendre des goodies.</li>
+ <li>Enseigner la musique à travers des vidéos.</li>
+ <li>Publier des photos de vos chats.</li>
+</ol>
+
+<p>Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?).</p>
+
+<p>Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante.</p>
+
+<h3 id="Comment_un_site_web_pourrait-il_répondre_à_mes_objectifs">Comment un site web pourrait-il répondre à mes objectifs ?</h3>
+
+<p>Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ?</p>
+
+<p>Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web.</p>
+
+<p>Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons.</p>
+
+<p>Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de <em>regrouper</em> toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'<em>interaction</em> entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous.</p>
+
+<p>Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles.</p>
+
+<h3 id="Qu'est-ce_qui_doit_être_fait_et_dans_quel_ordre_pour_atteindre_mes_objectifs">Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?</h3>
+
+<p>Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note  vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.</p>
+
+<p>Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Objectifs</th>
+   <th scope="col">Choses à faire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Permettre aux gens d'écouter votre musique</td>
+   <td>
+    <ol>
+     <li>Enregistrer de la musique</li>
+     <li>Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous faire cela avec les services web existants ?)</li>
+     <li>Donner aux gens l'accès à votre musique sur une partie de votre site web</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Parler de votre musique</td>
+   <td>
+    <ol>
+     <li>Écrire quelques articles pour lancer la discussion</li>
+     <li>Définir l'apparence et le format des articles</li>
+     <li>Publier ces articles sur le site web (Comment faire cela ?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Rencontrer d'autres musiciens</td>
+   <td>
+    <ol>
+     <li>Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)</li>
+     <li>Définir comment les gens vont trouver ces moyens de contact à partir de votre site</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Vendre des goodies</td>
+   <td>
+    <ol>
+     <li>Créer les goodies</li>
+     <li>Stocker les goodies</li>
+     <li>Trouver un moyen de gérer l'expédition</li>
+     <li>
+      <div class="almost_half_cell" id="gt-res-content">
+      <div dir="ltr" style="zoom: 1;">Trouver un moyen de gérer le paiement</div>
+      </div>
+     </li>
+     <li>Faire un système sur votre site pour que les gens passe des commandes</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Enseigner la musique à travers des vidéos</td>
+   <td>
+    <ol>
+     <li>Enregistrer vos leçons vidéos</li>
+     <li>Préparer les fichiers vidéos consultables en ligne (encore une fois, pourriez-vous le faire avec les services web existants ?)</li>
+     <li>Donner aux gens l'accès à vos vidéos sur une partie de votre site web</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes.</p>
+
+<p>Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?).</p>
+
+<h3 id="Conclusion">Conclusion</h3>
+
+<p>Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li>Commencer à apprendre la technique  <a href="/fr/Apprendre/Fonctionnement_Internet">Comment fonctionne l'Internet ?</a></li>
+ <li>Approfondir le design et la conception  <a href="/fr/Apprendre/Concevoir_page_web">Conception d'une page web</a></li>
+</ul>
diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html
new file mode 100644
index 0000000000..4d8d8330fa
--- /dev/null
+++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -0,0 +1,134 @@
+---
+title: Transférer des fichiers vers un serveur web
+slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web
+tags:
+  - Beginner
+  - NeedsActiveLearning
+  - WebMechanics
+translation_of: Learn/Common_questions/Upload_files_to_a_web_server
+---
+<div class="summary">
+<p>Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. </p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable comprendre <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est un serveur web</a> et <a href="/fr/Apprendre/Comprendre_noms_de_domaine">comment fonctionnent les noms de domaines</a>. Vous devriez également savoir <a href="/fr/Apprendre/Set_up_a_basic_working_environment">mettre en place un environnement simple de développement web</a> et savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">écrire une page web simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Maintenant que vous avez <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">construit une page web</a>, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Mettre_les_mains_sur_un_client_FTP_FireFTP">Mettre les mains sur un client FTP : FireFTP</h3>
+
+<p>Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car <a href="https://addons.mozilla.org/firefox/addon/fireftp/">c'est un module complémentaire</a>.</p>
+
+<div class="note">
+<p>Il existe de nombreuses autres options, voir <a href="/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client">les outils de publications : les clients FTP</a> pour plus d'informations.</p>
+</div>
+
+<p>Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :</p>
+
+<ol>
+ <li><strong>Menu de Firefox <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li>
+ <li><strong>Outils </strong>➤ <strong>Développement web</strong> ➤ <strong>FireFTP</strong></li>
+</ol>
+
+<p>Vous devriez voir apparaître cette fenêtre :</p>
+
+<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p>
+
+<h3 id="Se_connecter">Se connecter</h3>
+
+<p>Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : <code>monsiteperso.hebergeurexemple.net</code>.</p>
+
+<p>Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part :</p>
+
+<blockquote>
+<p>Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple.</p>
+
+<p>Votre compte est : <code>demozilla</code></p>
+
+<p>Votre site sera accessible à cette adresse <code>demozilla.hebergeurexemple.net</code></p>
+
+<p>Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes :</p>
+
+<ul>
+ <li>Serveur FTP : <code>ftp://demozilla.hebergeurexemple.net</code></li>
+ <li>Utilisateur : <code>demozilla</code></li>
+ <li>Mot de passe : <code>pandar0ux</code></li>
+ <li>Pour publier des fichiers sur le Web, placez les dans le répertoire <code>Public/htdocs</code>.</li>
+</ul>
+</blockquote>
+
+<p>Tout d'abord, jetons un coup d'œil à <code>http://demozilla.hebergeurexemple.net/</code> — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :</p>
+
+<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».</p>
+</div>
+
+<p>Pour connecter votre client FTP au serveur distant, cliquez sur le bouton <em>« Créer un compte »</em> de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :</p>
+
+<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p>
+
+<h3 id="Ici_et_là-bas_la_vue_locale_et_la_vue_distante">Ici et là-bas : la vue locale et la vue distante</h3>
+
+<p>Vous pouvez ensuite vous connecter sur ce nouveau compte :</p>
+
+<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p>
+
+<p>Examinons cet écran :</p>
+
+<ul>
+ <li>Sur la gauche, vous voyez vos fichier locaux (ceux de votre ordinateur). Déplacez vous dans le répertoire où vous stockez votre site web (dans ce cas, <code>mdn</code>).</li>
+ <li>Sur la droite, vous voyez les fichiers distants (ceux du serveur web). Vous êtes connecté-e à la racine du dossier FTP distint (dans ce cas, <code>users/demozilla</code>)</li>
+ <li>Pour le moment, vous pouvez ignorer la zone en bas de l'écran, il s'agit en fait d'un journal contenant chaque interaction entre votre client FTP et le serveur.</li>
+</ul>
+
+<h3 id="Transférer_des_fichiers_vers_le_serveur">Transférer des fichiers vers le serveur</h3>
+
+<p>Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous <code>Public/htdocs</code> pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :</p>
+
+<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p>
+
+<p>Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :</p>
+
+<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p>
+
+<h3 id="Est-ce_que_mes_fichiers_sont_bien_en_ligne">Est-ce que mes fichiers sont bien en ligne ?</h3>
+
+<p>Jusqu'ici tout va bien, vérifions quand même en tapant <code>http://demozilla.hebergeurexemple.net/</code> dans la barre d'URL du navigateur :</p>
+
+<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p>
+
+<p>Et <em lang="fr">voilà</em> ! Notre site est en ligne !</p>
+
+<h3 id="D'autres_méthodes_pour_transférer_des_fichiers">D'autres méthodes pour transférer des fichiers</h3>
+
+<p>Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes :</p>
+
+<ul>
+ <li><strong>Les interfaces web</strong>. Votre hébergeur peut mettre à disposition une interface web qui permet de transférer des fichiers.</li>
+ <li><strong>GitHub</strong> (méthode avancée). Il est possible de transférer des fichiers grâce à {{Glossary("git")}} en utilisant des combinaison de méthodes qui sont liées aux opérations de commit/push. Pour plus d'informations, voir l'article sur <a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">comment publier son site web</a> qui fait partie du guide <a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a>.</li>
+ <li><strong>{{Glossary("Rsync")}}</strong> (méthode avancée). Un système de synchronisation de fichiers entre un système local et un système distant.</li>
+ <li><strong>{{Glossary("WebDAV")}}</strong>. Une extension du protocle {{Glossary("HTTP")}} qui permet de gérer des fichiers de façon plus avancée.</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : <a href="/fr/Apprendre/Checking_that_your_web_site_is_working_properly">vérifier que votre site fonctionne correctement</a>.</p>
diff --git a/files/fr/learn/common_questions/using_github_pages/index.html b/files/fr/learn/common_questions/using_github_pages/index.html
new file mode 100644
index 0000000000..4537201647
--- /dev/null
+++ b/files/fr/learn/common_questions/using_github_pages/index.html
@@ -0,0 +1,110 @@
+---
+title: Utiliser les pages GitHub
+slug: Apprendre/Utiliser_les_pages_GitHub
+tags:
+  - Débutant
+  - GitHub
+  - Guide
+  - Web
+  - git
+translation_of: Learn/Common_questions/Using_Github_pages
+---
+<p class="summary"><a href="https://github.com/">GitHub</a> est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version <a href="http://git-scm.com/">Git</a><strong>. </strong>Par défaut, le système est <em>open source</em>, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées <em>gh-pages</em>) qui sont une des fonctionnalités de GitHub.</p>
+
+<h2 id="Publier_du_contenu">Publier du contenu</h2>
+
+<p>GitHub est un outil très populaire et important à l'heure actuelle. Git est <a href="http://git-scm.com/book/fr/v1/D%C3%A9marrage-rapide-%C3%80-propos-de-la-gestion-de-version">un logiciel de gestion de version</a> reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : <a href="https://pages.github.com/">les pages GitHub</a>. Celles-ci vous permettent de publier un site web sur Internet.</p>
+
+<h3 id="Mettre_en_place_Git_et_un_compte_GitHub">Mettre en place Git et un compte GitHub</h3>
+
+<ol>
+ <li>Tout d'abord, <a href="http://git-scm.com/downloads">installez Git</a> sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.</li>
+ <li>Ensuite, <a href="https://github.com/join">inscrivez-vous sur GitHub</a>. La procédure est plutôt simple.</li>
+ <li>Une fois inscrit, connectez vous à <a href="https://github.com">github.com</a> avec votre nom d'utilisateur et votre mot de passe.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.</p>
+</div>
+
+<h3 id="Préparer_le_code_afin_de_l'envoyer_vers_GitHub">Préparer le code afin de l'envoyer vers GitHub</h3>
+
+<p>Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé <code>index.html</code>.</p>
+
+<p>Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :</p>
+
+<ol>
+ <li>Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé <code>test-site</code>, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande <code>cd</code> (qui signifie « <em>change directory</em> » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme <code>test-site</code>, vous pourrez taper :
+
+  <pre class="brush: bash">cd Bureau/test-site</pre>
+ </li>
+ <li>Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git :
+  <pre class="brush: bash">git init</pre>
+ </li>
+</ol>
+
+<h4 id="Un_aparté_sur_les_interfaces_en_ligne_de_commande">Un aparté sur les interfaces en ligne de commande</h4>
+
+<p>La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :</p>
+
+<p><img alt="Interface en ligne de commande" src="https://mdn.mozillademos.org/files/12271/commande.png" style="height: 309px; width: 499px;"></p>
+
+<div class="note">
+<p><strong>Note : </strong>Il existe également des <a href="http://git-scm.com/downloads/guis">interfaces graphiques pour Git</a> qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.</p>
+</div>
+
+<p><span id="command-line">Chaque système d'exploitation possède sa propre interface en ligne de commande  :</span></p>
+
+<ul>
+ <li><strong>Windows</strong> : <strong>l'invite de commande</strong>. Celle-ci peut être lancée en utilisant la touche Windows et en tapant <em>Invite de commande</em> avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera <code>\</code> pour indiquer un sous-répertoire alors que Linux et OS X utiliseront <code>/</code>).</li>
+ <li><strong>OS X</strong> : <strong>le terminal</strong>. On le trouvera dans <em>Applications &gt; Utilitaires</em>.</li>
+ <li><strong>Linux</strong> : Généralement, on peut lancer un terminal avec le raccourci clavier <em>Ctrl + Alt + T</em>. Si cela ne fonctionne pas, recherchez <strong>Terminal</strong> dans les applications ou via les outils de recherche.</li>
+</ul>
+
+<p>La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.</p>
+
+<h3 id="Créer_un_dépôt_sur_GitHub_pour_votre_code">Créer un dépôt sur GitHub pour votre code</h3>
+
+<ol>
+ <li>Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option <em>New Repository</em> (qui signifie « Créer un nouveau dépôt »).</li>
+ <li>Sur la page qui s'affiche, dans le champ « <em>Repository name</em> », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir <em>mon-premier-depot</em>.</li>
+ <li>Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
+ <li>Ensuite, cliquez sur « <em>Create repository</em> » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
+</ol>
+
+<h3 id="Envoyer_vos_fichiers_vers_GitHub">Envoyer vos fichiers vers GitHub</h3>
+
+<ol>
+ <li>Sur cette page, une section vous intéresse particulièrement : « <em>…or push an existing repository from the command line</em> » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à :
+
+  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/mon-premier-depot.git</span></span></pre>
+ </li>
+ <li>Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action.
+  <pre class="brush: bash">git add --all
+git commit -m 'ajout des fichiers au dépôt'</pre>
+ </li>
+ <li>Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub :
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une <em>branche</em> <code>gh-pages</code> sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « <em>Branch: <strong>master</strong></em> » (GitHub indique que vous êtes sur la branche <code>master</code> de votre dépôt). Dans la liste qui s'affiche, saisissez le texte <strong>gh-pages</strong> puis cliquez sur <em>Create branch: gh-pages</em> (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera <em>nom-utilisateur.github.io/nom-du-depot</em>. Dans mon exemple, l'URL est donc <em>https://chrisdavidmills.github.io/my-repository</em>. La page qui est affichée à cette URL est la page <code>index.html</code> contenue dans le dépôt.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li>
+ <li>Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous êtes bloqué-e, n'hésitez pas à utiliser <a href="https://pages.github.com/">la page d'aide GitHub sur les pages GitHub</a> qui est une excellente ressource (en anglais).</p>
+</div>
+
+<h3 id="Aller_plus_loin_avec_Git_et_GitHub">Aller plus loin avec Git et GitHub</h3>
+
+<p>Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :</p>
+
+<pre>git add --all
+git commit -m 'Un autre commit'
+git push</pre>
+
+<p>Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.</p>
+
+<p>Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les <a href="https://help.github.com/index.html">pages d'aide de GitHub</a> (en anglais) ou encore <a href="http://git-scm.com/book/fr/v1">le manuel Pro Git</a> (en français).</p>
diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html
new file mode 100644
index 0000000000..71d3585366
--- /dev/null
+++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html
@@ -0,0 +1,171 @@
+---
+title: Découvrir les outils de développement des navigateurs
+slug: Apprendre/Découvrir_outils_développement_navigateurs
+tags:
+  - Beginner
+  - Browser
+  - CSS
+  - CodingScripting
+  - DevTools
+  - HTML
+  - JavaScript
+  - Learn
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div>{{Previous("Apprendre/Commencer_avec_le_web")}}</div>
+
+<div class="summary">
+<p>Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « <em>devtools</em> »).</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser <a href="http://mdn.github.io/beginner-html-site-scripted/">l'exemple construit</a> dans la série d'articles <a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a> et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.</p>
+</div>
+
+<h2 id="Comment_ouvrir_les_outils_de_développement_d'un_navigateur">Comment ouvrir les outils de développement d'un navigateur</h2>
+
+<p>Les <em>devtools</em> s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :</p>
+
+<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 804px; margin: 0px auto; width: 1438px;"></p>
+
+<p>Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :</p>
+
+<ul>
+ <li><em><strong>Au clavier.</strong></em> <em>Ctrl + Shift + I</em>, sauf pour :
+
+  <ul>
+   <li><strong>Internet Explorer. </strong><em>F12 </em></li>
+   <li><strong>Mac OS X. </strong><em><span class="Unicode">⌘ + ⌥ + I </span></em></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>Via les menus. </strong></em></span>
+  <ul>
+   <li><strong>Firefox. </strong>Menu <span class="Unicode"><em><span class="Unicode">➤ </span></em><em><span class="Unicode">Développement ➤ Outils de développement </span></em><span class="Unicode">ou <em>Outils</em></span><em> ➤</em></span><em> Développement Web ➤ Outils de développement</em></li>
+   <li><strong>Chrome.</strong> <em>Affichage<span class="Unicode"> ➤</span> Développement ➤ Outils de développement</em></li>
+   <li><strong>Safari.</strong> <em>Développement<span class="Unicode"> ➤</span> Afficher l'inspecteur web.</em> Si vous ne pouvez pas voir le menu <em>Développement</em>, aller sous <em>Safari<span class="Unicode"> ➤</span> Préférences ➤ Avancé</em> et vérifiez que l'option <em>Afficher le menu de développement</em> est bien coché. </li>
+   <li><strong>Opera</strong>. <em><span class="Unicode">Développement ➤</span> Inspecteur web</em></li>
+  </ul>
+ </li>
+ <li><strong><em>Via un menu contextuel.</em></strong> Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez <em>Examiner l'élément</em> dans le menu qui apparait (<em>Bonus : </em>cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).</li>
+</ul>
+
+<p><img alt="Menu contextuel suite au clic-droit" src="https://mdn.mozillademos.org/files/11505/devtools.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="L'inspecteur_explorateur_du_DOM_et_éditeur_CSS">L'inspecteur : explorateur du DOM et éditeur CSS</h2>
+
+<p>Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.</p>
+
+<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p>
+
+<p>Si vous n'arrivez pas sur l'inspecteur :</p>
+
+<ul>
+ <li>Cliquez ou appuyez l'onglet <em>Inspecteur</em>.</li>
+ <li>Sous Internet Explorer, cliquez ou appuyez sur <em>Explorateur DOM</em>, ou appuyez sur Ctrl + 1.</li>
+ <li>Sous Safari, les contrôles n'apparaissent pas clairement mais vous devriez voir le code HTML si vous n'avez rien sélectionné d'autre. Pour voir le code CSS, appuyez sur le bouton <em>Style</em>.</li>
+</ul>
+
+<h3 id="Manipuler_l'inspecteur_du_DOM">Manipuler l'inspecteur du DOM</h3>
+
+<p>Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :</p>
+
+<p><img alt="Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM" src="https://mdn.mozillademos.org/files/11519/menu_contextuel.png" style="display: block; height: 284px; margin: 0px auto; width: 244px;"></p>
+
+<ul>
+ <li><strong>Supprimer le nœud</strong> (parfois <em>Supprimer l'élément</em>) : supprime l'élément sélectionné du document.</li>
+ <li><strong>Modifier comme HTML</strong> (parfois <em>Ajouter un attribut</em>/<em>Éditer le texte</em>) : permet de changer le HTML et de voir le résultat obtenu à la volée (en <em>live</em>). Cette option est très utile pour déboguer ou tester.</li>
+ <li><strong>:hover/:active/:focus</strong> : force l'état d'un élément à être actif afin de pouvoir voir ce que la mise en forme donne pour cet état.</li>
+ <li><strong>Copier/Copier comme HTML</strong> : permet de copier l'élément HTML actuellement sélectionné.</li>
+ <li>Certains navigateurs disposent également d'options comme <em>Copier le chemin CSS</em> et/ou <em>Copier le chemin XPath</em> qui permettent de copier le sélecteur CSS ou l'expression XPath qui permettrait de sélectionner l'élément HTML en cours.</li>
+</ul>
+
+<p>Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.</p>
+
+<h3 id="Manipuler_l'éditeur_CSS">Manipuler l'éditeur CSS</h3>
+
+<p>Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p>
+
+<p>Ces fonctionnalités sont plutôt pratiques :</p>
+
+<ul>
+ <li>Les règles qui s'appliquent à l'élément courant sont affichées en commençant avec les règles les plus spécifiques et en terminant avec les règles les moins spécifiques.</li>
+ <li>Il est possible de cocher les boîtes à côté de chaque déclaration pour voir l'effet qui serait obtenu si la déclaration était supprimée.</li>
+ <li>Vous pouvez cliquer sur la petite flèche à côté de chaque propriété en notation résumée pour voir les équivalents en notation détaillée.</li>
+ <li>Vous pouvez cliquer sur le nom d'une propriété ou d'une valeur pour éditer une valeur en live et immédiatement voir le changement.</li>
+ <li>À côté de chaque règle, si celle-ci est « dépliée », vous pouvez voir le nom du fichier et la ligne sur laquelle la règle est définie. En cliquant sur le lien, vous arriverez directement sur le fichier CSS que vous pourrez éditer et sauvegarder.</li>
+ <li>Vous pouvez également cliquer sur l'accolade fermant d'une règle donnée pour afficher une nouvelle zone de texte dans laquelle vous pourrez écrire une toute nouvelle déclaration.</li>
+</ul>
+
+<p>Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :</p>
+
+<ul>
+ <li><em>Calculé </em>: cet onglet affiche les styles calculés pour l'élément sélectionné (les valeurs finales, normalisées, appliquées par le navigateur).</li>
+ <li><em>Modèle de boîte </em>: cet onglet représente visuellement le modèle de boîte pour l'élément sélectionner afin de visualiser rapidement le <em>padding</em> (rembourrage), la bordure et la marge appliquée à l'élément. Il permet aussi de voir la taille du contenu.</li>
+ <li><em>Polices </em>: Dans Firefox, cet onglet affiche les polices appliquées à l'élément sélectionné.</li>
+</ul>
+
+<h3 id="En_savoir_plus">En savoir plus</h3>
+
+<p>Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :</p>
+
+<ul>
+ <li><a href="/fr/docs/Outils/Inspecteur">L'inspecteur Firefox</a></li>
+ <li><a href="https://msdn.microsoft.com/library/dn255008%28v=vs.85%29.aspx">L'explorateur de DOM d'Internet Explorer</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">L'inspecteur de DOM Chrome</a> (l'inspecteur d'Opera fonctionne de la même façon)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">L'inspecteur de DOM et l'explorateur de styles Safari</a></li>
+</ul>
+
+<h2 id="La_console_JavaScript">La console JavaScript</h2>
+
+<p>La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur <em>Ctrl + 2</em>.) Cela affichera une fenêtre qui ressemblera à :</p>
+
+<p><img alt="Console JavaScript" src="https://mdn.mozillademos.org/files/11521/console.png" style="border: 1px solid black; display: block; height: 319px; margin: 0px auto; width: 1433px;"></p>
+
+<p>Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('Coucou !');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var monImage = document.createElement('img');
+monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);</pre>
+ </li>
+</ol>
+
+<p>Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('coucou !);</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var monImage = document.createElement('img');
+maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);</pre>
+ </li>
+</ol>
+
+<p>Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !</p>
+
+<h3 id="En_savoir_plus_2">En savoir plus</h3>
+
+<p>Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :</p>
+
+<ul>
+ <li><a href="/fr/docs/Outils/Console_Web">La console web de Firefox</a></li>
+ <li><a href="https://msdn.microsoft.com/library/dn255006%28v=vs.85%29.aspx">La console JavaScript d'Internet Explorer</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">La console JavaScript de Chrome</a> (la console pour Opera fonctionnera de la même façon)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">La console de Safari</a></li>
+</ul>
diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.html b/files/fr/learn/common_questions/what_are_hyperlinks/index.html
new file mode 100644
index 0000000000..35ac0d8bb4
--- /dev/null
+++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.html
@@ -0,0 +1,96 @@
+---
+title: Le fonctionnement des liens sur le Web
+slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web
+tags:
+  - Beginner
+  - Infrastructure
+  - Navigation
+  - NeedsActiveLearning
+translation_of: Learn/Common_questions/What_are_hyperlinks
+---
+<div class="summary">
+<p>Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez, au préalable, comprendre <a href="/en-US/Learn/How_the_Internet_works">comment Internet fonctionne</a> et distinguer<a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche"> une page web, un site web, un serveur web et un moteur de recherche</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre ce que sont les liens hypertexte et comprendre leur importance.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) :</p>
+
+<ol>
+ <li>Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web</li>
+ <li>{{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL</li>
+ <li>{{Glossary("HTML")}} : un format de document qui permet d'intégrer des <em>hyperliens</em> (<em>hyperlink</em> est le terme anglais)</li>
+</ol>
+
+<p>Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.</p>
+
+<p>Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé.</p>
+
+<p>Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.</p>
+
+<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+
+<p>Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Cette section a besoin d'être enrichie, <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser :</p>
+
+<h3 id="Les_types_de_lien">Les types de lien</h3>
+
+<dl>
+ <dt>Les liens internes</dt>
+ <dd>Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page.</dd>
+ <dt>Les liens sortants</dt>
+ <dd>Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même.</dd>
+ <dt>Les liens entrants</dt>
+ <dd>Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site.</dd>
+</dl>
+
+<p>Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page.</p>
+
+<p>Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations).</p>
+
+<h3 id="Les_ancres">Les ancres</h3>
+
+<p>La plupart des liens lient deux pages différentes. <strong>Les ancres</strong> permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.</p>
+
+<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+
+<h3 id="Les_liens_et_les_moteurs_de_recherche">Les liens et les moteurs de recherche</h3>
+
+<p>Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche.</p>
+
+<p>Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que :</p>
+
+<ul>
+ <li>Le <em>texte visible</em> d'un lien influence les sites qui seront trouvés pour une recherche donnée</li>
+ <li>Plus la page possède de <em>liens entrants</em>, plus son rang dans le classement sera élevé (et plus elle apparaîtra en haut des résultats).</li>
+ <li><em>Les liens externes</em> influencent également le classement du site source et du site lié.</li>
+</ul>
+
+<p><a href="https://fr.wikipedia.org/wiki/Optimisation_pour_les_moteurs_de_recherche">Le SEO</a> (pour <em>Search Engine Optimization</em> ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web !</p>
+
+<ul>
+ <li>Pour connaître le fonctionnement théorique, vous pouvez lire <a href="/fr/Apprendre/Understanding_URLs">les URL et leur structure</a> car, pour être précis, chaque hyperlien pointe vers une URL donnée.</li>
+ <li>Pour plonger dans la pratique, vous pouvez développer un peu de HTML. Apprenez comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">écrire des documents HTML et les lier les uns aux autres.</a></li>
+</ul>
diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.html b/files/fr/learn/common_questions/what_is_a_domain_name/index.html
new file mode 100644
index 0000000000..bc8bc301ef
--- /dev/null
+++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.html
@@ -0,0 +1,162 @@
+---
+title: Comprendre les noms de domaine
+slug: Apprendre/Comprendre_noms_de_domaine
+tags:
+  - Beginner
+  - Domain names
+  - Infrastructure
+  - Learn
+  - Web
+translation_of: Learn/Common_questions/What_is_a_domain_name
+---
+<div class="summary">
+<p>Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Pour commencer, vous devez comprendre <a href="/fr/Apprendre/Fonctionnement_Internet">comment Internet fonctionne</a> et ce que sont les <a href="/en-US/Learn/Understanding_URLs">URL</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="seoSummary">Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.</span></p>
+
+<p>Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple <code>173.194.121.32</code>). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple <code>2001:0db8:85a3:0042:1000:8a2e:0370:7334</code>). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Ce contenu a besoin d'être enrichi, <a href="/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p>
+
+<ul>
+ <li><a href="http://www.afnic.fr/fr/votre-nom-de-domaine/qu-est-ce-qu-un-nom-de-domaine/">Qu'est-ce qu'un nom de domaine</a> sur le site de l'AFNIC</li>
+ <li><a href="https://www.youtube.com/watch?v=QHVK666TFUI">Le DNS</a>, présentation de Stéphane Bortzmeyer réalisée dans le cadre de « Il était une fois Internet » (CC BY-SA)</li>
+</ul>
+
+<h2 id="Allons_plus_loin">Allons plus loin</h2>
+
+<h3 id="La_structure_d'un_nom_de_domaine">La structure d'un nom de domaine</h3>
+
+<p>Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus <strong>de droite à gauche</strong> :</p>
+
+<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11241/structure_fr.png" style="height: 76px; width: 252px;"></p>
+
+<p>Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.</p>
+
+<dl>
+ <dt>{{Glossary("TLD")}} (<em>Top-Level Domain</em> en anglais qui signifie domaine de premier niveau)</dt>
+ <dd>Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net).</dd>
+ <dt>Composant</dt>
+ <dd>Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou <em>Secondary Level Domain</em> (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : <a href="https://mozilla.org">mozilla.org</a>), on peut créer d'autres noms de domaines sous celui-ci (par exemple : <a href="https://developer.mozilla.org">developer.mozilla.org</a>), ceux-ci sont parfois appelés « sous-domaines ».</dd>
+</dl>
+
+<h3 id="Acheter_un_nom_de_domaine">Acheter un nom de domaine</h3>
+
+<h4 id="Qui_possède_un_nom_de_domaine">Qui possède un nom de domaine ?</h4>
+
+<p>Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine.</p>
+
+<p>Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.</p>
+</div>
+
+<h4 id="Trouver_un_nom_de_domaine_disponible">Trouver un nom de domaine disponible</h4>
+
+<p>Pour déterminer si un nom de domaine est disponible :</p>
+
+<ul>
+ <li>vous pouvez vous rendre sur le site d'un bureau d'enregistrement. La plupart fournissent un service « whois » (littéralement « qui est-ce ? » en anglais) qui indique si un nom de domaine est disponible.</li>
+ <li>si vous utilisez un système qui possède un outil en ligne de commande, vous pouvez y saisir la commande <code>whois</code>. Voici un exemple avec <code>mozilla.org</code>:</li>
+</ul>
+
+<pre>$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+</pre>
+
+<p>Comme on peut le voir ici, on ne peut pas réserver <code>mozilla.org</code> car ce nom de domaine est déjà réservé par la Fondation Mozilla.</p>
+
+<p>Essayons avec un autre, par exemple <code>unnométrange.fr</code> :</p>
+
+<pre>&gt; whois unnométrange.fr
+...
+%% No entries found in the AFNIC Database.</pre>
+
+<p>On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs <code>whois</code> (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom !</p>
+
+<h4 id="Obtenir_un_nom_de_domaine">Obtenir un nom de domaine</h4>
+
+<p>Le processus est assez simple :</p>
+
+<ol>
+ <li>Aller sur le site web d'un bureau d'enregistrement</li>
+ <li>Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse</li>
+ <li>Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !</li>
+ <li>Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.</p>
+</div>
+
+<h4 id="Rafraîchissement_du_DNS">Rafraîchissement du DNS</h4>
+
+<p>Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».</p>
+
+<div class="note">
+<p><strong>Note :</strong> Ce temps est parfois appelé <strong>temps de propagation</strong>. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.</p>
+</div>
+
+<h3 id="Comment_fonctionne_une_requête_DNS">Comment fonctionne une requête DNS ?</h3>
+
+<p>Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :</p>
+
+<ol>
+ <li>Vous saisissez <code>mozilla.org</code> dans la barre d'adresse du navigateur.</li>
+ <li>Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout.</li>
+ <li>Si votre ordinateur ne connait pas l'adresse IP associée au nom <code>mozilla.org</code>, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé.</li>
+ <li>Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.</li>
+</ol>
+
+<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.</p>
+</div>
+
+<h2 id="Étapes_suivantes">Étapes suivantes</h2>
+
+<p>Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite :</p>
+
+<ul>
+ <li>Si vous souhaitez commencer, débutez en explorant les différents design possibles décrit sur <a href="/fr/Apprendre/Concevoir_page_web">concevoirr une page web</a>.</li>
+ <li>Construire un site web peut coûter de l'argent. Vous trouverez les différentes informations sur <a href="/fr/docs/Learn/How_much_does_it_cost">combien coûte la construction d'un site web</a>.</li>
+ <li>Vous pouvez aussi approfondir en consultant l'article sur <a href="https://fr.wikipedia.org/wiki/Nom_de_domaine">les noms de domaine</a> sur Wikipédia.</li>
+</ul>
diff --git a/files/fr/learn/common_questions/what_is_a_url/index.html b/files/fr/learn/common_questions/what_is_a_url/index.html
new file mode 100644
index 0000000000..85448c44bb
--- /dev/null
+++ b/files/fr/learn/common_questions/what_is_a_url/index.html
@@ -0,0 +1,158 @@
+---
+title: Comprendre les URL et leur structure
+slug: Apprendre/Comprendre_les_URL
+tags:
+  - Beginner
+  - Infrastructure
+  - Learn
+  - NeedsActiveLearning
+  - URL
+translation_of: Learn/Common_questions/What_is_a_URL
+---
+<div class="summary">
+<p>Cet article aborde les <em>Uniform Resource Locators</em> (URL) en expliquant leur rôle et leur structure.</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/Fonctionnement_Internet">comment fonctionne Internet</a>, <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est une serveur web</a> et <a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">les concepts sous-jacents aux liens sur le Web</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir ce qu'est une URL et comprendre son rôle sur le Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="seoSummary">Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les <strong><dfn>URL</dfn></strong> sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.</span></p>
+
+<p><strong>URL</strong> signifie <em>Uniform Resource Locator</em> (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a pour le moment pas d'élément de pédagogie active. <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="Les_bases_l'anatomie_d'une_URL">Les bases : l'anatomie d'une URL</h3>
+
+<p>Voici quelques exemples d'URL :</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/fr/docs/Apprendre/
+https://developer.mozilla.org/fr/search?q=URL</pre>
+
+<p>Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML).</p>
+
+<p>Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL :</p>
+
+<pre>http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&amp;clé2=valeur2#QuelquePartDansLeDocument</pre>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/11679/protocole_1.png"></dt>
+ <dd><code>http://</code> correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme <code>mailto:</code> (qui permet d'ouvrir un client de messagerie électronique) ou <code>ftp:</code> qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.</dd>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/11681/nom_de_domaine2.png" style="height: 204px; width: 380px;"></dt>
+ <dd><code>www.exemple.com</code> correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).</dd>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/11683/port_3.png"></dt>
+ <dd><code>:80</code> correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.</dd>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/11685/chemin_4.png"></dt>
+ <dd><code>/chemin/vers/monfichier.html</code> est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».</dd>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/11693/parametres_5.png"></dt>
+ <dd><code>?clé1=valeur1&amp;clé2=valeur2</code> sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&amp;). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.</dd>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/11695/ancre_6.png"></dt>
+ <dd><code>#QuelquePartDansLeDocument</code> correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">d'autres fragments et d'autres règles</a> pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.</p>
+</div>
+
+<p>On peut comparer les URL avec les adresses postales : le <em>protocole</em> représente le service postal qu'on souhaite utiliser, le <em>nom de domaine</em> correspond à la ville et le <em>port</em> au code postal, le <em>chemin</em> indique le bâtiment où la lettre doit être acheminée et les <em>paramètres</em> pourraient indique le numéro de l'appartement, enfin l'<em>ancre</em> désigne la personne à laquelle la lettre est adressée.</p>
+
+<h3 id="Comment_utiliser_les_URL">Comment utiliser les URL</h3>
+
+<p>N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout !</p>
+
+<p>Le langage {{Glossary("HTML")}} — <a href="/fr/docs/Learn/HTML/HTML_tags">que nous verrons par la suite</a> — permet de tirer parti des URL :</p>
+
+<ul>
+ <li>en créant des liens vers d'autres documents grâce à l'élément {{HTMLElement("a")}} ;</li>
+ <li>en lient des document avec les ressources associées grâce aux éléments {{HTMLElement("link")}} et {{HTMLElement("script")}} ;</li>
+ <li>en affichant des médias comme des images (avec l'élément {{HTMLElement("img")}}), des vidéos (avec l'élément {{HTMLElement("video")}}), des sons ou de la musique (avec l'élément {{HTMLElement("audio")}}), etc. ;</li>
+ <li>en affichant d'autres documents HTML grâce à l'élément {{HTMLElement("iframe")}}.</li>
+</ul>
+
+<p>D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive.</p>
+
+<h3 id="Les_URL_absolues_et_les_URL_relatives">Les URL absolues et les URL relatives</h3>
+
+<p>L'URL que nous avons disséquée avant est une URL <em>absolue</em> et il existe également des URL <em>relatives</em>. Expliquons ici cette différence.</p>
+
+<p>Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires.</p>
+
+<p>Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole <code>"/</code>", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant.</p>
+
+<p>Prenons quelques exemples concrets pour illustrer le concept.</p>
+
+<h4 id="Exemples_d'URL_absolues">Exemples d'URL absolues</h4>
+
+<dl>
+ <dt>URL complète</dt>
+ <dd>
+ <pre>https://developer.mozilla.org/fr/docs/Apprendre</pre>
+ </dd>
+ <dt>Protocole implicite</dt>
+ <dd>
+ <pre>//developer.mozilla.org/fr/docs/Apprendre</pre>
+
+ <p>Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.</p>
+ </dd>
+ <dt>Nom de domaine implicite</dt>
+ <dd>
+ <pre>/fr/docs/Apprendre</pre>
+
+ <p>Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.</p>
+
+ <div class="note">
+ <p><strong>Note :</strong> <em>Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole</em>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h4 id="Exemples_d'URL_relatives">Exemples d'URL relatives</h4>
+
+<p>Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  <code>https://developer.mozilla.org/fr/docs/Apprendre</code></p>
+
+<dl>
+ <dt>Sous-ressources</dt>
+ <dd>
+ <pre>Compétences/Infrastructure/Comprendre_les_URL
+</pre>
+ L'URL ne commence pas pas <code>/</code>, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : <code>https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL</code></dd>
+ <dt>Remonter dans l'arborescence des dossiers</dt>
+ <dd>
+ <pre>../CSS/display</pre>
+
+ <p>Dans ce cas, on utilise la convention, héritée du monde UNIX :  <code>../</code> indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici <code>https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display</code>, qui peut être simplifiée en : <code>https://developer.mozilla.org/fr/docs/CSS/display</code></p>
+ </dd>
+</dl>
+
+<h3 id="Les_URL_sémantiques">Les URL sémantiques</h3>
+
+<p>Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>URL sémantiques</em></a>.  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.</p>
+
+<p>Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :</p>
+
+<ul>
+ <li>Elles sont plus simples à manipuler</li>
+ <li>Elles clarifient la situation pour le visiteur et indiquent où il est, ce qu'il fait et avec qui il intéragit sur le Web</li>
+ <li>Elles peuvent être utilisées par certains moteurs de recherche pour améliorer le classement des pages associées à un terme donné.</li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li>
+</ul>
diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.html b/files/fr/learn/common_questions/what_is_a_web_server/index.html
new file mode 100644
index 0000000000..f035f561ac
--- /dev/null
+++ b/files/fr/learn/common_questions/what_is_a_web_server/index.html
@@ -0,0 +1,120 @@
+---
+title: Qu'est-ce qu'un serveur web ?
+slug: Apprendre/Qu_est-ce_qu_un_serveur_web
+tags:
+  - Beginner
+  - Infrastructure
+  - Learn
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p>Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir<a href="/fr/docs/Apprendre/Fonctionnement_Internet"> comment Internet fonctionne</a>, <a href="/fr/docs/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">les différences entre une page web, un site web, un serveur web et un moteur de recherche</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un « serveur web » peut faire référence à des composants logiciels (<em>software</em>) ou à des composants matériels (<em>hardware</em>) ou à des composants logiciels et matériels qui fonctionnent ensemble.</p>
+
+<ol>
+ <li>Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que <code>mozilla.org</code>.</li>
+ <li>Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera <em>a minima</em> un serveur <em>HTTP</em>. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages web).</li>
+</ol>
+
+<p>Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (<em>matériel</em>), le serveur HTTP (<em>logiciel</em>) renvoie le document demandé, également grâce à HTTP.</p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/11561/web-server.svg"></p>
+
+<p>Pour publier un site web, vous aurez besoin d'un serveur web <strong>statique</strong> ou <strong>dynamique</strong>.</p>
+
+<p>Un serveur web<strong> statique</strong> (aussi appelé une pile) est composé d'un ordinateur (<em>matériel</em>) et d'un serveur HTTP (<em>logiciel</em>). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur.</p>
+
+<p>Un serveur web <strong>dynamique </strong>possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un <em>serveur d'applications</em> et une <em>base de données</em>. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP.</p>
+
+<p>Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes.</p>
+
+<h3 id="Héberger_des_fichiers">Héberger des fichiers</h3>
+
+<p>Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.</p>
+
+<p>D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra :</p>
+
+<ul>
+ <li>toujours être en fonctionnement</li>
+ <li>toujours être connecté à Internet</li>
+ <li>conserver la même adresse IP au cours du temps (tous les fournisseurs d'accès ne fournissent pas une adresse IP fixe pour les particuliers</li>
+ <li>être maintenu par un fournisseur tiers.</li>
+</ul>
+
+<p>Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point <a href="/fr/Apprendre/How_much_does_it_cost#Hosting">dans cet article</a>.</p>
+
+<p>Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira <a href="/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">de transférer vos fichiers vers le serveur web</a>.</p>
+
+<h3 id="Communiquer_via_HTTP">Communiquer via HTTP</h3>
+
+<p>Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour <em>HyperText Transfer Protocol</em> en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs.</p>
+
+<p>Ici, un <em>protocole </em>est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état.</p>
+
+<dl>
+ <dt>Textuel</dt>
+ <dd>Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain.</dd>
+ <dt>Sans état</dt>
+ <dd>Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications).</dd>
+</dl>
+
+<p>HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un <a href="/fr/docs/Web/HTTP">article technique</a> à part entière. Pour le moment, voici les points les plus importants à garder en mémoire :</p>
+
+<ul>
+ <li>Seuls les <em>clients</em> peuvent effectuer des requêtes HTTP et uniquement vers des<em> serveurs. </em>Les serveurs ne peuvent que <em>répondre</em> à la requête d'un <em>client</em>.</li>
+ <li>Lorsque le client demande un fichier via HTTP, il doit fournir l'{{Glossary("URL")}} du fichier en question.</li>
+ <li>Le serveur web <em>doit </em>répondre à chaque requête HTTP même si la réponse est un message d'erreur.</li>
+</ul>
+
+<p>Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses.</p>
+
+<ol>
+ <li>Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant.</li>
+ <li>Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire.</li>
+ <li>Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté <a href="http://www.404notfound.fr/" rel="external">les pages d'erreurs 404</a> de leurs sites).</li>
+</ol>
+
+<p><img alt="Une page d'erreur HTTP, en l'occurrence la page 404 de MDN" src="https://mdn.mozillademos.org/files/11563/Capture.PNG" style="height: 695px; width: 1623px;"></p>
+
+<h3 id="Contenu_statique_et_contenu_dynamique">Contenu statique et contenu dynamique</h3>
+
+<p>En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.</p>
+
+<p>Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.</p>
+
+<p>Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle <a href="/fr/docs/MDN/Kuma">Kuma</a> et est construite <a href="https://www.python.org/">Python</a> (grâce au <em>framework</em> <a href="https://www.djangoproject.com/">Django</a>). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.</p>
+
+<p>Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour <em>Content Management Systems</em> en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Maintenant que vous connaissez les serveurs web, vous pourriez :</p>
+
+<ul>
+ <li>continuer votre lecture avec<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>en savoir plus sur <a href="/fr/docs/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web">les différents logiciels nécessaires à la création d'un site web</a></li>
+ <li>poursuivre avec quelque chose de plus pratique comme <a href="/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">comment transférer des fichiers vers un serveur web</a>.</li>
+</ul>
diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.html b/files/fr/learn/common_questions/what_is_accessibility/index.html
new file mode 100644
index 0000000000..403b3ff2fe
--- /dev/null
+++ b/files/fr/learn/common_questions/what_is_accessibility/index.html
@@ -0,0 +1,94 @@
+---
+title: Qu'est-ce que l'accessibilité ?
+slug: Apprendre/Accessibilité
+tags:
+  - Accessibility
+  - Beginner
+  - Intro
+  - NeedsActiveLearning
+  - Web
+translation_of: Learn/Common_questions/What_is_accessibility
+---
+<div class="summary">
+<p>Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Principes_généraux_de_l'accessibilité">Principes généraux de l'accessibilité</h3>
+
+<p>En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur.</p>
+
+<p>Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, <em>nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité</em>.</p>
+
+<h3 id="L'accessibilité_sur_le_Web">L'accessibilité sur le Web</h3>
+
+<p>Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres.</p>
+
+<p>Prenons l'exemple de la vidéo :</p>
+
+<dl>
+ <dt>Déficience auditive</dt>
+ <dd>Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète.</dd>
+ <dd>Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.</dd>
+ <dt>Déficience visuelle</dt>
+ <dd>Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.</dd>
+ <dt>Mise en pause</dt>
+ <dd>Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information.</dd>
+ <dt>Utilisation du clavier</dt>
+ <dd>Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier.</dd>
+</dl>
+
+<h4 id="Les_bases_de_l'accessibilité_web">Les bases de l'accessibilité web</h4>
+
+<p>Afin qu'un page web soit un minimum accessible, il faut :</p>
+
+<ul>
+ <li>Fournir des alternatives textuelles pour toutes les images du site qui sont utilisées pour porter du sens. Cela permettra aux personnes atteint d'une déficience visuelle d'utiliser un logiciel pour lire cette description ou aux personnes avec des connexions erratiques de récupérer le texte et de l'afficher avant l'image.</li>
+ <li>S'assurer que tous les utilisateurs peuvent manipuler les interfaces graphiques (par exemple les menus déroulants) avec le clavier (par exemple avec la touche tabulation ou la touche Entrée).</li>
+ <li>Fournir un attribut qui définisse le langage utilisé pour le contenu de la page afin qu'un logiciel lecteur d'écran puisse lire le texte correctement.</li>
+ <li>S'assurer que tous les utilisateurs puissent naviguer entre les différents éléments d'une page avec le clavier sans être « piégés » dans un endroit de la page (c'est généralement la touche tabulation qui est utilisée pour ce type d'actions)</li>
+</ul>
+
+<p>Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité.</p>
+
+<h3 id="Les_défendeurs_de_l'accessibilité">Les défendeurs de l'accessibilité</h3>
+
+<p>Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (<em>WAI</em> ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité.</p>
+
+<h2 id="Plus_de_détails">Plus de détails</h2>
+
+<p>Vous pouvez vous référer à :</p>
+
+<ul>
+ <li><a href="https://fr.wikipedia.org/wiki/Accessibilit%C3%A9">L'article Wikipédia</a> sur l'accessibilité</li>
+ <li><a href="http://www.w3.org/WAI/">Le site WAI (le projet W3C's Web Accessibility Initiative) (en anglais)</a></li>
+</ul>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique.</p>
+
+<ul>
+ <li>Pour le design, nous vous conseillons de lire <a href="/fr/Apprendre/Concevoir_site_tous_types_utilisateurs">Concevoir un site pour tous les types d'utilisateurs</a>.</li>
+ <li>Pour l'aspect technique, vous pourriez commencer par voir comment <a href="/fr/Apprendre/HTML/Howto/Add_images_to_a_webpage">intégrer des images dans des pages web</a>.</li>
+</ul>
diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.html b/files/fr/learn/common_questions/what_software_do_i_need/index.html
new file mode 100644
index 0000000000..fc0e1bcfc8
--- /dev/null
+++ b/files/fr/learn/common_questions/what_software_do_i_need/index.html
@@ -0,0 +1,189 @@
+---
+title: De quels logiciels ai-je besoin pour construire un site web ?
+slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web
+tags:
+  - Beginner
+  - Learn
+  - NeedsActiveLearning
+  - WebMechanics
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+<p>Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez déjà connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">la différence entre une page web, un serveur web et un moteur de recherche.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :</p>
+
+<ol>
+ <li>Créer et éditer des pages web</li>
+ <li>Téléverser (<em>uploader</em>) vos fichiers vers votre serveur web</li>
+ <li>Visualiser votre site web.</li>
+</ol>
+
+<p>Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel.</p>
+
+<h2 id="Pédagogie_active">Pédagogie active</h2>
+
+<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<h3 id="Créer_et_éditer_des_pages_web">Créer et éditer des pages web</h3>
+
+<p>Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme <strong>{{Glossary("RTF")}}</strong> vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site.</p>
+
+<p>Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Système d'exploitation</th>
+   <th scope="col">Éditeur natif par défaut</th>
+   <th scope="col">Éditeur tiers</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29" rel="external">Bloc-notes</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://notepad-plus-plus.org/fr/">Notepad++</a></li>
+     <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li>
+     <li><a href="https://www.jetbrains.com/webstorm">Web Storm</a></li>
+     <li><a href="http://brackets.io">Brackets</a></li>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://fr.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li>
+     <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io">Brackets</a></li>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="http://fr.wikipedia.org/wiki/Vi" rel="external">Vi</a> (tout système UNIX)</li>
+     <li><a href="http://fr.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li>
+     <li><a href="https://fr.wikipedia.org/wiki/Kate_%28logiciel%29" rel="external">Kate</a> (KDE)</li>
+     <li><a href="https://en.wikipedia.org/wiki/Leafpad">LeafPad</a> (Xfce)</li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li>
+     <li><a href="http://www.vim.org/" rel="external">Vim</a></li>
+     <li><a href="https://www.visualstudio.com">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io">Brackets</a></li>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td></td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net">ShiftEdit</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :</p>
+
+<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p>
+
+<h3 id="Transférer_des_fichiers_vers_un_serveur_web">Transférer des fichiers vers un serveur web</h3>
+
+<p>Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (<em>uploader</em>) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article<a class="new" href="/en-US/docs/Learn/How_much_does_it_cost"> combien ça coûte de publier quelque chose sur le Web ?</a>). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour <em>File Transfer Protocol</em> ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> et <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages">Git/Github</a>.</p>
+
+<div class="blockIndicator note">
+<p>FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (<em>Secure</em> FTP) ou via RSync avec SSH.</p>
+</div>
+
+<p>Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">dans un article à part</a>. Voyons tout de même une liste de clients FTP basiques :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Système d'exploitation</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;">Logiciel client FTP</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td><a href="http://winscp.net" rel="external">WinSCP</a></td>
+   <td colspan="1" rowspan="3"><a href="https://filezilla-project.org/">FileZilla</a> (tout système d'exploitation)</td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br>
+    <a href="http://www.konqueror.org/">Konqueror</a> (KDE)</td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td><a href="http://cyberduck.de/">Cyberduck</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualiser_des_sites_web">Visualiser des sites web</h3>
+
+<p>Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">nombreux</a> navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes :</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/firefox/new/">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
+</ul>
+
+<p>Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://dolphin.com/" rel="external">Dolphin</a> ou<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p>
+
+<p>Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme <a href="http://browsershots.org/" rel="external">Browsershots</a> ou <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur <a href="https://modern.ie" rel="external">modern.ie</a>, une machine virtuelle prête à être utilisée).</p>
+
+<p>Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative <a href="http://opendevicelab.com/" rel="external">Open Device Lab</a>. Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<ul>
+ <li>Certains de ces logiciels sont libres et/ou gratuits, d'autres ne le sont pas. <a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">En savoir plus sur le coût d'un site web.</a></li>
+ <li>Si vous souhaitez en apprendre plus sur les éditeurs de texte et choisir celui qui sera le plus adapté, consultez notre article sur <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">comment choisir, installer et paramétrer son éditeur de texte</a>.</li>
+ <li>Si vous vous demandez comment publier votre site web sur le Web, jetez un coup d'œil à <a href="/fr/docs/Apprendre/Upload_files_to_a_web_server">« Comment transférer des fichiers vers un serveur web »</a>.</li>
+</ul>