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 simplement Ă  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 :

langage HTML
Celui-ci il fait flipper…

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 1er 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 1er 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


editeur visuel sans code html

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 ».

editeur code html

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 article Ă  rĂ©diger sur « la crĂ©ation de site de niche« .

Adeline MANGIAROTTI
Adeline MANGIAROTTI
Killeuse du web

Vous partagez ?

Laisser un commentaire