{"id":5457,"date":"2024-08-27T20:05:18","date_gmt":"2024-08-27T20:05:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/maquette-site-html-comment-faire\/"},"modified":"2024-12-05T16:36:28","modified_gmt":"2024-12-05T16:36:28","slug":"maquette-site-html-comment-faire","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/maquette-site-html-comment-faire\/","title":{"rendered":"11.2 Maquette du Site en HTML : Comment Faire"},"content":{"rendered":"\n<p><strong>Maquette du Site en HTML<\/strong> est une \u00e9tape essentielle dans la cr\u00e9ation de sites web. Apprendre \u00e0 cr\u00e9er des maquettes en HTML vous permet de structurer et de visualiser vos id\u00e9es avant de passer \u00e0 la phase de d\u00e9veloppement. Dans cet article, nous allons explorer comment concevoir une maquette de site web en HTML \u00e0 travers des exemples d\u00e9taill\u00e9s et des explications claires.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Maquette du Site en 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\/586679226?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) {\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(); \n    }\n});\n<\/script>\n\n\n\n<p>La cr\u00e9ation d&rsquo;une maquette en HTML implique la mise en place de la structure de votre site web en utilisant des balises HTML. Ceci est crucial car une structure bien pens\u00e9e facilite la gestion et l&rsquo;\u00e9volution du site. Voici comment proc\u00e9der.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er la Structure de Base en HTML<\/h3>\n\n\n\n<p>Pour commencer, nous devons cr\u00e9er la structure de base de notre document HTML. Cela inclut les balises <code>&lt;!DOCTYPE html&gt;<\/code>, <code>&lt;html&gt;<\/code>, <code>&lt;head&gt;<\/code> et <code>&lt;body&gt;<\/code>.<\/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;Maquette du Site&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;!-- Contenu de la maquette ici --&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter le Contenu et Structurer l&rsquo;Interface<\/h3>\n\n\n\n<p>Ensuite, nous ajoutons les \u00e9l\u00e9ments de contenu tels que les en-t\u00eates, les paragraphes, les sections, etc. Utilisons quelques balises HTML essentielles pour structurer notre maquette. Pour en savoir plus sur les diff\u00e9rents \u00e9l\u00e9ments textuels, consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener\">Guide des \u00e9l\u00e9ments textuels en HTML<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;header&gt;\n    &lt;h1&gt;Bienvenue sur Mon Site&lt;\/h1&gt;\n    &lt;nav&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;a href=\"#home\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=\"#about\"&gt;\u00c0 propos&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/nav&gt;\n&lt;\/header&gt;\n\n&lt;main&gt;\n    &lt;section id=\"home\"&gt;\n        &lt;h2&gt;Accueil&lt;\/h2&gt;\n        &lt;p&gt;Bienvenue sur la page d'accueil. D\u00e9couvrez nos services et offres.&lt;\/p&gt;\n    &lt;\/section&gt;\n\n    &lt;section id=\"about\"&gt;\n        &lt;h2&gt;\u00c0 propos&lt;\/h2&gt;\n        &lt;p&gt;Apprenez-en plus sur notre entreprise et notre mission.&lt;\/p&gt;\n    &lt;\/section&gt;\n\n    &lt;section id=\"contact\"&gt;\n        &lt;h2&gt;Contact&lt;\/h2&gt;\n        &lt;p&gt;Contactez-nous via ce formulaire.&lt;\/p&gt;\n        &lt;form&gt;\n            &lt;label for=\"name\"&gt;Nom:&lt;\/label&gt;\n            &lt;input type=\"text\" id=\"name\" name=\"name\" required&gt;\n            &lt;label for=\"email\"&gt;Email:&lt;\/label&gt;\n            &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\n            &lt;label for=\"message\"&gt;Message:&lt;\/label&gt;\n            &lt;textarea id=\"message\" name=\"message\" required&gt;&lt;\/textarea&gt;\n            &lt;button type=\"submit\"&gt;Envoyer&lt;\/button&gt;\n        &lt;\/form&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;\n\n&lt;footer&gt;\n    &lt;p&gt;\u00a9 2023, Tous droits r\u00e9serv\u00e9s.&lt;\/p&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styler la Maquette avec CSS<\/h3>\n\n\n\n<p>Une maquette bien d\u00e9finie prend vie avec le style ajout\u00e9 par du CSS. Nous ajoutons maintenant quelques styles de base pour donner une meilleure apparence \u00e0 la maquette. Pour une introduction plus d\u00e9taill\u00e9e aux bases du CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\" target=\"_blank\" rel=\"noopener\">Guide des bases du CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>&lt;style&gt;\n    body {\n        font-family: Arial, sans-serif;\n        line-height: 1.6;\n        margin: 0;\n        padding: 0;\n    }\n    header {\n        background: #333;\n        color: #fff;\n        padding: 1em 0;\n    }\n    nav ul {\n        list-style: none;\n        padding: 0;\n    }\n    nav ul li {\n        display: inline;\n        margin-right: 10px;\n    }\n    nav ul li a {\n        color: #fff;\n        text-decoration: none;\n    }\n    main {\n        padding: 2em;\n        background: #f4f4f4;\n    }\n    section {\n        margin-bottom: 2em;\n    }\n    footer {\n        text-align: center;\n        padding: 1em 0;\n        background: #333;\n        color: #fff;\n    }\n    form {\n        background: #fff;\n        padding: 1em;\n        border: 1px solid #ddd;\n    }\n    form label, form input, form textarea, form button {\n        display: block;\n        width: 100%;\n        margin-bottom: 10px;\n    }\n    form input, form textarea {\n        padding: 0.5em;\n        border: 1px solid #ddd;\n    }\n    form button {\n        background: #333;\n        color: #fff;\n        border: none;\n        padding: 1em;\n    }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Interactions avec JavaScript<\/h3>\n\n\n\n<p>Une fois la structure et le style en place, nous pouvons ajouter des interactions \u00e0 notre maquette \u00e0 l&rsquo;aide de JavaScript. Par exemple, nous pouvons ajouter une alerte lorsque l&rsquo;utilisateur soumet le formulaire de contact. Pour en savoir plus sur la mani\u00e8re de cr\u00e9er votre premi\u00e8re page HTML avec des interactions, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">Tutoriel facile pour cr\u00e9er une page HTML<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>&lt;script&gt;\n    document.addEventListener('DOMContentLoaded', (event) =&gt; {\n        const form = document.querySelector('form');\n        form.addEventListener('submit', function(event) {\n            event.preventDefault();\n            alert('Merci de nous avoir contact\u00e9!');\n        });\n    });\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Astuces et Bonnes Pratiques pour vos Maquettes en HTML<\/h3>\n\n\n\n<p>Voici quelques astuces pour am\u00e9liorer encore plus vos maquettes HTML :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez des balises s\u00e9mantiques pour am\u00e9liorer la lisibilit\u00e9 et l&rsquo;accessibilit\u00e9 de votre code. Pour plus de d\u00e9tails, voir <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener\">Guide complet des \u00e9l\u00e9ments textuels HTML<\/a>.<\/li>\n\n\n\n<li>Gardez votre code propre et bien comment\u00e9.<\/li>\n\n\n\n<li>Testez la r\u00e9activit\u00e9 de votre maquette sur diff\u00e9rents appareils et r\u00e9solutions. Apprenez \u00e0 cr\u00e9er des <a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-site-html-techniques\" target=\"_blank\" rel=\"noopener\">layouts responsive avec CSS<\/a>.<\/li>\n\n\n\n<li>Utilisez des conventions de nommage coh\u00e9rentes pour vos classes CSS.<\/li>\n\n\n\n<li>V\u00e9rifiez et validez votre code HTML en utilisant des outils comme <a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener\">W3C Validator<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;\u00e9laboration de <strong>maquettes de sites en HTML<\/strong> est une comp\u00e9tence pr\u00e9cieuse qui permet de structurer les futures pages web efficacement. En pratiquant les \u00e9tapes d\u00e9taill\u00e9es dans cet article, incluant la cr\u00e9ation de la structure HTML, le style avec CSS, et les interactions en JavaScript, vous serez bien \u00e9quip\u00e9 pour cr\u00e9er des maquettes attrayantes et fonctionnelles. Pour plus de tutoriels sur HTML et CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">cours complet de HTML et CSS<\/a>. Bonne conception de maquettes HTML !<\/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=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n<p><!-- Add Internal and External Links for SEO Improvement --><\/p>\n<p>Pour les d\u00e9veloppeurs souhaitant aller plus loin dans la cr\u00e9ation de maquettes de site, il est essentiel de comprendre le <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">r\u00f4le des balises <code>&lt;head&gt;<\/code><\/a> dans votre document HTML ainsi que la mani\u00e8re d&rsquo;utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments de titre<\/a>. Pour une mise en page plus avanc\u00e9e, explorez notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/creation-layout-simple-medias-queries\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation de layouts avec les media queries<\/a>. Apprenez \u00e9galement \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-pseudo-classes-css-guide\" target=\"_blank\" rel=\"noopener\">utiliser les pseudo-classes en CSS<\/a> pour ajouter des interactions dynamiques.<\/p>\n<p><!-- External Links--><\/p>\n<p>\u00a0<\/p>","protected":false},"excerpt":{"rendered":"<p>Maquette du Site en HTML est une \u00e9tape essentielle dans la cr\u00e9ation de sites web. Apprendre \u00e0 cr\u00e9er des maquettes en HTML vous permet de&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2747,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5457","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\/5457","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5457"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5457\/revisions"}],"predecessor-version":[{"id":6080,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5457\/revisions\/6080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2747"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}