Comment réaliser une page web ? En trois temps : dessiner les zones de la page, décrire son contenu dans un fichier HTML, puis régler son apparence avec une feuille CSS. Un éditeur de texte et un navigateur suffisent pour travailler sur votre ordinateur ; l’hébergement et le nom de domaine n’interviennent qu’au moment de la publication.
Le plan avant le code : les cinq zones d’une page
Une page web se dessine avant de s’écrire : quelques rectangles au crayon décident de ce qui va où, sans rien casser. La documentation MDN Web Docs décrit cinq zones communes à la plupart des pages :
- l’en-tête, bandeau du haut qui porte le nom ou le logo ;
- la barre de navigation, qui mène aux grandes parties du site ;
- le contenu principal, propre à la page ;
- la barre latérale, facultative, pour les informations voisines ;
- le pied de page, avec les coordonnées et les mentions.
Dessinez d’abord la version téléphone, où les zones s’empilent en une colonne, puis la version large. Pour un site entier, MDN conseille d’esquisser chaque page puis de relier les encadrés par des flèches qui figurent les parcours des visiteurs.
Ce croquis resservira si le projet grandit : arborescence et maquettes sont aussi les premières étapes d’un chantier confié à un prestataire, détaillées dans notre article sur le déroulé et le coût d’une création de site.
HTML : décrire le contenu, pas son apparence
HTML, pour HyperText Markup Language, est un langage de balisage : chaque balise annonce la nature d’un contenu, titre, liste ou navigation. Couleurs et positions relèvent du CSS. Cette séparation rend la structure de page lisible par les navigateurs, les moteurs de recherche et les lecteurs d’écran.
Une balise par zone du croquis
Le tableau associe chaque zone à ses balises sémantiques, qui remplacent les blocs anonymes <div> partout où un rôle précis existe.
| Zone du croquis | Balise HTML | Rôle |
|---|---|---|
| En-tête | <header> | Bandeau d’identité |
| Navigation | <nav> | Liens principaux |
| Contenu principal | <main> | Contenu propre à la page |
| Bloc autonome ou partie | <article>, <section> | Contenu complet ou subdivision |
| Barre latérale | <aside> | Information connexe |
| Pied de page | <footer> | Coordonnées et mentions |
MDN précise que <main> ne s’emploie qu’une fois par page, placé directement dans <body>.
Titres, paragraphes et listes
HTML compte six niveaux de titres, de <h1> à <h6>. MDN Web Docs recommande un seul <h1> par page, puis une descente sans saut : un <h3> se range sous un <h2>, jamais directement sous le <h1>. Les utilisateurs de lecteurs d’écran passent de titre en titre pour parcourir la page, et un niveau manquant les égare.
Le texte courant va dans des paragraphes <p>, les énumérations dans des listes <ul> ou <ol>. Cette hiérarchie aide aussi les moteurs, un point développé dans notre panorama des pratiques qui font progresser le référencement naturel.
Liens et images : les attributs qui comptent
Un lien s’écrit avec <a> et son attribut href : href="contact.html" pointe vers une page du même dossier. Son texte annonce la destination, jamais un vague « cliquez ici ».
Une image s’insère avec <img>, et son attribut alt porte le texte alternatif. Selon MDN, les lecteurs d’écran le lisent à leurs utilisateurs, et le navigateur l’affiche si l’image ne se charge pas. Pour une image purement décorative, laissez alt="" vide. Les attributs width et height réservent sa place avant le chargement : le texte ne saute plus. Côté format, MDN recommande WebP et AVIF, plus performants que JPEG, PNG ou GIF.
Comment réaliser une page web pas à pas : le premier fichier
L’éditeur de code et le navigateur
Votre poste de travail tient en deux logiciels. MDN Web Docs travaille principalement avec Visual Studio Code, mais tout éditeur qui enregistre du texte brut convient, contrairement à un traitement de texte. MDN conseille aussi d’installer au moins deux navigateurs reposant sur des moteurs de rendu différents, par exemple Chrome et Firefox : un défaut d’affichage peut ne toucher qu’un seul moteur.
Le dossier du projet et le fichier index.html
Créez un dossier mon-site contenant un fichier index.html, le nom qu’emploie MDN pour la page d’accueil et que la plupart des serveurs affichent par défaut. Ajoutez les sous-dossiers images et styles. Nommez vos fichiers en minuscules, sans espaces ni accents : un espace oublié produit vite un lien cassé.
Le squelette du document
Saisissez cette base dans index.html, ici pour un atelier de reliure imaginaire :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Atelier de reliure</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<p>Atelier de reliure</p>
<nav><a href="contact.html">Contact</a></nav>
</header>
<main class="colonnes">
<article>
<h1>Restauration de livres anciens</h1>
<img src="images/etabli.webp" alt="Livre ouvert sur un établi" width="800" height="533">
</article>
<aside><p>Du mardi au samedi.</p></aside>
</main>
<footer><p>Mentions légales</p></footer>
</body>
</html>
Le doctype, que MDN qualifie de préambule obligatoire, place le navigateur en mode standard. L’attribut lang déclare la langue, ce qui guide la synthèse vocale. La balise meta charset fixe l’encodage UTF-8, qui couvre les accents. Le contenu de <title> s’affiche dans l’onglet et souvent dans les résultats de recherche.
Ouvrir, observer, valider
Double-cliquez sur le fichier : il s’ouvre dans votre navigateur, à recharger après chaque enregistrement. Un clic droit sur un élément donne accès aux outils de développement, qui montrent sa boîte et les règles CSS appliquées.
Pour contrôler le code, le service de validation du balisage du W3C accepte une adresse web, un fichier ou du code collé, puis signale les balises mal fermées ou mal imbriquées. Visez zéro erreur avant de passer au style.
CSS : donner forme à la page
Relier la feuille de style
CSS, pour Cascading Style Sheets, s’écrit dans un fichier séparé, styles/style.css, relié par la ligne <link> du squelette. Une même feuille de style sert alors toutes les pages du site.
Une règle se lit en trois morceaux : un sélecteur, p pour tous les paragraphes par exemple, puis entre accolades des déclarations qui associent une propriété à une valeur, comme color: #1f2937; pour la couleur du texte.
Le modèle de boîte
MDN le formule clairement : la plupart des éléments se comportent comme des boîtes empilées ou posées côte à côte. Autour du contenu, padding crée l’espace intérieur, border trace la bordure, margin écarte la boîte de ses voisines.
Une mise en page qui tient sur téléphone
Sans la ligne meta viewport, un téléphone affiche la page dans une fenêtre virtuelle plus large que son écran, puis la réduit : MDN cite un écran de 640 pixels qui reçoit une page calculée sur 980. N’y ajoutez jamais user-scalable=no, car bloquer le zoom empêche les personnes malvoyantes de lire, rappelle MDN.
Partez ensuite de l’affichage sur mobile, en une colonne, et ajoutez des colonnes quand la largeur le permet. MDN appelle cette approche mobile first :
img {
max-width: 100%;
height: auto;
}
.colonnes {
display: grid;
gap: 1.5rem;
}
@media (min-width: 48rem) {
.colonnes {
grid-template-columns: 2fr 1fr;
}
}
Sur écran étroit, article et barre latérale s’empilent ; au-delà de 48rem, la grille les place côte à côte. Cette valeur n’a rien d’officiel : fixez le point de rupture là où votre contenu commence à se tasser. La règle max-width: 100% empêche une image de déborder.
Accessibilité : les contrôles avant publication
Le W3C publie le référentiel international, les WCAG, dont la version 2.2 est une recommandation officielle depuis le 5 octobre 2023. Quatre principes la structurent : un contenu perceptible, utilisable, compréhensible et robuste. Avant de publier votre première page web, vérifiez au minimum ces points :
- chaque image informative possède un texte alternatif (critère 1.1.1) ;
- le texte offre un contraste d’au moins 4,5 pour 1 avec son fond, 3 pour 1 pour les grands caractères (critère 1.4.3) ;
- les zones cliquables mesurent au moins 24 pixels CSS de côté ou restent assez espacées (critère 2.5.8, ajouté en version 2.2) ;
- la touche Tab atteint tous les liens dans un ordre logique, avec un repère visible ;
- le texte reste lisible agrandi à 200 %.
Rattrapés après coup sur un site entier, ces contrôles pèsent bien plus lourd.
Mettre la page en ligne : hébergement et nom de domaine
Publier une page suppose deux éléments, que distingue MDN Web Docs :
- un hébergement, espace de fichiers loué sur le serveur d’une société spécialisée, qui transmet vos pages aux visiteurs ;
- un domaine, l’adresse unique du site, loué pour une ou plusieurs années auprès d’un bureau d’enregistrement.
Selon l’offre d’hébergement web, les fichiers s’envoient par glisser-déposer, par un logiciel FTP, par un dépôt de code ou en ligne de commande. MDN cite aussi GitHub Pages, qui héberge des sites statiques sous une adresse du service ou sous votre propre domaine. Vérifiez que l’hébergeur fournit un certificat de sécurité, pour une adresse en https.
Choisissez un nom de domaine court, facile à dicter, enregistré au nom de votre entreprise. Une page isolée devient vite un petit site, et le temps de maintenance pèse alors davantage : notre comparatif pour arbitrer entre un site fait maison et un site confié à un professionnel aide à trancher. Premier objectif réaliste : une page d’accueil validée sans erreur par le W3C, lisible sur téléphone, chaque image dotée de son texte alternatif.
Questions fréquentes sur la première page HTML
Le Bloc-notes de Windows suffit-il pour écrire une page HTML ?
Oui, car il enregistre du texte brut. Dans la fenêtre d’enregistrement, choisissez le type « Tous les fichiers », nommez le fichier index.html et vérifiez que l’encodage est UTF-8, celui que déclare la balise meta charset recommandée par MDN. Sinon, une extension .txt cachée risque de s’ajouter au nom. Un éditeur de code reste plus confortable, avec la coloration et la fermeture automatique des balises.
Réaliser une page web gratuitement, est-ce possible ?
Pour apprendre, oui. Les navigateurs courants et de nombreux éditeurs se téléchargent sans frais, et MDN Web Docs cite des éditeurs en ligne comme CodePen ou JSFiddle, gratuits pour leurs fonctions de base, où une page s’écrit et se partage sans installation. Une adresse à votre nom suppose en revanche de louer un domaine et, en général, un hébergement : comparez les offres renouvellement compris.
Faut-il apprendre JavaScript pour une première page ?
Non. HTML structure le contenu, CSS gère la présentation, et ces deux langages suffisent pour une page de présentation ou de contact. JavaScript ajoute des comportements : menu qui se replie, formulaire vérifié avant envoi, contenu qui change sans recharger la page. Le parcours d’apprentissage de MDN Web Docs l’aborde d’ailleurs après HTML et CSS. Une page statique propre servira de socle au script ajouté plus tard.