web/html/README.md

# Le HTML

> Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu des pages web. Il définit ce que contient une page : texte, images, liens, etc.

---------

## Qu'est-ce que le HTML ?

Le HTML n'est **pas un langage de programmation** : c'est un **langage de description** (ou de balisage). Il ne permet pas de faire des calculs, des boucles ou des conditions comme Python. Son rôle est de **structurer** le contenu d'une page web.

### Principe des balises

Le HTML fonctionne avec des **balises** (tags en anglais). Une balise est un mot-clé entouré de chevrons `< >`.

La plupart des balises fonctionnent **par paires** :
- Une balise **ouvrante** : `<balise>`
- Une balise **fermante** : `</balise>` (avec un slash `/`)

```html
<p>Ceci est un paragraphe</p>
```

Certaines balises sont **auto-fermantes** (elles n'ont pas de contenu) :
```html
<br>      <!-- Retour à la ligne -->
<hr>      <!-- Ligne horizontale -->
<img>     <!-- Image -->
```

### Les attributs

Les balises peuvent avoir des **attributs** qui apportent des informations supplémentaires :

```html
<balise attribut="valeur">Contenu</balise>
```

Exemples :
```html
<a href="https://www.google.fr">Lien vers Google</a>
<img src="photo.jpg" alt="Description de l'image">
```

---------

## Structure d'une page HTML5

Toute page HTML5 doit respecter une structure minimale :

```html
<!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 -->
</body>
</html>
```

### Explication de chaque élément

| Élément | Rôle |
|---------|------|
| `<!DOCTYPE html>` | Indique au navigateur qu'il s'agit d'un document HTML5 |
| `<html lang="fr">` | Élément racine, contient toute la page. L'attribut `lang` précise la langue |
| `<head>` | En-tête du document (métadonnées, titre, liens CSS...). **Non visible** |
| `<meta charset="UTF-8">` | Définit l'encodage des caractères (UTF-8 pour les accents) |
| `<title>` | Titre affiché dans l'onglet du navigateur |
| `<body>` | Corps du document. **Contenu visible** de la page |

### Arborescence HTML

Une page HTML forme une **arborescence** (structure en arbre) :

```
html
├── head
│   ├── meta
│   └── title
└── body
    ├── h1
    ├── p
    └── ...
```

Les éléments à l'intérieur d'autres éléments sont appelés **enfants**. L'élément qui les contient est leur **parent**.

---------

## Les balises de texte

### Titres

HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` (le moins important) :

```html
<h1>Titre principal</h1>
<h2>Titre de section</h2>
<h3>Sous-titre</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
```

> **Bonne pratique** : Une page ne devrait avoir qu'un seul `<h1>`. Les titres doivent être hiérarchiques (pas de `<h3>` après un `<h1>` sans `<h2>` entre les deux).

### Paragraphes et mise en forme

```html
<p>Un paragraphe de texte.</p>

<strong>Texte important (gras)</strong>
<em>Texte mis en emphase (italique)</em>
<mark>Texte surligné</mark>
<del>Texte barré</del>
<sub>Texte en indice</sub> (comme H<sub>2</sub>O)
<sup>Texte en exposant</sup> (comme 2<sup>3</sup>)
```

### Retour à la ligne et séparation

```html
<br>    <!-- Retour à la ligne simple -->
<hr>    <!-- Ligne de séparation horizontale -->
```

---------

## Les liens hypertextes

Les liens sont créés avec la balise `<a>` (anchor = ancre) :

```html
<a href="https://www.exemple.fr">Texte du lien</a>
```

### Attributs importants

| Attribut | Rôle |
|----------|------|
| `href` | URL de destination (obligatoire) |
| `target="_blank"` | Ouvre le lien dans un nouvel onglet |
| `title` | Info-bulle au survol |

### Types de liens

```html
<!-- Lien externe (vers un autre site) -->
<a href="https://www.google.fr">Google</a>

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

<!-- Lien vers un fichier -->
<a href="documents/rapport.pdf">Télécharger le PDF</a>

<!-- Lien vers une ancre (même page) -->
<a href="#section2">Aller à la section 2</a>

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

### Créer une ancre

Pour créer un point d'ancrage dans la page :

```html
<h2 id="section2">Section 2</h2>
```

Le lien `<a href="#section2">` amènera directement à cet élément.

---------

## Les images

Les images sont insérées avec la balise `<img>` (auto-fermante) :

```html
<img src="chemin/vers/image.jpg" alt="Description de l'image">
```

### Attributs obligatoires

| Attribut | Rôle |
|----------|------|
| `src` | Chemin vers l'image (obligatoire) |
| `alt` | Texte alternatif si l'image ne charge pas (obligatoire pour l'accessibilité) |

### Attributs optionnels

```html
<img src="photo.jpg" alt="Photo de vacances" width="400" height="300">
```

### Formats d'images courants

| Format | Extension | Utilisation |
|--------|-----------|-------------|
| JPEG | .jpg, .jpeg | Photos |
| PNG | .png | Images avec transparence |
| GIF | .gif | Animations simples |
| SVG | .svg | Images vectorielles |
| WebP | .webp | Format moderne (compression optimisée) |

### Image cliquable (lien)

```html
<a href="https://www.exemple.fr">
    <img src="logo.png" alt="Logo">
</a>
```

---------

## Les listes

### Liste non ordonnée (à puces)

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

Rendu :
- Premier élément
- Deuxième élément
- Troisième élément

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

```html
<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ol>
```

Rendu :
1. Premier élément
2. Deuxième élément
3. Troisième élément

### Liste de définitions

```html
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>
```

### Listes imbriquées

```html
<ul>
    <li>Fruits
        <ul>
            <li>Pomme</li>
            <li>Banane</li>
        </ul>
    </li>
    <li>Légumes</li>
</ul>
```

---------

## Les tableaux

Les tableaux servent à présenter des données tabulaires (et non pour la mise en page !).

```html
<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Jean</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Marie</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
```

### Structure d'un tableau

| Balise | Rôle |
|--------|------|
| `<table>` | Conteneur du tableau |
| `<thead>` | En-tête du tableau |
| `<tbody>` | Corps du tableau |
| `<tfoot>` | Pied du tableau (optionnel) |
| `<tr>` | Ligne (table row) |
| `<th>` | Cellule d'en-tête (table header) |
| `<td>` | Cellule de données (table data) |

### Fusionner des cellules

```html
<!-- Fusionner 2 colonnes -->
<td colspan="2">Cellule sur 2 colonnes</td>

<!-- Fusionner 3 lignes -->
<td rowspan="3">Cellule sur 3 lignes</td>
```

---------

## Les balises sémantiques HTML5

HTML5 introduit des balises **sémantiques** qui donnent du sens à la structure :

```html
<header>    <!-- En-tête de page ou de section -->
<nav>       <!-- Menu de navigation -->
<main>      <!-- Contenu principal (unique par page) -->
<article>   <!-- Contenu autonome (article, post...) -->
<section>   <!-- Section thématique -->
<aside>     <!-- Contenu annexe (barre latérale) -->
<footer>    <!-- Pied de page ou de section -->
```

### Exemple de structure sémantique

```html
<body>
    <header>
        <h1>Mon Site</h1>
        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Mon premier article</h2>
            <p>Contenu de l'article...</p>
        </article>
    </main>

    <aside>
        <h3>À propos</h3>
        <p>Informations complémentaires</p>
    </aside>

    <footer>
        <p>&copy; 2024 - Mon Site</p>
    </footer>
</body>
```

### Pourquoi utiliser les balises sémantiques ?

1. **Accessibilité** : Les lecteurs d'écran comprennent mieux la structure
2. **SEO** : Les moteurs de recherche indexent mieux le contenu
3. **Maintenabilité** : Le code est plus lisible et compréhensible

---------

## Les formulaires

Les formulaires permettent de collecter des informations auprès de l'utilisateur.

### Structure de base

```html
<form action="traitement.php" method="post">
    <!-- Champs du formulaire -->
    <button type="submit">Envoyer</button>
</form>
```

| Attribut | Rôle |
|----------|------|
| `action` | URL vers laquelle les données seront envoyées |
| `method` | Méthode HTTP (`get` ou `post`) |

### Les champs de saisie

```html
<!-- Champ texte -->
<input type="text" name="nom" placeholder="Votre nom">

<!-- Email -->
<input type="email" name="email" placeholder="votre@email.fr">

<!-- Mot de passe -->
<input type="password" name="mdp">

<!-- Nombre -->
<input type="number" name="age" min="0" max="120">

<!-- Date -->
<input type="date" name="naissance">

<!-- Case à cocher -->
<input type="checkbox" name="newsletter" id="news">
<label for="news">S'inscrire à la newsletter</label>

<!-- Bouton radio -->
<input type="radio" name="genre" value="homme" id="h">
<label for="h">Homme</label>
<input type="radio" name="genre" value="femme" id="f">
<label for="f">Femme</label>

<!-- Zone de texte multiligne -->
<textarea name="message" rows="5" cols="30"></textarea>

<!-- Liste déroulante -->
<select name="pays">
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
</select>
```

### Les labels

Les `<label>` améliorent l'accessibilité et l'ergonomie :

```html
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">
```

L'attribut `for` du label doit correspondre à l'`id` du champ.

### Attributs utiles des inputs

| Attribut | Rôle |
|----------|------|
| `required` | Champ obligatoire |
| `placeholder` | Texte d'indication (grisé) |
| `value` | Valeur par défaut |
| `disabled` | Champ désactivé |
| `readonly` | Champ en lecture seule |
| `maxlength` | Nombre max de caractères |

---------

## Les commentaires

Les commentaires ne sont pas affichés par le navigateur :

```html
<!-- Ceci est un commentaire -->

<!--
    Commentaire
    sur plusieurs
    lignes
-->
```

> **Utilité** : Documenter le code, désactiver temporairement du code, organiser les sections.

---------

## Les caractères spéciaux

Certains caractères doivent être encodés en HTML :

| Caractère | Code HTML | Nom |
|-----------|-----------|-----|
| `<` | `&lt;` | Less than |
| `>` | `&gt;` | Greater than |
| `&` | `&amp;` | Ampersand |
| `"` | `&quot;` | Quote |
| ` ` (espace insécable) | `&nbsp;` | Non-breaking space |
| `©` | `&copy;` | Copyright |
| `€` | `&euro;` | Euro |

---------

## Bonnes pratiques

1. **Toujours indenter** le code pour une meilleure lisibilité
2. **Utiliser des noms de fichiers** en minuscules, sans accents ni espaces
3. **Valider son code** avec le validateur W3C : https://validator.w3.org/
4. **Utiliser les balises sémantiques** plutôt que des `<div>` partout
5. **Toujours mettre un `alt`** sur les images
6. **Séparer structure (HTML) et présentation (CSS)**

---------

## Exercices

### Exercice 1 : Structure de base

Créez une page HTML5 valide contenant :
- Un titre de page "Ma première page"
- Un titre principal `<h1>` "Bienvenue"
- Un paragraphe de présentation
- Un lien vers Google

### Exercice 2 : Les listes

Créez une page présentant :
- Une liste non ordonnée de vos 5 films préférés
- Une liste ordonnée des étapes pour faire des pâtes

### Exercice 3 : Images et liens

Créez une page contenant :
- Une image de votre choix avec un texte alternatif approprié
- Un lien vers Wikipédia qui s'ouvre dans un nouvel onglet
- L'image doit être cliquable et mener vers la source de l'image

### Exercice 4 : Tableau

Créez un tableau HTML présentant les informations suivantes :

| Matière | Coefficient | Moyenne |
|---------|-------------|---------|
| Maths | 4 | 14 |
| NSI | 4 | 16 |
| Français | 3 | 12 |

### Exercice 5 : Formulaire

Créez un formulaire d'inscription contenant :
- Un champ pour le nom (obligatoire)
- Un champ pour l'email (obligatoire)
- Un champ pour le mot de passe
- Une case à cocher pour accepter les CGU
- Un bouton d'envoi

### Exercice 6 : Page complète

Créez une page web complète sur un sujet de votre choix avec :
- Une structure sémantique (header, nav, main, footer)
- Un menu de navigation avec au moins 3 liens
- Un article avec titre, paragraphes et une image
- Un tableau récapitulatif
- Un pied de page avec copyright

> **[Voir la correction](./CORRECTION.md)**

---------

## Ressources

- [MDN - HTML](https://developer.mozilla.org/fr/docs/Web/HTML) : Documentation complète
- [W3Schools - HTML](https://www.w3schools.com/html/) : Tutoriels et exemples
- [Validateur W3C](https://validator.w3.org/) : Vérifier la validité du code

---------

Auteur : Florian Mathieu

Licence CC BY-SA

<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.
modifications des tp, exercices, ajouts d'indications en JS, d'exemples en gloutons, 3 semaines de boulot enfin voilà 2026-01-15 18:32:27 +01:00			`# Le HTML`

			`> Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu des pages web. Il définit ce que contient une page : texte, images, liens, etc.`

			`---------`

			`## Qu'est-ce que le HTML ?`

			`Le HTML n'est pas un langage de programmation : c'est un langage de description (ou de balisage). Il ne permet pas de faire des calculs, des boucles ou des conditions comme Python. Son rôle est de structurer le contenu d'une page web.`

			`### Principe des balises`

			Le HTML fonctionne avec des balises (tags en anglais). Une balise est un mot-clé entouré de chevrons `< >`.

			`La plupart des balises fonctionnent par paires :`
			- Une balise ouvrante : `<balise>`
			- Une balise fermante : `</balise>` (avec un slash `/`)

			```html
			`<p>Ceci est un paragraphe</p>`
			```

			`Certaines balises sont auto-fermantes (elles n'ont pas de contenu) :`
			```html
			`<br> <!-- Retour à la ligne -->`
			`<hr> <!-- Ligne horizontale -->`
			`<img> <!-- Image -->`
			```

			`### Les attributs`

			`Les balises peuvent avoir des attributs qui apportent des informations supplémentaires :`

			```html
			`<balise attribut="valeur">Contenu</balise>`
			```

			`Exemples :`
			```html
			`<a href="https://www.google.fr">Lien vers Google</a>`
			`<img src="photo.jpg" alt="Description de l'image">`
			```

			`---------`

			`## Structure d'une page HTML5`

			`Toute page HTML5 doit respecter une structure minimale :`

			```html
			`<!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 -->`
			`</body>`
			`</html>`
			```

			`### Explication de chaque élément`

			`\| Élément \| Rôle \|`
			`\|---------\|------\|`
			\| `<!DOCTYPE html>` \| Indique au navigateur qu'il s'agit d'un document HTML5 \|
			\| `<html lang="fr">` \| Élément racine, contient toute la page. L'attribut `lang` précise la langue \|
			\| `<head>` \| En-tête du document (métadonnées, titre, liens CSS...). Non visible \|
			\| `<meta charset="UTF-8">` \| Définit l'encodage des caractères (UTF-8 pour les accents) \|
			\| `<title>` \| Titre affiché dans l'onglet du navigateur \|
			\| `<body>` \| Corps du document. Contenu visible de la page \|

			`### Arborescence HTML`

			`Une page HTML forme une arborescence (structure en arbre) :`

			```
			`html`
			`├── head`
			`│ ├── meta`
			`│ └── title`
			`└── body`
			`├── h1`
			`├── p`
			`└── ...`
			```

			`Les éléments à l'intérieur d'autres éléments sont appelés enfants. L'élément qui les contient est leur parent.`

			`---------`

			`## Les balises de texte`

			`### Titres`

			HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` (le moins important) :

			```html
			`<h1>Titre principal</h1>`
			`<h2>Titre de section</h2>`
			`<h3>Sous-titre</h3>`
			`<h4>Titre de niveau 4</h4>`
			`<h5>Titre de niveau 5</h5>`
			`<h6>Titre de niveau 6</h6>`
			```

			> Bonne pratique : Une page ne devrait avoir qu'un seul `<h1>`. Les titres doivent être hiérarchiques (pas de `<h3>` après un `<h1>` sans `<h2>` entre les deux).

			`### Paragraphes et mise en forme`

			```html
			`<p>Un paragraphe de texte.</p>`

			`<strong>Texte important (gras)</strong>`
			`<em>Texte mis en emphase (italique)</em>`
			`<mark>Texte surligné</mark>`
			`<del>Texte barré</del>`
			`<sub>Texte en indice</sub> (comme H<sub>2</sub>O)`
			`<sup>Texte en exposant</sup> (comme 2<sup>3</sup>)`
			```

			`### Retour à la ligne et séparation`

			```html
			`<br> <!-- Retour à la ligne simple -->`
			`<hr> <!-- Ligne de séparation horizontale -->`
			```

			`---------`

			`## Les liens hypertextes`

			Les liens sont créés avec la balise `<a>` (anchor = ancre) :

			```html
			`<a href="https://www.exemple.fr">Texte du lien</a>`
			```

			`### Attributs importants`

			`\| Attribut \| Rôle \|`
			`\|----------\|------\|`
			\| `href` \| URL de destination (obligatoire) \|
			\| `target="_blank"` \| Ouvre le lien dans un nouvel onglet \|
			\| `title` \| Info-bulle au survol \|

			`### Types de liens`

			```html
			`<!-- Lien externe (vers un autre site) -->`
			`<a href="https://www.google.fr">Google</a>`

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

			`<!-- Lien vers un fichier -->`
			`<a href="documents/rapport.pdf">Télécharger le PDF</a>`

			`<!-- Lien vers une ancre (même page) -->`
			`<a href="#section2">Aller à la section 2</a>`

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

			`### Créer une ancre`

			`Pour créer un point d'ancrage dans la page :`

			```html
			`<h2 id="section2">Section 2</h2>`
			```

			Le lien `<a href="#section2">` amènera directement à cet élément.

			`---------`

			`## Les images`

			Les images sont insérées avec la balise `<img>` (auto-fermante) :

			```html
			`<img src="chemin/vers/image.jpg" alt="Description de l'image">`
			```

			`### Attributs obligatoires`

			`\| Attribut \| Rôle \|`
			`\|----------\|------\|`
			\| `src` \| Chemin vers l'image (obligatoire) \|
			\| `alt` \| Texte alternatif si l'image ne charge pas (obligatoire pour l'accessibilité) \|

			`### Attributs optionnels`

			```html
			`<img src="photo.jpg" alt="Photo de vacances" width="400" height="300">`
			```

			`### Formats d'images courants`

			`\| Format \| Extension \| Utilisation \|`
			`\|--------\|-----------\|-------------\|`
			`\| JPEG \| .jpg, .jpeg \| Photos \|`
			`\| PNG \| .png \| Images avec transparence \|`
			`\| GIF \| .gif \| Animations simples \|`
			`\| SVG \| .svg \| Images vectorielles \|`
			`\| WebP \| .webp \| Format moderne (compression optimisée) \|`

			`### Image cliquable (lien)`

			```html
			`<a href="https://www.exemple.fr">`
			`<img src="logo.png" alt="Logo">`
			`</a>`
			```

			`---------`

			`## Les listes`

			`### Liste non ordonnée (à puces)`

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

			`Rendu :`
			`- Premier élément`
			`- Deuxième élément`
			`- Troisième élément`

			`### Liste ordonnée (numérotée)`

			```html
			`<ol>`
			`<li>Premier élément</li>`
			`<li>Deuxième élément</li>`
			`<li>Troisième élément</li>`
			`</ol>`
			```

			`Rendu :`
			`1. Premier élément`
			`2. Deuxième élément`
			`3. Troisième élément`

			`### Liste de définitions`

			```html
			`<dl>`
			`<dt>HTML</dt>`
			`<dd>HyperText Markup Language</dd>`
			`<dt>CSS</dt>`
			`<dd>Cascading Style Sheets</dd>`
			`</dl>`
			```

			`### Listes imbriquées`

			```html
			`<ul>`
			`<li>Fruits`
			`<ul>`
			`<li>Pomme</li>`
			`<li>Banane</li>`
			`</ul>`
			`</li>`
			`<li>Légumes</li>`
			`</ul>`
			```

			`---------`

			`## Les tableaux`

			`Les tableaux servent à présenter des données tabulaires (et non pour la mise en page !).`

			```html
			`<table>`
			`<thead>`
			`<tr>`
			`<th>Nom</th>`
			`<th>Prénom</th>`
			`<th>Âge</th>`
			`</tr>`
			`</thead>`
			`<tbody>`
			`<tr>`
			`<td>Dupont</td>`
			`<td>Jean</td>`
			`<td>25</td>`
			`</tr>`
			`<tr>`
			`<td>Martin</td>`
			`<td>Marie</td>`
			`<td>30</td>`
			`</tr>`
			`</tbody>`
			`</table>`
			```

			`### Structure d'un tableau`

			`\| Balise \| Rôle \|`
			`\|--------\|------\|`
			\| `<table>` \| Conteneur du tableau \|
			\| `<thead>` \| En-tête du tableau \|
			\| `<tbody>` \| Corps du tableau \|
			\| `<tfoot>` \| Pied du tableau (optionnel) \|
			\| `<tr>` \| Ligne (table row) \|
			\| `<th>` \| Cellule d'en-tête (table header) \|
			\| `<td>` \| Cellule de données (table data) \|

			`### Fusionner des cellules`

			```html
			`<!-- Fusionner 2 colonnes -->`
			`<td colspan="2">Cellule sur 2 colonnes</td>`

			`<!-- Fusionner 3 lignes -->`
			`<td rowspan="3">Cellule sur 3 lignes</td>`
			```

			`---------`

			`## Les balises sémantiques HTML5`

			`HTML5 introduit des balises sémantiques qui donnent du sens à la structure :`

			```html
			`<header> <!-- En-tête de page ou de section -->`
			`<nav> <!-- Menu de navigation -->`
			`<main> <!-- Contenu principal (unique par page) -->`
			`<article> <!-- Contenu autonome (article, post...) -->`
			`<section> <!-- Section thématique -->`
			`<aside> <!-- Contenu annexe (barre latérale) -->`
			`<footer> <!-- Pied de page ou de section -->`
			```

			`### Exemple de structure sémantique`

			```html
			`<body>`
			`<header>`
			`<h1>Mon Site</h1>`
			`<nav>`
			`<ul>`
			`<li><a href="index.html">Accueil</a></li>`
			`<li><a href="contact.html">Contact</a></li>`
			`</ul>`
			`</nav>`
			`</header>`

			`<main>`
			`<article>`
			`<h2>Mon premier article</h2>`
			`<p>Contenu de l'article...</p>`
			`</article>`
			`</main>`

			`<aside>`
			`<h3>À propos</h3>`
			`<p>Informations complémentaires</p>`
			`</aside>`

			`<footer>`
			`<p>© 2024 - Mon Site</p>`
			`</footer>`
			`</body>`
			```

			`### Pourquoi utiliser les balises sémantiques ?`

			`1. Accessibilité : Les lecteurs d'écran comprennent mieux la structure`
			`2. SEO : Les moteurs de recherche indexent mieux le contenu`
			`3. Maintenabilité : Le code est plus lisible et compréhensible`

			`---------`

			`## Les formulaires`

			`Les formulaires permettent de collecter des informations auprès de l'utilisateur.`

			`### Structure de base`

			```html
			`<form action="traitement.php" method="post">`
			`<!-- Champs du formulaire -->`
			`<button type="submit">Envoyer</button>`
			`</form>`
			```

			`\| Attribut \| Rôle \|`
			`\|----------\|------\|`
			\| `action` \| URL vers laquelle les données seront envoyées \|
			\| `method` \| Méthode HTTP (`get` ou `post`) \|

			`### Les champs de saisie`

			```html
			`<!-- Champ texte -->`
			`<input type="text" name="nom" placeholder="Votre nom">`

			`<!-- Email -->`
			`<input type="email" name="email" placeholder="votre@email.fr">`

			`<!-- Mot de passe -->`
			`<input type="password" name="mdp">`

			`<!-- Nombre -->`
			`<input type="number" name="age" min="0" max="120">`

			`<!-- Date -->`
			`<input type="date" name="naissance">`

			`<!-- Case à cocher -->`
			`<input type="checkbox" name="newsletter" id="news">`
			`<label for="news">S'inscrire à la newsletter</label>`

			`<!-- Bouton radio -->`
			`<input type="radio" name="genre" value="homme" id="h">`
			`<label for="h">Homme</label>`
			`<input type="radio" name="genre" value="femme" id="f">`
			`<label for="f">Femme</label>`

			`<!-- Zone de texte multiligne -->`
			`<textarea name="message" rows="5" cols="30"></textarea>`

			`<!-- Liste déroulante -->`
			`<select name="pays">`
			`<option value="fr">France</option>`
			`<option value="be">Belgique</option>`
			`<option value="ch">Suisse</option>`
			`</select>`
			```

			`### Les labels`

			Les `<label>` améliorent l'accessibilité et l'ergonomie :

			```html
			`<label for="prenom">Prénom :</label>`
			`<input type="text" id="prenom" name="prenom">`
			```

			L'attribut `for` du label doit correspondre à l'`id` du champ.

			`### Attributs utiles des inputs`

			`\| Attribut \| Rôle \|`
			`\|----------\|------\|`
			\| `required` \| Champ obligatoire \|
			\| `placeholder` \| Texte d'indication (grisé) \|
			\| `value` \| Valeur par défaut \|
			\| `disabled` \| Champ désactivé \|
			\| `readonly` \| Champ en lecture seule \|
			\| `maxlength` \| Nombre max de caractères \|

			`---------`

			`## Les commentaires`

			`Les commentaires ne sont pas affichés par le navigateur :`

			```html
			`<!-- Ceci est un commentaire -->`

			`<!--`
			`Commentaire`
			`sur plusieurs`
			`lignes`
			`-->`
			```

			`> Utilité : Documenter le code, désactiver temporairement du code, organiser les sections.`

			`---------`

			`## Les caractères spéciaux`

			`Certains caractères doivent être encodés en HTML :`

			`\| Caractère \| Code HTML \| Nom \|`
			`\|-----------\|-----------\|-----\|`
			\| `<` \| `<` \| Less than \|
			\| `>` \| `>` \| Greater than \|
			\| `&` \| `&` \| Ampersand \|
			\| `"` \| `"` \| Quote \|
			\| ` ` (espace insécable) \| ` ` \| Non-breaking space \|
			\| `©` \| `©` \| Copyright \|
			\| `€` \| `€` \| Euro \|

			`---------`

			`## Bonnes pratiques`

			`1. Toujours indenter le code pour une meilleure lisibilité`
			`2. Utiliser des noms de fichiers en minuscules, sans accents ni espaces`
			`3. Valider son code avec le validateur W3C : https://validator.w3.org/`
			4. Utiliser les balises sémantiques plutôt que des `<div>` partout
			5. Toujours mettre un `alt` sur les images
			`6. Séparer structure (HTML) et présentation (CSS)`

			`---------`

			`## Exercices`

			`### Exercice 1 : Structure de base`

			`Créez une page HTML5 valide contenant :`
			`- Un titre de page "Ma première page"`
			- Un titre principal `<h1>` "Bienvenue"
			`- Un paragraphe de présentation`
			`- Un lien vers Google`

			`### Exercice 2 : Les listes`

			`Créez une page présentant :`
			`- Une liste non ordonnée de vos 5 films préférés`
			`- Une liste ordonnée des étapes pour faire des pâtes`

			`### Exercice 3 : Images et liens`

			`Créez une page contenant :`
			`- Une image de votre choix avec un texte alternatif approprié`
			`- Un lien vers Wikipédia qui s'ouvre dans un nouvel onglet`
			`- L'image doit être cliquable et mener vers la source de l'image`

			`### Exercice 4 : Tableau`

			`Créez un tableau HTML présentant les informations suivantes :`

			`\| Matière \| Coefficient \| Moyenne \|`
			`\|---------\|-------------\|---------\|`
			`\| Maths \| 4 \| 14 \|`
			`\| NSI \| 4 \| 16 \|`
			`\| Français \| 3 \| 12 \|`

			`### Exercice 5 : Formulaire`

			`Créez un formulaire d'inscription contenant :`
			`- Un champ pour le nom (obligatoire)`
			`- Un champ pour l'email (obligatoire)`
			`- Un champ pour le mot de passe`
			`- Une case à cocher pour accepter les CGU`
			`- Un bouton d'envoi`

			`### Exercice 6 : Page complète`

			`Créez une page web complète sur un sujet de votre choix avec :`
			`- Une structure sémantique (header, nav, main, footer)`
			`- Un menu de navigation avec au moins 3 liens`
			`- Un article avec titre, paragraphes et une image`
			`- Un tableau récapitulatif`
			`- Un pied de page avec copyright`

			`> [Voir la correction](./CORRECTION.md)`

			`---------`

			`## Ressources`

			`- [MDN - HTML](https://developer.mozilla.org/fr/docs/Web/HTML) : Documentation complète`
			`- [W3Schools - HTML](https://www.w3schools.com/html/) : Tutoriels et exemples`
			`- [Validateur W3C](https://validator.w3.org/) : Vérifier la validité du code`

			`---------`

			`Auteur : Florian Mathieu`

passage des cours en CC BY-SA 2026-08-11 23:29:03 +02:00			`Licence CC BY-SA`
modifications des tp, exercices, ajouts d'indications en JS, d'exemples en gloutons, 3 semaines de boulot enfin voilà 2026-01-15 18:32:27 +01:00
passage des cours en CC BY-SA 2026-08-11 23:29:03 +02:00			`<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.`