Apprendre à coder en html, les bases pour débuter

Coder en Html, quelle étrange expression quand on est novice. Ici, il n’est pas question de vous faire faire un site web ou une application, mais simplement vous donner les bases pour apprendre à coder en Html votre première page web et ceci très facilement. Cet article, le premier de la série des cours, vous donnera les bases pour comprendre comment fonctionne le Html et vous verrez que c’est assez simple.

Il est question de créer une page en code, et de l’afficher comme elle sera vue par les internautes, donc ils ne verront pas le code, mais le résultat.

Coder en html, on utilise des balises.

Ce qu’il faut retenir en priorité, c’est que pour coder en html, on utilise des balises. En règle générale, pour afficher quelques choses de particulier, on l’entoure de balises. On ouvre une balise, on y met ce que l’on veut, et on la referme. Ceci est la règle générale mais il existe des exceptions que nous verrons plus tard. Les balises ne sont pas vues par l’internaute quand vous ouvrez votre page avec un navigateur web (Internet Explorer, Firefox, Chrome).

On va coder en Html ensemble.

Commencez par créer un nouveau document texte que vous allez appeler “Test” avec bloc note ou Notepad.
(Clic droit sur le bureau, créer un nouveau document texte”.)
Vous devriez vous retrouvez avec un document comme: Test.txt

Désormais, vous allez voir apparaitre le .txt, qu’il va vous falloir remplacer par .html et validez le message qui s’affiche par oui. Vous voilà donc avec votre fichier : Test.html

Lorsque c’est fait, clic droit sur votre fichier et ouvrir avec Bloc-notes ou Notepad suivant celui que vous avez. Au passage Notepad++ est le top dans son domaine et gratuit. Disponible ici.

Allez, on fait nos premiers pas.

Premièrement, ce qu’il vous faut comprendre.

• Quand je veux entrer du code, je fais un clic droit sur mon fichier puis ouvrir avec Bloc Notes ou Notepad.
• Quand je veux voir le rendu, je fais simplement un double clic sur le fichier et il s’ouvre m’affichant le résultat.

Pour ma part, j’ouvre le fichier avec les deux en même temps et je les place cote à cote. Ainsi, quand je sauvegarde avec NotePad++, je n’ai qu’à actualiser dans Firefox pour avoir directement le rendu. Vous le verrez dans la capture ou je vous montre le code.

Testons ensemble. Je veux que ma page contienne du texte en gras et un autre qui ne le soit pas.

J’entre donc dans ma page :

<strong>Ceci est du texte en gras, mais</strong> ceci ne l’est pas.

Dans cet exemple, on ouvre la balise <strong> pour y mettre notre texte en gras, et on referme la balise avec </strong> C’est la balise utilisé pour mettre du texte en gras. A chaque fonction, sa propre balise.

Vous remarquez que pour fermer la balise, j’ai utilisé la barre antislash /

Voici quelques exemples de balises

<strong>Texte en gras</strong>
<s>Pour barrer du texte</s>
<u>Pour souligner du texte</u>
<a href=lien url>un lien hypertexte cliquable</a>
<pre>Pour afficher du code formater</pre>
<progress>Affiche une barre de progression</progress>
<cite>Pour citer quelqu’un</cite>
<h1>Intègre un titre</h1> (un seul h1 par page Important !)

Et bien d’autre que vous pouvez retrouver ici https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html

Faites quelques test et apprenez à comprendre vos erreurs. Balise mal fermée, mal insérée, mal placée. Vous prendrez vite l’habitude de trouver vos erreurs car ce sont souvent les mêmes.

Les balises qui ne se ferment pas.

Certaines balises n’ont pas besoin d’être refermées derrières comme les images par exemple ou le retour à la ligne.Elles intègrent directement à la fin l’antislash

Insérer une image : <img src=”adresse url de l’image” />
Pour retourner à la ligne comme le ferais la touche entrée : <br />
Séparer avec une ligne horizontale  <hr />

Enfin, pour rendre vos documents clairs les premiers temps et vous repérer dans ce que vous faites, utilisez ce que l’on appel des commentaires. Ce sont des infos que vous glissez dans votre code pour vous aider à retenir les infos. On utilise la balise d’ouverture <!– pour commencer son commentaire et on la ferme avec –> . Vous le verrez dans notre fichier exemple ci-dessous, ils sont en vert.

Ce sont là les balises les plus simples, qui vous permettront de comprendre le fonctionnement, l’ouverture et la fermeture des balises. Ce n’est pas ce qui vous permettra de créer votre site (quoi que…) mais au moins votre première page.

Voilà, vous avez les bases pour coder en html

Vous voilà fin prêt pour créer votre première page html avec du texte en gras, à la ligne, centrer et avec des titres. En étant motivé car il le faut pour apprendre correctement à coder, vous découvrirez comment s‘utilise les autres balise et celles aussi qui ne sont jamais visible par le visiteur. Les métas, les title, les OG, les link… il y en a un paquet, mais toujours facile à retenir. Nous reviendrons sur celles-ci lors de notre prochains cours car elles ont leur importance en termes de SEO.

Comme toujours si vous avez besoin de conseils, n’hésitez pas !