Les bases du HTML à connaître quand on fait son site internet soi-même

Si tu as un site la moindre des choses est de connaître un minimum de HTML. Que ce soit pour éditer un lien, en créer un utiliser l’onglet “texte” dans l’éditeur WordPress. Il te faudra écrire ou savoir lire en langage HTML. Ca peut toujours servir.

C’est un peu comme savoir qu’on sait lire une carte même si on a un GPS. Ca aide à sortir de certaines situations.

Or tu maîtrises sûrement pas mal de choses sur ton site mais le code…C’est une autre paire de manche.

Voici donc les codes HTML de base que toute personne qui a un site devrait maitriser.

Créer un lien

<a href="http://link.com">Nom du lien </a>

Insérer une image

<img src="http://lien-de-l-image.jpg">

Si vous voulez utiliser une image située dans votre bibliothèque médias WordPress, il faudra récupérer l’url de cette image et c’est cette dernière que vous allez noter.

Créer une image cliquable

<a href="http://lien-à-lier-à-l-image.com"><img src="http://lien-de-l-image.jpg" alt="nom-de-l-image"></a>

alt= permet de donner un nom à l’image et de faire en sorte qu’elle puisse être trouvée sous ce nom dans les moteurs de recherches. Pour le référencement il est donc mieux d’en préciser un.

Ouvrir un lien dans un nouvel onglet

<a href="http://nom-du-lien.com" target="blank">Nom du lien</a>

Tout tient ici dans le target=”blank”, c’est ce qui ouvrira votre lien dans une nouvelle fenêtre du navigateur.

Rendre une adresse email cliquable

<a href="mailto:votreemail@gmail.com">votreemail@gmail.com</a>

Mettre un mot en gras

<b>Mot en gras</b> ou <strong>Mot en gras</strong>

En réalité, ce qui met le mot en gras est le <b> qui est issue du “bold” anglais. Mais l’éditeur de WordPress va utiliser la balise strong lorsque vous cliquer sur le “B” de l’éditeur. Strong ici veut juste signifier que l’élément est important et c’est le navigateur qui représente cette importance en mettant votre mot d’office en gras.

Mettre un mot en italique

<i>mot en italique</i> ou <em>mot en italique</em>

Même petite nuance ici. <i> indique l’italique <em> indique qu’on veut mettre quelque chose en valeur et c’est le navigateur qui interprète cela en utilisant l’italique. Par défaut WordPress utilise la balise <em> en place de l’italique.

Créer des titres et des paragraphes

<h1>Crée un titre principal</h1>

<h2> un sous-titre</h2>

et ainsi de suite jusqu’à <h6>.

T’es-tu déjà demandé pourquoi dans ton éditeur WordPress tu avais “Titre 1″, Titre 2” etc? C’est pour hiérarchiser ces titres du plus important au plus petit.

<p> je crée un paragraphe </p>

<br> à la fin d’une phrase crée un retour à la ligne.

Changer la couleur d’un mot

<span style="color:#ff00ff;">Ce texte est rose</span>

Il faut préciser la couleur à l’aide d’un code hexadécimal.

Centrer du texte

<div align="center">Mon texte est centré</div>

ou <p style="text-align:center;">Mon texte est centré aussi</p>

Tu peux remplacer “center” par right ou left selon que tu souhaites aligner à droite ou gauche!

Il faut un peu de patience et de pratique pour retenir le HTML mais c’est de loin un des langages les plus faciles. Si tu es sérieux vis à vis de tonsite, il est utile que tu connaisses au moins ces codes fondamentaux. Ils pourront te sortir de quelques situations.

J’ai appris cela seule donc tu peux aussi ! Et si tu veux pousser plus loin je te recommande:

• d’aller faire un tour sur www.tuto.com pour trouver des tutoriels, il en existe pour débutant.
• De lire ce livre, un vrai bijou!  HTML et CSS : Design et création sites web