Sur cette page, tu vas vraiment commencer à construire des pages plus propres : hiérarchie des titres, paragraphes, listes, liens, images, attributs HTML, vidéo longue + mini-quiz et exercices.
Sur une page HTML, on évite de mettre un peu de texte n'importe comment. On utilise des titres pour organiser les sections, et des paragraphes pour le texte normal.
<h1> : titre principal de la page (une seule fois en général).<h2> : grand sous-titre.<h3> : sous-partie d’un <h2>, etc.<h1>Mon site de recettes</h1>
<h2>Recettes salées</h2>
<h3>Lasagnes maison</h3>
<h2>Recettes sucrées</h2>
<h3>Brownie au chocolat</h3>Un paragraphe se met dans la balise <p>...</p> :
<p>Bienvenue sur mon site de recettes.</p>
<p>Ici, tu trouveras des idées simples et rapides.</p>Quel titre est le plus logique pour le titre principal de ta page ?
Les listes permettent de présenter des infos de façon claire.
On utilise <ul> (unordered list) et
<li> (list item).
<h2>Courses à faire</h2>
<ul>
<li>Pâtes</li>
<li>Tomates</li>
<li>Fromage</li>
</ul>
On utilise <ol> (ordered list) avec des
<li>.
<h2>Étapes d'une recette</h2>
<ol>
<li>Préchauffer le four.</li>
<li>Mélanger les ingrédients.</li>
<li>Cuire pendant 20 minutes.</li>
</ol>Pour afficher une liste numérotée, tu utilises :
Les liens se créent avec la balise <a>
(comme anchor = ancre).
<a href="https://example.com">Aller sur Example</a>
Ici, href est un attribut.
Un attribut donne une information en plus à la balise (ex : une URL, un identifiant, une classe, etc.).
On peut rajouter l’attribut target="_blank" :
<a href="https://example.com" target="_blank">
Ouvrir Example dans un nouvel onglet
</a>On peut aussi faire un lien vers une section de la même page :
<a href="#titres">Aller à la section Titres</a>
<h2 id="titres">1. Titres</h2>Exercice : entre dans le champ ci-dessous le nom de l’attribut qui contient l’URL d’un lien.
La balise <img> permet d'afficher une image.
C’est une balise auto-fermante : il n’y a pas de
</img>.
<img src="chaton.png" alt="Un petit chaton mignon">src : chemin ou URL de l’image.alt : texte alternatif (affiché si l’image ne charge pas, et lu par les lecteurs d’écran).alt correctement : c’est important pour
l’accessibilité et le référencement (SEO).
À quoi sert principalement l’attribut alt ?
Si tu veux un gros rappel + voir tout ça en action, tu peux regarder cette vidéo plus longue (environ 2h de cours HTML complet).
Tu peux maintenant créer une petite page appelée profil.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma fiche de présentation</title>
</head>
<body>
<h1>Je me présente</h1>
<h2>Qui je suis ?</h2>
<p>Écris un petit texte sur toi.</p>
<h2>Ce que j’aime</h2>
<ul>
<li>Jeu vidéo : <strong>...</strong></li>
<li>Sport préféré : ...</li>
<li>Autre passion : ...</li>
</ul>
<h2>Mes liens</h2>
<p>
<a href="https://example.com" target="_blank">
Un site que j’aime bien
</a>
</p>
<h2>Ma photo</h2>
<img src="moi.png" alt="Une image qui me représente">
</body>
</html>
Essaye d’utiliser au minimum :
un <h1>, plusieurs <h2>,
des <p>, une liste, un lien et une image.