HTML : Les Bases
Qu'est-ce que HTML ?
HTML (HyperText Markup Language) est le langage qui structure le contenu des pages web. Ce n'est pas un langage de programmation, mais un langage de balisage : il utilise des "balises" pour définir les différents éléments d'une page.
Analogie : Si une page web était une maison, HTML serait la structure (murs, portes, fenêtres), CSS serait la décoration (couleurs, papier peint), et JavaScript serait l'électricité (interactivité).
Structure d'un document HTML
Tout document HTML suit une structure précise. Voici le squelette minimal :
<!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 web.</p>
</body>
</html>1<!DOCTYPE html>
Déclare que c'est un document HTML5
2<html>
Racine du document, contient tout
3<head>
Métadonnées (titre, CSS, scripts...)
4<body>
Contenu visible de la page
Les balises essentielles
Une balise HTML s'écrit entre chevrons : <balise>. La plupart ont une balise ouvrante et fermante : <p>...</p>
<html>Racine du document HTML<head>Métadonnées (titre, CSS, etc.)<body>Contenu visible de la page<h1> à <h6>Titres (h1 = plus important)<p>Paragraphe de texte<a>Lien hypertexte<img>Image<div>Division/conteneur générique<span>Conteneur en ligne<ul>/<ol>Listes non ordonnée/ordonnéeExemples de code
<!-- Titres de différents niveaux -->
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section</h3>
<!-- Paragraphe et mise en forme -->
<p>Ceci est un <strong>texte important</strong>
et ceci est en <em>italique</em>.</p>
<!-- Lien hypertexte -->
<a href="https://example.com">Cliquez ici</a>
<!-- Image -->
<img src="photo.jpg" alt="Description">
<!-- Liste à puces -->
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
</ul>Balises auto-fermantes
Certaines balises n'ont pas de contenu et sont "auto-fermantes" :
<img>Images
<br>Retour à la ligne
<hr>Ligne horizontale
<input>Champ de formulaire
<meta>Métadonnées
<link>Lien vers CSS
À toi de jouer !
Crée ta première page HTML en suivant ces étapes :
- 1Ouvre un éditeur de texte (Notepad, VS Code...)
- 2Copie le code de la structure de base ci-dessus
- 3Enregistre le fichier avec l'extension
.html - 4Double-clique sur le fichier pour l'ouvrir dans ton navigateur
Défi : Ajoute un sous-titre <h2>, une liste <ul> avec 3 éléments, et un lien <a> vers ton site préféré !
Quiz : Teste tes connaissances
5 questions pour vérifier ce que tu as appris sur HTML
À retenir
- HTML structure le contenu avec des balises
- Structure minimale :
<html>,<head>,<body> - Balises principales :
<h1-h6>,<p>,<a>,<img> - Les attributs ajoutent des infos :
href,src,alt
