Cours 1 : Introduction Interactive au HTML
Bienvenue dans le monde du HTML !
Aujourd’hui, vous allez découvrir la base de toute page web : le HTML. Ce cours est interactif, donc posez vos questions à tout moment. Allons-y ! 🚀
1. Comprendre le HTML
Qu’est-ce que HTML ?
HTML (HyperText Markup Language) est le langage utilisé pour structurer le contenu des pages web.
- HyperText : Des liens qui connectent les pages entre elles.
- Markup Language : Utilise des balises pour organiser le contenu.
Exemple :
<h1>Bienvenue sur ma page</h1>
<p>Ceci est un paragraphe.</p>
Question que vous pourriez poser :
toi : Pourquoi utilise-t-on des balises pour structurer une page ?
Réponse : Les balises permettent au navigateur de comprendre le rôle de chaque élément (titre, texte, image, etc.) et de l’afficher correctement.
2. Les Pré-requis
De quoi avez-vous besoin pour démarrer ?
- Ordinateur : Peu importe la marque ou le système (Windows, macOS, Linux).
- Éditeur de Code :
- Recommandé : Visual Studio Code.
- Alternatifs : Sublime Text, Atom.
- Navigateur Web : Google Chrome ou Firefox pour tester vos pages.
Question que vous pourriez poser :
toi : Puis-je utiliser mon téléphone pour coder en HTML ?
Réponse : Oui, mais ce sera moins pratique. Vous pouvez utiliser des applications comme Termux ou une plateforme en ligne comme CodePen pour tester votre code.
3. Structure de base d’un fichier HTML
Regardons un exemple simple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma Première Page</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Ceci est ma première page HTML.</p>
</body>
</html>
Description des éléments :
<!DOCTYPE html>: Déclare que le document est en HTML5.<html>: Balise racine contenant tout le contenu.<head>: Section des métadonnées (titre, encodage, etc.).<body>: Contenu visible sur la page (texte, images, etc.).
Question que vous pourriez poser :
User : Que se passe-t-il si je ne mets pas <!DOCTYPE html> ?
Réponse : Le navigateur fonctionnera en mode « compatibilité » et risque de mal interpréter certaines fonctionnalités modernes.
4. Les Balises Essentielles
Voici quelques balises incontournables pour commencer :
| Balise | Utilité | Exemple |
|---|---|---|
<h1> à <h6> |
Titres, du plus important au moins. | <h1>Titre principal</h1> |
<p> |
Paragraphe de texte. | <p>Ceci est un texte.</p> |
<a> |
Lien hypertexte. | <a href="https://example.com">Lien</a> |
<img> |
Image. | <img src="image.jpg" alt="Texte alternatif"> |
5. Tester Votre Code HTML
-
Créer un fichier HTML :
- Ouvrez votre éditeur de code.
- Copiez le code suivant :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Exemple HTML</title> </head> <body> <h1>Bonjour, AcademyHub !</h1> <p>Ceci est ma première page HTML.</p> </body> </html> - Enregistrez le fichier avec l’extension
.html(ex. :index.html).
-
Ouvrir dans un navigateur :
- Faites un clic droit sur le fichier et sélectionnez Ouvrir avec > Navigateur.
Question que vous pourriez poser :
Toi : Mon fichier ne s’ouvre pas. Pourquoi ?
Réponse : Assurez-vous que l’extension est bien .html et que vous utilisez un navigateur pour l’ouvrir.
6. Exercice Pratique
Créez une page HTML avec :
- Un titre principal (
<h1>). - Un paragraphe (
<p>).
Question que vous pourriez poser :
User : Et si je veux ajouter un deuxième paragraphe ?
Réponse : Ajoutez simplement une autre balise <p> avec un chemin différent pour l’image.
Conclusion
Dans ce cours, vous avez appris :
- Ce qu’est le HTML.
- Les éléments de base pour démarrer.
- Comment tester votre code.
🎯 Prochain cours : Cours 2 : HTML pour Débutants – Maîtrisez Titres, Paragraphes et Images – academyhub.tech
