Lorsque l’on décide de créer un site internet de zero sans savoir coder, on entre dans une sorte de « mini-spirale-infernale » : on commence à chercher tous les moyens possibles de tout faire sans coder. On finit par installer toutes sortes de plugins et de page-builders, et en fin de compte, on n’est pas plus avancés : on ne saura toujours pas le faire manuellement.
Mieix vaut s’y intéresser dès le départ, et connaitre quelques règles basiques de html qui pourront nous sauver la vie…
Je vous présente donc ici une petite liste d’éléments HTML de base, que vous retrouvez sur toutes les pages, ainsi que leur équivalent en code.

Ça pourra surement vous être utile de savoir les reconnaitre!
Vous pourrez enfin comprendre comment ils fonctionnent, et à quoi ils ressemblent. Tout ceci vous servira forcément un jour ou l’autre dans votre vie d’entrepreneur.e, si vous devez rechercher un élément précis dans le code (un bouton, un lien). Par exemple, si vous voulez le modifier plus précisément pour qu’il corresponde exactement à votre identité visuelle.

les headings

Si vous avez des notions de SEO (ce que je vous conseille), vous avez du entendre parler de H1, de H2, etc.

Ils s’agit des titres (« headings » en anglais) et de leur hiérarchie (titres, sous-titres, sous-sous-titres, etc.)
Lorsque vous créez en document en html, vous devez l’organiser un minimum pour qu’il soit compréhensible. Vous divisez de manière cohérente le contenu d’un article par exemple, avec plusieurs parties.

C’est une convention, et elle permet (entre autres de choses) aux moteurs de recherche de pouvoir s’y retrouver.

• Vous mettez un titre principal : ce sera le <h1>.
• Puis vous coupez votre texte en plusieurs parties. Le titre de chacune sera un <h2>.
• Si vos <h2> sont trop longs, ils peuvent être divisés en plusieurs morceaux avec des <h3>. Etc.

Ils doivent être imbriqués correctement, et dans le bon ordre. De plus ils sont très importants pour que votre site internet soit accessible aux visiteurs handicapés car ils permettent de structurer très clairement le contenu.
En fait les headings (d’où le « h ») vont jusqu’à h6. Mais dans les faits, dans un article comme celui ci on va rarement plus bas que h4.

principe des lignes et colonnes

Si vous utilisez un thème comme Divi, avec un constructeur, vous êtes familier.e des sections, lignes et colonnes.

Les document sont découpés en parties et sous parties.

Et les colonnes ne peuvent pas être comme ça dans la nature. Elles sont contenues dans des lignes.

Et les lignes sont elles même contenues dans des sections.

Encore une histoire de hierarchie et d’organisation.

Les liens

Si vous regardez les liens de plus près, ils sont faits comme ça :

<a href= »https://www.andrea-studio.fr »</a>

Le <a> est la balise qui désigne un lien. Cette balise s’ouvre et se ferme pour le délimiter :
<a> Lien visible à l’écran</a>

Mais si les liens sont compliqués à comprendre et à écrire quand on débute, c’est parce qu’ils contienneet l’adresse à l’intérieur de la balise.
href désigne l’adresse.

 <a href= »Adresse (cachée) de la destination »> lien visible à l’écran </a>

Les images

Les balises d’images sont construites sur le meme principe : la balise <img> contient l’adresse ou se trouve l’image à afficher.

<img src= »MyDocuments/image1.jpg »>

Et vous pouvez mixer image et lien, pour que lorsque le visiteur clique sur l’image, celle ci ouvre un lien. Il commence à y avaoir un peu de challenge

Les boutons

Les boutons servent toujours à quelque chose, ils sont donc aussi un peu complexes.
Ils peuvent par exemple contenir l’adresse de la page vers laquelle ils dirigent, quand ce sont des liens (dans le cas d’un bouton « retourner à l’accueil »).

On utilise pour les afficher la balise <button>.
Les boutons peuvent être stylisés dans les moindres détails en CSS : taille de la bordure, couleur du fond, arrondis des angles, changements lorsque l’utilisateur les survole, taille et couleur de la police, etc.).
Vous pouvez avoir des boutons parfaitement cohérents avec votre identité visuelle à la place des vilains boutons HTML de base.
bouton basique

Utilsier les ID

Un ID  (se prononce comme le mot « idea ») est un identifiant unique qui permet de sélectionner un élément unique de votre page, pour lui attribuer (entre autres) des propriétés de style (couleurs, taille, etc.).
Si vous voulez styliser un seul bouton de votre page pour qu’il ait un design particulier et unique, utilisez un ID, que vous mettrez dans la balise du bouton (il sera donc invisible à l’écran.
<btn id= »ACCUEIL »>
et dans votre css vous pourrez lui attribuer son propre style, en utilisant le #accueil

les parties d’un document (head, footer, etc)

Les documents sont tous construites de la même manière!
Ils ont tous les mêmes parties de base, qui permettent (encore une fois) d’organiser le contenu.
<head> <header> <body> <footer>
Le <head> contient des infos un peu officielles, comme le titre de la page, et d’autres choses un peu techniques. Son contenu est invisible à l’écran. Et justement, vous savez sans doute, c’est là que vous devez placer le code de Google Analytics, ou encore celui de Pinterest.

Le <header> est l’entête. C’est dans cette partie que vous pourrez retrouver un titre, un menu de navigation, un logo, etc.

Le <body> est le corps du document.

Le <footer> est le pied de page. Dans cette partie, vous mettez habituellement des liens, des éléments de navigation, des icônes de réseaux sociaux ou un petit formulaire.

Le html est assez simple à comprendre même sans être expert, puisque ce sont toujours les mêmes choses qui reviennent.

C’est un langage de balisage :il sert à structurer le contenu. Vous l’aurez compris, on est un peu rigides et on tient à ce que tout soit bien rangé selon les règles👩‍💻
Vous retrouverez donc toujours les mêmes parties et les mêmes éléments.

Il existe des centaines de balises, pour absoluement tous les usages : créer des tableaux, des listes à puces, intégrer des vidéos, des formulaires, tout ce qui s’affiche dans votre navigateur a été crée en html.

Avec ces règles basiques de html, vous serez capable de repérer les problèmes, et de modifier des éléments vous même.
Et c’est quand même mieux quand on maitrise les choses 😉