Introduction au HTML et à la création de pages Internet

HTML (HyperText Markup Language) est le langage qui permet de décrire le contenu d’une page web : titres, paragraphes, images, liens, listes, tableaux… C’est la base de tout site Internet, des petits sites personnels aux grandes plateformes.

Un développeur professionnel ne retient pas tout par cœur : il sait surtout comment est structurée une page HTML et où trouver l’information dont il a besoin.

1. Rôle de HTML, CSS et JavaScript

HTML décrit la structure et le contenu : titres, paragraphes, images, liens, formulaires…
CSS (Cascading Style Sheets) gère l’apparence : couleurs, tailles, polices, mise en page.
JavaScript rend la page interactive : boutons qui réagissent, formulaires intelligents, jeux, animations, etc.

Dans cette leçon, on se concentre sur HTML, la fondation de tout site web.

2. Structure d’un document HTML

Une page HTML moderne commence généralement comme ceci :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Ma première page HTML</title>
  </head>

  <body>
    <h1>Bonjour tout le monde !</h1>
    <p>Ceci est mon premier paragraphe en HTML.</p>
  </body>
</html>

Décomposons :

<!DOCTYPE html> : indique au navigateur que le document est du HTML5 (version actuelle du standard).
<html lang="fr"> ... </html> : enveloppe toute la page. L’attribut lang="fr" indique que le contenu est en français.
<head> ... </head> : contient les informations sur la page (titre, encodage, liens vers les fichiers CSS, etc.).
<meta charset="UTF-8" /> : précise l’encodage des caractères (permet d’afficher les accents correctement).
<title> ... </title> : texte affiché dans l’onglet du navigateur.
<body> ... </body> : tout ce qui sera visible dans la fenêtre du navigateur (titres, paragraphes, images, etc.).

3. Quelques balises HTML de base

3.1. Titres et paragraphes

<h1> à <h6> : titres, du plus important (h1) au moins important (h6).
<p> : paragraphe de texte.

<h1>Mon site web</h1>
<h2>Présentation</h2>
<p>Je découvre le HTML et je crée mes premières pages.</p>

3.2. Liens

Un lien se crée avec la balise <a> et l’attribut href :

<p>
  Visitez mon blog :
  <a href="https://code-informatique.blogspot.com" target="_blank">
    Code & Informatique
  </a>
</p>

href : adresse de la page cible (URL).
target="_blank" : ouvre le lien dans un nouvel onglet (optionnel).

3.3. Images

<img src="mon-image.jpg" alt="Description de l'image" />

src : chemin de l’image.
alt : description courte (importante pour l’accessibilité et le référencement).

3.4. Listes

Liste non ordonnée (puces) :

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Liste ordonnée (numérotée) :

<ol>
  <li>Ouvrir l'éditeur de texte</li>
  <li>Écrire du code HTML</li>
  <li>Enregistrer et ouvrir dans le navigateur</li>
</ol>

4. Bonnes pratiques professionnelles

Indentation claire : décale les balises imbriquées pour mieux voir la structure (2 ou 4 espaces par niveau).
Balises fermées correctement : toujours fermer ce qui est ouvert (<p>...</p>, <ul>...</ul>, etc.).
HTML sémantique : utiliser des balises qui décrivent le rôle du contenu (<header>, <main>, <footer>, <nav>, <section>, …) plutôt que tout mettre dans des <div>.
Attributs utiles : lang sur <html>, alt sur les images, etc.
Fichiers bien nommés : par exemple index.html pour la page d’accueil.

5. Mini TP : créer ta première page HTML

Voici un petit TP que tu peux réaliser chez toi ou en salle informatique.

Ouvre un éditeur de texte simple :
- sur Windows : Notepad, VS Code…
- sur macOS : TextEdit en mode texte brut, VS Code…

Copie ce squelette dans un fichier :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est ma première page web.</p>
  </body>
</html>

Enregistre le fichier sous le nom index.html dans un dossier (par exemple sur le bureau).
Ouvre le fichier index.html dans ton navigateur (double clic ou glisser-déposer).
Modifie ensuite le texte (titre, paragraphe, ajoute une liste, une image…), enregistre et rafraîchis la page pour voir le résultat.

6. Ressource complémentaire

Tu peux également suivre ce TP d’introduction au HTML pour approfondir :

👉 TP – Initiation au HTML (Université de Rennes 1)

7. QCM interactif : maîtriser les bases du HTML

Coche une réponse par question puis clique sur « Vérifier mes réponses ».

Quel est le rôle principal de HTML ?
a) Décrire la structure et le contenu d’une page web
b) Gérer uniquement les couleurs et les polices
c) Faire des animations et des jeux
Quelle balise contient le titre affiché dans l’onglet du navigateur ?
a) <h1>
b) <title>
c) <head>
Laquelle de ces écritures est un lien correct en HTML ?
a) <link>https://exemple.com</link>
b) <a href="https://exemple.com">Mon site</a>
c) <url>https://exemple.com</url>
À quoi sert l’attribut alt sur une balise <img> ?
a) À changer la couleur de l’image
b) À fournir une description textuelle de l’image
c) À agrandir automatiquement l’image
Pourquoi ajoute-t-on <meta charset="UTF-8"> dans <head> ?
a) Pour rendre la page plus rapide
b) Pour que les caractères spéciaux et les accents s’affichent correctement
c) Pour interdire les images

Rechercher dans ce blog

Code informatique