HTML : Comment convertir du code en balises HTML pour le web ?

Créer des pages web attrayantes et fonctionnelles repose sur une compétence clé : la maîtrise du HTML. Ce langage de balisage permet de structurer et de présenter le contenu de manière cohérente et esthétique sur internet. Pour ceux qui débutent, le défi réside souvent dans la conversion d’idées ou de contenus bruts en code HTML.

Comprendre les balises HTML essentielles, telles que `

` pour les titres, `

` pour les paragraphes, ou encore `` pour les liens, est fondamental. L’intégration de ces balises dans le code permet de transformer un simple texte en une page web interactive et visuellement agréable.

Qu’est-ce que le HTML et pourquoi l’utiliser ?

Le HTML, ou HyperText Markup Language, est le langage de balisage standard pour créer des pages web. Il permet de structurer et de présenter le contenu de manière organisée. Utilisé en combinaison avec le CSS (Cascading Style Sheets), qui définit le style des documents HTML, et JavaScript, qui apporte de l’interactivité et du dynamisme, le HTML devient un outil puissant pour développer des sites web riches et interactifs.

Les éléments de base du HTML

Le HTML utilise des balises pour délimiter différents types de contenu. Voici quelques-unes des balises les plus courantes :

  • <h1> à <h6> : pour les titres et sous-titres
  • <p> : pour les paragraphes
  • <a> : pour les liens hypertextes
  • <div> : pour les divisions de page, souvent utilisées avec CSS

Pourquoi utiliser le HTML ?

Le HTML est essentiel pour plusieurs raisons :

  • Il est universellement reconnu par tous les navigateurs web.
  • Il permet une structuration claire et logique du contenu.
  • Il est la base sur laquelle s’appuient CSS et JavaScript pour créer des sites web modernes.

Maîtriser le HTML est indispensable pour tout développeur web cherchant à créer des pages fonctionnelles et attrayantes.

Les bases du balisage HTML

Les balises essentielles

Trouvez les balises HTML qui constituent la structure de base de tout document web. Voici les balises incontournables :

  • <html> : encadre tout le contenu du document
  • <head> : contient les méta-informations, le titre et les liens vers les feuilles de style
  • <body> : inclut tout le contenu visible de la page

Ces trois éléments sont la fondation de tout fichier HTML. Le contenu du head est essentiel pour le référencement et l’intégration de ressources externes, tandis que le body contient les éléments visibles par l’utilisateur.

Les balises de mise en forme

Pour structurer le contenu, utilisez des balises spécifiques :

  • <h1> à <h6> : pour les titres et sous-titres, du plus grand au plus petit
  • <p> : pour les paragraphes de texte
  • <a> : pour les liens hypertextes, avec l’attribut href pour spécifier l’URL
  • <img> : pour insérer des images, avec les attributs src pour la source et alt pour le texte alternatif

Les balises de structure

Pour organiser votre page, les balises <div> et <span> sont souvent utilisées :

  • <div> : crée des sections ou des conteneurs pour regrouper d’autres éléments
  • <span> : applique des styles à une partie spécifique du texte sans créer de nouvelle ligne

Ces balises permettent de structurer efficacement votre contenu, facilitant son style et son organisation avec CSS.

Outils pour convertir du texte en HTML

Docs to Markdown : un allié précieux

Pour transformer efficacement votre texte en HTML, le module complémentaire Docs to Markdown se révèle être un outil incontournable. Compatible avec Google Docs, il permet de convertir des documents en balises HTML sans effort. Ce générateur de balises HTML gratuit est apprécié pour sa facilité de prise en main et sa rapidité.

  • Gratuit : aucune dépense nécessaire pour l’utiliser.
  • Simple : interface intuitive.
  • Propre : ne produit pas de code polluant.

Notez quelques limitations : il n’applique pas automatiquement la balise et ne ferme pas les balises de puces dans une liste. </p> <h3 id="dautres-outils-pratiques" class="rb-heading-index-9">D’autres outils pratiques</h3> <p>D’autres solutions existent pour convertir du texte en HTML :</p> <ul> <li><strong>HTML Editor</strong> : un éditeur en ligne simple et efficace pour générer du code HTML.</li> <li><strong>WYSIWYG Editors</strong> : permettent de voir le rendu en temps réel, comme <strong>TinyMCE</strong> ou <strong>CKEditor</strong>.</li> <li><strong>MarkdownPad</strong> : convertit le texte en HTML à partir de la syntaxe Markdown.</li> </ul> <p>Ces outils diversifiés offrent une flexibilité selon le niveau de compétence et les besoins spécifiques. Pour les développeurs expérimentés, les éditeurs de texte comme <strong>Visual Studio Code</strong> ou <strong>Sublime Text</strong> permettent une maîtrise totale du code. </p> <h3 id="integration-et-compatibilite" class="rb-heading-index-10">Intégration et compatibilité</h3> <p>Le choix de l’outil dépendra de l’environnement de travail et des préférences personnelles. Pour une intégration fluide avec des CMS comme <strong>WordPress</strong>, privilégiez des outils qui exportent un code compatible et optimisé.</p> <p><img class='aligncenter' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%200'%3E%3C/svg%3E" width='800px' alt='code html' data-lazy-src="https://www.geekfinity.fr/wp-content/uploads/generated_10632191854202103916.png"><noscript><img class='aligncenter' src='https://www.geekfinity.fr/wp-content/uploads/generated_10632191854202103916.png' width='800px' alt='code html'></noscript></p> <h2 id="etapes-pour-integrer-du-code-html-sur-une-page-web" class="rb-heading-index-11">Étapes pour intégrer du code HTML sur une page web</h2> <h3 id="preparation-du-code-html" class="rb-heading-index-12">Préparation du code HTML</h3> <p>Avant d’intégrer du code HTML sur une page web, assurez-vous d’avoir un éditeur de texte adapté. Visual Studio Code, Sublime Text ou Atom sont des choix populaires. Ces éditeurs offrent une coloration syntaxique et des plugins qui facilitent le développement. </p> <h3 id="insertion-du-code-dans-un-cms-ou-un-createur-de-site" class="rb-heading-index-13">Insertion du code dans un CMS ou un créateur de site</h3> <p>Pour les utilisateurs de CMS comme <strong>WordPress</strong>, l’intégration se fait directement depuis l’éditeur de texte du CMS. Suivez ces étapes :</p> <ul> <li>Accédez à l’éditeur de texte de votre page ou article.</li> <li>Basculez en mode ‘Texte’ ou ‘HTML’ selon l’éditeur.</li> <li>Collez votre code HTML.</li> </ul> <p>Pour ceux utilisant des créateurs de sites web comme <strong>Hostinger</strong>, l’interface visuelle et les fonctions de glisser-déposer simplifient le processus. Glissez simplement un bloc HTML sur votre page et insérez votre code. </p> <h3 id="verification-et-test" class="rb-heading-index-14">Vérification et test</h3> <p>Une fois le code inséré, vérifiez son rendu. Utilisez la fonction ‘Aperçu’ du CMS ou du créateur de site pour vous assurer que le contenu s’affiche correctement. Les navigateurs comme Chrome et Firefox offrent des outils de développement pour inspecter et déboguer le code HTML en temps réel. </p> <h3 id="optimisation-et-compatibilite" class="rb-heading-index-15">Optimisation et compatibilité</h3> <p>Pour garantir une compatibilité maximale, testez votre page sur différents navigateurs et appareils. Les outils en ligne comme BrowserStack permettent de visualiser votre site sur divers environnements. N’oubliez pas d’optimiser les images et le contenu pour un chargement rapide, en utilisant des balises <strong>alt</strong> pour les images et en minimisant le code CSS et JavaScript.</p> </p></div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-5ff60571 Titre2 PT40 elementor-widget elementor-widget-foxiz-heading" data-id="5ff60571" data-element_type="widget" data-widget_type="foxiz-heading.default"> <div class="elementor-widget-container"> <div id="uid_5ff60571" class="block-h heading-layout-8"><div class="heading-inner"><h2 class="heading-title"><span>Les immanquables</span></h2></div></div> </div> </div> <div class="elementor-element elementor-element-259d39f0 Theme025Style02 PB40 elementor-widget elementor-widget-foxiz-overlay-2" data-id="259d39f0" data-element_type="widget" data-widget_type="foxiz-overlay-2.default"> <div class="elementor-widget-container"> <div id="uid_259d39f0" class="block-wrap block-overlay block-overlay-2 light-overlay-scheme p-gradient rb-columns rb-col-2 is-gap-7"><div class="block-inner"> <div class="p-wrap p-overlay p-overlay-2" data-pid="389"> <div class="overlay-holder"> <div class="p-featured"> <a class="p-flink" href="https://www.geekfinity.fr/modification-de-fichiers-excel-sur-google-drive-methodes-et-astuces/" title="Modification de fichiers Excel sur Google Drive : méthodes et astuces"> <img width="292" height="220" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20292%20220'%3E%3C/svg%3E" class="featured-img wp-post-image" alt="" decoding="async" data-lazy-srcset="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-768x578.png.webp 768w" data-lazy-sizes="auto, (max-width: 292px) 100vw, 292px" data-lazy-src="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp" /><noscript><img loading="lazy" width="292" height="220" src="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp" class="featured-img wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-768x578.png.webp 768w" sizes="auto, (max-width: 292px) 100vw, 292px" /></noscript> </a> </div> <div class="overlay-wrap"> <div class="p-content overlay-inner overlay-text"> <h3 class="entry-title"> <a class="p-url" href="https://www.geekfinity.fr/modification-de-fichiers-excel-sur-google-drive-methodes-et-astuces/" rel="bookmark">Modification de fichiers Excel sur Google Drive : méthodes et astuces</a></h3> <div class="p-link"> <a class="p-readmore" href="https://www.geekfinity.fr/modification-de-fichiers-excel-sur-google-drive-methodes-et-astuces/" aria-label="Modification de fichiers Excel sur Google Drive : méthodes et astuces"><span>En savoir plus</span><i class="rbi rbi-cright" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div> <div class="p-wrap p-overlay p-overlay-2" data-pid="404"> <div class="overlay-holder"> <div class="p-featured"> <a class="p-flink" href="https://www.geekfinity.fr/facteurs-cles-de-la-viralite-dune-video-sur-les-reseaux-sociaux/" title="Facteurs clés de la viralité d’une vidéo sur les réseaux sociaux"> <img width="292" height="220" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20292%20220'%3E%3C/svg%3E" class="featured-img wp-post-image" alt="" decoding="async" data-lazy-srcset="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-768x578.png.webp 768w" data-lazy-sizes="auto, (max-width: 292px) 100vw, 292px" data-lazy-src="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp" /><noscript><img loading="lazy" width="292" height="220" src="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp" class="featured-img wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-768x578.png.webp 768w" sizes="auto, (max-width: 292px) 100vw, 292px" /></noscript> </a> </div> <div class="overlay-wrap"> <div class="p-content overlay-inner overlay-text"> <h3 class="entry-title"> <a class="p-url" href="https://www.geekfinity.fr/facteurs-cles-de-la-viralite-dune-video-sur-les-reseaux-sociaux/" rel="bookmark">Facteurs clés de la viralité d’une vidéo sur les réseaux sociaux</a></h3> <div class="p-link"> <a class="p-readmore" href="https://www.geekfinity.fr/facteurs-cles-de-la-viralite-dune-video-sur-les-reseaux-sociaux/" aria-label="Facteurs clés de la viralité d’une vidéo sur les réseaux sociaux"><span>En savoir plus</span><i class="rbi rbi-cright" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div> </div></div> </div> </div> </article> <div class="elementor-element elementor-element-44e18710 e-con-full e-flex e-con e-child" data-id="44e18710" data-element_type="container" data-settings="{"sticky":"top","sticky_offset":12,"sticky_parent":"yes","sticky_on":["desktop","tablet","mobile"],"sticky_effects_offset":0,"sticky_anchor_link_offset":0}"> <div class="elementor-element elementor-element-41df071b elementor-widget elementor-widget-sidebar" data-id="41df071b" data-element_type="widget" data-widget_type="sidebar.default"> <div data-elementor-type="wp-post" data-elementor-id="1034" class="elementor elementor-1034" data-elementor-post-type="rb-etemplate"> <div class="elementor-element elementor-element-1097fe75 Sidebar e-flex e-con-boxed e-con e-parent" data-id="1097fe75" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-67a3b004 Titre2 elementor-widget elementor-widget-heading" data-id="67a3b004" data-element_type="widget" data-widget_type="heading.default"> <p class="elementor-heading-title elementor-size-default">Recherche</p> </div> <div class="elementor-element elementor-element-f42d4a2 elementor-widget elementor-widget-foxiz-search-icon" data-id="f42d4a2" data-element_type="widget" data-widget_type="foxiz-search-icon.default"> <div class="elementor-widget-container"> <div class="header-search-form is-form-layout"> <form method="get" action="https://www.geekfinity.fr/" class="rb-search-form"> <div class="search-form-inner"> <span class="search-icon"><i class="rbi rbi-search" aria-hidden="true"></i></span> <span class="search-text"><input type="text" class="field" placeholder="Votre recherche..." value="" name="s"/></span> <span class="rb-search-submit"><input type="submit" value="Recherche"/> <i class="rbi rbi-cright" aria-hidden="true"></i></span> </div> </form> </div> </div> </div> <div class="elementor-element elementor-element-23715435 Titre2 elementor-widget elementor-widget-heading" data-id="23715435" data-element_type="widget" data-widget_type="heading.default"> <p class="elementor-heading-title elementor-size-default">A ne pas manquer</p> </div> <div class="elementor-element elementor-element-47cb5f4b Theme025Style04 Petit elementor-widget elementor-widget-foxiz-list-flex" data-id="47cb5f4b" data-element_type="widget" data-widget_type="foxiz-list-flex.default"> <div class="elementor-widget-container"> <div id="uid_47cb5f4b" class="block-wrap block-list block-list-flex rb-columns rb-col-1 is-gap-20 is-feat-left"><div class="block-inner"> <div class="p-wrap p-list p-list-2" data-pid="389"> <div class="list-holder"> <div class="list-feat-holder"> <div class="feat-holder overlay-text"> <div class="p-featured"> <a class="p-flink" href="https://www.geekfinity.fr/modification-de-fichiers-excel-sur-google-drive-methodes-et-astuces/" title="Modification de fichiers Excel sur Google Drive : méthodes et astuces"> <img width="292" height="220" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20292%20220'%3E%3C/svg%3E" class="featured-img wp-post-image" alt="" decoding="async" data-lazy-srcset="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-768x578.png.webp 768w" data-lazy-sizes="auto, (max-width: 292px) 100vw, 292px" data-lazy-src="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp" /><noscript><img loading="lazy" width="292" height="220" src="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp" class="featured-img wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/d111977d-2cb8-4e7e-9154-96e841d52661-768x578.png.webp 768w" sizes="auto, (max-width: 292px) 100vw, 292px" /></noscript> </a> </div> </div> </div> <div class="p-content"> <h3 class="entry-title"> <a class="p-url" href="https://www.geekfinity.fr/modification-de-fichiers-excel-sur-google-drive-methodes-et-astuces/" rel="bookmark">Modification de fichiers Excel sur Google Drive : méthodes et astuces</a></h3> <div class="p-link"> <a class="p-readmore" href="https://www.geekfinity.fr/modification-de-fichiers-excel-sur-google-drive-methodes-et-astuces/" aria-label="Modification de fichiers Excel sur Google Drive : méthodes et astuces"><span>En savoir plus</span><i class="rbi rbi-cright" aria-hidden="true"></i> </a> </div> </div> </div> </div> <div class="p-wrap p-list p-list-2" data-pid="404"> <div class="list-holder"> <div class="list-feat-holder"> <div class="feat-holder overlay-text"> <div class="p-featured"> <a class="p-flink" href="https://www.geekfinity.fr/facteurs-cles-de-la-viralite-dune-video-sur-les-reseaux-sociaux/" title="Facteurs clés de la viralité d’une vidéo sur les réseaux sociaux"> <img width="292" height="220" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20292%20220'%3E%3C/svg%3E" class="featured-img wp-post-image" alt="" decoding="async" data-lazy-srcset="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-768x578.png.webp 768w" data-lazy-sizes="auto, (max-width: 292px) 100vw, 292px" data-lazy-src="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp" /><noscript><img loading="lazy" width="292" height="220" src="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp" class="featured-img wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b.png.webp 1232w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-300x226.png.webp 300w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-1200x904.png.webp 1200w,https://www.geekfinity.fr/wp-content/uploads/865c91a6-5bfb-4f05-a6d8-c2806997880b-768x578.png.webp 768w" sizes="auto, (max-width: 292px) 100vw, 292px" /></noscript> </a> </div> </div> </div> <div class="p-content"> <h3 class="entry-title"> <a class="p-url" href="https://www.geekfinity.fr/facteurs-cles-de-la-viralite-dune-video-sur-les-reseaux-sociaux/" rel="bookmark">Facteurs clés de la viralité d’une vidéo sur les réseaux sociaux</a></h3> <div class="p-link"> <a class="p-readmore" href="https://www.geekfinity.fr/facteurs-cles-de-la-viralite-dune-video-sur-les-reseaux-sociaux/" aria-label="Facteurs clés de la viralité d’une vidéo sur les réseaux sociaux"><span>En savoir plus</span><i class="rbi rbi-cright" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div></div> </div> </div> <div class="elementor-element elementor-element-a0ca0e8 Titre2 elementor-widget elementor-widget-heading" data-id="a0ca0e8" data-element_type="widget" data-widget_type="heading.default"> <p class="elementor-heading-title elementor-size-default">Au coeur de l'actu</p> </div> <div class="elementor-element elementor-element-2d783546 Theme025Style01 Petit elementor-widget elementor-widget-foxiz-overlay-2" data-id="2d783546" data-element_type="widget" data-widget_type="foxiz-overlay-2.default"> <div class="elementor-widget-container"> <div id="uid_2d783546" class="block-wrap block-overlay block-overlay-2 light-overlay-scheme p-gradient rb-columns rb-col-1 is-gap-7"><div class="block-inner"> <div class="p-wrap p-overlay p-overlay-2" data-pid="571"> <div class="overlay-holder"> <div class="p-featured"> <a class="p-flink" href="https://www.geekfinity.fr/ok-google-configure-mon-appareil-android-personnalisation-poussee-et-subtilites/" title="Ok Google, configure mon appareil Android : personnalisation poussée et subtilités"> <img width="322" height="220" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20322%20220'%3E%3C/svg%3E" class="featured-img wp-post-image" alt="" decoding="async" data-lazy-srcset="https://www.geekfinity.fr/wp-content/uploads/out-0-13-scaled.webp 1200w, https://www.geekfinity.fr/wp-content/uploads/out-0-13-300x205.webp 300w, https://www.geekfinity.fr/wp-content/uploads/out-0-13-768x525.webp 768w" data-lazy-sizes="auto, (max-width: 322px) 100vw, 322px" data-lazy-src="https://www.geekfinity.fr/wp-content/uploads/out-0-13-scaled.webp" /><noscript><img loading="lazy" width="322" height="220" src="https://www.geekfinity.fr/wp-content/uploads/out-0-13-scaled.webp" class="featured-img wp-post-image" alt="" loading="lazy" decoding="async" srcset="https://www.geekfinity.fr/wp-content/uploads/out-0-13-scaled.webp 1200w, https://www.geekfinity.fr/wp-content/uploads/out-0-13-300x205.webp 300w, https://www.geekfinity.fr/wp-content/uploads/out-0-13-768x525.webp 768w" sizes="auto, (max-width: 322px) 100vw, 322px" /></noscript> </a> </div> <div class="overlay-wrap"> <div class="p-content overlay-inner overlay-text"> <h3 class="entry-title"> <a class="p-url" href="https://www.geekfinity.fr/ok-google-configure-mon-appareil-android-personnalisation-poussee-et-subtilites/" rel="bookmark">Ok Google, configure mon appareil Android : personnalisation poussée et subtilités</a></h3> <div class="p-link"> <a class="p-readmore" href="https://www.geekfinity.fr/ok-google-configure-mon-appareil-android-personnalisation-poussee-et-subtilites/" aria-label="Ok Google, configure mon appareil Android : personnalisation poussée et subtilités"><span>En savoir plus</span><i class="rbi rbi-cright" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div> </div></div> </div> </div> </div> </div> </div> <div id="text-2" class="widget rb-section w-sidebar clearfix widget_text"> <div class="textwidget"></div> </div> </div> </div> </div> </div> </div> </div> <footer data-rocket-location-hash="08ee7fca68fd2048a812fcdd229161ad" class="footer-wrap rb-section"> <div data-rocket-location-hash="9bf26ef984ca916242788fb118ce0c43" class="footer-inner footer-has-bg"> <div class="footer-copyright"> <div class="rb-container edge-padding"> <div class="copyright-inner"> <div class="copyright"><p>© 2025 | geekfinity.fr</p> </div><ul id="copyright-menu" class="copyright-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="https://www.geekfinity.fr/contact/"><span>Contact</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="https://www.geekfinity.fr/mentions-legales/"><span>Mentions Légales</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-257"><a href="https://www.geekfinity.fr/sitemap/"><span>Sitemap</span></a></li> </ul> </div> </div> </div> </div></footer> </div> <script type="rocketlazyloadscript"> (function () { let currentMode = null; let darkModeID = 'RubyDarkMode'; if (navigator.cookieEnabled) { currentMode = localStorage.getItem(darkModeID); } if (null === currentMode) { currentMode = document.body.getAttribute('data-theme'); } if ('dark' === currentMode) { document.body.setAttribute('data-theme', 'dark'); let darkIcons = document.getElementsByClassName('mode-icon-dark'); if (darkIcons.length) { for (let i = 0; i < darkIcons.length; i++) { darkIcons[i].classList.add('activated'); } } } else { document.body.setAttribute('data-theme', 'default'); let defaultIcons = document.getElementsByClassName('mode-icon-default'); if (defaultIcons.length) { for (let i = 0; i < defaultIcons.length; i++) { defaultIcons[i].classList.add('activated'); } } } })(); </script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/foxiz-child-025\/*","\/wp-content\/themes\/foxiz\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div data-theiaStickySidebar-sidebarSelector='"#mvp-side-wrap"' data-theiaStickySidebar-options='{"containerSelector":"","additionalMarginTop":120,"additionalMarginBottom":0,"updateSidebarHeight":false,"minWidth":0,"sidebarBehavior":"modern","disableOnResponsiveLayouts":true}'></div> <script type="rocketlazyloadscript"> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('.meta-el.meta-read').forEach(function(el) { el.innerHTML = el.innerHTML.replace('Read', ''); }); }); </script> <script type="rocketlazyloadscript"> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <div data-rocket-location-hash="a1ca968e36dc8e924982771dfcab6b22" id="rb-user-popup-form" class="rb-user-popup-form mfp-animation mfp-hide"> <div data-rocket-location-hash="4b7b3a65ec925d3f25a66ed7ae0018e3" class="logo-popup-outer"> <div data-rocket-location-hash="338a24b889ce4e12676e9976b1b84086" class="logo-popup"> <div class="login-popup-header"> <span class="logo-popup-heading h3">Welcome Back!</span> <p class="logo-popup-description is-meta">Sign in to your account</p> </div> <div class="user-form"><form name="popup-form" id="popup-form" action="https://www.geekfinity.fr/bonsoir/" method="post"><p class="login-username"> <label for="user_login">Identifiant ou adresse e-mail</label> <input type="text" name="log" id="user_login" autocomplete="username" class="input" value="" size="20" /> </p><p class="login-password"> <label for="user_pass">Mot de passe</label> <input type="password" name="pwd" id="user_pass" autocomplete="current-password" spellcheck="false" class="input" value="" size="20" /> </p><p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Se souvenir de moi</label></p><p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Se connecter" /> <input type="hidden" name="redirect_to" value="https://www.geekfinity.fr/html-comment-convertir-du-code-en-balises-html-pour-le-web" /> </p></form></div> <div class="user-form-footer is-meta"> <a href="https://www.geekfinity.fr/bonsoir/?action=lostpassword">Lost your password?</a> </div> </div> </div> </div> <script id="foxiz-core-js-extra"> var foxizCoreParams = {"ajaxurl":"https:\/\/www.geekfinity.fr\/wp-admin\/admin-ajax.php","darkModeID":"RubyDarkMode"}; </script> <script data-minify="1" src="https://www.geekfinity.fr/wp-content/cache/min/1/wp-content/plugins/foxiz-core/assets/core.js?ver=1761521544" id="foxiz-core-js" data-rocket-defer defer></script> <script data-minify="1" src="https://www.geekfinity.fr/wp-content/cache/min/1/wp-content/plugins/theia-sticky-sidebar/js/ResizeSensor.js?ver=1761521544" id="theia-sticky-sidebar/ResizeSensor.js-js" data-rocket-defer defer></script> <script data-minify="1" src="https://www.geekfinity.fr/wp-content/cache/min/1/wp-content/plugins/theia-sticky-sidebar/js/theia-sticky-sidebar.js?ver=1761521544" id="theia-sticky-sidebar/theia-sticky-sidebar.js-js" data-rocket-defer defer></script> <script data-minify="1" src="https://www.geekfinity.fr/wp-content/cache/min/1/wp-content/plugins/theia-sticky-sidebar/js/main.js?ver=1761521544" id="theia-sticky-sidebar/main.js-js" data-rocket-defer defer></script> <script id="rocket_lazyload_css-js-extra"> var rocket_lazyload_css_data = {"threshold":"300"}; </script> <script id="rocket_lazyload_css-js-after"> !function o(n,c,a){function u(t,e){if(!c[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(s)return s(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=c[t]={exports:{}},n[t][0].call(r.exports,function(e){return u(n[t][1][e]||e)},r,r.exports,o,n,c,a)}return c[t].exports}for(var s="function"==typeof require&&require,e=0;e<a.length;e++)u(a[e]);return u}({1:[function(e,t,r){"use strict";{const c="undefined"==typeof rocket_pairs?[]:rocket_pairs,a=(("undefined"==typeof rocket_excluded_pairs?[]:rocket_excluded_pairs).map(t=>{var e=t.selector;document.querySelectorAll(e).forEach(e=>{e.setAttribute("data-rocket-lazy-bg-"+t.hash,"excluded")})}),document.querySelector("#wpr-lazyload-bg-container"));var o=rocket_lazyload_css_data.threshold||300;const u=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&c.filter(e=>t.target.matches(e.selector)).map(t=>{var e;t&&((e=document.createElement("style")).textContent=t.style,a.insertAdjacentElement("afterend",e),t.elements.forEach(e=>{u.unobserve(e),e.setAttribute("data-rocket-lazy-bg-"+t.hash,"loaded")}))})})},{rootMargin:o+"px"});function n(){0<(0<arguments.length&&void 0!==arguments[0]?arguments[0]:[]).length&&c.forEach(t=>{try{document.querySelectorAll(t.selector).forEach(e=>{"loaded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&"excluded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&(u.observe(e),(t.elements||=[]).push(e))})}catch(e){console.error(e)}})}n(),function(){const r=window.MutationObserver;return function(e,t){if(e&&1===e.nodeType)return(t=new r(t)).observe(e,{attributes:!0,childList:!0,subtree:!0}),t}}()(document.querySelector("body"),n)}},{}]},{},[1]); </script> <script src="https://www.geekfinity.fr/wp-content/themes/foxiz/assets/js/jquery.waypoints.min.js?ver=3.1.1" id="jquery-waypoints-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/themes/foxiz/assets/js/rbswiper.min.js?ver=6.5.8" id="rbswiper-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/themes/foxiz/assets/js/jquery.mp.min.js?ver=1.1.0" id="jquery-magnific-popup-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/themes/foxiz/assets/js/jquery.ui.totop.min.js?ver=v1.2" id="jquery-uitotop-js" data-rocket-defer defer></script> <script id="foxiz-global-js-extra"> var foxizParams = {"ajaxurl":"https:\/\/www.geekfinity.fr\/wp-admin\/admin-ajax.php","twitterName":"Geekfinity","sliderSpeed":"5000","sliderEffect":"slide","sliderFMode":""}; </script> <script data-minify="1" src="https://www.geekfinity.fr/wp-content/cache/min/1/wp-content/themes/foxiz/assets/js/global.js?ver=1761521544" id="foxiz-global-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.32.5" id="elementor-webpack-runtime-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.32.5" id="elementor-frontend-modules-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js" data-rocket-defer defer></script> <script id="elementor-frontend-js-before"> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Partager sur Facebook","shareOnTwitter":"Partager sur Twitter","pinIt":"L\u2019\u00e9pingler","download":"T\u00e9l\u00e9charger","downloadImage":"T\u00e9l\u00e9charger une image","fullscreen":"Plein \u00e9cran","zoom":"Zoom","share":"Partager","playVideo":"Lire la vid\u00e9o","previous":"Pr\u00e9c\u00e9dent","next":"Suivant","close":"Fermer","a11yCarouselPrevSlideMessage":"Diapositive pr\u00e9c\u00e9dente","a11yCarouselNextSlideMessage":"Diapositive suivante","a11yCarouselFirstSlideMessage":"Ceci est la premi\u00e8re diapositive","a11yCarouselLastSlideMessage":"Ceci est la derni\u00e8re diapositive","a11yCarouselPaginationBulletMessage":"Aller \u00e0 la diapositive"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Portrait mobile","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Paysage","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablette en mode portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablette en mode paysage","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Portable","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"\u00c9cran large","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"3.32.5","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_optimized_markup":true,"theme_builder_v2":true,"nested-elements":true,"home_screen":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"cloud-library":true,"e_opt_in_v4_page":true,"import-export-customization":true,"mega-menu":true},"urls":{"assets":"https:\/\/www.geekfinity.fr\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/www.geekfinity.fr\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/www.geekfinity.fr\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"9e932b5107"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":674,"title":"HTML%20%3A%20Comment%20convertir%20du%20code%20en%20balises%20HTML%20pour%20le%20web%20%3F%20-%20Geekfinity","excerpt":"","featuredImage":"https:\/\/www.geekfinity.fr\/wp-content\/uploads\/generated_14249862197228487889.png"}}; </script> <script src="https://www.geekfinity.fr/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.32.5" id="elementor-frontend-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.30.1" id="e-sticky-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.30.1" id="elementor-pro-webpack-runtime-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script src="https://www.geekfinity.fr/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script id="elementor-pro-frontend-js-before"> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/www.geekfinity.fr\/wp-admin\/admin-ajax.php","nonce":"44551fd1e0","urls":{"assets":"https:\/\/www.geekfinity.fr\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.geekfinity.fr\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":false},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"fr_FR","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/www.geekfinity.fr\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; </script> <script src="https://www.geekfinity.fr/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.30.1" id="elementor-pro-frontend-js" data-rocket-defer defer></script> <script src="https://www.geekfinity.fr/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.30.1" id="pro-elements-handlers-js" data-rocket-defer defer></script> <script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://www.geekfinity.fr/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt,l){var t='<img data-lazy-src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading="lazy"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?"":"&"+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var exclusions=[];var e,t,p,u,l,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)(e=document.createElement("div")),(u='https://i.ytimg.com/vi_webp/ID/hqdefault.webp'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query",a[t].dataset.query),e.setAttribute("data-src",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(".play")),(p.onclick=lazyLoadYoutubeIframe)});</script><script>var rocket_beacon_data = {"ajax_url":"https:\/\/www.geekfinity.fr\/wp-admin\/admin-ajax.php","nonce":"ca5761b935","url":"https:\/\/www.geekfinity.fr\/html-comment-convertir-du-code-en-balises-html-pour-le-web","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://www.geekfinity.fr/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1762060925 -->