HTML pour les débutants

Le HTML ne décrit pas l’apparence d’une page, mais sa structure : ce qui est un titre, ce qui est un paragraphe, ce qui est un lien. Tout le reste du web repose là-dessus.

3

notions à retenir : balise, attribut, commentaire
6

étapes de projet guidé
1991

première version du langage

Les bases du HTML

Trois notions suffisent à écrire du HTML correct : la balise, l’attribut et le commentaire. Tout le reste n’est que vocabulaire.

Les balises

Une balise indique au navigateur ce qu’est un morceau de contenu : un titre, un paragraphe, un lien. Elle s’écrit entre chevrons.

<nom>: Balise ouvrante : elle annonce le début de l’élément.
contenu: Le texte, ou d’autres balises, que l’élément contient.
</nom>: Balise fermante : elle marque la fin de l’élément.

Les balises sans contenu

Certaines balises n’entourent rien et n’ont donc pas de fermante : <br> pour un saut de ligne, <img> pour une image. On les écrit sans barre oblique — celle de <br /> est une habitude venue de XHTML, que HTML5 ne demande pas.

html

<h1>Mon titre</h1>
<p>Un paragraphe de texte.</p>
<strong>Texte important</strong>

<!-- Sans contenu, donc sans fermante -->
<br>
<img src="photo.png" alt="Ma photo">

Une balise ouvrante, du contenu, une balise fermante. Et deux balises sans contenu.

Les attributs

Un attribut ajoute une information à une balise. Il se place dans la balise ouvrante et s’écrit nom="valeur".

id: Identifiant unique dans la page. Sert de cible aux liens internes.
class: Nom de classe, sur lequel le CSS s’appuiera.
src: Adresse du fichier à charger, pour une image notamment.
href: Destination d’un lien.
alt: Description d’une image, lue quand l’image ne s’affiche pas.
title: Info-bulle au survol. À n’utiliser qu’en complément, jamais seul.

html

<a href="https://google.com" title="Aller sur Google">Google</a>

<img src="photo.png" alt="Ma photo">

<div id="header" class="container">Contenu</div>

Chaque attribut vit dans la balise ouvrante, et nulle part ailleurs.

Les commentaires

Un commentaire est une note dans le code, que le navigateur n’affiche pas. Il s’écrit entre .

Expliquer: Dire pourquoi une partie du code est là, quand ce n’est pas évident.
Organiser: Marquer le début et la fin des grandes zones d’un fichier long.
Désactiver: Mettre du code de côté sans le supprimer, le temps d’un essai.
Laisser une note: Signaler à soi-même, ou à l’équipe, ce qui reste à faire.

Un commentaire n’est pas secret

Il n’est pas affiché, mais il reste dans le fichier envoyé au navigateur : n’importe qui peut le lire. N’y écrivez jamais de mot de passe ni d’information confidentielle.

html

<!-- En-tête du site -->
<header>
    <h1>Mon site</h1>
</header>

<!-- Navigation principale -->
<nav>
    <!-- Le menu sera ajouté ici -->
</nav>

<!--
    À faire : ajouter le formulaire de contact
    Attention : vérifier la validation
-->

Sur une ligne ou sur plusieurs, la syntaxe est la même.

Ma première page web

Toute page HTML a le même squelette. Apprenez-le une fois, vous le réécrirez sans y penser.

La structure complète d’une page

html

<!-- Type de document : HTML5 -->
<!DOCTYPE html>

<!-- Élément racine de la page -->
<html lang="fr">

<head>
    <!-- Encodage des caractères -->
    <meta charset="UTF-8">

    <!-- Affichage adapté aux petits écrans -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Description pour les moteurs de recherche -->
    <meta name="description" content="Ma première page web en HTML">

    <!-- Titre affiché dans l'onglet du navigateur -->
    <title>Ma première page web</title>

    <!-- Lien vers la feuille de style -->
    <link rel="stylesheet" href="css/style.css">
</head>

<!-- Corps de la page : tout le contenu visible -->
<body>
    <h1>Bienvenue sur ma première page !</h1>
    <p>Ceci est mon premier paragraphe en HTML.</p>
</body>

</html>

Le <head> décrit la page, le <body> la remplit. Rien de ce qui est dans le premier ne s’affiche.

Et ce que le navigateur en fait

Sans CSS, le navigateur applique ses propres styles : le titre est gros et gras, le paragraphe suit.

Toujours dans notre projet

arborescence

mon-premier-site/
├── css/
│   └── style.css
├── js/
│   └── script.js
├── img/
│   └── (vos images)
└── index.html

Celle créée au module précédent : un dossier par type de ressource, index.html à la racine.

Les étapes de modification

Ouvrez index.html et remplacez son contenu par le code ci-dessus.
Faites un clic droit sur le fichier, puis « Open with Live Server ».
Votre navigateur s’ouvre sur la page.
Modifiez le code, enregistrez : la page se recharge d’elle-même.

Ce que fait chaque partie

DOCTYPE et html

<!DOCTYPE html>: Annonce au navigateur que la page est en HTML5. Toujours en première ligne, avant tout le reste.
<html lang="fr">: L’élément qui contient toute la page. L’attribut lang indique la langue : les lecteurs d’écran s’en servent pour choisir la bonne prononciation.

L’élément head

<title>: Le titre affiché dans l’onglet, et dans les résultats de recherche.
<meta charset>: L’encodage. Sans UTF-8, les accents deviennent illisibles.
<meta viewport>: L’adaptation aux petits écrans.
<link>: Le rattachement d’une feuille de style externe.

Rien de ce qui se trouve dans le head ne s’affiche dans la page. Ce sont des informations sur la page, pas de la page.

L’élément body

<header>: L’en-tête : titre du site, navigation.
<nav>: Un ensemble de liens de navigation.
<main>: Le contenu principal, unique dans la page.
<footer>: Le pied de page : mentions, contacts.

Ces balises n’ont aucun effet visuel : elles disent ce qu’est chaque zone. C’est ce qui permet à un lecteur d’écran d’aller droit au contenu principal.

Les balises de contenu

De quoi remplir les zones du body : des titres, du texte, des liens, des images et des listes.

Les titres, de h1 à h6

Six niveaux, du plus important au moins important. Ils forment le plan de la page : on ne saute pas un niveau, et on n’en choisit pas un pour sa taille.

html

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section</h3>
<h4>Sous-section</h4>

Paragraphes et mise en valeur

Le paragraphe est l’unité de texte. strong et em portent un sens — important, accentué — que les lecteurs d’écran restituent.

html

<p>Paragraphe normal</p>
<strong>Texte important</strong>
<em>Texte accentué</em>
<mark>Surligné</mark>
<small>Petit texte</small>
<br> <!-- saut de ligne -->

div et span

Les deux seules balises qui ne veulent rien dire : div groupe des blocs, span entoure un morceau de texte. À n’employer que lorsque aucune balise porteuse de sens ne convient.

html

<div class="container">
    <p>Texte avec <span class="highlight">mot important</span></p>
</div>

Les liens

Un lien mène ailleurs : une autre page, une section de la page courante, une adresse e-mail. Son libellé doit se comprendre seul — « cliquez ici » ne dit rien hors de son contexte.

html

<a href="https://google.com">Google</a>
<a href="#accueil">Aller à la section</a>
<a href="mailto:test@email.com">Écrire</a>
<a href="doc.pdf" target="_blank">Nouvel onglet</a>

Les images

src indique le fichier, alt le décrit. L’attribut alt n’est pas facultatif : il est lu quand l’image ne s’affiche pas, et par les lecteurs d’écran. Une image purement décorative prend alt="", vide mais présent.

html

<img src="photo.png" alt="Description de l'image">

<img src="photo.png" alt="Photo" width="300" height="200">

<!-- Une image cliquable : un lien qui contient une image -->
<a href="grande-photo.png">
    <img src="miniature.png" alt="Agrandir la photo">
</a>

Les listes

ul quand l’ordre n’a pas d’importance, ol quand il en a. Dans les deux cas, chaque entrée est un li — et jamais un tiret saisi à la main.

html

<!-- Liste non ordonnée -->
<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
</ul>

<!-- Liste ordonnée -->
<ol>
    <li>Première étape</li>
    <li>Deuxième étape</li>
</ol>

Les tableaux

Un tableau sert à présenter des données croisées — pas à mettre une page en page. Cette confusion a coûté au web dix ans de mises en page illisibles.

Les balises d’un tableau

<table>: Le conteneur du tableau.
<caption>: Le titre du tableau, lu avant son contenu.
<thead>: La zone d’en-tête, avec les intitulés de colonnes.
<tbody>: Le corps, où vivent les données.
<tfoot>: Le pied, pour les totaux et les synthèses.
<tr>: Une ligne du tableau.
<th> et <td>: Une cellule d’en-tête, et une cellule de données.

Ce que ça donne à l’écran

Sans CSS, un tableau n’a ni bordure ni fond : seules les cellules d’en-tête sont en gras et centrées.

Un tableau complet

html

<!-- Tableau des étudiants -->
<table>

    <!-- Titre du tableau -->
    <caption>Liste des étudiants</caption>

    <!-- En-tête : scope indique ce que chaque en-tête gouverne -->
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Prénom</th>
            <th scope="col">Âge</th>
            <th scope="col">Spécialité</th>
            <th scope="col">Note moyenne</th>
        </tr>
    </thead>

    <!-- Corps du tableau -->
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Marie</td>
            <td>22</td>
            <td>Développement web</td>
            <td>16,5</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Pierre</td>
            <td>24</td>
            <td>Design UX/UI</td>
            <td>14,8</td>
        </tr>
        <tr>
            <td>Bernard</td>
            <td>Sophie</td>
            <td>23</td>
            <td>Cybersécurité</td>
            <td>17,2</td>
        </tr>
    </tbody>

    <!-- Pied du tableau -->
    <tfoot>
        <tr>
            <td colspan="4">Moyenne générale de la promotion</td>
            <td>16,17</td>
        </tr>
    </tfoot>

</table>

La mise en forme vient d’une feuille de style, jamais d’attributs sur le tableau.

Et sa mise en forme, en CSS

css

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid #999;
    padding: 0.5rem;
}

Trois lignes de CSS remplacent l’attribut border, retiré de HTML5 depuis longtemps.

Trois attributs utiles

colspan: Fait s’étendre une cellule sur plusieurs colonnes. Exemple : <td colspan="2">.
rowspan: Fait s’étendre une cellule sur plusieurs lignes. Exemple : <td rowspan="3">.
scope: Dit si un en-tête gouverne une colonne ou une ligne. Exemple : <th scope="col">.

Cinq réflexes

Donnez un <caption> : il annonce le tableau avant qu’on n’y entre.
Structurez avec <thead>, <tbody> et <tfoot>.
Employez <th> pour les en-têtes, jamais un <td> mis en gras.
Ajoutez scope à chaque <th> : sans lui, une cellule isolée n’a plus de contexte.
Mettez en forme en CSS, et non avec des attributs sur le tableau.

Projet guidé : la page des Avengers

Six étapes pour construire une page complète, du squelette au tableau de statistiques. Chacune montre le résultat attendu, rappelle les balises utiles et renvoie au cours.

Les images fournies

Téléchargez ces quatre fichiers et placez-les dans le dossier img de votre projet.

Les quatre fichiers sont au format PNG : écrivez bien img/ironman.png, et non .jpg.

La structure du projet

arborescence

projet_avengers/
├── css/
│   └── style.css
├── js/
│   └── script.js
├── img/
│   ├── equipe.png
│   ├── ironman.png
│   ├── captain.png
│   └── thor.png
└── avengers.html

Même organisation qu’au module précédent, avec un fichier avengers.html à la racine.

Créer le dossier

Dans votre dossier personnel, ouvrez le dossier web créé au module précédent.
À l’intérieur, créez un dossier nommé projet_avengers.
Ouvrez-le dans VS Code par le menu Fichier, puis Ouvrir le dossier.
Créez les trois sous-dossiers css, js et img.
Créez le fichier avengers.html à la racine, et téléchargez les quatre images dans img.

Votre dossier personnel est synchronisé avec OneDrive

Les mêmes précautions qu’au module précédent s’appliquent : attendez la coche verte avant d’éteindre le poste. Le module « Installer et configurer VS Code » les détaille.

Étape 1 : la structure de base
Ce que vous devez obtenir
- Un fichier avengers.html enregistré dans le projet
- La structure HTML5 complète, du DOCTYPE à la fermeture de html
- Le titre « Les Avengers » dans l’onglet du navigateur
- L’encodage UTF-8, pour que les accents s’affichent
Les balises à utiliser
- <!DOCTYPE html> — annonce HTML5
- <html lang="fr"> — la langue de la page
- <head> — les métadonnées
- <body> — le contenu visible
- <meta charset="UTF-8"> et <meta name="viewport">
- <title> — le titre de l’onglet
À relire dans le cours
- La section « Ma première page web » donne la structure complète.
- La section « Les bases du HTML » explique balises et attributs.
La marche à suivre
- Commencez par <!DOCTYPE html>.
- Ajoutez <html> avec l’attribut lang="fr".
- Créez le <head> et ses métadonnées.
- Donnez à <title> la valeur « Les Avengers — super-héros ».
- Créez le <body>, vide pour l’instant.
- Fermez toutes les balises dans l’ordre inverse de leur ouverture.
La page est encore vide, c’est normal

Le <body> ne contient rien : le navigateur affiche une page blanche. Seul le titre de l’onglet change. Il n’y a donc rien à montrer en aperçu — la suite arrive à l’étape 2.
Étape 2 : l’en-tête et la navigation
Sans CSS, les liens s’affichent les uns à la suite des autres, soulignés et bleus. C’est bien ce que vous devez voir.

Ce que vous devez obtenir
- Un en-tête <header> en haut du body
- Le titre principal <h1> avec « AVENGERS »
- Une navigation <nav> contenant quatre liens
- Des liens internes pointant vers les sections à venir
Les balises à utiliser
- <header> — l’en-tête de la page
- <h1> — le titre principal, unique dans la page
- <nav> — l’ensemble des liens de navigation
- <a href="#accueil"> — un lien interne
À relire dans le cours
- La section « Ma première page web » présente <header> et <nav>.
- La section « Les balises de contenu » traite de <h1> et de <a>.
- Reprenez le fichier de l’étape 1 : ce code va dans le <body>.
La marche à suivre
- Ouvrez le fichier avengers.html de l’étape 1.
- Dans le <body>, ajoutez une balise <header>.
- À l’intérieur, créez un <h1> contenant « AVENGERS ».
- Après le titre, ajoutez une balise <nav>.
- Dans <nav>, créez quatre liens vers #accueil, #heros, #pouvoirs et #contact.
- Ouvrez le fichier dans le navigateur pour vérifier.
Des liens vers des sections qui n’existent pas encore

Un lien interne pointe vers l’identifiant d’un élément, précédé d’un dièse. Les sections viendront aux étapes suivantes : les liens ne mèneront nulle part d’ici là, et c’est sans conséquence.
Étape 3 : la section d’accueil
L’image s’affiche à sa taille réelle, réduite ici par l’attribut width.

Ce que vous devez obtenir
- Un contenu principal <main>
- Une <section> portant id="accueil"
- Un titre <h2> et deux paragraphes
- Une image avec un attribut alt renseigné
- Un lien vers la section des héros
Les balises à utiliser
- <main> — le contenu principal, une seule fois par page
- <section id="accueil"> — une section identifiée
- <h2> — le titre de la section
- <p> et <strong> — les paragraphes et la mise en valeur
- <img src="img/equipe.png" alt="…"> — l’image de l’équipe
- <a href="#heros"> — le lien vers la galerie
À relire dans le cours
- La section « Ma première page web » présente <main> et <section>.
- La section « Les balises de contenu » couvre <h2>, <p> et <strong>.
- Les fiches « Les images » et « Les liens » donnent la syntaxe exacte.
- Ce code se place après la fermeture </header> de l’étape 2.
La marche à suivre
- Après </header>, ajoutez <main>.
- Dans <main>, créez une <section> avec id="accueil".
- Ajoutez un <h2> contenant « Bienvenue chez les Avengers ».
- Écrivez un premier <p>, en mettant « puissants héros » dans <strong>.
- Insérez l’image : src="img/equipe.png", avec un alt qui la décrit.
- Écrivez un second paragraphe de présentation.
- Terminez par un lien <a> vers #heros.
Étape 4 : la galerie des héros
Trois <article> identiques : un titre, une image, une description, puis la liste des pouvoirs.

Ce que vous devez obtenir
- Une <section> portant id="heros"
- Trois <article>, un par héros
- Une image par héros, avec son alt
- Une liste <ul> de pouvoirs pour chacun
Les balises à utiliser
- <section id="heros"> — la section de la galerie
- <article> — un contenu qui se tient seul : ici, un héros
- <h3> et <h4> — le nom du héros, puis « Pouvoirs et capacités »
- <img> — la photo, avec src, alt et width
- <ul> et <li> — la liste des pouvoirs
À relire dans le cours
- La section « Ma première page web » présente <section> et <article>.
- Les fiches « Les titres », « Les images » et « Les listes ».
- Ce code se place dans <main>, après la section d’accueil de l’étape 3.
La marche à suivre
- Dans <main>, après la section d’accueil, créez <section id="heros">.
- Ajoutez le titre <h2> « Nos super-héros ».
- Pour chaque héros, créez un <article>.
- Dans l’article, un <h3> avec le nom du héros.
- Puis une <img> : src="img/ironman.png", width="200", et un alt qui décrit la photo.
- Un <p> de description, le nom entre <strong>.
- Un <h4> « Pouvoirs et capacités : », suivi d’un <ul> de quatre <li>.
- Fermez l’</article>, et recommencez pour Captain America et Thor.
Des idées de pouvoirs
- Iron Man : armure technologique, vol supersonique, répulseurs d’énergie, intelligence artificielle JARVIS.
- Captain America : force surhumaine, bouclier en vibranium, endurance exceptionnelle, sens tactique.
- Thor : contrôle de la foudre, marteau Mjöllnir, force divine, vol.
Étape 5 : le tableau et le pied de page
Le tableau sans CSS : pas de bordure, des en-têtes en gras. La mise en forme viendra au module suivant.

Ce que vous devez obtenir
- Une <section> portant id="pouvoirs"
- Un tableau avec <caption>, <thead> et <tbody>
- Des en-têtes <th> munis de scope
- Un pied de page <footer> portant id="contact"
- La fermeture de <main> avant le footer
Les balises à utiliser
- <section id="pouvoirs"> — la section du tableau
- <table> et <caption> — le tableau et son titre
- <thead> et <tbody> — l’en-tête et le corps
- <th scope="col"> — une cellule d’en-tête de colonne
- <footer id="contact"> — le pied de page
- <hr> et <a href="mailto:…"> — la séparation et l’adresse
À relire dans le cours
- La section « Les tableaux » donne la structure complète et l’exemple.
- La fiche « Trois attributs utiles » explique scope.
- La fiche « Les liens » donne la syntaxe de mailto.
- Ce code complète les étapes 1 à 4.
La marche à suivre
- Dans <main>, après la galerie, créez <section id="pouvoirs">.
- Ajoutez un <h2> « Pouvoirs et statistiques », puis un paragraphe d’introduction.
- Créez le <table> et son <caption> « Statistiques de combat des Avengers ».
- Dans <thead>, une ligne <tr> de cinq <th scope="col"> : Héros, Force, Vitesse, Intelligence, Énergie.
- Dans <tbody>, trois lignes : un <td> pour le nom, quatre pour les statistiques.
- Fermez le tableau, la section, puis </main>.
- Après </main>, créez <footer id="contact"> avec un <h2>, trois <div> et un <hr>.
- Fermez </footer>, </body> puis </html>.
Des statistiques, sur 100
- Iron Man : force 85, vitesse 90, intelligence 100, énergie 100.
- Captain America : force 95, vitesse 85, intelligence 80, énergie 75.
- Thor : force 100, vitesse 95, intelligence 85, énergie 100.
Étape 6 : la page assemblée
Votre page terminée. Elle est austère : c’est normal, aucune feuille de style n’a encore été écrite.

Ce que vous devez obtenir
- Une page qui s’ouvre sans erreur dans le navigateur
- Une structure sémantique complète, de <header> à <footer>
- Une navigation interne qui atteint bien chaque section
- Les quatre images présentes dans le dossier img
Les balises que vous maîtrisez désormais
- Structure : <!DOCTYPE html>, <html>, <head>, <body>, <header>, <main>, <footer>, <section>, <article>, <nav>, <div>.
- Contenu : <h1> à <h4>, <p>, <strong>, <img>, <a>, <ul>, <li>.
- Tableaux : <table>, <caption>, <thead>, <tbody>, <tr>, <th>, <td>.
- Attributs : lang, charset, id, href, src, alt, width, scope, colspan.
Vérifiez avant de rendre
- Chaque balise ouverte est refermée, dans l’ordre inverse.
- Chaque <img> a un attribut alt qui décrit l’image.
- Chaque lien de la navigation atteint bien une section.
- Les noms de fichiers d’images se terminent bien par .png.
Pour finir
- Rassemblez le code des cinq étapes dans avengers.html.
- Vérifiez que les quatre images sont bien dans le dossier img.
- Ouvrez la page dans le navigateur et parcourez-la du haut en bas.
- Envoyez le dossier à fabrice@adnduweb.com.
Ce que la page n’a pas encore

Aucune couleur, aucune mise en page, aucune police choisie. C’est voulu : le HTML dit ce que sont les choses, le CSS dira à quoi elles ressemblent. Une page correcte en HTML seul est une page qui se stylise bien ensuite — et qui reste lisible même sans style.

Le même HTML, avec une feuille de style

Voici votre page une fois le CSS écrit. Comparez avec l’aperçu de l’étape 6 : le balisage est identique, au caractère près. Seule une feuille de style s’y ajoute — c’est tout l’intérêt d’avoir séparé la structure de la présentation.

Aucune balise n’a bougé depuis l’étape 6. Tout ce que vous voyez ici vient du CSS, que le module suivant vous apprendra à écrire.

Ce que la feuille de style apporte

Des couleurs, des dégradés et une typographie choisie
Une mise en page en grille, qui s’adapte à la largeur de l’écran
Des cartes, des ombres et des espacements réguliers
Des effets au survol et des transitions

Félicitations, votre première page est terminée

Vous savez désormais structurer une page complète : en-tête, contenu, tableau, pied de page. Les modules suivants approfondissent chacun un aspect du HTML — et le CSS donnera à tout cela son apparence.

Les liens Les formulaires Styliser avec CSS

Revoir l’installation de VS Code

HTML pour les débutants

Les bases du HTML

Les balises

Les balises sans contenu

Les attributs

Les commentaires

Un commentaire n’est pas secret

Ma première page web

La structure complète d’une page

Et ce que le navigateur en fait

Toujours dans notre projet

Les étapes de modification

Ce que fait chaque partie

DOCTYPE et html

L’élément head

L’élément body

Les balises de contenu

Les titres, de h1 à h6

Paragraphes et mise en valeur

div et span

Les liens

Les images

Les listes

Les tableaux

Les balises d’un tableau

Ce que ça donne à l’écran

Un tableau complet

Et sa mise en forme, en CSS

Trois attributs utiles

Cinq réflexes

Projet guidé : la page des Avengers

Les images fournies

La structure du projet

Créer le dossier

Votre dossier personnel est synchronisé avec OneDrive

Étape 1 : la structure de base

Ce que vous devez obtenir

Les balises à utiliser

À relire dans le cours

La marche à suivre

La page est encore vide, c’est normal

Étape 2 : l’en-tête et la navigation

Ce que vous devez obtenir

Les balises à utiliser

À relire dans le cours

La marche à suivre

Des liens vers des sections qui n’existent pas encore

Étape 3 : la section d’accueil

Ce que vous devez obtenir

Les balises à utiliser

À relire dans le cours

La marche à suivre

Étape 4 : la galerie des héros

Ce que vous devez obtenir

Les balises à utiliser

À relire dans le cours

La marche à suivre

Des idées de pouvoirs

Étape 5 : le tableau et le pied de page

Ce que vous devez obtenir

Les balises à utiliser

À relire dans le cours

La marche à suivre

Des statistiques, sur 100

Étape 6 : la page assemblée

Ce que vous devez obtenir

Les balises que vous maîtrisez désormais

Vérifiez avant de rendre

Pour finir

Ce que la page n’a pas encore

Le même HTML, avec une feuille de style

Ce que la feuille de style apporte

Félicitations, votre première page est terminée