Programmer

Sa première page web

HTML donne le sens, CSS donne l'apparence. Comprendre cette séparation, c'est comprendre le web.

3 hDès 11 ansFiche G5

01Objectif

À la fin de cette séquence : Écrire une page structurée en HTML, la mettre en forme avec CSS, et la publier en ligne gratuitement.

02L'essentiel

HTML décrit le sens, pas l'apparence

<h1> signifie « titre principal », pas « gros texte ». Cette distinction rend la page lisible par les moteurs de recherche et les lecteurs d'écran.

CSS habille sans toucher au contenu

Un seul fichier de style change l'apparence de cent pages. Mélanger style et contenu, c'est se condamner à tout refaire à chaque évolution.

Tout est une boîte

Chaque élément occupe un rectangle avec un contenu, une marge intérieure, une bordure et une marge extérieure. Comprendre ces quatre couches résout la majorité des problèmes d'alignement.

Penser mobile d'abord

La majorité des visites vient d'un téléphone. Une page conçue pour un grand écran puis rétrécie est presque toujours mauvaise ; l'inverse fonctionne.

03Le schéma

Les trois couches du web, dans l'ordre où on les apprend. Une page sans CSS reste lisible ; une page dont le sens est porté par le CSS ne l'est pas.

04Le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ma page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Bonjour</h1>
  <p>Ma premiere page web.</p>
</body>
</html>

05À retenir

HTML pour le sens, CSS pour l'apparence. Ne jamais confondre.
Un titre est un titre, pas un texte agrandi : les balises ont une signification.
Mobile d'abord : concevez pour le petit écran, élargissez ensuite.

06Exercice

Créez une page de présentation de vous-même : un titre, deux paragraphes, une image, une liste. Ajoutez une feuille de style qui change les couleurs et la police. Publiez-la gratuitement sur un hébergeur de pages statiques.

Indice — Enregistrez le fichier avec l'extension .html et ouvrez-le directement dans le navigateur : aucun logiciel spécial n'est nécessaire.

07Vérification des acquis

Pourquoi ne pas utiliser un titre juste pour grossir du texte ?

Parce que la balise porte un sens exploité par les moteurs de recherche et les lecteurs d'écran. Pour grossir sans hiérarchiser, on utilise le CSS.

À quoi sert la séparation HTML / CSS ?

À changer l'apparence de tout un site depuis un seul fichier, et à garder un contenu compréhensible même si le style ne se charge pas.