Textes, listes, liens et images
Dans la Partie 1, vous avez créé votre première page HTML et compris la structure de base : html, head, body. Vous savez aussi écrire un titre et un paragraphe.
Aujourd'hui, nous allons ajouter les 4 éléments qui composent 90% de n'importe quelle page web de présentation : les niveaux de titres, les listes, les liens et les images. À la fin de ce tutoriel, vous saurez construire une vraie page qui ressemble à quelque chose.
Ce tutoriel suppose que vous avez terminé la Partie 1 et que vous avez déjà votre fichier
index.html avec sa structure de base. Si ce n'est pas le cas, reprenez la Partie 1 avant de continuer.
Durée estimée : 40 minutes.
1. Les niveaux de titres : h1 à h6
Vous connaissez déjà <h1>, le titre principal. Mais le HTML propose 6 niveaux de titres, de <h1> (le plus important) à <h6> (le moins important) :
<h1>Titre principal de la page</h1>
<h2>Un grand titre de section</h2>
<h3>Un sous-titre à l'intérieur de la section</h3>Pensez à un livre : h1 est le titre du livre, h2 les titres de chapitres, h3 les sous-parties à l'intérieur d'un chapitre. On utilise rarement h4, h5 et h6 sauf pour des documents très longs et détaillés.
Une seule règle à retenir : n'utilisez jamais un niveau de titre pour sa taille visuelle, mais pour sa hiérarchie logique. Si vous voulez juste du texte plus gros sans hiérarchie, ce n'est pas un titre — on verra plus tard comment faire ça proprement avec le CSS.
2. Créer des listes
Il existe deux types de listes en HTML, selon que l'ordre compte ou non.
Liste à puces (non ordonnée)
Utilisez-la quand l'ordre des éléments n'a pas d'importance :
<ul>
<li>Création de sites web</li>
<li>Formation en ligne</li>
<li>Consulting digital</li>
</ul>ul signifie "unordered list" (liste non ordonnée), et chaque li ("list item") représente un élément de la liste.
Liste numérotée (ordonnée)
Utilisez-la quand l'ordre compte — par exemple des étapes à suivre :
<ol>
<li>Choisissez votre pack</li>
<li>Remplissez le formulaire de devis</li>
<li>Recevez votre site sous 10 jours</li>
</ol>ol signifie "ordered list". Le navigateur numérotera automatiquement 1, 2, 3...
Posez-vous la question : "si je changeais l'ordre des éléments, est-ce que ça changerait le sens ?" Si oui → liste ordonnée (ol). Si non → liste à puces (ul).
3. Créer des liens cliquables
Le lien est LA balise qui a donné son nom au "Web" — un réseau de pages reliées entre elles. On l'écrit avec la balise <a> (pour "anchor", ancre) :
<a href="https://tutorialsgrey.com">Visiter Tutorialsgrey</a>Décortiquons cette ligne :
<a>...</a>: la balise de lienhref="...": l'attribut qui contient l'adresse de destination (href = "hypertext reference")Visiter Tutorialsgrey: le texte cliquable affiché à l'utilisateur
Lien vers une autre page de votre propre site
Si vous avez un fichier contact.html dans le même dossier que votre index.html, vous pouvez y faire un lien simplement avec :
<a href="contact.html">Nous contacter</a>Ouvrir un lien dans un nouvel onglet
Pour les liens externes, il est souvent préférable d'ouvrir une nouvelle fenêtre plutôt que de faire quitter votre site :
<a href="https://facebook.com/tutorialsgrey" target="_blank">Notre Facebook</a>target="_blank" ouvre le lien dans un nouvel onglet.
Beaucoup de débutants oublient le
https:// devant les adresses externes complètes. Sans lui, le navigateur cherche une page nommée "tutorialsgrey.com" dans votre propre dossier — et affiche une erreur. Pour vos propres pages (fichiers du même site), pas besoin de https://, juste le nom du fichier.
4. Insérer des images
La balise image est un peu différente des autres : elle ne s'entoure pas de contenu, elle se referme directement sur elle-même :
<img src="logo.png" alt="Logo de mon entreprise">Deux attributs sont indispensables :
src("source") : l'emplacement du fichier imagealt("alternative") : un texte de remplacement, affiché si l'image ne charge pas, et lu par les lecteurs d'écran pour les personnes malvoyantes
Sans
alt, votre site est moins accessible aux personnes malvoyantes et moins bien référencé par Google. Décrivez toujours brièvement ce que montre l'image.
Organiser vos images dans un dossier
Pour garder un projet propre, créez un dossier images à côté de votre index.html, et placez-y vos fichiers. Le chemin devient alors :
<img src="images/logo.png" alt="Logo de mon entreprise">5. Exercice pratique : assembler tout ce que vous avez appris
Modifiez votre fichier index.html de la Partie 1 pour qu'il contienne, dans cet ordre :
- Un
<h1>avec le nom de votre projet ou entreprise - Un
<h2>"Nos services" - Une liste à puces
<ul>avec 3 services que vous proposez (ou imaginez-en) - Un
<h2>"Nous contacter" - Un lien
<a>vers votre page Facebook ou WhatsApp (ouvert dans un nouvel onglet) - Une image quelconque (même une image trouvée sur votre ordinateur)
Sauvegardez et rafraîchissez votre navigateur après chaque ajout pour voir le résultat progressivement.
Voici à quoi devrait ressembler votre code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier site</title>
</head>
<body>
<h1>Mon Entreprise</h1>
<p>Bienvenue sur mon site.</p>
<h2>Nos services</h2>
<ul>
<li>Service numéro 1</li>
<li>Service numéro 2</li>
<li>Service numéro 3</li>
</ul>
<h2>Nous contacter</h2>
<a href="https://wa.me/237600000000" target="_blank">Nous écrire sur WhatsApp</a>
<img src="images/photo.jpg" alt="Photo de notre équipe">
</body>
</html>Ce que vous avez appris
- ✅ Les 6 niveaux de titres et leur logique hiérarchique
- ✅ La différence entre liste à puces (ul) et liste numérotée (ol)
- ✅ Comment créer des liens internes et externes avec la balise a
- ✅ Comment insérer des images avec src et alt
La suite de la série
Vous savez maintenant structurer du contenu complet. Mais votre page est encore toute simple, sans couleurs ni mise en page. Dans la Partie 3, nous découvrirons le CSS — le langage qui va transformer votre page brute en un vrai design moderne.