par Daniel Alouidor
Si tu as déjà suivi et pratiqué mes trois premières leçons, tu es assurément sur le point de devenir un artiste (en herbe) du web. Alors, ne lâche pas prise et continue de t’instruire en t’amusant. Eh oui… Maintenant que tu as ton espace de travail, ton éditeur de code, et que tu as ouvert ta toute première page web, il est temps de faire connaissance avec les balises HTML les plus importantes.
Le savais-tu? Les balises sont comme des petits mots magiques que tu écris pour dire au navigateur :
“Hé ! Ici je veux un titre !” ou “Là, mets une image de tonton Djo trop marrant, stp !”
On va donc apprendre à construire une vraie page avec du texte, des titres, des images… et même des papillons si tu veux.
Trêve de plaisanterie. C’est quoi une balise, en fait ?
Une balise HTML est un mot entouré de crochets < > qui sert à dire à l’ordinateur comment afficher un contenu sur une page web. Une balise HTML, ça ressemble à ça :
<p>Voici un paragraphe de texte.</p>Tu vois ? Regarde bien les différences : <p> : c’est la balise d’ouverture et </p> : c’est la balise de fermeture. Entre les deux, tu mets ton contenu. Donc, c’est très simple. Tu ouvres, tu écris, tu fermes. Comme un sandwich.
Structure de base d’une page HTML
Voici le squelette d’une page (on l’a déjà vu, mais cette fois on l’explique bien) :
<!DOCTYPE html>
<html>
<head>
<title>Mon site génial</title>
</head>
<body>
<!-- Le contenu de ta page s’écrit ici -->
</body>
</html><!DOCTYPE html>: une instruction placée tout en haut d’une page HTML pour dire au navigateur : « Ceci est une page en HTML5. » Elle aide le navigateur à bien comprendre et afficher le contenu.<html>et</html>: le début de la page et la fin de la page. Ces deux là enveloppent tout le contenu de la page.<head>et</head>: des infos sur ta page qui ne sont pas visibles par l’utilisateur (titre, encodage, etc.).<title>et</title>: le titre qui apparaît dans l’onglet du navigateur.<body>et</body>: là où tu mets tout ce que tu veux montrer à l’écran.
Wow! Tu franchis là une importante étape. Mais, on ne va pas s’arrêter en si bon chemin. Du nerf!
Abordons les balises de base à connaître :
1. <h1> à <h6> : les titres
<h1>Grand Titre</h1>
<h2>Titre un peu moins grand</h2>
<h3>Encore plus petit</h3>Plus le chiffre est grand, plus le texte est petit. Utilise <h1> pour ton titre principal, puis <h2>, <h3>, etc. pour organiser tes sous-titres.
Voici un exemple fun :
<h1>???? Bienvenue sur le site officiel des dragons du dimanche</h1>
<h2>???? Nos activités : barbecue, sieste, envolées stylées</h2>
2. <p> : les paragraphes
<p>Voici un joli paragraphe de texte.</p>Parfait pour raconter ta vie, parler de ton animal préféré ou faire un poème sur les bananes.
Exemple :
<p>Je m'appelle Katia. J’adore la musique konpa, les gâteaux aux fruits et faire des sites web !</p>3. <a> : les liens (comme les portails magiques vers d’autres pages)
<a href="https://www.wikipedia.org">Clique ici pour tout savoir !</a>???? Astuce : href indique où mène le lien.
Exemple rigolo :
<p>Envie de voir des canards qui dansent ? <a href="https://www.youtube.com/watch?v=MtN1YnoL46Q">Clique ici !</a></p>4. <img> : les images (parce qu’un site sans image, c’est triste)
<img src="chaton.jpg" alt="Un chaton trop mignon">src= le chemin vers ton imagealt= une description (très importante pour l’accessibilité)
Exemple fun :
<img src="lama-cool.png" alt="Lama avec des lunettes de soleil" width="300">Tu peux aussi utiliser des images d’Internet :
<img src="https://placekitten.com/400/300" alt="Chaton random" width="400">5. <br> : un retour à la ligne (pas besoin de fermer cette balise)
<p>Voici une phrase.<br>Et maintenant je saute à la ligne !</p>On combine tout ça ?
Voici une petite page complète avec tout ce qu’on vient de voir :
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur le site de Léa</title>
</head>
<body>
<h1>???? Coucou, c’est moi Léa !</h1>
<p>Voici mon tout premier site web.</p>
<h2>???? Ce que j’aime :</h2>
<p>Les mangas, les chats, et surtout... le chocolat ????</p>
<h2>???? Mon chat préféré :</h2>
<img src="https://placekitten.com/300/200" alt="Chat mignon">
<p>Tu veux en savoir plus ? <a href="https://fr.wikipedia.org/wiki/Chat">Clique ici</a> !</p>
</body>
</html>Essaie ce code dans ton fichier index.html, enregistre-le, et ouvre-le dans ton navigateur. Tu viens de créer une vraie page web avec du contenu vivant !
Récapitulation rapide
| Balise | Utilité |
|---|---|
<h1> à <h6> | Titres de différentes tailles |
<p> | Paragraphe de texte |
<a> | Lien cliquable |
<img> | Image |
<br> | Saut de ligne |
Petit défi créatif
Crée une page “À propos de moi” avec un titre principal, un paragraphe, une image drôle et un lien vers ta vidéo ou ton site préféré.
Prochain article…
Dans l’article 5, on va parler de comment ajouter des listes (pour faire des menus, des tops, des recettes…) et d’organiser plusieurs pages entre elles. Tu vas enfin commencer à construire ton mini-site.
Daniel Alouidor
N’oublie pas de réviser :
Leçon 1 : Bonne nouvelle : je vais t’apprendre à créer ton site web … gratis!
Leçon 2 : Création site web facile – Rencontre avec HTML et CSS
Leçon 3 : Création de site web – Prépare ton atelier de super codeur !
Leçon 5 : Des listes et des liens – La base d’un vrai mini-site web !