Qu'est-ce que HTML ?

Ce que tu vas apprendre

• Ce qu'est une page web et ce que fait le navigateur avec un fichier HTML.
• Reconnaître une balise, un élément et un attribut.
• Créer et ouvrir ta toute première page.

Une page web est un fichier texte

Voici une page complète, la plus simple possible :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Mes recettes</title>
  </head>
  <body>
    <h1>Mes recettes</h1>
    <p>Bienvenue sur mon site de cuisine.</p>
  </body>
</html>

Ce n'est que du texte. Un navigateur (Firefox, Chrome, Safari, Edge...) est un programme qui lit ce texte et en fait une page affichée à l'écran.

HTML (HyperText Markup Language, « langage de balises d'hypertexte ») est le langage dans lequel ce texte est écrit. Il décrit le sens de chaque morceau : ceci est un titre, ceci est un paragraphe.

Que fait HTML, que font les autres ?

Trois langages se partagent une page web :

Ici, tu apprends le premier. Sans HTML, il n'y a pas de page : CSS et JavaScript viennent toujours s'y accrocher.

Les balises

Regarde cette ligne :

<p>Bienvenue sur mon site de cuisine.</p>

Une balise est un mot-clé entouré de chevrons < et >. Il y en a deux ici :

• <p> est la balise ouvrante : le paragraphe commence.
• </p> est la balise fermante (avec une barre oblique) : le paragraphe se termine.

Le texte entre les deux est le contenu. L'ensemble forme un élément : balise ouvrante, contenu, balise fermante.

Quelques éléments à connaître

<br> et <hr> n'ont pas de contenu. On les appelle des éléments vides : ils n'ont pas de balise fermante.

Les attributs

<html lang="fr">

Un attribut ajoute une information à un élément. Il s'écrit dans la balise ouvrante, sous la forme nom="valeur". Ici, lang="fr" indique que la page est en français.

Un élément peut avoir plusieurs attributs, séparés par des espaces. Mets toujours la valeur entre guillemets droits ".

Imbriquer les éléments

Un élément peut en contenir d'autres. On dit qu'ils sont imbriqués.

<p>Cette tarte est <strong>très</strong> simple.</p>

La règle est de fermer dans l'ordre inverse de l'ouverture : le dernier ouvert est le premier fermé. Écrire <p>un <strong>mot</p></strong> est une erreur.

Créer ta première page

1. Crée un dossier recettes sur ton ordinateur.
2. Ouvre un éditeur de texte pour le code, par exemple Visual Studio Code (gratuit). Évite un traitement de texte comme Word.
3. Copie la page d'exemple du début dans un nouveau fichier.
4. Enregistre-le sous le nom index.html, dans le dossier recettes.
5. Double-clique sur le fichier : il s'ouvre dans ton navigateur.

Le nom index.html est une convention : sur un site, c'est la page d'accueil qu'un serveur envoie par défaut.

Modifie le texte du <h1>, enregistre, puis recharge la page dans le navigateur (touche F5). Tu vois ton changement. Cette boucle « modifier, enregistrer, recharger » sera ton quotidien.

Voir le code d'une page existante

Tu peux lire le HTML de n'importe quel site. Fais un clic droit sur une page, puis « Afficher le code source de la page » (ou appuie sur Ctrl+U). Pour inspecter un élément précis, choisis « Inspecter » : c'est l'outil de développement du navigateur, que tu utiliseras souvent.

À retenir

• Une page web est un fichier texte en HTML, que le navigateur transforme en page affichée.
• HTML décrit la structure et le contenu, CSS l'apparence, JavaScript le comportement.
• Un élément se compose d'une balise ouvrante, d'un contenu et d'une balise fermante.
• Un attribut s'écrit dans la balise ouvrante : nom="valeur".
• Les éléments s'imbriquent et se ferment dans l'ordre inverse de leur ouverture.