L2 MIAGE

SESSION 1 : INTRODUCTION AU WEB

DESIGN
I-DEFINITION DU WEB DESIGN
Le web design est l'art et la science de créer des sites web. Cela inclut à la fois
l'esthétique et la fonctionnalité. Le but est de rendre un site non seulement
visuellement attrayant, mais aussi facile à naviguer et à utiliser.
Composantes principales du web design :
- Structure : Comment les pages sont organisées et connectées entre elles.
- Mise en page Disposition des éléments sur chaque page, y compris les textes,
images, et menus.
- Typographie : Choix et utilisation des polices de caractères.
- Couleur: Palette de couleurs utilisée pour créer une ambiance et une identité
visuelle.
- Graphismes et images : Utilisation d'images, d'icônes et de graphismes pour
améliorer l'attrait visuel.
- Accessibilité : Assurer que le site est utilisable par tous, y compris les
personnes ayant des handicaps.
- Réactivité : Adaptation de la mise en page pour différents appareils
(ordinateurs, tablettes, smartphones).
En résumé le web design vise à créer une expérience utilisateur fluide et
engageante, en combinant esthétique et fonctionnalité

II- HISTORIQUE ET ÉVOLUTION DU WEB DESIGN.

Le web a considérablement évolué, passant des simples pages de texte aux
expériences immersives et interactives d’aujourd’hui. Les étudiants apprendront
comment les technologies telles que HTML, CSS, et JavaScript se sont
développées pour répondre aux attentes croissantes des utilisateurs.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 1 sur 38
 L2 MIAGE

III- LES CONCEPTS DE BASE : UI ET UX :

UI (Interface Utilisateur) fait référence à l'apparence et à la disposition des

éléments sur une page. UX (Expérience Utilisateur) concerne la manière dont un
utilisateur interagit avec le site. Il s’agit d’optimiser la facilité d’utilisation et de
rendre l’expérience agréable pour l’utilisateur.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 2 sur 38
 L2 MIAGE

IV- UI (Interface utilisateur)

1- Définition :

L'interface utilisateur (UI) concerne l'aspect visuel et interactif d'un site ou d'une
application. Elle inclut tous les éléments visibles avec lesquels un utilisateur
interagit, comme les boutons, les icônes, les menus, la typographie, les couleurs,
et la mise en page.

2- Objectifs :

Le but du design UI est de créer une interface esthétiquement plaisante, claire,

et intuitive pour l'utilisateur, en veillant à ce que tous les éléments soient
disposés de manière cohérente et facilement utilisable.
Compétences principales :
La conception UI nécessite des compétences en graphisme, en mise en page, et
en connaissance des tendances visuelles actuelles.

V- UX (Expérience utilisateur)

1- Définition :

L'expérience utilisateur (UX) concerne la perception globale de l'utilisateur lors

de son interaction avec un site ou une application. Cela inclut la facilité
d'utilisation, l'efficacité, et la satisfaction ressentie. Le design UX s'intéresse
donc à l'optimisation de la navigation, de la rapidité d'accès aux informations, et
du confort d'utilisation.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 3 sur 38
 L2 MIAGE

2- Objectifs :
Le design UX cherche à rendre l'expérience utilisateur fluide et agréable, en
assurant que les utilisateurs trouvent ce qu'ils recherchent facilement et que
leur parcours soit cohérent et logique.

3- Compétences principales :

La conception UX repose sur des compétences en recherche utilisateur, en

analyse comportementale, et en tests de produits pour comprendre les attentes
et besoins des utilisateurs.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 4 sur 38
 L2 MIAGE

VI- Différence entre UI (Interface utilisateur) et UX (Expérience

utilisateur).

Critère UI (Interface Utilisateur) UX (Expérience Utilisateur)

Objectif Créer une interface Offrir une expérience de
principal visuellement attractive et navigation agréable et fluide
intuitive
Focalisation Apparence et interactivité Utilité, utilisabilité et satisfaction
de l’utilisateur
Exemples Boutons, couleurs, Navigation, processus de
typographie, icônes paiement, parcours utilisateur
Approche Graphique et esthétique Centrée sur les besoins et
comportements de l’utilisateur
Processus Choix des éléments visuels Analyse du comportement
utilisateur et tests de parcours

En résumé :

UI = Ce que l’utilisateur voit et touche : Les éléments visuels et interactifs.

UX = Ce que l’utilisateur ressent : Le parcours et la satisfaction globale.
Les deux disciplines sont complémentaires. Un bon design UX améliore
l'efficacité de l'interface, tandis qu'un design UI soigné rend cette interface
attrayante et agréable à utiliser.
Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11
Page 5 sur 38
 L2 MIAGE

SESSION 2 : PRINCIPES DE DESIGN

Les principes du web design repose sur plusieurs éléments tels que :

I- LA THÉORIE DES COULEURS

Est un ensemble de règles et de concepts qui expliquent comment les couleurs
interagissent et influencent notre perception. En web design, une bonne maîtrise
des couleurs permet de créer une expérience visuelle harmonieuse, de
transmettre des émotions, et de guider les utilisateurs.

1- Cercle Chromatique

Le cercle chromatique est un outil qui montre la relation entre les couleurs
primaires, secondaires, et tertiaires.

• Couleurs primaires : Rouge, bleu et jaune. Ce sont les couleurs de base,

qui ne peuvent pas être obtenues par le mélange d'autres couleurs.
• Couleurs secondaires : Vert, orange, et violet. Elles sont obtenues en
mélangeant deux couleurs primaires.
• Couleurs tertiaires : Résultent du mélange d’une couleur primaire et
d’une couleur secondaire adjacente (par ex., rouge-orange).

Le cercle chromatique aide à visualiser les combinaisons de couleurs et les

schémas harmonieux.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 6 sur 38
 L2 MIAGE

2- Types d'Harmonies de Couleurs

Deux couleurs opposées sur le cercle chromatique (par exemple, rouge et vert).
Crée un contraste élevé qui attire l’attention et dynamise le design.
Utilisation : Souvent employées pour les appels à l’action (CTA) en raison de leur
visibilité.

- Couleurs Complémentaires

• Deux couleurs opposées sur le cercle chromatique (par exemple, rouge et

vert).
• Crée un contraste élevé qui attire l’attention et dynamise le design.
• Utilisation : Souvent employées pour les appels à l’action (CTA) en raison
de leur visibilité.

- Couleurs Analogues

• Couleurs situées côte à côte sur le cercle chromatique (comme bleu, bleu-
vert et vert).
• Produisent une harmonie douce et naturelle.
• Utilisation : Idéales pour des designs apaisants ou sobres, elles
garantissent une transition visuelle fluide.

- Triadiques

• Trois couleurs également espacées sur le cercle chromatique (par exemple,

rouge, jaune, et bleu).
• Équilibrent contraste et harmonie.
• Utilisation : Pour les designs vifs, elles ajoutent une diversité de couleurs
tout en gardant l’unité visuelle.

- Couleurs Monochromatiques

• Dérivées d’une seule couleur avec des variantes de teintes, nuances, et

tons (par ex., plusieurs tons de bleu).
• Crée un look minimaliste et élégant.
• Utilisation : Les designs monochromatiques sont souvent utilisés pour les
interfaces modernes et les arrière-plans sobres.

3- Schémas en Tétradique (Double complémentaire)

• Deux paires de couleurs complémentaires (par ex., rouge et vert, bleu et

orange).
• Riches en contraste tout en offrant de la variété.
• Utilisation : Parfait pour des designs complexes, ce schéma est souvent
employé pour maintenir l’équilibre dans des designs éclatants.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 7 sur 38
 L2 MIAGE

4- Psychologie des Couleurs

Chaque couleur évoque des émotions et des associations spécifiques, qui

influencent la perception de l’utilisateur.

• Rouge : Énergie, urgence, passion. Utilisé pour attirer l’attention et inciter

à l’action.
• Bleu : Confiance, calme, sécurité. Fréquent dans les secteurs des finances,
de la technologie, et des soins de santé.
• Vert : Nature, santé, croissance. Utilisé dans les secteurs de
l’environnement et de la santé.
• Jaune : Optimisme, chaleur, créativité. Éveille l’attention mais doit être
utilisé avec modération.
• Violet : Luxe, créativité, mystère. Associé au haut de gamme et aux
marques artistiques.
• Noir et Blanc : Élégance, simplicité, sobriété. Ces couleurs neutres sont
parfaites pour les designs modernes et minimalistes.

5- Contrastes et Accessibilité

L’accessibilité visuelle nécessite un bon contraste entre le texte et le fond pour

que les informations soient lisibles pour tous, y compris les utilisateurs souffrant
de déficiences visuelles. Les outils en ligne comme les vérificateurs de contraste
peuvent aider à s'assurer que les combinaisons de couleurs respectent les
normes d’accessibilité (ex., WCAG).

• Exemple : Un texte gris foncé sur un fond blanc est généralement plus
accessible qu’un texte gris clair sur le même fond.

6- Création d’une Palette de Couleurs

Créer une palette harmonieuse est essentiel pour maintenir la cohérence de

l’identité visuelle.

• Couleur principale : Couleur dominante, souvent utilisée dans les

éléments importants comme les boutons de CTA.
• Couleur secondaire : Complète la couleur principale et ajoute de la
diversité.
• Couleurs d’accent : Utilisées pour attirer l’attention sur des éléments
spécifiques (liens, icônes, alertes).
• Couleurs neutres : Blanc, gris, et noir, pour le texte et les arrière-plans.

Conclusion

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 8 sur 38
 L2 MIAGE

La théorie des couleurs aide les designers à concevoir des interfaces

harmonieuses, attractives, et fonctionnelles. En comprenant les relations entre
les couleurs et leurs impacts psychologiques, les designers peuvent créer des
expériences visuelles captivantes, renforcer la lisibilité, et influencer
positivement les utilisateurs.

II- TYPOGRAPHIE

La typographie est un élément fondamental en design, notamment en web

design, où elle influence non seulement l'esthétique, mais aussi la lisibilité et
l'accessibilité du contenu. Elle englobe le choix des polices de caractères, leur
taille, le style, l'espacement et la disposition des textes, et peut grandement
impacter la perception globale d’un site web.

1. Les Catégories de Polices de Caractères

Les polices de caractères se divisent en plusieurs grandes familles, chacune

ayant ses propres caractéristiques visuelles et associations d’usage :

• Serif : Caractères avec empattements (petits prolongements aux

extrémités des lettres). Traditionnellement utilisés pour le texte imprimé,
comme les livres et journaux, ils inspirent la confiance et l’élégance (ex.,
Times New Roman, Georgia).
• Sans Serif : Caractères sans empattements. Ils ont un style épuré et
moderne, très courants en web design en raison de leur lisibilité sur les
écrans (ex., Arial, Helvetica, Roboto).
• Script : Imitent l’écriture manuscrite avec des lignes fluides et courbes.
Utilisés pour des titres ou des éléments de design pour apporter un style
plus personnel ou sophistiqué (ex., Pacifico, Lobster).
• Display : Caractères souvent décoratifs, utilisés pour attirer l'attention
dans des titres et des logos. Ces polices sont très variées en style et
peuvent ajouter du caractère au design.

2. Choisir des Polices pour le Web

Un choix judicieux de polices est crucial pour la lisibilité et la cohérence. Voici

quelques bonnes pratiques :

• Utiliser un maximum de 2 à 3 polices pour maintenir la cohérence

visuelle. Par exemple, une police pour les titres, une autre pour le texte
principal, et éventuellement une pour les éléments de mise en évidence.
• Privilégier la lisibilité : Les polices sans serif comme Arial ou Roboto sont
souvent choisies pour les paragraphes de texte en raison de leur clarté sur
écran.
• Assurer une bonne hiérarchie visuelle : Les titres, sous-titres et corps
de texte doivent avoir des tailles et styles de polices différents pour bien
structurer le contenu.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 9 sur 38
 L2 MIAGE

3. Hiérarchie Typographique

La hiérarchie typographique organise le contenu pour guider les utilisateurs en

mettant en avant les informations importantes. Elle est souvent appliquée en
jouant avec :

• Les tailles : Les titres sont généralement plus grands que le texte
principal.
• Les graisses : L’utilisation du gras attire l’attention sur certains mots ou
phrases.
• Les couleurs : Les variations de couleur dans le texte peuvent aider à
distinguer les éléments sans en abuser.

Une bonne hiérarchie rend un site facile à parcourir et améliore l'expérience

utilisateur en permettant aux visiteurs de repérer rapidement les informations
clés.

4. Espacement et Lisibilité

L’espacement influence grandement la lisibilité et l’esthétique du texte. Quelques

concepts clés :

• Espacement des lettres (kerning) : Ajustement de l’espace entre les

lettres pour une apparence plus équilibrée.
• Espacement des lignes (leading) : Distance verticale entre les lignes de
texte. Un bon espacement des lignes rend le texte plus lisible.
• Espacement des blocs (padding et marges) : Aérer les blocs de texte en
ajoutant de l’espace autour aide à éviter un effet de surcharge visuelle.

5. Pratiques d'Accessibilité

L’accessibilité dans la typographie garantit que les utilisateurs avec des

déficiences visuelles ou des troubles de lecture peuvent lire et comprendre le
contenu. Quelques bonnes pratiques :

• Contraste de couleur : Utiliser un contraste adéquat entre le texte et le

fond pour assurer la lisibilité. Des outils en ligne peuvent vérifier si les
contrastes respectent les normes d’accessibilité.
• Taille minimale du texte : Un texte trop petit devient illisible.
Généralement, une taille de 16 px est recommandée pour le texte principal.
• Éviter les polices excentriques : Les polices très stylisées ou difficiles à
lire (comme certaines polices script) ne doivent pas être utilisées pour de
grands blocs de texte.

6. Utilisation des Polices Web (Web Fonts)

Les web fonts comme Google Fonts et Adobe Fonts permettent d’utiliser un large
éventail de polices optimisées pour le web sans compromettre la performance du

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 10 sur 38
 L2 MIAGE

site. Elles garantissent la cohérence visuelle sur différents navigateurs et

appareils.

• Avantages : Variété et qualité de rendu sur tous les appareils.

• Inconvénients : L’utilisation de trop nombreuses polices peut ralentir le
chargement de la page. Il est préférable de limiter le nombre de familles de
polices et de styles.

III- MISE EN PAGE ET COMPOSITION.

La mise en page et la composition sont des aspects essentiels du web design,

car ils déterminent la façon dont les informations sont organisées et présentées.
Une composition bien structurée rend le contenu facile à lire et à naviguer,
améliorant ainsi l’expérience utilisateur.

1. Les Fondements de la Mise en Page

La mise en page regroupe l’ensemble des éléments visuels d’une page, comme le
texte, les images, les icônes, et autres éléments interactifs. Une bonne
composition repose sur plusieurs principes :

• Équilibre : L’équilibre visuel permet de répartir les éléments de manière

harmonieuse. Un équilibre symétrique peut donner un effet formel et
organisé, tandis que l’asymétrie est souvent plus dynamique.
• Proportion et Hiérarchie : La proportion entre les éléments et leur
hiérarchie visuelle aident à diriger l’attention de l’utilisateur sur les
éléments les plus importants, comme les titres ou les boutons d’action
(CTA).
• Répétition et Cohérence : Utiliser des éléments répétés (comme les
couleurs et styles de boutons) renforce la cohérence, et aide l’utilisateur à
comprendre intuitivement la navigation.

2. Grilles et Alignement

L’utilisation de grilles est une technique courante pour organiser les éléments de
manière ordonnée. Les grilles permettent de structurer l’espace en colonnes et
lignes, créant des zones bien définies pour placer les éléments.

• Grilles de colonnes : Diviser une page en colonnes facilite la conception

responsive, car ces colonnes peuvent être réarrangées pour différents
écrans (par exemple, 12 colonnes sur desktop, 4 sur mobile).
• Règle des tiers : Cette règle consiste à diviser une page en tiers
horizontalement et verticalement. Placer les éléments importants le long
de ces lignes de force (ou à leurs intersections) attire naturellement l’œil.
• Alignement : Un alignement cohérent des textes, images et boutons crée
une continuité visuelle et une apparence soignée.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 11 sur 38
 L2 MIAGE

3. Espaces Blancs (White Space)

Les espaces blancs, ou espaces négatifs, sont les zones vides autour des
éléments. Bien utilisés, ils rendent le contenu moins dense et plus facile à lire.

• Fonction esthétique et fonctionnelle : Les espaces blancs améliorent

l’esthétique et permettent à chaque élément de "respirer," augmentant
ainsi la lisibilité et l’attrait visuel.
• Emphase sur les éléments clés : En laissant des espaces blancs autour
des éléments importants, comme un bouton d’action, on peut attirer
l’attention sur eux.

4. Types de Composition

Plusieurs types de composition sont couramment utilisés en design web :

• Mise en page en bloc (ou grille) : Typiquement utilisée pour les sites de
e-commerce, les sites d’actualités, et les portfolios, elle divise l’écran en
zones pour afficher les différents contenus de manière équilibrée.
• Composition en « F » et en « Z » : La disposition en « F » est souvent
utilisée pour les pages chargées de texte, car elle suit le regard de gauche
à droite puis vers le bas. La mise en page en « Z » convient mieux aux pages
simples et est idéale pour les pages d’accueil.
• Composition centrée : Ce type de mise en page place les éléments
centraux au milieu de l’écran et est souvent utilisé pour les pages de
destination ou les pages de connexion.

5. Contraste et Accentuation

Le contraste est utilisé pour différencier les sections et attirer l’attention sur
certains éléments. Par exemple, un bouton coloré sur un fond blanc se démarque
facilement et incite l’utilisateur à cliquer. Quelques techniques de contraste :

• Contraste de couleurs : Les couleurs opposées ou complémentaires

peuvent mettre en avant certains éléments, comme les boutons d’action.
• Contraste de taille : Les titres plus grands que le corps de texte indiquent
la hiérarchie des informations.

6. Compositions Responsives

Le design responsive implique de créer des mises en page qui s’adaptent aux
différents écrans (mobile, tablette, desktop). Voici quelques techniques pour des
compositions adaptatives :

• Réorganisation des grilles : Sur les écrans plus petits, les colonnes
peuvent devenir des lignes, et certains éléments peuvent être cachés ou
réduits.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 12 sur 38
 L2 MIAGE

• Éléments flexibles : Utiliser des unités de mesure flexibles comme les

pourcentages ou les « rem » plutôt que des pixels fixes permet aux éléments
de s’adapter aux écrans de tailles variées.

IV- DESIGN D'INTERACTION.

1. Qu'est-ce que le Design d'Interaction ?

Le design d'interaction (ou Interaction Design, IxD) vise à optimiser l'expérience

utilisateur en se focalisant sur les aspects interactifs d'une interface, tels que les
boutons, les menus, les formulaires, et autres éléments avec lesquels
l’utilisateur interagit.

Principes Clés :

• Retour d’information : Informer l’utilisateur lorsque des actions sont

effectuées (ex. : un bouton qui change de couleur lorsqu’il est cliqué).
• Cohérence : Assurer une uniformité dans les interactions pour que les
utilisateurs comprennent facilement comment naviguer dans l’interface.
• Prévention des erreurs : Conception d’interfaces qui minimisent les
erreurs possibles et permettent de corriger celles qui surviennent.

2. Élément de Base du Design d’Interaction

Les éléments interactifs de base sont les composants qui permettent aux
utilisateurs de réaliser des actions :

• Boutons : Les boutons déclenchent une action lorsqu'ils sont cliqués. Ils
doivent être bien visibles, facilement accessibles, et leur effet doit être clair.
• Formulaires et Champs de Saisie : Utilisés pour la collecte de données,
ils doivent être concis, bien structurés et inclure des guides pour faciliter
la saisie des informations.
• Menus et Navigations : Facilitent le déplacement dans l'interface. Une
bonne structure de navigation est essentielle pour aider les utilisateurs à
trouver facilement ce qu’ils recherchent.
• Animations : Les animations permettent de guider l’utilisateur et d’ajouter
de la fluidité. Par exemple, un menu coulissant ou un effet de transition
entre les pages peut rendre l'interface plus intuitive.

3. Processus de Conception d’Interaction

Un bon design d’interaction suit un processus structuré pour assurer la qualité

de l’expérience utilisateur :

1. Définir les besoins utilisateurs : Comprendre les objectifs et les attentes

des utilisateurs, et identifier les actions qu’ils voudront accomplir.
2. Concevoir des scénarios d'utilisation : Imaginer les parcours utilisateur
pour chaque tâche, et anticiper les actions et réponses du système.
Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11
Page 13 sur 38
 L2 MIAGE

3. Prototypage : Créer des prototypes interactifs pour tester les

fonctionnalités et les parcours utilisateurs. Outils comme Figma, Adobe
XD, ou Sketch permettent de créer des prototypes réalistes.
4. Tests utilisateurs : Recueillir des retours utilisateurs en testant
l’interface pour identifier les points de friction et ajuster les interactions
en conséquence.
5. Optimisation et ajustement : Améliorer les éléments interactifs en
fonction des retours utilisateurs, pour optimiser l’expérience générale.

4. Bonnes Pratiques en Design d’Interaction

• Utilisation de Feedback Visuel : Par exemple, les boutons peuvent

changer de couleur lorsque survolés ou cliqués pour informer l'utilisateur
que son action a été prise en compte.
• Directives de Navigation : Créer des parcours utilisateurs clairs avec des
étapes bien définies. Les utilisateurs doivent savoir où ils se trouvent dans
le processus et comment revenir en arrière si nécessaire.
• Accessibilité : S’assurer que tous les éléments interactifs sont accessibles
pour tous les utilisateurs, y compris ceux ayant des limitations physiques
ou cognitives. Par exemple, les boutons devraient être suffisamment
grands pour être cliqués facilement, même sur mobile.
• Minimiser les Étapes : Réduire au maximum les actions nécessaires pour
accomplir une tâche. Une interface simple et rapide améliore la
satisfaction utilisateur.

5. Exemples Concrets de Design d’Interaction

• Bouton d’Ajout au Panier : Lorsqu’un utilisateur clique sur le bouton «

Ajouter au panier », il pourrait voir une animation, un changement de
couleur, ou un message de confirmation.
• Système de Navigation avec Breadcrumbs : Les « breadcrumbs »
permettent de montrer aux utilisateurs leur position sur le site, et leur
donnent une structure claire pour naviguer en arrière.
• Formulaires avec Feedback en Temps Réel : Si un utilisateur remplit
un formulaire et fait une erreur (ex. : email invalide), un message d'erreur
en temps réel s’affiche à côté du champ concerné pour faciliter la
correction.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 14 sur 38
 L2 MIAGE

SESSION III : INTRODUCTION AUX MEDIAS

QUERIES.

Les media queries sont une fonctionnalité essentielle en CSS qui permet aux
développeurs de créer des sites web adaptatifs en modifiant l'apparence et le
comportement des pages en fonction de la taille de l'écran et des caractéristiques
du dispositif. Elles jouent un rôle clé dans le design réactif (responsive design),
permettant ainsi d'optimiser l'expérience utilisateur pour des écrans de tailles et
de résolutions variées.

I- QU'EST-CE QU'UNE MEDIA QUERY ?

Une media query est une règle CSS conditionnelle qui applique un ensemble de
styles uniquement si certaines conditions sont remplies, par exemple une
largeur d’écran ou une orientation d’écran spécifique (portrait ou paysage). Elle
se compose de trois parties principales :

1. Le type de media : détermine le type de dispositif (écran, impression, etc.).

2. L'opérateur conditionnel : permet de spécifier les conditions à respecter
(comme min-width, max-width, etc.).
3. Les styles CSS : le code CSS s'applique uniquement lorsque la condition
est vraie.

Exemple de Base

Voici un exemple simple qui modifie le style d’une page selon la largeur de l’écran
:
/* Style par défaut */
body {
font-size: 16px;
background-color: white;
}

/* Pour les écrans de 600 pixels ou moins */

@media (max-width: 600px) {
body {
font-size: 14px;
background-color: lightgray;
}
}

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 15 sur 38
 L2 MIAGE

II- TECHNIQUES DE DESIGN REACTIF.

Les techniques de design réactif sont essentielles pour adapter l’apparence et le

fonctionnement d’un site ou d’une application web en fonction de la taille et de
la résolution de l’écran utilisé. Le Responsive Web Design (RWD) assure une
expérience utilisateur optimale sur une grande variété de dispositifs, des petits
écrans de téléphone aux larges écrans d’ordinateurs de bureau.

1. Syntaxe des Media Queries

La syntaxe des media queries commence par le mot-clé @media suivi de

conditions qui définissent le type de média ou la largeur d'écran.

Syntaxe générale

@media (condition) {
/* styles spécifiques */
}

1. Types de conditions courantes

min-width et max-width : définissent des largeurs minimales et maximales.

Exemple : @media (min-width: 768px) {...}

orientation : adapte le style selon l'orientation de l'écran (portrait ou landscape).

Exemple : @media (orientation: portrait) {...}

Combinaison de conditions : en utilisant and pour combiner plusieurs critères.

Exemple : @media (min-width: 600px) and (max-width: 1200px) {...}

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 16 sur 38
 L2 MIAGE

Utilisations Pratiques des Media Queries

1. Adapter la Mise en Page

/* Grille de 3 colonnes pour les grands écrans */

@media (min-width: 992px) {
.colonne {
width: 33.33%;
float: left;
}
}

/* Grille de 1 colonne pour les petits écrans */

@media (max-width: 600px) {
.colonne {
width: 100%;
float: none;
}
}

• Créer des grilles et des colonnes différentes en fonction de la taille

d’écran.Sur les écrans larges, on pourrait utiliser une grille à plusieurs
colonnes, tandis que sur les écrans plus petits, chaque colonne peut
s’afficher en bloc, l’une sous l’autre.

/* Styles par défaut */

.sidebar {
width: 25%;
}

/* Ajustement pour les écrans de moins de 600px */

@media (max-width: 600px) {
.sidebar {
width: 100%; /* Prend toute la largeur sur les petits écrans */
}
}

Utilisation :

Min-width et Max-width : pour définir des points de rupture (breakpoints) en

fonction de la largeur.
Orientation : pour cibler les appareils en mode portrait ou paysage.
Résolution : pour gérer les écrans haute résolution (ex. Retina).

Images et Médias Adaptatifs (Responsive Images

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 17 sur 38
 L2 MIAGE

<img src="petite-image.jpg"
srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg
1500w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="Image adaptative">

Exemple CSS : pour ajuster automatiquement la taille des images.

img {
max-width: 100%; /* L'image ne dépasse jamais la largeur de son
conteneur */
height: auto; /* Garde le ratio de l'image */
}

Flexbox et CSS Grid

Flexbox et CSS Grid sont des systèmes de mise en page qui facilitent
l’agencement d’éléments de manière flexible et adaptative.

• Flexbox : Idéal pour organiser des éléments en ligne ou en colonne, avec

une bonne gestion des espaces entre eux.

.container {
display: flex;
flex-wrap: wrap;
}

.box {
flex: 1 1 200px; /* Chaque élément prend au moins 200px mais peut
s'adapter */
}

CSS Grid : Offre un contrôle avancé sur les grilles de mise en page en deux
dimensions. Idéal pour organiser des sections complètes de pages.

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 18 sur 38
 L2 MIAGE

Typographie Responsive

La typographie responsive ajuste la taille du texte en fonction de la largeur de

l’écran pour garantir une bonne lisibilité. Cela peut se faire avec des unités CSS
relatives comme vw (viewport width), ou avec des médias queries.

• Exemple :

h1 {
font-size: 5vw; /* Ajuste la taille du titre en fonction de la largeur de l'écran
*/
}

• Clamp : clamp() permet de fixer une taille de police qui évolue dans une
fourchette.

h1 {
font-size: clamp(1.5rem, 2vw, 3rem); /* Limite la taille entre 1.5rem et
3rem */
}

Layouts Mobile First

Le concept de Mobile First consiste à concevoir d’abord pour les petits écrans,
puis à adapter la mise en page pour les écrans plus larges. Cette technique
commence par des styles pour mobile, puis les augmente au fur et à mesure.

Exemple

/* Styles pour mobile par défaut */

.menu {
display: none;
}

/* Affichage de la barre de menu pour les écrans plus larges */

@media (min-width: 768px) {
.menu {
display: block;
}
}

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 19 sur 38
 L2 MIAGE

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 20 sur 38
 L2 MIAGE

SESSION IV : INTRODUCTION A LA
CONCEPTION D'INTERFACE UTILISATEUR.
L'introduction à la conception d'interface utilisateur (UI) vise à donner les
bases pour créer des interfaces visuelles intuitives, esthétiques et fonctionnelles,
permettant aux utilisateurs d’interagir avec des applications ou des sites web de
manière efficace. La conception d'interface utilisateur repose sur plusieurs
principes clés, comme la clarté, la cohérence et l'accessibilité, qui contribuent
tous à améliorer l'expérience utilisateur (UX).

I- QU'EST-CE QUE LA CONCEPTION D'INTERFACE

UTILISATEUR (UI) ?

L’interface utilisateur regroupe tous les éléments visuels qui permettent à

l’utilisateur d’interagir avec un produit numérique (boutons, menus,
formulaires, icônes, etc.). Une bonne interface utilisateur doit être simple à
comprendre, agréable à utiliser et accessible pour tous.

1- Objectifs de l'UI :

• Simplicité : Les éléments doivent être clairs, faciles à comprendre et sans

distractions inutiles.
• Efficacité : L'interface doit permettre d’atteindre les objectifs avec un
minimum d'effort et d'étapes.
• Esthétique : Le design visuel contribue à une expérience agréable,
donnant au produit un aspect professionnel et soigné.

2. Principes de Base de la Conception d'Interface Utilisateur

Cohérence Visuelle

Assurer la cohérence dans l'apparence et la fonctionnalité des éléments

d'interface est essentiel pour que les utilisateurs se sentent à l'aise. Cela inclut
les couleurs, la typographie, les icônes et le placement des éléments. Par
exemple, les boutons d'action doivent tous avoir un style similaire, et les titres
doivent être uniformes sur toutes les pages.

Hiérarchie Visuelle

La hiérarchie visuelle aide à guider l’attention de l’utilisateur sur les éléments

les plus importants de la page. Utiliser des tailles de police différentes, des
contrastes de couleur, et des espacements pour mettre en évidence les
informations essentielles.

Feedback Visuel
Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11
Page 21 sur 38
 L2 MIAGE

Donner un retour visuel (ex. : bouton qui change de couleur lors d'un clic)
informe l’utilisateur que son action a été prise en compte. Cela peut inclure des
animations, des messages de confirmation, ou des changements de couleur.

Simplicité et Minimalisme

Réduire le contenu au strict nécessaire pour ne montrer que les informations et

options importantes. Un design minimaliste permet de réduire la charge
cognitive de l'utilisateur, en rendant l’interface plus intuitive.

Accessibilité

L’interface doit être utilisable pour tous, y compris les personnes ayant des
limitations physiques ou cognitives. Cela inclut des éléments comme des
contrastes de couleur appropriés, une navigation clavier-friendly et des textes
lisibles pour les lecteurs d’écran.

3. Composants de l'Interface Utilisateur

Boutons

Les boutons permettent de déclencher des actions (soumettre un formulaire,

ouvrir une fenêtre, etc.). Ils doivent être visibles et suffisamment grands pour
être facilement cliqués, même sur des appareils mobiles.

Menus de Navigation

Les menus guident l’utilisateur dans l’interface, offrant un accès rapide aux
différentes sections. Ils doivent être simples, bien organisés, et facilement
accessibles.

Formulaires

Les formulaires permettent de collecter des informations auprès des utilisateurs.

Un bon design de formulaire est clair, avec des étiquettes explicites et un
feedback d’erreur en temps réel pour les informations manquantes ou mal
saisies.

Icônes et Éléments Graphiques

Les icônes sont des représentations visuelles qui aident à identifier rapidement
des actions ou des catégories. Elles doivent être claires, universelles, et
accompagnées de texte lorsque nécessaire pour éviter les ambiguïtés.

Barres de Recherche

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 22 sur 38
 L2 MIAGE

Utiles pour les interfaces contenant de nombreux éléments ou informations, les

barres de recherche permettent à l’utilisateur de trouver rapidement ce qu'il
recherche. Elles doivent être visibles et faciles d’accès.

4. Outils et Techniques pour la Conception d'Interface Utilisateur

Wireframes et Prototypes

Les wireframes sont des esquisses des interfaces, et les prototypes incluent des
interactions de base pour simuler l'expérience utilisateur. Ils permettent de
tester la disposition des éléments et la fluidité de navigation avant la mise en
production.

Design System

Un système de design regroupe tous les composants visuels de l’interface

(couleurs, typographies, icônes, boutons, etc.) dans une bibliothèque centralisée
pour assurer la cohérence de l’interface.

Grilles de Mise en Page

Les grilles aident à structurer les éléments sur une page, offrant une harmonie
visuelle et facilitant l'organisation du contenu.

5. Exemples Concrets d’Interface Utilisateur

• Page d’Accueil d’un Site e-Commerce : Les éléments principaux incluent

un menu de navigation simple, une barre de recherche bien visible, des
sections avec images pour les catégories de produits, et des boutons
d’appel à l’action clairs (ex. : « Acheter maintenant »).
• Application de Réseaux Sociaux : L’interface inclut des icônes
universelles (like, commentaire, partage), des notifications visuelles pour
le nouveau contenu, et une navigation fluide entre les différentes sections
(fil d’actualité, messages, profil).

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 23 sur 38
 L2 MIAGE

SESSION V : INTRODUCTION AUX NORMES

D'ACCESSIBILITE

L’introduction aux normes d’accessibilité en design web vise à sensibiliser et

à former les designers à créer des sites et applications accessibles à tous, y
compris aux personnes en situation de handicap. Les normes d’accessibilité,
telles que les WCAG (Web Content Accessibility Guidelines), fournissent des
directives pour rendre le contenu web compréhensible, utilisable et navigable
par le plus grand nombre, sans obstacles inutiles.

1. Qu'est-ce que l'accessibilité web ?

L’accessibilité web consiste à concevoir des interfaces permettant à toutes les

personnes, indépendamment de leurs capacités physiques, cognitives ou
sensorielles, d’utiliser facilement un site ou une application web. Elle vise à
garantir une expérience inclusive, en tenant compte des besoins spécifiques de
chacun.

2. Importance de l'accessibilité :

• Éthique et inclusivité : Elle permet à tous d’accéder aux informations et

services en ligne.
• Conformité légale : Dans de nombreux pays, des lois obligent les
entreprises à rendre leurs sites web accessibles.
• Expérience utilisateur améliorée : Un design accessible bénéficie à tous
les utilisateurs, en améliorant la lisibilité, la navigation et la clarté du
contenu.

3. Principales Normes et Règles d'Accessibilité : Les WCAG

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 24 sur 38
 L2 MIAGE

Les WCAG (Web Content Accessibility Guidelines), publiées par le W3C, sont
les normes de référence pour l’accessibilité web. Elles sont organisées autour de
quatre principes principaux, souvent résumés par l'acronyme POUR :
Perceptible, Opérable, Compréhensible, et Robuste.

• Principes des WCAG :

1. Perceptible : Le contenu doit être présenté de manière à être perçu par

les utilisateurs, indépendamment de leurs capacités sensorielles.
o Exemples : Texte alternatif pour les images, sous-titres pour les
vidéos.
2. Opérable : Les utilisateurs doivent pouvoir naviguer et interagir avec le
site.
o Exemples : Utilisation d’une navigation accessible au clavier,
absence d’animations provoquant des crises (épilepsie, par
exemple).
3. Compréhensible : Le contenu doit être clair et compréhensible.
o Exemples : Texte simple et concis, instructions claires pour remplir
les formulaires, aides visuelles ou textuelles.
4. Robuste : Le contenu doit être compatible avec les technologies
d’assistance, présentes et futures.
o Exemples : Utilisation de balises sémantiques HTML, compatibilité
avec les lecteurs d’écran.

4. Techniques et Bonnes Pratiques pour l'Accessibilité

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 25 sur 38
 L2 MIAGE

Texte Alternatif (alt) pour les Images

Ajouter des descriptions aux images pour permettre aux lecteurs d’écran de
décrire l'image aux personnes malvoyantes.

5. Structure Sémantique du Code HTML

Utiliser des balises sémantiques (comme <header>, <nav>, <main>, <footer>,

etc.) aide les utilisateurs de lecteurs d’écran à mieux comprendre la structure de
la page et à naviguer efficacement.

6. Contraste de Couleurs

Assurer un contraste suffisant entre le texte et le fond (ratio minimum de 4,5:1)

pour garantir la lisibilité pour les personnes ayant des troubles de la vision.

7. Navigation au Clavier

Permettre aux utilisateurs de naviguer sur le site avec des touches de clavier
(Tab, Entrée, etc.), sans nécessiter de souris, est essentiel pour les personnes à
mobilité réduite.

8. Sous-titres et Transcriptions

Les vidéos et contenus audio doivent comporter des sous-titres et transcriptions

pour les utilisateurs sourds ou malentendants.

9. Indications et Aides Visuelles

Utiliser des instructions claires et des feedbacks visuels (comme un champ de

formulaire en rouge en cas d’erreur) pour guider les utilisateurs dans l'utilisation
de l'interface.

10. Outils de Test d’Accessibilité

Extensions de Navigateurs (Wave, Axe)

Des outils comme Wave ou Axe peuvent être ajoutés aux navigateurs pour
vérifier le respect des normes WCAG et identifier les éléments non conformes.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 26 sur 38
 L2 MIAGE

11. Lecteurs d’Écran

Des lecteurs d’écran comme NVDA (Windows) et VoiceOver (Mac) permettent de

tester l’interface avec les technologies d'assistance.

12. Validateurs en Ligne (W3C Validator)

Ces outils en ligne vérifient le code HTML et CSS pour s'assurer qu'il respecte
les normes d'accessibilité.

13. Exercice Pratique : Évaluation et Amélioration de l'Accessibilité

Un bon exercice pour pratiquer est d’évaluer un site ou une page en utilisant des
outils de test et des critères d’accessibilité, puis d’implémenter des améliorations
en fonction des résultats obtenus. Par exemple :

• Utiliser un lecteur d’écran pour tester la navigation.

• Analyser le contraste de couleur et ajuster si nécessaire.
• Vérifier les attributs alt des images et les balises sémantiques.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 27 sur 38
 L2 MIAGE

SESSION VI : OUTILS ET LOGICIELS DE

DESIGN

1. Les outils du Web Designer

Aperçu des outils de conception graphique :

Adobe XD :
Adobe XD est une application de conception et de prototypage
d'expérience utilisateur (UX) et d'interface utilisateur (UI). Lien vers Adobe
XD

Sketch :
Sketch est une application de conception graphique exclusive à macOS,
largement utilisée pour la conception d'interfaces utilisateur. Lien vers Sketch

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 28 sur 38
 L2 MIAGE

Figma :
Figma est une plateforme de conception collaborative basée sur le cloud,
permettant le prototypage d'interfaces utilisateur. Lien vers Figma

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 29 sur 38
 L2 MIAGE

Introduction aux éditeurs de code :

Visual Studio Code :
Visual Studio Code est un éditeur de code source léger, gratuit et
multiplateforme. Il prend en charge une variété de langages de programmation.
Lien vers Visual Studio Code

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 30 sur 38
 L2 MIAGE

TP :
1. Installation des logiciels de design
• Adobe XD
• Sketch
• Figma

2. Installation des logiciels de développement

• Visual Studio Code
• Bracket
1. Création de maquette et modèle

Site vitrine
Application de mobile

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 31 sur 38
 L2 MIAGE

SESSION VII : LE FRAMEWORK BOOTSRAP

Bootstrap est un Framework CSS open-source développé par Twitter. Il permet de

créer des sites web responsives rapidement et facilement grâce à ses composants
préconçus et à son système de grille flexible.

Historique et évolution

• Lancement en 2011 : Bootstrap a été créé par Mark Otto et Jacob Thornton chez
Twitter.

• Version actuelle : La dernière version majeure, Bootstrap 5, a été publiée en mai

2021, apportant de nombreuses améliorations, notamment la suppression de
jQuery et un meilleur support des composants personnalisés.

Avantages de l'utilisation de Bootstrap

Responsivité : Les sites web sont automatiquement adaptés à tous les types
d'appareils.
Composants préconçus : Accès à une vaste bibliothèque de composants UI prêts à
l'emploi.
Personnalisation : Facilité de personnalisation via CSS ou SASS.
Documentation complète : Bootstrap offre une documentation exhaustive et des
exemples clairs.

2. Installation de Bootstrap
Installation via CDN

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js"></script>
</body>
</html>

Pour utiliser Bootstrap rapidement, vous pouvez l'inclure directement dans votre
Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11
Page 32 sur 38
 L2 MIAGE

projet à l'aide d'un CDN (Content Delivery Network).

Installation via NPM

Pour des projets plus complexes, vous pouvez installer Bootstrap via NPM :

npm install bootstrap

Configuration avec SASS

Si vous souhaitez utiliser SASS pour personnaliser Bootstrap, installez-le avec NPM
et configurez votre projet :

npm install sass

Créez un fichier styles.scss et importez Bootstrap :

@import "node_modules/bootstrap/scss/bootstrap";

3. Structure de Bootstrap

Grille (Grid System)

Le système de grille de Bootstrap est basé sur 12 colonnes, ce qui permet de créer
des mises en page flexibles.

Exemples de Grille

<div class="container">
<div class="row">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
</div>
</div>

Conteneurs
Bootstrap utilise des conteneurs pour envelopper le contenu et aligner les éléments.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 33 sur 38
 L2 MIAGE

<div class="container"> <!-- Conteneur fixe -->

<h1>Bienvenue</h1>
</div>
<div class="container-fluid"> <!-- Conteneur fluide -->
<h1>Bienvenue</h1>
</div>

Éléments de base
Bootstrap propose des styles prédéfinis pour les éléments de base tels que les
boutons, les formulaires, et les tableaux.

<button class="btn btn-primary">Cliquez ici</button>

Composants de Bootstrap
Composants de base
Bootstrap comprend de nombreux composants tels que :

• Alertes
• Modales
• Boutons
• Barres de navigation (Navbar)
• Exemple de Modale

<!-- Bouton pour déclencher la modale -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#myModal">Ouvrir la modale</button>

<!-- Modale -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Titre de la modale</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Contenu de la modale.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 34 sur 38
 L2 MIAGE

Composants avancés

Carousel

Le carousel permet d'afficher plusieurs éléments dans un diaporama.

<div id="carouselExample" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Image 2">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>

Formulaires

<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>

5. Personnalisation de Bootstrap

Thèmes et variables SASS

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 35 sur 38
 L2 MIAGE

Bootstrap utilise des variables SASS pour faciliter la personnalisation. Vous pouvez
modifier des variables pour changer des couleurs, des polices, etc.

Exemple de personnalisation des variables

// Custom.scss
$primary: #ff5733; // Modifier la couleur principale
@import "node_modules/bootstrap/scss/bootstrap";

.custom-btn {
background-color: #28a745; /* Couleur personnalisée */
color: white;
}

Bonnes pratiques et astuces

Accessibilité
Assurez-vous que votre site est accessible en ajoutant des attributs aria appropriés
et en utilisant des couleurs contrastées.

Optimisation de la performance
• Minifiez vos fichiers CSS et JS.
• Utilisez le CDN pour charger Bootstrap plus rapidement.
• Évitez d'utiliser des composants que vous n'avez pas besoin pour alléger votre
application.
Responsive design
Utilisez les classes de Bootstrap pour créer des mises en page fluides et responsive.
Testez votre site sur différents appareils.

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 36 sur 38
 L2 MIAGE

2. Exemples pratiques
Projet de création d'un site web
Pour mettre en pratique vos compétences, créez un site web simple comprenant :

• Une barre de navigation responsive.

• Une section avec un carousel d'images.
• Un formulaire de contact.
• Une section d'alertes pour les notifications.
• Exemple de structure de projet

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Projet Bootstrap</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css"
>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Mon Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
</ul>
</div>
</nav>

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 37 sur 38
 L2 MIAGE

<!-- Carousel -->

<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Image 2">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>

<!-- Formulaire -->

<div class="container mt-5">
<h2>Contactez-nous</h2>
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"
required></textarea>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></s
cript>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js"></script

Responsable de cours : M.KOFFI ELISEE 07 07 25 83 11

Page 38 sur 38