STUDIO CORTEX
Commencer
Lecture libre, sans compteChapitre 1 · Introduction au HTML et structure de base

Création de votre première page web

~3 min de lectureLeçon 3 sur 22Apprendre le HTML - Bases solides pour débutants

Création de votre première page web

En bref
  • 1Apprenez la structure HTML de base avec balises essentielles
  • 2Créez votre première page web étape par étape avec code complet
  • 3Validez votre compréhension avec des outils de développeur intégrés

Introduction

Félicitations ! Vous êtes sur le point de créer votre toute première page web. C'est un moment important dans votre apprentissage du HTML, car vous allez voir concrètement comment le code que vous écrivez se transforme en une page visible dans votre navigateur.

Structure complète d'une page HTML

Avant de nous lancer dans la création, visualisons ensemble l'architecture d'une page HTML complète :

Chargement du diagramme...

Cette structure suit un ordre logique et obligatoire que tous les navigateurs comprennent parfaitement.

Étape 1 : Préparation de l'environnement

Création du fichier

  1. Ouvrez votre éditeur de texte (Notepad++, Visual Studio Code, Sublime Text...)
  2. Créez un nouveau fichier vide
  3. Enregistrez-le immédiatement sous le nom ma-premiere-page.html

⚠️ Attention : L'extension .html est cruciale ! Sans elle, votre navigateur ne reconnaîtra pas le fichier comme une page web.

Organisation des fichiers

Type de fichierExtensionRôle
Page web.htmlStructure et contenu
Feuilles de style.cssApparence visuelle
Scripts.jsInteractivité

Étape 2 : Le squelette HTML de base

Commençons par taper exactement ce code dans votre fichier :

html
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Ma première page web</title>
7</head>
8<body>
9    
10</body>
11</html>

Explication ligne par ligne

  • <!DOCTYPE html> : Indique au navigateur que c'est du HTML5 moderne
  • <html lang="fr"> : Balise racine avec langue française
  • <head> : Section invisible contenant les métadonnées
  • <meta charset="UTF-8"> : Encodage pour les caractères spéciaux (é, à, ç...)
  • <meta name="viewport"...> : Adaptation aux écrans mobiles
  • <title> : Titre affiché dans l'onglet du navigateur
  • <body> : Section visible où placer tout le contenu

💡 À retenir : Le <head> contient les informations POUR le navigateur, le <body> contient les informations POUR l'utilisateur.

Étape 3 : Ajout du contenu principal

Maintenant, ajoutons du contenu dans la section <body>. Remplacez le contenu entre <body> et </body> par :

html
1<body>
2    <h1>Bonjour, je suis [Votre Prénom] !</h1>
3    
4    <h2>À propos de moi</h2>
5    <p>Je découvre le monde passionnant du développement web. Cette page représente mes premiers pas dans l'apprentissage du HTML.</p>
6    
7    <h2>Mes objectifs</h2>
8    <ul>
9        <li>Maîtriser les bases du HTML</li>
10        <li>Apprendre le CSS pour styliser mes pages</li>
11        <li>Créer mon premier site web complet</li>
12    </ul>
13    
14    <h2>Contact</h2>
15    <p>Vous pouvez me retrouver sur <a href="https://www.linkedin.com">LinkedIn</a> ou m'envoyer un email à contact@exemple.com</p>
16    
17    <p><em>Dernière mise à jour : [Date du jour]</em></p>
18</body>

Structure du contenu

Chargement du diagramme...

Étape 4 : Test de votre page

  1. Enregistrez votre fichier (Ctrl+S)
  2. Ouvrez votre explorateur de fichiers
  3. Double-cliquez sur ma-premiere-page.html
  4. Votre page s'ouvre dans votre navigateur par défaut !

Le saviez-vous ?

Le premier site web de l'histoire, créé par Tim Berners-Lee en 1991, contenait seulement du texte et quelques liens. Il expliquait ce qu'était le World Wide Web et comment créer des pages web - exactement ce que vous faites maintenant !

— Le site original existe encore : http://info.cern.ch/hypertext/WWW/TheProject.html

Personnalisation et amélioration

Ajout d'une image

Pour enrichir votre page, ajoutons une image après votre titre principal :

html
1<h1>Bonjour, je suis [Votre Prénom] !</h1>
2<img src="photo-profil.jpg" alt="Ma photo de profil" width="200">

⚠️ Attention : L'attribut alt est obligatoire ! Il décrit l'image pour les personnes malvoyantes et s'affiche si l'image ne charge pas.

Organisation avec des sections

Pour une meilleure structure, entourez vos contenus dans des balises <section> :

html
1<section>
2    <h2>À propos de moi</h2>
3    <p>Je découvre le monde passionnant du développement web...</p>
4</section>

Validation de votre travail

Voici les points à vérifier sur votre page terminée :

Élément✓ PrésentFonction
DOCTYPE⬜Déclare le type de document
Balise html avec lang⬜Définit la langue du contenu
Section head complète⬜Métadonnées importantes
Titre dans head⬜Apparaît dans l'onglet
Contenu dans body⬜Ce que voit l'utilisateur
Balises fermées⬜Structure correcte

🎯 En pratique : Utilisez les outils de développeur de votre navigateur (F12) pour inspecter votre code et voir comment il est interprété.

Outils de débogage

Pour vérifier si votre code est correct :

  1. Clic droit sur votre page → Inspecter l'élément
  2. Recherchez les erreurs en rouge dans la console
  3. Vérifiez que toutes vos balises sont bien fermées
Chargement du diagramme...

Points clés à retenir

💡 À retenir : Une page HTML valide suit TOUJOURS cette structure : DOCTYPE, html, head, body. C'est un standard universel que respectent tous les sites web.

⚠️ Attention : Chaque balise ouverte doit être fermée ! <p> se ferme avec </p>, <h1> avec </h1>, etc. L'oubli de fermeture peut casser l'affichage.

🎯 En pratique : Prenez l'habitude de valider votre HTML avec les outils de développeur. C'est un réflexe professionnel indispensable.

Code complet final

Voici le code complet de votre première page web :

html
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Ma première page web</title>
7</head>
8<body>
9    <h1>Bonjour, je suis [Votre Prénom] !</h1>
10    
11    <section>
12        <h2>À propos de moi</h2>
13        <p>Je découvre le monde passionnant du développement web. Cette page représente mes premiers pas dans l'apprentissage du HTML.</p>
14    </section>
15    
16    <section>
17        <h2>Mes objectifs</h2>
18        <ul>
19            <li>Maîtriser les bases du HTML</li>
20            <li>Apprendre le CSS pour styliser mes pages</li>
21            <li>Créer mon premier site web complet</li>
22        </ul>
23    </section>
24    
25    <section>
26        <h2>Contact</h2>
27        <p>Vous pouvez me retrouver sur <a href="https://www.linkedin.com">LinkedIn</a> ou m'envoyer un email à contact@exemple.com</p>
28    </section>
29    
30    <footer>
31        <p><em>Dernière mise à jour : [Date du jour]</em></p>
32    </footer>
33</body>
34</html>

Félicitations ! Vous venez de créer votre première page web complète et fonctionnelle. Cette base solide va vous servir pour tous vos futurs projets HTML.