Article avec contenu
Ceci est un article qui contient du contenu structuré.
1. Structure HTML5
Cette section démontre l'utilisation des balises sémantiques HTML5.
2. Images et multimédia
Démonstration des différents formats d'images et de leur optimisation.
Lecture audio intégrée :
Lecteur vidéo intégré :
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.
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.