HTML. Bel acronyme qu’on traduirait bien par « Horrible Terreur Mortuaire et Larmes » histoire d’annoncer la couleur, parce que tous ceux d’entre vous qui se sont osés à « mettre les mains dans le cambouis » comme on dit, en sont revenus traumatisés à vie (j’exagère à peine). Si vous vous reconnaissez dans cette petite description, peut-être faites vous partie de ceux qui ont abandonné l’idée d’apprendre le code ou n’importe quel langage de programmation par peur de la complexité de ceux-ci. Coup de bol pour vous, le code HTML est relativement simple, et c’est une excellente nouvelle quand on sait à quel point il est indispensable pour un blogueur ! Dans cet article, je vous livre un petit cours de « HTML pour les nuls » en espérant que vous saurez être suffisamment courageux pour le lire jusqu’au bout 😉
Bon, c'est quoi le HTML machin truc ?
Pour faire simple, le langage HTML est tout simplement un langage informatique qui permet de créer des sites web. Vous n’êtes pas sans savoir que derrière n’importe quel site coloré se cache des montagnes de code angoissantes.
Pour vivre une aventure frissonnante, faites « Clic droit » puis « Afficher le code source de la page », et tentez de refréner cette crise d’angoisse que vous sentez arriver. Il va falloir être fort pour lire la suite. Car le HTML est loin d’être seul pour vous tourmenter : Php, javascript et autres sont présents parmi nous sans que vous le sachiez. Sommes-nous donc encerclés ?
La première bonne nouvelle, c'est que le HTML est le plus simple
Il était donc bien plus facile pour moi de vous écrire un article « HTML pour les nuls » plutôt que « PHP pour les nuls » haha.
La deuxième bonne nouvelle, c’est qu’en tant que blogueur, vous n’avez pas nécessairement à tout savoir sur le sujet.
Quelques bases peuvent largement vous suffire et vous permettre de réaliser des choses formidables avec WordPress !
Une fois que le fonctionnement de base vous sera expliqué, vous serez sans aucun doute les premiers étonnés de la simplicité du truc.
Ceci étant dit, créer un site web complet avec uniquement de l’HTML serait vraiment tristounet….
C’est pourquoi il faut absolument que je vous parle de son double, son binôme, bref…
Parlons un peu de CSS, son BFF pour la vie
Coder en HTML ne vous permettra (hélas) pas de faire grand chose au niveau du design.
Il y a bien sûr toujours moyen de « bidouiller » un petit peu, mais vous n’obtiendrez jamais de résultats plus satisfaisant qu’en vous formant également au CSS en parallèle.
A la fin de cet article, je vous parle justement d’un cours en ligne gratuit qui peut vous permettre de faire facilement vos premiers pas dans cet univers !
Comme il serait très compliqué de tout vous expliquer en détails, imaginez que le langage HTML est là pour permettre à votre page de s’afficher.
Le css, lui, est là pour gérer l’aspect visuel de cette page et lui donner un peu plus de gueule (couleurs, titres, intégration des images etc…). Les deux langages se complètent mais sont différents l’un de l’autre. Jusque là, vous me suivez ?
Pourquoi apprendre le HTML et le CSS quand on est blogueur ?
Si je vous parle de tout ça en sachant pertinemment à quel point c’est angoissant pour vous de penser à la technique, ce n’est pas pour rien. Et à nouveau, l’idée n’est pas non plus de se reconvertir en programmeur informatique. Connaître les principaux langages informatiques deviendra essentiel pour vous à un moment où à un autre pour de nombreuses raisons. Mais là encore, nous avons la chance de pouvoir nous reposer sur des systèmes de gestion de contenu comme mon amour de toujours : WordPress.org.
L'avantage des CMS comme WordPress.org
Si vous êtes blogueur, il est impossible que vous n’ayez pas encore entendu parler de WordPress.org. (Attention à ne pas faire l’amalgame avec la version .com qui n’a rien à voir, comme je vous l’expliquais ici).
Les CMS comme WordPress.org permettent à n’importe qui de créer un site web sans avoir à coder et sans même s’y connaître. Avouez que c’est tout de même un bel avantage !
En toute honnêtement, vous pourrez vous passer longtemps de savoir coder pour vivre de votre blog. Mais ça deviendra indispensable lorsque vous voudrez passer à l’étape supérieure, ne serait-ce qu’au niveau du design.
Si en prime, vous vous découvrez une passion pour la programmation, alors c’est un avantage non négligeable qui vous permettra de mettre sur pieds des projets insoupçonnés…
Quand et où utilisons-nous les langages HTML et CSS ?
Sans pour autant partir dans le délire de développer une application web (vous n’en arriverez sûrement pas là en un claquement de doigts non plus, soyons réalistes)…
Connaître les bases de l’HTML pour les nuls ainsi que quelques notions de CSS vous seront d’un grand recours sur de nombreux points, et pas seulement en termes de design et de « bidouillage de thème WordPress ».
Là où le HTML s’avérera le plus intéressant pour un blogueur, c’est lors de la rédaction de l’article.
Vous n’aviez jamais remarqué le petit onglet en haut à droite de votre article, dans le tableau de bord ? En cliquant sur « Texte », vous afficherez votre article en version HTML.
Et vous constaterez qu’il n’y a pas franchement de quoi casser trois pattes à un canard (comme dirait mon cher papa), en plus de ne plus avoir la moindre excuse pour ne pas utiliser une structure propre pour le référencement comme usr la jolie photo que voici :
*A noter tout de même que la balise h1 correspond au titre de l’article et qu’elle ne devrait pas apparaître en cliquant sur l’onglet « Texte » pré-cité.
Quelques bases HTML pour les nuls
C’est bien beau tout ça, mais nous sommes ici pour apprendre quelques bases HTML pour les nuls, et c’est ce que nous allons faire ! Mon but ici n’est bien sûr pas de vous apprendre à coder (ce serait juste avec un seul article) mais juste à vous expliquer son fonctionnement de base ainsi que ses balises principales… Histoire que votre article soit tout de même « propre » au regard des moteurs de recherches (parce que oui, ça joue dans votre positionnement!).
Comment fonctionne le HTML ?
Quelques règles simples pour ne pas trop vous endormir avec un article technique et long :
- Une balise c’est ça : <>
- Il en existe des tas, chacune avec une fonction différente. Exemple : < h1 > ou < p > etc…
- Quand on ouvre une balise, il faut absolument la refermer sinon ça peut faire « planter » le site.
- Pour fermer une balise, il suffit de mettre / entre les <> (Exemple moins flou : < h1 > Mon titre < / h1 > ou < p > Mon paragraphe < / p >
Les balises principales
Voici les balises les plus importantes à connaître selon moi :
- h1 : Titre
- h2, h3, h4, h5 et h6 : Sous-Titres
- p : Paragraphe
- Strong : « Gras » + Mise en avant SEO
- Em : « Italique » + Mise en avant SEO
- Div : Section
- Span : Sous-section
Pour aller plus loin
Je l’ai dit, un article seul ne suffirait pas à tout vous expliquer. Mais j’ai quelque chose pour vous si jamais votre curiosité a été titillée par cet article. J’espère que vous en ferez bon usage ♥ Pour la petite histoire, c’est un peu ma « botte secrète » mon apprendre seule.
Quand j’étais plus jeune, j’ai facilement appris les bases de l’HTML pour les nuls grâce au « Site du Zéro », devenu aujourd’hui OpenClassRooms. Je vous invite vivement, si ce sujet vous intéresse, à suivre leur cours gratuit qui vise à vous enseigner comment créer son premier site web avec HTML et Css.
De mon côté, je vous prépare quelques vidéos YouTube sur ma chaîne afin d’explorer un peu plus en profondeur ce sujet 😉 Abonnez-vous ici pour ne rien manquer !
J'espère que cet article vous aura plu !
Avez-vous plus envie de vous former au HTML pour les nuls ? Avez-vous d’autres astuces ?
Partagez votre avis dans les commentaires !
3 Responses
Je suis d’accord avec toi, quand on devient blogueur mettre la main à la pâte dans ce domaine est un indispensable ! En plus, je suis dans le même cas que toi, il s’agit d’un domaine dans lequel j’apprend en autodidacte. J’ai vu ta vidéo youtube blog flop et encore une fois j’approuve le fait que l’identité visuelle est un sujet trop peu abordé dans le domaine du blogging, généralement réservé aux web designer et aux graphistes. J’ai hâte de lire ton prochain article ou de regarder ta prochaine vidéo où tu aborderas le sujet, ça sera très intéressant j’en suis sûre ! 😉
grrrr le HTML moi ça me donne mal à la tête 😂
Mais je connais les bases que tu as cité, je dirai même que tu as oublié le je m’en sert très souvent quand wordpress ne veux pas centré tel paragraphe 😂
J’ai de la chance d’avoir un copain web développeur qui au moindre soucis vole à ma rescousse 😂
Salut
Ton article m’a appris la différence entre HTML et CSS. Pour moi, cela est déjà une évolution. Par contre, je connaissais déjà ces infos pour le HTML. Je suis contente de savoir que j’ai plus de connaissances que je ne pensais dans ce domaine !