{"id":5311,"date":"2024-08-27T15:18:05","date_gmt":"2024-08-27T15:18:05","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\/"},"modified":"2024-11-08T09:38:20","modified_gmt":"2024-11-08T09:38:20","slug":"creer-premiere-page-html-tutoriel-facile","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\/","title":{"rendered":"1.3 Cr\u00e9er votre Premi\u00e8re Page HTML : Tutoriel Facile"},"content":{"rendered":"<p><br \/><br \/><br \/><br \/><br \/><br \/><br \/><\/p>\n\n\n<p><strong>Cr\u00e9er votre Premi\u00e8re Page HTML<\/strong> peut sembler intimidant au premier abord, mais avec ce tutoriel facile et \u00e9tape par \u00e9tape, vous allez rapidement appr\u00e9hender les bases n\u00e9cessaires pour construire une structure HTML simple et efficace. L\u2019objectif est de vous guider tout au long du processus, de la cr\u00e9ation du fichier HTML \u00e0 l\u2019ajout d\u2019\u00e9l\u00e9ments essentiels comme les titres, les paragraphes, et les images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cr\u00e9er votre Premi\u00e8re Page HTML : Introduction \u00e0 la Cr\u00e9ation d&rsquo;une Page HTML<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586253344?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>HTML, ou HyperText Markup Language, est le langage standard utilis\u00e9 pour cr\u00e9er des pages web. Chaque page HTML est constitu\u00e9e d&rsquo;\u00e9l\u00e9ments HTML imbriqu\u00e9s qui structurent le contenu et fournissent des informations sur la mani\u00e8re dont ce contenu doit \u00eatre affich\u00e9 dans un navigateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00e9paration : Cr\u00e9er le Fichier HTML<\/h3>\n\n\n\n<p>Pour d\u00e9marrer, vous aurez besoin d&rsquo;un \u00e9diteur de texte (comme Visual Studio Code, Sublime Text, ou Notepad++) et de votre navigateur web. Suivez ces \u00e9tapes pour cr\u00e9er votre premier fichier HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Ma Premi\u00e8re Page HTML&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bienvenue sur ma Premi\u00e8re Page HTML&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un paragraphe d'exemple.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>1. Ouvrez votre \u00e9diteur de texte.\n2. Cr\u00e9ez un nouveau fichier et nommez-le <code>index.html<\/code>.\n3. Copiez et collez le code ci-dessus dans votre fichier <code>index.html<\/code>.\n4. Enregistrez le fichier.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre la Structure de Base du HTML<\/h3>\n\n\n\n<p>Le code ci-dessus constitue la structure de base d&rsquo;une page HTML. Explorons chacun des \u00e9l\u00e9ments cl\u00e9s : <\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Ma Premi\u00e8re Page HTML&lt;\/title&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<p>&#8211; <code>&lt;!DOCTYPE html&gt;<\/code> informe le navigateur du type de document et de la version HTML utilis\u00e9e.\n&#8211; <code>&lt;html lang=\"fr\"&gt;<\/code> ouvre l&rsquo;\u00e9l\u00e9ment html qui encapsule tout le contenu de la page, avec l&rsquo;attribut <code>lang<\/code> sp\u00e9cifiant la langue.\n&#8211; <code>&lt;head&gt;<\/code> contient les balises m\u00e9ta qui fournissent des informations sur la page comme le jeu de caract\u00e8res (UTF-8) et le viewport pour le design responsive.\n&#8211; <code>&lt;title&gt;<\/code> d\u00e9fini le titre qui appara\u00eetra dans l&rsquo;onglet du navigateur.\n<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter du Contenu \u00e0 votre Page HTML<\/h3>\n\n\n\n<p>Le contenu visible de votre page HTML se trouve dans l&rsquo;\u00e9l\u00e9ment <code>&lt;body&gt;<\/code>. Ajoutons quelques \u00e9l\u00e9ments suppl\u00e9mentaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;body&gt;\n    &lt;h1&gt;Bienvenue sur ma Premi\u00e8re Page HTML&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un paragraphe d'exemple.&lt;\/p&gt;\n    &lt;h2&gt;Section d'Introduction&lt;\/h2&gt;\n    &lt;p&gt;Ceci est une section introduisant le site web.&lt;\/p&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>&#8211; <code>&lt;h1&gt;<\/code> \u00e0 <code>&lt;h6&gt;<\/code> sont utilis\u00e9s pour les titres, <code>&lt;h1&gt;<\/code> \u00e9tant le plus important.\n&#8211; <code>&lt;p&gt;<\/code> est utilis\u00e9 pour d\u00e9finir des paragraphes. Il est courant de voir plusieurs balises <code>&lt;p&gt;<\/code> pour structurer le texte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une Image<\/h3>\n\n\n\n<p>Pour rendre votre page plus attrayante, vous pouvez y ajouter une image en utilisant la balise <code>&lt;img&gt;<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;body&gt;\n    &lt;h1&gt;Bienvenue sur ma Premi\u00e8re Page HTML&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un paragraphe d'exemple.&lt;\/p&gt;\n    &lt;h2&gt;Section d'Introduction&lt;\/h2&gt;\n    &lt;p&gt;Ceci est une section introduisant le site web.&lt;\/p&gt;\n    &lt;img src=\"chemin\/vers\/image.jpg\" alt=\"Description de l'image\"&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>&#8211; <code>src<\/code> sp\u00e9cifie le chemin de l\u2019image.\n&#8211; <code>alt<\/code> fournit une description alternative de l\u2019image pour les lecteurs d&rsquo;\u00e9cran et si l\u2019image ne peut pas \u00eatre charg\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Liens Hypertextes<\/h3>\n\n\n\n<p>Les liens hypertextes sont essentiels sur le web pour naviguer entre les pages. Utilisez la balise <code>&lt;a&gt;<\/code> pour cr\u00e9er un lien :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;body&gt;\n    &lt;h1&gt;Bienvenue sur ma Premi\u00e8re Page HTML&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un paragraphe d'exemple.&lt;\/p&gt;\n    &lt;h2&gt;Section d'Introduction&lt;\/h2&gt;\n    &lt;p&gt;Ceci est une section introduisant le site web.&lt;\/p&gt;\n    &lt;img src=\"chemin\/vers\/image.jpg\" alt=\"Description de l'image\"&gt;\n    &lt;p&gt;Visitez <a href=\"https:\/\/wikiform.fr\/\">Wikiform<\/a> pour plus de tutoriels.<a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er votre premi\u00e8re page HTML <\/a>.<\/p>\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<p>Le texte entre les balises <code>&lt;a&gt;<\/code> et <code>&lt;\/a&gt;<\/code> sera cliquable et redirigera vers l&rsquo;adresse sp\u00e9cifi\u00e9e dans l&rsquo;attribut <code>href<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cr\u00e9er votre Premi\u00e8re Page HTML : Conclusion<\/h2>\n\n\n\n<p>Vous avez maintenant appris \u00e0 cr\u00e9er une base de page HTML avec des \u00e9l\u00e9ments essentiels ! En combinant des titres, des paragraphes, des images et des liens, vous pouvez structurer efficacement le contenu de votre page web. Continuez \u00e0 explorer les fonctionnalit\u00e9s HTML pour am\u00e9liorer et enrichir vos cr\u00e9ations. \n\nPour plus d&rsquo;informations sur les bases du HTML, vous pouvez consulter nos tutoriels sur les <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">fondamentaux du langage HTML<\/a>, les <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments de la balise head<\/a>, les <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments textuels en HTML<\/a>, et comment <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\" target=\"_blank\" rel=\"noopener\"> cr\u00e9er des formulaires en HTML<\/a>.\n\nPour plus de tutoriels sur HTML, consultez <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d\u00e9butant-\u00e0-expert\/141\" target=\"_blank\" rel=\"noopener\">notre cours complet sur HTML5 et CSS3<\/a>. Bon codage !<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d\u00e9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML\/CSS Offre 50%\" title=\"\"><\/a>\n\n\n<p><br \/><br \/><br \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er votre Premi\u00e8re Page HTML peut sembler intimidant au premier abord, mais avec ce tutoriel facile et \u00e9tape par \u00e9tape, vous allez rapidement appr\u00e9hender les&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5311"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5311\/revisions"}],"predecessor-version":[{"id":6022,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5311\/revisions\/6022"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2720"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}