Développement Web 1 - Cours HTML et CSS.pptx

<<<Programmation web 1>>>
<2024-2025>

Dans cette partie, vous allez :
• Découvrir l’historique du web et du langage HTML
• Manipuler les outils de création d’une page web
• Connaître et manipuler les éléments de base d'une page web
PARTIE 1
Créer une page web en HTML

01- INTRODUCTION AU LANGAGE HTML
3
Historique de l’HTML
Définitions
Le World Wide Web (WWW), abrégé le Web, est le principal service de partage et de recherche d'informations
sur Internet (le réseau informatique mondial).
Le Web donne aux utilisateurs l’accès à une vaste gamme de pages et de documents (appelés ressources) qui
sont connectés au moyen de liens hypertextes (hyperliens) et accessibles via un navigateur.
Les ressources du web correspondent aux entités informatiques comme le texte, les image, les vidéos,
d’autres
ressources.
Pour chaque ressource sur le web, une adresse en ligne appelée URL (Uniform Resource Locator) est attribuée.
Un document hypertexte (composé du texte et des liens hypertextes) est écrit en langage de balisage hypertexte
(HTML).
Le Web fonctionne dans le mode client-serveur :
• Les serveurs sont des programmes informatiques qui stockent et transmettent des documents à d'autres
ordinateurs sur le réseau
• Les clients sont des programmes qui demandent des documents à un serveur
• Le navigateur est le logiciel qui permet aux utilisateurs de visualiser les documents récupérés

4
Historique du web
1980 : un physicien nommé Tim Berners-Lee , chercheur au CERN (Conseil européen pour la recherche nucléaire,
aujourd'hui l'Organisation européenne pour la recherche nucléaire), a proposé un système aux chercheurs pour
leur permettre de partager facilement les documents.
L’objectif du projet, baptisé « World Wide Web », a été de permettre à des scientifiques travaillant dans des
universités et des instituts du monde entier de s'échanger des informations instantanément
1990 : Robert Cailliau (ingénieur et informaticien belge) et Tim Berners-Lee ont collaboré pour travailler ensemble
sur HTML (HyperText Markup Language) mais le projet n'a pas été formellement adopté par le CERN. Le tout
premier HTML était disponible sous la forme d'un document appelé "balises HTML" en 1991 et a été partagé par
Tim Berners-Lee. Les balises HTML comprenaient initialement 18 éléments.
Le web a connu une grande évolution depuis son apparition :

Le web a connu une grande évolution depuis son apparition :
198
9
Invention du
www (Tim
Berners-Lee)
199
0
Tim Berners-Lee
développe le
HTML
199
1
Lancement
du 1er site
web
199
6
Publication
du langage
CSS
199
8
Lancement
officel de
Google
MI
2000
s
Adaptation
du mobile
201
0
Apparition du
terme
“responsive
Web Design”
201
5
Déploiement de
la mise à jour
«mobile-
friendly» par
Google
5

6
Évolution Langage HTML
• HTML 1.0 en
1991
• HTML 2.0
en 1995
• HTML 3.2
en 1997
• HTML 4.01
en 1999
• HTML 5
en 2009

Rôle du W3C
Le W3C (World Wide Web Consortium) est un organisme international à but
non lucratif.
Sa mission est de définir les standards techniques liés au web pour assurer
l'accessibilité et l'interopérabilité des documents Web.
La valeur sociale du Web vient du fait qu'il permet la communication et le
partage des connaissances entre les humains. L'un des principaux objectifs du
W3C est de mettre ces avantages à la disposition de tous, quels que soient leur
infrastructure matérielle et logicielle, et leur langue. Donc, tous les sites web
doivent respecter une norme afin de garantir une meilleure cohérence de
données, de formats et de fonctionnalités.
En l’absence des standards et des normes, chaque navigateur web aura ses
propres règles d'interprétation des données Web. Or, le rôle du W3C est de
standardiser les technologies du web et mettre en accord tous les navigateurs
ainsi que les développeurs sur un ensemble de règles à respecter par tout le
monde.
7

Propriétés des navigateurs
Le rôle d’un navigateur
Récupérer le code (généralement écrit en HTML, CSS,
JavaScript ou d'autres langages de programmation Web), à
partir du serveur, puis l’interpréter et le restituer sous forme
de page Web graphique pour l'affichage.
Interpréter l'adresse d'un site web (URL) et gérer les requêtes
client / Serveur.
Faciliter le développement et le test des pages Web.
Le fonctionnement d’un navigateur
En utilisant le navigateur Web, l'utilisateur envoie une requête
dite "Requête HTTP" au serveur qui héberge le site web.
Le serveur Web reçoit la requête de l'utilisateur qui contient
l'adresse IP du serveur, le port sur lequel tourne le serveur
Web, la ressource demandée et la méthode avec laquelle on
exploite cette ressource.
Le navigateur reçoit la page web demandée sous forme de
code appelé : "code HTML" et l'interprète pour afficher des
objets visuels.
8

02- UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML
Utilisation de Visual Studio Code
Le logiciel Visual studio Code
Visual Studio Code est un logiciel gratuit qui permet l’édition, la correction et le débogage du code
source dans plusieurs langages informatiques : Visual Basic, JavaScript, XML, Python, HTML, CSS, ….
VS code offre :
Une présentation sophistiquée du code.
Une auto-complétion du code source.
Un ensemble d'extensions permettant de simplifier la programmation.
La détection du langage de programmation par l'extension du fichier.
9

Utilisation de Visual Studio Code
Explorateur des fichiers
Pour installer les extensions
Terminal pour écrire les commandes
10

Installation des extensions VS Code
11
Les extensions de VS Code
Les extensions de Visual Studio Code permettent d’accélérer le développement et favorisent le partage entre les
membres de l’équipe de développement. Le modèle d'extensibilité riche de VS Code permet aux «auteurs
d'extensions» ainsi qu’aux utilisateurs d’intégrer facilement à l’environnement de développement de VS code.
Parmi les extensions connues de VS code :
Bracket Pair Colorizer
Better Comments
Snippets
CSS Peak
Icons
GitLens
Import Cost

Installation des extensions VS Code
Écrivez un mot clé et taper "Entrer" pour voir
les extensions disponibles
Figure 6 : Installation des extensions dans VS Code
12

3-DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML
1. Normes W3C
2. Squelette d’une page HTML
3. Balises de bases (contenu)
4. Couleurs
5. Listes en HTML
6. Liens en HTML
7. Balises multimédia (images, audio, vidéo)
8. Tableaux en HTML
9. Balises de structuration

14
03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML
Normes W3C
compatibilité des technologies du World Wide Web telles
Parmi les normes W3C concernant HTML on cite :
• Les balises <html>, <head>, <title>, et <body> sont obligatoires
• Les éléments doivent être correctement imbriqués
• Les éléments doivent toujours être fermés
• Les éléments HTML doivent être en minuscules
• Les documents HTML doivent avoir un élément racine
• Les noms d'attributs doivent être en minuscules
• Les valeurs des attributs doivent être indiqués
Les normes du W3C
W3C est chargé de promouvoir la
que HTML, XML, RDF, CSS,PNG, SVG, …
Validation du code HTML avec W3C Validator:
http://validator.w3.org/

1. Normes W3C
4. Couleurs
5. Listes en HTML
6. Liens en HTML
8. Tableaux en HTML

Squelette d’une page HTML
Squelette d’une page Web
Déclaration du type de document
(HTML 5)
Élément racine qui contient tous les
éléments du document HTML
Contient tout ce que nous
voulons afficher dans la fenêtre
du navigateur
Contient des informations descriptives
sur le document
16

Notion de balise
• Une balise est un élément de texte encadrée par les caractères inférieur (<) et supérieur (>)
• Une balise correspond à un élément du code HTML d'une page web (un objet, une mise en forme, ..)
• Une balise a généralement la forme suivante :
<balise attribut=valeur>Contenu</balise>
Balise ouvrante Balise fermante
On change ces valeurs pour modifier l'apparence de
l'objet
17
<balise attribut=valeur />
ou

Notion d’encapsulation
Les balises doivent être correctement encapsulées :
<p>
<strong>
Paragraphe
</p>
</strong>
<p>
<strong>
Paragraphe
</strong>
</p>
<div>
<h1>titre</h1>
<h2>un sous titre</h2>
<p>un paragraphe avec
<em>des mots importants</em>
pour terminer avec une image
<img src="logo.gif" alt="un
logo"/>
</p>
</div>
Exemple 1 : Code correct
Exemple 2 : Code incorrect
Exemple 3 : Code correct
div
p
img
em
h2
h1
h1
18
h2
em
img
p
div
racine
nœud
feuille

Les types d’éléments HTML
Il existe deux types d'éléments : bloc (bloc) et en ligne (inline)
• Les éléments « bloc » s'étendent en largeur pour remplir totalement l'espace offert par son conteneur. Par défaut,
la boîte devient aussi large que son conteneur, occupant 100% de l'espace disponible. Le nouvel élément bloc
commence dans une nouvelle ligne.
• Les éléments « inline » se suivent en ligne
h1
p
div
img a
19
Bloc Inline
span
Exemples d’éléments « bloc » Exemples d’éléments « inline »

Les types d’éléments HTML
Éléments de niveau bloc en HTML :
20
Éléments de niveau inline en HTML :
<address> <article> <aside> <blockquote> <canvas> <dd> <div>
<dl> <dt> <fieldset> <figcaption> <figure> <footer> <form>
<h1> - < H6> <header> <hr> <li> <main> <nav> <noscript>
<ol>
<video>
<p> <pre> <section> <table> <tfoot> <ul>
<a> <abbr> <acronym> <b> <bdo> <big> <br>
<button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <output> <q>
<samp> <script> <select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>

Balises de base
22
</html>
Rappel:
<!DOCTYPE htlm>
<html>
<head>

<meta charset=«UTF-8»>
<meta name=«description» content=«………….»>
<meta name=«keywords» content=«………….»>
<meta name=«author» content=«………….»>
<meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
<meta http-equiv=«refresh» content=«30»>
<title>….</title>
</head>
<body>

</head>
Structure générale d’une page HTML

L’entête du document HTML
<!DOCTYPE html>
Cette balise spécifie la version du langage HTML (HTML5 dans notre cas).
< html lang="fr" dir="rtl">
L'élément racine d'une page web. Peut spécifier un certain nombre de métadonnées
comme la langue et l'orientation de la page.
<head>
C'est l'élément entête qui contient les métadonnées d'une page web.
Cet élément n’est pas visible sur la page web.
23
Balises de base

La balise <title>
<title>Mon document</title>
Définit le texte à afficher sur la barre du titre.
Titre du document HTML
La balise <body>
<body>
C'est l'élément qui contient tous les composants visibles de la page web : les textes, les
paragraphes, les images, les tableaux, les animations…
25
Balises de base

<!DOCTYPE html>
<html lang="fr" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon document</title>
</head>
<body>

</body>
</html>
26
Balises de base
Exemple d’une page HTML vide

<p title="infobulle sur le paragraphe">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Enim tortor at auctor urna. Dignissim
enim sit amet venenatis. Varius sit amet mattis vulputate enim. Urna et pharetra
pharetra massa massa.
</p>
27
Les paragraphes en HTML
La balise <p> désigne un nouveau paragraphe
L'attribut "title" permet d'afficher un infobulle quand la souris survole le paragraphe.
Exemple de déclaration d’un paragraphe :
Balises de base

Exemple
28
<h1>Niveau1</h1>
<h2>Niveau2</h2>
<h3>Niveau3</h3>
<h4>Niveau4</h4>
<h5>Niveau5</h5>
<h6>Niveau6</h6>
Balises de base
Les titres en HTML
Il existe 6 niveaux de titres (headers) en HTML. Les balises <h1>, <h2>, …<h6> permettent l'affichage
de ces titre.
Niveau1
Niveau2
Niveau3
Niveau4
Niveau5
Niveau6

1. Normes W3C
4. Les couleurs
5. Listes en HTML
6. Liens en HTML
8. Tableaux avec du HTML

30
Les couleurs
Les couleurs en HTML
En HTML, On peut spécifier les couleurs de 3 manières différentes :
• En utilisant la valeur Hex : HEX est un système de numérotation hexadécimale des couleurs (basé sur les
chiffres décimaux de 0 à 9 et les lettres latines A à F). La conception Web utilise le code de couleur
hexadécimal sous forme #RRGGBB : RR est le rouge, GG est le vert et BB est le bleu. Chaque fraction de
couleur est comprise entre 00 et FF.
• En utilisant les noms des couleurs : Les noms des couleurs doivent être spécifiés en anglais (blue, red, etc.).
• En utilisant la valeur RGB (Red, Green, Blue) : Le code couleur RGB est représenté sous forme de 3 couples de
codes en chiffres compris entre 0 et 255. Les trois codes représentent respectivement le dosage du
rouge, du vert et du bleu.
Couleurs du web : Exemples de sites pour avoir les codes des couleurs
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com/

o <p style="color:#8ebf42;"> C'est un texte vert</p>
o <span style="color:red">Le texte est maintenant en rouge.</span>
o <span style="color:#556B2F">Voici le code pour le vert olive foncé.</span>
o <span style="color:#745"> Le code 745 est l’équivalent de 774455.</span>
31
Les couleurs
Les couleurs en HTML (Exemples)

1. Normes W3C
4. Les couleurs
5. Listes en HTML
6. Liens en HTML

33
Les listes
Les listes en HTML
Les listes sont utiles pour apporter de la clarté et de l’ordre aux documents web.
En HTML, il est possible de définir trois types de listes : les listes ordonnées, les listes non ordonnées,
et les listes de définition.
Les balises et les attributs utilisées sont:
• Balise ul : définir une liste non ordonnée (Unordered List)
• Balise ol : définir une liste ordonnée (Ordered List)
• Balise dl : définir une liste de définition (Definition List)
• Balise li : définir un élément de liste (List Item)
• L'attribut "type" permet de préciser le type de numérotation utilisée pour présenter la liste
• L'attribut "value" permet d'initialiser le numéro courant par la valeur souhaitée
• L’attribut "reversed" spécifie que l’ordre de la liste doit être inversé (9,8,7...)

<ul>
<li>Élément1</li>
<li type="circle">Élément2</li>
<li type="square">Élément3</li>
</ul>
<ol>
<li type="I">Élément1</li>
<li type="i">Élément2</li>
<li type="A">Élément3</li>
<li type="a">Élément4</li>
</ol>
Exemple de liste non ordonnée
Exemple 1 de liste ordonnée
<ol>
<li>Élément1</li>
<li>Élément2</li>
<li value="1">Élément3</li>
<li>Élément4</li>
</ol>
Exemple 2 de liste ordonnée
34
Les listes
Les listes ordonnées et non ordonnées :

La liste de définition est délimitée par les balises <DL> (Definition List),
L'élément DT (Definition Title) est utilisé pour donner le titre de la définition et l'élément DD pour
donner la définition.
Pour les deux éléments DT et DD, la balise fermante est optionnelle.
<dl>
<dt>Langages</dt>
<dd>C++</dd>
<dd>Java</dd>
<dd>Python</dd>
<dt>SGBD</dt>
<dd>MySQL</dd>
<dd>MS SQL
Server</dd>
<dd>Oracle</dd>
</dl>
Exemple
35
Les listes
Les listes de définition

37
Les liens
La balise <a>
La balise <a> permet de créer un lien hypertexte, c'est-à-dire rendre une partie du texte active suite au clic de
l’utilisateur.
Pour chaque lien on associe une adresse destination où l'utilisateur sera envoyé après son clic.
Cette balise permet également de créer des liens à l'intérieur d'un document ainsi que l'envoi d'un mail.
Les principaux attributs des liens hypertextes sont :
• href : la cible du lien
• title : affiche une info bulle sur le lien.
• Target :
_blank : ouverture de la page cible dans une nouvelle fenêtre.
_parent : ouverture de la page cible dans le cadre parent (de niveau immédiatement supérieur).
_self : (valeur par défaut), ouverture de la page cible dans le cadre d'appel.
_top : ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET).

Lien vers une url (Lien absolu)
38
Un lien qui s'ouvre dans une nouvelle fenêtre
Lien vers un emplacement dans le même document (Lien interne)
<a href="https://www.html.com/" title="HTML">Site HTML</a>
<a href="https ://www.html,com/" title="HTML" target="_blank">Site HTML</a>
<a href="cible.html" title="Page cible">Cliquer ici pour aller à la
page</a>
<!– Cible du lien-->
<h1 id="haut">titre de la page </h1>
…
<!– Lien -->
<a href="#haut">haut de la page </a>
Les liens
Exemples de liens
Lien vers un autre document HTML(Lien relatif)

Lien hypertexte sur une image
39
<a href="mailto:contact@server.tn"> Contactez-moi par email en cliquant sur ce lien</a>
<a href="http ://getbootstrap.com/" title="Bootstrap">
<img src="../../images/boostrap-logo.png" width="150" height="151" alt="Bootstrap" />
</a>
Les liens
Exemples de liens
Lien pour envoyer un mail

41
Les balises multimédia (images, audio, vidéo)
La balise <img>
La balise <img> permet d’insérer une image dans une page web.
L’attribut src définit le chemin de l'image source
l’attribut alt le texte alternatif si l'image n'est pas affichée.
Les attributs width et height définissent la taille de l’image (en pixels)
Exemple :
<img src="../Photos/ofppt.png" alt="Image non trouvée" width="160" height="100">
<img src="https ://cdn.futura-
sciences.com/buildsv6/images/wide1920/a/f/6/af6da50f25_50168813_6-formes-covid-19-sophie-
james-adobe-stock.jpg" alt="Image non trouvée" width="160" height="100">

42
La balise <picture>
L'élément HTML <picture> permet d'afficher différentes images pour différents appareils ou tailles d'écran. Le
navigateur choisira la source la plus pertinente selon :
• La disposition de la page
• L'appareil utilisé
• Les formats pris en charge
Si aucune correspondance n'est trouvée parmi les éléments <source>, c'est le fichier défini par l'attribut src de
l'élément <img> qui sera utilisé.
Exemple :
<picture>
<source srcset="../Photos/officeG.jpg" media="(min-width : 600px)">
<img src="..//Photos/office.jpg" alt="Pas d'image" width="200px" height="140px">
</picture>
Si la largeur de l'écran dépasse 600 px, c'est la source « officeG.jpg » qui prend l'objet <picture>.
Exemple : W3Schools Tryit Editor

<audio controls autoplay>
<source src=« son.ogg" type="audio/ogg">
<source src=« son.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la balise "audio".
</audio>
43
La balise <audio>
L'élément <audio> permet de lire un fichier audio dans la page HTML
Controls : pour afficher les boutons play, stop, preview…
Autoplay : pour démarrer la lecture automatique de l'audio lors du chargement de la page web.
Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source.
Si le navigateur ne prend pas en charge l'élément <audio>, il affiche le message en bas.
Exemple :

<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne supporte pas la balise "video".
</video>
44
La balise <video>
L'élément <video> permet d'incorporer une vidéo dans une page Web.
Controls : pour afficher les boutons play, stop, …
Autoplay : pour démarrer la lecture automatique de la vidéo lors du chargement de la page web.
Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source.
Si le navigateur ne prend pas en charge l'élément <video>, il affiche le message en bas.
Exemple :

La balise <iframe>
La balise <iframe> spécifie un cadre en ligne.
Un cadre en ligne est utilisé pour incorporer un
autre document dans le document HTML actuel.
Exemple :
<iframe width="640" height="360“
src=“page.html">
</iframe>
45

Ici, l'attribut « alt » apparaitra si le navigateur ne prend pas en charge la balise d'objet.
Exemple 2 : intégrer un document PDF dans un document HTML
46
La balise <object>
L'élément <object> est une solution polyvalente pour inclure des objets génériques.
Cet élément permet aux auteurs HTML de spécifier tout ce qui est requis par un objet pour sa présentation par un agent
utilisateur.
Exemple 1 : intégrer un document HTML dans un autre document HTML
<object data = "data/test.html" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.html">test.html</a>
</object>
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.pdf</a>
</object>

48
Les tableaux
Un tableau simple
• <table> </table> C'est la balise qui permet d'indiquer le début et la fin d'un
tableau.
• <tr> </tr> : indique le début et la fin d'une ligne du tableau.
• <td> </td> : indique le début et la fin du contenu d'une cellule.
• <th> </th> : indique le début et la fin du contenu d'une cellule titre.
• En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>),
on
indique le contenu des différentes cellules (<td> ou <th>).
• Rq : Pour ajouter un titre pour le tableau, il faut utiliser la balise : <caption>
</caption>.

Les tableaux
Un tableau simple
Nom Age Ville
Hajer 21 ans Tunis
Ahmad 22 ans Sfax
Malek 20 ans Gabes
Amina 19 ans Djerba
td
(cellules) th
(cellules titres)
La liste des étudiants
tr
(ligne)
49

Les tableaux
</tr>
<!DOCTYPE html> <tr>
<html> <td>Ahmad</td>
<head> <td>22 ans</td>
<meta charset="utf-8" /> <td>Sfax</td>
<title>tableau simple</title> </tr>
</head> <tr>
<body> <td>Malek</td>
<table border="1"> <td>20 ans</td>
<caption>La liste des étudiants</caption> <td>Gabes</td>
<tr> </tr>
<th>Nom</th> <tr>
<th>Age</th> <td>Amina</td>
<th>Ville</th> <td>19 ans</td>
</tr> <td>Djerba</td>
<tr> </tr>
<td>Hajer</td> </table>
<td>21 ans</td> </body>
<td>Tunis</td> </html>
50

Les tableaux structurés
Les tableaux structurés sont de deux types :
Pour des tableaux, il est possible de les diviser en trois parties :
En-tête ;
Corps du tableau ;
Pied de tableau.
Pour certains tableaux, il se peut qu’on a besoin de fusionner des
cellules entre elles.
51

• Si le tableau est assez gros, on aura tout intérêt à le découper en
plusieurs parties.
• Pour cela, il existe des balises HTML qui permettent de définir les
trois « zones » du tableau :
– l'en-tête (en haut) : il se définit avec les balises <thead></thead> ;
– le corps (au centre) : il se définit avec les balises <tbody></tbody> ;
– le pied du tableau (en bas) : il se définit avec les balises
<tfoot></tfoot>.
52

thead
(entête du tableau)
t
b
o
d
y
(corps du
tableau) tfoot
(pied du tableau)
53

<table border="1">
<caption>
</caption>
<thead>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Ville</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Ville</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Hajer</td>
<td>21 ans</td>
<td>Tunis</td>
</tr>
<tr>
<td>Ahmad</td>
<td>22 ans</td>
<td>Sfax</td>
</tr>
<tr>
<td>Malek</td>
<td>20 ans</td>
<td>Gabes</td>
</tr>
<tr>
<td>Amina</td>
<td>19 ans</td>
<td>Djerba</td>
</tr>
</tbody>
</table>
54

Les tableaux > fusion des cellules
• Il existe deux types de fusion :
– La fusion de colonnes :
• La fusion s'effectue horizontalement.
• On utilisera l'attribut colspan.
– La fusion de lignes :
• La fusion s'effectuera verticalement.
• On utilisera l'attribut rowspan.
• Il faut donner une valeur à l'attribut (que ce soit colspan
ou rowspan) pour indiquer le nombre de
cellules à fusionner entre elles.
55

56
Les tableaux > fusion des cellules
<TABLE border="1">
<CAPTION>Tester quelques paramètres</CAPTION>
<TR>
<TH rowspan="2"> </TH>
<TH colspan="2">Moyenne </TH>
<TH rowspan="2">Age<BR />moyen </TH>
</TR>
<TR>
<TH> Taille </TH>
<TH>Poids </TH>
</TR>
<TR>
<TH>Masculin</TH>
<TD>1.6 </TD>
<TD>75 </TD>
<TD>70</TD>
</TR>
<TR>
<TH>Féminin </TH>
<TD>1.5 </TD>
<TD>65 </TD>
<TD>60</TD>
</TR>
</TABLE>

Les tableaux > colgroup
L’élément <colgroup> est utilisé pour un style spécifique colonnes d’une table.
Chaque groupe est spécifié avec un élément <col>.
L’attribut span spécifie le nombre de colonnes qui obtiennent le style.
L’attribut style spécifie le style à donner aux colonnes.
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
57

1. Normes W3C
4. Les couleurs
5. Listes en HTML
6. Liens en HTML

Balises de structuration
Les balises <div>
La balise HTML <div> (ou division) est un conteneur générique : elle peut contenir n’importe quel
élément HTML.
Cet élément, de type bloc, n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en
forme d'une manière explicite (en utilisant un style CSS).
<div> est très souvent utilisé avec la mise en page CSS d'une page Web.
La balise <span>
La balise <span> ne produit aucun effet visuel mais sert à appliquer un effet de style CCS aux éléments
qu’elle contient (un texte par exmeple).
59

Les balises sémantiques
Une page web est souvent composée d'un menu, d'une sidebarre et d'un pied de page. Tous ces
ensembles peuvent (et doivent) être compris dans des balises qui vont structurer la page.
Un élément sémantique décrit clairement son sens au navigateur et au développeur.
Des exemples d'éléments non-sémantiques: <div> et <span> - ne disent rien sur leur contenu.
Des exemples d'éléments sémantiques: <form>, <table> et <img> - contenu clairement défini.
60

Les balises sémantiques
Plusieurs sites Web utilisent les balises comme : <div id="nav">, <div class="header">, ou <div id="footer">, pour
indiquer les liens de navigation, en-tête, pied de page.
HTML5 propose des éléments sémantiques permettant de définir clairement les différentes parties d'une page
web :
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure> / <figcaption>
• <footer>
• <details> / <summary>
• <mark>
• <main>
• <time>
61

<header>

</header>
Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers certaines
pages qui ne sont pas listées dans le menu :
<footer>

</footer>
62
Les balises <header> et <footer>
Une page est généralement composée d'un header et d'un footer.
Le header peut comprendre (liste non exhaustive) :
• un menu,
• un logo,
• des liens vers des réseaux sociaux,
• …
Exemple :

<nav>
<ul>
<l
i>
<
a
hr
ef
=
"i
n
d
e
x.
ht
63
La balise <nav>
La balise <nav> (utilisée avec une balise <ul> ou <ol>) permet de spécifier les éléments de navigation de la page
(le menu).
Le menu consiste en une liste d'éléments permettant de naviguer entre plusieurs pages du même site, ou bien
vers plusieurs sections de la page.
Exemple :

<main>
<p>Texte d'introduction de mon contenu.</p>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
</main>
64
Les balises <main> et <section>
La balise <main> spécifie le contenu principal de la page web.
La balise <section> permet de segmenter le contenu en plusieurs sections.
Exemple :

65
La balise <article>
La balise <article> permet d'incorporer du contenu annexe, comme par exemple :
• des articles de blog,
• des produits,
• des commentaires,
• …
Exemple :
<main>
<p>Texte de mon contenu. Voilà des articles liés à ma page :</p>
<div>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
</div>
</main>

Exemple :
66
<main>
<p>
Texte de mon contenu.
</p>
<aside>
<p>
Texte sans rapport direct.
</p>
</aside>
</
main
>
La balise <aside>
La balise <aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvent
représenté comme une sidebarre :

INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB
1. Balise <form>
2. Champs de saisie (Input, TextArea)
3. Balises de choix (RadioButton, CheckBox, Select)
4. Balises HTML5 pour les formulaires
5. Validation automatique
6. Boutons

04- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB
68
Balise <form>
Un formulaire est une section d'un document web qui permet à un utilisateur de fournir des informations via des
contrôles interactifs
L'élément HTML <form> permet de déclarer un formulaire
L'attribut "action" spécifie la ressource qui va recevoir les données du formulaire pour les traiter (un script).
L'attribut "method" spécifie la méthode d'envoi des données. On distingue deux méthodes :
• GET : permet d'envoyer les données sous forme de chaine de paramètres à travers l'URL. Les données
sont
visibles dans la barre d'adresse.
• POST : permet d'envoyer les données (invisibles) à travers une requête HTTP.
Exemple :
<form action="authentification.php" method="post">

</form>

1. Balise <form>
2. Champs de saisie (Input, TextArea)
3. Balises de choix (RadioButton, CheckBox, Select)
4. Balises HTML5 pour les formulaires
5. Validation automatique
6. Boutons
INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB

Champs de saisie <input>
L'élément <input> Permet de coder différents types d'entrée pour un formulaire, selon la valeur de l'attribut type.
Exemple :
<form action="authentification.php" method="post">
<input type="text" id="firstname" name="firstname">
</form>
Types d’Input HTML
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
70

Champs de saisie <input>
Type texte
<form>
<label for="fname">Prénom :</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nom de famille :</label><br>
<input type="text" id="lname" name="lname">
</form>
Type password
<form>
<label for="username">Nom d’utilisateur :</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Mot de passe :</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Pour retourner à la ligne
71

Champs de saisie <textarea>
L'éléments <textarea> permet d'afficher et saisir un texte en plusieurs ligne.
Exemple :
<textarea>écrivez votre message ici
</textarea>
72

Balises de choix (RadioButton)
Type radio
Les boutons radio permettent à un utilisateur d’en sélectionner SEULEMENT UN parmi un nombre limité de choix :
<form>
<input type="radio" id="male" name="genre" value="Masculin">
<label for="male">Masculin</label><br>
<input type="radio" id="female" name="genre value="Féminin">
<label for="female">Féminin</label><br>
</form>
Type number
<form>
<label for="quantité">Quantité :</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
74

Balises de choix (CheckBox)
Type checkbox
<input type="checkbox"> définit une case à cocher .
Les cases à cocher permettent à un utilisateur de sélectionner ZERO ou PLUS d'options d'un nombre limité de
choix.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> J'ai un vélo</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">J'ai une voiture</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> J'ai un bateau</label>
</form>
75

Balises de choix (select)
Type select
L'élément HTML <select> représente un contrôle qui fournit un menu d'options :
L’attribut id associe un identifiant unique à la liste
L’attribut name représente le nom du point de données associé lors de la soumission au serveur.
L’attribut multiple spécifie si plusieurs options peuvent être sélectionnées, et size spécifie combien d'options doivent être
affichées à la fois.
L’élément <option> définit une option de la liste.
Chaque élément <option> doit avoir un attribut value contenant la valeur de données à soumettre au serveur lorsque cette
option est sélectionnée. L’attribut selected sur un élément <option> le rend sélectionné par défaut lors du premier chargement
de la page.
<label for="langage">Sélectionner un langage de programmation:</label>
<select name="lg" id="langage">
<option value="">--Choisir -</option>
<option value="Python">Python</option>
<option value="CSharp">C#</option>
<option value="java">java</option>
</select>
76

Balises HTML5 pour les formulaires
Type color
<form>
<label for="favcolor">Select your favorite color :</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Type date
<form>
<label for="birthday">Birthday :</label>
<input type="date" id="birthday" name="birthday">
</form>
78

<form>
<label for="birthdaytime">Birthday (date and time) :</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
79
<form>
<label for="email">Enter your email :</label>
<input type="email" id="email" name="email">
</form>
Type email
Essentiellement utilisé pour bénéficier de la possibilité de validation d'Email et de voir les boutons raccourcis d'un clavier
spécifique si on utilise la page web sur un smartphone.
Type datetime-local
Le <input type="datetime-local"> spécifie un champ de saisie de date et d'heure sans fuseau horaire.

Type file
Le <input type="file"> définit un champ de sélection de fichier et un bouton « Parcourir » pour les téléchargements de fichiers.
<form>
<label for="myfile">Select a file :</label>
<input type="file" id="myfile" name="myfile">
</form>
Type month
<form>
<label for="bdaymonth">Birthday (month and year) :</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Type tel
Le <input type="tel"> est utilisé pour les champs de saisie qui doivent contenir un numéro de téléphone.
<form>
<label for="phone">Enter your phone number :</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
80

<form>
<label for="appt">Select a time :</label>
<input type="time" id="appt" name="appt">
</form>
Type url
Le <input type="url"> est utilisé pour les champs de saisie qui doivent contenir une adresse URL.
<form>
<label for="homepage">Add your homepage :</label>
<input type="url" id="homepage" name="homepage">
</form>
Type week
<form>
<label for="week">Select a week :</label>
<input type="week" id="week" name="week">
</form>
Type time
81

Type search
<form>
<label for="gsearch">Search Google :</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Type range
Le <input type="range"> définit un contrôle pour entrer un nombre dont la valeur exacte n'est pas importante (comme un
contrôle curseur). Plage par défaut est de 0 à 100.
<form>
<label for="vol">Volume (between 0 and 50) :</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
82

83
L'attribut value
L'attribut value spécifie une valeur initiale pour un champ d'entrée.
<form>
<label for="fname">First name :</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name :</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<form>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
L'attribut readonly
L'attribut readonly spécifie qu'un champ d'entrée est en lecture seule.

84
L'attribut maxlength
L'attribut maxlength spécifie le nombre maximum de caractères autorisés.
<form>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN :</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
<form>
<label for="files">Select files :</label>
<input type="file" id="files" name="files" multiple>
</form>
L'attribut multiple
L'attribut multiple spécifie que l'utilisateur est autorisé à saisir plusieurs valeurs.

85
L'attribut pattern
L'attribut pattern spécifie une expression régulière par rapport à laquelle la valeur du champ de saisie est vérifiée lorsque le formulaire est
soumis. L'attribut pattern fonctionne avec les types d'entrée suivants : texte, date, recherche, URL, tél, e-mail et mot de passe.
<form>
<label for="country_code">Country code :</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
L'attribut placeholder
L'attribut placeholder spécifie brièvement un indice qui décrit la valeur attendue d'un champ de saisie (une valeur d'échantillon ou une brève
description du format attendu).
L'attribut placeholder fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail et mot de passe.
<form>
<label for="phone">Enter a phone number :</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678« pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

86
L'attribut required
L'attribut required spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire.
L'attribut required fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail, mot de passe, sélecteurs de
date, numéro, case à cocher, radio et fichier.
<form>
<label for="username">Username :</label>
<input type="text" id="username" name="username" required>
</form>
L'attribut step
L'attribut step spécifie les intervalles de numéros légaux pour un champ de saisie.
Exemple : si step = "3", les nombres légaux peuvent être -3, 0, 3, 6, etc.
L'attribut step fonctionne avec les types d'entrée suivants : nombre, plage, date, datetime-local, mois, heure et semaine.
<form>
<label for="points">Points :</label>
<input type="number" id="points" name="points" step="3">
</form>

87
L'attribut autofocus
L'attribut autofocus spécifie qu'un champ de saisie doit automatiquement obtenir le focus lorsque la page est chargée.
<form>
<input type="text" id="fname" name="fname" autofocus><br>
<input type="text" id="lname" name="lname">
</form>
L'attribut list
L'attribut list fait référence à un élément <datalist> qui contient des options prédéfinies pour un élément <input>.
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

89
Validation automatique
Types de validation des formulaires HTML
La validation d’un formulaire consiste à vérifier si les données saisies par l’utilisateur sont correctes et conformes au
fonctionnement attendu. Si ce n'est pas le cas, la page doit émettre des messages d'erreur.
Exemples de critères de validation : champ de saisi obligatoire, format de l’email ou du numéro de téléphone correct, taille et
format d’un champ de mot de passe (nombre de caractères, présence d’un caractère spécial, lettre majuscule, …)
Les types de validation :
La validation côté client : effectuée au niveau du navigateur, avant de soumettre les données au serveur. Cette validation peut
être mise en œuvre de deux manières :
• La validation JavaScript
• La validation par les fonctions intégrées dans HTML5.
La validation côté serveur : opérée sur le serveur, après soumission des données ont été soumises et avant l’enregistrement des
données dans la base de données.

90
Validation automatique
Validation des formulaires par les fonctions intégrées dans HTML5
1.Utilisation de l’attribut required : rendre une entrée obligatoire et empêcher la soumission du
formulaire si l’entrée est vide.
2.Validation selon une expression régulière avec l’attribut pattern : utile pour valider le numéro de
téléphone par exemple
3.Limitation de la taille des entrées avec les attributs minlength et maxlength (pour les champs input
et textarea) et les attributs min et max pour le champ number
4.L’attribut Novalidate du formulaire (lorsqu'il est présent) précise que les données du form ne
doivent pas être validées lors de son envoi

Boutons
Type submit
<input type="submit"> définit un bouton pour soumettre des données de formulaire à un gestionnaire de formulaire.
Le gestionnaire de formulaires est généralement une page de serveur avec un script pour le traitement des données d'entrée.
<form action="/action_page.php">
<input type="text" id="lname" name="lname"><br>
<br>
<input type="submit" value="Submit">
</form>
92

<input type="text" id="lname" name="lname"><br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Réinitialiser">
</form>
93
Boutons
Type reset
<input type="reset"> définit un bouton de réinitialisation qui réinitialisera toutes les valeurs du formulaire à leurs valeurs par
défaut.

Objectif:
 Maitriser le CSS pour la mise en forme d’une
page web
 Utiliser correctement des
positionnements
pour l’organisation d’une page web avec CSS
 Ajouter des animations
Partie 2
CSS 3
1
Anis Borchani - 2024

Anis Borchani
Définition
2
• CSS : c’est l’abréviation de Cascading Style Sheets
("Feuille de style en cascade").
•C'est dans la feuille de style que l'on va déclarer toute
la mise en forme des pages : la couleur de fond, les
polices de caractère, leurs couleurs, etc.
• HTML pour écrire le contenu de nos pages web.
• CSS pour présenter ce contenu.
• Ces 2 langages sont donc complémentaires.

Où écrire le style CSS
Anis Borchani 3
Le code CSS peut être écrit :
1. dans les balises concernées : CSS En ligne
2. dans l’en-tête du document (on parle de feuille de
styles interne) ;
3. dans un fichier séparé (on parle de feuille de
styles
externe).

Pour définir des propriétés CSS dans une balise, vous
utiliserez l’attribut style :
<balise style="propriété1: valeur1;…; propriétéN: valeurN;">
Exemple:
<h2 style="font-family:Verdana; font-size: 18px;">
Ce titre est en Verdana corps 18
</h2>
Anis Borchani 4
Où écrire le style CSS > Local dans la balise

Il est aussi possible de taper du CSS directement à l’intérieur même du fichier
HTML, entre les balises <head> et </head>.
Vous devrez y mettre une balise <style> </style>à l’intérieur, comme ceci :
<!doctype html>
<head>
<meta charset="utf-8" />
<title>Exemple de CSS dans le header</title>
Anis Borchani 5
</head>
<body>
</body>
</html>
<style>
/* Vous taperez votre code CSS ici */
</style>
Où écrire le style CSS > Style interne

Pour relier une feuille de styles externe à un fichier HTML,
vous utiliserez la balise <Link> dans l’entête de ce fichier
(ici, la feuille de styles a pour nom design.css) :
<link rel="stylesheet" href="design.css" />
• La balise <Link> avertit le navigateur qu’il doit chercher
undocument situé à l’extérieur de la page HTML.
• L’attribut rel="stylesheet“ précise que le document
en question est une feuille de style externe.
• L'attribut href indique l’emplacement du fichier
CSS à utiliser.
Anis Borchani 6
Où écrire le style CSS > Style externe

Anis Borchani 7

Anis Borchani 8
Avantages
 Vous pouvez utiliser le même fichier .css pour plusieurs pages
 Simplifier la maintenance de la mise en forme du site web

La définition de base d'un style est simple :
balise { propriété de style : valeur;…}
p
{
text-align : right;
color : black;
}
élément pour lequel on
défini le style
délimiteurs de début et
de fin de style
Anis Borchani 9
propriété
valeur pour
cette propriété
Définition d'un style

Exemples CSS
10
Anis Borchani
soient
Exemple 1
On veut modifier tous les paragraphes pour qu'ils
écrits en bleu, avec une taille de 18 pixels.
Puisque tous les textes des différents paragraphes sont
entre les balises <p> </p>, le code CSS est donc le suivant :
p {color: blue; font-size: 18px; }
Exemple 2
h3 { font-family: Arial; font-style: italic }
Ici, la balise h3 sera en Arial et en italique. Et dans
le
document, toutes les balises <h3> auront comme style
Arial et italique.

Appliquer un style à plusieurs balises
h1
{ color:re
d;
}
h2 {
color:red;
}
11
Anis Borchani
h1, h2
{ color:re
d;
}

Des commentaires dans du CSS
12
Anis Borchani
Pour faire un commentaire, vous tapez /*, suivi de votre
commentaire, puis */ pour terminer votre commentaire.
p {
color:blue; /* Les paragraphes seront bleus*/
font-size:18px; /* La taille de 18 pixels me semble pas
mal*/
}

Utiliser les classes
13
Anis Borchani
Les class vous permettent de définir un style personnalisé.
Exemple:
Supposons que vous vouliez définir un style appelé"important"
pour écrire le texte en rouge / 18 pixels.
Vous rajouterez l'attribut class="important"à chacune des
balises que vous voulez modifier.
<h1 class=" "> </h1>
<p class=" "> </p>

<!doctype html>
<meta charset="utf-8" />
<head>
<title>Page d'exemple pour tester le CSS</title>
<link rel="stylesheet"type="text/css" href="essai.css" />
</head>
<body>
<p class="important"> Bonjour tout le monde </p>
</body>
14
Anis Borchani
</html> essai.css:
.important { color:red;
font-size:18px; }
Utiliser les classes

L'attribut id
Il fonctionne exactement de la même manière que class, à un
détail prêt :
il ne peut être utilisé qu’une fois.
En pratique, nous ne mettrons des "id"que sur des éléments qui
sont uniques sur votre page, comme par exemple le logo :
<img src="images/logo.png" id="logo" /> Dans le CSS, ce n'est
pas un point que vous devez mettre avant le nom de l'id, mais
un dièse (#) :
#logo {
/* Mettez les propriétés CSS ici */
}
15
Anis Borchani

Anis Borc
Les balises universelles
16
hani
Appliquer une class (ou un id) à certains mots qui ne sont pas
entourés par des balises.
Exemple: modifier uniquement “grand père” dans le
paragraphe suivant :
<p>Comme l’a dit grand père un certain 20 juillet
1969...</p>
<span> </span> : c'est une balise de type inline, c'est une
balise qui se met à l'intérieur d'un paragraphe, comme
<strong>, <em>, <q>.
<div> </div> : c'est une balise de type block. Comme
<p>,
<h1> etc... Elle crée un nouveau "bloc" dans la page,
et provoque donc obligatoirement un retour à la
ligne.
block inline

<p>Comme l'a dit <span class="nom">Neil
Armstrong</span>un certain
20 juillet 1969...</p>
Code CSS :
.nom
{ color:blu
e;
}
Donc pour définir un style applicable seulement à une partie
de la page et non plus à une balise <HTML> précise, vous
pouvez placer un attribut style dans une balise <DIV> (division)
ou <SPAN> ( fusion).
Ces balises définissent une zone de texte donnée, donc tout ce
qui se trouve entre la balise de début et la balise de fin adopte
le style défini. 17
Anis Borchani
Les balises universelles > exemple

Imbrications de balises
18
Anis Borchani
• div, p:
Sélectionne tous les éléments <div> et tous les éléments <p>.
• div p
Sélectionne tous les éléments <p> dans les éléments <div>.
• div> p
Sélectionne tous les éléments <p> dont le parent est un
élément <div>.
• div + p
Sélectionne tous les éléments <p> placés immédiatement
après les éléments <div>.
• div ~ p
Sélectionne tous les éléments <p> précédés d'un
élément
<div>

Taille du texte
19
Anis Borchani
En pixels : c'est une façon très précise d'indiquer la taille du texte.
/* Paragraphes de 14 pixels */ }
p
{
font-size:14px;
h1
{
font-size:22px; /* Titres de 22 pixels */ }
En pourcentage :
Si vous indiquez "100%", le texte aura une taille "normale".
Si vous mettez "130%", le texte aura une taille correspondant
à 130% de la taille normale.

Taille du texte
En donnant une valeur
relative :
xx-small :minuscule
x-small :très petit
small :petit
medium :moyen
large :grand
x-large :très grand
xx-large : plus grand que
le x-large
En em : c’est une autre façon
d’indiquer de manière relative la taille
du texte.
On doit indiquer la taille du texte par
rapport à la taille normale de la police.
"1em" signifie "Taille normale".
.petit_em {
font-size:0.7em;
}
.grand_em
{ font-
size:1.3em;
}
20
Anis Borchani

La propriété CSS qui permet d'indiquer la police est :
font-family
Vous devez indiquer le nom de la police comme ceci
:
font-family:police;
Pour éviter qu'il n'y ait de problème si l'internaute n'a pas
la même police que vous, on met en général plusieurs
noms de police, séparés par des virgules :
font-family:police1, police2, police3, police4;
Le navigateur essaiera d'abord de mettre la police1.
S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a
pas, il essaiera la police3 et ainsi de suite.
21
Anis Borchani
Police du texte

Voici une liste de polices qui fonctionnent bien sur la plupart
des navigateurs :
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
22
Anis Borchani
Police du texte

h1 {
font-family:"Arial Black", Arial, Verdana, serif;/* On essaie
23
Anis Borchani
d'avoir Arial Black en priorité */
}
p {
font-family:"Comic Sans MS", "Trebuchet MS", Georgia,
serif;
}
Police du texte > exemple

Alignement du texte
24
Anis Borchani
On utilise la propriété text-align, et on indique l’alignement
désiré :
• left :le texte sera aligné à gauche (c'est le réglage par défaut).
• center: le texte sera centré.
• right: le texte sera aligné à droite.
• justify: le texte sera "justifié".
Exemple :
.signature
{
text-align:right;/* Pour aligner à droite ma signature */
font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
font-size: 80%;
}

L'indentation: la mise en retrait du texte
25
Anis Borchani
Cela permet par exemple de faire commencer un
paragraphe un peu plus à droite.
On utilise la propriété text-indent
On doit indiquer quelle est la taille du retrait : on peut
le faire en pixels, encentimètres, en millimètres...
p {
text-indent: 30px; /* Les paragraphes commenceront
30 pixels sur la droite */
text-align: justify; /* Ils seront justifiés
*/ font-size: large;
}

Effets de style
26
Anis Borchani
Mettre en italique :
h2 {
font-style: italic;/* Les titres h2 seront en italique ! */
}
Mettre en gras :
p {
font-weight: bold;
}

Les majuscules en CSS
27
Anis Borchani
La propriété text-transform. Elle peut prendre ces valeurs :
uppercase :tout le texte sera écrit en majuscules.
lowercase :tout le texte sera en minuscules.
capitalize :la première lettre de chaque mot sera en majuscules.
none :pas de transformation (par défaut).
h1
{
text-align:center; font-family: Arial, "Times New Roman", Verdana,
serif;
text-transform: capitalize; /* Les premières lettres des mots du
titre seront en majuscules */
}

La décoration du texte
28
Anis Borchani
La propriété text-decoration
underline :souligné.
line-through :barré.
overline :ligne au-dessus.
none :normal (par défaut).

La décoration du texte
text-decoration: line-through;
}
.ligne_dessus {
text-decoration: overline;
}
<h1>A ne pas manquer !</h1>
<p>La propriété CSS <em>text-decoration</em>
permet de décorer un peu son texte :<br />
<span class="souligne">en le
soulignant</span><br />
<span class="barre">en le
barrant</span>...<br />
...ou encore
<span class="ligne_dessus">en mettant une ligne
au- dessus</span>.</p>
h1 {
text-align: center;
font-family:"Arial Black",
Arial,
"Times New Roman", serif;
text-decoration: blink;
}
.souligne
{
text-decoration: underline;
}
.barre
{
29
Anis Borchani

Les couleurs
La propriété qui permet de changer la
couleur du texte est color.
Voici quelques couleurs que vous
pouvez utiliser en tapant simplement
leur nom :
30
Anis Borchani

Les couleurs > Exemple
31
Anis Borchani
h1 {
text-align:center; font-family:Arial, "Arial Black", "Times New
Roman", serif; text-decoration: underline; color: green;/* Le titre
en vert */
}
p {
text-indent: 20px; color: blue;/* Les paragraphes en bleu */
}
strong {
color: red; text-decoration: blink; /* ... et les mots importants en
rouge clignotant ! */
}

Les couleurs > notation hexadécimale
32
Anis Borchani
• Un nom de couleur en hexadécimal, c’est une
combinaison de lettres et de chiffres qui indiquent une
couleur.
• On doit toujours commencer par écrire un dièse (#), suivi
de 6 lettres ou chiffres allant de 0 à 9 et de A à F.
• Ces lettres ou chiffres fonctionnent deux par deux.
Les
2 premiers indiquent une quantité de rouge, les 2
suivants une quantité de vert, et les 2 derniers une quantité
de bleu.
• En mélangeant ces quantités (qui sont les
composantes Rouge-Vert-Bleu de la couleur) on peut
obtenir la couleur qu’on veut.

Les couleurs > notation hexadécimale
33
Anis Borchani

Notation basée sur les valeurs décimales des niveaux des trois
couleurs de base.
La valeur de chaque composante est dans l’interval 0-255
h1 {
text-align:center;
color:rgb(243,65,243);
}
34
Anis Borchani
Les couleurs > notation RGB

Le fond
35
Anis Borchani
• Le fond ne désigne pas forcément le fond de toute une
page web.
• On peut aussi appliquer un fond uniquement aux titres, ou
aux paragraphes, ou encore à certains mots d’un
paragraphe.
• Il existe 3 types de fonds :
• Les fonds comportant une couleur.
• Les fonds comportant des dégradés de couleurs.
• Les fonds comportant une image de fond.

Couleur de fond
36
Anis Borchani
Pour indiquer une couleur de fond, on utilise la propriété CSS
background-color.
Pour indiquer la couleur de fond de la page web, il faut travailler
sur la balise <body> qui correspond à toute la page web.
body {
background-color : black;
color:white;
}
Si on applique une couleur de fond noire et une couleur de
texte blanche à la balise <body>, tous les titres et paragraphes
auront eux aussi une couleur de fond noire et un texte de couleur
blanche.

body {
background-color: black; color: white; /* Toutes les balises
contenues dans body verront leur texte coloré en blanc... */
}
h1 {
color: red; /* ... sauf si je demande expressément de changer
la couleur par la suite */
}
.surligne /* Un style qui permet par exemple de surligner
certains mots d'un texte */ {
background-color:yellow;
color: black; /* Le texte surligné sera écrit en noir*/
}
Couleur de fond > exemple
37
Anis Borchani

La propriété linear-gradiant
crée un dégradé de haut en bas (ou vice-versa) ou en diagonale
Exemple:
background: linear-
gradient(red, yellow);
background: linear-gradient(to
right, red, yellow);
GRADIENT
DIAGONAL
GRADIENT
HORIZONTAL
GRADIENT
VERTICAL
background: linear-gradient(to
bottom right, red, yellow);
Couleur de fond > dégradé
38
Anis Borchani

La propriété radial-gradiant
un dégradé radial commence à partir d'un point central et rayonne
la couleur vers les bords d'un conteneur
Exemples:
background: radial-gradient(red, yellow, blue);
Couleur de fond > dégradé
background: radial-gradient(red 5%, yellow 15%, blue 60%);
39
Anis Borchani

Image de fond
40
Anis Borchani
• La propriété permettant d'indiquer une image de fond
est
background-image
• Comme valeur, on doit lui mettre url("nom_image.extension")
• L'adresse indiquant où se trouve l'image de fond peut être en
absolu (http://...) ou en relatif (fond.png).
• Si on veut appliquer une image de fond à toute la page, on doit
utiliser la balise <body>
body {
background-image : url("../images/neige.png");
}

Anis Borchani
no-repeat
repeat-x
repeat-y
repeat
Image de fond > répétition
repeat
no-repeat
background-repeat
repeat-x
repeat-y
41

background-attachment:
scroll;
(valeur par défaut)
background-attachment:
fixed;
Image de fond > position
42
Anis Borchani

Style des liens
43
Anis Borchani
a {
text-decoration : none ;/* Les liens ne seront plus soulignés */
color : red ; /* Les liens seront en rouge au lieu de bleu */
font-style : italic; /* Les liens seront en italique */
}

Au passage de la souris :
"a:hover" : Quand la souris est sur le lien" (quand on pointe
dessus).
a:hover {
text-decoration: underline; /*Le lien deviendra souligné quand
on pointera dessus */
color: green;/* Le lien sera écrit en vert quand on pointera dessus
*/
}
Style des liens > pseudo-classes
44
Anis Borchani

• Le pseudo-classe :active permet d’appliquer un style particulier
au moment du clic.
• Le pseudo-classe :visited permet d’appliquer un style au lien
déjà visité.
a:active /* Quand le visiteur clique sur le lien */ {
background-color: #FFCC66; }
a:hover /* Quand le visiteur pointe sur le lien */ {
text-decoration:underline; color:green; }
a:visited {
color: #00FF00;}
a /* Lien normal */ {
text-decoration:none; color:red; font-
style:italic; }
Style des liens > pseudo-classes
45
Anis Borchani

Première lettre et première ligne
46
Anis Borchani
En CSS, il est possible de modifier automatiquement
l’apparence de la première lettre et de la première ligne du
texte contenu dans une balise.
La première lettre
p:first-letter /* La première lettre de chaque paragraphe */
{ font-weight:bold;/* En gras */
font-size:1.2em;/* Ecrit légèrement plus gros que la normale
*/
color:blue;/* En bleu */
}
p {
text-indent:20px;
}

La première ligne
p:first-line {
font-variant: small-caps; /* En petites capitales */
}
p {
text-indent: 20px;
}
47
Anis Borchani
Première lettre et première ligne

Style des listes > Retrait
48
Anis Borchani
La propriété list-style-position permet d'indiquer si on
veut que la liste soit mise en retrait ou non.
list-style-position peut prendre 2 valeurs :
inside : la liste n'est pas mise en retrait.
outside : la liste est mise en retrait (par défaut).

de changer
La propriété list-style-type vous permet
l’apparence de la puce.
Pour les listes non ordonnées (<ul>):
disc : un disque noir (par défaut).
circle : un cercle.
square : un carré.
none :aucune puce ne sera utilisée.
Style des listes > type des puces
La propriété
49
Anis Borchani
list-style-image vous permet d'utiliser
n'importe quelle image à la place d’une puce.
ul {
list-style-image: url (image.png);
}

Pour les listes ordonnées (<ol>) , list-style-type peut prendre les
valeurs:
decimal :des nombres 1, 2, 3, 4, 5... (par défaut)
decimal-leading-zero :des nombres commençant par zéro (01, 02, 03, ...).
upper-roman :numérotation romaine, en majuscules (I, II, III, IV, V...)
lower-roman :numérotation romaine, en minuscules (i, ii, iii, iv, v...)
upper-alpha :numérotation alphabétique, en majuscules (A, B, C, D, E...)
lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
lower-greek : numérotation grecque. (α, β,γ, …)
Style des listes > type de la numérotation
50
Anis Borchani

Dimensionnement et positionnement
Anis Borchani 51
Tout élément CSS se comporte comme une
imbrication successive de 4 boîtes :
• La boîte externe est l’aire de marges. Elle occupe l’espace transparent
entre le bord de l’écran (ou d’un autre élément) et l’élément actif.
•À l’intérieur de l’aire de marges se trouve l’aire de bordures. Gérée
par la propriété border, elle représente les bordures affectées à
l’élément actif.
•Ensuite, l’aire d’espacement : la surface entre le contenu et la
limite intérieure de la bordure. Elle est gérée par la propriété padding.
• Enfin, la boîte la plus intérieure est la boîte de contenu. Elle renferme
le contenu de l’élément actif.

Modèle des boites
Anis Borchani 52

Modèle des boites
Anis Borchani 53

prenons l’exemple de cette
boite. Elle contient du texte,
............................................
..
propriété
margin Bordure ……
Bordure……
Bordure ……
Bordure ……
Dimensionnement > margin
Anis Borchani


Régler la taille de la marge
• margin-top
• margin-bottom
• margin-left
• margin-right
• margin : auto

permet normalement de régler les marges au mieux pour
centrer l’élément.
Dimensionnement > margin
Anis Borchani

............................................
..
Elle possède une bordure rouge, mais qui
aurait aussi bien pu être de n’importe quelle
couleur, en pointillé ou invisible
propriété
border
Dimensionnement > border
Anis Borchani

 border-width

thin, medium, thick

taille spécifiée (en px par exemple)
 border-style

None, hidden,

dotted, dashed, solid, double,

groove, ridge, inset, outset
 border-color

gère la couleur de la bordure
On peut affecter les propriétés ensemble
Ex : border : 5px red solid;
Anis Borchani

 on peut aussi régler individuellement les différentes
bordures
 border-top-width
 border-bottom-width
 border-left-width
 border-right-width
p {
border-top-style: dotted;
border-right-style:
solid; border-bottom-
style: dotted; border-
left-style: solid;
}
Anis Borchani

Et cette bordure peut être plus
ou moins rapprochée du
contenu
propriété
padding
Régler la taille du padding
•padding-top
•padding-bottom
•padding-left
•padding-right
Dimensionnement > padding
Anis Borchani

Dimensionnement > padding

Régler la taille de l’espacement
• padding-top
• padding-bottom
• padding-left
• padding-right
div {
padding: 20px;
}
div {
padding-top: 10px;
padding-right:
30px; padding-
bottom: 50px;
padding-left: 80px;
}
Anis Borchani

• Flux : ordre d’affichage des éléments
• Un bloc peut être positionné de façon normale, relative,
absolue, fixe ou flottante.
•Position normale : Lorsque sa position n’est pas précisée,
un bloc se place dans le flux normal de la page web.
•Position relative, absolue ou fixe : Il est possible de placer
un élément en indiquant un décalage (en haut, en bas, à gauche,
à droite)
• par rapport à sa position dans le flux normal : c’est la
«position relative» (propriété position: relative;) ;
•par rapport au bloc conteneur : c’est la «position
absolue» (propriété position: absolute;) ;
• par rapport à l’écran : c’est la « position fixe » (propriété
position: fixed;).
Anis Borchani 61
Positionnement

Dans chacun de ces trois cas, il faut indiquer un ou deux
décalage(s) :
• un décalage à partir du haut (par exemple : top:
2px;) ou
du bas (par exemple : bottom: 10%;) ;
• un décalage à partir de la gauche (par exemple : left: 5em;)
ou de la droite (par exemple : right: 10px;).
•Position flottante : Un élément peut être déclaré « flottant »
à gauche ou à droite, avec la propriété float qui s’écrit
respectivement : float: left; ou float: right;
Le bloc est placé le plus à gauche ou le plus à droite possible, tout
en gardant sa position verticale dans la boîte de son conteneur.
Anis Borchani 62
Positionnement

 Positionnement relatif
1) l'élément prend sa place dans le flux courant
2) on le décale avec les propriétés top, right, bottom, left
Remarques : permet des superpositions – attention ! l'élément
reste dépendant des éléments frères.
#second
{ position:
relative; left:
20px; bottom:
35px; margin-
left: 3em; width:
150px; height:
50px;
background:
green;
}
#premier
{ margin-left:
3em;
width:100px;
background:
orange;
}
20px
35px
div {
width: 300px;
height: 200px;
background: yellow;
}
Positionnement > relatif
Anis Borchani 63

 Positionnement absolu
L'élément sort du flux, il se place par rapport au premier
ancêtre positionné (en relatif, absolu ou fixe)
#second {
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 50px;
margin:0;
background:
green;
}
#premier
{ margin:0;
width:100px;
background:
orange;
}
div {
position: relative;
width: 300px;
height: 200px;
background: yellow;
}
Positionnement > absolu
Anis Borchani 64
Toutefois; si un élément positionné absolu n’a pas d’ancêtres positionnés, Il utilise le corps du
document et se déplace avec le défilement de la page.

 Positionnement fixe
Cas particulier du positionnement absolu : l'élément ne se
déplace pas lors du défilement
 La profondeur
Par défaut, en cas de superposition, le dernier élément positionné
s'affiche par-dessus les autres
avec z-index => c'est celui qui a le plus grand z-index s'affiche
par- dessus les autres
#premier{ position
: absolute; top: 0;
left: 0;
z-index:10;
width: 100px;
background: #ccc;
}
#second{ position
: absolute; top:
40px;
left: 50px;
z-index:0;
width: 150px;
background: green;
}
Positionnement > fixe
Anis Borchani 65

 Positionnement flottant
L'élément sort du flux normal pour prendre place à droite ou à gauche du
bloc qui le contient. L'élément suivant occupe l'espace libre en épousant sa
forme.
#premier
{ float: right;
width: 100px;
background:
orange;
}
div
{ width:300p
x; height:
200px;
background:
yellow;
}
1
2
#second {
background: green;
}
Positionnement > flottant
Anis Borchani 66

• Display : spécifie si/comment un élément est
affiché.display
– none
– inline
– block
– list-item
– …
• none indique qu’il ne faut pas
réserver de la
place pour cet élément
Anis Borchani
La propriété display

La propriété visibility
Anis Borchani
• visibility peut prendre deux valeurs :
– visible
– hidden
• un élement hidden devient invisible,
mais la place qu’il occupe à l’écran est tout de
même réservée.

On utilise pour fusionner ou non deux bordures adjacentes la
propriété border-collapse.
Cette propriété peut prendre les valeurs suivantes :
• collapse : "Colle" les deux bordures en une
• separate : Affiche les deux bordures distinctement.
On utilise pour modifier l'espacement entre les cellules et les
bordures la propriété border-spacing.
Pour afficher ou non les bordures des cellules ne contenant
aucun contenu visible on utilise la propriété empty-cells. Elle
peut prendre deux valeurs :
• show : Les bordures sont affichées.
• hide : Les bordures ne sont pas affichées. (ou boder:0)
69
Anis Borchani
Style des tableaux

On utilise la propriété caption-side pour modifier la position de
la légende du tableau. Elle peut prendre plusieurs valeurs :
top : La légende est affichée en haut
bottom : La légende est affichée en bas
left : La légende est affichée à gauche
right : La légende est affichée à droite
Exemple :
table{
caption-side:top;
}
70
Anis Borchani
Style des tableaux

Style des tableaux
exemple:
table {
border: medium solid #6495ed;
border-collapse: collapse;
width: 50%; }
th {
font-family: monospace;
border: thin solid #6495ed;
width: 50%;
padding: 5px;
background-color: #D0E3FA;
background-image: url(sky.jpg); }
td {
font-family: sans-serif;
border: thin solid #6495ed;
width: 50%;
padding: 5px;
text-align: center;
background-color:
#ffffff; } caption {
font-family: sans-serif; }
Le résultat obtenu :
71
Anis Borchani

• Crée des coins arrondis autour des éléments de disposition, tels que
les titres, les pieds de page, les encadrés, les boîtes graphiques et
les contours autour des images
• border-radius définit une longueur qui
est généralement exprimée en pixels ou ems, mais qui peut
également être un pourcentage
Bordure arrondi
72
Anis Borchani

Bordure arrondi > exemple
73
Anis Borchani

• Arrondi d'un seul angle d'une boîte :
– border-top-left-radius
– border-top-right-radius
– border-bottom-right-radius
– border-bottom-left-radius
Bordure arrondi > angle
74
Anis Borchani

Ombre avec box-shadow
• Crée des ombres portées autour des éléments
de disposition
• Syntaxe CSS pour créer une ombre :
box-shadow: h-shadow v-shadow blur
spread color inset;
• Requis : Les attributs h-shadow et
v-shadow définissent la position horizontale
et verticale de l'ombre par rapport à la boîte
• Facultatif : blur, spread, color et inset
75
Anis Borchani

Ombre avec box-shadow
76
Anis Borchani

• Un élément opaque ne laisse pas passer
la lumière, tandis que vous pouvez voir
à travers un élément transparent.
• Syntaxe permettant d'appliquer une transparence à
une image ou à un autre élément :
opacity: valeur
• Valeur à virgule flottante comprise entre 0,0 (100 %
transparent) et 1,0 (100 % opaque)
• Exemple :
Avec transparence
77
Anis Borchani
Original
Photo : © AVTG/iStockphoto
Opacité et transparence

Style des formulaires
78
Anis Borchani
<form>
<label>Nom complet :</label>
<input type="text" id="nom" name="nom" required>
<label>Adresse e-mail :</label>
<input type="email" id="email_addr" name="email_addr" required>
<label>Confirmez l'adresse e-mail :</label>
<input type="email" id="email_addr2" name="email_addr2" required>
<label>Date d'arrivée :</label>
<input type="date" id="arrival_dt" name="arrival_dt" required>
<label>Nombre de nuitées (99 Dt par nuit) :</label>
<input type="number" id="nights" name="nights" value="1" min="1" max="30" required>

<label>Nombre d'invités (10 Dt par invité supplémentaire) :</label>
<input type="number" name="guests" value="1" min="1" max="4"
required>
<br>
<label>Code de promotion :</label>
<input type="text" id="promo" name="promo">
<input type="submit" value="Effectuer la réservation" />
</form>
79
Anis Borchani

body{
80
Anis Borchani
font-weight: 400;
font-family: 'Open Sans',sans-serif;
font-size: 13px; }
:invalid {
}
}
background-color: #F0DDDD;
border-color: #e88;
box-shadow:0 0 5px
rgba(255, 0, 0, .8);
:required {
border-color: #88a;
box-shadow: 0 0 5px rgba(0,
0, 255, .5);
form {
width:300px;
margin: 20px auto;
border-color: #99a;

input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border:1px solid #ccc;
font-size:20px;
width:300px;
min-height:30px;
display:block;
margin-bottom:15px;
margin-top:5px;
outline: none;
box-shadow: 0 0
5px rgba(0, 0,
255, .2);
}
81
Anis Borchani

input[type=submit]
{ background:non
e; padding:10px;
cursor: pointer;
}
label{
cursor: pointer;
}
82
Anis Borchani

CSS3 AVANCÉ
 Tranformations
 Animations
 Média Query
 Responsive

TRANSFORMATION 2D
Les transformations CSS 2D permettent de déplacer, faire pivoter, mettre
à l'échelle et incliner des éléments.
La méthode translate()
Exemple : déplacer l'élément <div> de 50
pixels vers la droite et de 100 pixels vers le
bas par rapport à sa position actuelle :
La méthode rotate()
Exemple : faire pivoter l'élément <div> dans le
sens des aiguilles d'une montre de 20 degrés :
div {
width : 300px;
height : 100px;
background-color
:
cyan;
div {
width :
300px; height
: 100px;
background-
color : cyan;
}
border : 1px
solid
black;
}
border : 1px solid
black;
div :hover{
transform
div :hover{
transform :
rotate(20deg);
: translate(50px,100px);
}
}
84
Anis Borchani

TRANSFORMATION 2D
85
Anis Borchani
La méthode scale()
Exemple : augmenter la taille de l'élément <div> de
deux fois sur sa largeur et trois fois sa hauteur :
div {
width :
300px; height
: 100px;
background-
color : cyan;
border : 1px
solid black;
}
div :hover{
transform :
scale(2,3);
}
La méthode skew()
Exemple : incliner l'élément <div> de 20
degrés le long de l'axe X et de 10 degrés le
long de l'axe Y :
div {
width : 300px;
height : 100px;
background-color :
cyan; border : 1px
solid black;
}
div :hover{
transform :
skew(20deg,10deg);
}
La méthode rotateX()
Permet de faire une rotation par
rapport à l'axe X (on peut utiliser
aussi rotateY et rotateZ).
div {
width :
300px; height
: 100px;
background-
color : cyan;
border : 1px
solid black;
}
div :hover{
transform :

TRANSFORMATION 2D
• Méthodes ; translate(), rotate(), scale(), skewX(), skewY(), matrix()
86
Anis Borchani

TRANSFORMATION 2D
87
Anis Borchani

ANIMATIONS
• Les animations CSS permettent d’animer la plupart des éléments HTML sans utiliser
JavaScript ou Flash!
• Une animation permet à un élément de changer progressivement de style.
• Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois
que vous le souhaitez.
• Pour utiliser l'animation CSS, vous devez d'abord spécifier des images clés
(@keyframes) pour l'animation.
• Lorsque vous spécifiez des styles CSS dans la règle @keyframes, l'animation passera
progressivement du style actuel au nouveau style à certains moments.
• Pour qu'une animation fonctionne, vous devez la lier à un élément.
• Lorsqu'une animation est terminée, elle reprend son style d'origine.
88
Anis Borchani

ANIMATIONS > PROPRIÉTÉS
Les propriétés détaillées rattachées à la
propriété raccourcie animation sont :
animation-delay : Cette propriété définit le
délai entre le chargement de l'élément et
démarrage de l'animation.
animation-direction : Cette propriété précise
si l'animation doit alterner entre deux
directions de progression (faire des allers-
retours) ou recommencer au début à chaque
cycle de répétition.
animation-duration : Cette propriété définit
la durée d'un cycle de l'animation.
animation-fill-mode : Cette propriété
indique les valeurs à appliquer aux propriétés
avant et après l'exécution de l'animation.
animation-iteration-count : Cette propriété
détermine le nombre de répétition de
l'animation. Pour répéter une animation
infiniment, On utilise la valeur infinite.
animation-name : Cette propriété déclare un
nom à l’animation (utilisé comme référence à
l'animation pour la règle @keyframes ).
animation-play-state : Cette propriété
permet d'interrompre (« pause ») ou de
reprendre l'exécution d'une animation.
animation-timing-function : Cette propriété
configure la fonction de minutage d'une
animation
89
Anis Borchani

ANIMATIONS > EXEMPLES
@keyframes example {
from {background-color :
red;} to {background-color :
yellow;}
}
/* The element to apply the
animation to
*/
div {
width :
100px; height
: 100px;
background-color :
red;
animation-name :
example;
animation-duration :
4s;
}
définit la durée de l’animation
définit le nom de l’animation
Exemple 1 :
90
Anis Borchani

Exemple 2 :
@keyframes example
{
91
Anis Borchani
0% {background-
color :
red;}
25% {background-
color :
yellow;
}
50% {background-
color :
blue;}
100% {background-
color :
green;}
}
/* The element to apply the
animation to
*/
div {
width :
100px; height
: 100px;
background-color : red;
animation-name :
example; animation-
duration : 4s;
}

Exemple 3 :
@keyframes example
{
92
Anis Borchani
0% {background-
color
:red; left :0px; top :0px;}
25% {background-
color
:yellow; left :200px;
top :0px;}
50% {background-
color
:blue; left :200px;
top :200px;}
75% {background-
color
:green; left :0px;
top :200px;}
100% {background-color :red; left :0px;
top :0px;}
}
div {
width : 100px;
height : 100px;
position :
relative;
background-color : red;
animation-name :
example; animation-
duration : 4s;
}

Responsive Design
• Les pages Web peuvent être consultées à l'aide de nombreux types d’appareils : ordinateurs de
bureau, tablettes et téléphones. Ainsi, les pages Web ne doivent pas omettre d'informations
pour s'adapter aux appareils plus petits, mais plutôt adapter leur contenu pour s’afficher
correctement sur n'importe quel appareil utilisé
• La conception Web réactive (Responsive Design) rend la page Web compatible et adaptable à
tous les appareils. Elle est basée uniquement sur HTML et CSS (elle n'est pas un programme ou
un code JavaScript)
• Le Responsive web design consiste à utiliser les langages CSS et HTML pour redimensionner,
masquer, réduire, agrandir ou déplacer le contenu d’une page pour s’adapter à l’écran
d’affichage
93
Anis Borchani

MEDIA QUERY
94
Anis Borchani
Introduction
• Les média queries, apparus avec CSS3, permettent de cibler
différentes caractéristiques des terminaux et d'adapter
la restitution de la page HTML en fonction de l’écran.
– C’est ce que l’on nomme le « Responsive Design
». Les caractéristiques pouvant être :
• Le type de média,
• La taille de l’écran, de la fenêtre,
• L’orientation,
• La résolution,
• le nombre de couleurs,
• …

MEDIA QUERY
• Les
média
propriétés
95
Anis Borchani
queries
ne
mais des
sont
règles
pas des
que
l’on
applique à certaines conditions, telle
que
« Si la résolution de l'écran du visiteur est
inférieure à tant, alors appliquer
les
propriétés CSS suivantes ».
• Un media query est une expression dont la
valeur est toujours vraie ou fausse.

Anis Borchani
MEDIA QUERY
• Appliquer une règle
– Il y a deux manières d’utiliser les media queries :
• En chargeant une feuille de style CSS différente en
fonction de la règle :

<link rel="stylesheet" type="text/css" href="css/mesStyles.css" />

<link rel="stylesheet" media="screen and (max-width: 1280px)"
href="css/petiteResolution.css" />
@media screen and (max-width:
1280px)
{
/* Rédigez vos propriétés CSS
*/
}
<!DOCTYPE html>
<html>
<head> <title>MediaQuery</title>
<link rel="stylesheet" type="text/css“
href="css/mesStyles.css" />
</head>
<body>…/…</body> </html>
En écrivant la règle directement dans le fichier CSS habituel
96

MEDIA QUERY
97
Anis Borchani
• Les règles disponibles
– Les règles peuvent
être préfixées avec min- ou
max-
. Ainsi, min-width et
max-
height
respectivement
signifient
largeur
hauteur
minimale et
maximale.
– Les mots clés suivants : and,
not, only vont permettre
de combiner les règles.
– Les listes séparées par des
virgules se
comportent comme
avec l’opérateur or.
media Type d’écran de sortie, les valeurs possibles :
screen : écran « classique »
handheld : périphérique mobile
print : impression
tv : télévision
projection : projecteur
all : tous les types d'écran
orientation Orientation du périphérique Portrait/Paysage
device-height Hauteur du périphérique
device-width Largeur du périphérique
height Hauteur de la fenêtre de la zone d’affichage
width Largeur de la fenêtre de la zone d’affichage
color Gestion de la couleur (en bits/pixel)
@media all and (orientation:
portrait)
Sur tous types
d'écrans
orientés portrait
@media all and (min-width:
1024px) and (max-
width: 1280px)
Sur tous types
d'écran,
quand la largeur de
la fenêtre est
comprise entre
1024px et 1280px
@media tv Sur les téléviseurs
@media (min-width: 700px),
handheld and (orientation:
landscape)
si l’écran a au minimum
une
largeur de 700 pixels ou
si
un périphérique mobile et

MEDIA QUERY > Exemples
• Contrôle sur la largeur de la fenêtre width
body {
background-
color:white;
color:blue;
}
@media only screen and
(max- width:800px) {
body {
background-color:green;
color:black
}
}
Uniquement si la
taille de la fenêtre
du navigateur passe
en dessous des 800
pixels de large
En dessous de 800px
98
Anis Borchani
Autres

• Contrôle sur la largeur de l’écran device-width
– Pour s’adapter aux smartphones, il est préférable de cibler
la largeur de l’écran et non de la fenêtre
body {
background-
color:white;
color:blue;
}
@media only screen and
(max- device-width:480px)
{
body {
background-color:green;
color:black
}
Uniquement si la
99
Anis Borchani
taille du device
passe en dessous
des 480 pixels de
large

• Les media queries se rencontrent souvent pour
l’amélioration des affichages pour les mobiles
et les règles vont permettre d’agir, comme on
vient de le voir sur la taille des caractères
mais aussi :
– agrandir la taille des contrôles et zones cliquables (pour
une utilisation au doigt),
– ajuster les dimensions et les marges,
– faire passer le contenu sur une seule colonne,
– masquer ou afficher des éléments spécifiques.
100
Anis Borchani

ADAPTER DES TEMPLATES HTML/CSS
101
Anis Borchani
Notion de Template
Un template, également appelé modèle, layout ou Gabarit est souvent utilisé de
manière répétitive pour créer des documents qui partagent une même structure,
abstraction faite de leurs contenus,
C’est une structure représentant la mise en page des documents web passant par le
choix des couleurs jusqu’à l’établissement de la structure des différents éléments
L’utilisation des templates prédéfinis est largement adoptée par les créateurs des sites
web vu que ça leur permet de centrer leurs efforts sur le contenu du site plutôt que le
design.
Que contient un template ?
Le template ou gabarit contient notamment :
zonage du site : le pré-positionnement des zones constituant la page à savoir les
entêtes, l’identité visuelle, les colonnes et le footer/
La localisation des menus de navigation.
L’identité visuelle du site : Les caractères, les formes et les couleurs du contenu textuel
Le contenu visuel tel que les images, les icônes, les fonds…

102
Anis Borchani
Pourquoi utiliser un Template ?
L’utilisation d’un Template permet de créer une cohérence entre les différentes pages
d’un site web. En effet, chaque page du site contient des contenus qui lui sont
appropriés mais elle partage certains éléments avec l’ensemble des pages. Cela permet
aux utilisateurs du site de garder des repères tout au long de la navigation
Comment choisir un Template ?
Avant de faire le choix d’un Template, il faut définir les fonctionnalités et les
contenus du site pour éviter les risques pendant la phase de réalisation. Par exemple
se rendre compte que le mode de fonctionnement du Template ne correspond pas
aux attentes du site.
En choisissant un Template, le designer est engagé à rester dans un cadre prédéfini
(structure des pages, position des menus de navigation…). Donc ce choix n’est pas
adapté au types de projets web qui imposent un design particulier, ou des évolutions
fréquentes.

103
Anis Borchani
Notion de charte graphique d'un site web
La charte graphique d'un site web est l'ensemble des règles fondamentales gérant
l'utilisation des signes graphiques qui constituent l'identité graphique du site.
La charte graphique d'un site se compose de plusieurs éléments essentiels : le logo,
les couleurs, la typographie, les icônes, les images/photos/illustrations, ainsi que les
menus de navigation et le positionnement des blocs de contenus.
Les éléments de la charte graphique d'un site web
Le logo :
Le logo du site est l'élément central de l'identité visuelle. La charte web doit définir
avec précision ses proportions, ses dimensions, et son emplacement exacte sur le
site.
La typographie :
La police d'écriture du site web est aussi importante dans la communication
visuelle. La charte web la définit en s'assurant de sa compatibilité avec les autres
supports de communication.

104
Anis Borchani
Les éléments de la charte graphique d'un site web
Les couleurs :
Le choix des couleurs est primordial pour la réussite du site. Les couleurs
transmettent des messages différents aux visiteurs du site, en fonction du métier de
l'entreprise.
Afin de maximiser l'impact des couleurs (faciliter la mémorisation par exemple),
leur nombre doit être limité à 4 voire 5 maximum.
Les icônes :
Le choix des icônes est aussi important que les autres éléments de la charte
graphique. Les icônes permettent créer l’image de marque du site , et de l’identifier
facilement (comme Facebook, Twitter, LinkedIn, icône du "panier", icône de
"rechercher« , …)
Les images :
La charte graphique du site web doit prévoir une utilisation pertinente des images
en fonction de la mission du site.

INTÉGRER BOOTSTRAP
106
Anis Borchani
C’est quoi Bootstrap ?
• Bootstrap est un Framework gratuit conçu pour permettre un
développement plus rapide et plus facile des pages web
réactives
• Bootstrap comprend des modèles de conception basés sur
HTML et CSS pour la typographie, les formulaires, les boutons,
les tableaux, la navigation, les images, …
• Bootstrap 5 (sortie en 2021) est la dernière version de
Bootstrap (première sortie en en 2013)
• Bootstrap 5 propose de nouveaux composants, une feuille de
style plus rapide et plus de réactivité. Il prend également en
charge les dernières versions stables des principaux
navigateurs et plates-formes.

Avantages Bootstrap
• Facile à utiliser : par les développeurs ayant des
connaissances de base en HTML et CSS.
• Fonctionnalités réactives : le CSS réactif de Bootstrap
s'adapte aux différents médias (téléphones, tablettes
et ordinateurs de bureau).
• Approche mobile first : les styles mobile first font partie
du Framework de base.
• Compatibilité du navigateur : Bootstrap 5 est compatible
avec tous les navigateurs modernes (Chrome,
Firefox, Edge, Safari et Opera).
107
Anis Borchani
INTÉGRER BOOTSTRAP

• Bootstrap 5 à partir de CDN
 Ajouter les liens suivants dans le <head> du document HTML.
 jsDelivr fournit un support CDN pour les CSS et JavaScript de Bootstrap :
108
Anis Borchani
Obtenir Bootstrap
• Pour utiliser Bootstrap 5 sur le site Web, on peut :
 Inclure Bootstrap 5 à partir d'un CDN (Content Delivery Network).
 Téléchargez Bootstrap 5 sur getbootstrap.com et l’associer aux
pages web comme une feuille de style CSS.

<link href="https ://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https ://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
INTÉGRER BOOTSTRAP

BOOTSTRAP > SYSTÈME DE GRILLE
109
Anis Borchani
Les conteneurs
• Les conteneurs (containers) sont l'élément de mise en page le plus
basique dans Bootstrap. Ils sont utilisés par le système de
grille (grid) par défaut.
• Le rôle des conteneurs est de contenir, remplir et (parfois) centrer
le contenu trouvé à leur intérieur.
• Bien que les conteneurs puissent être imbriqués, la plupart des
mises en page ne nécessitent pas de conteneur imbriqué
• Il existe deux classes de conteneurs disponibles :
– La classe .container fournit un conteneur de largeur fixe réactif.
– La classe .container-fluid fournit un conteneur pleine largeur, couvrant
toute la largeur de la fenêtre.
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

• Bordure et couleur du conteneur
– D'autres utilitaires, tels que les bordures et les couleurs, sont également
souvent utilisés avec les conteneurs.
110
Anis Borchani
Le padding du conteneur
• Par défaut, les conteneurs ont un remplissage à gauche et à droite, sans
remplissage en haut ou en bas. Par conséquent, les utilitaires d'espacement
tels que des marges et des marges supplémentaires sont utilisés pour leur
mise en forme.
• Par exemple, .pt-5 signifie "ajouter un grand padding supérieur" :
<div class="container pt-5"></div>
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Les conteneurs réactifs
• Il s’agit des classes .container-sm|md|lg|xl
• Le max-width du conteneur changera selon les différentes tailles
d'écran/fenêtre :
111
Anis Borchani
Classe Super petit Petit
≥576 px
Moyen
768 px
Grand
≥992 px
Extra large
≥1200 px
XXL
≥1400 px
.container-sm 100 % 540 px 720 px 960 px 1140 px 1320 px
.container-md 100 % 100 % 720 px 960 px 1140 px 1320 px
.container-lg 100 % 100 % 100 % 960 px 1140 px 1320 px
.container-xl 100 % 100 % 100 % 100 % 1140 px 1320 px
.container-xxl 100 % 100 % 100 % 100 % 100 % 1320 px

Système de grille Bootstrap
• Le système de grille de base de Bootstrap est conçu avec FlexBox et
propose jusqu'à 12 colonnes sur la page.
• Il est possible de regrouper les colonnes pour créer des colonnes
plus larges :
• Le système de grille est réactif et les colonnes se
réorganiseront automatiquement en fonction de la taille de l'écran.
112
Anis Borchani
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Les classes du Système de grille Bootstrap 5
Le système de grille Bootstrap 5 comporte six classes :
– .col- (très petits appareils - largeur d'écran inférieure à 576 px)
– .col-sm- (petits appareils - largeur d'écran égale ou supérieure à 576 px)
– .col-md- (appareils moyens - largeur d'écran égale ou supérieure à 768 px)
– .col-lg- (grands appareils - largeur d'écran égale ou supérieure à 992 px)
– .col-xl- (appareils xlarge - largeur d'écran égale ou supérieure à 1200 px)
– .col-xxl- (appareils xxlarge - largeur d'écran égale ou supérieure à 1400 px)
113
Anis Borchani

Exemple 1
114
Anis Borchani
<div class="col-*-*"></div>

<div class="row">
</div>
<div class="row">
La première étoile (*) représente la
réactivité : sm, md, lg, xl ou xxl,
tandis que la deuxième étoile représente
un nombre qui doit totaliser 12 pour
chaque ligne.
</div>
Au lieu d'ajouter un nombre à chaque col,
laissez bootstrap gérer la mise en page
pour créer des colonnes de largeur égale.

<div class="row">
<div class="col"></div>
</div>

<div class="row">
<div class="col-sm-3">.col-sm-3</div>
</div>
115
Anis Borchani
<div class="row">
</div>
Exemple 2 : Quatre colonnes de même largeur
L'exemple 2 montre comment créer quatre colonnes de largeur égale en commençant
par les tablettes et en évoluant vers de grands bureaux. Sur les téléphones portables
ou les écrans de moins de 576 px de large, les colonnes s'empilent automatiquement
les unes sur les autres :
Exemple 3 : Deux colonnes réactives inégales
L'exemple 3 montre comment obtenir deux colonnes de largeurs différentes en
commençant par les tablettes et en évoluant vers les supports plus grands:

Le texte avec Bootstarp
• Bootstrap 5 utilise par défaut une valeur font-size de 1 rem (16 px par
défaut) et sa valeur line-heightest de 1,5.
• De plus, tous les éléments de type <p> ont un margin-top : 0 et un
margin-bottom : 1 rem (16 px par défaut).
• On peut également utiliser des classes .h1 et .h6 sur d'autres éléments
les forcer à se comporter comme des titres:
116
Anis Borchani
<p class="h1">h1 Bootstrap heading</p>
BOOTSTRAP > STYLE DU TEXTE

Les couleurs du texte
Les classes pour les couleurs du texte sont : .text-muted, .text-primary, .text-
success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-
dark, .text-body (couleur du corps par défaut, souvent noir) et .text-light :
117
Anis Borchani
<div class="conteneur mt-3">
<h2>Couleurs contextuelles</h2>
<p class="text-muted">Ce texte est normal.</p>
<p class="text-primary">Ce texte est important.</p>
On peut aussi ajouter 50 %
pour le texte noir ou blanc
classes .text-black-50 ou .text
d'opacité
avec les
-white-50.
<p class="text-success">Ce texte indique le succès.</p>
<p class="text-info">Ce texte représente une information.</p>
<p class="text-warning">Ce texte représente un avertissement.</p>
<p class="text-danger">Ce texte représente un danger.</p>
<p class="text-secondary">Texte secondaire.</p>
<p class="text-dark">Ce texte est gris foncé.</p>
<p class="text-body">Couleur du corps par défaut (souvent noir).</p>
<p class="text-light">Ce texte est en gris clair (sur fond blanc).</p>
<p class="text-white">Ce texte est blanc (sur fond blanc).</p>
</div>
BOOTSTRAP > STYLE DU TEXTE

Les couleurs d’arrière plan
• Les classes à utiliser pour les couleurs d'arrière-plan sont : .bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darket .bg-light.
• Remarque: les couleurs d'arrière-plan ne définissent pas la couleur du texte, on
peut dans ce cas utiliser la classe .text-*.
<div class="conteneur mt-3">
<h2>Arrière-plans contextuels</h2>
<p>Notez que vous pouvez également ajouter une classe .text-* si vous souhaitez
une couleur de texte différente :</p>
<p class="bg-primary text-white">Ce texte est important.</p>
<p class="bg-success text-white">Ce texte indique le succès.</p>
<p class="bg-info text-white">Ce texte représente une information.</p>
<p class="bg-warning text-white">Ce texte représente un avertissement.</p>
<p class="bg-danger text-white">Ce texte représente un danger.</p>
<p class="bg- Secondary text-white">Couleur d'arrière-plan secondaire.</p>
<p class="bg-dark text-white">Couleur de fond gris foncé.</p>
<p class="bg-light text-dark">Couleur de fond gris clair.</p>
</div>
118
Anis Borchani
BOOTSTRAP > ARRIÈRE PLAN

Les tableaux
• Une table Bootstrap 5 de base a un padding léger et des
séparateurs horizontaux. La classe .table ajoute un style de
base à une table :
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
BOOTSTRAP > TABLEAUX
119
Anis Borchani

Les tableaux
• La classe .table-bordered ajoute des bordures sur tous les côtés du
tableau et des cellules :
<table class="table table-bordered ">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
120
Anis Borchani

Les tableaux dark mode
• La classe .table-dark ajoute un fond noir à la
table
<table class="table table-dark">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
121
Anis Borchani

Alignement des images
• Les classes .float-start et .float-end permettent de faire flotter une
image à gauche ou à droite.
<img src="mosquee.jpg" class="float-start" <img src="mosquee.jpg" class="float-end" >
122
Anis Borchani
Image centrée
Centrer une image en ajoutant les classes utilitaires .mx-auto(margin :auto) et
.d-block(display :block) à l'image :
<img src="mosquee.jpg" class="mx-auto d-block" >
BOOTSTRAP > IMAGES

Les images réactives
• Les images réactives s'ajustent automatiquement pour s'adapter
à la taille de l'écran.
• On peut créer des images responsives en ajoutant une classe
.img-fluid à la la balise <img>. L'image s'adaptera
alors à
l'élément parent.
• La classe .img-fluid donne : max-width : 100 % et height : auto à
l'image
123
Anis Borchani
<img src="mosquee.jpg" class="img-fluid" >
BOOTSTRAP > IMAGES

formulaire empilée
La classe .form-control permet aux éléments textuels <input> et <textarea>
d’obtenir un style adéquoit dans un formulaire :
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email :</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password :</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
124
Anis Borchani
BOOTSTRAP > FORM

Validation du formulaire
<form action="/action_page.php" class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username :</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password :</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
BOOTSTRAP > FORM
125
Anis Borchani

Styles de boutons
• Bootstrap 5 propose différents styles de boutons. Les classes de
boutons peuvent être utilisées sur les éléments <a>, <button> ou
<input>.
<button type="button" class="btn">De base</button>
<button type="button" class="btn btn-primary">Primaire</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Sombre</button>
<button type="button" class="btn btn-light">Léger</button>
<button type="button" class="btn btn-link">Relier</button>
126
Anis Borchani
BOOTSTRAP > BOUTONS

<button type="button" class="btn btn-outline-primary">Primaire</button>
<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-success">Succès</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Avertissement</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Sombre</button>
<button type="button" class="btn btn-outline-light text-dark">Léger</button>
127
Anis Borchani
Contours de boutons
• Bootstrap 5 fournit également huit types de contours des
boutons :
BOOTSTRAP > BOUTONS

Barre de navigation standard
• La classe .navbar, suivie de la classe de .navbar-expand-xxl|xl|lg|
md|sm
permet de créer une barre de navigation standard
• Les éléments de la barre de navigation seront empilés verticalement sur des
écrans xx large, extra large, large, moyen ou petit).
• Pour ajouter des liens dans la barre de navigation, on utilise un élément <ul> (ou
un <div>) avec la class="navbar-nav".
• Les éléments <li> avec une classe .nav-item suivis d'un élément <a> avec une
classe .nav-link permettent de définir les options de navigation:
<nav class="navbar navbar-expand-sm bg-light">

<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
</ul>
</div>
</nav>
128
Anis Borchani
COMPOSANTS BOOTSTRAP > BARRE DE NAVIGATION

<nav class="navbar bg-light">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Lien 1</a>
</li>
</li>
</li>
</ul>
</div>
</nav>
129
Anis Borchani
Lien 1
Lien 2
Lien 3
COMPOSANTS BOOTSTRAP > BARRE DE NAVIGATION
Barre de navigation verticale
• Une barre de navigation verticale peut être obtenue en supprimant la classe
.navbar-expand-* :

Menu déroulant avec bouton simple
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu
déroulant <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" title="Lien 4">Lien 4></a></li>
</ul>
</div>
COMPOSANTS BOOTSTRAP > MENU DÉROULANT
130
Anis Borchani

Pagination
• La pagination permet de structurer le contenu des pages (les résultats d’une
opération de recherche par exemple)
• Pour créer une pagination de base, ajouter la classe .pagination à un élément
<ul>. Ajouter aussi la classe .page-item (associée aux éléments <li>) et la classe
.page-link associée à chaque lien à l'intérieur <li> :
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Précédent</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Prochain</a></li>
</ul>
COMPOSANTS BOOTSTRAP > PAGINATION
131
Anis Borchani

Barre de progression
• Pour créer une barre de progression par défaut, on utilise la classe
.progress à un élément conteneur et on ajoute la classe .progress-
bar à son élément enfant :
<div class="progress">
<div class="progress-bar" style="width :70%"></div>
</div>
Hauteur de la barre de progression
<div class="progress" style="height :20px">
<div class="progress-bar" style="width :60%"></div>
</div>
COMPOSANTS BOOTSTRAP > PROGRESS BAR
132
Anis Borchani

Cartes
• Une carte dans Bootstrap 5 est une boite bordée avec un peu de
rembourrage autour de son contenu. Il comprend des
options pour les entêtes, les pieds de page, le contenu, l’image,
les couleurs, etc.
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card
image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
COMPOSANTS BOOTSTRAP > CARDS
133
Anis Borchani

Développement Web 1 - Cours HTML et CSS.pptx

Contenu connexe

Similaire à Développement Web 1 - Cours HTML et CSS.pptx

Plus de ssuserf313bf

Dernier

Développement Web 1 - Cours HTML et CSS.pptx