Cours HTML
Introduction au HTML
Description
HTML (HyperText Markup Language) est le langage standard utilisé pour
créer des pages web.
Ce n’est pas un langage de programmation, mais un langage de balisage.
Il sert à structurer le contenu :
Titres
Paragraphes
Images
Liens
Tableaux
Formulaires
Les navigateurs (Chrome, Firefox…) lisent les fichiers .html et affichent le
contenu.
Objectifs pédagogiques
Comprendre le rôle du HTML
Savoir créer un fichier HTML
Comprendre la structure d’une page
Identifier les balises principales
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde</h1>
<p>Ceci est ma première page HTML.</p>
</body>
</html>
Explication :
→ indique HTML5
→ élément racine
→ informations techniques
→ titre de l’onglet
→ contenu visible
Activité
1. Ouvrir le Bloc-notes
2. Enregistrer le fichier sous [Link]
3. Copier le code
4. Ouvrir dans un navigateur
5. Modifier le texte
Exercices
Basique :
Créer une page affichant :
Votre nom
Votre ville
Votre profession
Avancé :
Créer une page avec :
Un titre principal
Un sous-titre
Deux paragraphes sur votre école ou entreprise
Les Balises et Éléments HTML
Description
Un élément HTML contient :
Une balise ouvrante
Du contenu
Une balise fermante
Exemple :
<p>Bonjour</p>
Certaines balises sont auto-fermantes :
<br>
<img>
Objectifs
Comprendre la structure des balises
Comprendre les balises imbriquées
Différencier éléments bloc et inline
Exemple
<h1>Titre principal</h1>
<p>Ceci est un paragraphe.</p>
<p>Texte <strong>important</strong>.</p>
Éléments bloc :
Éléments inline :
Activité
Créer :
3 titres
3 paragraphes
Un paragraphe avec texte en gras
Exercices
Basique :
Créer un article avec :
Un titre
Un sous-titre
Trois paragraphes
Avancé :
Créer un mini article structuré correctement avec imbrication.
Les Attributs HTML
Description
Les attributs donnent des informations supplémentaires aux balises.
Structure :
Contenu
Attributs fréquents :
href
src
alt
id
class
style
target
Objectifs
Ajouter correctement des attributs
Comprendre l’utilité de id et class
Utiliser les attributs sur images et liens
Exemple
<a href="[Link] target="_blank">
Visiter le site
</a>
Explication :
href → lien
target="_blank" → nouvelle page
Activité
Créer :
Un lien ouvrant dans un nouvel onglet
Une image avec largeur et texte alternatif
Exercices
Basique :
Ajouter :
2 liens
1 image avec alt
Avancé :
Créer une petite galerie d’images avec contrôle de largeur.
Titres et Paragraphes
Description
Les titres vont de à :
= plus important
= moins important
Ils structurent le contenu et améliorent le référencement.
Objectif
Utiliser la hiérarchie correcte
Structurer un texte proprement
Exemple
<h1>Mon Site</h1>
<h2>Présentation</h2>
<p>Je suis étudiant en informatique.</p>
<h2>Objectifs</h2>
<p>Devenir développeur web.</p>
Activité
Créer une page biographie :
pour le nom
pour sections
paragraphes explicatifs
Exercices
Basique :
Créer deux sections avec titres et paragraphes.
Avancé :
Créer un mini blog structuré logiquement.
Mise en Forme du Texte
Description
Balises importantes :
Important :
et < sont sémantiques.
Exemple
<p>Texte <strong>important</strong>.</p>
<p>Texte <em>mis en valeur</em>.</p>
<p>Texte <mark>surligné</mark>.</p>
Activité
Créer un paragraphe contenant :
Gras
Italique
Surlignage
Exercices
Avancé :
Rédiger un article avec :
Mots-clés surlignés
Texte supprimé
Note en petit
Les Listes
Description
Types :
Liste non ordonnée
Liste ordonnée
Liste de définition
Exemple
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
</ol>
Activité
Créer :
Liste de courses
Étapes de création d’un site
Exercices
Avancé :
Créer liste imbriquée avec catégories et sous-catégories.
Les Tableaux
Description
Balises principales :
Exemple
<table border="1">
<tr>
<th>Nom</th>
<th>Note</th>
</tr>
<tr>
<td>Ali</td>
<td>15</td>
</tr>
</table>
Activité
Créer tableau des notes d’élèves.
Exercices
Avancé :
Créer emploi du temps (6 lignes, 5 colonnes).
Liens et Images
Description
Liens → navigation
Images → enrichissement visuel
Exemple
<a href="[Link]">Page suivante</a>
<img src="[Link]" alt="Ma photo" width="200">
Activité
Créer :
Menu navigation
Galerie images
Exercices
Avancé :
Images cliquables menant vers version agrandie.
Les Formulaires
Description
Permettent de récupérer les informations utilisateurs.
Balises :
Exemple
<form>
<label>Nom :</label>
<input type="text">
<br>
<label>Email :</label>
<input type="email">
<br>
<button type="submit">Envoyer</button>
</form>
Activité
Créer formulaire contact complet.
Exercices
Avancé :
Formulaire d’inscription :
Nom
Email
Mot de passe
Sexe (radio)
Centres d’intérêt (checkbox)
Liste déroulante
Structure moderne & Balises Sémantiques
Description
Balises modernes :
Améliorent :
Organisation
SEO
Accessibilité
Exemple
<header>
<h1>Mon Site</h1>
</header>
<nav>
<a href="#">Accueil</a>
<a href="#">Contact</a>
</nav>
<main>
<section>
<h2>Bienvenue</h2>
<p>Contenu principal.</p>
</section>
</main>
<footer>
<p>© 2026</p>
</footer>