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
- 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.
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 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.
Utilsier les ID
les parties d’un document (head, footer, etc)
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 😉
