Fais apparaître ta première page.

À la fin de cette leçon, tu auras créé une première page et tu sauras expliquer à quoi servent ses principales balises. Tu peux tout essayer dans l'éditeur ci-dessous, directement dans ton navigateur. Aucun compte, terminal ou serveur n'est nécessaire pour ce premier essai.

Une page, c'est du contenu structuré

HTML décrit ce que contient une page : un titre, un paragraphe, un lien. Le navigateur utilise ces indications pour l'afficher, et les technologies d'assistance pour la parcourir. La mise en forme viendra avec CSS.

Essaie cette page. Clique sur Aperçu après une modification pour voir le résultat.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bonjour, moi c'est Alex.</h1>
    <p>Je découvre comment construire une page web.</p>
    <a href="https://developer.mozilla.org/fr/docs/Web/HTML">Explorer HTML sur MDN</a>
  </body>
</html>

Tu viens de voir six éléments utiles :

• <!doctype html> indique au navigateur qu'il lit un document HTML moderne.
• <html lang="fr"> contient la page et annonce sa langue.
• <head> contient les informations qui ne sont pas le contenu principal affiché : encodage, titre d'onglet, réglage mobile.
• <body> contient ce que le lecteur voit sur la page.
• <h1> marque le titre principal du contenu.
• <p> forme un paragraphe et <a href="…"> crée un lien vers une autre page.

Une balise ouvrante et une balise fermante entourent le contenu : <p>Bonjour</p>. Les éléments meta, eux, n'entourent pas de texte. L'indentation rend la structure plus facile à lire, même si le navigateur sait lire le fichier sans elle.

À toi de jouer

Dans l'éditeur, transforme la page en mini présentation personnelle :

1. Remplace « Alex » par ton prénom ou un nom inventé.
2. Ajoute un second paragraphe avec ce que tu aimerais créer sur le web.
3. Change le texte du lien, sans effacer son href.

Lance l'aperçu. Vérifie que les deux paragraphes s'affichent séparément et que le lien reste cliquable. Si quelque chose disparaît, regarde d'abord les chevrons < et > et les balises fermantes : c'est souvent là que se cache l'erreur.

Ce qui compte vraiment

Les balises ne servent pas seulement à obtenir un effet visuel. Un titre écrit avec <h1> est reconnu comme un titre par le navigateur et les lecteurs d'écran. Un simple texte agrandi avec du CSS peut lui ressembler, mais n'a pas le même rôle. Choisis d'abord la balise selon le sens du contenu ; nous travaillerons son apparence ensuite.