{"id":5309,"date":"2024-08-27T15:12:53","date_gmt":"2024-08-27T15:12:53","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\/"},"modified":"2024-11-07T17:47:41","modified_gmt":"2024-11-07T17:47:41","slug":"bases-langage-html-apprendre-fondamentaux","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\/","title":{"rendered":"1.2 Bases du Langage HTML : Apprendre les Fondamentaux"},"content":{"rendered":"\n\n\n<p><strong>Bases du Langage HTML<\/strong> : Ma\u00eetriser les fondamentaux du langage HTML est primordial pour tout d\u00e9veloppeur web d\u00e9butant. En comprenant comment structurer une page web avec HTML, vous poserez les bases solides pour la cr\u00e9ation de sites et applications web. Suivez ce tutoriel pour apprendre les bases d&rsquo;HTML \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Bases du Langage HTML<\/strong><\/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\/586253237?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 c\u0153ur de la structure de tout site web. Il permet de structurer vos contenus en \u00e9l\u00e9ments logiques tels que les paragraphes, les titres, les listes, les images et les liens. Commen\u00e7ons par explorer les \u00e9l\u00e9ments de base d&rsquo;une page HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Structure de Base en HTML<\/h3>\n\n\n\n<p>Voici comment cr\u00e9er une structure de base d&rsquo;une page HTML. Chaque document HTML commence par une d\u00e9claration <code>&lt;!DOCTYPE html&gt;<\/code>, suivie de l&rsquo;\u00e9l\u00e9ment <code>&lt;html&gt;<\/code> qui encapsule l&rsquo;ensemble du contenu :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&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&lt;\/h1&gt;\n    &lt;p&gt;Ceci est mon premier paragraphe.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Titres et des Paragraphes en HTML<\/h3>\n\n\n\n<p>Les titres sont importants pour donner une structure hi\u00e9rarchique \u00e0 votre contenu. HTML propose six niveaux de titres, de <code>&lt;h1&gt;<\/code> \u00e0 <code>&lt;h6&gt;<\/code>. Les paragraphes sont cr\u00e9\u00e9s avec la balise <code>&lt;p&gt;<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;h1&gt;Titre Principal&lt;\/h1&gt;\n&lt;p&gt;Ceci est un paragraphe sous le titre principal.&lt;\/p&gt;\n\n&lt;h2&gt;Sous-titre Niveau 1&lt;\/h2&gt;\n&lt;p&gt;Ceci est un paragraphe sous le sous-titre niveau 1.&lt;\/p&gt;\n\n&lt;h3&gt;Sous-titre Niveau 2&lt;\/h3&gt;\n&lt;p&gt;Ceci est un paragraphe sous le sous-titre niveau 2.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Listes en HTML<\/h3>\n\n\n\n<p>Les listes permettent de structurer les contenus de mani\u00e8re ordonn\u00e9e ou non ordonn\u00e9e. Les listes non ordonn\u00e9es utilisent les balises <code>&lt;ul&gt;<\/code> et <code>&lt;li&gt;<\/code>, et les listes ordonn\u00e9es utilisent les balises <code>&lt;ol&gt;<\/code> et <code>&lt;li&gt;<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;h2&gt;Liste non ordonn\u00e9e&lt;\/h2&gt;\n&lt;ul&gt;\n    &lt;li&gt;\u00c9l\u00e9ment de liste 1&lt;\/li&gt;\n    &lt;li&gt;\u00c9l\u00e9ment de liste 2&lt;\/li&gt;\n    &lt;li&gt;\u00c9l\u00e9ment de liste 3&lt;\/li&gt;\n&lt;\/ul&gt;\n\n&lt;h2&gt;Liste ordonn\u00e9e&lt;\/h2&gt;\n&lt;ol&gt;\n    &lt;li&gt;\u00c9l\u00e9ment de liste 1&lt;\/li&gt;\n    &lt;li&gt;\u00c9l\u00e9ment de liste 2&lt;\/li&gt;\n    &lt;li&gt;\u00c9l\u00e9ment de liste 3&lt;\/li&gt;\n&lt;\/ol&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Images en HTML<\/h3>\n\n\n\n<p>Les images peuvent \u00eatre ajout\u00e9es \u00e0 une page HTML avec la balise <code>&lt;img&gt;<\/code>. Assurez-vous de toujours utiliser l&rsquo;attribut <code>alt<\/code> pour d\u00e9crire l&rsquo;image, ce qui est important pour l&rsquo;accessibilit\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;h2&gt;Voici une Image&lt;\/h2&gt;\n&lt;img src=\"https:\/\/via.placeholder.com\/150\" alt=\"Image de Exemple\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Liens en HTML<\/h3>\n\n\n\n<p>Les liens hypertextes sont cr\u00e9\u00e9s avec la balise <code>&lt;a&gt;<\/code>. L&rsquo;attribut <code>href<\/code> permet de sp\u00e9cifier l&rsquo;URL du lien :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;h2&gt;Lien vers une autre page&lt;\/h2&gt;\n&lt;p&gt;Pour en savoir plus, visitez &lt;a href=\"https:\/\/www.example.com\"&gt;ce lien&lt;\/a&gt;.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Complet d&rsquo;une Page Web Simple<\/h3>\n\n\n\n<p>Pour r\u00e9capituler ce que nous avons appris, voici un exemple complet d&rsquo;une page HTML int\u00e9grant tous les \u00e9l\u00e9ments de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&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;Exemple de Page HTML&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Bienvenue sur Ma Premi\u00e8re Page&lt;\/h1&gt;\n    &lt;p&gt;Ceci est mon premier paragraphe.&lt;\/p&gt;\n\n    &lt;h2&gt;Liste non ordonn\u00e9e&lt;\/h2&gt;\n    &lt;ul&gt;\n        &lt;li&gt;\u00c9l\u00e9ment de liste 1&lt;\/li&gt;\n        &lt;li&gt;\u00c9l\u00e9ment de liste 2&lt;\/li&gt;\n        &lt;li&gt;\u00c9l\u00e9ment de liste 3&lt;\/li&gt;\n    &lt;\/ul&gt;\n\n    &lt;h2&gt;Liste ordonn\u00e9e&lt;\/h2&gt;\n    &lt;ol&gt;\n        &lt;li&gt;\u00c9l\u00e9ment de liste 1&lt;\/li&gt;\n        &lt;li&gt;\u00c9l\u00e9ment de liste 2&lt;\/li&gt;\n        &lt;li&gt;\u00c9l\u00e9ment de liste 3&lt;\/li&gt;\n    &lt;\/ol&gt;\n\n    &lt;h2&gt;Voici une Image&lt;\/h2&gt;\n    &lt;img src=\"https:\/\/via.placeholder.com\/150\" alt=\"Image de Exemple\"&gt;\n\n    &lt;h2&gt;Lien vers une autre page&lt;\/h2&gt;\n    &lt;p&gt;Pour en savoir plus, visitez &lt;a href=\"https:\/\/www.example.com\"&gt;ce lien&lt;\/a&gt;.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Apprendre les Avanc\u00e9es du Langage HTML<\/h2>\n\n\n\n<p><p>Apr\u00e8s avoir ma\u00eetris\u00e9 les bases du HTML, il est crucial d&rsquo;apprendre les avanc\u00e9es du langage. Parmi les aspects avanc\u00e9s, nous avons la gestion des cookies, la manipulation du DOM avec JavaScript, et les bonnes pratiques pour optimiser le r\u00e9f\u00e9rencement naturel. Pour aller plus loin, voici quelques ressources internes que vous pouvez consulter :<\/p>\n<ul>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/base-langage-html-apprendre-fondamentaux\">Les Bases du Langage HTML<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">En apprendre davantage sur les \u00e9l\u00e9ments HTML Head<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">Cr\u00e9er sa Premi\u00e8re Page HTML : Tutoriel Facile<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-site-html-techniques\">Techniques de Responsive Design avec HTML et CSS<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-inspecteur-html-deboguer\">Utiliser l&rsquo;Inspecteur HTML pour D\u00e9boguer<\/a><\/li>\n<\/ul><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML et CSS : Les Fondamentaux<\/h2>\n\n\n\n<p>Pour ceux qui souhaitent se perfectionner en CSS, nous avons \u00e9galement une s\u00e9rie de guides d\u00e9taill\u00e9s sur le <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">Syntaxe CSS : Les Bases \u00e0 Conna\u00eetre<\/a>, ainsi que des articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\">toutes les propri\u00e9t\u00e9s CSS pour le texte<\/a>. Ma\u00eetriser les fondamentaux de CSS est essentiel pour cr\u00e9er des disagns attrayants et responsives.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En suivant ce guide, vous avez appris les bases du langage HTML, comprenant la structure de base d&rsquo;une page, les titres, les paragraphes, les listes, les images et les liens. La ma\u00eetrise de ces \u00e9l\u00e9ments fondamentaux est essentielle pour progresser dans le d\u00e9veloppement web. Continuez \u00e0 pratiquer et \u00e0 explorer davantage pour renforcer vos comp\u00e9tences HTML. Pour des tutoriels plus avanc\u00e9s, consultez notre article sur <a href=\"https:\/\/www.example.com\" target=\"_blank\" rel=\"noopener\">les techniques HTML avanc\u00e9es<\/a> et notre <a href=\"https:\/\/www.example.com\" target=\"_blank\" rel=\"noopener\">guide complet sur le CSS<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%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=\"Cours HTML et CSS\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Bases du Langage HTML : Ma\u00eetriser les fondamentaux du langage HTML est primordial pour tout d\u00e9veloppeur web d\u00e9butant. En comprenant comment structurer une page web&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2706,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5309","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\/5309","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=5309"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5309\/revisions"}],"predecessor-version":[{"id":6020,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5309\/revisions\/6020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2706"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}