Écrire sa première page HTML

C’est le moment de passer à l’action. En quelques lignes, vous allez créer la page d’accueil du portfolio de Camille, la voir s’afficher dans votre navigateur et comprendre chaque élément du code que vous avez écrit. Vous verrez qu’un langage de balisage n’a rien d’effrayant : il s’agit d’étiqueter du texte.

Le squelette d’une page HTML5

Toute page HTML suit la même ossature. Dans votre dossier de projet, ouvrez index.html et saisissez :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Camille Morel – Photographe</title>
  </head>
  <body>
    <h1>Camille Morel</h1>
    <p>Photographe indépendante, spécialisée dans les paysages et les portraits.</p>
  </body>
</html>

Enregistrez puis ouvrez le fichier dans votre navigateur. Vous venez de créer une page web. Prenons le temps de comprendre chaque ligne.

Décortiquer le squelette

• <!DOCTYPE html> indique au navigateur qu’il s’agit d’un document HTML moderne. Il se place toujours en première ligne. Sans lui, certains navigateurs passent en « mode de compatibilité » et affichent la page de façon imprévisible.
• <html lang="fr"> est l’élément racine : tout le reste y est contenu. L’attribut lang déclare la langue du contenu, utile aux lecteurs d’écran (pour choisir la bonne prononciation), aux outils de traduction et aux moteurs de recherche.
• <head> regroupe les informations sur la page : elles ne s’affichent pas dans la fenêtre.
• <meta charset="UTF-8"> fixe l’encodage des caractères pour que « é » reste « é ».
• <title> donne le titre de l’onglet, des favoris et des résultats de recherche.
• <body> contient tout ce qui est visible : titres, textes, images, liens.

Le head est la coulisse, le body est la scène. Ne les confondez pas : un titre placé dans le head n’apparaîtra pas.

Balises, éléments et attributs

Le HTML repose sur des balises écrites entre chevrons. La plupart fonctionnent par paires : une balise ouvrante <p> et une balise fermante </p>, avec une barre oblique. L’ensemble « balise ouvrante + contenu + balise fermante » forme un élément.

<p>Un paragraphe de texte.</p>

Une balise peut recevoir des attributs qui apportent des informations supplémentaires. Ils se placent dans la balise ouvrante, sous la forme nom="valeur" :

<p class="intro" id="presentation">Bienvenue sur mon site.</p>

Ici class et id sont deux attributs. Ils prendront tout leur sens lorsque vous attaquerez le CSS, au chapitre 3. Certains éléments, dits vides, n’ont ni contenu ni balise fermante : <br> (saut de ligne), <img> (image), <meta>, <hr> (séparateur).

L’imbrication : des poupées russes

Les éléments se placent les uns dans les autres, à condition de respecter une règle simple : on ferme dans l’ordre inverse de l’ouverture.

<!-- Correct -->
<p>Un mot <strong>très important</strong> ici.</p>

<!-- Incorrect : les balises se croisent -->
<p>Un mot <strong>très important</p></strong>

Le navigateur est tolérant et tentera de deviner votre intention, mais le résultat peut surprendre. Mieux vaut prendre l’habitude d’écrire un code propre.

Les premiers éléments de texte

Voici les éléments que vous utiliserez dès maintenant :

• <h1> : le titre principal de la page ; il n’y en a normalement qu’un.
• <p> : un paragraphe de texte.
• <strong> : une forte importance (rendu en gras par défaut).
• <em> : une emphase, comme un mot que l’on accentue à l’oral (rendu en italique par défaut).
• <br> : un retour à la ligne forcé, à utiliser rarement.

Choisissez l’élément pour son sens, pas pour son apparence. Si vous voulez simplement du gras décoratif, c’est le CSS qui s’en chargera plus tard.

Commentaires et indentation

Un commentaire est ignoré à l’affichage. Il sert à laisser des notes, ou à désactiver temporairement un morceau de code :

<!-- À compléter : ajouter la photo de Camille -->

L’indentation consiste à décaler les éléments imbriqués. Elle n’a aucun effet sur l’affichage, mais elle rend votre code lisible pour vous et pour toute personne qui le relira, y compris vous dans six mois.

Ce que fait le navigateur de votre code

Quand le navigateur reçoit votre fichier, il le lit de haut en bas et construit en mémoire un arbre d’éléments : l’élément html est le tronc, head et body sont deux grosses branches, et chaque paragraphe ou titre est une feuille. Cette représentation s’appelle le DOM. C’est elle que vous voyez dans l’inspecteur, et c’est elle que CSS et JavaScript manipuleront ensuite.

Un point rassurant : le navigateur ne « plante » jamais à cause d’une erreur de HTML. Il corrige ce qu’il peut et affiche le reste. Le revers de la médaille, c’est qu’une erreur ne fait pas de bruit : elle se manifeste simplement par un affichage différent de celui que vous attendiez. D’où l’importance de tester souvent et de relire votre code avec calme.

Les caractères spéciaux

Les chevrons servent à écrire des balises : pour afficher un « < » ou un « & » dans votre texte, vous devez écrire des entités, par exemple < pour « < » et & pour « & ». Nous reviendrons sur les entités au chapitre suivant ; retenez simplement que ces deux caractères sont réservés au langage.

Passer de la page au site

Une première version enrichie de la page d’accueil de Camille pourrait ressembler à ceci :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Camille Morel – Photographe</title>
  </head>
  <body>
    <h1>Camille Morel</h1>
    <p>Photographe indépendante, <strong>paysages</strong> et <strong>portraits</strong>.</p>
    <p>Je réalise des reportages pour les associations, les artisans et les particuliers. <em>Parlons de votre projet !</em></p>
    <!-- Les projets arriveront au chapitre 2 -->
  </body>
</html>

Elle est encore très simple, et c’est normal : vous ajouterez la structure, les images et le style au fil des chapitres. L’important est que le socle soit correct.

Les erreurs classiques des débutants

• oublier de fermer une balise (le reste de la page prend alors la mise en forme de l’élément ouvert) ;
• oublier les guillemets autour d’une valeur d’attribut ;
• écrire <h1>Titre<h1> au lieu de </h1> pour fermer ;
• enregistrer le fichier avec la mauvaise extension (index.html.txt) ;
• modifier un fichier, mais rafraîchir un autre onglet.

À vous de jouer

Complétez le squelette de index.html pour qu’il corresponde à votre propre sujet (ou à celui de Camille) :

1. modifiez le title de l’onglet ;
2. ajoutez un h1 avec un nom ou un titre ;
3. ajoutez trois paragraphes, dont l’un contient un mot en strong et un autre un mot en em ;
4. ajoutez un commentaire indiquant ce que vous comptez ajouter ensuite ;
5. cassez volontairement le code (oubliez une balise fermante), rafraîchissez, observez, puis réparez-le.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Atelier de Léa – Céramique</title>
  </head>
  <body>
    <h1>Atelier de Léa</h1>
    <p>Céramiste installée près de Lyon.</p>
    <p>Je crée des <strong>bols</strong> et des <strong>vases</strong> tournés à la main.</p>
    <p>Chaque pièce est <em>unique</em>.</p>
    <!-- À venir : galerie et formulaire de contact -->
  </body>
</html>

Dans le chapitre suivant, vous allez enrichir cette page : titres, listes, liens, images, tableaux, médias et formulaires.