HTML

Mais Concrètement, Ça Sert À Quoi HTML ?

L’utilité principale de HTML, c’est de structurer et d’organiser le contenu de tes pages web. Il permet de définir :

• Les titres et les sous-titres : Utiliser les balises <h1> à <h6> pour organiser l’information de manière hiérarchique, ce qui est super important pour la lisibilité et pour le SEO (les moteurs de recherche comprennent mieux la structure de ta page). Par exemple : <h1>Mon Titre Principal</h1> et <h2>Un Sous-titre Important</h2>.
• Les paragraphes de texte : Utiliser la balise <p> pour délimiter les blocs de texte. Par exemple : <p>Ceci est un paragraphe de texte expliquant un concept important.</p>.
• Les listes : Créer des listes ordonnées (<ol>) ou non ordonnées (<ul>) pour présenter des informations de manière claire et concise.
  • <ul> pour une liste à puces : <ul> <li>Élément 1</li> <li>Élément 2</li> </ul>
  • <ol> pour une liste numérotée : <ol> <li>Première étape</li> <li>Deuxième étape</li> </ol>
• Les liens hypertextes : Utiliser la balise <a> pour créer des liens vers d’autres pages de ton site ou vers des sites externes, c’est ce qui rend le web « hypertexte ». N’oublie pas l’attribut href pour spécifier l’URL : <a href="https://www.example.com">Cliquez ici pour visiter Example</a>.
• Les images : Intégrer des images dans tes pages avec la balise <img>. Tu dois utiliser l’attribut src pour indiquer le chemin de l’image et l’attribut alt pour un texte alternatif (important pour l’accessibilité et le SEO) : <img src="chemin/vers/mon-image.jpg" alt="Description de l'image">.
• Les tableaux : Organiser des données sous forme de tableaux avec les balises <table>, <tr> (ligne), <th> (en-tête de colonne), et <td> (cellule de données) : <table> <tr> <th>Nom</th> <th>Âge</th> </tr> <tr> <td>Alice</td> <td>30</td> </tr> </table>
• Les formulaires : Créer des formulaires pour collecter des informations auprès des utilisateurs avec les balises <form>, <input> (pour différents types de champs comme le texte, l’email, les cases à cocher, les boutons radio), <textarea> (pour du texte long), <select> (pour une liste déroulante), etc. Exemple simple : <form action="/traitement-du-formulaire" method="post"> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom"><br><br> <label for="email">Email :</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Envoyer"> </form>
• La structure générale de la page (HTML5) : Utiliser des balises sémantiques comme <header> (l’en-tête de la page ou d’une section), <nav> (la navigation principale), <main> (le contenu principal), <article> (un contenu autonome), <aside> (un contenu secondaire), et <footer> (le pied de page) pour donner du sens à chaque section de ta page, ce qui améliore l’accessibilité et le SEO. Exemple : <header> <h1>Le Titre de Mon Site</h1> <nav> <ul> <li><a href="/">Accueil</a></li> <li><a href="/a-propos">À Propos</a></li> </ul> </nav> </header> <main> <article> <h2>Le Titre de Mon Article</h2> <p>Le contenu de mon article...</p> </article> <aside> <p>Informations secondaires...</p> </aside> </main> <footer> <p>© 2023 Mon Site</p> </footer>

En gros, HTML donne le squelette et le sens à ton contenu web. C’est le langage que tous les navigateurs comprennent pour afficher les pages que tu visites tous les jours.

Dans Quels Types de Projets On Utilise HTML ?

HTML est absolument fondamental pour tous les types de projets web :

• Tous les Sites Web : Que ce soit un simple blog personnel, un site vitrine pour une entreprise, une boutique en ligne complexe, ou une application web monopage, tout commence avec HTML. Gutenberg lui-même génère du HTML !
• Les Applications Web : Même si des frameworks JavaScript comme React, Vue.js ou Angular prennent une part importante dans la création d’interfaces dynamiques, ils génèrent et manipulent en fin de compte du HTML pour afficher le contenu dans le navigateur.
• Les Emails HTML : Pour envoyer des emails avec une mise en forme riche (images, liens, styles), on utilise souvent du HTML (bien que les possibilités de style soient parfois plus limitées que sur le web).
• Les Documents Web : Des documents techniques aux CV en ligne, HTML peut être utilisé pour structurer et présenter de l’information textuelle et multimédia.

En résumé, si tu veux afficher quoi que ce soit sur le web, tu as besoin d’HTML. C’est la base, et Gutenberg te permet d’en insérer directement avec le bloc « HTML personnalisé ». Tu peux même combiner ça avec d’autres blocs pour créer des mises en page intéressantes et structurées pour ton contenu.

Quelques Exemples Concrets à Copier-Coller dans Gutenberg (Bloc « HTML personnalisé »)

1. Un Titre avec un Séparateur : <h2>Section Importante</h2> <hr style="border: 1px solid #ccc;"> <p>Le contenu de cette section...</p>
2. Une Carte de Visite Simple : <div style="border: 1px solid #eee; padding: 15px;"> <h3>John Doe</h3> <p>Développeur Web</p> <p><a href="mailto:john.doe@example.com">john.doe@example.com</a></p> </div>
3. Une Liste de Liens Utiles : <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> <li><a href="#">Lien 3</a></li> </ul>
4. Une Image avec une Légende : <figure> <img src="URL_DE_TON_IMAGE" alt="Description de l'image" style="max-width: 100%; height: auto;"> <figcaption>Légende de l'image ici.</figcaption> </figure>
5. Un Bouton Simple : <button style="background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer;">Cliquez ici</button>

Pour Conclure (Simplement)

HTML est vraiment la base de tout ce que tu vois sur le web, et c’est un outil puissant même directement dans l’éditeur Gutenberg de WordPress grâce au bloc « HTML personnalisé ». En comprenant les bases, tu peux structurer ton contenu de manière efficace pour la lisibilité et le SEO. N’hésite pas à expérimenter avec les différentes balises pour donner forme à tes idées ! C’est un peu comme écrire avec des blocs de construction, chaque balise a son rôle, et ensemble, elles créent la structure de ton site.

J’espère que cette introduction à HTML t’a été utile ! Si tu as d’autres questions, n’hésite pas.