580 lines
14 KiB
Markdown
580 lines
14 KiB
Markdown
# 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
|
|
|
|
Licence CC BY NC
|
|
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-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-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
|