{"id":25248,"date":"2023-08-04T13:51:23","date_gmt":"2023-08-04T13:51:23","guid":{"rendered":"\/tutoriels\/?p=25248"},"modified":"2024-12-18T14:59:23","modified_gmt":"2024-12-18T14:59:23","slug":"comment-creer-page-web-html","status":"publish","type":"post","link":"\/fr\/tutoriels\/comment-creer-page-web-html\/","title":{"rendered":"Cr\u00e9er une page HTML en 7 \u00e9tapes simples + suggestions de post-d\u00e9veloppement"},"content":{"rendered":"<p class=\"wp-block-paragraph\">De nos jours, la cr&eacute;ation d&rsquo;un site internet est simple et ne n&eacute;cessite pas de connaissances en mati&egrave;re de codage. Des plateformes comme le <a href=\"https:\/\/www.hostinger.com\/fr\/createur-de-sites-internet\"><strong>cr&eacute;ateur de site internet<\/strong><\/a> Hostinger offrent une interface visuelle simple et des fonctions de glisser-d&eacute;poser pour faciliter le processus de d&eacute;veloppement.<\/p><p class=\"wp-block-paragraph\">Cependant, il se peut que vous souhaitiez cr&eacute;er un site internet &agrave; partir de z&eacute;ro avec le <strong>HTML (<\/strong>HyperText Markup Language<strong>)<\/strong>. Bien que cela soit plus difficile, les sites web HTML sont plus flexibles et plus rapides car ils n&eacute;cessitent moins de ressources pour fonctionner.<\/p><p class=\"wp-block-paragraph\">Afin de vous aider &agrave; d&eacute;marrer, cet article va vous expliquer les &eacute;tapes pour cr&eacute;er votre premi&egrave;re page web en HTML. Nous vous proposerons &eacute;galement des pratiques post-d&eacute;veloppement pour am&eacute;liorer l&rsquo;apparence et la fonctionnalit&eacute; de votre site HTML.<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-creer-sa-premiere-page-web-en-html\"><strong>Comment cr&eacute;er sa premi&egrave;re page web en HTML<\/strong><\/h2><p class=\"wp-block-paragraph\">Cette section fournit des instructions &eacute;tape par &eacute;tape pour cr&eacute;er votre premi&egrave;re page web et coder un site avec HTML. Avant de poursuivre, reportez-vous &agrave; l&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/html-cheat-sheet-nouvelles-balises-html5-incluses\/\"><strong>HTML cheat sheet<\/strong><\/a> si vous n&rsquo;&ecirc;tes pas familiaris&eacute; avec le langage de balisage standard.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-choisissez-un-editeur-de-texte-html\"><strong>1. Choisissez un &eacute;diteur de texte HTML<\/strong><\/h3><p class=\"wp-block-paragraph\">Un &eacute;diteur de code est un logiciel utilis&eacute; pour &eacute;crire votre site internet. Bien que vous puissiez cr&eacute;er une page web HTML avec un &eacute;diteur de texte par d&eacute;faut tel que le Bloc-notes, celui-ci permet seulement de cr&eacute;er une fichier texte simple et ne dispose pas des fonctionnalit&eacute;s qui simplifient le processus de d&eacute;veloppement, telles que :<\/p><ul class=\"wp-block-list\">\n<li><strong>La mise en &eacute;vidence de la syntaxe <\/strong>&ndash;<strong> <\/strong>marque les balises HTML de diff&eacute;rentes couleurs en fonction de leur cat&eacute;gorie. La structure du code est ainsi plus facile &agrave; lire et &agrave; comprendre.<\/li>\n\n\n\n<li><strong>L&rsquo;autocompl&eacute;tion <\/strong>&ndash; sugg&egrave;re automatiquement des attributs, des balises et des &eacute;l&eacute;ments HTML en fonction de la valeur pr&eacute;c&eacute;dente afin d&rsquo;acc&eacute;l&eacute;rer le processus de codage.<\/li>\n\n\n\n<li><strong>La d&eacute;tection d&rsquo;erreurs <\/strong>&ndash; met en &eacute;vidence les erreurs de syntaxe, ce qui permet au d&eacute;veloppeur web de les rep&eacute;rer et de les corriger rapidement.<\/li>\n\n\n\n<li><strong>Les int&eacute;grations<\/strong>&ndash; certains &eacute;diteurs de code s&rsquo;int&egrave;grent &agrave; des plugins, &agrave; Git et &agrave; des clients FTP pour rendre le processus de d&eacute;ploiement plus efficace.<\/li>\n\n\n\n<li><strong>Un aper&ccedil;u en direct<\/strong> &ndash; vous pouvez installer un plugin pour obtenir un aper&ccedil;u en direct du site au lieu d&rsquo;ouvrir manuellement les fichiers HTML sur les navigateurs.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1460\" height=\"751\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Fonctionnalite-de-previsualisation-en-direct-dans-Visual-Studio-Code.png\/w=1024,h=1024,fit=scale-down\" alt=\"Fonctionnalit&eacute; de pr&eacute;visualisation en direct dans Visual Studio Code\" class=\"wp-image-25249\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Fonctionnalite-de-previsualisation-en-direct-dans-Visual-Studio-Code.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Fonctionnalite-de-previsualisation-en-direct-dans-Visual-Studio-Code.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Fonctionnalite-de-previsualisation-en-direct-dans-Visual-Studio-Code.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Fonctionnalite-de-previsualisation-en-direct-dans-Visual-Studio-Code.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Fonctionnalite-de-previsualisation-en-direct-dans-Visual-Studio-Code.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Comme il existe de nombreuses options, nous avons dress&eacute; une liste des <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/editeur-html\/\"><strong>meilleurs &eacute;diteurs HTML<\/strong><\/a> pour vous aider &agrave; trouver celui qui r&eacute;pond &agrave; vos besoins :<\/p><ul class=\"wp-block-list\">\n<li><strong>Notepad++ <\/strong>&ndash; un &eacute;diteur de texte l&eacute;ger et gratuit avec des fonctionnalit&eacute;s suppl&eacute;mentaires pour le codage et la prise en charge des plugins.<\/li>\n\n\n\n<li><strong>Atom <\/strong>&ndash; un &eacute;diteur HTML open-source dot&eacute; d&rsquo;une fonction de pr&eacute;visualisation en direct du site web et d&rsquo;une compatibilit&eacute; &eacute;tendue avec les langages de balisage et de script.<\/li>\n\n\n\n<li><strong>Visual Studio Code (VSCode) <\/strong>&ndash; un outil populaire pour le d&eacute;veloppement web avec une biblioth&egrave;que d&rsquo;extensions compl&egrave;te pour &eacute;tendre ses fonctionnalit&eacute;s.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-2-planifiez-la-mise-en-page\"><strong>2. Planifiez la mise en page<\/strong><\/h3><p class=\"wp-block-paragraph\">La cr&eacute;ation d&rsquo;un plan de mise en page vous permet de mieux visualiser l&rsquo;aspect de votre page web. Vous pouvez &eacute;galement l&rsquo;utiliser comme liste de contr&ocirc;le pour d&eacute;terminer les &eacute;l&eacute;ments &agrave; inclure dans votre site.<\/p><p class=\"wp-block-paragraph\">En outre, un plan de mise en page vous aide &agrave; d&eacute;terminer la convivialit&eacute; et la navigation de votre site internet, qui influent sur l&rsquo;exp&eacute;rience utilisateur. L&rsquo;en-t&ecirc;te, le pied de page et la navigation du site font partie des &eacute;l&eacute;ments &agrave; prendre en compte lors de la planification.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a793ddd63509\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a793ddd63509\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"407\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/08\/plan-approximatif-mise-en-page-site.png\/public\" alt=\"Un plan approximatif de mise en page du site web\" class=\"wp-image-37025\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/08\/plan-approximatif-mise-en-page-site.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/08\/plan-approximatif-mise-en-page-site.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/08\/plan-approximatif-mise-en-page-site.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/08\/plan-approximatif-mise-en-page-site.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Vous pouvez utiliser un papier et un crayon ou un logiciel de conception web tel que <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Figma<\/strong><\/a> pour <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-concevoir-un-site-web-un-guide-etape-par-etape-de-lidee-au-lancement\/\"><strong>concevoir la mise en page d&rsquo;un site web<\/strong><\/a>. Il n&rsquo;est pas n&eacute;cessaire qu&rsquo;elle soit d&eacute;taill&eacute;e, tant qu&rsquo;elle repr&eacute;sente grossi&egrave;rement l&rsquo;aspect et la convivialit&eacute; de votre site.<\/p><h3 class=\"wp-block-heading\"><strong>3. &Eacute;crivez le code HTML<\/strong><\/h3><p class=\"wp-block-paragraph\">Une fois que l&rsquo;outil et le plan de mise en page sont pr&ecirc;ts, vous pouvez commencer &agrave; &eacute;crire le code de votre site. Les &eacute;tapes peuvent varier en fonction de votre &eacute;diteur de code, mais l&rsquo;id&eacute;e g&eacute;n&eacute;rale est similaire.<\/p><p class=\"wp-block-paragraph\">Dans ce tutoriel, nous allons vous montrer comment le faire en utilisant <strong>VSCode <\/strong>:<\/p><ul class=\"wp-block-list\">\n<li>Cr&eacute;ez un nouveau dossier sur votre ordinateur. Ce sera le r&eacute;pertoire de tous les fichiers de votre site.<\/li>\n\n\n\n<li>Ouvrez <strong>VSCode<\/strong> &rarr; <strong>Fichier &rarr; Ouvrir un dossier<\/strong>.<\/li>\n\n\n\n<li>Localisez le nouveau dossier et cliquez sur <strong>S&eacute;lectionner un dossier<\/strong>.<\/li>\n\n\n\n<li>S&eacute;lectionnez <strong>Nouveau fichier<\/strong>. Nommez le fichier<strong> index.html<\/strong> et appuyez sur <strong>Entr&eacute;e<\/strong>.<\/li>\n\n\n\n<li>Cliquez sur <strong>Cr&eacute;er le fichier<\/strong> pour confirmer.<\/li>\n\n\n\n<li>Une fois que vous avez acc&eacute;d&eacute; &agrave; l&rsquo;onglet de l&rsquo;&eacute;diteur <strong>index.html<\/strong>, entrez la structure de base suivante du document HTML :<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt; &lt;\/title&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p class=\"wp-block-paragraph\">Pour vous aider &agrave; comprendre le code, voici une explication de chaque balise:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;!DOCTYPE html&gt; <\/strong>&ndash; indique aux navigateurs web que le document est une page HTML.<\/li>\n\n\n\n<li><strong>&lt;\/html&gt;<\/strong> &ndash; balise d&rsquo;ouverture du document HTML indiquant o&ugrave; commence le code.<\/li>\n\n\n\n<li><strong>&lt;head&gt; <\/strong>&ndash; balise contenant les m&eacute;tadonn&eacute;es du site.<\/li>\n\n\n\n<li><strong>&lt;title&gt;<\/strong> &ndash; d&eacute;finit le texte affich&eacute; sur l&rsquo;onglet du navigateur web lors de la visite de la page web.<\/li>\n\n\n\n<li><strong>&lt;body&gt;<\/strong> &ndash; contient tout le contenu visible de la page web.<\/li>\n<\/ul><h3 class=\"wp-block-heading\"><strong>4. Cr&eacute;ez des &eacute;l&eacute;ments dans la mise en page<\/strong><\/h3><p class=\"wp-block-paragraph\">Ajoutez du code HTML dans le fichier<strong> index.html<\/strong> pour cr&eacute;er les &eacute;l&eacute;ments de la mise en page pr&eacute;vue. Vous aurez besoin de diff&eacute;rents <a href=\"https:\/\/www.w3schools.com\/html\/html5_semantic_elements.asp\" target=\"_blank\" rel=\"noopener\"><strong>&eacute;l&eacute;ments s&eacute;mantiques HTML<\/strong><\/a> en fonction de la conception de votre page web.<\/p><p class=\"wp-block-paragraph\">Ces &eacute;l&eacute;ments s&eacute;pareront votre site en plusieurs sections et deviendront les conteneurs du contenu. Voici les balises que nous utiliserons :<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;header&gt; <\/strong>&ndash; contient le contenu d&rsquo;introduction ou de navigation.<\/li>\n\n\n\n<li><strong>&lt;main&gt; <\/strong>&ndash; repr&eacute;sente le contenu principal d&rsquo;une page web.<\/li>\n\n\n\n<li><strong>&lt;div&gt; <\/strong>&ndash; d&eacute;finit une section dans un document HTML.<\/li>\n\n\n\n<li><strong>&lt;footer&gt; <\/strong>&ndash; contient le contenu affich&eacute; au bas de votre site web.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Placez ces &eacute;l&eacute;ments dans les balises <strong>&lt;body&gt;&lt;\/body&gt;<\/strong> du code de votre fichier<strong> index.html<\/strong>. Veillez &agrave; fermer chaque &eacute;l&eacute;ment avec une balise de fermeture, sinon votre code ne fonctionnera pas.<\/p><p class=\"wp-block-paragraph\">Voici &agrave; quoi ressemble le code complet :<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt;Blog Personnel&lt;\/title&gt;\n   &lt;\/head&gt; \n   &lt;body&gt;\n      &lt;header&gt;   \n\n      &lt;\/header&gt;\n      &lt;main&gt;\n         &lt;div class=&rdquo;row\"&gt;\n            &lt;div class=&rdquo;post-text-box&rdquo;&gt;\n\n            &lt;\/div&gt;\n            &lt;div class=&rdquo;profile&rdquo;&gt;\n\n            &lt;\/div&gt;  \n         &lt;\/div&gt;        \n      &lt;\/main&gt;\n      &lt;footer&gt;\n            \n      &lt;\/footer&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><h3 class=\"wp-block-heading\"><strong>5. Ajoutez le contenu HTML<\/strong><\/h3><p class=\"wp-block-paragraph\">Une fois que la mise en page est pr&ecirc;te, commencez &agrave; la remplir avec le contenu de votre site, comme du texte, des images, des liens hypertextes ou des vid&eacute;os. Si le contenu n&rsquo;est pas pr&ecirc;t, utilisez un contenu fictif comme texte de remplissage et remplacez-le plus tard.<\/p><p class=\"wp-block-paragraph\">Voici quelques balises que nous utiliserons pour ajouter le contenu de la page web :<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;h1&gt; et &lt;p&gt; <\/strong>&ndash; contiennent les titres et les paragraphes. Utilisez la balise &lt;br&gt; pour cr&eacute;er un saut de ligne si le texte est trop long.<\/li>\n\n\n\n<li><strong>&lt;nav&gt; et &lt;a&gt;<\/strong> &ndash; sp&eacute;cifient la barre de navigation et son &eacute;l&eacute;ment d&rsquo;ancrage. Utilisez l&rsquo;attribut <strong>href <\/strong>pour sp&eacute;cifier l&rsquo;URL li&eacute;e &agrave; l&rsquo;ancre.<\/li>\n\n\n\n<li><strong>&lt;img&gt;<\/strong> &ndash; contient l&rsquo;&eacute;l&eacute;ment image. Il contient l&rsquo;attribut <strong>img src<\/strong>, qui sp&eacute;cifie le lien ou le nom du fichier image.<\/li>\n<\/ul><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Conseil de pro                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> La balise comporte &eacute;galement un attribut <strong>alt<\/strong> facultatif. Il d&eacute;crit l'image au cas o&ugrave; le fichier ne se chargerait pas.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Voici &agrave; quoi ressemble le code :<\/p><pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;meta charset=\"UTF-8\"&gt;\n      &lt;title&gt;Blog personnel&lt;\/title&gt;\n      &lt;\/head&gt; \n   &lt;body&gt;\n      &lt;header&gt;   \n      &lt;h1&gt;Votre Blog personnel&lt;\/h1&gt;\n      &lt;nav&gt;\n         &lt;a href=&rdquo;domain.tld\/home&rdquo;&gt;Page d'accueil&lt;\/a&gt;\n         &lt;a href=&rdquo;domain.tld\/blog&rdquo;&gt;Blog&lt;\/a&gt;\n         &lt;a href=&rdquo;domain.tld\/about&rdquo;&gt;&agrave; propos&lt;\/a&gt;\n      &lt;\/nav&gt;\n      &lt;\/header&gt;\n      &lt;main&gt;\n         &lt;div class=\"row\"&gt;\n            &lt;div class=&rdquo;post-text-box&rdquo;&gt;\n               &lt;h1&gt;Nouveau Post&lt;\/h1&gt;\n               &lt;section&gt;\n                  &lt;h1&gt;Premier Post&lt;\/h1&gt;\n                  &lt;p&gt;Le contenu du premier post&lt;\/p&gt;\n               &lt;\/section&gt;\n            &lt;\/div&gt;\n            &lt;div class=&rdquo;profile&rdquo;&gt;\n               &lt;h1&gt;&Agrave; propos de moi&lt;\/h1&gt;\n               &lt;img src=\"Image-de-profile.png\" style=\"width:300px;height:300px;\"&gt;\n               &lt;p&gt;&Agrave; propos de l&rsquo;auteur&lt;\/p&gt;\n            &lt;\/div&gt;  \n         &lt;\/div&gt;        \n      &lt;\/main&gt;\n      &lt;footer&gt;\n         &lt;a href=&rdquo;twitter.com\/author&rdquo;&gt;Twitter&lt;\/a&gt;\n         &lt;a href=&rdquo;facebook.com\/author&rdquo;&gt;Facebook&lt;\/a&gt;\n         &lt;a href=&rdquo;instagram.com\/author&rdquo;&gt;Instagram&lt;\/a&gt;\n      &lt;\/footer&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p class=\"wp-block-paragraph\">Apr&egrave;s avoir ajout&eacute; le code, votre page web HTML aura l&rsquo;apparence suivante :<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1308\" height=\"877\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-ecrit-uniquement-avec-HTML-2.png\/w=1024,h=1024,fit=scale-down\" alt=\"Un site web &eacute;crit uniquement avec HTML\" class=\"wp-image-25306\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-ecrit-uniquement-avec-HTML-2.png\/w=1308,fit=scale-down 1308w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-ecrit-uniquement-avec-HTML-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-ecrit-uniquement-avec-HTML-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-ecrit-uniquement-avec-HTML-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-ecrit-uniquement-avec-HTML-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1308px) 100vw, 1308px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>6. Incluez le CSS de la mise en page<\/strong><\/h3><p class=\"wp-block-paragraph\">&Eacute;tant donn&eacute; que le langage HTML ne vous permet que de cr&eacute;er la structure de la page web et d&rsquo;ajouter un contenu de base, vous devrez utiliser les <strong>feuilles de style en cascade (CSS)<\/strong> pour modifier sa mise en page. CSS est un langage qui d&eacute;finit le style de votre document HTML.Pour ce faire, cr&eacute;ez un fichier<strong> style.css<\/strong> et <strong>liez la feuille de style au document HTML<\/strong> en ajoutant le code suivant entre les balises d&rsquo;ouverture et de fermeture <strong>&lt;head&gt;<\/strong> de <strong>index.html:<\/strong><\/p><pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/pre><p class=\"wp-block-paragraph\">Pour r&eacute;aliser la mise en page de la page web en deux colonnes, nous utiliserons la propri&eacute;t&eacute; <strong>flex<\/strong>. Elle permet d&rsquo;organiser les &eacute;l&eacute;ments HTML &agrave; l&rsquo;aide de conteneurs flexibles, ce qui leur permet de s&rsquo;adapter &agrave; la taille de l&rsquo;&eacute;cran de l&rsquo;utilisateur.<\/p><p class=\"wp-block-paragraph\">Voici &agrave; quoi ressemble le code complet :<\/p><pre class=\"wp-block-preformatted\">\/*header style*\/\nheader {\n   text-align: center; \n   padding: 20px;\n}\n\/*navigation menu style*\/\nnav {\n   text-align: center;\n   word-spacing: 30px;\n   Padding: 10px;\n}\n\/*creating the two-column layout*\/\n*{\n   box-sizing: border-box;\n}\n.row {\n   display: flex;\n   flex-wrap: wrap;\n}\n.post-text-box {\n   flex: 70%;\n   padding: 20px;\n}\n.profile {\n   flex: 70%;\n   padding: 20px;\n}\n\/*profile image and heading style*\/\n.profile img {\n   width: 120px;\n   display: block;\n   margin-left: 0;\n   margin-right: 0;\n}\n.profile h1 {\n   text-align: center;\n}\n<\/pre><p class=\"wp-block-paragraph\">Apr&egrave;s avoir ajout&eacute; l&rsquo;extrait de code &agrave; votre fichier CSS, voici &agrave; quoi ressemblera votre page web :<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1460\" height=\"588\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-avec-mise-en-page-CSS.png\/w=1024,h=1024,fit=scale-down\" alt=\"Un site web avec mise en page CSS\" class=\"wp-image-25297\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-avec-mise-en-page-CSS.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-avec-mise-en-page-CSS.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-avec-mise-en-page-CSS.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-avec-mise-en-page-CSS.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-web-avec-mise-en-page-CSS.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure>\n<\/div><p>\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Suggestions de lecture                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Apprenez les <a href=\"\/fr\/tutoriels\/style-css\/\">diff&eacute;rents styles de CSS, notamment externe, interne et inline.<\/a>.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\"><strong>7. Personnalisez votre page<\/strong><\/h3><p class=\"wp-block-paragraph\">Outre la modification de la mise en page, utilisez les feuilles de style CSS pour personnaliser d&rsquo;autres aspects visuels de votre site web. Par exemple, vous pouvez modifier la famille de polices et l&rsquo;image d&rsquo;arri&egrave;re-plan.<\/p><p class=\"wp-block-paragraph\">Pour modifier l&rsquo;apparence de votre page web, ajoutez les propri&eacute;t&eacute;s CSS &agrave; l&rsquo;&eacute;l&eacute;ment que vous souhaitez personnaliser. Par exemple, voici le code pour styliser la couleur d&rsquo;arri&egrave;re-plan et les &eacute;l&eacute;ments de texte de la barre de menu de navigation :<\/p><pre class=\"wp-block-preformatted\">\/*navigation bar style*\/\nnav {\n   text-align: center;\n   word-spacing: 30px;\n   padding: 10px;\n   background-color: #f5f5dc\n   font-family: Helvetica;\n   \n}\n\/*navigation bar button style*\/\nnav a {\n   color: #000000;\n   text-decoration: none;\n   font-size: larger;\n}\n<\/pre><p class=\"wp-block-paragraph\">Apr&egrave;s avoir ajout&eacute; un style CSS pour chaque &eacute;l&eacute;ment, voici &agrave; quoi ressemble la page web :<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1460\" height=\"572\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-HTML-avec-mise-en-page-et-style-CSS.png\/w=1024,h=1024,fit=scale-down\" alt=\"Un site HTML avec mise en page et style CSS\" class=\"wp-image-25300\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-HTML-avec-mise-en-page-et-style-CSS.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-HTML-avec-mise-en-page-et-style-CSS.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-HTML-avec-mise-en-page-et-style-CSS.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-HTML-avec-mise-en-page-et-style-CSS.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/Un-site-HTML-avec-mise-en-page-et-style-CSS.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-les-etapes-a-suivre-apres-la-creation-dun-site-web-en-html\"><strong>Les &eacute;tapes &agrave; suivre apr&egrave;s la cr&eacute;ation d&rsquo;un site web en HTML<\/strong><\/h2><p class=\"wp-block-paragraph\">Cette section explique les &eacute;tapes &agrave; suivre apr&egrave;s la cr&eacute;ation d&rsquo;un site web &agrave; l&rsquo;aide de HTML et de CSS. Ces &eacute;tapes rendront votre site accessible et plus fonctionnel.<\/p><p class=\"wp-block-paragraph\"><strong>H&eacute;bergez le site sur la bonne plateforme<\/strong><\/p><p class=\"wp-block-paragraph\">Pour rendre votre site web accessible via internet, vous devez utiliser un service d&rsquo;h&eacute;bergement web. De nombreux fournisseurs d&rsquo;h&eacute;bergement proposent diff&eacute;rents plans qui r&eacute;pondent aux diff&eacute;rents besoins des utilisateurs.<\/p><p class=\"wp-block-paragraph\">Les pages web HTML &eacute;tant l&eacute;g&egrave;res et n&eacute;cessitant peu de ressources pour &ecirc;tre charg&eacute;es, un <a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-web\"><strong>plan d&rsquo;h&eacute;bergement partag&eacute;<\/strong><\/a> de base est suffisant.<\/p><p class=\"wp-block-paragraph\">Vous pouvez &eacute;galement utiliser une plateforme gratuite d&rsquo;h&eacute;bergement de sites statiques comme <a href=\"https:\/\/pages.github.com\/\" target=\"_blank\" rel=\"noopener\"><strong>GitHub Pages<\/strong><\/a>. Toutefois, &eacute;vitez les plateformes d&rsquo;h&eacute;bergement statique gratuites si vous envisagez d&rsquo;ajouter du code ou de rendre votre site dynamique. Outre les probl&egrave;mes de compatibilit&eacute; potentiels, leurs ressources limit&eacute;es en mati&egrave;re de serveur pourraient ralentir votre site web.<\/p><p class=\"wp-block-paragraph\"><strong>Ajoutez une barre de d&eacute;filement pour une meilleure navigation<\/strong><\/p><p class=\"wp-block-paragraph\">Les sites web complexes avec plusieurs pages comportent de nombreux boutons de navigation, liens et textes. Vous pouvez <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/menu-deroulant-css\/\"><strong>cr&eacute;er un menu d&eacute;roulant simple en CSS<\/strong><\/a><strong> <\/strong>pour regrouper ces &eacute;l&eacute;ments.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"409\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/menu-deroulant.png\/public\" alt=\"menu deroulant\" class=\"wp-image-25301\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/menu-deroulant.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/menu-deroulant.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/menu-deroulant.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/07\/menu-deroulant.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Les utilisateurs peuvent d&eacute;velopper la barre de navigation pour acc&eacute;der aux &eacute;l&eacute;ments. Cela permet de r&eacute;duire l&rsquo;encombrement et d&rsquo;am&eacute;liorer la convivialit&eacute; du site pour les internautes utilisant des &eacute;crans plus petits.<\/p><p class=\"wp-block-paragraph\"><strong>Am&eacute;liorez la conception du site avec des feuilles de style CSS avanc&eacute;es<\/strong><\/p><p class=\"wp-block-paragraph\">Les feuilles de style CSS vous permettent d&rsquo;effectuer des personnalisations avanc&eacute;es afin d&rsquo;am&eacute;liorer la conception de votre site et d&rsquo;offrir une meilleure exp&eacute;rience aux utilisateurs. Par exemple, vous pouvez activer l&rsquo;accrochage du d&eacute;filement, l&rsquo;animation du texte, l&rsquo;animation du zoom au survol et les d&eacute;grad&eacute;s.<\/p><p class=\"wp-block-paragraph\">En outre, vous pouvez cr&eacute;er un site web r&eacute;actif &agrave; l&rsquo;aide de requ&ecirc;tes m&eacute;dia, de r&egrave;gles CSS et de flexbox. La mise en page flexbox adapte automatiquement votre site &agrave; la taille de l&rsquo;&eacute;cran du client.<\/p><p class=\"wp-block-paragraph\"><strong>Rendez le site plus interactif gr&acirc;ce &agrave; JavaScript<\/strong><\/p><p class=\"wp-block-paragraph\">JavaScript est un langage qui vous permet de cr&eacute;er un contenu interactif et dynamique pour votre site web. Par exemple, vous pouvez activer des animations, ajouter des comptes &agrave; rebours et inclure des boutons, des formulaires ou des menus.<\/p><p class=\"wp-block-paragraph\">Ces fonctionnalit&eacute;s rendent votre site web plus int&eacute;ressant et plus immersif, am&eacute;liorant ainsi l&rsquo;exp&eacute;rience utilisateur. Les &eacute;tapes pour <strong>ajouter JavaScript &agrave; votre page web HTML<\/strong> sont similaires &agrave; celles du CSS. Vous pouvez utiliser un fichier s&eacute;par&eacute; ou l&rsquo;&eacute;crire directement dans le code actuel.<\/p><h2 class=\"wp-block-heading\" id=\"h-dois-je-apprendre-le-langage-html-pour-creer-un-site-web\"><strong>Dois-je apprendre le langage HTML pour cr&eacute;er un site web ?<\/strong><\/h2><p class=\"wp-block-paragraph\">Vous pourriez ne pas avoir le temps ou la volont&eacute; d&rsquo;apprendre le langage HTML pour le d&eacute;veloppement web. Heureusement, certaines plateformes permettent de cr&eacute;er un site web fonctionnel sans &eacute;crire de code. Regardez ce tuto vid&eacute;o de L&rsquo;Acad&eacute;mie Hostinger pour voir comment faire pour cr&eacute;er un site hyper facilement, en cinq minutes, et sans &eacute;crire une seule ligne de code :<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Cr&eacute;er un Site SANS CODER | Tuto Facile &amp; Rapide (2024)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/t8zFIhVf7us?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-france.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">S'abonner Pour plus de vid\u00e9os \u00e9ducatives\u202f!<\/span>\n          <span class=\"channel-name\">L'Acad\u00e9mie Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCnJh2FCpNj7xUbl1PKsmi6g?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>S'abonner<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Un cr&eacute;ateur de site web comme celui d&rsquo;Hostinger est une excellente option pour les d&eacute;butants. Il dispose d&rsquo;une interface utilisateur visuelle et d&rsquo;un &eacute;diteur par glisser-d&eacute;poser, ce qui facilite la personnalisation.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Suggestions de lecture                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Pour vous aider &agrave; choisir la m&eacute;thode qui vous convient le mieux, lisez notre tutoriel pour en savoir plus sur les avantages et les inconv&eacute;nients de l'utilisation d'un <strong>cr&eacute;ateur de site Web par rapport au codage.<br>\n<\/strong>.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">La maintenance d&rsquo;un site bas&eacute; sur un cr&eacute;ateur de site internet est &eacute;galement plus simple et moins sujette aux erreurs, car vous n&rsquo;avez pas besoin de mettre &agrave; jour son code source manuellement. Il vous suffit de s&eacute;lectionner les &eacute;l&eacute;ments que vous souhaitez modifier et d&rsquo;appliquer les changements directement sur un &eacute;cran. Comme le Cr&eacute;ateur de Site Internet Hostinger est inclus dans tous nos plans d&rsquo;h&eacute;bergement, vous n&rsquo;avez pas besoin d&rsquo;acheter le service s&eacute;par&eacute;ment. Il est disponible &agrave; partir de<strong> 2,99 \u20ac\/mois<\/strong> et peut &ecirc;tre mis &agrave; niveau vers des services d&rsquo;h&eacute;bergement plus performants.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/createur-de-sites-internet\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-Builder_in-text-banner-1-1-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41461\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-Builder_in-text-banner-1-1-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-Builder_in-text-banner-1-1-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-Builder_in-text-banner-1-1-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Website-Builder_in-text-banner-1-1-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p class=\"wp-block-paragraph\">Au lieu d&rsquo;utiliser des cr&eacute;ateurs de sites web, vous pouvez aussi coder un site web &agrave; partir de z&eacute;ro avec HTML. Bien que plus compliqu&eacute;s &agrave; construire, les sites web HTML sont plus efficaces en termes de ressources et plus flexibles, car vous pouvez modifier le code source quand vous le souhaitez.<\/p><p class=\"wp-block-paragraph\">Dans cet article, nous avons expliqu&eacute; comment coder un site web en utilisant HTML et CSS en sept &eacute;tapes :<\/p><ul class=\"wp-block-list\">\n<li><strong>Choisissez un &eacute;diteur HTML <\/strong>&ndash; choisissez le programme pour &eacute;crire et &eacute;diter le code de votre site web, comme VSCode.<\/li>\n\n\n\n<li><strong>Planifiez la mise en page du site <\/strong>&ndash; faites une maquette de la mise en page du site &agrave; l&rsquo;aide d&rsquo;un programme comme Adobe XD ou d&rsquo;un stylo et d&rsquo;une feuille de papier.<\/li>\n\n\n\n<li><strong>&Eacute;crivez le code HTML <\/strong>&ndash; cr&eacute;ez un fichier<strong> index.html <\/strong>et ajoutez des balises de structure de document HTML.<\/li>\n\n\n\n<li><strong>Cr&eacute;ez les &eacute;l&eacute;ments de mise en page <\/strong>&ndash; s&eacute;parez votre site web en plusieurs sections en fonction de la mise en page en ajoutant des balises au fichier HTML.<\/li>\n\n\n\n<li><strong>Ajoutez le contenu HTML <\/strong>&ndash; ajoutez le titre de la rubrique, le corps du texte et les images dans chaque section.<\/li>\n\n\n\n<li><strong>Incluez des feuilles de style CSS <\/strong>&ndash; cr&eacute;ez un fichier <strong>style.css<\/strong> et ajoutez le code CSS pour modifier la position des colonnes, l&rsquo;alignement du texte et le rembourrage des &eacute;l&eacute;ments.<\/li>\n\n\n\n<li><strong>Personnalisez votre site <\/strong>&ndash; utilisez les attributs de style CSS pour personnaliser la couleur d&rsquo;arri&egrave;re-plan du site, la taille de la police, les caract&egrave;res et d&rsquo;autres &eacute;l&eacute;ments visuels.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Apr&egrave;s avoir cr&eacute;&eacute; votre page web HTML, vous pourrez ajouter des feuilles de style CSS et JavaScript avanc&eacute;es pour am&eacute;liorer la navigation, l&rsquo;interactivit&eacute; et la conception g&eacute;n&eacute;rale.<\/p><h2 class=\"wp-block-heading\" id=\"h-faq-sur-la-creation-dune-page-web-avec-html\"><strong>FAQ sur la cr&eacute;ation d&rsquo;une page web avec HTML<\/strong><\/h2><p class=\"wp-block-paragraph\">Pour vous aider &agrave; mieux comprendre la cr&eacute;ation d&rsquo;une page ou site web avec HTML, nous allons r&eacute;pondre aux questions les plus fr&eacute;quemment pos&eacute;es &agrave; ce sujet.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1690353689972\"><h3 class=\"schema-faq-question\"><strong>Le HTML est-il suffisant pour cr&eacute;er une page web ?<\/strong><\/h3> <p class=\"schema-faq-answer\">Oui, vous pouvez cr&eacute;er un site web fonctionnel avec seulement du HTML. Cependant, il n&rsquo;affichera que du contenu statique tel que du texte, des liens, des images et des vid&eacute;os.<br><br>Utilisez le CSS pour styliser l&rsquo;&eacute;l&eacute;ment HTML, par exemple en modifiant la couleur d&rsquo;arri&egrave;re-plan et la taille de la police. Pour cr&eacute;er un site web dynamique et interactif, vous aurez &eacute;galement besoin de PHP.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1690353728798\"><h3 class=\"schema-faq-question\"><strong>Le HTML est-il adapt&eacute; &agrave; la cr&eacute;ation de sites web ?<\/strong><\/h3> <p class=\"schema-faq-answer\">Oui, il permet de cr&eacute;er un site web statique. Les sites web HTML n&eacute;cessitent moins de ressources pour &ecirc;tre charg&eacute;s et sont flexibles car vous pouvez modifier le code source.<br><br>Toutefois, le langage HTML ne convient aux sites web complexes que s&rsquo;il est associ&eacute; aux feuilles de style CSS et au langage JavaScript. Si vous n&rsquo;apprenez que le HTML, il est pr&eacute;f&eacute;rable d&rsquo;utiliser WordPress.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1690353747755\"><h3 class=\"schema-faq-question\"><strong>Combien de temps faut-il pour coder un site web en HTML ?<\/strong><\/h3> <p class=\"schema-faq-answer\">La cr&eacute;ation de sites web plus complexes prendra plus de temps. Le nombre de d&eacute;veloppeurs web travaillant sur le projet, leurs comp&eacute;tences et leurs ressources peuvent &eacute;galement influer sur le temps de construction. En g&eacute;n&eacute;ral, un d&eacute;veloppeur exp&eacute;riment&eacute; peut coder un site web simple &agrave; partir de z&eacute;ro en <a href=\"https:\/\/digital.com\/best-website-builders\/how-long-does-it-take-to-build-a-website\/\" target=\"_blank\" rel=\"noopener\"><strong>quatre &agrave; six semaines<\/strong><\/a>.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>De nos jours, la cr&eacute;ation d&rsquo;un site internet est simple et ne n&eacute;cessite pas de connaissances en mati&egrave;re de codage. Des plateformes comme le cr&eacute;ateur de site internet Hostinger offrent une interface visuelle simple et des fonctions de glisser-d&eacute;poser pour faciliter le processus de d&eacute;veloppement. Cependant, il se peut que vous souhaitiez cr&eacute;er un site [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/comment-creer-page-web-html\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":335,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cr\u00e9er une Page HTML en 7 \u00c9tapes Simples","rank_math_description":"Cr\u00e9ez votre premi\u00e8re page web en HTML \u00e9tape par \u00e9tape. Planifiez votre mise en page et apprenez \u00e0 coder avec cet article complet","rank_math_focus_keyword":"Cr\u00e9er une page HTML","footnotes":""},"categories":[5898,5847],"tags":[],"class_list":["post-25248","post","type-post","status-publish","format-standard","hentry","category-developpement-de-site-web","category-site-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/making-website-with-html\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/site-html\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-creer-page-web-html\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-website-dengan-html\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-mit-html-erstellen\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/realizzazione-di-un-sito-web-con-html\/","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/website-maken-met-html\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/making-website-with-html\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/site-html\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/25248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/335"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=25248"}],"version-history":[{"count":41,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/25248\/revisions"}],"predecessor-version":[{"id":37027,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/25248\/revisions\/37027"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=25248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=25248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=25248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}