Guide de Formation HTML Complet
De la Base à la Création d'une Page Web Complète
📚 Table des Matières
📖 1. Introduction au HTML
📖 2. Structure de Base
📖 3. Balises Essentielles
📖 4. Mise en Forme du Texte
📖 5. Listes et Navigation
📖 6. Images et Médias
📖 7. Liens et Navigation
📖 8. Tableaux
📖 9. Formulaires
📖 10. Structure Sémantique
📖 11. CSS de Base
📖 12. Projet Final
📖 13. Exercices Pratiques
1. Introduction au HTML 🌐
Qu'est-ce que le HTML ?
HTML (HyperText Markup Language) est le langage de base pour créer des pages web. Il utilise des balises
pour structurer et organiser le contenu.
Comment ça fonctionne ?
Le HTML utilise des balises entourées de chevrons < > :
Balise ouvrante : <balise>
Contenu : le texte ou autres éléments
Balise fermante : </balise>
Exemple simple :
<h1>Mon Titre Principal</h1>
<p>Ceci est un paragraphe de texte.</p>
👁️ Rendu visuel :
Mon Titre Principal
Ceci est un paragraphe de texte.
2. Structure de Base d'une Page HTML 🏗️
Toute page HTML a la même structure de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de ma page</title>
</head>
<body>
<!-- Le contenu visible de la page va ici -->
<h1>Bienvenue sur ma page</h1>
<p>Voici mon premier paragraphe.</p>
</body>
</html>
🔍 Explication des éléments :
Élément Rôle
<!DOCTYPE html> Déclare que c'est du HTML5
<html> Élément racine de la page
<head> Informations sur la page (non visibles)
<meta charset="UTF-8"> Encodage des caractères
<title> Titre affiché dans l'onglet du navigateur
<body> Contenu visible de la page
3. Balises Essentielles 📝
Titres (H1 à H6)
<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
👁️ Rendu visuel :
Titre Principal
Sous-titre
Sous-sous-titre
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Paragraphes
<p>Ceci est un paragraphe. Il peut contenir plusieurs phrases.</p>
<p>Ceci est un autre paragraphe, séparé du premier.</p>
Sauts de ligne
<p>Première ligne<br>
Deuxième ligne<br>
Troisième ligne</p>
💡 Conseil : Utilisez les titres dans l'ordre hiérarchique pour une meilleure accessibilité et SEO.
4. Mise en Forme du Texte ✨
Balises de mise en forme courantes
<p>Texte <strong>en gras</strong> avec <em>emphase</em></p>
<p><u>Texte souligné</u> et <mark>texte surligné</mark></p>
<p><small>Petit texte</small> et texte <sup>exposant</sup></p>
<p>Formule chimique : H<sub>2</sub>O</p>
<p><del>Texte barré</del> et <ins>texte inséré</ins></p>
👁️ Rendu visuel :
Texte en gras avec emphase
Texte souligné et texte surligné
Petit texte et texte exposant
Formule chimique : H2O
Texte barré et texte inséré
Citation et code
<blockquote>
"Ceci est une citation importante."
</blockquote>
<p>Pour afficher du code, utilisez <code><balise></code></p>
👁️ Rendu visuel :
"Ceci est une citation importante."
Pour afficher du code, utilisez <balise>
5. Listes et Navigation 📋
Liste non ordonnée (puces)
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
👁️ Rendu visuel :
Premier élément
Deuxième élément
Troisième élément
Liste ordonnée (numérotée)
<ol>
<li>Première étape</li>
<li>Deuxième étape</li>
<li>Troisième étape</li>
</ol>
👁️ Rendu visuel :
1. Première étape
2. Deuxième étape
3. Troisième étape
Liste de définitions
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
👁️ Rendu visuel :
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
6. Images et Médias 🖼️
Insérer une image
<img src="photo.jpg" alt="Description de l'image" width="300" height="200">
⚠️ Important : Attributs importants :
src : chemin vers l'image
alt : description pour l'accessibilité
width et height : dimensions en pixels
Exemple avec figure et légende
<figure>
<img src="paysage.jpg" alt="Beau paysage de montagne">
<figcaption>Paysage de montagne au coucher du soleil</figcaption>
</figure>
Vidéo et audio
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo.
</video>
<audio controls>
<source src="musique.mp3" type="audio/mp3">
Votre navigateur ne supporte pas l'audio.
</audio>
7. Liens et Navigation 🔗
Types de liens
<!-- Lien externe -->
<a href="https://www.google.com">Aller sur Google</a>
<!-- Lien dans un nouvel onglet -->
<a href="https://www.example.com" target="_blank">Nouvel onglet</a>
<!-- Lien interne -->
<a href="page2.html">Aller à la page 2</a>
<a href="#section1">Aller à la section 1</a>
<!-- Liens spéciaux -->
<a href="mailto:contact@example.com">Envoyer un email</a>
<a href="tel:+33123456789">Appeler</a>
Menu de navigation
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
💡 Conseil : Utilisez des descriptions claires pour vos liens et l'attribut alt pour les liens-images.
8. Tableaux 📊
Tableau simple
<table>
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marie</td>
<td>25</td>
<td>Paris</td>
</tr>
<tr>
<td>Paul</td>
<td>30</td>
<td>Lyon</td>
</tr>
</tbody>
</table>
👁️ Rendu visuel :
Nom Âge Ville
Marie 25 Paris
Paul 30 Lyon
Tableau avec fusion de cellules
<table>
<tr>
<th colspan="2">Informations Personnelles</th>
</tr>
<tr>
<td>Nom</td>
<td>Dupont</td>
</tr>
<tr>
<td>Prénom</td>
<td>Jean</td>
</tr>
</table>
⚠️ Important : Attributs utiles :
colspan : fusion de colonnes
rowspan : fusion de lignes
thead , tbody , tfoot : structure sémantique
9. Formulaires 📝
Formulaire de base
<form action="traitement.php" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message" rows="4"></textarea>
<input type="submit" value="Envoyer">
</form>
Types d'input courants
