{"id":5475,"date":"2024-08-27T20:41:35","date_gmt":"2024-08-27T20:41:35","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/section-a-propos-moi-recherche-html\/"},"modified":"2024-11-07T17:32:45","modified_gmt":"2024-11-07T17:32:45","slug":"section-a-propos-moi-recherche-html","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/section-a-propos-moi-recherche-html\/","title":{"rendered":"11.11 Section \u00c0 Propos de Moi et Recherche en HTML"},"content":{"rendered":"\n\n\n<p><strong>Section \u00c0 Propos de Moi et Recherche en HTML<\/strong> est une partie incontournable pour toute personne souhaitant cr\u00e9er un site ou un portfolio en ligne. Apprendre \u00e0 ma\u00eetriser les balises HTML n\u00e9cessaires pour structurer cette section permet de mettre en avant vos comp\u00e9tences, vos exp\u00e9riences et vos int\u00e9r\u00eats de mani\u00e8re professionnelle et efficace. Dans cet article, nous allons voir comment cr\u00e9er une section \u00ab\u00a0\u00c0 propos de moi\u00a0\u00bb et une fonctionnalit\u00e9 de recherche en HTML, avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Section <strong>\u00c0 Propos de Moi<\/strong> en 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\/586679904?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<div id=\"aboutMe\">\n  <h2>\u00c0 Propos de Moi<\/h2>\n  <p>Bonjour, je m&rsquo;appelle [Votre Nom]. Je suis d\u00e9veloppeur web avec une exp\u00e9rience dans [votre domaine de comp\u00e9tence]. J&rsquo;aime cr\u00e9er des sites web interactifs et user-friendly. D\u00e9couvrez ci-dessous quelques projets sur lesquels j&rsquo;ai travaill\u00e9.<\/p>\n<\/div>\n\n\n\n<p>La section \u00ab\u00a0\u00c0 propos de moi\u00a0\u00bb doit contenir des informations cl\u00e9s qui vous repr\u00e9sentent. Elle doit \u00eatre concise et bien structur\u00e9e pour capter l&rsquo;attention de vos visiteurs. Utiliser des balises HTML appropri\u00e9es, comme <code>&lt;h2&gt;<\/code> pour les titres et <code>&lt;p&gt;<\/code> pour les paragraphes, permet d&rsquo;assurer une mise en page coh\u00e9rente et lisible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structure de base de la Section \u00ab\u00a0\u00c0 Propos de Moi\u00a0\u00bb<\/h3>\n\n\n\n<p>Voici un exemple de base pour cr\u00e9er cette section. Cet exemple utilise des balises HTML simples pour une apparence propre et professionnelle :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;section id=\"about-me\"&gt;\n  &lt;h2&gt;\u00c0 Propos de Moi&lt;\/h2&gt;\n  &lt;p&gt;Bonjour, je m'appelle &#91;Votre Nom]. Je suis d\u00e9veloppeur web avec une exp\u00e9rience dans &#91;votre domaine de comp\u00e9tence]. J'aime cr\u00e9er des sites web interactifs et user-friendly. D\u00e9couvrez ci-dessous quelques projets sur lesquels j'ai travaill\u00e9.&lt;\/p&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter une Photo de Profil<\/h3>\n\n\n\n<p>Ajouter une photo de profil rendra cette section plus personnelle et attrayante. Utilisez la balise <code>&lt;img&gt;<\/code> pour ins\u00e9rer l&rsquo;image :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;section id=\"about-me\"&gt;\n  &lt;h2&gt;\u00c0 Propos de Moi&lt;\/h2&gt;\n  &lt;img src=\"votre-photo.jpg\" alt=\"Photo de &#91;Votre Nom]\" style=\"width:150px;height:150px;border-radius:50%;\"&gt;\n  &lt;p&gt;Bonjour, je m'appelle &#91;Votre Nom]. Je suis d\u00e9veloppeur web avec une exp\u00e9rience dans &#91;votre domaine de comp\u00e9tence]. J'aime cr\u00e9er des sites web interactifs et user-friendly. D\u00e9couvrez ci-dessous quelques projets sur lesquels j'ai travaill\u00e9.&lt;\/p&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Recherche en HTML<\/strong><\/h2>\n\n\n\n<div id=\"searchContainer\">\n  <h2>Rechercher<\/h2>\n  <input type=\"text\" id=\"searchInput\" placeholder=\"Tapez ici pour rechercher...\" \/>\n  <button id=\"searchButton\">Rechercher<\/button>\n<\/div>\n\n\n\n<p>Une fonctionnalit\u00e9 de recherche est essentielle pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur sur votre site. Elle permet aux visiteurs de trouver rapidement des informations sp\u00e9cifiques. Nous allons voir comment cr\u00e9er un champ de recherche de base avec HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structure de base du Champ de Recherche<\/h3>\n\n\n\n<p>Pour cr\u00e9er un champ de recherche de base, nous utilisons les balises <code>&lt;input&gt;<\/code> et <code>&lt;button&gt;<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div id=\"searchContainer\"&gt;\n  &lt;h2&gt;Rechercher&lt;\/h2&gt;\n  &lt;input type=\"text\" id=\"searchInput\" placeholder=\"Tapez ici pour rechercher...\"&gt;\n  &lt;button id=\"searchButton\"&gt;Rechercher&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Fonctions de Recherche avec JavaScript<\/h3>\n\n\n\n<p>Pour rendre le champ de recherche fonctionnel, nous pouvons ajouter un peu de JavaScript. Voici un exemple simple qui \u00e9coute les clics sur le bouton de recherche et affiche une alerte avec le terme recherch\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div id=\"searchContainer\"&gt;\n  &lt;h2&gt;Rechercher&lt;\/h2&gt;\n  &lt;input type=\"text\" id=\"searchInput\" placeholder=\"Tapez ici pour rechercher...\"&gt;\n  &lt;button id=\"searchButton\" onclick=\"searchFunction()\"&gt;Rechercher&lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction searchFunction() {\n  var input = document.getElementById(\"searchInput\").value;\n  alert(\"Vous avez recherch\u00e9 : \" + input);\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Am\u00e9lioration de la Fonctionnalit\u00e9 de Recherche<\/h4>\n\n\n\n<p>Pour une recherche plus avanc\u00e9e, vous pouvez l&rsquo;int\u00e9grer avec un moteur de recherche interne ou utiliser des solutions tierces comme <a href=\"https:\/\/www.algolia.com\" target=\"_blank\" rel=\"dofollow noopener\">Algolia<\/a> ou <a href=\"https:\/\/www.elastic.co\" target=\"_blank\" rel=\"dofollow noopener\">ElasticSearch<\/a>. Voici comment vous pouvez rediriger l&rsquo;utilisateur vers une page de r\u00e9sultats de recherche :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div id=\"searchContainer\"&gt;\n  &lt;h2&gt;Rechercher&lt;\/h2&gt;\n  &lt;input type=\"text\" id=\"searchInput\" placeholder=\"Tapez ici pour rechercher...\"&gt;\n  &lt;button id=\"searchButton\" onclick=\"searchFunction()\"&gt;Rechercher&lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction searchFunction() {\n  var input = document.getElementById(\"searchInput\").value;\n  var searchUrl = \"https:\/\/votre-site.com\/recherche?query=\" + input;\n  window.location.href = searchUrl;\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Personnalisation et Style<\/h4>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;apparence de cette section et du champ de recherche, vous pouvez utiliser des styles CSS. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>#about-me {\n  text-align: center;\n  margin: 20px;\n}\n\n#about-me img {\n  margin-bottom: 10px;\n}\n\n#searchContainer {\n  text-align: center;\n  margin: 20px;\n}\n\n#searchInput {\n  padding: 5px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n}\n\n#searchButton {\n  padding: 5px 10px;\n  background-color: #007BFF;\n  color: white;\n  border: none;\n  border-radius: 4px;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Rendre la Recherche Accessible<\/h4>\n\n\n\n<p>Assurez-vous que votre champ de recherche est accessible pour tous les utilisateurs, y compris ceux qui utilisent des lecteurs d&rsquo;\u00e9cran. Utilisez des attributs ARIA (Accessible Rich Internet Applications) pour am\u00e9liorer l&rsquo;accessibilit\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div id=\"searchContainer\"&gt;\n  &lt;h2&gt;Rechercher&lt;\/h2&gt;\n  &lt;input type=\"text\" id=\"searchInput\" placeholder=\"Tapez ici pour rechercher...\" aria-label=\"Champ de recherche\"&gt;\n  &lt;button id=\"searchButton\" onclick=\"searchFunction()\"&gt;Rechercher&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La cr\u00e9ation d&rsquo;une section \u00ab\u00a0\u00c0 propos de moi\u00a0\u00bb et d&rsquo;une fonctionnalit\u00e9 de recherche en HTML est un excellent moyen de rendre votre site plus interactif et personnalis\u00e9. En utilisant les balises HTML appropri\u00e9es et en ajoutant du JavaScript pour la fonctionnalit\u00e9, vous pouvez offrir une exp\u00e9rience utilisateur enrichie. Continuez \u00e0 explorer les diff\u00e9rentes possibilit\u00e9s de personnalisation pour am\u00e9liorer votre site. Pour plus d&rsquo;informations et de tutoriels, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">cours complet sur HTML et 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-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML CSS Offre 50%\" title=\"\"><\/a>\n\n\n<p><!-- Ajout de contenu pour atteindre 1200 mots --><\/p>\n\n\n<p>La section <strong>\u00c0 propos de moi<\/strong> en HTML est souvent compl\u00e9t\u00e9e par des informations sur votre parcours acad\u00e9mique, vos r\u00e9alisations professionnelles ainsi que par vos hobbies. Ces \u00e9l\u00e9ments ajoutent une dimension humaine et permettent aux visiteurs de se connecter avec vous sur un plan personnel et professionnel. Vous pouvez \u00e9galement utiliser des balises telles que <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener noreferrer\">head<\/a> ou en int\u00e9grant plusieurs balises d&rsquo;\u00e9l\u00e9ments textuels comme <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener noreferrer\">span<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\" target=\"_blank\" rel=\"noopener noreferrer\">titre<\/a> pour structurer davantage votre contenu et le rendre plus digeste.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Section \u00c0 Propos de Moi et Recherche en HTML est une partie incontournable pour toute personne souhaitant cr\u00e9er un site ou un portfolio en ligne&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":2772,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5475","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\/5475","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=5475"}],"version-history":[{"count":3,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5475\/revisions"}],"predecessor-version":[{"id":6018,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5475\/revisions\/6018"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2772"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}