# Résumé du cours HTML
### **Introduction au HTML**
- **HTML** (*HyperText Markup Language*) : langage de description permettant de
structurer les pages web.
- Ce n'est pas un langage de programmation mais un langage de balisage.
- Standardisé par :
- **W3C** (*World Wide Web Consortium*) : garant de la compatibilité des
technologies web.
- **WHATWG** (*Web Hypertext Application Technology Working Group*) :
développement des nouvelles versions.
- Versions majeures :
- HTML1 à HTML5 (HTML5 finalisé en 2014).
---
### **Structure d’une page HTML**
- Une page HTML comprend deux parties principales :
1. **`<head>`** : Contient les métadonnées (titre, description, styles, etc.).
2. **`<body>`** : Contient le contenu visible (texte, images, vidéos, etc.).
#### **Exemple :**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemple de page</title>
</head>
<body>
<p>Contenu de la page.</p>
</body>
</html>
```
---
### **Balises HTML essentielles**
#### **Organisation du texte**
- `<p>` : Paragraphe.
- `<b>` ou `<strong>` : Texte en gras.
- `<i>` ou `<em>` : Texte en italique.
- `<u>` : Texte souligné.
- `<br>` : Retour à la ligne.
- `<hr>` : Ligne horizontale.
- `<mark>` : Texte surligné.
- `<abbr>` : Abréviation.
- `<code>` : Bloc de code.
- `<pre>` : Texte préformaté.
- `<sub>` et `<sup>` : Indices et exposants.
#### **Titres**
- Titres de niveaux hiérarchiques : `<h1>` à `<h6>` (du plus grand au plus petit).
#### **Listes**
- Listes ordonnées : `<ol>`.
- Listes non ordonnées : `<ul>`.
- Listes de définitions : `<dl>`, `<dt>` (terme), `<dd>` (description).
- Attributs : `type` (chiffres, lettres, romains), `start` (point de départ),
`reversed` (ordre inverse).
#### **Liens**
- Création de liens hypertextes :
```html
<a href="https://example.com">Texte du lien</a>
```
- Attributs :
- `href` : URL de destination.
- `target="_blank"` : Ouvre dans un nouvel onglet.
- `download` : Télécharger un fichier.
- `mailto:` : Créer un lien vers une adresse email.
#### **Images**
- Insertion d’images avec `<img>` :
```html
<img src="image.jpg" alt="Texte alternatif" width="300" height="200">
```
- Attributs : `src` (source), `alt` (texte alternatif), `width` et `height`
(dimensions).
- Utilisation de `<figure>` et `<figcaption>` pour ajouter des légendes.
---
### **Formulaires HTML**
- **Balise `<form>`** : Permet de recueillir des données utilisateur.
- Attributs principaux :
- `method` :
- `GET` : Données visibles dans l’URL.
- `POST` : Données envoyées de manière sécurisée.
- `action` : URL de traitement des données.
#### **Zones de saisie**
- Champ monoligne : `<input type="text">`.
- Champ multiligne : `<textarea>`.
- Attributs courants : `placeholder`, `required`, `readonly`, `autofocus`.
#### **Boutons**
- Boutons d’action :
```html
<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>
```
---
### **Tables HTML**
- Structure de base :
```html
<table>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</table>
```
- Balises principales :
- `<table>` : Créer un tableau.
- `<tr>` : Ajouter une ligne.
- `<td>` : Ajouter une cellule.
- `<th>` : Ajouter un en-tête.
- `<caption>` : Titre du tableau.
- `<thead>`, `<tbody>`, `<tfoot>` : Diviser le tableau en sections.
#### **Fusion de cellules**
- Fusionner des colonnes : `colspan`.
- Fusionner des lignes : `rowspan`.
---
### **Médias (Audio et Vidéos)**
- **Insertion audio :**
```html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l’audio.
</audio>
```
- **Insertion vidéo :**
```html
<video controls>
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas les vidéos.
</video>
```
- Attributs : `controls`, `autoplay`, `loop`, `muted`.
---
### **Balises spéciales : `<div>` et `<span>`**
- **`<div>`** : Conteneur générique pour regrouper des éléments (block).
- **`<span>`** : Conteneur pour styliser une partie d’un texte (inline).
#### **Exemple :**
```html
<div style="color: red;">
<p>Texte en rouge.</p>
</div>
<p>Ceci est un <span style="color: blue;">texte bleu</span>.</p>
```
---
### **Outils recommandés**
- Navigateurs : Chrome, Firefox, Edge.
- Éditeurs de texte : Visual Studio Code, Sublime Text, Notepad++.
- Outils en ligne : CodePen, JSFiddle.
---
### **Conclusion**
Ce cours HTML fournit une base solide pour structurer des pages web avec des
éléments textuels, visuels, interactifs, et médias. Chaque balise a un rôle précis
et peut être combinée avec des styles CSS pour enrichir l’expérience utilisateur.
