Apprendre le HTML : 10 min avec une killeuse pour tout savoir !

Pas besoin d’être un geek pour apprendre le HTML.

Pas besoin de savoir coder comme un développeur web pour maîtriser les balises HTML.

Et pas besoin d’y passer des heures pour comprendre le codage HTML.

C’est rassurant nan ? 😜

Oui elle est gentille la p’tite dame, mais ça fait peur quand même !

Bah oui, une barre oblique calée entre 2 symboles et c’est fini, le cerveau humain se referme, car tout lui paraît compliqué.

Alors ça vous dit de vous faire accompagner d’une killeuse pour apprendre le langage HTML pour les nuls ?

(Promis, je ne vais pas vous faire un cours d’informatique et je vais essayer de rendre cet article ludique.)

C’est quoi le langage HTML ?

Commençons par les bases.

Le HTML (HyperText Markup Language) est le langage utilisé pour créer des pages web.

Ce code HTML permet de formater et structurer une page web, à l’aide de balises.

En bref, les balises HTML expliquent à Google (et aux autres moteurs de recherche) comment hiérarchiser les infos présentes dans la page web et comment présenter cette page (titre, sous-titre, paragraphe, image, etc.).

Combiné au style CSS (feuille de style), le codage HTML permet de mettre en forme toutes les pages d’un site Internet.

Mais devinez quoi ?

En réalité, vous n’avez même pas besoin d’apprendre le HTML pour créer un site web, ni pour rédiger des contenus web.

Bah aloooooooooors, pourquoi tu nous expliques tout ça Adeliiiiiine ????

Hey oh, on se calme hein ! 😈

Si je vous explique le HTML pour les nuls, c’est justement parce que vous êtes… curieux d’apprendre ! 😜

Donc même si le but n’est pas de tout maîtriser, à partir du moment où vous utilisez le web pour votre activité pro, vous DEVEZ en connaître les bases !

Alors on continue !

Apprendre le langage HTML pour les nuls, et non pas pour les développeurs web !

Le code HTML peut être ultra complexe, c’est vrai.

Mais il s’agit dans cet article de connaître les bases pour la création de contenus web, pas pour le déploiement entier d’un site Internet. 😅

Apprendre le langage HTML pour les nuls consiste à appréhender :

• la structure de texte, grâce au balisage des titres et sous-titres ;
• la mise en forme de texte, avec des balises pour mettre en gras, en italique, en souligné, etc. ;
• l’insertion d’éléments au sein des pages, comme des images ou des liens hypertextes par exemple.

Donc PAS BESOIN de maîtriser le codage HTML « complexe », celui qui vous fait peur. 😅

Du style :

On passe au concret ?

N’hésitez pas à mettre cet article dans vos favoris pour y revenir si besoin.

Voici les secrets du langage HTML…

Apprendre le HTML : comment créer une balise ?

Une balise HTML donne les infos de structure et mise en forme.

Pour créer une balise HTML, il faut :

• commencer la balise avec un chevron ouvert <
• décrire la balise
• ajouter les attributs
• terminer la balise avec un chevron fermé >

Ça, c’est pour une seule balise.

Mais lorsque vous insérez une balise, il y aura TOUJOURS une balise ouvrante et une balise fermante qui englobent votre contenu, c’est-à-dire 2 balises.

« Waouh, tu nous fais des calculs de haut vol Adeline 😅 ».

Exemple :

<h1>Titre de killeuse</h1>

Vous le voyez ici, la balise ouvrante informe que le contenu est un titre de 1^er rang et la balise fermante (à laquelle on ajoute une barre oblique devant le nom de l’élément) indique que le titre se termine à cet endroit.

Maintenant que vous savez ce qu’est une balise HTML, voyons comment apprendre le HTML (HTML5, XHTML5, etc.) qui vous servira le plus dans la création de contenus.

Les balises HTML pour les titres et sous-titres : les balises Hn

Pour structurer et hiérarchiser un contenu, il faut obligatoirement insérer des titres et sous-titres.

Mais pas n’importe comment.

Dans une page web, il y aura un seul titre de 1^er rang : le titre compris dans la balise H1.

Dans cet article, mon titre H1 est « Apprendre le HTML : 10 min avec une killeuse pour tout savoir ! ».

Puis viennent les titres de chaque paragraphe principal : les titres compris dans les balises H2.

Et si un paragraphe est détaillé avec d’autres sous-titres, ils seront compris dans les balises H3.

👉 Si on reprend l’exemple de cet article, les titres et sous-titres sont balisés comme ça :

Si j’avais ajouté des sous-parties à ces titres H2, je les aurais donc balisées en H3.

Les balises Hn informent Google de la structure de notre article et des grandes parties et sous-parties.

D’un point de vue SEO (référencement naturel), le balisage Hn est très important : les H1 et H2 doivent être optimisés pour rendre votre article plus puissant aux yeux des algorithmes.

« Nan mais là Adeline, tu me perds. »😅

OK, OK, je m’arrête là pour les détails, mais j’espère que vous avez compris l’idée !

Maintenant, suivez-moi pour apprendre le langage HTML pour débutant le plus utilisé dans la création de contenus web.

Apprendre le HTML pour créer un paragraphe

Pour indiquer la présence d’un paragraphe, la balise à insérer est la suivante :

<p>Votre paragraphe qui dit que c’est trop cool d’apprendre le HTML aux côtés des Killeuses du web</p>

Rien de particulier à savoir. Peu importe la longueur de votre paragraphe, il vous suffit d’insérer la balise correspondante au début et à la fin de votre paragraphe.

La balise HTML pour mettre en gras

Il existe 2 balises pour mettre un mot en gras : la balise bold et la balise strong.

<b>votre mot en gras</b>

<strong>votre mot en gras</strong>

Il n’y a pas de grande différence entre les 2 donc vous pouvez utiliser celle que vous préférez.

👉 Voici les explications si vous souhaitez en savoir plus.

La balise HTML pour faire une liste à puces

La liste à puces comprend la totalité de la liste, ainsi que chacune des puces.

Pour la retranscrire en HTML, il faut procéder de cette manière.

<ul>Texte pour introduire vos éléments

<li>élément de la liste</li>

<li>élément de la liste</li>

<li>élément de la liste</li>

</ul>

Apprendre le HTML pour insérer un lien interne ou externe

Dans cette balise, vous faites apparaître à la fois le lien (interne ou externe) et à la fois l’ancre de votre lien, c’est-à-dire le groupe de mots dans lequel le lien sera inséré.

<a href=« lien à insérer »>ancre du lien</a>

Par exemple, je veux vous présenter un livre au top pour maîtriser le langage HTML.

En code HTML, ça donnera ça :

Je veux vous présenter un <a href=« https://amzn.to/3AKDItT »>livre au top pour maîtriser le langage HTML</a>.

La balise HTML pour insérer une image

Cette balise se referme simplement à l’aide d’un chevron.

<img src=« lien de l’image »>

Balisage HTML pour souligner

<u>mot à souligner</u>

Balisage HTML pour mettre en italique

<i>mot à mettre en italique</i>

Pssssst, n’oubliez pas de mettre cet article dans vos favoris pour vérifier vos balises HTML si nécessaire ! 😊

Mais comme je vous l’ai dit au début, vous n’aurez pas forcément besoin de maîtriser le codage HTML pour mettre en ligne des pages web.

Vous savez pourquoi ?

Tout simplement parce que les CMS font tout le boulot à votre place ! 😁

Les quoi ?

Les CMS (Content Management System).

Ces systèmes de gestion de contenu, tels que WordPress, vous facilitent la tâche. Vous n’avez qu’à faire la structure et mise en forme de votre texte comme vous la faites sur Word par exemple.

Comment NE PAS intégrer le code HTML dans WordPress ? 😁

Quand vous souhaitez intégrer du texte sur un site web et le mettre en ligne, il suffit de rédiger sur Word, puis le copier et le coller dans WordPress.

Ensuite, vous faites votre mise en page et mise en forme (titres et sous-titres, gras, etc.)

Et WordPress se charge lui-même d’intégrer le codage HTML correspondant.

C’est aussi simple que ça ?

OUI.

Je vous montre en images…

Voici un article, intégré dans WordPress. Vous le voyez en haut à gauche, vous pouvez hiérarchiser vos titres, mettre en gras, insérer des liens, etc.

Ceci est la version « éditeur visuel » de votre article.

WordPress crée automatiquement le bon code HTML, visible dans la version « éditeur de code ».

Vous le verrez, le langage HTML est moins « net » qu’un texte codé entièrement par l’humain, mais les résultats sont tout aussi puissants ! D’un point de vue SEO comme d’un point de vue design.

Comment intégrer du codage HTML dans WordPress ?

Si vous être très rigoureux et souhaitez insérer vous-même le langage HTML à vos textes, il vous suffit de baliser entièrement votre texte et l’intégrer directement dans la version « éditeur de code ».

Puis vous pouvez vérifier la mise en forme dans la version « éditeur visuel ».

Pour vous aider à baliser vos contenus, vous avez d’ailleurs d’excellents outils gratuits à disposition :

https://www.mesoutils.com/generateur.php

https://html-online.com/editor/

Comment apprendre le HTML ? Cours HTML en ligne

Si vous souhaitez aller plus loin dans le HTML ou les langages CSS ou JavaScript, vous pouvez vous former gratuitement juste ici :

https://fr.w3docs.com/apprendre-html.html

https://developer.mozilla.org/fr/docs/Learn/HTML

Pratiquez en parallèle grâce aux générateurs de codes HTML vus précédemment et vous serez au top !

Voili voilou !

Vous avez maintenant toutes les notions de base pour passer du statut de « nul en HTML » au statut de « débutant en HTML » ! 😜

Vous savez structurer (<hn>), insérer (<a href> <img>) et mettre en forme (<strong>, <p>, <i>, <u>).

You are the best.😉

Et n’oubliez pas que vous avez aussi toutes les clés pour ne plus avoir besoin de maîtriser ce fameux langage HTML ! 🤭

Allez, je vous laisse avec vos chevrons, barres obliques et symboles en tout genre, j’ai un bibimbap qui m’attend (merci beaucoup Do 🥰).