📚 Série HTML — Partie 1 sur 5

Découvrir et structurer sa première page web

Bienvenue dans cette série de tutoriels qui va vous apprendre le HTML depuis zéro — la première brique indispensable pour créer des sites web. Que vous rêviez de construire le site de votre future entreprise ou de devenir développeur web, tout commence ici.

Dans cette première partie, vous allez :

Comprendre ce qu'est réellement le HTML (sans jargon inutile)
Installer les deux seuls outils gratuits dont vous avez besoin
Écrire votre toute première page web
Comprendre chaque ligne de code que vous tapez

Durée estimée : 35 minutes. Prenez votre temps, testez chaque exemple vous-même — c'est en pratiquant qu'on retient.

1. Qu'est-ce que le HTML, concrètement ?

HTML signifie HyperText Markup Language — littéralement "langage de balisage hypertexte". Ce nom compliqué cache une idée très simple.

Imaginez que vous écrivez une lettre à la main. Vous soulignez un mot important, vous mettez un titre en haut, vous faites des paragraphes. Le HTML fait exactement la même chose, mais pour que ce soit un navigateur web (Chrome, Firefox, Safari) qui comprenne comment afficher votre contenu.

Concrètement, le HTML utilise des balises — des mots entourés de chevrons comme <titre> — pour dire au navigateur : "ceci est un titre", "ceci est un paragraphe", "ceci est une image".

💡 À retenir
Le HTML ne sert qu'à structurer le contenu (titres, textes, images, listes). Il ne sert PAS à faire de belles couleurs ou de jolies mises en page — ça, c'est le rôle du CSS, que nous verrons dans la partie 3 de cette série.

2. Les outils dont vous avez besoin (100% gratuits)

Contrairement à ce que beaucoup pensent, vous n'avez besoin d'aucun logiciel compliqué ni payant pour commencer. Deux outils suffisent :

Un éditeur de code : Visual Studio Code

C'est l'éditeur le plus utilisé au monde, et il est totalement gratuit. Téléchargez-le sur code.visualstudio.com et installez-le comme n'importe quel logiciel.

Un navigateur web : Google Chrome ou Firefox

Vous en avez probablement déjà un installé sur votre ordinateur. C'est lui qui affichera vos pages web.

💡 Pas besoin d'internet
Vous n'avez besoin d'aucune connexion internet pour écrire et tester vos pages HTML. Tout se passe en local, sur votre ordinateur.

3. Créer votre premier fichier HTML

Suivez ces étapes précisément :

Créez un nouveau dossier sur votre bureau, nommez-le mon-premier-site
Ouvrez Visual Studio Code
Cliquez sur Fichier → Ouvrir un dossier et sélectionnez le dossier que vous venez de créer
Créez un nouveau fichier nommé exactement index.html

⚠️ Important
Le nom index.html n'est pas un hasard. C'est le nom que les navigateurs et les serveurs web recherchent automatiquement en premier. Retenez bien ce nom — vous l'utiliserez pour chaque site que vous créerez.

4. Écrire la structure de base d'une page HTML

Copiez exactement ce code dans votre fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon premier site</title>
</head>
<body>

    <h1>Bonjour, je construis mon premier site !</h1>
    <p>Ceci est mon tout premier paragraphe en HTML.</p>

</body>
</html>

Maintenant, ouvrez ce fichier avec votre navigateur : faites un clic droit sur index.html dans votre dossier, puis Ouvrir avec → Chrome (ou Firefox).

Félicitations — vous venez de créer votre première page web. Regardons maintenant ce que signifie chaque ligne.

5. Comprendre chaque ligne de code

`<!DOCTYPE html>`

Cette ligne dit au navigateur : "ce document est écrit en HTML moderne (HTML5)". Elle doit toujours être la toute première ligne de votre fichier.

`<html lang="fr">...</html>`

La balise <html> contient tout le reste du document — c'est le conteneur principal. L'attribut lang="fr" indique que la page est en français, ce qui aide notamment Google et les lecteurs d'écran pour malvoyants.

Remarquez la structure : <html> s'ouvre au début et </html> se ferme à la fin, avec le / qui indique une fermeture. C'est la règle fondamentale du HTML : presque chaque balise qui s'ouvre doit se refermer.

`<head>...</head>`

Le "head" (tête) contient des informations invisibles à l'écran, mais essentielles : le titre de l'onglet, l'encodage des caractères, et plus tard les liens vers vos fichiers CSS.

`<meta charset="UTF-8">`

Cette ligne indique l'encodage des caractères. Sans elle, les accents français (é, à, ç) peuvent s'afficher comme des symboles bizarres. Ne l'oubliez jamais.

`<title>Mon premier site</title>`

C'est le texte qui apparaît dans l'onglet de votre navigateur. C'est aussi ce que Google affiche en gras dans les résultats de recherche — un élément important pour le référencement (SEO), que nous approfondirons plus tard.

`<body>...</body>`

Le "body" (corps) contient tout ce qui est visible sur votre page : textes, images, boutons, liens. C'est ici que vous passerez 90% de votre temps à coder.

`<h1>...</h1>`

C'est un titre de niveau 1 — le titre le plus important de votre page. Chaque page ne doit avoir qu'un seul <h1>, comme le titre principal d'un livre.

`<p>...</p>`

C'est un paragraphe de texte normal — l'équivalent d'un paragraphe dans un document Word.

6. Exercice pratique

Avant de passer à la partie 2, modifiez votre fichier index.html pour qu'il contienne :

Un titre <h1> avec le nom de votre future entreprise ou projet
Deux paragraphes <p> qui présentent ce que fait cette entreprise

Sauvegardez, puis rafraîchissez votre navigateur (touche F5) pour voir le résultat. Recommencez autant de fois que nécessaire — c'est en testant qu'on apprend.

💡 Astuce de pro
Après chaque modification de votre fichier HTML, sauvegardez (Ctrl+S) puis rafraîchissez votre navigateur (F5). Prenez cette habitude dès maintenant — vous la répéterez des milliers de fois dans votre parcours de développeur.

Ce que vous avez appris

✅ Le HTML sert à structurer le contenu d'une page web
✅ Comment installer et utiliser Visual Studio Code
✅ La structure de base obligatoire de tout document HTML
✅ Le rôle précis de chaque balise : html, head, body, title, h1, p

La suite de la série

Dans la Partie 2, nous découvrirons les balises essentielles pour structurer du texte, créer des listes, ajouter des liens et insérer des images — les briques dont vous avez besoin pour construire une vraie page de présentation.

👉 Prochaine étape : Partie 2 — Textes, listes, liens et images