📚 Cours HTML - Niveau 3ème

Introduction : Qu'est-ce que le HTML ?

HTML signifie HyperText Markup Language (Langage de Balisage Hypertexte). C'est le langage utilisé pour créer la structure et le contenu des pages web.

⚠️ Important : Le HTML n'est pas un langage de programmation, c'est un langage de balisage qui décrit la structure d'une page web.

Chapitre 1 : Structure de base d'une page HTML

1.1 Le squelette HTML

Toute page HTML suit une structure de base :

<!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.2 Explication des balises principales

<!DOCTYPE html> : Indique que c'est un document HTML5
<html> : Balise racine qui contient tout le document
<head> : Contient les métadonnées (informations sur la page)
<title> : Le titre qui apparaît dans l'onglet du navigateur
<body> : Contient tout le contenu visible de la page

💡 Astuce : Les balises HTML vont toujours par paires : une balise ouvrante <p> et une balise fermante </p>

Chapitre 2 : Les balises de texte

2.1 Les titres

Il existe 6 niveaux de titres en HTML :

<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>

2.2 Les paragraphes et le formatage

Balise	Description	Exemple
`<p>`	Paragraphe	<p>Un paragraphe de texte</p>
`<strong>`	Texte important (gras)	<strong>Texte important</strong>
`<em>`	Emphase (italique)	<em>Texte en italique</em>
`<br>`	Saut de ligne	Ligne 1<br>Ligne 2
`<hr>`	Ligne horizontale	<hr>

Chapitre 3 : Les liens et les images

3.1 Les liens hypertextes

Pour créer un lien, on utilise la balise <a> avec l'attribut href :

<!-- Lien vers un autre site -->
<a href="https://www.google.fr">Aller sur Google</a>

<!-- Lien vers une autre page du site -->
<a href="contact.html">Page de contact</a>

<!-- Lien email -->
<a href="mailto:exemple@email.com">Envoyer un email</a>

3.2 Les images

Pour insérer une image, on utilise la balise <img> :

<img src="photo.jpg" alt="Description de l'image" width="300" height="200">

Attributs importants :

src : Le chemin vers l'image
alt : Description alternative (important pour l'accessibilité)
width et height : Dimensions de l'image

Chapitre 4 : Les listes

4.1 Liste non ordonnée (à puces)

<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ul>

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

<ol>
    <li>Étape 1</li>
    <li>Étape 2</li>
    <li>Étape 3</li>
</ol>

Chapitre 5 : Les tableaux

Structure d'un tableau HTML :

<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Note</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Marie</td>
            <td>15</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Lucas</td>
            <td>17</td>
        </tr>
    </tbody>
</table>

💡 Vocabulaire :

<table> : Le tableau
<tr> : Une ligne (table row)
<th> : Une cellule d'en-tête (table header)
<td> : Une cellule de données (table data)

Chapitre 6 : Les formulaires (Introduction)

Les formulaires permettent de collecter des informations :

<form>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">

    <label for="email">Email :</label>
    <input type="email" id="email" name="email">

    <label for="message">Message :</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Envoyer</button>
</form>

Chapitre 7 : Les balises sémantiques HTML5

HTML5 a introduit des balises qui donnent du sens au contenu :

Balise	Utilisation
`<header>`	En-tête de la page ou d'une section
`<nav>`	Menu de navigation
`<main>`	Contenu principal
`<article>`	Contenu indépendant (article de blog, etc.)
`<section>`	Section thématique
`<footer>`	Pied de page

📝 Exercice 1 : Ma première page

Créez une page HTML qui contient :

Un titre principal avec votre nom
Un paragraphe de présentation
Une liste de vos 3 loisirs préférés
Une image
Un lien vers votre site web préféré

📝 Exercice 2 : Tableau de notes

Créez un tableau HTML avec :

3 colonnes : Matière, Coefficient, Note
5 lignes de données avec vos matières scolaires
Une ligne d'en-tête avec les titres des colonnes

📝 Exercice 3 : Formulaire d'inscription

Créez un formulaire d'inscription à un club avec :

Champs pour nom et prénom
Champ email
Liste déroulante pour choisir une activité
Zone de texte pour les commentaires
Bouton d'envoi

Conseils pour bien débuter

✅ Les bonnes pratiques :

Indentation : Utilisez des espaces ou tabulations pour rendre votre code lisible
Noms significatifs : Utilisez des noms clairs pour vos fichiers et attributs
Commentaires : Ajoutez des commentaires  pour expliquer votre code
Validation : Vérifiez que toutes vos balises sont bien fermées
Organisation : Rangez vos images dans un dossier "images"

Ressources pour aller plus loin

Validateur HTML du W3C pour vérifier votre code
MDN Web Docs pour une documentation complète
Codecademy ou FreeCodeCamp pour des exercices interactifs
W3Schools pour des exemples pratiques

🎯 Projet final

Pour valider vos connaissances, créez un mini-site de 3 pages sur un sujet qui vous passionne avec :

Une page d'accueil avec présentation
Une page galerie avec des images
Une page de contact avec un formulaire

Les pages doivent être reliées entre elles par des liens de navigation !