ECOLE SUPERIEUR DE
GESTION D’INFORMATIQUE
ET DES SCIENCES
INTRODUCTION AU HTML / CSS ET
CREATION DE PAGE WEB
Cinquième séance
Présenté par TANGBANDJA
KABIRATOU
Table des matières
Rappel de la séance précédente
Objectifs de la séance 5
Comprendre le modèle de boîte (box model)
Savoir utiliser margin, padding, border
Découvrir display, position et Flexbox
Être capable de créer une mise en page moderne et responsive
Travaux pratique
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 2
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 5 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
Rappel de la séance précédente
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 3
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 5 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
Objectifs de la séance 5
Comprendre le modèle de boîte (box model)
Savoir utiliser margin, padding, border
Découvrir display, position et Flexbox
Être capable de créer une mise en page moderne et
responsive
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 4
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
LE MODÈLE DE BOÎTE (Box Model)
Qu’est-ce que le Box Model ?
Chaque élément HTML est une boîte rectangulaire composée de :
➢ Contenu
➢ Padding
➢ Border
➢ Margin
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 5
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
LE MODÈLE DE BOÎTE (Box Model)
Illustration du Box Model
(Schéma conseillé avec 4 couches colorées)
➢ Centre : content
➢ Autour : padding
➢ Ensuite : border
➢ Enfin : margin
padding = espace intérieur
margin = espace extérieur
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 6
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
DIMENSIONS ET UNITÉS
Définir la Taille
Utilise px, %, vw, vh
On utilise le width et le height
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 7
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
MARGIN & PADDING & DISPLAY
Padding vs Margin
➢ padding : dedans (intérieur à la boîte)
➢ margin : dehors (espace entre les éléments)
Dans l’ordre : haut, droite, bas, gauche
La propriété display
block : prend toute la largeur (ex: div)
inline : reste dans la ligne (ex: span)
inline-block : combiné
none : cache l’élément
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 8
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
POSITIONNEMENT
Les types de position
➢ static (par défaut)
➢ relative (déplace sans sortir du flux)
➢ absolute (sort du flux, position libre)
➢ fixed (fixé à l’écran)
➢ sticky (colle en haut après scroll)
Possitionnement exact sur la page
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 9
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
FLEXBOX
Pourquoi Flexbox ?
➢ Alignement facile
➢ Responsive
➢ Distribution automatique de l’espace
À retenir
➢ Chaque élément est une boîte (Box Model)
➢ margin, padding, display, position
➢ Flexbox = clé des mises en page modernes
➢ Pratiquez beaucoup pour maîtriser
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 10
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
FLEXBOX
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 11
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
Exercice pratique illustré le flexbox
Créer une galerie de cartes de produits avec 3 éléments par ligne, centrés, avec un petit
espace entre eux. Le tout doit rester responsive (s’adapter à la taille de l’écran).
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 12
Être capable de créer
Rappel de la séance Comprendre le modèle de Savoir utiliser margin, Découvrir display,
Objectifs de la séance 4 une mise en page TP
précédente boîte (box model) padding, border position et Flexbox
moderne et responsive
Exercice pratique pour la séance 5
Créer une page de profil simple, moderne et responsive, qui utilise les connaissances en CSS
apprises jusqu’ici.
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 13
Conclusion
INTRODUCTION AU HTML / CSS ET CREATION DE PAGE WEB 14
