## 1. Structure HTML5

Cette section démontre l'utilisation des balises sémantiques HTML5.

### Article avec contenu

Ceci est un article qui contient du contenu structuré.

16 janvier 2024

### Barre latérale

Contenu secondaire affiché dans une aside.

## 2. Images et multimédia

Démonstration des différents formats d'images et de leur optimisation.

Format WebP optimisé
Photo en JPG
Icône vectorielle SVG

Lecture audio intégrée :

Votre navigateur ne supporte pas l'audio.

Lecteur vidéo intégré :

Votre navigateur ne supporte pas la vidéo.

Lecteur vidéo Youtube (embed) :

## 3. Révision CSS

Démonstration des sélecteurs CSS, éléments block et inline, et positionnement float.

### Titre avec ID (spécificité forte)

Paragraphe avec classe (spécificité moyenne)

Paragraphe normal (sélecteur de balise)

Élément block
Élément block
Inline 1 Inline 2 Inline 3

Texte qui entoure l'image flottante à gauche. Ceci démontre l'utilisation de la propriété float en CSS.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## 4. Design et présentation web

Exemple de design cohérent avec palette de couleurs limitée et typographie maîtrisée.

### Carte 1

Contenu de la première carte avec du texte d'exemple.

### Carte 2

Contenu de la deuxième carte avec du texte d'exemple.

### Carte 3

Contenu de la troisième carte avec du texte d'exemple.

# Titre principal (Montserrat)

## Sous-titre (Montserrat)

### Titre de section (Montserrat)

Texte de paragraphe en Open Sans. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texte en surbrillance pour attirer l'attention.

## 5. Formulaires HTML

Exemple complet de formulaire avec différents types de champs et validation.

Informations personnelles
Nom complet : *
Adresse email : *
Téléphone :
Date de naissance :
Quantité (1-100) :
Genre : Homme Femme Autre
Centres d'intérêt :
Développement web Design Applications mobiles
Message
Sujet :
Votre message : *
S'abonner à la newsletter

## 6. Positionnement CSS

Démonstration des différentes techniques de positionnement : Flexbox, Grid, et positionnement traditionnel.

### Flexbox

Item 1
Item 2
Item 3
Item 4

### Grid

Header
Sidebar
Main content
Footer

### Positionnement relatif/absolu

Parent relatif
Enfant absolu

### Positionnement fixe

Défilez la page pour voir l'élément fixe en bas à droite.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Élément fixe