# HTML
## HyperText Markup Language
---
## Qu'est-ce que le HTML?
- **HTML** : HyperText Markup Language
- Langage de balisage pour le Web
- Structure et présente le contenu d’une page web
---
## Éléments HTML et balises
- Chaque élément est défini par une balise, qui peut être ouverte et fermée.
- Les éléments peuvent être imbriqués pour créer une structure hiérarchique dans la page.
Exemple :
```html[]
Ceci est un paragraphe.
Avec quelques chose d’important
```
---
## Attributs HTML
- Les attributs HTML fournissent des informations supplémentaires sur les éléments.
- Ils sont spécifiés dans la balise d’un élément et contiennent des valeurs.
Exemple :
```html[]
Lien vers un site
```
---
## Structure de base d’un document HTML
```html[]
Hello world
Hello world
```
---
## La Typographie
### Les paragraphes
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed tempor ullamcorper leo, id tristique ipsum rhoncus vel.
Vestibulum vitae ultrices lacus. Sed non justo mi.
```
-----
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed tempor ullamcorper leo, id tristique ipsum rhoncus vel.
Vestibulum vitae ultrices lacus. Sed non justo mi.
---
## La Typographie
### Les titres
```html
Titre 1
Titre 2
Titre 3
```
-----
# Titre 1
## Titre 2
### Titre 3
---
## La Typographie
### Les balises Strong et Emphasize (Em)
```html
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed tempor ullamcorper leo.
```
-----
Lorem ipsum **dolor sit amet**, consectetur adipiscing elit. _Sed tempor ullamcorper leo_.
---
## La Typographie
```html
Ceci est une longue citation qui nécessite un retrait
supplémentaire.
Voici une citation en ligne dans un paragraphe.
```
-----
Ceci est une longue citation qui nécessite un retrait supplémentaire.
Titre
Lien vers le titre
```
---
## Création de liste
- HTML propose trois types de listes :
- les listes ordonnées ``
- les listes non ordonnées `
`.
- les liste de définitions `
`.
---
## Création de liste
### Exemple de liste non ordonnée
```html[]
Élément 1
Élément 2
Élément 3
```
-----
- Élément 1
- Élément 2
- Élément 3
---
## Création de liste
### Exemple de liste ordonnée
```html[]
Élément 1
Élément 2
Élément 3
```
-----
1. Élément 1
1. Élément 2
1. Élément 3
---
## Création de liste
### Exemple de liste de définitions
```html[]
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
```
-----
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
---
## Création de tableaux
### HTML utilise les balises
- `
`
- `
` pour les lignes,
- `
` pour les en-têtes de colonnes
- `
` pour les cellules de données.
---
## Création de tableaux
### Tableau basique
```html[1-10|2-5|3|1-10]
L1 C1
L1 C2
L2 C1
L2 C2
```
-----
| L1 C1 | L1 C2 |
|-------|-------|
| L2 C1 | L2 C2 |
---
## Création de tableaux
### Tableau avec en-tête
```html[1-18|2-7|8-17|4-5|1-18]
En-tête C1
En-tête C2
L1 C1
L1 C2
L2 C1
L2 C2
```
---
## Création de tableaux
### Gestion des colonnes
```html[1-22|2-5|1-22]
En-tête C1
En-tête C2
L1 C1
L1 C2
L2 C1
L2 C2
```
---
## Utilisation des médias
### Les images
```html[]
```
---
## Utilisation des médias
### L'audio
```html[]
```
-----
---
## Utilisation des médias
### La vidéo
```html[]
```
-----
---
## Structure sémantique
- HTML offre des balises sémantiques pour décrire.
- Cela améliore :
- l’accessibilité
- le référencement
- la compréhension du contenu par les navigateurs et les lecteurs d’écran.
---
## Structure sémantique
```html[1-16|2-11|4-10|12-24|15-18|19-22|25-27]
Titre de l’en-tête
Titre de la section principale
Titre de l'article
Contenu de l'article…
```
---
## Les metas
```html[1-32|4-5|6-7|8-11|12-13|14-15|16-17|18-19|20-21|22-23|24-25]
```
---
## L’accessibilité
### ARIA Accessible Rich Internet Applications
```html[]
