diff options
| -rw-r--r-- | files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html | 130 |
1 files changed, 62 insertions, 68 deletions
diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html index 69209d31bc..aa1dffd2e5 100644 --- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -2,128 +2,122 @@ title: Publier votre site web slug: Learn/Getting_started_with_the_web/Publishing_your_website tags: - - Apprentissage - - Codage + - Apprendre - Débutant + - Codage - FTP - GitHub - Google App Engine - - Learn - Web - - publier - - serveur web + - Publier + - Serveur Web translation_of: Learn/Getting_started_with_the_web/Publishing_your_website original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web --- -<div>{{LearnSidebar}}<br> -{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}</div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> -<p>Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.</p> -</div> +<p class="summary"><span class="seoSummary">Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.</span></p> -<h2 id="Quelles_sont_les_options">Quelles sont les options ?</h2> +<h2 id="What_are_the_options">Quelles sont les options ?</h2> -<p>La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant, puis nous vous présenterons une méthode actuellement fonctionnelle.</p> +<p>La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant, puis nous vous présenterons une méthode actuellement fonctionnelle.</p> -<h3 id="Trouver_un_hébergement_et_un_nom_de_domaine">Trouver un hébergement et un nom de domaine</h3> +<h3 id="Getting_hosting_and_a_domain_name">Trouver un hébergement et un nom de domaine</h3> -<p>Si vous voulez un contrôle total sur la publication de votre site web, alors vous aurez probablement besoin de dépenser de l'argent pour acheter :</p> +<p>Pour avoir plus de contrôle sur le contenu et l'apparence du site, la plupart des gens choisissent d'acheter un hébergement web et un nom de domaine :</p> <ul> - <li>un hébergement — espace pour fichiers loué sur un <a href="/fr/Learn/What_is_a_web_server">serveur web</a> d'une société d'hébergement. Vous mettez les fichiers de votre site web dans cet espace et le serveur web en fournit le contenu aux utilisateurs qui le demandent.</li> - <li>un <a href="/fr/Learn/Understanding_domain_names">nom de domaine</a> — l'adresse unique où les visiteurs peuvent trouver votre site web, comme <code>https://www.mozilla.org</code> ou http://<code>www.bbc.co.uk</code>. Vous louez votre nom de domaine à un<strong> bureau d'enregistrement de domaines</strong>.</li> + <li>L'hébergement web est un espace de fichiers loué sur le <a href="/fr/docs/Learn/Common_questions/What_is_a_web_server">serveur web</a> d'une société d'hébergement. Vous mettez les fichiers de votre site web dans cet espace et le serveur web en fournit le contenu aux utilisateurs qui le demandent.</li> + <li>Un <a href="/fr/docs/Learn/Common_questions/What_is_a_domain_name">nom de domaine</a> est l'adresse unique où les visiteurs peuvent trouver votre site web, comme <code>https://www.mozilla.org</code> ou <code>http://www.bbc.co.uk</code>. Vous pouvez louer votre nom de domaine pour autant d'années que vous le souhaitez auprès d'un <strong>registraire de nom domaine</strong>.</li> </ul> <p>De nombreux sites professionnels sont mis en ligne de cette façon.</p> -<p>En plus, vous aurez besoin d'un programme {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (voir <a href="/en-US/Learn/How_much_does_it_cost#Software">Combien ça coûte : les logiciels</a> pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :</p> +<p>En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de transfert de fichiers (FTP)")}} (voir <a href="/fr/docs/Learn/Common_questions/How_much_does_it_cost#software">Combien ça coûte : les logiciels</a> pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="ftp.jpg" style="display: block;margin: 0px auto;"></p> -<h4 id="Suggestions_pour_trouver_hébergement_et_domaines">Suggestions pour trouver hébergement et domaines</h4> +<h4 id="Tips_for_finding_hosting_and_domains">Suggestions pour trouver hébergement et domaines</h4> <ul> - <li>Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré.</li> - <li>Votre {{Glossary("ISP", "Fournisseur d'Accès Internet")}} (FAI) fournit peut-être un hébergement limité pour un petit site web. Le jeu des fonctionnalités disponibles sera restreint, mais parfait pour vos premières expérimentations — contactez‑les et demandez !</li> - <li>Il existe quelques services gratuits tels que <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a> et <a href="https://wordpress.com/">Wordpress</a>. À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web.</li> - <li>Parfois, des sociétés fournissent hébergement et domaine dans un même paquet.</li> + <li>Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré.</li> + <li>Votre {{Glossary("ISP", "Fournisseur d'Accès Internet (FAI)")}} fournit peut-être un hébergement limité pour un petit site web. L'ensemble des fonctionnalités disponibles sera limité, mais il pourrait être parfait pour vos premières expériences.</li> + <li>Il existe quelques services gratuits tels que <a href="https://neocities.org/">Neocities</a>, <a href="https://sites.google.com/">Google Sites</a>, <a href="https://www.blogger.com">Blogger</a>. À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web.</li> + <li>Parfois, des sociétés fournissent hébergement et domaine dans un même paquet.</li> </ul> -<h3 id="Utiliser_un_outil_en_ligne_comme_GitHub_ou_Google_App_Engine">Utiliser un outil en ligne comme GitHub ou Google App Engine</h3> +<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine">Utiliser un outil en ligne comme GitHub ou Google App Engine</h3> <p>Certains outils vous permettent de publier votre site web en ligne :</p> <ul> - <li><a href="https://github.com/">GitHub</a> est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le <strong>système de gestion de versions</strong> <a href="http://git-scm.com/">Git</a><strong>. </strong>Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée <a href="https://pages.github.com/">pages GitHub</a>, qui vous permet de présenter du code de site web en direct sur le web.</li> - <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> pour plus d'information.</li> + <li><a href="https://github.com/">GitHub</a> est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le <strong>système de gestion de versions</strong> <a href="http://git-scm.com/">Git</a><strong>. </strong>Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée <a href="https://pages.github.com/">Pages GitHub</a>, qui vous permet de présenter du code de site web en direct sur le web.</li> + <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir <a href="/fr/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger votre site Web sur Google App Engine ?</a> pour plus d'information.</li> </ul> -<p>À la différence de la plupart des hébergements, ces outils sont d'utilisation gratuite, mais vous n'avez accès qu'à un ensemble limité de fonctionnalités.</p> +<p>Ces options sont généralement gratuites, mais vous risquez d'être dépassé par les limitations du nombre de fonctionnalités.</p> -<h3 id="Utiliser_un_EDI_web_tel_que_Thimble">Utiliser un EDI web tel que Thimble</h3> +<h3 id="Using_a_web-based_IDE_such_as_CodePen">Utiliser un EDI web tel que CodePen</h3> -<p>Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web — le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).</p> +<p>Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web — le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).</p> -<p>Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :</p> +<p>Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :</p> <ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://thimble.mozilla.org/">Thimble</a></li> - <li><a href="http://jsbin.com/">JSBin</a></li> - <li><a href="https://codepen.io/">CodePen</a></li> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://glitch.com/">Glitch</a></li> + <li><a href="http://jsbin.com/">JSBin</a></li> + <li><a href="https://codepen.io/">CodePen</a></li> </ul> -<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> +<p><img alt="" src="jsbin-screen.png" style="display: block;margin: 0px auto;"></p> -<h2 id="Publier_via_GitHub">Publier via GitHub</h2> +<h2 id="Publishing_via_GitHub">Publier via GitHub</h2> <p>Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.</p> <ol> - <li>Pour commencer, <a href="https://github.com/join">inscrivez-vous sur GitHub</a> et vérifiez votre adresse e-mail.</li> - <li>Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.</li> - <li>Sur cette page, dans le champ <em>Repository name</em>, entrez <em>username</em>.github.io : <em>username</em> est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera <em>bobsmith.github.io</em>.<br> - Également, cochez <em>Initialize this repository with a README</em>, puis cliquez sur <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> - <li>Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur <em>Commit changes</em>. - <div class="note"> - <p><strong>Note :</strong> Assurez-vous que votre dossier comporte bien un fichier <em>index.html.</em></p> - </div> - </li> - <li>Maintenant, naviguez jusqu'à <em>username</em>.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur <em> chrisdavidmills</em>, allez à <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>. - <div class="note"> - <p><strong>Note :</strong> Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.</p> - </div> - </li> + <li>Pour commencer, <a href="https://github.com/join">inscrivez-vous sur GitHub</a> et vérifiez votre adresse e-mail.</li> + <li>Ensuite, <a href="https://github.com/new">créez un dépôt</a> dans lequel vous placerez vos fichiers.</li> + <li>Sur cette page, dans le champ <em>Repository name</em>, entrez <em>username</em>.github.io : <em>username</em> est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera <em>bobsmith.github.io</em>.<br> + Également, cochez <em>Initialize this repository with a README</em>, puis cliquez sur <em>Create repository</em>.<img alt="" src="github-create-repo.png" style="display: block;margin: 0px auto;"></li> + <li>Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur <em>Commit changes</em>. + <div class="notecard note"> + <p><strong>Note :</strong> Assurez-vous que votre dossier comporte bien un fichier <em>index.html.</em></p> + </div> + </li> + <li>Maintenant, naviguez jusqu'à <em>username</em>.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur <em> chrisdavidmills</em>, allez à <a href="https://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>. + <div class="notecard note"> + <p><strong>Note :</strong> Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.</p> + </div> + </li> </ol> -<p>Pour en savoir plus, voyez <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> +<p>Pour en savoir plus, voyez <a href="https://docs.github.com/en/github/working-with-github-pages/getting-started-with-github-pages">GitHub Pages Help</a>.</p> -<h2 id="Lectures_pour_approfondir">Lectures pour approfondir</h2> +<h2 id="Further_reading">Lectures pour approfondir</h2> <ul> - <li><a href="/fr/docs/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web</a></li> - <li><a href="/fr/docs/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></li> - <li><a href="/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte">Combien ça coûte de faire quelque chose sur le Web ?</a></li> + <li><a href="/fr/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur web</a></li> + <li><a href="/fr/docs/Learn/Common_questions/What_is_a_domain_name">Comprendre les noms de domaine</a></li> + <li><a href="/fr/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de faire quelque chose sur le Web ?</a></li> <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website </a>: un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires.</li> <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Hébergement de sites web statiques gratuit ou peu cher</a>, un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles.</li> </ul> <p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}</p> -<article class="approved"> -<div class="boxed translate-rendered text-content"> -<h2 id="Dans_ce_module">Dans ce module</h2> +<h2 id="In_this_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installation des outils de base</a></li> - <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel sera l'aspect de votre site web ?</a></li> - <li id="Dealing_with_files"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Les bases de CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a></li> - <li id="Publishing_your_website"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site web</a></li> - <li id="How_the_web_works"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li> + <li id="Installing_basic_software"><a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation des outils de base</a></li> + <li id="What_will_your_website_look_like"><a href="/fr/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Quel sera l'aspect de votre site web ?</a></li> + <li id="Dealing_with_files"><a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gérer les fichiers</a></li> + <li id="HTML_basics"><a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Les bases du HTML</a></li> + <li id="CSS_basics"><a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">Les bases de CSS</a></li> + <li id="JavaScript_basics"><a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Les bases de JavaScript</a></li> + <li id="Publishing_your_website"><a href="/fr/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publier votre site web</a></li> + <li id="How_the_web_works"><a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Le fonctionnement du Web</a></li> </ul> -</div> -</article> |